@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

/* トップページのbodyにはJavascriptで .home クラスを追加しているので、 body.home で識別する。 */
/* ブログページは body.layout-two-column-right で識別できる。 */
/*　（本来、全部のbody要素指定には .layout-two-column-right 識別を入れるべきだが、問題がある箇所以外やっていない）*/


/********************************************************************************* PC表示用 */

/********************* トップページ画像 ******************/
body.home #header {
        background-image: url('http://jicr.roukyou.gr.jp/mod/kdsksk.jpg');
        background-size: cover;
}
/*****************************************************/

@media screen and (min-width: 768px) {

    /****************** 全体の調整（ページ幅やフォント、hr消し）*/
    
    * { font-family: 'Noto Sans JP', sans-serif !important; }
    body { background: white !important; }
    body:not(.layout-two-column-right) #container { width: 100% !important; padding: 0; }
    hr { display: none; }

    /****************** ヘッダー調整（上部ナビ、ロゴなど）*/
    
    /* ヘッダー全体（トップページなら画像なども） */
    body.home #header {
        height: 650px;
    }
    body:not(.home) #header {
        background: white;
        box-shadow: 0px 5px 15px rgb(220,220,220);
        height: 100px;
        margin-bottom: 80px;
    }
    
    /* 最上部ナビ */
    #navtop {
        width: 1100px;
        margin: auto; 
    }
    body.home #header #navtop {
        padding-top: 10px;
        padding-right: 50px;
    }
    body.home #header #navtop * {
        font-size: 12px;
        color: white;
        filter: drop-shadow(0px 1px 0px #666) drop-shadow(0px -1px 0px #666) drop-shadow(1px 0px 0px #666) drop-shadow(-1px 0px 0px #666);
    }   
    
    /* ロゴ */
    #logo * { padding: 0 }
    #logo img { display: none; }
    body.home #logo {
        margin: auto;
        margin-top: 300px;
        width: 1100px;
        height: 70px;
        padding: 0;
    }
    body:not(.home) #logo {
        margin: auto;
        width: 1100px;
        margin-top: 15px;
    }
    body:not(.home) {
        margin: auto;
        height: 150px;
        padding: 0;
    }
    body.home #logo:before {
        content: '一般社団法人　協同総合研究所';
        text-decoration: none;
        font-size: 48px;
        font-weight: 700;
        width: 100% !important;
        padding-left: 50px;
        color: #eee;
        filter: drop-shadow(1px 1px 0px #666) drop-shadow(-1px -1px 0px #666) drop-shadow(1px -1px 0px #666) drop-shadow(-1px 1px 0px #666);
    }
    body:not(.home) #logo a:after {
        content: '一般社団法人　協同総合研究所';
        text-decoration: none !important;
        font-size: 22px;
        font-weight: 700;
        width: 100% !important;
        color: #333;
    }
    body:not(.home) #logo a:link { text-decoration: none; }
    
    /* トップページのロゴ下説明文（トップページ以外では非表示） */
    body.home #header > h1 {
        width: 1100px !important;
        margin: auto;
        font-size: 14px;
        color: white;
        margin-top: 30px;
        padding-left: 100px !important;
        filter: drop-shadow(1px 1px 0px #666) drop-shadow(-1px -1px 0px #666) drop-shadow(1px -1px 0px #666) drop-shadow(-1px 1px 0px #666);
    }
    body:not(.home) #header > h1 { display: none; }
    
    /* トップページの「参加する」ボタン */
    body.home #header > h1 > a {
        display: block;
        text-decoration: none;
        color: white;
        margin-top: 40px;
        font-size: 25px;
        background-color: rgba(0,0,0,0.05);
        width: 200px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid white;
        padding: 20px 20px;
        filter: none !important;
        transition-property: all;
        transition: 0.2s linear;        
    }
    body.home #header > h1 > a:hover {
        background: rgba(255,192,0,0.7);
        font-size: 30px;
    }
    
    /****************************** メインメニュー */
    
    #navi { width: 100% !important; margin: 0 !important;}
    .mainmenu > a > img { display: none !important; } /* 画像文字を消して */
    #mmenu1:after { content: '研究所の概要' !important; } /* テキストを挿入 */
    #mmenu2:after { content: '所報・出版物' !important; }
    #mmenu3:after { content: '研究・仕事おこし' !important; }
    #mmenu4:after { content: '関連情報・リンク' !important; }
    #mmenu5:after { content: 'お問い合わせ' !important; }
    body.home #wrapper { width: 1100px; margin: auto; margin-bottom: 40px; }
    body:not(.home) #wrapper { width: 800px; margin: auto; margin-bottom: 40px; position: absolute; top: 20px; left: 500px }
    body.home .menu {
        width: 150px !important; 
        display: block !important;
        text-align: center;
        padding-left: 70px !important;
        font-size: 18px;
        font-weight: 700;
        padding-top: 20px !important;
        color: #444;    
    }
    body:not(.home) .menu {
        width: 120px !important;
        display: block !important;
        text-align: center;
        padding-left: 20px !important;
        font-size: 14px;
        font-weight: 700;
        padding-top: 20px !important;
        color: #444;    
    }
    body.home .submenu { margin-left: 50px; }    
    
    /******************************** トップページの検索部分 */
    
    body.home div[align="none"] { text-align: right; }
    body.home #container > div:nth-child(3) { width: 1100px; margin: auto; }
    body.home #container > div:nth-child(3) > :nth-child(9) { border-radius: 10px !important; }
    body.home #container > div:nth-child(3) > :nth-child(10) {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        margin-left: 20px;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-bottom: 20px;
    }
    body.home #container > div:nth-child(3) > font { display: none; }
    body.home #container > div:nth-child(3) > :nth-child(5) { display: none; }
    body.home #container > div:nth-child(3) > :nth-child(7) { display: none; }

    /******************************** トップページ本文のメイン列（右列） */
    
    body.home #container #main { width: 780px !important; }
    body.home #container #main * { width: 100% !important; }
    body.home #main > h2 > img { display: none;}
    body.home #main > div iframe {
        height: 780px !important;
        border: 0;
        overflow: hidden;
        margin-bottom: 100px;
    }
    body.home #main2 { display: none; }

    /******************************** トップページ本文のサブ列（左列） */
    
    body.home #sub > h3:nth-child(1) { visibility: hidden; }
    body.home #sub > h3:nth-child(2) > img:nth-child(1) { display: none; }
    body.home #sub tbody > tr:nth-child(1) { display: none; }
    body.home #sub table * { background-color: white !important; }
    body.home #sub table img { width: 100% !important; border: 1px solid #aaa}
    body.home #sub table a { text-decoration: none !important; } 
    body.home #sub tbody > tr:nth-child(2) > td > a:after {
        display: block;
        margin-top: 10px;
	margin-bottom: 30px;
        text-decoration: none !important;
        color: #444;
        font-weight: 700;
        font-size: 16px;
        content: '今月の所報のご案内';
    }
    body.home #sub tbody > tr:nth-child(5) img { display: none; }
    body.home #sub tbody > tr:nth-child(5) > td:nth-child(1) { display: none; }
    body.home #sub tbody > tr:nth-child(5) * { font-size: 14px; }
    
    /******************************** トップページ以外のレイアウト */

    body:not(.home) #subb { display: none; }
    body:not(.home) #mainb { 
        background: white; 
        float: none !important;
        width: 1000px;
        margin: auto;
        margin-bottom: 100px;
    }
    body:not(.home) #mainb #pan { margin-bottom: 30px !important; }
    body:not(.home) #mainb #pan img { margin-top: 20px !important; }
    body:not(.home) #mainb h1 { font-size: 20px; margin-top: 30px; margin-bottom: 30px; padding-left: 20px; }
    body:not(.home) #mainb h1 img { display: none }
    body:not(.home) #mainb h2 { font-size: 16px; }
    body:not(.home) #mainb p { font-size: 14px; }
    body:not(.home) #mainb ul * { font-size: 14px; }
    body:not(.home) #mainb_in { width: 100%; }
    body:not(.home) #mainb_in table { width: 100%; font-size: 15px; }
    body:not(.home) #mainb #pan h2 a br {display: none;}
    body:not(.home) #mainb_in table td br { display: none; } 
    body:not(.home) #mainb table { width: 100% }

    /********************************* フッター */
    
    div#footer_u { 
        width: 100% !important; 
        background: #048; 
        padding-top: 10px; 
        margin-top: 20px; 
    }
    div#footer_u * { font-size: 14px; color: white; }
    div#footer { width: 100% !important; background-color: #048; }
    div#footer * { font-size: 14px !important; }
    a[href*="www.access-counter.net"] { display: none; }

}


