@charset "UTF-8";

/************************************************************************************
link-style
*************************************************************************************/

    a:link { color: #3D4347;text-decoration:none;transition: 1s ease-in-out;} 
    a:visited { color: #3D4347; text-decoration:none;transition: 1s ease-in-out;} 
    a:active { color: #544735; text-decoration:none;}
    a:hover { color: #544735;text-decoration:none;} 

/************************************************************************************
typography
*************************************************************************************/

    h1,h2,h3,h4,h5,h6{
        line-height:1.2em;
        font-family: 'Oswald', sans-serif;
        letter-spacing:2px;
        font-weight:300;   
        text-transform:uppercase;
    }

/************************************************************************************
general
*************************************************************************************/

    html{
        scroll-behavior: smooth;
    }

    *{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box
    }

/************************************************************************************
list-style
*************************************************************************************/

    ul,ol{
        margin:0;
        padding:0;
        list-style-type:none;
    }

    .blogpost ul,.plugcontent ul{
        margin:0 0 0 1.5em;
    }

    .blogpost ol,.plugcontent ol{
        margin:0 0 0 1.5em;
    }

    .blogpost ul li,.plugcontent ul li{
        list-style-type:circle;
        list-style-position:outside;
        margin:0;
        padding:0;
        position:relative;
        height:100%;
    }

    .blogpost ol li,.plugcontent ol li{
        list-style-type:decimal;
        list-style-position:outside;
        margin:0;
        padding:0;
        position:relative;
        height:100%;
    }

/************************************************************************************
body
*************************************************************************************/

    body {
        font-size:14px;
        font-family:'YuGothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角あゴ ProN', Meiryo, メイリオ, 'MS PGothic', Helvetica, Arial, sans-serif;
        color:#3D4347;
        line-height:1.9em;
        -ms-word-wrap: break-word;
        word-wrap: break-word;   
        position:relative;
        overflow:hidden;
    }

/************************************************************************************
container
*************************************************************************************/

    #container{
        width:100%;
        margin:0 auto;
        display:flex;
        position:relative;
    }

/************************************************************************************
header-container
*************************************************************************************/

    #header-container header a:link { color: rgba(255,255,255,0.7);text-decoration:none;transition: 1s ease-in-out;} 
    #header-container header a:visited { color: rgba(255,255,255,0.7); text-decoration:none;transition: 1s ease-in-out;} 
    #header-container header a:active { color:  rgba(255,255,255,0.7); text-decoration:none;}
    #header-container header a:hover { color:  rgba(255,255,255,0.7);text-decoration:none;} 

    #header-container{
        width:25%;
        height:100vh;
        padding:0;
        margin:0;
        background-color:#ffffff;
        box-shadow:0 0 5px #cccccc;
        border-right:px #333333 solid;
        position:fixed;
        top:0;
        left:0;
        z-index:99;
        background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunset.jpg);
        background-position:40% center;
        background-size:cover;
    }

    #header-container header{
        width:100%;
        height:100%;
        padding:50px 20px 50px 20px;
        margin:0;
        position:relative;
        line-height:1.2em;
        text-align:center;  
        color:#ffffff;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    h1{
        font-size:80px ;
        font-weight:400;
        letter-spacing:5px;
        line-height:1em;
        margin:0 0 30px 0;
        color:rgba(255,255,255,0.9);
        text-shadow:1px 1px 3px rgba(0,0,0,0.1);
    }

    .intro{
        font-size:12px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;
        text-shadow:1px 1px 2px rgba(0,0,0,0.7);
    }

