/*
Theme Name: M・A NISSY
Theme URI:
Author: Manaka Nishibu
Author URI:
Description: WordPressを学んで、最初のテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html...
*/

@charset "utf-8";

body {
    font-size: 16px;
    font-family: sans-serif;
    line-height: 1.5;
    letter-spacing: 0.06em;
    background: #fffcd0;
}

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

.inner {
    max-width: 1075px;
    width: 80.25%;
    margin-left: auto;
    margin-right: auto;
}

hr {
    width: 10px;
    height: 10px;
}

/*header*/
header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 0;
    background: rgba(158, 216, 244, 0.9);
    z-index: 99;
}

.inner .logo {
    width: 45%;
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
}

header li {
    padding-left: 20px;
    letter-spacing: 0.01em;
    font-size: 12px;
    color: #3d3c40;
}

header li:hover {
    color: #fff;
}

/*about*/
.about {
    text-align: center;
}

.about .title-pc {
    display: none;
}

.about .title-mobile {
    width: 100%;
    padding-top: 100px;
}

.about .img-mobile {
    width: 100%;
}

.about .img-pc {
    display: none;
}

.about .deco-mobile {
    width: 100%;
    margin-top: 23px;
}

.about .deco-pc {
    display: none;
}

/*profile*/
.profile {
    margin-top: 107px;
}

.profile h2 {
    padding-bottom: 20px;
    font-family: "Arial Black";
    font-weight: bold;
    font-size: 10vw;
    color: #ea68a2;
}

.profile .allpost {
    position: relative;
    padding: 88px 0;
    background: #f1b5cf;
    text-align: center;
}

.profile .icon {
    width: 60%;
}

.profile .text {
    margin-top: 55px;
    padding: 31px 27px;
    border-radius: 15px;
    background: #fff;
    text-align: justify;
}

.profile .catchcopy {
    position: absolute;
    display: block;
    width: 40%;
    top: -50px;
    left: 0;
}

.profile .deco {
    position: absolute;
    display: block;
    top: -21px;
    right: 0;
}

.profile .deco2 {
    position: absolute;
    display: block;
    left: 0;
    bottom: -21px;
}

.profile .images {
    position: absolute;
    display: block;
    width: 38%;
    bottom: -76px;
    right: 0;
}

/*blog*/
.blog {
    margin-top: 200px;
}

.blog h2 {
    text-align: center;
    padding-bottom: 10vw;
    font-family: "Arial Black";
    font-weight: bold;
    font-size: 50px;
    color: #845099;
}

.blog .cate-text {
    margin-left: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
}

.blog .allpost {
    position: relative;
    padding: 80px 0 160px;
    background: #baa2d7;
}

.blog .catchcopy {
    position: absolute;
    display: block;
    width: 44%;
    top: -35px;
}

.blog .deco {
    position: absolute;
    display: block;
    top: -21px;
    right: 0;
}

.blog .deco2 {
    position: absolute;
    display: block;
    bottom: -21px;
}

.blog .images {
    position: absolute;
    display: block;
    width: 40%;
    bottom: -35px;
    right: 0;
}

.blog article {
    margin-bottom: 80px;
}

.blog .border {
    margin-bottom: 60px;
    border-bottom: #fff solid 3px;
}

.blog article img {
    width: 100%;
}

.blog .box {
    position: relative;
    z-index: 0;
}

.blog article p {
    padding: 11px 10px 0;
    width: 100%;
    background: #fff;
}

.blog .text {
    font-weight: bold;
}

.blog .day {
    padding-bottom: 15px;
    font-size: 12px;
}

.blog .btn {
    position: relative;
    display: inline-block;
    margin-top: 80px;
    padding: 8px;
    width: 178px;
    font-size: 20px;
    border-radius: 10px;
    color: #fff;
    background: #65559e;
}

.blog .btn:hover {
    background: #514285;
}

.btn img {
    position: absolute;
    width: 50%;
    top: 0px;
    left: 60px;
}

.nav-page {
    margin-top: 50px;
    font-weight: bold;
    font-size: 20px;
    color: #65559e;
}

.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: #5d48a9;
}

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

