@charset "utf-8";

body {
    color: #000;
    font-size: 15px;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.7;
    letter-spacing: 0.05em;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.inner {
    max-width: 1366px;
    width: 96.70%;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
}

/* header */
header {
    background: url(./images/top_bg.webp) no-repeat center center/cover;
}

header img {
    max-width: 100%;
    width: 65px;
    border-radius: 60px;
}

.blog .nav_bar {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

header h2 {
    padding-bottom: 180px;
    text-align: center;
}

.menu {
    display: none;
}

/* .menu.active {
    display: block;
} */

/* menu */
ul {
    list-style: none;
    cursor: pointer;
}

.hamburger {
    margin-top: 5px;
    height: 10px;
    width: 50px;
    background: #000;
    border-radius: 20% / 90%;
    transition: 1s;
    position: relative;
}

ul.active li:nth-child(1) {
    transform: translateY(15px) rotate(45deg);
}

ul.active li:nth-child(2) {
    transform: rotate(-45deg);
}

ul.active li:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
}

/* main */

/* top_posts */
.posts h2 {
    display: block;
    position: relative;
    width: 225px;
    height: 50px;
    margin: 15px auto 20px;
    padding: 5px;
    border-radius: 25px;
    font-size: 25px;
    background-color: #c8a1ea;
    text-align: center;
}

.up h2 {
    margin-top: -15px;
}

.top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.top a {
    display: block;
    width: 33%;
    aspect-ratio: 1/1;
}

.top img {
    /* max-width: 35%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* recent_posts */
.near h2 {
    width: 225px;
    height: 50px;
    font-size: 30px;
}

.recent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 90px;
}

article {
    /* display: flex;
    flex-wrap: wrap; */
    max-width: 45%;
    margin: 10px auto;
    background-color: #faf7ff;
    border-radius: 0 0 12px 12px;
}

article a img {
    margin: 10px 20px;
    max-width: 88.76%;
    border-radius: 12px 12px 0 0;
}

article .post-title{
    font-size:20px;
    font-weight:bold;
    text-align:center;
}

/* article p {
    margin: 0 auto;
    text-align: center;
} */

/* archive */
.tag{
    margin:15px auto;
    padding:5px;
    font-size:20px;
    font-weight:bold;
    color:#eeebeb;
    background-color: #c251d6;
    text-align:center;
}

/* contents */
.contents {
    margin-bottom: 100px;
}

/* post */
.post-all {
    margin-bottom: 60px;
}

.post {
    margin-top: 100px;
}

.post-title {
    margin: 10px;
}

.post-date {
    width:100%;
    margin-left:10px;
    margin-bottom: 30px;
    color: #666;
    font-style: italic;
}

.post-contents{
    width:100%;
    padding:10px;
}

.post-info {
    width:100%;
    margin-top: 30px;
    padding: 10px;
    border-top: 1px solid #bbb;
}

.post-btn {
    display: block;
    width: 150px;
    margin: 30px 0 0 auto;
    padding: 5px 0;
    color: #fff;
    text-align: center;
    background-color: #de6262;
    border-radius: 25px;
}

.post-btn:hover {
    color: #fff;
    background-color: #dd3535;
}

.nav-page {
    margin-top: 50px;
}

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

.nav-page a {
    display: block;
    margin: 0 5px;
    padding: 3px 10px;
    transition: all .2s;
}

.nav-page a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #f36;
}

/* sidebar */
.sidebar aside {
    margin-top: 40px;
}

.side-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    font-size: 15px;
    font-weight:normal;
    color:#333;
}

.side-list li {
    margin-bottom: 10px;
}

.about-name::after {
    content: "－";
    display: block;
}

.side-category,.side-archive{
    display:none;
    margin:0;
}

/* profile */
.profile {
    max-width: 100%;
    height: 96.15%;
    background-color: #b77bce;
}

.side-about .profile img {
    display: block;
    max-width: 55.12%;
    width: 215px;
    height: 55.12%;
    border-radius: 100%;
    margin-right: auto;
    margin-left: auto;
    transform: translateY(-35px);
}

.profile p {
    display: block;
    width: 75.64%;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 20px;
}

/* footer */
footer {
    background-color: #e3e0f3;
    text-align: center;
}

.bottom {
    padding: 20px;
}

.bottom img {
    display: block;
    max-width: 18%;
    /* width:110px; */
    /* height:65px; */
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
}

.bottom p {
    margin-top: 10px;
}

.bottom .sns {
    display: flex;
    padding: 15px 0;
}

.sns img {
    max-width: 10%;
    height: 40px;
}

/* PC */
@media(min-width:910px) {

    /* header */
    .blog .btn {
        display: none;
    }

    .blog {
        /* padding-top:60px; */
        padding-bottom: 120px;
    }

    .blog .nav_bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        backdrop-filter: blur(2px);
        /* border: 1px solid rgba(0, 0, 0, 0.8);
        box-shadow: 10px 10px 20px #111,
            -10px -10px 20px #ddd; */
    }

    .blog .menu {
        display: flex;
    }

    header .blog img {
        margin-left: 15px;
    }

    .menu ul {
        display: flex;
    }

    .menu ul li {
        margin-left: 20px;
        padding-right: 15px;
        font-size: 42px;
        color: #fff;
    }

    /* top posts */
    main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1366px;
        width: 94.87%;
        margin: 30px;
    }

    .allposts {
        width: 67.13%;
    }

    .posts h2 {
        color: #c23bf4;
        background-color: #fbf8fd;
        z-index: 1;
    }

    .top {
        margin-top: -35px;
        padding: 50px 15px 35px;
        background-color: #c8a1ea;
        border-radius: 10px;
    }

    .recent {
        margin-top: -35px;
        padding: 50px 15px 35px;
        background-color: #c8a1ea;
        border-radius: 10px;
    }

    .recent article {
        width: 42.12%;
    }

    .recent article img {
        width: 89.48%;
        height:25%;
    }

    .sidebar {
        max-width: 28.55%;
    }

    .side-category,.side-archive{
        display: block;
    }

    /* footer */
    footer .sns {
        margin: 0 auto;
        width: 34.77%;
    }
}


/** single page
----------------------------------------------------------**/
.post-title{
    margin:10px auto;
    color:#000;
}