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

【必要な設定】
◎文字装飾
◎マージン
◎header
◎footer
◎ファーストビューの表示方法
spは特に設定なし
pad-pcに記述あり(横向き)





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


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

実際の初期設定・その他 

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

/* 手動リセット */

a{
    display: block;
}

a:hover {
    opacity: 1;
  }

img {
    vertical-align: bottom;
    /* なぜかimgの下に余白ができる時(初期設定がbaselineになっているため) */
}


/* 実際の初期設定 */

html {
    font-size: 10px;
}

body {
    font-family: 'Hiragino Kaku Gothic Pro', 'Mairyo', sans-serif;
    font-feature-settings: "palt";

    background: #f6f9ed;
    /* 修正予定 */
}

/************
画面幅設定
***********/


.content_wrap{
    margin-top: 16%;
}


/************
文字設定 
***********/

h1, h2, h3 {
    font-weight: bold;
}

/* 各章・緑色の見出し */

.h2_green{
    color: #009844;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* 大概1行の見出し */

h3 {
    font-size: 2rem;
    /* 20px */
}

/* h4と言う名の英文のみ見出し */

h4 {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: Avenir, Arial, Helvetica, sans-serif;
}

p {
    font-size: 1.25rem;
    /* 12.5px */
    text-align: justify;
    /* SP優先でブロック文章の設定 */
}

/************
選択クラス
***********/

/* 一箇所だけ変更する場合の設定・クラスを指定して反映　 */

.view_pc {
    display: none;
    /* PC用表示は消す　 */
}

.ta_c {
    text-align: center !important;
}

.p_sp {
    text-align: left;
}

.u_ma_15 {
    margin: 0 0 15px 0;
}

.u_ma_30 {
    margin: 0 0 30px 0;
}

.pa_25 {
    padding: 25px;
}

.pa_0_25 {
    padding: 0 25px;
}

.pa_50 {
    padding: 50px;
}

.pa_100_50 {
    padding: 100px 50px;
}

.pa_75_150 {
    padding: 75px 150px;
}


.ma_25 {
    margin: 25px;
}

.ma_50 {
    margin: 50px;
}

.wrap_inline{
    display: inline !important;
}

.bk_white{
    background: white;
}

/* grid */

.container {
    display: grid;
    align-content: space-between;
}

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


セクション独自の設定　▶︎▶︎▶︎top.cssへ移植


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


.dis_n{
    display: none;
}


  .br_view_sp{
    display: none;/*-いらない改行-*/
}

/*------------------------
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）*/
        

        /*PAD版を表示*/

        .view_pad {
            display: block;
        }

        /************************
        #contents　　　　　【未】　▶︎▶︎▶︎移植+footerの記述は削除
        ************************/


    
}


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

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

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

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

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

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

        /************************
        全体　　　　【未】
        ************************/

        /*PC版を表示*/

        /*PCをどこまで表示するかで書き換える*/

        .view_pc {
            display: block;
            /*　コンテンツにするとなぜかパディング効かないので。。。*/
        }

        /*SP版を非表示*/

        .view_sp {
            display: none;
        }

        /*---------------------
        全体の文字装飾
        ---------------------*/

        /* 大概1行の見出し */

        /* 各章・緑色の見出し */

        .h2_green{
            color: #009844;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1;
        }


        h3 {
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: 0.3rem;
            line-height: 5rem;
        }

        p {
            font-size: 1.5rem;
            /* 適当px */
        } 



        /************************
        ファーストビュー
        ************************/

        /*------------------------
        PCならではのフィット設定
        ------------------------*/

        #first_view {
            position: relative;
            width: 100%;
            min-height: 100vh;
            }


    
}


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

【独自設定】

PCの設定

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

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


    /*　内側の設定...　*/
    
    #hum_menu_pc,
    #foot_co_wrap,
    #copylight,
    #container_works,
    .dream,
    .people,
    .birthplace,
    #vision_wrap_pc,
    #container_news,
    #container_links,
    #container_links_su,
    .m_width1200
    {
        max-width: 1200px;
        margin:0 auto;
    }

    /*　ビジョンだけ伸ばさなきゃいけない */


    #vision_wrap_pc{
        max-width: 1400px;
    }

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

    

}



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

【独自設定】

PADの設定

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

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

    #hum_menu_pc,
    #foot_co_wrap,
    #copylight,
    #container_works,
    .dream,
    .people,
    .birthplace,
    #vision_wrap_pc,
    #container_news,
    #container_links,
    #container_links_su,
    #athlete
    {
        max-width: 1200px;
        margin:0 auto;
    }

    #vision_wrap_pc{
        max-width: 1400px;
    }



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

    
 
}









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

以下後日設定

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


/*　ipadだけだと768-(その他デバイス含めてpadは600~)*/
@media only screen 
  and (min-device-width: 600px) 
  and (max-device-width: 1024px) {

    footer {
        max-width: 1024px;
        /*　一時的な設定*/
    }

    .content_wrap,
    header,
    #foot_co_wrap,
    #copylight {
        max-width: 1024px;
        margin:0 auto;
        /*　一時的な設定*/
    }
   
 
}

/* ----------- iPad 1, 2, Mini and Air(コリス参照) ----------- */
 
/* Portrait　(縦) and Landscape　(横) */
/* 本当は768-1024 */

@media only screen 
  and (max-device-width:768px) 
  and (max-device-width: 899px) {



 
}

/* ----------- iPad Pro 12.9"(コリス参照) ----------- */

/* 基本、追記無し！ */

/* Portrait and Landscape(縦表示はほぼPCとみなしてよし) */
@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {


    header,
    footer
     {
        max-width: 1366px;
        margin:0 auto;
        /*　一時的な設定*/
    }

    /* マージンtopを消さないための設定 */

    .content_wrap
     {
        max-width: 1366px;
        /*　一時的な設定*/
    }


    #vision_wrap_pc{
        max-width: 1400px;
        /*　一時的な設定*/
    }

    #foot_co_wrap,
    #copylight 
    {
        max-width: 1200px;
        margin:0 auto;
        /*　一時的な設定*/
    }

    


}

/*　ipad proかつ 縦向き*/

@media (orientation: portrait) 
and (min-device-width: 1024px) 
and (max-device-width: 1366px){
    
    /*　ファーストビューが縦幅一杯にならない設定*/

    #first_view{
        min-height: unset;/*　通常のminheight打ち消し*/
        height: 700px;/*　minheight消したことで消える高さを補う*/
        margin: 9% auto 0;/*　ネガティブマージンの領域*/
    }

    }

    /*　ipad proかつ 横*/

@media (orientation: landscape) 
and (min-device-width: 1024px) 
and (max-device-width: 1366px){
    
    /*　ファーストビューのマージンが実機テストではずれる件*/
    .content_wrap{
        margin: 8% auto;
    }
    

    }