@charset "utf-8";

/* ************************************************************************************
 このCSSファイルの著作権はメディアシンカが保持・管理してます。
 許可なくこのファイルの内容を複製し利用することを一切禁じます。
 万が一、不正利用を発見した場合は厳しい処置を執らせて頂きます。

 The copyright of this CSS file is maintained and managed by MEDIA-SHINKA.
 Copying and using the contents of this file without permission is strictly prohibited.
 In the unlikely event that unauthorized use is discovered, we will take strict measures.

 Copyright(c) メディアシンカ MEDIA-SHINKA
************************************************************************************ */

/* ************************************************************************************
 フォント関連
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 標準フォント ゴシック体
------------------------------------------------------------------------------------ */
.font-alt {
    font-family: "新ゴ R";
}

/* ------------------------------------------------------------------------------------
 標準フォント 明朝体
------------------------------------------------------------------------------------ */
.font-serif {
    font-family: "リュウミン B-KL";
}

/* ------------------------------------------------------------------------------------
 イタリック体（フォントを問わず強制的に斜体にする）
------------------------------------------------------------------------------------ */
.font-italic {
    font-size: 14px;
    transform: skewX(-15deg);
}

/* ------------------------------------------------------------------------------------
 強調体
------------------------------------------------------------------------------------ */
.strong-r {
    color: #ff0000;
    font-weight: bold;
}

.strong-b {
    color: #0000ff;
    font-weight: bold;
}

strong.red {
    color: #ff0000;
}

strong.blue {
    color: #0000ff;
}

/* ------------------------------------------------------------------------------------
 文字を縁取る（黒）
------------------------------------------------------------------------------------ */
.txt-shadow-bk {
    text-shadow:
        1px 1px 10px #333333,
        -1px 1px 10px #333333,
        1px -1px 10px #333333,
        -1px -1px 10px #333333;
}

/* ------------------------------------------------------------------------------------
 文字を縁取る（白）
------------------------------------------------------------------------------------ */
.txt-shadow-wt {
    text-shadow:
        1px 1px 10px #cccccc,
        -1px 1px 10px #cccccc,
        1px -1px 10px #cccccc,
        -1px -1px 10px #cccccc;
}

/* ************************************************************************************
 ページ全体設定
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 ページの高さは常に表示されている画面の高さに合わせる
------------------------------------------------------------------------------------ */
html {
    height: 100vh;
}

/* ------------------------------------------------------------------------------------
 ページ表示の基本設定
------------------------------------------------------------------------------------ */
body {
    height: 100vh;
    background: #f2d3d3;
    /* フォントの設定 */
    color: #333333;
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 2em;
    /* 半角英数折り返し */
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* 縦長ページに遷移した際に垂直スクロールバーが表示される仕様で
    ページががたつくことを防ぐため、最初から垂直スクロールバーを表示させておく */
    overflow-y: scroll;
    /* 水平スクロールバーは非表示にする */
    overflow-x: hidden;
}

/* ------------------------------------------------------------------------------------
 トップページに戻るリンクは右寄せで表記
------------------------------------------------------------------------------------ */
.toTop {
    text-align: right;
    margin-bottom: 80px;
}

/* ------------------------------------------------------------------------------------
 リンクの下線は原則表示しない
------------------------------------------------------------------------------------ */
a {
    text-decoration: none;
}

/* ------------------------------------------------------------------------------------
 アンカーリンク先は固定ヘッダーを考慮してずらす
------------------------------------------------------------------------------------ */
.anchor-noimg {
    padding-top: 80px;
    margin-top: -80px;
}

.anchor-onimg {
    padding-top: 50px;
    margin-top: -50px;
}

/* ------------------------------------------------------------------------------------
 リスト表示
------------------------------------------------------------------------------------ */

ul {
    list-style-type: disc;
}

li {
    margin-left: 2em;
}

/* ------------------------------------------------------------------------------------
 黒い背景の場合の文字設定
------------------------------------------------------------------------------------ */

#footer-company h4,
#footer-company ul,
.copyright {
    color: #eeeeee;
}

nav li a,
.menu-mb ul li a,
#top-title-logo a,
#footer-company a,
.copyright a {
    color: #bbbbbb;
}

