/************


セクション独自の設定


***********/



/************
 共通 
***********/

/* ボタン */

.next_view {
    font-size: 15px;
    color: #009844;
    font-family: Avenir, Arial, Helvetica, sans-serif;
    font-weight: 500;
    letter-spacing: 0.1rem;
    line-height: 1;
}

.next_view p{
    border-bottom: solid 1px #009844;
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;

}

/* 「02：ポリシー」の「co_wrap」内「div」に指定 */

#policy_3 .co_wrap div {
    text-align: right;
    padding: 0 25px 0 0;
}

#policy_3 p,
#vision p
{
    line-height: 2.7rem;
}


/************
 個別 
***********/

/* ０１：ビジョン */

#vision{
    background: white;
}

#vision div {
    position: relative;
}

#vision .next_view {
    position: absolute;
    top: -3%;
    left: 38%;
}

/* ０2：方針 */

#policy_3 {
    background: #f6f9ed;
    padding: 0 0 50px 0;
}

#policy_3 h2 {
    padding: 50px 0 0 0;
}


.pe_img_wrap{
    text-align: right;
}


/* ０3：コンテンツ */

#contents{
    background: #e1edc4;
}

#contents h3 {
    font-size: 15px;
    line-height: 1;
    /* 上下余白のリセット */
    padding: 12.5px 0 0 0;
    font-weight: 100;
}

.grid_contents {
    gap: 32px;
}

#container_works {
    grid-template:
        "works_item_01"1fr
        "works_item_02"1fr
        "works_item_03"1fr
        "works_item_04"1fr
        "works_item_05"1fr
        "works_item_06"1fr
        / 1fr;

    background: #e1edc4;
}

#w_item_01 {
    grid-area: works_item_01;
}

#w_item_02 {
    grid-area: works_item_02;
}

#w_item_03 {
    grid-area: works_item_03;
}

#w_item_04 {
    grid-area: works_item_04;
}

#w_item_05 {
    grid-area: works_item_05;
}

#w_item_06 {
    grid-area: works_item_06;
}

#sponsor_links {
    background: #e1edc4;
}

/* ０4：ニュース */

/* 日付の設定 */

.time_track{
    color: #9fa0a0 !important;
    font-size: 1rem !important;
    font-family: Avenir, Arial, Helvetica, sans-serif;
    padding: 0 0 40px 0;
}

#n_item_04 p{
    padding: 14px 0 0 0 !important;
}

#n_item_04 .time_track{
    padding: 0 0 0 0 !important;
}

/* 本来の表示 

#container_news {
    grid-template:
        "news_item_01"249px
        "news_item_02"375px
        "news_item_03"375px
        "news_item_04"383px
        "news_item_05"18px
        / 1fr;
    padding: 50px;
}

*/

#container_news {
    grid-template:
        "news_item_01"249px
        "news_item_02"820px
        / 1fr;
    padding: 50px;
}

#n_item_01 {
    grid-area: news_item_01;
}

#n_item_02 {
    grid-area: news_item_02;
}

#n_item_03 {
    grid-area: news_item_03;
}

#n_item_04 {
    grid-area: news_item_04;
}

#n_item_04 p{
    line-height: 2.8rem !important;
}

#n_item_05 {
    grid-area: news_item_05;
    text-align: center;
}

#kgpa_news {
    background: white;
}

#kgpa_news p {
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    padding: 20px 0 0 0;
}

/* 【SP】　０5：LINK */

#container_links {
    grid-template:

        "link_item_01"1fr
        "link_item_02"1fr
        "link_item_03"1fr
        "link_item_04"1fr
        / 1fr;

    gap: 15px;



}

#l_item_01 {
    grid-area: link_item_01;
}

#l_item_02 {
    grid-area: link_item_02;
}

#l_item_03 {
    grid-area: link_item_03;
}

#l_item_04 {
    grid-area: link_item_04;
}


/********************
特別な追記(後日編集・加筆)
********************/


    /* ボタンの設定・範囲拡張テスト */

    #next_view01 {
        
    }


