@charset "utf-8";
@import url("information.css");

/**********************************************/
/* A-PLAT 地域気候変動適応計画策定・改定の参考事例 */
/* 03:庁内関連部局からの情報収集ガイド */
/**********************************************/

#main > h1 > span {
    font-size: 20px;
}

/*見出しの色*/
.article-headline {
    background-color: #07b0f2;
}

/*目次*/
.mokuji {
    margin-bottom: 30px;
}
.mokuji ol {
    margin: 0 0 0 40px;
}
.mokuji ol ul {
    list-style-type: none;
    margin-left: 0;
    padding: 0;
}

/*概要*/
#chapter0 .section {
    padding: 10px;
    margin-bottom: 0;
}
#chapter0 .section-headline {
    /* border-left: 2px #07b0f2 solid; */
    border-bottom: 1px #ddd solid;
    padding-bottom: 10px;
}

/*3カラム用*/
.column-area {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*カラム：ステップエリア*/
.area-step {
    width: 30px;
    margin-right: 10px;
}

/*カラム：コンテンツエリア*/
.area-contents {
    width: calc(100% - 30px - 10px);
    display: flex;
    flex-wrap: wrap;
}

/*カラム：コンテンツエリア（ステップ無し）*/
.area-line {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.area-fill {
    width: 100%;
}
.area-right {
    width: 100%;
    margin-left: 0;
}


/*グラフ等の枠*/
.canvas {
    margin: 20px 0 40px;
}

/*図*/
.canvas figcaption {
    max-width: 700px;
}
.canvas img {
    width: 100%;
    max-width: 700px;
}


/*図（大きく表示）*/
.canvas100 {
    width: 100%;
    margin: 10px auto;
}
.canvas100 figcaption {
    max-width: 800px;
    text-align: center;
    margin: 10px 0;
}
.canvas100 img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


/*ステップ*/
.step {
    display: flex;
    flex-direction: column;
    width: 30px;
    list-style: none;
    margin: 0 auto 30px;
    padding: 0;
}
.step li {
    position: relative;
    padding: 10px 0px;
    margin-bottom: 25px;
    background: #ddd;    
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
}
/* 先端部分 */
.step li::after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 0;
    border-width: 15px 15px;
    border-color: #ddd transparent transparent transparent;
    border-style: solid;
}
  
/* 現在のステップ */
.step li.check {
    background-color: #506dc3;
    color: #fff;
}
.step li.check::after{
    border-color: #506dc3 transparent transparent transparent;
}



/*アイコン付きの枠*/
.fence {
    margin: 0 0 20px;
    padding: 10px;
    border-radius: 8px;
    line-height: 140%;
    border: 2px #ddd solid;
}
.fence dl {
    margin: 0 !important;
    padding: 0 !important;
}
.fence dt {
    line-height: 120%;
    font-weight: bold;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
    padding: 1px 0 1px 45px;
    background-position: left center;
    background-repeat: no-repeat;
}
.fence dd {
    margin: 0;
    padding: 0;
}
.fence p {
    margin: 0;
    padding: 0;
}
.fence dd ul {
    margin-top: 0;
    margin-bottom: 0;
}
.fence dd li~li {
    margin-top: 10px;
}
.fence ul~p{
    margin-top: 20px;
}

/*アイコンのサイズ*/
.mk-point dt {
    background-size: 40px;
    min-height: 35px;
}
.mk-hearing dt {
    background-size: 40px;
    min-height: 35px;
}
.mk-source dt {
    background-size: 40px;
    min-height: 35px;
}


/*見出しの色*/
.note-blue .article-headline {
    background-color:#56b4f4;
}
.note-blue h3 {
    border-width: 0 !important;
}
.note-yellow .article-headline {
    background-color:#d4d948;
}
.note-yellow .article-headline h2 {
    color: #000;
}
.note-green .article-headline {
    background-color:#45bfb3;
}


/*ステップの色*/
.note-blue .step li.check {
    background-color: #56b4f4;
}
.note-blue .step li.check::after{
    border-color: #56b4f4 transparent transparent transparent;
}
.note-yellow .step li.check {
    background-color: #d4d948;
    color: #000;
}
.note-yellow .step li.check::after{
    border-color: #d4d948 transparent transparent transparent;
}
.note-green .step li.check {
    background-color: #45bfb3;
}
.note-green .step li.check::after{
    border-color: #45bfb3 transparent transparent transparent;
}
.step1{
    padding: 10px 5px;
    line-height: 1;
}
.step1 span{
    margin-bottom: 5px;
}

/*アイコン付き枠：線の色*/
.note-blue .fence {
    border-color:#56b4f4;
}
.note-blue .fence dl {
   border-color:#56b4f4;
}
.note-blue .fence dt {
    color: #56b4f4;
}
.note-yellow .fence {
    border-color: #d4d948;
}
.note-yellow .fence dl {
    border-color: #d4d948;
}
.note-yellow .fence dt {
    color: #d4d948;
}
.note-green .fence {
    border-color: #45bfb3;
}
.note-green .fence dl {
    border-color: #45bfb3;
}
.note-green .fence dt {
    color: #45bfb3;
}


/*アイコン付き枠：ポイント*/
.note-blue .mk-point dt {
    background-image: url("../img/icon_point_b.png");
}
.note-yellow .mk-point dt {
    background-image: url("../img/icon_point_y.png");
}
.note-green .mk-point dt {
    background-image: url("../img/icon_point_g.png");
}

/*アイコン付き枠：ヒアリング*/
.note-blue .mk-hearing dt {
    background-image: url("../img/icon_hearing_b.png");
}
.note-yellow .mk-hearing dt {
    background-image: url("../img/icon_hearing_y.png");
}
.note-green .mk-hearing dt {
    background-image: url("../img/icon_hearing_g.png");
}

/*アイコン付き枠：参考資料*/
.note-blue .mk-source dt {
    background-image: url("../img/icon_source_b.png");
}
.note-yellow .mk-source dt {
    background-image: url("../img/icon_source_y.png");
}
.note-green .mk-source dt {
    background-image: url("../img/icon_source_g.png");
}

/*職員の声強調*/
.voice {
    margin: 0 10px 10px;
    display: inline-block;
}


/*方法アイコン*/
.img-technique {
    display: inline-block;
    max-width: 200px;
    border-radius: 6px;
}

/*方法一覧*/
.list-technique ul {
    margin-left: 40px;
}
.list-technique .img-technique {
    border: 2px #07b0f2 solid; 
    display: block;
    margin-top: 5px;
}
.list-technique span {
    display: none;
}

/*方法アイコン付き見出し*/
/* .technique {} */


.technique .img-technique {
    max-width: 200px;
    border-radius: 6px;
    display: block;
    margin: 10px auto 0;
}
.section-headline .img-technique {
    border: 2px #07b0f2 solid;
}

/*おすすめツール*/
.tools {
    padding: 20px 10px;
    border:2px #ddd dotted;
    border-radius: 5px;
    color:#000;

    line-height: 140%;
}
.tools .section-headline h3 {
    border-width: 0;
    padding: 0;
}
.tools ul {
    margin-left: 20px;
}
.tools .canvas {
    margin: 0;
}
.tools .remarks {
    margin-bottom: 0;
}

/*おすすめツール（色分け）*/
.note-blue .tools {
    border:2px #07b0f2 dotted;
}
.note-blue .tools .section-headline {
    color: #07b0f2;
}

.note-yellow .tools {
    border:2px #d4d948 dotted;
}
.note-yellow .tools .section-headline {
    color: #d4d948;
}

.note-green .tools {
    border:2px #45bfb3 dotted;
}
.note-green .tools .section-headline {
    color: #45bfb3;
}



/****************************/
/*レスポンシブ*/
/****************************/
@media (min-width: 580px) {

    .tools {
        padding: 30px;
    }
}

@media (min-width: 780px) {
    .technique .img-technique {
        max-width: 160px;
        margin: 0 0 0 auto;
    }
}

@media (min-width: 980px) {

    /* .mokuji ol {
        list-style-type: none;
        margin: 0 0 0 20px;
    } */

    /*カラム：ステップエリア*/
    .area-step {
        width: 70px;
        margin-right: 10px;
    }

    /*カラム：コンテンツエリア*/
    .area-contents {
        width: calc(100% - 70px - 10px);
        display: flex;
        flex-wrap: wrap;
    }

    /*カラム：コンテンツエリア*/
    .area-contents {
        width: calc(100% - 70px - 10px);
        display: flex;
        flex-wrap: wrap;
    }

    /*カラム：コンテンツエリア中央*/
    .area-fill {
        width: calc(100% - 280px - 20px);
    }

    /*カラム：コンテンツエリア右*/
    .area-right {
        width: 280px;
        margin-left: 20px;
    }
    /*ステップ*/
    .step{
        width: 50px;
        margin: 0 auto 30px;
    }
    .step li{
        padding: 20px 10px;
        margin-bottom: 25px;
    }
    /* 先端部分 */
    .step li::after{
        bottom: -30px;
        border-width: 15px 25px;
    }

    .technique {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .technique .img-technique {
        max-width: 200px;
        margin: 0 0 0 auto;
    }

    .tools ul {
        margin-left: 40px;
    }
}

@media (min-width: 1280px) {
}