nav li a:hover,
.menu-mb ul li a:hover,
#top-title-logo a:hover,
#footer-company a:hover,
.copyright a:hover {
    color: #eeeeee;
}

/* ------------------------------------------------------------------------------------
 白い背景の場合の文字設定
------------------------------------------------------------------------------------ */
section a,
.breadcrumb li a {
    color: #0080ff;
}

section a:hover,
.breadcrumb li a:hover {
    color: #ff7171;
}

/* ************************************************************************************
 ボタン風メニュー
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 ボタンデザイン
------------------------------------------------------------------------------------ */
.btn-menu,
.btn-essay {
    color: #666666;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 900;
    width: 1%;
    height: 100px;
    background: #ffffff;
    border-radius: 15px;
    padding: 5px;
    margin-bottom: 10px;
}

.btn-essay {
    font-weight: 600;
    height: 200px;
    padding: 10px;
}

/* ------------------------------------------------------------------------------------
 マウスオン時、ボタン・画像半透明化
------------------------------------------------------------------------------------ */
.alpha a:hover .btn-menu,
.alpha a:hover .btn-essay,
.alpha a:hover img,
.alpha h2 a:hover,
.alpha h3 a:hover {
    opacity: 0.7;
    transition-duration: 0.1s;
}

/* ************************************************************************************
 ヘッダー
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 ヘッダー背景
------------------------------------------------------------------------------------ */
#headerbg {
    /* 画面最上部に固定 */
    position: fixed;
    width: 100%;
    height: 50px;
    background: #333333;
    z-index: 2;
}

/* ------------------------------------------------------------------------------------
 ヘッダー基本設定
------------------------------------------------------------------------------------ */
header {
    width: 90%;
    max-width: 980px;
    height: 50px;
    /* 左右中央に配置 */
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}

/* ------------------------------------------------------------------------------------
 ヘッダーロゴ
------------------------------------------------------------------------------------ */
.headerlogo {
    width: 74px;
    height: 32px;
    /* 上下中央に配置 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* ------------------------------------------------------------------------------------
 ヘッダーロゴ用画像
------------------------------------------------------------------------------------ */
.headerlogo img {
    /* 上下左右中央に配置 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/* ------------------------------------------------------------------------------------
 ヘッダーコメント
------------------------------------------------------------------------------------ */
.headercomment h2 {
    color: #eeeeee;
    font-size: 12px;
    /* headerlogoの右隣かつ上下中央に配置されうよう調整 */
    position: absolute;
    top: 50%;
    left: 74px;
    transform: translateY(-50%);
    margin-left: 10px;
}

/* ************************************************************************************
 ナビゲーション（PCメニュー）
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 ナビゲーション基本設定
------------------------------------------------------------------------------------ */
nav {
    /* headerの右寄せに配置 */
    position: absolute;
    right: 0;
    margin: auto;
}

nav ul {
    list-style-type: none;
    height: 50px;
    /* メニュー項目を横並びにする */
    display: flex;
}

nav li {
    margin-left: 0px;
}

nav li a {
    font-size: 14px;
    font-weight: 600;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

/* ************************************************************************************
 ナビゲーション（スマホメニュー）
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 スマホメニュー非表示
------------------------------------------------------------------------------------ */
#nav-mb {
    display: none;
}

/* ************************************************************************************
 メインコンテナ
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 メインコンテナ基本設定
------------------------------------------------------------------------------------ */
#main {
    width: 90%;
    max-width: 980px;
    min-height: 100vh;
    margin: auto;
    /* headerbgのheightに合わせてpadding-topを調整 */
    padding-top: 50px;
}

/* ************************************************************************************
 トップページ＆メインタイトル
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 トップページ＆メインタイトル基本設定
------------------------------------------------------------------------------------ */
#top-title,
#main-title {
    /* 画面幅いっぱいに拡げる */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    /* 背景画像の設定 */
    background-color: #333333;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

#top-title {
    height: 100vh;
}

#main-title {
    height: 400px;
}

/* ------------------------------------------------------------------------------------
 top-titleの上半分をタイトル表示部分とする
------------------------------------------------------------------------------------ */
#top-title-logo {
    width: 100vw;
    height: 50vh;
}