/*------------------------
SP終わり
------------------------*/

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1425         藤村のPC
   1280-1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット横長(1024-1366)
        ◎iPad Pro：【横】1366
        ◎iPad：【横】1024
        ◎Mini：【横】　
        ◎Air：【横】1180
   768-480     - タブレット縦長(768-1024)
        ◎iPad Pro：【横】1024　 【縦】1366
        ◎iPad：【横】768　      【縦】1024
        ◎Mini：【横】　　        【縦】
        ◎Air：【横】820　     　 【縦】1180
   480-less    - スマホ
--------------------------------------------*/


/*--------------------------------

【共通設定】

[pad小]---[PC小]

(grid・文字装飾・パディング・表示非表示)

--------------------------------*/

@media only screen 
  and (min-device-width: 600px) 
  and (max-device-width: 899px) {
    /*　900px~最大サイズまでずっとこの設定*/
    /*　＝対応デバイス（600px-800pxくらいのタブレット/ipad）*/
        


        /************************
        #contents　　　　　【未】　　▶︎▶︎▶︎移植
        ************************/

        /* contentsのgrid */
        
        #container_works {
            grid-template:
                "works_item_01 works_item_02 works_item_03" 1fr
                "works_item_04 works_item_05 works_item_06" 1fr
                / 1fr 1fr 1fr;
            background: #e1edc4;
            padding: 100px 50px;
        }

        /* contentsの文字装飾 */

        #contents h3{
            font-size: 2rem;
            padding: 20px 0 13px;
            }
    
            #contents p{
            padding: 0 0 10px 0; 
            line-height: 3rem;
            }

        /************************
        NEWS　　　　　【未】
        ************************/

                
        /* Newsのグリット（ニュースは横1列） */

        #container_news {
            grid-template:
                "news_item_01 news_item_02"1fr
                / 1fr 3fr;
            gap: 30px;
            padding: 100px 50px;
            align-items: center;
        }

        /************************
        LINK　　　　【未】
        ************************/

        /* LINKのグリット・いくつまで設定するかは悩み中 */

        #container_links {
            grid-template:
                "link_item_01 link_item_02 link_item_03 link_item_04" 1fr
                / 1fr 1fr 1fr 1fr;/* 均等配置 */
            gap: 30px;
    
        }
    

        

    
}



/*--------------------------------

【共通設定】　　★★★★★★★★★★★★★★

[pad大]---[ノートPC]---[デスクトップPC]

(grid・文字装飾・パディング・表示非表示)

--------------------------------*/

@media only screen 
  and (min-device-width: 900px) 
  and (max-device-width: 4000px) {
    /*　900px~最大サイズまでずっとこの設定*/
    /*　＝対応デバイス（ノートpc/ラップトップ/ipad pro縦横）*/


        /************************
        ビジョン　　　　【確】　　▼▼▼移植
        ************************/

        #vision {
            text-align: center;
            background: white;
            padding: 5px 0 0;
        }

        #first_view {
        background: url("../img/sec01_img01_pc.jpg") center / cover;/* 必ず..ふたつをつける */

        }

        #vision p{
            line-height: 3rem;


        }

        #vision .next_view {
            top: 8%;
            left: 47%;
        }

        /************************
        #contents　　　　　【確】
        ************************/

        /* 初期設定 */

        .co_wrap {
            position: relative;
        }    

        #birthplace {
            padding: 0 180px;
        }

        /* contentsの文字装飾 */

        #contents h3{
            font-size: 2rem;
            padding: 20px 0 13px;
            }
    
        #contents p{
        padding: 0 0 10px 0; 
        line-height: 3rem;
        }

        /************************
        #ワークス　　　　　【確】
        ************************/

        /* ワークスのgrid */
        
        #container_works {
            grid-template:
                "works_item_01 works_item_02 works_item_03" 1fr
                "works_item_04 works_item_05 works_item_06" 1fr
                / 1fr 1fr 1fr;
            background: #e1edc4;
            padding: 100px 50px;
        }



        /************************
        NEWS　　　　　【確】
        ************************/

                
        /* Newsのグリット（ニュースは横1列） */
        

        #container_news {
            grid-template:
                "news_item_01 news_item_02"1fr
                / 1fr 3fr;
            gap: 30px;
            padding: 100px 50px;
            align-items: center;
        }

        #n_item_05{
            text-align: right;
        }

        #n_item_02 p,
        #n_item_03 p,
        #n_item_04 p
        {
            line-height: 2.8rem !important;
            padding: 14px 0 0 0 !important;
        }
        
        #n_item_02 .time_track,
        #n_item_03 .time_track
        {
            padding: 0 0 0 0 !important;
        }

        /************************
        LINK　　　　　【確】
        ************************/


        /* LINKのグリット */

        #container_links {
            grid-template:
                "link_item_01 link_item_02 link_item_03 link_item_04" 1fr
                / 1fr 1fr 1fr 1fr;/* 均等配置 */
            gap: 30px;
    
        }

    
}