/************************************************************************************
side-hidden
*************************************************************************************/

    .side-hidden{
        width:30%;
        height:100vh;
        position:fixed;
        top:0;
        left:-30%;
        padding:50px 5%; 
        margin:0;
        background-color:rgba(255,255,255,0.95);
        z-index:999;
        color:#333333;
        box-shadow:0 0 5px #cccccc;
        background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunsetside.jpg);
        background-position:center top;
        background-size:100% 30vh;
        background-repeat:no-repeat;
    }

    #checkleft{
        position:absolute;
        top:0;
        left:0;
        visibility:hidden;
        transition:0.3s;
    }

    .buttonleft,
    .buttonleft span {
        display:block;
        transition: 0.3s;
        cursor:pointer;
    }

    #checkleft:checked~ .side-hidden{
        position:fixed;
        top:0;
        left:0;
        opacity:1;
        transition:0.3s;
    }

    #checkleft:not(:checked)~ .side-hidden{
        left:-30%;
        opacity:0;
        position:fixed;
        top:0;
        transition:0.3s;
    }

    .buttonleft {
        position: fixed;
        top:0;
        left:0;
        width:65px;
        height:60px;
        padding:20px;
        z-index:9999999;
        display:block;
    }

    .buttonleft span {
        width:23px;
        height: 2px;
        background-color: #3D4347;
        border-radius: 2px;
        z-index:9999999;
        display:block;
        position:absolute;
    }

    .buttonleft span:nth-of-type(1) {
        top: 20px;
    }

    .buttonleft span:nth-of-type(2) {
        width:20px;
        top: 28px;
    }

    .buttonleft span:nth-of-type(3) {
        top: 36px;
    }

    #checkleft:checked~ .buttonleft span:nth-of-type(1) {
        -webkit-transform: translateY(9px) rotate(-45deg);
        transform: translateY(9px) rotate(-45deg);
    }

    #checkleft:checked~ .buttonleft span:nth-of-type(2) {
        opacity: 0;
    }

    #checkleft:checked~ .buttonleft span:nth-of-type(3) {
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
    }

    /* menu */

    .menu{
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        letter-spacing:4px;   
        text-transform:uppercase;
        font-size:12px ;
        width:100%;
        height:auto;
        padding:30px 0;
        margin:0;
        text-align:center;
        position:relative;
        z-index:99;
        color:#3D4347;
    }

    .menu ul{
        margin:0;
    }

    .menu ul li{
        margin:0;
        padding:10px 0;
        border-bottom:1px #A3B4BF solid;
    }

    .menu ul li:last-child{
        border:none;
    }
    
    .menu input[type="text"]{
        width:60px;
        height:auto;
        padding:0;
        margin:-1.7px 0 0 0;
        border:none;
        font-size:12px;
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        letter-spacing:4px;   
        text-transform:uppercase;
    }

    .menu input::placeholder{
        margin:0;
        padding:0;
        background-color:transparent;
        color:#3D4347;
    }

    input.input::-webkit-input-placeholder {
        margin:0;
        padding:0;
        background-color:transparent;
        color:#3D4347;
    }

    input.input::-moz-placeholder {
        opacity: 1;
        margin:0;
        padding:0;
        background-color:transparent;
        color:#3D4347;
    }

    input.input::-ms-input-placeholder {
        margin:0;
        padding:0;
        background-color:transparent;
        color:#3D4347;
    }

    .menu input[type="text"]:focus{
        outline:none !important;
        border:none;
        background-color:transparent;
    }

    .headerprofile{
        width:30%;
        padding:5%;
        height:auto;
        margin:18vh auto 0 auto;
        overflow:hidden;
        position:relative;
        z-index:99;
        background-color:#ffffff;
        border-radius:50%;
    }

    .headerprofile:before{
        content:"";
        display:block;
        padding-top:100%;
    }

    .headerprofile img{
        width:90%;
        height:90%;
        border-radius:50%;
        position:absolute;
        top:5%;
        left:5%;
    }

    .sidetext{
        text-align:center;
    }

    .sidetext p{
        margin:15px 0;
        text-align:justify;
    }

    /* social */

    .sidenav{
        margin:0 !important;
        padding:0 50px !important;
    }

    .sidenav ul{
        margin:0 !important;
        display:flex;
        justify-content:space-around;
    }

    .sidenav li {
        padding:0 !important;
        margin:0 10px !important
        overflow:hidden;
    }

    .sidenav li a:link,.sidenav li a:visited,.sidenav li a:hover{
        font-size:15px !important;
    }

