@charset "UTF-8";

@import url("css/sidemenu.css");

/* 共通部分 */

body {
    font-family: ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ\ Ｐゴシック,sans-serif;
    line-height: 1.8;
    color:#282828;
    font-size: 16px;
    font-feature-settings: "palt";
    margin: 0;
    padding-bottom: 20px;
}
/*
h1 {
    font-size: 28px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 25px;
    padding-right: auto;
    background: #ece1c5;
    margin-top: 45px;
    margin-bottom: -30px;

    border: 1px solid #4d2e03;
    border-bottom: none;
}
*/
h2 {
    font-size: 28px;
    padding: 5px 0 1px 25px;
    background: #b9d9c1;
    margin-top: 85px;
    margin-bottom: -16px; /* -40px; */
    height: 48px;
    line-height: 48px;
    border: 1px solid #fff;
    border-bottom: 1px solid #b9d9c1;
}
/*
h3 {
    font-size: 28px;
    padding-top: 55px;
    color: #4d2e03;
    border-bottom: 2px solid #4d2e03;
    margin-bottom: 0px;
}
*/
h4 {
    font-size: 28px;
    padding-top: 55px;
    color: #055a0c;
    border-bottom: 2px solid #055a0c;
}

h5 {
    font-size: 24px;
    padding-top: 0px;
    color:#055a0c;
    margin-bottom: 0px;
}

h6 {
    font-size: 19px;
    font-weight: bold;
    margin-top: 16px;
    color:  #000000;
    margin-bottom: -12px;
}

ul {
    padding-left: 1.5em;
}


h2.line3 {
    font-size: 28px;
    padding: 1px 0 1px 25px;
    background: #b9d9c1;
    margin-top: 85px;
    margin-bottom: -40px;

    height: auto;
    line-height: 1.8;
}

.pc { /* レスポンシブ用。PC表示時はPC用を表示 */
    display: block !important;
}
.sp { /* レスポンシブ用。PC表示時はスマホ用を非表示 */
    display: none !important;
}

/* 上に戻るボタン */
.pagetop {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    width: 3.3rem;
    height: 3.3rem;
    line-height: 3.3rem;
    border-radius: 3.3rem;
    text-align: center;
    cursor: pointer;
}

#contents {
    /* flex-wrap: wrap;は使わない。使うとサイドメニューが下にいくため。 */
    width: calc(100% - 16px); /*幅指定*/
    display: flex;
    justify-content: center; /*flex専用*/
    padding-left: 16px;
}

header {
    margin-bottom: 62px;
}
#head {
    width: 100%;
    color: #fff;
    background-color: #eee;
    font-size: 28px;
    margin: 0;
    padding: 0;
}
#top-message-wrapper {
    width: calc(100% - 16px); /*幅指定*/
    display: flex;
    justify-content: center;
    padding-left: 16px;
}
#main {
    max-width: 1000px; /* 画面幅に応じた幅になるようにwidthで固定しない */
    width: 100%;
}

#sub {
    width: 220px; /*幅指定*/
    padding-left: 75px;
    padding-top: 0; /* パンくずリスト分下げてタイトルに合わせる */
}


/* --- start ヘッダー関係 --- */
.head-image {
    width: 100vw;
    min-width: 1000px;
    max-width: 1920px;
    margin: 0 auto;
}
.head-image img {
    vertical-align: bottom;
    width: 100%;
}
@media screen and (max-width: 1000px) {
    #fig-42000-04 {
        width: 500px;
        height: 688px;
    }
}
/* --- end ヘッダー関係 --- */

.footer-wrapper {
    width: calc(100% - 16px);
    display: flex;
    justify-content: center;
    padding-left: 16px;
}
.footer-left {
    max-width: 1000px;
    width: 100%;
}
.footer-right {
    width: 220px;
    padding-left: 75px;
}
.copyright {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}
.copyright p {
    font-size: 14px;
    line-height: 24px;
    margin: 70px 0 0 0;
}


/* --- start TOPメッセージ欄関係 --- */
#top-message {
    width: 1255px;
    padding: 20px 20px;
    margin-bottom: 34px;
    border-bottom: 5px solid #939598;
}
#top-message ul {
    list-style: none;
}
/* --- end TOPメッセージ欄関係 --- */


.search-box {
    margin-top: 25px;
}

.menu-title {
    display: inline-block;
    background-color: #8bb991;
    width: 100%;
}
.menu-title span {
    display: inline-block;
    width: 275px;
    background-color: #007440;
    color: #fff;
    font-size: 21px;
    padding: 3px 1em 0 1em;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}

.menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
    margin-top: 18px;
}
.menu-list li {
    list-style: none;
}
.menu-list li a,
.menu-list li span.dummy {
    display: inline-block;
    width: 200px;
    padding: 3px 1em 0 1em;
    font-weight: normal;
    border: 1px solid #007a40;
    margin-bottom: 18px;
    position: relative;
    font-size: 16px;
    text-decoration: none;
    color: #007a40;
    height: 36px;
    line-height: 36px;
}
.menu-list li a:hover {
    background-color: #b9d9c1;
    color: #282828;
}
.menu-list li .icon {
    top: 12px;
    right: 18px;
}

.top-menu0 .menu-list li a {
    width: 624px;
}

.top-menu1,
.top-menu2,
.top-menu3,
.top-menu4 {
    margin-top: -2px;
}
.top-menu2 .menu-title {
    background-color: #cfbb92;
}
.top-menu2 .menu-title span {
    background-color: #4d2e03;
}
.top-menu2 .menu-list li a,
.top-menu2 .menu-list li span.dummy {
    width: 283px;
    border: 1px solid #4d2e03;
    color: #4d2e03;
}
.top-menu2 .menu-list li a:hover {
    background-color: #ece1c5;
    color: #282828;
}

.top-menu3 .menu-list li a,
.top-menu3 .menu-list li span.dummy,
.top-menu4 .menu-list li a,
.top-menu4 .menu-list li span.dummy {
    width: 283px;
}

.menu-list li span.dummy,
.top-menu2 .menu-list li span.dummy {
    border-color: transparent;
    background-color: transparent;
}
#top-item-03-02 {
    
}
#top-item-03-02 a {
    height: 49px;
    line-height: 20px;
    padding-top: 10px;
}
#top-item-01-06 a span {
    letter-spacing: -0.04em;
}
#top-item-03-02 a span {
    font-size: 15px;
}
#top-item-03-02 .icon {
    top: 21px;
}

.kigou {
    font-family: "Osaka-等幅","ＭＳ ゴシック","MS Gothic";
}


.arrow-up.icon {
    color: #000;
    position: absolute;
    margin-left: 10px;
    margin-top: 3px;
}

