@charset "utf-8";

:root {
--w-photo-x:clamp(360px,50%,540px);
--w-photo-s:clamp(360px,45%,540px);
--w-photo-y:clamp(360px,40%,540px);
}

/* photo */

.photo.photo-x img,
.photo.photo-s img {
width: 100%;
height: auto;
}
.photo.photo-y img {
width: auto;
height: 100%;
}

/* Report archive-item */

#Report .archive-item {
padding: 1em 0;
margin: 2em 0 0;
border-top:4px dotted var(--color-main-light);*/
}
#Report .archive-item h3 {
font-size: 180%;
font-weight: 900;
padding: 0;
margin: 0 0 .7em;
border-radius: 6px;
}

/* archive-list */

.archive-list {
display: flex;
flex-wrap: wrap;
}
.archive-list > li {
flex-shrink: 0;
}
.archive-list a {
text-decoration: none;
display: flex;
align-items: center;
padding: .5em;
border-radius: 6px;
transition: .5s ease;
border:1px solid #EEE;
}
.archive-list a:hover {
background: var(--color-main-pale);
border:1px solid var(--color-main-pale);
}
.archive-list .photo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 25%;
margin: 0 .7em 0 0;
aspect-ratio:1/1;
border:1px solid #EEE;
background: #FFF;
}
.archive-list h4 {
font-weight: 400;
color:#000;
width: 100%;
padding: .4em;
}

@media screen and (max-width:999px){
.archive-list > li {
width: 100%;
padding: 0;
margin: 0 0 .5em;
}
}

@media all and (min-width:1000px){
.archive-list > li {
width: calc(100% / 3);
padding: 0 .3em;
margin: 0 0 1em;
}
}

/* single-intro */

.single-intro .cont-head p.category {
font-size: 150%;
font-weight: 900;
display: flex;
align-items: center;
padding: 0 0 .5em;
}
.single-intro .cont-head .date {
color: var(--color-main-strong);
}
.single-intro .cont-head h2 {
display: flex;
justify-content: space-between;
padding: .4em 0 0;
border-top:1px dotted;
}
.single-intro .cont-head h2 > * {
display: block;
}
.single-intro .cont-head h2 .date {
font-size: 45%;
font-weight: 400;
}

@media screen and (max-width:999px){
.single-intro .cont-head p.category {
font-size: 130%;
}
.single-intro .cont-head .date {
padding: 0 0 .7em;
}
.single-intro .cont-head .date > * {
display: block;
}
}

@media all and (min-width:1000px){
.single-intro .cont-head .post-data {
display: flex;
justify-content: space-between;
}
.single-intro .cont-head p.category {
font-size: 150%;
}
.single-intro .cont-head .date .repost {
padding: 0 0 0 1em;
}
}

/* single-cont */

@media screen and (max-width:999px){
.single-cont {
padding: 2em 0 0;
}
}

@media all and (min-width:1000px){
.single-cont {
padding: 4em 0 0;
}
}

/* paragraph */

.paragraph {
padding: 0 0 3px;
margin: 0 0 5em;
overflow: hidden;
}

/* paragraph photo */

.paragraph .photo {
display: flex;
justify-content: center;
position: relative;
}
.paragraph .photo-cover {
display: block;
flex-shrink: 0;
padding: 7px;
background: #FFF;
border:1px solid #CCC;
box-shadow: 3px 3px 0 0 #EEE;
}
.paragraph .photo.photo-x .photo-cover {
width: 100%;
}
.paragraph .photo.photo-s .photo-cover {
width: 85%;
}
.paragraph .photo.photo-y .photo-cover  {
width: 80%;
}
.paragraph .photo.photo-y img {
width: 100%!important;
height: auto!important;
}

@media screen and (max-width:999px){
.paragraph .photo {
margin: 0 0 1.5em;
}
}

@media all and (min-width:1000px){
.paragraph .photo {
width: clamp(360px,45%,540px);
float: left;
}
}

/* paragraph photo libon */

.paragraph .photo .libon {
display: block;
width: 10%;
aspect-ratio:3/1;
background: var(--color-main-light);
position: absolute;
transform: rotate(-30deg);
}
.paragraph .photo .libon-left {
top:0;
left:0;
}
.paragraph .photo .libon-right {
bottom:0;
right:0;
}

/* paragraph photo + contents-box */

@media all and (min-width:1000px){
.paragraph .photo + .contents-box {
padding: 0 0 0 clamp(calc(360px + 1.5em),calc(45% + 1.5em),calc(540px + 1.5em));
}
} 

/* paragraph contents-box */

.paragraph .contents-box h3 {
font-weight: 900;
margin: 0 0 .7em;
}
.paragraph .contents-box .read {
margin: 0 0 1em;
}

@media screen and (max-width:999px){
.paragraph .contents-box h3 {
font-size: 155%;
}
}

@media all and (min-width:1000px){
.paragraph .contents-box h3 {
font-size: 175%;
}
}

/* paragraph links-box */

.paragraph .links-box {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: .8em .4em;
background: var(--color-main-pale);
}
.paragraph .links-box > p {
flex-shrink: 0;
padding: 0 .3em .4em;
}
.paragraph .links-box a {
color:#FFF;
display: block;
padding: .4em 1em;
border-radius: 2em;
background: var(--color-main-strong);
}

@media screen and (max-width:999px){
.paragraph .links-box {
justify-content: center;
}
}

/* none-posts-box */

.none-posts-box {
display: flex;
margin: 2.5em auto 0;
}
.none-posts-box .photo {
flex-shrink: 0;
}

@media screen and (max-width:999px){
.none-posts-box {
flex-direction: column-reverse;
width: 90%;
}
.none-posts-box .photo {
width: 30%;
margin: 30px auto 0;
}
}

@media all and (min-width:1000px){
.none-posts-box {
align-items: center;
width: 60%;
}
.none-posts-box .photo {
width: 15%;
margin: 0 30px 0 0;
}
}

/* none-posts-box read */

.none-posts-box .read {
padding: 1.2em;
border-radius: 8px;
background: var(--color-main-pale);
position: relative;
}
.none-posts-box .read::before {
content:"";
display: block;
width: 0;
height: 0;
position: absolute;
}
.none-posts-box .read h4 {
font-size: 130%;
color:var(--color-main-strong);
margin: 0 0 .7em;
}

@media screen and (max-width:999px){
.none-posts-box .read::before {
border-top:30px solid var(--color-main-pale);
border-left:20px solid transparent;
border-right:20px solid transparent;
bottom:-25px;
left:50%;
transform: translateX(-50%);
}
}

@media all and (min-width:1000px){
.none-posts-box .read::before {
border-right: 30px solid var(--color-main-pale);
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
top:50%;
left:-25px;
transform: translateY(-50%);
}
}


/* pagination */

.pagination {
margin: 2em 0 0;
padding: 1.5em 0 0;
border-top:1px dotted var(--color-main-strong);
}
.pagination .items {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.pagination .items > li {
padding: 0 .3em 0 0;
}
.pagination .next .text::after {
content:'→'
}
.pagination .prev .text::before {
content:'←'
}