/************************************************************************************
maincontents
*************************************************************************************/

    #barba-wrapper{
        width:75%;
        height:auto;
        padding:0;
        margin:0 0 0 25%; 
        background-color:#EBEFF2;
        min-height:100vh;
    }

    .barba-container{
        width:100%;
        padding:0;
        margin:0;
    }   
    
    #maincontents{
        width:100%;
        padding:50px 40px 50px 40px;
        margin:0;        
    }

    #maincontents #sidebar{
        display:none;
    }

    #maincontents #main{
        width:100%;
        padding:0;
        margin:0;
    }

    #maincontents .blogpost{
        width:100%;
        padding:0;
        margin:0;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        position: relative;
    }

    #maincontents .itempost{
        width:32%;
        padding:0 0 0 0;
        margin:0 0 40px 0;
        height:auto;   
    }

    .inner{
        position: relative;
        width: 100%;
        height: 100%;
    }

    #maincontents .inner a{
        display:block;
        width:100%;
        height:100%;
        box-shadow: 0 2px 4px rgba(3,3,3,.09);
        background-color:#ffffff;
        transition:0.3s;
    }

    #maincontents .inner a:hover{
        display:block;
        width:100%;
        height:100%;
        box-shadow: 0 8px 12px rgba(0,0,0,.12);
    }

    #maincontents .itemimg{
        width:100%;
        height:30vh;
        padding:0;
        margin:0; 
        position:relative;
    }

    #maincontents .itemimg img{
        width:100%;
        height:100%;
        padding:0;
        margin:0;
        object-fit:cover;       
    }

    .itemimg p{
        font-size:15px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;        text-transform:uppercase;
        letter-spacing:3px;
        color:#ffffff;
        text-shadow:1px 1px 3px rgba(0,0,0,0.7);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
        margin: auto;
        z-index:999;
    }

    #maincontents .itemtext{
        padding:0 25px 20px 25px;
        position:relative;
    }

    #maincontents .itemtext header time{
        width:50px;
        height:50px;
        background:radial-gradient(circle, rgba(163,180,191,0.9) 55%, rgba(163,180,191,1) 100%);
        /*radial-gradient(circle, rgba(242,213,206,0.9) 55%, rgba(242,213,206,1) 100%);*/
        color:#ffffff;
        margin:-25px auto 20px auto;
        padding:10px 0;
        border-radius:100%;        
        text-align:center;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        text-transform:uppercase;
        display:block;
        line-height:1.2em;
    }

    #maincontents .month01:before{content:"Jan";}
    #maincontents .month02:before{content:"Feb";}
    #maincontents .month03:before{content:"Mar";}
    #maincontents .month04:before{content:"Apr";}
    #maincontents .month05:before{content:"May";}
    #maincontents .month06:before{content:"Jun";}
    #maincontents .month07:before{content:"Jul";}
    #maincontents .month08:before{content:"Aug";}
    #maincontents .month09:before{content:"Sep";}
    #maincontents .month10:before{content:"Oct";}
    #maincontents .month11:before{content:"Nov";}
    #maincontents .month12:before{content:"Dec";}

    #maincontents .itemtext header h2{
        font-size:15px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
    }  

    .cm{
        width:100%;
        height:20px;
        text-align:right;
        font-size:11px;
    }  

    .cm img{
        width:12px;
        height:auto;
        vertical-align:middle;
    }

/************************************************************************************
origin searcharea editarea titlelist
*************************************************************************************/ 

    #origin,#searcharea,#editarea,#titlelist{
        width:100%;
        height:auto;
        padding:0;
        display:flex;
        margin:0;
        background-color:#EBEFF2;
        min-height:100vh;
    }

    #origin #main,#searcharea #main,#editarea #main,#titlelist #main{
        width:70%;
        padding:0;
        margin:0;
    }

    #origin .blogpost{
        width:100%;
        height:auto;
        padding:50px 5% 50px 5%;
    }
    
    #searcharea .blogpost,#editarea .blogpost,#titlelist .blogpost{
        width:100%;
        height:auto;
        padding:50px 5%;
    }

    .blogpost header{
        width:100%;
        padding:0 0 20px 0;    
    }

    #origin .blogpost time{
        font-size:10px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;      
        text-transform:uppercase;
        letter-spacing:3px;
        margin:0 0 10px 0;
        padding:0;
    }

    .month01:before{content:"January";}
    .month02:before{content:"February";}
    .month03:before{content:"March";}
    .month04:before{content:"April";}
    .month05:before{content:"May";}
    .month06:before{content:"June";}
    .month07:before{content:"July";}
    .month08:before{content:"August";}
    .month09:before{content:"September";}
    .month10:before{content:"October";}
    .month11:before{content:"November";}
    .month12:before{content:"December";}

    #origin .blogpost h2{
        padding:0;
        margin:0;
        font-size:18px;
    }

    .blogpost img{
        max-width: 100% !important;
        height: auto;
    }

