@charset "utf-8";

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


body {
    /* font-size: large; */
    color: #111111;
    font-weight: bold;

    margin: 20px 174px 20px 100px;
    background-color: cornsilk;

}

h1 {
    border: #111111 2px solid;
    color: #222222;
    font-size: 24px;
    text-align: center;
    padding: 20px 20px;
    margin: 40px auto;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);

}

h2 {
    width: 400px;
    border: #111111 2px solid;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
    border-radius: 6px;
    padding: 10px 0px;

    font-size: 24px;
    text-align: center;

    margin: 60px 0px 20px 0px
}

/* nav {
  background-color: #fff;
  text-align: center;
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
  position: sticky;
  top: 0;
} */
.h2Flex {
    display: flex;
    justify-content: flex-end;
}

nav ul {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

nav ul li a {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    /* color: var(--color-white); */
}

nav ul li a:hover {
    color: var(--color-black);
    text-decoration: underline;
}


/* 写真　文字　の枠を既定 */
.ta-f333esxPic,
.gx-747Pic,
.gx-77Pic,
.ad-f40Pic {

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border: #111111 2px solid;
    border-radius: 20px;

}

/* 縮んでも写真と文字がバラバラにならない */
.aria {
    display: grid;
    margin: 20px 20px;
}

.issue {
    margin: 10px 0px 20px 40px;
    list-style: decimal;
}

/* テキストのエリアを規定 */
.ta-f333esxText,
.gx-747Text,
.gx-77Text,
.ad-f40Text {
    /* テキスト幅を写真幅に合わせる */
    width: 340px;
    /* テキスト・写真間隔(20px)と次の写真との間隔(40px) */
    margin: 20px 10px 10px 20px;
    font-family: serif;
    font-size: 16px;
    line-height: 1.6;
}

.textHead {
    font-size: 20px;
    width: 340px;
    margin: 20px 10px 10px 20px;
    font-family: sans-serif;

}

.mainImage {
    width: 340px;
    margin: 20px 10px 10px 20px;
}

/* 詳細リンク ++++++++++ */
.detailLink {
    /* text-align: right; */
    margin-bottom: 0;
}

.detailLink a {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
    background-color: rgb(56, 56, 39);
    color: #fff;
    font-weight: bold;
}

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