@charset "utf-8";

/*googlefont*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius&display=swap');

body {
    background-image: url(../images/bg.gif);
    font-size: 16px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:#333333;

header{
    width:1240px;
    margin: 0 auto 44px;
}

h1{
    text-align: center;
    padding: 20px 0px 16px;
}

header nav ul{
    display:flex;
    justify-content: center;
}

header nav ul{
    border-top: 2px solid #7c5d48;
    border-bottom: 2px solid #7c5d48;
    background-color: rgba(255,255,255,0.5);
    padding: 12px 0px 10px;
}

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

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

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

div{
    width:1240px;
    margin: 0 auto 50px;
    display: flex;
    justify-content: space-between;
}

main{
    flex-basis:920px;
    background-color:#ffffff;
    border-radius: 16px;
    padding: 22px 72px 32px 72px;
    box-shadow:0px 0px 8px rgba(0,0,0,0.2);
}

aside{
    flex-basis: 284px;
}

aside nav{
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow:0px 0px 8px rgba(0,0,0,0.2);
    padding: 24px 28px;
    margin-bottom: 24px;
}

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

.ekaki{
    font-size:18px;
}

aside nav ul{
    font-size:15px;
}

aside nav ul li{
    list-style-type: disc;
    color:#7c5d48;
    margin: 0 0 16px 20px;
}

aside ul li a{
    color:#333333;
}

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


article h2{
    font-size: 35px;
    font-weight: 500px;
    margin-bottom: 8px;
}

time{
    background-color: #91c777;
    border-radius: 22px 22px 22px 22px;
    font-size:15px;
    font-weight: bold;
    color: #ffffff;
    padding:13px 20px 12px 20px;
    display:inline-block;
}

.postdate{
    margin-bottom:10px;
}

.eyecatch{
    margin-bottom:20px;
}

article h3{
    border-bottom:2px solid #ADCFBA;
    margin-bottom: 15px;
    font-size:26px;
    font-weight:600;
    background-image: url(../images/flower.png);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding:20px 10px 10px 45px;
}

article section p{
    line-height: 1.5;
    margin-bottom: 24px;
}

article section{
    margin-bottom: 50px;
}

footer{
    background-color:antiquewhite;
    color: #7c5d48;
    text-align:center;
    padding: 14px 10px 20px;
}

.bold{
    font-weight:bold;
}

.pen{
  background:linear-gradient(transparent 50%, #e7ffbb 50%);  
}

h2{
    text-align:center;
}

figure{
    margin-bottom:14px;
}

figure figcaption{
    color:gray;
    font-size: 15px;
}

/*googlefont*/
.mochiy-pop {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kiwi-maru{
  font-family: "Kiwi Maru", serif;
  font-weight: 600;
  font-style: normal;
}

.delius-regular {
  font-family: "Delius", cursive;
  font-weight: 400;
  font-style: normal;
}

.button {
 display: inline-block; /* インライン要素として表示しつつ、幅や高さを指定できるようにする */
  padding: 10px 20px; /* ボタンの内部の余白 */
  background-color: #42a774; /* 背景色 */
  color: white; /* テキストの色 */
  text-decoration: none; /* 下線を消す */
  border: none; /* ボーダーを消す */
  border-radius: 6px; /* 角を丸くする */
  cursor: pointer; /* カーソルをポインターにする */
}

.button:hover {
  opacity:0.6;
}

@media screen and (max-width:500px){

}