/************************************************************************************
author
*************************************************************************************/

    .author{
        width:100%;
        height:auto;
        margin:20px 0;
        padding:20px;
        text-align:left;
        display:flex;
        letter-spacing:2px;
        background-color:rgba(163,180,191,0.1);
    }

    .authorimage{
        width:20%;
        padding:20px 10px 20px 0;
    }

    .authorimage img{
        width:100%;
        height:auto;
    }

    .authortext{
        width:80%;
        padding:20px 0 20px 10px;
        text-align:left;
    }

    .name{
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:3px;
        font-size:13px;
    }

    .authortext p{
        font-size:10px;
    }

    /* social */

    .social{
        padding:0;
    }

    .authornav{
        margin:0 !important;
        padding:0 !important;
    }

    .authornav ul{
        margin:0 !important;
    }

    .authornav li {
        padding:0 !important;
        margin:0 15px 0 0 !important;
        display:inline-block !important;
        overflow:hidden;
    }

    .authornav li a:link,.authornav li a:visited{
        font-size:12px !important;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;
        text-transform:uppercase;
    }

    .authornav li a:link,.authornav li a:visited{
        display:block;
        width:15px;
        height:20px;
    }

    .authornav li a:hover{
        width:70px;
        transition: width 0.3s linear;  
        -webkit-transition:width 0.3s linear;  
    }

    /* footer */

    .blogpostfooter{
        width:100%;
        height:auto;
        text-align:right;
        font-size:11px !important;
    }

    .blogpostfooter time{
        padding:0;
        margin:0;
        text-align:right;
        font-size:10px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
        border:none;  
    }

    .blogpostfooter time:after{
        content:"";
        width:100%;
        height:100%;
        border:none;
        position:relative;
    }

