@charset "UTF-8";

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

body {
    font-family: 'Verdana','Hiragino Sans','Meiryo',sans-serif;
    /*   ここまでフォントファミリー  各OSに適したフォントを用意しておく*/
    line-height: 1;
    /* 各ブラウザが持っている行間を初期化する */
    color: #333;
    /* サイト全体の文字色を定義しておく → c#333 */
    /* background-color: #eee; */
}


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


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

img{
    max-width: 100%;
    /* 親要素の大きさ以上大きくならず、かつ、自身の原寸大以上に大きくならない -> ma100p */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。-> vab */
}

/* ここまでリセットCSS */


/*-----------------------------------------
header setting
------------------------------------------*/

header{
    background-color: #eee;
}

header .header_inner {
    max-width: 960px;
    /* 最大値、960px それ以下可変　max-width使用 ->  ma960 */
    margin: 0 auto;
    /* widthを960px → w960 設定で、幅指定したブロックを中央揃い → m0-a */
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定 → df  */
    height: 100px;
    /* 高さ指定 100px → h100 */
    justify-content: space-between;
    /* 横並び対象子要素の両端揃い設定 → jcsb */
    align-items: center;
    /* heightの垂直中央揃えのオプション → aic  */
}

header .header_inner h1{
    width: 200px;
    /* imgの初期設定で親要素の幅の枠で100%で収まる */    
}

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


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

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

nav li a:hover {
    color: #fff;
    background-color: #555;
    /* ホバー時の背景色、フォントカラーは適宜  → c#fff bgc#555 */
}

/*-----------------------------------------
    main_image setting * 背景画像
------------------------------------------*/
.main_image{
    height: 500px;
    /* 背景画像表示には窓枠にあたる高さが必要 */
    background-image: url(../img/hero-header-img.webp);
    /* 背景画像を設置 -> bgi */
    background-repeat: no-repeat;
    /* 背景画像をリピートさせない -> bgr */
    background-position: center;
    /* 背景画像は初期設定でx、y座標とも0から始まるので右と下がトリミングされる傾向があるので画像表示の位置を調整 -> bgp */
    background-size: cover;
    /* 背景画像を設定した領域内でカバーさせる -> bgsc */

}


/*-----------------------------------------
    main setting
------------------------------------------*/

main{
    max-width: 960px;
    /* 最大値、960px それ以下可変　max-width使用 ->  ma960 */
    margin: 0 auto 80px;
    /* m0-a100 */
    padding: 40px 10px 100px;
    /* p40-10-100 */
}

main>section{
    padding: 20px 0 100px;
    /* main直下のsectionのみ設定 */
}

main h2{
    text-align: center;
    /* tac */
    padding: 30px 0;
    /* p30-0 */
}

main h3{
    background-color: #f2f2f2;
    /* 見出しの背景色設定 → bgc カラーピッカーを表示させ適宜色を取得 */
    border-left: 4px solid #555;
    /* 枠線左だけの設定 → bdl 初期の枠線を表示後、幅・色等を微調整 width → 4px */
    padding: 8px 10px;
    /* 内側余白設定（見出しは余白が必須）上下8px、左右10px → p8-10 */
    font-size: 20px;
    /* フォントサイズ20pxほど → fz20 */
    margin-bottom: 20px;
    /* 次のブロックからの外側下余白10pxほど → mb20  */
    /* 文字の装飾、完成形を見ながら適宜設定 */
}

main h4{
    font-size: 18px;
    /* フォントサイズ18pxほど → fz18 */    
    margin-bottom: 10px;
    /* 次のブロックからの外側下余白15pxほど → mb10  */    
    /* 完成系を見ながら装飾は適宜設定  */
}


/*-----------------------------------------
    message setting
------------------------------------------*/

.message ul{
    display: flex;
    /* df */
    justify-content: space-between;
    /* jcsb */
}

.message p{
    line-height: 1.9;
    /* lh1.9 想いを感じてほしいので行間を広め */
    text-align: center;
    /* tac */
    margin-bottom: 60px;
    /* mb60 */
}

.message ul li{
    width: 31%;
    /* w31p  */
    /* imgの初期設定で親要素 -> li の幅の枠で100%で収まる */    
}

/*-----------------------------------------
    item setting
------------------------------------------*/

.item_list{
    display: flex;
    /* df */
    justify-content: space-between;
    /* jcsb */
    margin-bottom: 60px;
    /* 下のブロックのとの余白設定 -> mb60 */ 
}


.item_list .photo{
    width: 300px;
    /* w300 */
    /* imgの初期設定で親要素 -> li の幅の枠で100%で収まる */      
}

.item_list .text{
    width: 600px;
    /* w600 左のブロックの画像幅とmainの左右padding合わせて、親要素の幅を超えないサイズ */
}


.item_list .text p{
    line-height: 1.7;
    /* lh1.7 事務的な情報なので少し行間を狭める */
}


/*-----------------------------------------
    news - setting   
-----------------------------------------*/


.news dl{
    display: flex;
    /* dt dd  横並び df -> display: flex; */
    align-items: center;
    /* dtの高さをpaddin20-0 の縦中央揃いに設定、ddもそれに合わせて、縦配置設定 */
    /* 高さ指定でも大丈夫 */
    /* aic -> align-items: center; */    
    flex-wrap: wrap;
    /* 折り返し設定 fxww ->  flex-wrap: wrap; */
    gap: 25px 0;
    /* dtとddの溝余白 (gap) 設定 g25-0 -> gap:25px 0 数値は適宜 */
}

.news dl dt{
    width: 20%;
    /* w20p */
    padding: 20px 0;
    /* 内側の余白上下20px設定 -> p20-0 */
    text-align: center;
    /* tac */
    color: #fff;
    /* c#fff */
    background-color: #222;
    /* bgc#222 */
}

.news dl dd{
    width: 80%;
    /* w80p */
    padding-left: 20px;
    /* pl20 */
    line-height: 1.6;
    /* lh1.6 適当な行間 */    
}

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

footer{
    background-color: #00f;
    /* bgc#444 */
}
footer p{
    text-align: center;
    /* tac */
    color: #fff;
    /* c#fff */
    padding: 60px 0;
    /* p60-0 */
}