@charset "utf-8";

    body {font-family:YakuHanJP,Verdana,"Noto Sans JP",Meiryo, sans-serif; margin: 0px; overflow: hidden;}

    div.main{
        width: 700px;
        float: right;
        margin-left: 20px;
        margin-bottom: 36px;
    }
    div.member-f15w60{width: 60%; font-size: 1.5vmin;}

    img.img-w100 {width: 100%;}
    img.img-w140 {width: 140px;}
    img.img-w100h20 {width: 100%; height: 20%;}
    img.img-w20h20 {width: 20%; height: 20%;}
    img.sdgs-work {width: 100%; height: 150px;}
    img.top-header {width: 100%;}
    img.yakei {width: 100%; height: 270px;}

    h1 {font-size:4rem; font-family:inherit; font-weight:bold; color: #89786a;}
    h2 {font-size:3rem; font-family:inherit; font-weight:bold; color: #89786A;}
    h3 {font-size:2.5rem; font-family:inherit; font-weight:bold; color: #89786A;}
    h4 {font-size:1.5rem; font-family:inherit; color: #89786A;}

    table.table-w100cent{width: 100%; font-size: 12px; text-align: center;}
    ul.url-w55{width: 55%;}
    ul.url-w45{width: 45%;}
    
    div.about-subtitle01 {
        line-height: 18px;
        text-align: left;
        color: #000000;   
    }

    a {text-decoration: none;
        font-size: 12px;
        color: #514135;}
    
    a:visited {
        text-decoration: none;
        font-size: 12px;
        color: #514135;}
    
    a:hover {text-decoration: none;
        font-size: 12px;
        color: #89786A;}
    
    
    a img {border: none;}
    
    .clear{clear: both;}
    
    p{
        font-size: 14px;
        margin: 0px;
        padding: 0px;
    }
    
    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    }
    
    .clearfix {
      min-height: 1px;
    }
    
    * html .clearfix {
      height: 1px;
      height: auto;
      overflow: hidden;
    }
    
    #wrapper {
        width: 950px;
        text-align: left;
        margin: auto;
        clear: both;
        overflow: hidden;
    }
    
    div#container {
        display: flex;
        text-align: center;
        margin: auto;
        overflow: hidden;
    }

    /* flex;*/
    #main-content {
        margin-top: 15px;
        width: 950px;
        display: flex;
        overflow: hidden;
        height: 100vh;
    }
    
    #left-content {
        width: 220px;
        margin-bottom: 36px;
        max-height: 100vh;
    }
    #left-content:hover {
        overflow: hidden;
    }
    
    #right-content {
        width: 720px;
        margin-left: 10px;
        margin-bottom: 36px;
        overflow: auto;
        max-height: 100vh;
    }

    /* float */
    #left-content {
        width: 220px;
        float: left;
        position: relative;
    }
    
    #floatMenu {
        width: 210px;
        height: 350px;
        background-color:#FFFFFF;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 150vh;
    }
    
    .sub-menu ul li {
        padding: 0px;
        font-size: 13px;
        color: #000000;
        letter-spacing: 0.1em;
        border-bottom: 1px solid #bfbfbf;
        background: url(./images/icon/icon_40.jpg);
        padding-left: 30px;
        list-style-type: none;
        padding-bottom: 17px;
        padding-top: 17px;
        background-repeat: no-repeat;
        background-position: 10px;
    }

    /* about */
    .about-box {margin-bottom: 60px;}

    .about-text00 {
        width: 700px;
        margin-left: px;
        font-size: 12px;
        line-height: 18px;
        float: left;
        color: #000000;
    }

    .about-text01 {
        width: 338px;
        font-size: 12px;
        line-height: 18px;
        float: left;
        color: #000000;
    }
    
    .about-text02 {
        width: 338px;
        margin-left: 23px;
        font-size: 12px;
        line-height: 18px;
        float: right;
        color: #000000;
    }
    
    .about-text03 {
        width: 460px;
        margin-left: px;
        font-size: 12px;
        line-height: 18px;
        float: left;
        color: #000000;
    }

    /* sdgs */
    #sdgs-wrapper {
        padding-top:25px;
    }
    .sdgs-content {
        font-size:12px;
        margin-top: 10px;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .sdgs-title {
        font-family:YakuHanJP,Verdana,"Noto Sans JP",Meiryo,sans-serif;
        font-weight:bold;
        color:#221815;
        text-align:center;
        margin-bottom:20px;
    }	
    .sdgs-wrapper p {
        font-size:12px;
        line-height:1.2rem;
    }
    .text-red {
        font-size:16px;
        color:#dc097b;
    }
    .sdgs-text-wrapper {
        padding:0 10px;
    }
    #sdgs-sub-title {
        font-size:16px;
        margin-top: 8px;
        margin-bottom:3px; 
    }

    .sdgs-table {
        text-align: center;
        font-size:1.0rem;
        font-family:inherit;
        font-weight:bold; color:
        #89786A;
    }
    .span-wellness{color: #FFFFFF;}
    .web-url {display: flex}

    a[id] {
        display: block;
        position: relative;
        top: -50px; /* 調整したい高さに変更 */
        visibility: hidden;
    }

    @media screen and (max-width:599px) {
        #left-content{display: none;}
        .responsive-hidden{display: none;}
        .responsive-block{display: block;}
        .span-wellness{color: #000000;}

        #wrapper{
            margin-left: 5px;
            margin-right: 5px;
            padding-left: 0px;
            padding-right: 0px;
        }
        #sdgs-wrapper{width: 338px;}

        div.main{
            width: 100%;
            margin-left: 0px;
            margin-right: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
        div.member-f15w60{width: 50%; font-size: 1vmin;}

        img.img-w100h20 {width: 50%;}
        img.img-w20h20 {width: 20%;}
        img.img-w140 {width: 40px;}

        img.sdgs-work {width: 100%; height: 70px;}
        img.top-header {width: 50%; height: 170px;}
        img.yakei {width: 50%; height: 150px;}

        h1,h2,h3,h4 {width: 338px;}
        h1 {font-size:2.0rem;}
        h2 {font-size:1.5rem;}
        h3 {font-size:1.2rem;}
        h4 {font-size:1.0rem;}

        p {font-size: 1.0rem;}

        .about-text00{width: 338px;}
        .about-text01{float: none;}
        .about-text02{float: none;margin-left: 0px;}
        .about-text03{float: none;}
        .about-box {margin-bottom: 0px;}

        table.sdgsgoal{width: 338px; text-align: left;}
        table.table-w100cent{width: 338px;}
        
        .text-red{font-size:11px;}
        #sdgs-sub-title{font-size:11px; margin-top:0px; margin-bottom:0px;}
        .sdgs-text-wrapper {text-align: left; font-size:1.0rem;}
        .sdgs-table {font-size:1.0rem;}
        .web-url {flex-direction: column;}
    }