/************************************************************************************
related post
*************************************************************************************/

    #fc2relate_entry_thumbnail_area{
        width:100%;
        padding:0;
        margin:50px 0;
        overflow:auto;
        word-wrap:break-word;
    }

    #fc2relate_entry_thumbnail_area .relate_dt{
        margin:0;
        padding:10px 0;
        font-size:0;   
        text-align:center;
    }

    #fc2relate_entry_thumbnail_area .relate_dt:before {
        font-size: 15px; 
        content: "YOU MAY ALSO LIKE";
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        text-transform:uppercase;
        letter-spacing:5px;
    }

    #fc2relate_entry_thumbnail_area ul{
        width:100%;
        margin:0;
        padding:0;
        display:flex;
        justify-content:space-between;
        text-align:center;
    }

    #fc2relate_entry_thumbnail_area li{
        width:30% !important;
        padding:0;
        list-style-type:none;
        position:relative;
        text-align:center;
    　　 pointer-events:none;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_thumbnail{
        width:100% !important;
        height:auto !important;
        overflow:hidden;
        position:relative;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_thumbnail:before {
        content: "";
        display: block;
        padding-top: 75%;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_thumbnail img{
        width:100% !important;
        height:100% !important;
        position:absolute;
        top:0 !important;
        left:0 !important;
        object-fit:cover;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_thumbnail{
        display:block;
        overflow:hidden；
    }

    #fc2relate_entry_thumbnail_area .relate_entry_title{
        width:100%;
        height:100%;
        padding:15px;
        position:absolute;
        overflow:hidden !important;
        top:0;
        left:0;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        flex-direction:column;
        color:#ffffff;
        font-size:12px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;
        text-transform:uppercase;
        text-shadow:1px 1px 2px rgba(0,0,0,0.7);
        transition:0.3s;
        z-index:4;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_title:before{
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden !important;
        top:0;
        left:0;
        background:linear-gradient(325deg, rgba(242,213,206,0.1) 0%, rgba(242,213,206,0.3) 100%);
        animation-name: hoverout;
        animation-duration:0.5s;
        animation-fill-mode: forwards;
        z-index:3;
        content:"";
    }


    #fc2relate_entry_thumbnail_area .relate_entry_title a{
        color:#ffffff;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_title:hover:before{
        background:linear-gradient(325deg, rgba(242,213,206,0.0) 0%, rgba(242,213,206,0.0) 100%);
        animation-name: hover;
        animation-duration:0.5s;
        animation-fill-mode: forwards;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text{
        max-height:100% !important;
        display:block !important;
        z-index:4;
    }

    #fc2relate_entry_thumbnail_area .relate_entry_date{
        margin:3px 0 0 0 !important;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;
        text-transform:uppercase;
        font-size:10px;
        z-index:4;
    }

    @keyframes hover {
        0% {
        opacity: 1;
        }
        100% {
        opacity: 0; 
        }
    }

    @keyframes hoverout {
        0% {
        opacity: 0;
        } 
        100% {
        opacity: 1; 
        }
    }

/************************************************************************************
comment
*************************************************************************************/

    .comment{
        padding:40px 0 0 0;
        margin:40px 0 30px 0;
        font-size:13px;
    }

    h4{
        font-size:15px;
        padding:0 0 20px 0;
        font-weight:400;
        letter-spacing:5px;
    }

    .ctriangle{
        width:100%;
        position:relative;
        margin:18px 0 10px 0;
        padding:30px;
        background-color:rgba(163,180,191,0.1);
    } 

    .管理人 .ctriangle{
        width:100%;
        position:relative;
        margin:18px 0 10px 0;
        padding:30px;
        background-color:rgba(163,180,191,0.1);
    } 

    .管理人 .comtitle{
        display:flex;
        align-items: center;
        margin:0 important;
        padding:0 0 20px 0;  
    }

    .says{
        text-transform:uppercase;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px; 
        font-size:11px;
    }

    .管理人 .comtitle:before{
        width:50px;
        height:50px;
        background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/avater.jpg);
        background-position:center center;
        background-size:100% 100%;
        content:"";
        display:block;
        margin:0 20px 0 0;
    }

    .comtitle span{
        width : calc(100% - 70px) ;
    }

    .cbody{
        padding:10px;
    }

    .comfooter{
        padding:10px 0 0 0;
        margin:0;
        font-size:9px;
        text-align:right;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;  
    }

/************************************************************************************
post comment,edit comment
*************************************************************************************/

    .pcomment{
        padding:40px 0 0 0;
        margin:0 0 30px 0;
    }

    .pcomment p,.ecomment p{
        padding:5px 0;
    }

    .ecomment{
        width:100%;
        position:relative;
        padding:0;
    }

    .pcomment label,.ecomment label{
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
        font-size:9px;
    }

    #name,#title,#email,#website{
        width:48%;
        padding:5px 10px;
        margin:0 1% 0 0;
        border:none;
        outline:none;
        background-color:transparent;
        border-bottom:1px #A3B4BF solid;
        display:inline;
        font-size:13px;
    }

    input[type="text"], 
    input[type="email"],
    input[type="url"]{
        -webkit-border-radius:0;
        -webkit-appearance:none;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075) inset;
        background-color:transparent;
        font-size:13px;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    }

    input[type="text"]:focus, 
    input[type="email"]:focus,
    input[type="url"]:focus{
        outline:none !important;
        border:none;
    }

    input[type="checkbox"]{
        vertical-align:middle;
    }

    textarea{
        width:99.9%;
        height:150px;
        scrollbar-base-color:transparent;
        scrollbar-track-color:transpanret;
        overflow:auto;
        border:none;
        outline:none;
        border-bottom:1px #A3B4BF solid;
        -webkit-appearance: none;
        border-radius:0;
        padding:5px 10px;
        margin-top:20px;
        background-color:transparent;
        font-size:13px;
    }

    #password{
        width:30%;
        padding:5px 10px;
        border:none;
        outline:none;
        border-bottom:1px #A3B4BF solid;
        background-color:transparent;
    }

    #ppost,#ecom,#dcom{
        padding:5px 10px;
        margin:0 0 10px 0;
        height:auto;
        background:rgba(242,213,206,1);
        width: auto;
        color: #3D4347;
        font-size:10px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
    }