.sidebar h2 {
    text-align: center;
    font-family: "Arial Black";
    font-weight: bold;
    font-size: 10vw;
    color: #3ead95;
}

.sidebar .allpost {
    position: relative;
    padding: 104px 0 173px;
    background: #9ee1ba;
}

.sidebar .catchcopy {
    position: absolute;
    display: block;
    width: 40%;
    top: -30px;
}

.sidebar .deco {
    position: absolute;
    display: block;
    top: -21px;
    right: 0;
}

.sidebar .deco2 {
    position: absolute;
    display: block;
    bottom: -21px;
}

.sidebar .images {
    position: absolute;
    display: block;
    width: 30%;
    bottom: -100px;
    right: 30px;
}

.sidebar ul {
    text-align: center;
}

.sidebar ul img {
    position: absolute;
    width: 25%;
    top: 0;
    right: 15px;
}

.sidebar li {
    position: relative;
    display: inline-block;
    margin: 17px auto;
    padding: 5px;
    width: 50%;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    background: #fff;
}

.side-archive {
    margin-top: 50px;
}

form {
    position: relative;
    margin: auto auto;
}

.search-form-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin-top: 50px;
    width: 80%;
    border: 2px solid #418a7d;
    background: #fff;
    border-radius: 3px;
}

.search-form-1 input {
    padding: 5px 15px;
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
}

.search-form-1 input::placeholder {
    color: #777777;
}

.search-form-1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: none;
    background-color: #418a7d;
    cursor: pointer;
}

.search-form-1 button::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.search-form-1 button:hover {
    background: #1c453b;
}

/*footer*/
.common {
    margin-top: 164px;
    padding: 27px 0 5px;
    background: #9ed8f4;
    text-align: center;
}

.common .logo {
    width: 20%;
}

.common .title {
    padding-top: 6px;
    width: 60%;
}

.common ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0 55px;
}

.common li:hover {
    color: #fff;
}

/*single
---------------------------------------------*/


.single {
    background: url(./images/deco-background.png);
}

/*header*/
header {
    width: 100%;
}

header .pc-inner {
    width: 12%;
}

header .logo-single {
    width: 25%;
}

/*main*/
#ez-toc-container {
    font-size: 12px;
    margin-bottom: 50px;
}

.ez-toc-title-container {
    margin-right: 50px;
}

main .all {
    margin-top: 100px;
    padding-left: 21px;
    padding-right: 21px;
    background: #fff;
}

main .all img {
    width: 85%;
}

.all .top {
    padding-top: 40px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #9260ce;
}

.top .day {
    font-size: 13px;
    color: #000;
}

.allarticle .wp-block-heading {
    margin-top: 25px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    font-weight: bold;
    font-size: 20px;
    background: #baa2d7;
}

.allarticle p {
    margin: 20px 0 30px;
    text-align: justify;
    font-size: 16px;
}

.myself {
    margin-top: 67px;
}

/*contact*/
.contact {
    padding-left: 21px;
    text-align: left;
}

.comment {
    text-align: center;
}

.comment-form-comment label {
    display: block;
    text-align: left;
    margin-top: 60px;
    font-size: 14px;
    font-weight: bold;
}

.comment-form-author label {
    display: block;
    text-align: left;
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
}

.comment-form-email label {
    display: block;
    text-align: left;
    margin-top: 30px;
    font-size: 14px;
    font-weight: bold;
}

#comment,
#author,
#email {
    width: 268px;
    padding: 0.5em;
    background-color: #f5f5f5;
    font-size: 14px;
    text-align: left;
    margin: 0;
}

.contact input[placeholder],
textarea {
    margin-bottom: 10px;
    color: #777777;
}

.contact p {
    padding-bottom: 9px;
    font-size: 11px;
}

.submit {
    display: block;
    margin-top: 30px;
    margin-bottom: 50px;
    padding: 3px 0;
    width: 74px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background: #ed594e;
}

.submit:hover {
    background: #f72222;
}

/* comments-list */
.comments-list h3 {
    text-align: left;
    font-weight: bold;
    font-size: 19px;
}

