@charset "UTF-8";
* {
color: #333;
line-height: 1.5;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
html {
scroll-behavior: smooth;
}
.en {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-style: normal;
}
body {
background: #f8f7f6;
}
a {
color: var(--main-color);
}
a:hover {
opacity: 0.8;}
p {
line-height: 1.8;
margin: 5px 0 15px;
}
img {
display: block;
height: auto;
}
caption {
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
figcaption,cite {
color: #8c8f94;
font-size: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem);
display: flex;
justify-content: flex-end;
margin: 5px 0 15px
}
figcaption > span:first-child,cite > span:first-child {
white-space: nowrap;
}
figcaption a,cite a,figcaption span,cite a,cite span {
color: #8c8f94;
}
cite span:nth-child(2) {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bold {
font-weight: bold;
}
.mW {
width: 100%;
max-width: 1200px;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
h1 {
font-size: clamp(1.25rem, 1.193rem + 0.24vw, 1.375rem);
font-weight: bold;
margin-bottom: 20px;
}
h2 {
font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);
font-weight: bold;
border-bottom: 2px solid #c5c5c5;
padding-bottom: 10px;
margin: 30px 0 20px;
}
h3 {
font-size: clamp(1rem, 0.943rem + 0.24vw, 1.125rem);
font-weight: bold;
border-left: 4px solid var(--main-color);
padding-left: 10px;
margin: 30px 0 20px;
}
h4 {
font-weight: bold;
    margin: 16px 0 8px
}
table {
width: 100%;
}
.pageWrap {
display: flex;
justify-content: space-between;
gap: 20px;
width: 100%;
margin: auto;
padding-bottom: 80px;
}
.pageWrap.top {
margin: 40px auto 0;
}
main {
max-width: 700px;
width: 100%;
}
aside {
max-width: 350px;
}
ol.breadCrumb {
margin: 10px auto 30px;
} 
ol.breadCrumb li {
font-size: clamp(0.75rem, 0.6rem + 0.64vw, 1rem);
display: inline;
word-break: break-all;
} 
.breadCrumb li:not(:last-child)::after { 
content: "\03e";
margin: 0 3px 0 5px;
}
.date time {
ext-align: right;
display: flex;
padding-bottom: 5px;
justify-content: flex-end;
font-size: 14px;
}
.post main figure img {
width: 100%;
height: auto;
}
.articleWrap {
margin-bottom: 100px;
}
.articleWrap > div {
text-align: center;
font-weight: bold;
margin-bottom: 30px
}
.articleWrap > div span:first-child {
font-size: 32px;
}
.articleWrap > div span:nth-child(2) {
display: block;
font-size: 18px;
line-height: 1;
}
.articleWrap > ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
justify-items: center;
}
.articleWrap > ul li {
background: #fff;
}
.articleWrap > ul li dl {
padding: 10px 8px;
}
.articleWrap > ul li dl dt {
font-weight: bold;
margin-bottom: 10px;
}
.articleWrap > ul li figure img {
display: flex;
height: auto;
object-fit: cover;
aspect-ratio: 4 / 2.5;
width: 100%;
}
.blankLink {
margin: 15px 0;
}
@media screen and (max-width: 1080px) {
.pageWrap {
display: flex;
flex-wrap: wrap;
padding-bottom: 45px;
gap: 0;
}
main {
max-width: 100%;
}
aside {
max-width: 100%;
}
.articleWrap > div {
margin-bottom: 25px;
}
.articleWrap > div span:first-child {
font-size: clamp(1.625rem, 1.426rem + 0.85vw, 2rem);
}
.articleWrap > div span:nth-child(2) {
font-size: clamp(1rem, 0.934rem + 0.28vw, 1.125rem)
}
.articleWrap > ul {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 768px) {
.header {
display: none;
}
#article .spnav .nav li a,
.spnav .nav li a {
list-style: none;
margin: 0;
padding: 10px 3%;
display: block;
font-size: 14px;
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#article .spnav .nav li:last-child a,
.spnav .nav li:last-child a {
border-bottom: none;
}
.articleWrap > ul {
grid-template-columns: 1fr;
}
}