/************************************************************************************
trackback
*************************************************************************************/

    .trackback{
        padding:40px 0 0 0;
        margin:0;
        word-break: break-all;
    }

    .tbfooter{
        padding:10px 0 0 0;
        border-bottom:1px #666666 solid;
        margin:0;
        font-size:9px;
        text-align:right;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
    }

/************************************************************************************
titlelist
*************************************************************************************/

    .titlelist{
        width:100%;
        position:relative;   
    }

    .titlelistfooter{
        padding-bottom:10px;
        margin-bottom:10px;
        font-size:9px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
    }

/***********************************************************************************
searcharea
*************************************************************************************/

    .searcharea{
        width:100%;
        padding:0;
        position:relative;  
    }

    #searcharea .itempost{
        width:100%;
        padding:0 0 30px 0;
        margin:0 0 30px 0;
        display:flex;
        align-items: flex-start;
        border-bottom:0.5px #A3B4BF solid;
    }

    #searcharea .itemimg{
        width:40%;
        height:auto;
        padding:0;
        margin:0; 
        position:relative;
        box-shadow: 0 2px 4px rgba(3,3,3,.09);
        background-color:#ffffff;
        transition:0.3s;
    }

    #searcharea .itemimg:hover{
        box-shadow: 0 8px 12px rgba(0,0,0,.12);
    }

    #searcharea .itemimg:before{
        content:"";
        display:block;
        padding-top:50%;
    }

    #searcharea .itemimg img{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        object-fit:cover;
    }

    #searcharea .itemtext{
        width:60%;
        padding:0 0 0 30px;
        margin:0;
    }

    #searcharea .blogpost header{
        width:100%;
        padding:0 0 20px 0;    
    }

    #searcharea .blogpost time{
        font-size:10px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;      
        text-transform:uppercase;
        letter-spacing:3px;
        margin:0 0 10px 0;
        padding:0;
    }

    .month01:before{content:"January";}
    .month02:before{content:"February";}
    .month03:before{content:"March";}
    .month04:before{content:"April";}
    .month05:before{content:"May";}
    .month06:before{content:"June";}
    .month07:before{content:"July";}
    .month08:before{content:"August";}
    .month09:before{content:"September";}
    .month10:before{content:"October";}
    .month11:before{content:"November";}
    .month12:before{content:"December";}

    #searcharea .blogpost h2{
        padding:0;
        margin:0;
        font-size:15px;
    }

    .morelink a{
        background: none;
        border-bottom-width: 4px;
        font: inherit;
        letter-spacing: inherit;
        margin:15px 0;
        padding:5px 0;
        text-transform: inherit;
        transition: color 1s;
    }

    .morelink a:hover{
        animation: blinds 0.75s linear forwards;
        background: linear-gradient(0deg, #F2D5CE 25%, transparent 25%) 0 0 / 0.5em 0.5em
        , linear-gradient(0deg, #F2E9BD 50%, transparent 50%) 0 0 / 1em 1em;
        color: adjust-hue(#A3B4BF,180);    
    }

    @keyframes blinds {
        100% {
        background-position: 0 0, 0 -3em;
        background-size: 0 0, 1em 6em;
        }
    }

    .morelink span {
        position: relative;
        font-family: 'Oswald', sans-serif;
        letter-spacing:4px;
        text-transform:uppercase;
        font-weight:400;
        font-size:12px;    
    }

    .searcharea h4{
        text-align:center;
        font-size:15px;
        margin:0 0 20px 0;
    }

    .none { 
        display:none;
    }

    .block { 
        display:block;
        padding:0 30px;
        height:400px;
    }

/************************************************************************************
sidebar
*************************************************************************************/

    #sidebar{
        padding:50px 30px 10px 30px;
        width:30%;
        margin:0;
        background-color:rgba(242,233,189,0.3);
    }

    .profile{
        width:90%;
        height:55vh;
        margin:0 auto 50px auto;
        position:relative;
        color:#333333;
        background-image:url(https://file.blog.fc2.com/mysticdiary/freedom/seasunset.jpg);
        background-position:center 30px;
        background-size:70% 50%;
        background-repeat:no-repeat;
        padding:0;
        background-color:#f6f6f6;
    }

    .profile:before {
        content: "";
        display: block;
        padding-top:150%;
    }

    .hello{
        font-size:50px;
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        letter-spacing:5px;
        display:block;
        text-transform:uppercase;
        color:rgba(255,255,255,0.9);
        text-shadow:1px 1px 3px rgba(0,0,0,0.1); 
        position:absolute;
        top:30%;
        right:20%;
    }

    .about{
        width:70%;
        height:auto;
        margin:0 auto;
        text-align:justify;
        font-size:12px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;
        line-height:1.5em;
        position:absolute;
        top:65%;
        left:15%;
    }

    #sidebar .overlayside{
        width:60%;
        height:80%;
        padding:20px;
        font-size:13px;
        overflow:hidden;
        background:linear-gradient(325deg, rgba(242,213,206,0.1) 0%, rgba(242,213,206,0.3) 100%);
        position:absolute;
        bottom:30px;
        right:0px;
    }

    h3{
        padding:0;
        font-size:13px;
        margin:0 0 20px 0;
        font-family: 'Oswald', sans-serif;
        font-weight:400;
        letter-spacing:3px;   
        text-transform:uppercase;
    }

    .plugcontent{
        font-size:13px;
        margin:0 0 30px 0;
    }

    #sidebar input[type="text"]{
        width:99%;
        border:1px #cccccc solid;
        background-color:#eeeeee;
    }

    #sidebar input[type=submit]{
        padding:0 10px !important;
        background:rgba(242,213,206,1);
        margin-top:10px 0 0 0 !important;
        font-size:9px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        text-transform:uppercase;
        letter-spacing:2px;
        color:#333333;
    }

