/* サイト最初の設定 */
@charset "UTF-8";


html {
    font-size: 100%;
  }
  body {
    color: #333;
    font-size: 0.875rem;
  }

/* コンテナーの設定（サイト全体のコンテンツ幅、1000） */
.container {
    width: 1000px;
    margin: 0 auto;
}

/* インナーの設定（中のコンテンツの最大幅、800） */
.inner {
    max-width: 800px;
    margin: 0 auto;
}

/* スタイルをリセット（a、ol、img） */
a {
    text-decoration: none;
}
ol,ul{
    list-style: none;
}
img {
    max-width: 100%;
}

/*=======================
 共通 
========================*/
/* h2タイトルの設定（フォント1.125rem、太、中央 */
.h2-ttl {
    text-align: center;
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 30px;
}



/*=======================
 ヘッダー 
========================*/
/* タイトル上余白60、タイトル幅180 */
header {
    /* タイトル上余白60 */
    margin-top: 60px;
}
header .h1-ttl {
    /* タイトル幅180 */
    width: 180px;
    /* 
    h1タグ
    line-height にh1タグの高さよりも
    小さい値「1px」を指定することで、
    h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
    「line-height: 0;」を指定してもOKです
    */
    line-height: 1px;
    /* background-color: chartreuse; */
    /* 下余白margin */
    margin-bottom: 15px;
}

header .h1-ttl a {
    /* aタグのリンク範囲を親要素のサイズに広げる */
    display: block;
}

/*=======================
メイン画像 
========================*/
.main-visual {
    /* 画像下の余白margin60 */
    margin-bottom: 60px;
}

/*=======================
 INDEX 
========================*/
/* INDEXセクション全体 */
#index {
    /* 背景色 #F5F5F5 */
    background-color: #F5F5F5;
    /* 外側上部余白60 */
    margin-top: 60px;
    /* 内部余白 */
    padding: 60px;
}

/* 内部のリスト部分全体 */
.index-inner {
    /* 枠線 */
    border: solid 1px #333;
    /* 内部余白30 */
    padding: 30px;
}

/* 「display: table;」と「margin: 0 auto;」で中央に配置。
この方法を使うとテキストの長さに応じて可変で中央配置できる
*/
.index-list {
    /* センタリング */
    display: table;
    margin: 0 auto;
    
}

.index-list li{
    /* 行間を20 */
    margin-bottom: 20px;
}

/* 最後のliタグには margin-bottom を設定しない */
.index-list li:last-child {
    margin-bottom: 0;
}

/*=======================
 パネル写真 
========================*/
/* 横並び、折り返し */
.list {
    /* 横並び */
    display: flex;
    /* 折返し */
    flex-wrap: wrap;
    /* 間隔 */
    justify-content: space-between;
    /* 余白margin　30 0 45 0？？ */
    margin: 30px 0 45px 0;
}
.list li {
    /* 幅を49%で指定 */
    width: 49%;
    /* 下余白を15とる（マージン） */
    margin-bottom: 15px;
    /* リセットcssがないと、左にパディングが入る */
}
.list li img {
    /* 画像の下にできる隙間を消す（縦方向の位置決め） */
    vertical-align: bottom;
}

/*=======================
 DETAIL 
========================*/
#detail {
    /* 背景色を　#f5f5f5 */
    background: #f5f5f5;
    /* detailセクションの内側余白60 */
    padding: 60px;
    /* 外側余白を60？？？ */
    margin-bottom: 60px;
}

/* 左を著書に、右をテキストに */
#detail .flex {
    display: flex;
}

/* 左側の設定 */
#detail dl {
    /* 幅35％。セクション800ー左右60×2＝680、
        （166＋71＝237、237÷680≒34.85% */
    width: 35%;
    /* 右側の罫線 */
    border-right: solid 1px #333;
}
#detail dt {
    /* 著書等のタイトルを太字 */
    font-weight: bold;
}
#detail dd {
    /* dt、dlごとの余白10 */
    margin-bottom: 10px;
}
#detail dd:last-child {
    margin-bottom: 0;
}

/* 右側の設定 */
#detail .text {
    /* 幅65％ */
    width: 65%;
    /* 左側の余白40 */
    padding-left: 40px;
}
#detail .text p {
    /* テキスト下の余白20 */
    margin-bottom: 20px;
}
#detail .text .link {
    /* リンク箇所の文字色黒に */
    color: #333;
}
#detail .text .link:hover {
    /* 透過 0.8 */
    opacity: 0.8;
}



/*=======================
 フッター 
========================*/
footer {
    /* background-color:chartreuse; */
    /* フォント 0.625rem */
    font-size: 0.625rem;
    /* 下余白　15（75-（#detailで余白60）） */
    padding: 15px 0;
    /* センタリング */
    text-align: center;
}



/*======================================
 レスポンシブ 
======================================*/
@media screen and (max-width: 1024px) {
    /* 左右の余白を整える。20 */
    .inner {
        padding: 0 20px;
    }

    /*=======================
    ヘッダー 
    ========================*/
    header {
        /* 左余白10 */
        padding: 0 10px;
    }
    /*=======================
    INDEX 
    ========================*/
    #index {
        /* セクションindexの上下余白40、左右20 */
        padding: 40px 20px;
    }
    /*=======================
    パネル写真 
    ========================*/
    /* 画像の縦並び */
    .list {
        flex-direction: column;
    }
    .list li {
        width: 100%;
        text-align: center;
    }
    /*=======================
    DETAIL 
    ========================*/
    #detail {
        /* 余白（セクションINDEXと同じ） */
        padding: 40px 20px;
    }
    #detail .flex {
        /* 横並びを縦並びに */
        flex-direction: column;
    }

    /* 左側 */
    #detail dl {
        /* 幅35％→100％へ */
        width: 100%;
        /* 右側の罫線を消す */
        border-right: none;
        /* 下に罫線引く */
        border-bottom: solid 1px #333;
        /* 下のみ余白40 */
        padding: 0 0 40px 0;
    }

    /* 右側 */
    #detail .text {
        /* 幅を65％→100へ */
        width: 100%;
        /* 上余白を40、左の40→0へ */
        padding: 40px 0 0 0;
    }
}