.comments-list li {
    margin-top: 20px;
    padding: 0.5em 1em;
    text-align: left;
    background: #f5f5f5;
    border: dashed 2px #000;
    margin: 2em 0;
}

.comment-reply-link {
    display: block;
    font-weight: bold;
    font-size: 15px;
    text-align: right;
}


.comment-reply-link:hover {
    color: #ed594e;
}

/* nav-page */
.nav-page {
    margin: 15px;
    padding-bottom: 10px;
    font-size: 14px;
}

/*myself*/
.myself {
    text-align: center;
    margin-bottom: 67px;
    padding-bottom: 25px;
    background: #f1b5cf;
}

.myself h2 {
    padding: 25px 17px 22px;
    font-size: 40px;
    font-weight: bold;
    font-family: "Arial Black";
    color: #ea68a2;
}

.myself .my-text {
    text-align: justify;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 20px;
    padding: 25px;
    font-size: 14px;
    border-radius: 15px;
    background: #fff;
}

.myself img {
    margin-bottom: 20px;
    width: 35%;
}

/*sidebar*/
.sidebar-single h2 {
    text-align: center;
    font-family: "Arial Black";
    font-weight: bold;
    font-size: 40px;
    color: #3ead95;
}

.sidebar-single .allpost {
    position: relative;
    padding: 50px 0 60px;
    background: #9ee1ba;
}

.sidebar-single ul {
    text-align: center;
}

.sidebar-single li {
    position: relative;
    display: inline-block;
    margin: 17px auto;
    padding: 5px;
    width: 170px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    background: #fff;
}

.side-archive {
    margin-top: 50px;
}

/* seraech */
form {
    position: relative;
    margin: auto auto;
}

#searchform {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin-top: 50px;
    padding-left: 10px;
    width: 80%;
    border: 2px solid #418a7d;
    background: #fff;
    border-radius: 3px;
}

#searchform input {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-size: 15px;
    outline: none;
}

#searchform input::placeholder {
    color: #777777;
}

#searchform button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 35px;
    border: none;
    background-color: #418a7d;
    cursor: pointer;
}

#searchform button::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.search-form-1 button:hover {
    background: #1c453b;
}

.single-search input::placeholder .single-search button:hover {
    background: #1c453b;
}

/*footer*/
.common-single {
    margin-top: 50px;
    padding: 40px 0;
    background: #9ed8f4;
    text-align: center;
}

.common-single .logo {
    width: 20%;
}

.common-single .title {
    margin-bottom: 20px;
    padding-top: 6px;
    width: 60%;
}

.common-single small {
    font-size: 13px;
}

/* archive
--------------------------------------------------- */
.header-archive .logo {
    width: 25%;
}

.flex-archive .blog {
    margin-top: 70px;
    padding-top: 60px;
}

.flex-archive .sidebar {
    margin-top: 140px;
}

.flex-archive .post .cate-text {
    margin-left: 25px;
}

/*none-page
--------------------------------------------------*/
.none-page .logo {
    width: 25%;
}

.none-page .flex .blog {
    padding-top: 40px;
}

.none-page .blog {
    margin-top: 90px;
    margin-bottom: 100px;
}

.none {
    font-size: 17px;
    margin-left: 85px;
    padding: 10px 0 50px;
}

.post .cate-text {
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 50px;
}

.back {
    margin-top: 20px;
    margin-left: 200px;
    color: #49368b;
}

.common-search {
    text-align: center;
    margin-top: 0;
    padding: 60px 0;
    background: #9ed8f4;
}

/* not-found */
.not-found .logo {
    width: 20%;
}

.not-found img {
    text-align: center;
    margin-right: 100px;
    width: 20%;
}

.error-post {
    margin-top: 125px;
    padding: 30px;
    border-radius: 30px;
    background: #f8bc94;
}

.error-post .inner img {
    width: 100%;
}

.error-post dt {
    margin-top: 40px;
    font-size: 20px;
    font-weight: bold;
}

.error-post dd {
    margin-top: 20px;
    font-size: 15px;
}