/************************************************************************************
footer
*************************************************************************************/

    #footer-address{
        width:100%;
        margin:0;
        padding:10px 0;
        font-size:10px;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;  
        line-height:1.3em;
    }

/************************************************************************************
navigation
*************************************************************************************/

    .pagenav{
        width:40px;
        height:140px;
        padding:0;
        margin:0;
        position:fixed;
        bottom:70px;
        right:30px;
        z-index:999999;
        text-align:center;
    }

    #next img{
        width:40px;
        height:auto;
        transition:0.3s;
        transform: rotate(-90deg);
        position:absolute;
        top:50px;
        left:0;
    }

    #next img:hover{
        left:-20px;
    }

    #prev img{
        width:40px;
        height:auto;
        position:absolute;
        top:100px;
        left:0;
        transition:0.3s;
        transform: rotate(90deg);
    }

    #prev img:hover{
        left:20px;
    }

    #top img{
        width:40px;
        height:auto;
        position:absolute;
        bottom:20px;
        right:30px;
        transition:0.3s;
        transform: rotate(-45deg);
    }

    #top img:hover{
        bottom:40px;
    }

    #nexttitle{
        width:auto;
        height:auto;
        padding:0 0 10px 0;
        margin:0 0 30px 0;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
        font-size:13px;
        border-bottom:0.5px #A3B4BF solid;
        display:block;
    }

    #prevtitle{
        width:100%;
        height:auto;
        font-family: 'Oswald', sans-serif;
        font-weight:300;
        letter-spacing:2px;   
        text-transform:uppercase;
        font-size:13px;
        padding:10px 0 0 0;
        margin:10px 0 0 0;
        text-align:right;
        border-top:0.5px #A3B4BF solid;
        display:block;
    }

/************************************
** image
************************************/

    figure {
        margin: 0;
    }

    img {
        max-width: 100%;
        height: auto;
        border: 0;
        -webkit-backface-visibility: hidden;
    }

