@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    line-height: 1;
    /* 各ブラウザが持っている外部・内部余白、行間を初期化する */
    box-sizing: border-box;
    /* 幅を指定した要素（タグ）にborder、paddingを設定した際に要素が広がってしまうことを防ぐため */      
}

body {
    font-family: "Oswald", "Noto Sans JP", sans-serif;
    font-weight: 300;
    color: #333;
    /* サイト全体の文字色を定義しておく */
}



ul {
    list-style: none;
    /*   liの装飾を削除する  */
}


a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで持っている下線を消しておく */
}

img{
    max-width: 100%;
    /* 親要素の大きさ以上大きくならない かつ、自分の大きさ以上にはならない */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。他の防ぐ方法としてインライン要素をブロック要素に変える方法もあり */
}




/*-----------------------------------------
    各パーツ共有 - setting   
-----------------------------------------*/

.container {
    max-width:1024px;
    padding: 0 20px;
    margin: 0 auto;
}
/* 各パーツ共有の設定、または流用  */


/*-----------------------------------------
    html setting
------------------------------------------*/
html{
    scroll-behavior: smooth;
}
/*-----------------------------------------
    header setting
------------------------------------------*/
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

header .header_inner {
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    height: 100px;
    /* 高さ指定 100px */
    align-items: center;
    /* heightの垂直中央揃えのオプション  */
    justify-content: space-between;
    /* 横並び対象子要素の両端揃い設定 */
}

header h1{
    width: 250px;
    padding-bottom: 5px;
     /* フォントサイズや、その他のデザイン装飾は適宜設定 */
}

header p{
    font-size: 14px;
    font-weight: 400;
    /* フォントサイズは適宜設定 */
}



/*-----------------------------------------
    nav_menu setting
------------------------------------------*/


nav ul {
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */   
}


nav li a {
    display: block;
    /* aタグをブロックボックスに設定してマウスの反応範囲を広げる */
    padding: 15px 25px;
    /* aタグのテキストに上下（15px）、左右のpadding（25px） */
    color: #444;
    /* フォントカラー装飾は適宜設定 */
    transition: 0.3s;

}

nav li a:hover {
    color: #f00;
    /* ホバー時の背景色、フォントカラーは適宜 */
}



/*-----------------------------------------
    main_image setting
------------------------------------------*/
.main_image{
    padding: 100px 10px 0;
}

.main_image ul{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 10px;
    grid-auto-rows: 180px;

}

.main_image li img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.main_image li.list1{
    grid-column: 1/3;
    grid-row: 1/3;
}



/*-----------------------------------------
   main mainの中で共通なタグの設定
------------------------------------------*/
main h3{
    font-size: 20px;
    border-left: 4px solid #000;
    padding: 6px 8px;
    margin-bottom: 8px;
}

main h4{
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 400;
    /* 完成系を見ながら装飾は適宜設定 */
}


/*-----------------------------------------
    content slogan
------------------------------------------*/
 .slogan{
    text-align: center;
    /* テキスト中央揃い */
    padding: 60px 20px 100px;
    /* 内側余白、上60px、左右20px、下100px程度で設定 */
}

.slogan h2{
    font-size: 24px;
    /* フォントサイズ、24pxほどに設定 */
    margin-bottom: 40px;
    /* 見出しの次のブロックの段落との下側の外余白を */
}

.slogan h2 br.sp{
    display: none;
}


.slogan p{
    line-height: 1.8;
    letter-spacing: 0.07em;
    font-weight: 400;
    /* 行間設定、適宜　一般的には、1.5前後〜2前後での行間設定がよしとされる */
}


/*-----------------------------------------
    .product setting
------------------------------------------*/

.product{
    padding:100px 0 140px;
    /* 各productのブロックに内側の余白（p100-0-140程度）を設定 */
}

.product ul{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 80px 15px;
    /* gridの設定 */
}


.product li .photo{
    aspect-ratio: 4/3;
    margin-bottom: 8px;
    /* aspect-ratioの設定 4/3ほど */
}

.product li .photo img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* object-fitの設定 */
}

.product li .txt{
    letter-spacing: 0.07em;
    line-height: 1.8;
    /* 行間、文字間の設定 lh1.8 ls0.07emほど */
}


/*-----------------------------------------
    footer setting
------------------------------------------*/

footer{
    background-color: #333;
}


.footer_inner p{
    text-align: right;
    padding: 70px 0;
}
.footer_inner small{
    color: #fff;
}



@media (width<768px){

/*-----------------------------------------
    header responsive setting
------------------------------------------*/    
    header .header_inner {
        padding: 20px 10px;
        display: block;
        /* ロゴとナビの横並びを無効 */
        height: auto;
        /* 高さ制定の初期化、無効 */
    }
    header h1{
        margin: 0 auto;
        /* 幅指定ブロックの中央揃い */
        padding-bottom: 10px;
        /* テキストとの余白設定 */
    }
    header p{
        text-align: center;
        /* テキストの中央揃い */
    }
    
/*-----------------------------------------
    nav_menu responsive setting
------------------------------------------*/

    nav ul {
        justify-self: center;
        /* 子要素、水平方向の中央揃えの変更  */   
    }


    nav li a {
        padding: 15px 10px;
        /* 余白の設定 */
    }



/*-----------------------------------------
    main_image responsive setting
------------------------------------------*/
    .main_image ul{
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 100px;
        /* 横並びと、各セルの高さ（gar100）の調整 */
    }

/*-----------------------------------------
    slogan responsive setting
------------------------------------------*/
    .slogan h2 br.sp{
        display: block;
    }

    .slogan p{
        text-align: left;
    }


/*-----------------------------------------
    product responsive setting
------------------------------------------*/
    .product{
        padding:140px 0 50px;

    }
    .product:last-of-type{
        padding:140px 0 180px;
    }
    .product ul{
        grid-template-columns: repeat(2,1fr);
    }

/*-----------------------------------------
    footer responsive setting
------------------------------------------*/

    .footer_inner p{
        text-align: center;
    }

    
}/* media query end */