@charset "UTF-8";


header{

height: 80px;
display: flex;
align-items: center;
}
main{
background-color: #F1F6C5;

}
/*メインイメージの設定*/
.main-image{
min-height: calc(100vh - (80px + 30px));/*vhはviewport heightの略*/
background-size: cover;
background-image: url("../images/Cover/main01.jpg");
background-position: 0 -50px;/*左 上*/
}
footer{

height: 30px;
text-align: center;
}
h1.logo{
width: 350px;
height: 70px;
background-csolor: #F4731C;
}
h1.logo img{
width: 100%;
height: auto;
}
header nav{
width: 470px;

}
header nav ul{
display: flex;
list-style: none;
align-items: center;
height: 70px;
}
header nav ul li{
width: 150px;
margin-right: 1rem;/*メニューボタンの間の余白*/
text-align: center;
height: 50px;
line-height: 50px;
}
/*テキストリンクの設定*/
a{
text-decoration: none;
color: #3D3D3D;
}
/*テキストリンクにマウスが乗った時(PCのみ)*/
a:hover{
color: #ff0000;
}
/*テキストリンク訪問済みの設定*/
a:visited{
color: #3D3D3D;
}
.container{
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
/*日記の設定*/

.diary-article{
width: 365px;
border: 1px solid #333333;/*境界線:線幅 線種 線色*/
padding:20px 10px;/*境界線より内側の余白(上下 左右)*/

box-sizing:border-box;
}

.diary-photo-thumb{/*写真*/
width: 100%;
margin-bottom: 20px;/*写真とタイトルの間の余白*/

}

.diary-photo-thumb img{
width: 100%;
height: auto;
}
.diary-title-box{
width: 100%;
display: flex;/*タグを横並び(段組)で表示させる*/
align-items:flex-end;
margin-bottom: 20px;
}
.diary-index-title{
font-size: 18px;
font-weight: bold;
width: 70%;
}
.update{
font-size: 12px;
width: 30%;
text-align: right;/*行揃え(右揃え)*/
}

.read_button{
width: 160px;
height: 30px;
background-color: #F4731C;
color: #ffffff;/*文字色*/
text-align: center;/*行揃え(中央揃え)*/
line-height: 30px;/*行の高さ*/
border-radius:5px;/*角丸設定*/
margin:0 auto;/*上下 左右 ※要素(タグ)を中央に配置するにはmarginの左右をautoに設定する。ただし、widthの設定がない場合は中央に配置されない*/
}
div.diary-page{
width: 100%;
}
/*日記ページタイトル*/
div.diary-page h2{
font-size: 24px;
}
.dairy-date{
font-size: 14px;
text-align: right;
margin-bottom: 0.5em;/*※emとremは別物*/
}
.diary-img{
width: 100%;
margin-bottom: 1rem;
}
.diary-img img{
width: 100%;
height: auto;
}
.dairy-text{
margin-bottom: 1rem;

}
.diary-text-end{
margin-bottom: 2rem;
}
.back_btn{
width: 300px;
background-color: #F4731C;
padding: 10px;
margin: 0 auto 2rem auto;
/*ボックス（要素）を中央に配置する場合、width（幅）を必ず設定すること。幅が設定されていないとauto設定が効かない*/
border-radius: 10px;
}
.back_btn a{
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
}
/*PC用レイアウト設定*/
@media screen and (min-width:1025px){
/*PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中にに記述*/
.container{
width: 1380px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.diary-article{
width: 450px;
padding: 30px;
margin-bottom: 15px;
}
.page-headline{
font-size: 2rem;
text-align: center;
padding-top: 1.5rem;
margin-bottom: 1.5rem;
}
div.diary-page{
width: 1380px;
}
div.diary-img{
text-align: center;
}
div.diary-img img{
height: 600px;
width: auto;
}
.dairy-page h2,
.diary-date,
.diary-title{
text-align: center;
}
.dairy-date{
margin-bottom: 1rem;
text-align: center;
}
.diary-page {
display: block;
}
.diary-text{
width: 980px;
margin: 0 auto 1rem auto;
}
.diary-text-end{
margin-bottom: 2rem;
}
}