/************************************
** p,table
************************************/

    p,
    .paragraph {
        margin:0;
    }

    table {
        margin-bottom: 20px;
        max-width: 100%;
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    table th {
        background-color: #A3B4BF;
    }

    table tr:nth-of-type(2n+1) {
        background-color:rgba(163,180,191,0.1);
    }

    table th,
    table td {
        border: 1px solid #A3B4BF;
        padding: 6px;
    }

/************************************
** 引用（blockquote）
************************************/

    blockquote {
        background-color:rgba(163,180,191,0.1);
        margin: 1em 0;
        padding: 30px 1.2em;
        position: relative;
    }

    blockquote::before, blockquote::after {
        color: #A3B4BF;
        font-family: serif;
        position: absolute;
        font-size: 400%;
    }

    blockquote::before {
        content: "“";
        line-height: 1.1;
        left: 10px;
        top: 0;
    }

    blockquote::after {
        content: "”";
        line-height: 0;
        right: 10px;
        bottom: 0px;
    }

/************************************
** pre
************************************/

    pre {
        background-color:rgba(163,180,191,0.1);
        border: 1px solid #A3B4BF;
        overflow: auto;
        padding: 10px;
        margin: 1em 0;
    }

/************************************************************************************
smaller than 1200
*************************************************************************************/
@media screen and (max-width: 1200px) {

    #barba-wrapper{
        width:75%;
        height:auto;
        padding:0;
        margin:0 0 0 25%; 
        background-color:#EBEFF2;
        min-height:100vh;
    }

    .barba-container{
        width:100%;
        padding:0;
        margin:0;
    }
       
    #maincontents{
        width:100%;
        padding:50px 40px 50px 40px;
        margin:0;        
    }

    #maincontents #sidebar{
        display:none;
    }

    #maincontents #main{
        width:100%;
        padding:0;
        margin:0;
    }

    #maincontents .blogpost{
        width:100%;
        padding:0;
        margin:0;
        display:flex;
        position: relative;
        flex-wrap:wrap;
    }

    #maincontents .itempost{
       width:calc(calc(100% - 40px) / 2);
        padding:0 0 0 0;
        margin:0 10px 40px 10px;
        height:auto;   
    }

/************************************************************************************
smaller than 1000
*************************************************************************************/

@media screen and (max-width: 1000px) {
     
    #container{
        width:100%;
        margin:0 auto;
        display:block;
        position:relative;
    }

    #header-container{
        width:100%;
        height:auto;
        padding:0;
        margin:0;
        position:relative;
    }

    #header-container header{
        width:100%;
        height:100%;
        padding:50px 5%;
    }

    .side-hidden{
        width:80%;
        height:100vh;
        left:-80%;
    }

    .headerprofile{
        width:20%;
    }

    #checkleft:not(:checked)~ .side-hidden{
        left:-80%;
        opacity:0;
        position:fixed;
        top:0;
        transition:0.3s;
    }

    #barba-wrapper{
        width:100%;
        height:auto;
        padding:0;
        margin:0; 
    }

    .barba-container{
        width:100%;
        padding:0;
        margin:0;
    }
    #maincontents{
        width: 100%;
        height:auto;
        padding:50px 0 0 0;
        margin:0;
    }

    #maincontents .blogpost{
        width:100%;
        padding:0 5%;
        margin:0;
        display:block;      
    }

    #maincontents .itempost{
        width:100%;
        padding:0;
        margin:0 0 40px 0;
   
    }

    #maincontents #sidebar{
        display:block;
    }

    #origin,#searcharea,#editarea,#titlelist{
        width: 100%;
        height:auto;
        padding:0;
        display:block;
        margin:0;
    }

    #origin #main,#searcharea #main,#editarea #main,#titlelist #main{
        width: 100%;
        padding:0;
        margin:0;
    }

    #sidebar{
        padding:50px 5% 10px 5%;
        width:100%;
    }

}
/************************************************************************************
smaller than 568
*************************************************************************************/
@media screen and (max-width: 568px) {

/* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }

    .side-hidden{
        overflow:auto;
    }

    #fc2relate_entry_thumbnail_area .relate_dt:before {
        letter-spacing:3px;
    }

    .authorimage{
        width:40%;
        padding:20px 10px 20px 0;
        border-right:none;
    }

    .authortext{
        width:60%;
        padding:20px 0 20px 10px;
        text-align:left;
    }

    .ctriangle{
        padding:20px;
    } 

    #name,#title,#email,#website,#password,#comment{
        font-size:16px;
    }

    #name,#title,#email,#website{
        width:99.9%;
    }

    #password{
        width:60%;
    }

    #searcharea .itemimg:before{
        content:"";
        display:block;
        padding-top:100%;
    }

}