.arrow-up.icon:before {
    content: '';
    position: absolute;
    left: -5px;
    top: 1px;
    width: 10px;
    height: 10px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.arrow-down.icon {
    color: #000;
    position: absolute;
    margin-left: 10px;
    margin-top: 2px;
}

.arrow-down.icon:before {
    content: '';
    position: absolute;
    left: -5px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.arrow-right.icon {
    color: #000;
    position: absolute;
}

.arrow-right.icon:before {
    content: '';
    position: absolute;
    left: -5px;
    top: 1px;
    width: 12px;
    height: 12px;
    background-color: #007440;
    border-radius: 50%;
    border: 1px solid #007440;
}
.arrow-right.icon:after {
    content: '';
    position: absolute;
    left: -3px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}


/* 表示画面にだけ設定を反映するように、screenを指定 */
@media screen and (max-width: 767px) {
    /* スマホ用レスポンシブ設定 */
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
    h2 .sp {
        display: inline!important;
    }

    body {
        margin: 0 0 8px 0;
    }
    /*
    h1 {
        font-size: 21px;
        line-height: 1.9;
    }
    */
    h2,
    h2.line3 {
        font-size: 21px;
        padding: 7px 0 1px 25px;
        height: 30px;
        line-height: 30px;
    }
    body.chapter-1 .sub-menu-border,
    body.chapter-2 .sub-menu-border,
    body.chapter-4 .sub-menu-border,
    body.chapter-5 .sub-menu-border {
        height: 30px;
        line-height: 30px;
        padding-left: 16px;
    }
    /*
    h3 {
        font-size: 21px;
        line-height: 1.4;
    }
    */
    h4 {
        font-size: 21px; /*28px;*/
        line-height: 1.4;
    }
    h5 {
        font-size: 18px; /*24px;*/
        line-height: 1.4;
    }
    h6 {
        font-size: 17px; /*19px;*/
        line-height: 1.4;
    }
    .newtitle{
        font-size: 18px; /*21px;*/
        line-height: 1.4;
    }


    #contents {
        width: 100%; /*幅指定*/
        padding-left: 0;
        margin: 0 auto;
    }

    /* ヘッダー */
    header {
        margin-bottom: 30px;
    }
    #head {
        padding: 0;
        line-height: 1.3;
        font-size: 16px; /* 18px; */
        height: 100%;
    }
    .head-image {
        min-width: 100vw;
        text-align: center;
    }
    .head-image img {
    }

    /* パンくずリスト */
    .breadcrumb-list li {
        display: block;
        display: none;
    }

    /* 本文 */
    #main {
        width: 90%;
    }
    .menu-title span,
    .menu-title2 span,
    .menu-title3 span {
        width: calc(100% - 2em);
        font-size: 16px; /*21px*/
        height: 38px;
        line-height: 38px;
    }
    .top-menu .menu-list,
    .top-menu2 .menu-list2,
    .top-menu3 .menu-list3 {
        display: block;
    }
    .top-menu .menu-list li a,
    .top-menu2 .menu-list2 li a,
    .top-menu3 .menu-list3 li a {
        width: calc(100% - 2em);
        font-size: 14px; /*18px*/
        padding: 2px 1em 0 1em;
        height: 27px;
        line-height: 27px;
    }
    body.chapter-1 li a.item01,
    body.chapter-3 li#top-item-01-04 a {
        /* PC表示で　padding-right:0 にしているので幅を調整 */
        width: calc(100% - 1em);
    }
    .top-menu .menu-list li span.dummy,
    .top-menu2 .menu-list2 li span.dummy,
    .top-menu3 .menu-list3 li span.dummy {
        display: none;
    }

    .sub-menu2 {
        padding-left: 0;
    }
    .sub-menu .menu-list, 
    .sub-menu2 .menu-list2 {
        display: block;
    }
    .sub-menu .menu-list li,
    .sub-menu2 .menu-list2 li {
        padding-left: 3em;
        text-indent: -3em;
    }
    .sub-menu .menu-list li a,
    .sub-menu2 .menu-list2 li a {
        display: block;
        line-height: 1.6;
    }

    .image {
        width: 100%;
    }

    /* サイドメニュー */
    #sub {
        position: fixed;
        margin: 0;
        top: 50px;
        right: -230px;
        padding: 5px;
        background-color: #f8f8f8;
    }

    /* サイドメニュー表示ボタン（三） */
    .menu-btn-sp {
        position: fixed;
        top: 12px;
        right: 10px;
        width: 40px;
        height: 32px;
        z-index: 3;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 400ms;
        background-color: #007440;
        opacity: 0.6;
    }
    .menu-btn-sp.open {
        opacity: 1.0;
    }
    .menu-btn-sp span {
        position: absolute;
        width: 30px;
        height: 2px;
        background-color: #fff;
        border-radius: 13px;
        transition: all 400ms;
    }
    .menu-btn-sp span:nth-child(1) {
        top: 7px;
        left: 5px;
    }
    .menu-btn-sp span:nth-child(2) {
        top: 15px;
        left: 5px;
    }
    .menu-btn-sp span:nth-child(3) {
        top: 23px;
        left: 5px;
    }

    .sp-text-center {
        text-align: center;
    }

    .footer-wrapper {
        display: block;
    }

    .menu-list {
        display: block;
    }
    .menu-list li a,
    .top-menu0 .menu-list li a,
    .top-menu2 .menu-list li a,
    .top-menu3 .menu-list li a,
    .top-menu4 .menu-list li a {
        width: 90%;
    }
    .top-menu0 .menu-list li a {
        width: 90%;
        height: auto;
        line-height: 20px;
        padding-top: 8px;
        padding-bottom: 5px;
    }
    .top-menu0 .menu-list li .icon {
        top: 28px;
    }
    .menu-list li span.dummy {
        display: none;
    }
}

/* 印刷用のCSS */
@media print {
    /* サイドメニュー非表示 */
    #sub {
        display: none;
    }
    /* PC最大表示の状態でプリントできるように最小幅を設定する */
    body {
        min-width: 1000px;
    }
    /* サイドメニューを並べないのでflex解除。余白を取って中央配置 */
    #contents {
        display: block;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }
    /* 本文 */
    #main {
        width: 100%;
    }
    #head {
        max-width: 1000px;
        min-height: 100px;
    }
    .head-image {
        max-width: 1000px;
    }
    .footer-left,
    .copyright {
        display: none;
    }
}

.indent-1 {
    padding-left: 1em;
    text-indent: -1em;
}
.indent-1_5 {
    padding-left: 1.5em;
    text-indent: -1.5em;
}
.indent-2 {
    padding-left: 2em;
    text-indent: -2em;
}
.indent-2_5 {
    padding-left: 2.5em;
    text-indent: -2.5em;
}
.indent-3 {
    padding-left: 3em;
    text-indent: -3em;
}