@media (max-width: 767px) {

    /****************** 全体の調整（ページ幅やフォント、hr消し）*/
    
    * { font-family: 'Noto Sans JP', sans-serif !important; }
    body { background: white !important; }
    body:not(.layout-two-column-right) #container { width: 100% !important; padding: 0; }
    hr { display: none; }
    
    /****************** ヘッダー調整（上部ナビ、ロゴなど）*/
    
    /* ヘッダー全体（トップページなら画像なども） */
    body.home #header {
        height: 450px;
    }
    body:not(.home) #header {
        background: white;
        box-shadow: 0px 3px 10px rgb(220,220,220);
        height: 80px;
        margin-bottom: 10px;
    }
    
    /* 最上部ナビ */
    #navtop {  width: 100%;  margin: auto;   }
    body.home #header #navtop {  padding-top: 10px; padding-right: 0px; }
    body.home #header #navtop * {
        font-size: 8px;
        color: white;
        filter: drop-shadow(0px 1px 0px #333) drop-shadow(0px -1px 0px #333) drop-shadow(1px 0px 0px #333) drop-shadow(-1px 0px 0px #333);
    }   
    #header #navtop li {width: 70px;}
    
    /* ロゴ */
    #logo * { padding: 0 }
    #logo img { display: none; }
    body.home #logo {
        margin: auto;
        padding: 0 !important;
        margin-top: 160px;
        width: 100%;
        height: 20px;
    }
    body:not(.home) #logo {
        margin: auto;
        width: 100%;
        margin-top: 22px;
        padding: 0;
    }
    body:not(.home) {
        margin: auto;
        height: 150px;
        padding: 0;
    }
    body.home #logo:before {
        content: '一般社団法人　協同総合研究所';
        text-decoration: none;
        font-size: 22px;
        font-weight: 700;
        width: 100% !important;
        padding-left: 20px;
        color: #eee;
        filter: drop-shadow(1px 1px 0px #333) drop-shadow(-1px -1px 0px #333) drop-shadow(1px -1px 0px #333) drop-shadow(-1px 1px 0px #333);
    }
    body:not(.home) #logo a:after {
        content: '一般社団法人　協同総合研究所';
        text-decoration: none !important;
        text-align: center;
        display: block;
        font-size: 16px;
        font-weight: 700;
        width: 100% !important;
        color: #333;
    }
    body:not(.home) #logo a:link { text-decoration: none; }
    
    /* トップページのロゴ下説明文（トップページ以外では非表示） */
    body.home #header > h1 {
        width: 60% !important;
        amargin: auto;
        font-size: 10px;
        color: white;
        margin-top: 30px;
        padding-left: 20px !important;
        filter: drop-shadow(1px 1px 0px #333) drop-shadow(-1px -1px 0px #333) drop-shadow(1px -1px 0px #333) drop-shadow(-1px 1px 0px #333);
    }
    body:not(.home) #header > h1 { display: none; }
    
    /* トップページの「参加する」ボタン */
    body.home #header > h1 > a {
        display: block;
        text-decoration: none;
        color: white;
        margin-top: 30px;
        font-size: 16px;
        background-color: rgba(0,0,0,0.05);
        width: 200px;
        text-align: center;
        border-radius: 10px;
        border: 2px solid white;
        padding: 10px 10px;
        filter: none !important;
        transition-property: all;
        transition: 0.2s linear;        
    }
    body.home #header > h1 > a:hover {
        background: rgba(255,192,0,0.7);
        font-size: 20px;
    }
    
    /****************************** メインメニュー */
    
    #navi { width: 100% !important; margin: 0 !important; margin-left: 10px;}
    .mainmenu > a > img { display: none !important; } /* 画像文字を消して */
    #mmenu1:after { content: '研究所の概要' !important;  } /* テキストを挿入 */
    #mmenu2:after { content: '所報・出版物' !important; }
    #mmenu3:after { content: '研究・仕事おこし' !important; }
    #mmenu4:after { content: '関連情報・リンク' !important; }
    #mmenu5:after { content: 'お問い合わせ' !important; }
    body.home #wrapper { width: 100%; margin: auto; margin-bottom: 40px; }
    body:not(.home) #wrapper { width: 100%; margin: auto; margin-bottom: 40px;}
    body.home #navi ul {margin-left: 20px; }
    body:not(.home) #navi ul {margin-left: 20px; }
    body.home li.mainmenu { width: 31%}
    body:not(.home) li.mainmenu { width: 31%}
    #navi { padding-left: 5%; }
    body.home .menu {
        margin: auto !important; 
        width: 100% !important; 
        display: block !important;
        text-align: center;
        padding-left: 0px !important;
        font-size: 12px;
        font-weight: 700;
        padding-top: 20px !important;
        color: #444;    
	cursor: pointer;
    }
    body:not(.home) .menu {
        margin: auto !important; 
        width: 90% !important; 
        display: block !important;
        text-align: center;
        padding-left: 0px !important;
        font-size: 10px;
        font-weight: 700;
        padding-top: 5px !important;
        color: #444;    
	cursor: pointer;
    }
    body.home .submenu { margin-left: 0px; }    
    
    /******************************** トップページの検索部分 */
    
    body.home #container > div:nth-child(3) { width: 100%; margin: auto; }
    body.home #container > div:nth-child(3) > :nth-child(9) { margin-left: 30px; border-radius: 10px !important; width: 50%; }
    body.home #container > div:nth-child(3) > :nth-child(10) {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        margin-left: 10px;
        padding: 3px 5px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin-bottom: 10px;
    }
    body.home #container > div:nth-child(3) > font { display: none; }
    body.home #container > div:nth-child(3) > :nth-child(5) { display: none; }
    body.home #container > div:nth-child(3) > :nth-child(7) { display: none; }
    
    /******************************** トップページ本文のメイン列（右列） */
    
    body.home #container #main { 
        width: 90% !important; 
        margin: auto !important; 
        display: block !important; 
        float: none !important; 
    }
    body.home #container #main * { width: 100% !important; }
    body.home #main > h2 > img { display: none;}
    body.home #main > h2:before { 
        content: '研究所だより（最新のお知らせ）'; 
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 20px;
    }
   
    body.home #main > div iframe {
        width: 90% !important;
        height: 1000px !important;
        border: 0;
        overflow: hidden;
        margin-bottom: 90px;
    }
    body.home #main2 { display: none; }

    /******************************** トップページ本文のサブ列（左列） */
    body.home #sub { float: none; width: 100%; margin: 0; margin-top: 20px;}
    body.home #sub table { width: 100%; margin-bottom: 50px;}
    body.home #sub h3 { width: 100%; }
    body.home #sub > h3:nth-child(1) { margin: 0; padding-top: 20px; background-color: #ddf; }
    body.home #sub > h3:nth-child(1):after { content: '所報『協同の發見』'; font-size: 14px; font-weight: 700}
    body.home #sub > h3:nth-child(1) img { display: none; }
    body.home #sub > h3:nth-child(2) > img:nth-child(1) { display: none; }
    body.home #sub tbody > tr:nth-child(1) { display: none; }
    body.home #sub table * { background-color: #ddf !important; }
    body.home #sub table img { margin-left: 5%; margin-right: 5%; width: 45% !important; border: 1px solid #aaa; float: left; margin-top: 20px; margin-bottom: 20px;}
    body.home #sub table a { text-decoration: none !important; } 
    body.home #sub tbody > tr:nth-child(2) > td > a:after {
        display: block;
        margin-top: 20px;
        margin-right: 20px;
        text-decoration: none !important;
        color: #444;
        font-weight: 400;
        font-size: 11px;
        text-align: left;
        content: '協同総研の所報である「協同の發見」では、「協同」という概念を軸に、さまざまな分野の研究成果や現場からの発言の場として、会員の皆様に寄稿していただいております。';
    }
    body.home #sub tbody > tr:nth-child(3) { display: none; }
    body.home #sub tbody > tr:nth-child(5) img { display: none; }
    body.home #sub tbody > tr:nth-child(5) > td:nth-child(1) { display: none; }
    body.home #sub tbody > tr:nth-child(5) * { display: none; font-size: 11px; }
    
    /******************************** トップページ以外のレイアウト */

    body:not(.home) #subb { display: none; }
    body:not(.home) #mainb, body:not(.home) #mainb_in { 
        background: white; 
        float: none !important;
        width: 100%;
        margin: auto;
        margin-bottom: 50px;
  	padding: 0;
    }
    body:not(.home) #mainb #pan { margin-bottom: 15px !important; max-width: 90%}
    body:not(.home) #mainb #pan img { margin-top: 10px !important; max-width: 90%; }
    body:not(.home) #mainb h1 { font-size: 15px; margin-top: 30px; margin-bottom: 15px; padding-left: 0px }
    body:not(.home) #mainb h1 img { display: none; padding-left: 10px; }
    body:not(.home) #mainb h2 { font-size: 14px;  padding-left: 10px;}
    body:not(.home) #mainb p { font-size: 11px; padding-left: 10px; width: 90%}
    body:not(.home) #mainb ul * { font-size: 11px;  padding-left: 10px; width: 90%}
    body:not(.home) #mainb_in { width: 100%; }
    body:not(.home) #mainb_in p { font-size: 11px; padding-left: 10px; width: 90%}
    body:not(.home) #mainb_in table { width: 100%; font-size: 12px; }
    body:not(.home) #mainb #pan h2 a br {display: none;}
    body:not(.home) #mainb_in table td br { display: none; } 
    body:not(.home) #mainb table { width: 100% }
    body:not(.home) img { max-width: 80%; }

    body:not(.home) #mainb div[align="center"] img[width="600"] {
	width: auto; height: auto;
    }

    /********************************* フッター */
    
    div#footer_u { 
        width: 100% !important; 
        background: #048; 
        padding-top: 10px; 
        margin-top: 20px; 
    }
    div#footer_u * { font-size: 9px; color: white; }
    div#footer { width: 100% !important; background-color: #048; }
    div#footer * { font-size: 9px !important; }
    a[href*="www.access-counter.net"] { display: none; }
    
    
}