/* ------------------------------------------------------------------------------------
 トップタイトル画像
------------------------------------------------------------------------------------ */
#top-title-logo img {
    width: 90vw;
    max-width: 640px;
    /* top-title-logoの上下左右中央に配置 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#top-title-logo a:hover {
    opacity: 0.7;
    transition-duration: 0.2s;
}

/* ------------------------------------------------------------------------------------
 top-titleの下半分をトップキャプション表示部分とする
------------------------------------------------------------------------------------ */
#top-title-caption {
    width: 100vw;
    height: 50vh;
}

#top-title-caption h1,
#top-title-caption p{
    width: 90%;
    max-width: 500px;
    color: #dddddd;
    line-height: 2em;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
}

#top-title-caption h1 {
    text-align: center;
    font-size: 18px;
    padding: 5px;
    border-radius: 10px;
    /* top-title-captionの左右中央に配置 */
    left: 50%;
    transform: translate(-50%, -50%);
}

#top-title-caption p {
    text-align: center;
    font-size: 16px;
    padding: 10px;
    border-radius: 10px;
    /* トップキャプションの少し下に配置 */
    top: 65%;
    left: 50%;
    transform: translate(-50%, -65%);
}

#top-title-caption a:hover h1,
#top-title-caption a:hover p {
    color: #111111;
    background: rgba(254, 254, 254, 0.8);
    transition-duration: 0.5s;
}

/* ------------------------------------------------------------------------------------
 メインキャプション
------------------------------------------------------------------------------------ */
.main-title-caption {
    width: 100vw;
    height: 400px;
    text-align: center;
    vertical-align: middle;
    color: #eeeeee;
}

