*{
margin: 0;
padding: 0;
}
body{
font-size: 18px;
margin: 0;
background-image: linear-gradient(to top, #fd9495, #c5c3cf 90%);
background-repeat: no-repeat;
background-size: 100% 300%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  /* または日本語向け */
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "MS PGothic", sans-serif;
}
header{
background-image: linear-gradient(to bottom, #8b8bff 95%, #c5c3cf 5%);
position: sticky;
top: 0;
z-index: 1000;
max-width: 960px;
margin: 0 auto;
margin-bottom: 0;
}
nav{
max-width: 960px;
margin: 0 auto;
margin-bottom: 0;
}
main,p{
max-width: 960px;
margin: 0 auto;
padding: 0px;
line-height: 1.6;
}
p.center{
text-align: center;
line-height: 1.6;
}
p.koushin{
color: #474554;
}
h1.entry-title{
margin-top:0;
margin-bottom: 8px;
color: #474554;
font-size: calc(0.2vw + 250%); 
padding-left: 10px;
font-family:"ゴシックMB101 B";
}
.description {
margin: 0;
}
.container{
max-width: 960px;    /* 1. 指定したい幅（例: 1000px） */
margin: 0 auto;       /* 2. 左右中央に配置 */
padding: 0px;        /* 3. 内側の余白 */
display: flex;        /* 4. 横並びにする */
align-items: baseline; /* 5. 文字の下端で揃える */
gap: 10px;            /* 6. タイトルと説明の間隔 */
}
.content{
max-width: 960px;
margin: 0 auto;
padding: 0px;
}
.description {
font-size: clamp(8px, 2vw, 18px);
}
img{
width: 100%;
max-width: 100%;
display: block;
margin: auto;
padding-bottom: 0px;
padding-top: 3px;
}
img.small{
padding: 10px;
width: 200px;
height: auto;
display: block;
margin: auto;
}
img.w80{
max-width: 80%;
height: auto;
margin: 20px;
display: block;
margin: auto;
padding-bottom: 15px;
}
li{
list-style: none;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 3px;
margin: 0px;
font-size: clamp(16px, 2vw, 18px);
font-weight: bold;
}
ul{
max-width: 960px;
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
padding: 0px;
margin: 0px;
}
li.nav1{
background-image: linear-gradient(to bottom, #8b8bff 0%, #c5c3cf 100%);
list-style: none;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 3px;
margin: 0px;
font-size: clamp(16px, 2vw, 18px);
}
ul.nav1{
max-width: 960px;
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
padding: 0px;
margin: 0px;
}
ul.nav2{
max-width: 960px;
margin-bottom: 0;
justify-content: right;
}
li.nav2{
background-image: linear-gradient(to bottom, #8b8bff 0%, #c5c3cf 100%);
list-style: none;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0px;
font-size: clamp(14px, 2vw, 18px);
}
.item{
display:flex;
justify-content:flex-start;
gap: 5px;
padding: 5px;
margin-right: 0px;
}
dl{
flex: 1;
text-align: center;
}
h2,h3,li,footer{
text-align: center;
}
dd{
margin-left: 0;
}
li a:hover{
background-image: linear-gradient(to bottom, #8b8bff 60%, #fd7778 100%);
}
table{
border-collapse:collapse;
width: 100%;
}
th,td{
border: solid 1px #333;
padding: 10px;
}
th{
background-color: #aca9bb;
text-align: left;
font-weight: normal;
}
td{
background-color: #faf8ff;
text-align: right;
}
h2{
color: #474554;
margin-bottom: 8px;
background-image:url(image/bg_h2.png);
background-repeat:no-repeat;
background-position:center bottom;
background-size:86px 13px;
}
h2.short{
color: #474554;
margin-bottom: 5px;
background-image:url(image/bg_h2.png);
background-repeat:no-repeat;
background-position:center bottom;
background-size:43px 13px;
}
h3{
color: #474554;
margin-bottom: 5px;
}
h3.left{
text-align:left;
color: #474554;
margin-bottom: 5px;
}
h4{
color: #474554;
margin-top: 15px;
margin-bottom: 5px;
border-bottom: 1px solid #be2a38;
}
section{
background-color: #fd9495;
max-width: 960px;
box-shadow: 0 0 5px 0 #8b8bff;
margin-bottom: 0px;
margin-top: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
section.section2{
background-color: #b7b4c7;
max-width: 960px;
box-shadow: 0 0 5px 0 #8b8bff;
margin-bottom: 10px;
margin-top: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
section.section3{
background-color: #b7b4c7;
max-width: 960px;
box-shadow: 0 0 5px 0 #8b8bff;
margin-bottom: 0px;
margin-top: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
div.text{
border-radius: 9px;
background-color: rgba(250, 248, 255, 0.5);
max-width: 90%;
margin: 0 auto;
box-shadow: 0 0 2px 0 #8b8bff;
margin-bottom: 5px;
margin-top: 5px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 25px;
padding-left: 30px;
}
p.right{
text-align: right;
color: #333;
}
dd img{
border-radius: 6px
}
footer{
margin-top: 5px;
}
.spbr {
    display: none;
}
p.link{
text-decoration-line:underline;
color: #0044CC;
margin-bottom: 10px;
text-align: left;
}
p.link:hover{
color: #be2a38;
}
a.title{
color: inherit;
text-decoration: none;
}
.new::after{
content: "NEW! ";
color: #ff0000;
font-weight: bold;
position: static;
z-index: 1;
}
.highlight-pen {
  font-weight: bold;
  /* 半透明の黄色 */
  background-color: rgba(255, 255, 0, 0.2);
}
@media (max-width: 600px) {
    .spbr {
        display: block;
    }
}
@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }
}
@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }
}
/* @media(width <= 600px){
ul{
flex-direction:column;
gap:10px;
}
.description{
flex-dirction:column;
}
} */