/*--------------------------------

【独自設定】

PCの設定

--------------------------------*/

@media screen and (min-width:1025px) {
    /*　画面サイズが1025pxからはここを読み込む　*/


    /*********
   Policy ▶︎▶︎▶︎移植
   **********/

    /* po=ポリシー */

    .people,
    .birthplace
    {
        padding: 87px 0 0 0;
    }

    #policy_3
    {
        padding: 50px 0 100px 0;
    }

    #policy_3 p{
        line-height: 3rem;
    }

    #policy_3 h3{
        padding: 50px 50px 10px;
    }

    #policy_3 .people h3{
        padding: 6% 0 3% 56%;
    }

    #policy_3 .birthplace h3{
        padding: 50px 50px 40px;
    }

    #po_01_h2 {
        top: 1%;
        left: 57%;
    }

    #po_02_h2 {
        top: 3%;
        left: 4%;
    }

    #po_03_h2 {
        top: -2%;
        left: 57%;
    }

    /* ポリシーのP全てをABSOLUTE */

    .po_01_p,
    #po_01_h2,
    #po_02_h2,
    #po_03_h2 {
        position: absolute;

    }

    /* ポリシー１(DRESM)と3のP-1段落目 */

    #po_01_p1 {
        top: 35%;
        left: 55%;
    }

    /* ポリシー2(people)全文 */

    #po_02_p1 {
        top: 40%;
        left: 2%;
    }

    #po_03_p1 {
        top: 39%;
        left: 55%;
    }


    /* ボタンの設定 */

    #next_view01,
    #next_view02,
    #next_view03 {
        position: absolute;
    }

    #next_view01 {
        top: 107%;
        left: 57.2%;
    }

    #next_view02 {
        top: 107%;
        left: 4%;
    }

    #next_view03 {
        top: 105%;
        left: 57%;
    }

}





/*--------------------------------

【独自設定】

PADの設定

--------------------------------*/

/* 中間の幅(900-1024) */
@media only screen 
  and (min-device-width: 900px) 
  and (max-device-width: 1024px) {


    /*********
    Policy ▶︎▶︎▶︎▶︎top.cssへ移植
    **********/

    /* po=ポリシー */

    .people,
    .birthplace
    {
        padding: 87px 0 0 0;
    }

    #policy_3
    {
        padding: 50px 0 100px 0;
    }

    #policy_3 p{
        line-height: 3rem;
    }

    #policy_3 h3{
        padding: 50px 50px 10px;
    }

    #policy_3 .people h3{
        padding: 6% 0 3% 56%;
    }

    #policy_3 .birthplace h3{
        padding: 50px 50px 40px;
    }

    #po_01_h2 {
        top: 1%;
        left: 57%;
    }

    #po_02_h2 {
        top: 3%;
        left: 4%;
    }

    #po_03_h2 {
        top: -2%;
        left: 57%;
    }

    /* ポリシーのP全てをABSOLUTE */

    .po_01_p,
    #po_01_h2,
    #po_02_h2,
    #po_03_h2 {
        position: absolute;

    }

    /* ポリシー１(DRESM)と3のP-1段落目 */

    #po_01_p1 {
        top: 35%;
        left: 55%;
    }

    /* ポリシー2(people)全文 */

    #po_02_p1 {
        top: 40%;
        left: 2%;
    }

    #po_03_p1 {
        top: 39%;
        left: 55%;
    }
 
}