.main-title-caption h1 {
    width: 90%;
    font-size: 32px;
    line-height: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ************************************************************************************
 パンくずリスト
************************************************************************************ */

.breadcrumb {
    font-size: 14px;
    padding-left: 0;
    margin-left: 2em;
    margin-bottom: 20px;
}

.breadcrumb li {
    display: inline;
    margin-left: 0px;
}

.breadcrumb li:after {
    /* >を表示*/
    content: '>';
    padding: 0 3px;
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    text-decoration: none;
}

/* ************************************************************************************
 セクション
************************************************************************************ */

section {
    margin-bottom: 50px;
}

section.wide {
    padding: 0 1%;
    /* 画面幅いっぱいに拡げる */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 50px;
}

/* ------------------------------------------------------------------------------------
 セクションのタイトル（背景あり）
------------------------------------------------------------------------------------ */
section > .title-bg,
section > .title-bg-s {
    /* 画面幅いっぱいに拡げる */
    width: 100vw;
    height: 200px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 20px;
    /* 背景画像の設定 */
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

section > .title-bg-s {
    height: 100px;
}

/* ------------------------------------------------------------------------------------
 セクションのタイトル
------------------------------------------------------------------------------------ */
section h2 > .noimg,
section h2 > .onimg,
section h3 > .noimg,
section h3 > .onimg {
    font-size: 36px;
    text-align: center;
    line-height: 1.5em;
}

section h3 > .noimg,
section h3 > .onimg {
    font-size: 24px;
}

section h2 > .noimg,
section h3 > .noimg {
    margin-bottom: 20px;
}

section h2 > .onimg,
section h3 > .onimg {
    color: #eeeeee;
    width: 100%;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

section h2 > .noimg-left,
section h2 > .onimg-left,
section h3 > .noimg-left,
section h3 > .onimg-left {
    text-align: left;
}

/* ************************************************************************************
 行
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 行に背景を設定する
------------------------------------------------------------------------------------ */
.row-bg {
    background-image: url('../img/logo-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ------------------------------------------------------------------------------------
 行の横並びの定義
------------------------------------------------------------------------------------ */
.row,
.row-bg {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------
 行のタイトル
------------------------------------------------------------------------------------ */
.row h3,
.row-bg h3 {
    width: 100%;
    text-align: left;
    font-size: 24px;
}

.row h3 > .small,
.row-bg h3 > .small {
    width: 100%;
    text-align: left;
    font-size: 18px;
}

/* ------------------------------------------------------------------------------------
 画像は幅に合わせる
------------------------------------------------------------------------------------ */
.row img,
.row-bg img {
    width: 100%;
}

/* ------------------------------------------------------------------------------------
 アイコンと署名画像は比率を25％に縮小
------------------------------------------------------------------------------------ */
.row img.ico,
.row img.name {
    width: 25%;
}

/* ------------------------------------------------------------------------------------
 行の本文（注釈）
------------------------------------------------------------------------------------ */
.annotation {
    font-size: 12px;
    font-style: italic;
}

/* ************************************************************************************
 カラムの定義
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 各カラムのmargin
------------------------------------------------------------------------------------ */
.item-col1,
.item-col2,
.item-col3,
.item-col3-center,
.item-col4 {
    padding: 10px;
    margin: 0 1%;
    margin-bottom: 10px;
}

.item-col6-1,
.item-col6-2,
.item-col6-3,
.item-col6-4,
.item-col6-5,
.item-col6-6 {
    padding: 5px;
    margin: 0 0.5%;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------------------------
 カラム1列
------------------------------------------------------------------------------------ */
.item-col1 {
    width: 98%;
}

/* ------------------------------------------------------------------------------------
 カラム2列
------------------------------------------------------------------------------------ */
.item-col2 {
    width: 48%;
}

/* ------------------------------------------------------------------------------------
 カラム3列
------------------------------------------------------------------------------------ */
.item-col3 {
    width: 31.33%;
}

.item-col3-center {
    width: 31.34%;
}

/* ------------------------------------------------------------------------------------
 カラム4列
------------------------------------------------------------------------------------ */
.item-col4 {
    width: 23%;
}

/* ------------------------------------------------------------------------------------
 カラム6列
------------------------------------------------------------------------------------ */
.item-col6-1,
.item-col6-6 {
    width: 15.66%;
}

.item-col6-2,
.item-col6-3,
.item-col6-4,
.item-col6-5 {
    width: 15.67%;
}

/* ************************************************************************************
 NEWS（更新情報）
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 更新情報は疑似インラインフレームでスクロールさせる
------------------------------------------------------------------------------------ */
.scroll {
    height: auto;
    padding-left: 0;
    border: solid 1px #aaaaaa;
    /* 高さ指定を超えるとiframe風にスクロールが出る設定 */
    overflow: auto;
    height: 300px;
}

/* ------------------------------------------------------------------------------------
 更新情報（日付）
------------------------------------------------------------------------------------ */
.scroll dt {
    float: none;
    width: auto;
    font-weight: bold;
    letter-spacing: normal;
    float: left;
    width: 8em;
    padding-left: 5px;
}

/* ------------------------------------------------------------------------------------
 更新情報（本文）
------------------------------------------------------------------------------------ */
.scroll dd {
    border-bottom: 1px solid #666666;
    padding-left: 8em;
}

/* ------------------------------------------------------------------------------------
 更新情報（アイコン）
------------------------------------------------------------------------------------ */
.scroll dd img {
    width: 30px;
    height: 11px;
}

/* ------------------------------------------------------------------------------------
 Facebookページ PagePlugin
------------------------------------------------------------------------------------ */
.fb-page {
    /* モリサワのWEBフォントを使用する場合、FacebookページプラグインのフォントをInitialで上書きしてTypeSquareの対象外とする（そうしないとFacebookページが表示されない） */
    font-family: sans-serif;
}

/* ************************************************************************************
 各コンテンツ
************************************************************************************ */

.calender,
.google-map {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------
 テーブル設定
------------------------------------------------------------------------------------ */
.simple,
.complex,
.menu {
    width: 100%;
    margin-bottom: 20px;
}

.complex,
.menu {
    table-layout: fixed;
}

.simple tr,
.complex tr {
    border-bottom: solid 1px #333333;
}

.simple th,
.simple td,
.complex th,
.complex td,
.menu th,
.menu td {
    vertical-align: middle;
    padding: 10px;
}

.complex th,
.complex td,
.menu th,
.menu td {
    border-left: dotted 0.5px #666666;
    border-right: dotted 0.5px #666666;
}

.simple th,
.complex th {
    text-align: left;
    background: #cccccc;
    white-space: nowrap;
    width: auto;
    text-align: center;
}

.complex tr:first-child th {
    text-align: center;
}

.complex td {
    vertical-align: baseline;
}

.menu td {
    font-size: 13px;
    line-height: 1.5em;
    text-align: center;
}

.simple td,
.complex td {
    background: #ffffff;
}

/* th（制作の流れ等）*/
th.th-flow {
    background: #ffffff;
}

/* td（サポート期限等）*/
td.center {
    text-align: center;
}

td.middle {
    vertical-align: middle;
}

td h4 {
    font-size: 18px;
    font-weight: bold;
}

/* ************************************************************************************
 お問い合わせフォーム
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 各コントロールの外観
------------------------------------------------------------------------------------ */
.form-text,
.form-area {
    width: 100%;
    letter-spacing: 2px;
    font-size: 16px;
    border: 1px solid #999999;
    border-radius: 2px;
    padding-left: 5px;
    margin-bottom: 5px;
}

.form-text {
    height: 2.5em;
}

label,
input[type='checkbox'] {
    cursor: pointer;
}

.select {
    padding-left: 1px;
}

dd.form {
    padding-left: 20px;
}

.form-area {
    height: 11em;
    padding: 5px;
}

.center {
    text-align: center;
}

.button-submit {
    width: 200px;
    height: 50px;
    font-size: 16px;
}

/* ************************************************************************************
 各事業内容ページの詳細メニュー
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 各詳細メニューのタイトル
------------------------------------------------------------------------------------ */
.works-title {
    text-align: center;
    font-weight: 600;
    border-bottom: double 3px #111111;
    margin: 10px 0;
}

/* ------------------------------------------------------------------------------------
 各詳細メニューのリンク
------------------------------------------------------------------------------------ */
.works-link {
    text-align: right;
    margin-top: 10px;
}

.works-link a {
    font-size: 14px;
    font-weight: 600;
    border: solid 1px;
    padding: 5px;
}

/* ************************************************************************************
 エッセイ（あれやれこや）
************************************************************************************ */

/* ------------------------------------------------------------------------------------
 エッセイのタイトル
------------------------------------------------------------------------------------ */
.essay-title {
    height: 150px;
}

/* ------------------------------------------------------------------------------------
 執筆した日付
------------------------------------------------------------------------------------ */
.essay-date {
    font-size: 12px;
    text-align: center;
}

/* ------------------------------------------------------------------------------------
 リンクの設定
------------------------------------------------------------------------------------ */
.essay-link {
    text-align: center;
    margin-bottom: 10px;
}

.essay-link a {
    font-weight: 600;
    border: solid 1px;
    padding: 5px;
}

/* ************************************************************************************
 事業所情報とフッターメニュー
************************************************************************************ */

#footer-company {
    /* 画面幅いっぱいに拡げる */
    width: 100vw;
    position: relative;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    /* 背景画像の設定 */
    background: #333333;
}

#footer-company .row {
    width: 100%;
    max-width: 980px;
    margin: auto;
}

#footer-company h4 {
    font-size: 14px;
}

#footer-company ul {
    list-style-type: none;
}

#footer-company li {
    margin-left: 0px;
}

#footer-company ul,
.copyright {
    font-size: 12px;
}

.title {
    font-size: 16px;
}

/* ************************************************************************************
 フッター
************************************************************************************ */

#footerbg {
    /* 画面最下部に固定 */
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 25px;
    background: #333333;
    z-index: 2;
}

footer {
    width: 85%;
    max-width: 980px;
    height: 25px;
    bottom: 0;
    /* 左右中央に配置 */
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}

.copyright {
    width: 100%;
    max-width: 980px;
    height: 25px;
    text-align: center;
}

/* ************************************************************************************
 レスポンシブ対応（1）
************************************************************************************ */
@media screen and (min-width: 1083px) {

    /* --------------------------------------------------------------------------------
     改行の取消
    -------------------------------------------------------------------------------- */
    section h2 > .noimg br,
    section h2 > .onimg br,
    section h3 > .noimg br,
    section h3 > .onimg br {
        display: none;
    }
}

/* ************************************************************************************
 レスポンシブ対応（2）
************************************************************************************ */
@media screen and (max-width: 1082px) {

    /* --------------------------------------------------------------------------------
     ヘッダーコメントフォントサイズ縮小
    -------------------------------------------------------------------------------- */
    .headercomment {
        font-size: 10.5px;
    }

    /* --------------------------------------------------------------------------------
     PC用のメニューフォントサイズ縮小
    -------------------------------------------------------------------------------- */
    nav li a {
        font-size: 12px;
    }

    /* --------------------------------------------------------------------------------
     改行の取消
    -------------------------------------------------------------------------------- */
    section h2 > .noimg br,
    section h2 > .onimg br,
    section h3 > .noimg br,
    section h3 > .onimg br {
        display: none;
    }

}

/* ************************************************************************************
 レスポンシブ対応（3）
************************************************************************************ */
@media screen and (max-width: 1027px) {

    .btn-menu {
        font-size: 14px;
    }
}

/* ************************************************************************************
 レスポンシブ対応（4）
************************************************************************************ */
@media screen and (max-width: 989px) {

    /* --------------------------------------------------------------------------------
     ヘッダーコメント非表示
    -------------------------------------------------------------------------------- */
    .headercomment {
        display: none;
    }

    /* --------------------------------------------------------------------------------
     メインキャプション
    -------------------------------------------------------------------------------- */
    .main-title-caption h1 {
        font-size: 24px;
    }

    /* --------------------------------------------------------------------------------
     セクションのタイトル
    -------------------------------------------------------------------------------- */
    section h2 > .noimg,
    section h2 > .onimg {
        font-size: 24px;
    }

    section h3 > .noimg,
    section h3 > .onimg {
        font-size: 18px;
    }

    /* --------------------------------------------------------------------------------
     rowを折り返し可能にする
    -------------------------------------------------------------------------------- */
    .row,
    .row-bg {
        flex-wrap: wrap;
    }

    /* --------------------------------------------------------------------------------
     カラム4列をカラム2列に変更
    -------------------------------------------------------------------------------- */
    .item-col4 {
        width: 48%;
    }

    /* --------------------------------------------------------------------------------
     カラム6列をカラム3列に変更
    -------------------------------------------------------------------------------- */
    .item-col6-1,
    .item-col6-3,
    .item-col6-4,
    .item-col6-6 {
        width: 31.33%;
    }

    .item-col6-2,
    .item-col6-5 {
        width: 31.34%;
    }

    /* --------------------------------------------------------------------------------
     更新情報の日付と本文を縦並びにする
    -------------------------------------------------------------------------------- */
    .scroll dt {
        display: block;
        width: 100%;
    }

    .scroll dd {
        display: block;
        padding-left: 0;
    }

    /* --------------------------------------------------------------------------------
     テーブルの項目と本文を縦並びにする
    -------------------------------------------------------------------------------- */
    .simple th,
    .simple td,
    .complex th,
    .complex td,
    .menu th,
    .menu td {
        display: block;
    }
    
    .simple th,
    .complex th,
    .menu th {
        width: 100%;
        text-align: center;
    }

    .simple img,
    .complex img {
        width: 50%;
    }
    
    .complex tr:first-child {
        display: none;
    }
    
    .complex th:first-child {
        width: 100%;
    }
    
    .complex td,
    .menu td {
        display: block;
        border-bottom: dotted 0.5px #666666;
    }
    
    .menu td:first-child {
        border-top: dotted 0.5px #666666;
    }
    
    .complex td:before {
        content: attr(data-label);
        color: #33905a;
        font-weight: bold;
    }
    
    /* --------------------------------------------------------------------------------
     改行の取消
    -------------------------------------------------------------------------------- */
    .btn-menu br,
    .simple th br,
    .complex th br,
    .menu td br {
        display: none;
    }
}

/* ************************************************************************************
 レスポンシブ対応（4）
************************************************************************************ */
@media screen and (max-width: 722px) {

    /* --------------------------------------------------------------------------------
     ナビゲーション（PCメニュー）非表示
    -------------------------------------------------------------------------------- */
    nav {
        display: none;
    }

    /* --------------------------------------------------------------------------------
     スマホメニュー設定
    -------------------------------------------------------------------------------- */
    #nav-mb {
        display: block;
        /* headerの右寄せに配置 */
        position: absolute;
        right: 0;
        margin: auto;
    }

    #nav-mb img {
        width: 30px;
        height: 50px;
        margin-left: 5px;
    }

    /* --------------------------------------------------------------------------------
    メインキャプション
    -------------------------------------------------------------------------------- */
    .main-title-caption h1 {
        font-size: 16px;
    }

    /* --------------------------------------------------------------------------------
     カラム2列をカラム1列に変更
    -------------------------------------------------------------------------------- */
    .item-col2 {
        width: 98%;
    }

    /* --------------------------------------------------------------------------------
     カラム3列をカラム1列に変更
    -------------------------------------------------------------------------------- */
    .item-col3,
    .item-col3-center {
        width: 100%;
    }

    /* --------------------------------------------------------------------------------
     カラム4列をカラム1列に変更
    -------------------------------------------------------------------------------- */
    .item-col4 {
        width: 100%;
    }

    /* --------------------------------------------------------------------------------
     カラム6列をカラム1列に変更
    -------------------------------------------------------------------------------- */
    .item-col6-1,
    .item-col6-2,
    .item-col6-3,
    .item-col6-4,
    .item-col6-5,
    .item-col6-6 {
        width: 100%;
    }
    
    /* --------------------------------------------------------------------------------
     トップキャプションのフォントサイズを縮小
    -------------------------------------------------------------------------------- */
    #top-title-caption h1 {
        font-size: 11px;
    }

    #top-title-caption p {
        font-size: 11px;
    }

    /* --------------------------------------------------------------------------------
     署名用の画像比率を50％に縮小
    -------------------------------------------------------------------------------- */
    .row img.name {
        width: 50%;
    }
}

