@charset "utf-8";

:root {
  --color-white: #f9f9f9;
  --color-black: #333;
  --color-darkGray: #666;
  --color-lightgray: #aaa;
}

/* ページ全体の設定 */
body {
    background-image: url(../images/bg.png);
    font-size: 16px;
    font-family: 'arial', 'Hiragino Sans', 'Meiryo', sans-serif;
    color: #333333;
    width: 1240px;
    margin: 20px auto;

}

/* Header設定 */
header {
    margin: 0 auto 10px;

}

h1 {
    background-color: rgb(157, 215, 41);
    text-align: center;
    padding: 20px 0 0px;
}

/* ヘッダーナビゲーション設定 */
header nav ul {
    background-color: rgb(255 255 255/0.42);
    display: flex;
    justify-content: center;
    border-top: 2px solid #7c5d48;
    border-bottom: 2px solid #7c5d48;
    padding: 12px 0 10px;
}

header nav ul li {
    margin: 0px 20px;
}

header nav ul li a {
    font-size: 22px;
    font-weight: bold;
    color: #7c5d48;
}

header nav ul li a:hover {
    text-decoration: underline ;
}

#DIV {
    /* background-color: rgb(113, 142, 45); */
    /* background-color: yellow; */
    width: 1240px;
    margin: 0px auto 20px;
    display: flex;
    justify-content: space-between;
    /*  */
}

/* main */
main {
    background-color: #fff;
    flex-basis: 920px;
    box-shadow: 0px 0px 0px rgb(0, 0, 0/0.16);
    border-radius: 16px;
    padding: 62px 72px 32px 72px;

}

article h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 30px 0;

}
article .mainImage{

 /* display: grid; */
    width: 500px;
}

section {

    width: 800px;
    margin: 30px auto 30x 20px;
    padding: 30px;

}


section h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0px 5px 0px;
}

section p {
    line-height: 1.6;

}

/* aside設定 */
aside {
    flex-basis: 284px;
    /* margin-left: 36px; */
}

aside nav {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 0px rgb(0, 0, 0/0.16);
    padding: 24px 28px;
    margin-bottom: 24px;
}

aside nav h2 {
    color: #7c5d48;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 18px;
}

aside nav ul {
    font-size: 14px;

}


.recentNav {
    height: 380px;
    overflow: hidden scroll;

}

.recentNav li {
    margin-bottom: 20px;

}
.recentNav .specLine{
    border-bottom: 1px solid #000;

}
.specLine:hover{
    background-color: yellow;
}


.Logo {

    display: flex;
    width: 200px;
    margin: 0 auto;
    flex-wrap: wrap;

}

.Logo p {

    margin-bottom: 30px;
    border-bottom: 1px solid #000;
}
.categoryNav li {
    color: #7c5d48;
    margin-bottom: 10px;
}

.categoryNav a {
    color: #000;
}

.specText{

 font-size: 16px;

}

/* 詳細リンク ++++++++++ */

.detailLink a {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 4px;
  background-color: var(--color-darkGray);
  color: var(--color-white);
  font-weight: bold;
}

.detailLink a:hover {
  padding: 4px 20px;
}


/* フッター設定 */
footer {
    background-color: #7c5d48;
    text-align: center;
    color: #fff;
    padding: 20px 0px 30px 0px;

}