.back-top {
    display: block;
    width: 100px;
    margin: 40px 0 40px auto;
    padding: 10px 0;
    text-align: center;
    border-radius: 5px;
    background: #f7a655;
}

.not {
    margin: 20px 0;
    padding: 40px 0;
    text-align: center;
    background: rgba(158, 216, 244, 1);
}

.back-top:hover {
    background-color: #fa7c42;
}

/*PC表示（700以上)
------------------------------------------------*/
@media(min-width:700px) {

    /*header*/
    .inner .logo {
        width: 35%;
    }

    header ul {
        margin-left: 20px;
    }

    header li {
        padding-left: 50px;
        font-size: 18px;
    }

    /*about*/
    .about .title-mobile {
        display: none;
    }

    .about .title-pc {
        display: inline-block;
        width: 90%;
        margin-top: 140px;
        text-align: center;
    }

    .about .img-mobile {
        display: none;
    }

    .about .img-pc {
        display: block;
        width: 100%;
    }

    .about .deco-mobile {
        display: none;
    }

    .about .deco-pc {
        display: inline-block;
        width: 90%;
        margin-top: 100px;
        text-align: center;
    }

    /*profile*/
    .profile h2 {
        font-size: 4vw;
        letter-spacing: 0.03em;
    }

    .profile .post {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
    }

    .profile .icon {
        width: 25%;
    }

    .profile .text {
        padding: 30px;
        width: 40%;
    }

    .profile .text p {
        font-size: 23px;
    }

    .profile .catchcopy {
        width: 17%;
    }

    .profile .deco {
        display: block;
        width: 19%;
        top: -38px;
    }

    .profile .deco2 {
        display: block;
        width: 19%;
        bottom: -37px;
    }

    .profile .images {
        display: block;
        width: 15%;
    }

    /*flex*/
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
    }


    /*blog*/
    .blog {
        margin-bottom: 291px;
        width: 60%;
    }

    .blog h2 {
        font-size: 4vw;
        letter-spacing: 0.03em;
    }

    .blog .cate-text {
        margin-left: 165px;
        margin-bottom: 20px;
        font-size: 17px;
        font-weight: bold;
        color: #fff;
    }

    .blog .border {
        margin: 0 auto 60px;
        width: 60%;
    }

    .blog .post {
        width: 80%;
    }

    .blog .box {
        width: 100%;
    }

    .blog article img {
        width: 100%;
    }

    .blog article p {
        font-size: 18px;
    }

    .blog .day {
        font-size: 15px;
    }

    .blog .btn img {
        width: 25%;
    }

    .blog .catchcopy {
        width: 30%;
        top: -90px;
    }

    .blog .deco {
        width: 31%;
        top: -37px;
        right: 0;
    }

    .blog .deco2 {
        width: 31%;
        bottom: -37px;
    }

    .blog .images {
        width: 25%;
        bottom: -70px;
    }

    .blog .btn img {
        width: 100%;
    }

    .box::after {
        width: 390px;
        height: 402px;
        top: 70px;
        left: 90px;
    }

    .blog .btn a:hover {
        background: #49368b;
    }

    .none {
        margin-left: 200px;
    }

    /*sidebar*/
    .sidebar {
        width: 40%;
    }

    .sidebar h2 {
        font-size: 4vw;
        letter-spacing: 0.03em;
    }

    .side-categoy li {
        width: 100%;
    }

    .sidebar .allpost {
        padding-top: 107px;
    }

    .sidebar .catchcopy {
        width: 40%;
        top: -60px;
    }

    .sidebar .deco {
        width: 45%;
        top: -27px;
    }

    .sidebar .deco2 {
        width: 45%;
        bottom: -27px;
    }

    .sidebar .images {
        width: 30%;
        bottom: -50px;
    }

    .sidebar ul {
        margin: 50px 0;
    }

    .sidebar li {
        margin: 40px 30px;
        font-size: 27px;
    }

    .search-form-1 input {
        font-size: 25px;
    }

    .search-form-1 {
        width: 65%;
    }

    .sidebar li:hover {
        color: #fff;
        background: #49a090;
    }

    /*footer*/
    .common {
        margin-top: 0;
        font-size: 25px;
    }

    .common ul {
        margin-top: 20px;
    }

    .common .logo {
        width: 10%;
    }

    .common .title {
        width: 30%;
    }

    .common small {
        font-size: 20px;
    }

    /*none-page
    --------------------------------------------------*/
    .none-page .logo {
        width: 35%;
    }

    .none-page .flex .logo {
        margin-top: 130px;
    }

    .none-page .blog {
        width: 100%;
        margin-top: 200px;
        margin-bottom: 230px;
    }

    .none-page .border {
        width: 50%;
    }

    .none-page .btn img {
        width: 100%;
    }

    .none-page .around img {
        width: 19%;
    }

    .none-page .box img {
        width: 100%;
    }

    .none-page .cate-text {
        margin-top: 50px;
        margin-left: 370px;
    }

    .none {
        text-align: center;
        font-size: 20px;
        margin-left: -75px;
    }

    .back {
        margin-right: 100px;
        text-align: right;
    }

    .back:hover {
        font-weight: bold;
    }

    .common-search {
        padding: 60px 0;
    }

    /*flex-archive*/
    .header-archive {
        margin-top: 0;
    }

    .flex-archive {
        display: flex;
        justify-content: space-between;
        margin-top: 100px;
    }

    .flex-archive .post .cate-text {
        margin-left: 230px;
    }

    /*single
    ---------------------------------------*/


    /* header */
    header .logo-single {
        width: 35%;
    }

    /* single-flex */
    .single .flex {
        margin-top: 50px;
    }

    /*all*/
    .all {
        margin-top: 100px;
        margin-right: 80px;
        width: 100%;
    }

    /*others*/
    .others {
        width: 45%;
    }

    /*header*/
    header {
        width: 100%;
    }

    .allarticle {
        font-size: 25px;
        margin-left: 35px;
        margin-right: 35px;
    }

    main .all img {
        width: 85%;
    }

    .all .top {
        padding-left: 33px;
    }

    /* comment */
    .comment-form-comment label {
        margin-left: 35px;
    }

    .comment-form-author label {
        margin-left: 35px;
    }

    .comment-form-email label {
        margin-left: 35px;
        font-size: 14px;
    }

    #comment,
    #author,
    #email {
        width: 582px;
        text-align: left;
    }

    .contact input[placeholder],
    textarea {
        margin-bottom: 10px;
        color: #777777;
    }

    .contact p {
        padding-bottom: 9px;
        font-size: 11px;
    }

    .submit {
        display: block;
        margin-top: 30px;
        margin-bottom: 20px;
        margin-left: 35px;
        padding: 3px 0;
        width: 74px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
        background: #ed594e;
    }

    .side-title {
        text-align: center;
    }

    /* comments-list */
    .comments-list h3 {
        margin-left: 35px;
        margin-right: 35px;
    }

    .comments-list li {
        margin-left: 35px;
        margin-right: 35px;
    }

    .nav-page {
        margin: 15px;
        font-size: 15px;
    }

    .common-single {
        background: #9ed8f4;
        text-align: center;
    }

    .common-single small {
        font-size: 20px;
    }

    .common-single {
        margin-top: 70px;
    }

    /* search-single */
    .post .cate-text {
        margin-bottom: 50px;
        font-size: 20px;
    }

    /* sidebar-single
    ------------------------------------------ */
    .side-category li:hover {
        color: #fff;
        background: #49a090;
    }

    .side-archive li:hover {
        color: #fff;
        background: #49a090;
    }

    /* not-found */
    .error-post {
        margin-top: 150px;
        padding: 150px 40px;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        text-align: center;
    }

    .not-found .logo {
        width: 25%;
    }

    .error-post .inner img {
        width: 100%;
    }

    .error-post dt {
        text-align: left;
        font-size: 30px;
        width: 100%;
    }

    .error-post dd {
        text-align: left;
        font-size: 20px;
    }

    .back-top {
        display: block;
        width: 100px;
        margin: 70px 0 70px auto;
        padding: 10px 0;
        text-align: center;
        border-radius: 5px;
        background: #f7a655;
    }

    .not {
        padding: 50px 0;
    }
}