/* ************************************************************************************
 レスポンシブ対応（5）
************************************************************************************ */
@media screen and (max-width: 480px) {

    /* --------------------------------------------------------------------------------
     top-titleの上1/4分をタイトル表示部分とする
    -------------------------------------------------------------------------------- */
    #top-title-logo {
        width: 100vw;
        height: 25vh;
    }

    /* --------------------------------------------------------------------------------
     トップタイトル画像
    -------------------------------------------------------------------------------- */
    #top-title-logo img {
        width: 90vw;
        max-width: 640px;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -80%);
    }

    /* --------------------------------------------------------------------------------
     top-titleの下3/4をトップキャプション表示部分とする
    -------------------------------------------------------------------------------- */
    #top-title-caption {
        width: 100vw;
        height: 75vh;
    }

    #top-title-caption h1,
    #top-title-caption p {
        max-width: 400px;
    }

    #top-title-caption h1 {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -80%);
    }

    #top-title-caption p {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -55%);
    }

    /* --------------------------------------------------------------------------------
     セクションのタイトル（背景あり）
    -------------------------------------------------------------------------------- */
    section > .title-bg,
    section > .title-bg-s {
        background-attachment: local;
    }

    /* --------------------------------------------------------------------------------
     更新情報の縦幅を狭める
    -------------------------------------------------------------------------------- */
    .scroll {
        height: 400px;
    }

    /* --------------------------------------------------------------------------------
     スマホでも更新情報の垂直スクロールバーを強制的に表示
    -------------------------------------------------------------------------------- */
    .scroll::-webkit-scrollbar {
        background: #ccc;
        width: 10px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background: #aaa;
    }

    /* --------------------------------------------------------------------------------
     フッターの事業所名フォントサイズ縮小
    -------------------------------------------------------------------------------- */
    #footer-company h4 {
        font-size: 10px;
    }

    /* --------------------------------------------------------------------------------
     フッターのコピーライトフォントサイズ縮小
    -------------------------------------------------------------------------------- */
    .copyright {
        font-size: 9px;
        letter-spacing: 0;
    }

    /* --------------------------------------------------------------------------------
     改行の復活
    -------------------------------------------------------------------------------- */
    section h2 > .noimg br,
    section h2 > .onimg br,
    section h3 > .noimg br,
    section h3 > .onimg br {
        display: inline;
    }
}