/*
Theme Name: wasshoi
Theme URI: https://wordpress.org/themes/wasshoi/
Author: wasshoi
Author URI: https://wordpress.org
Description: Wordpress Templates for Wasshoi
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wasshoi
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* general*/
@charset "UTF-8";

:root{
    /* --theme:#c22828; */
    --theme:#e65353;
    --lgreen1:#80ba8a;
    --lgreen2:#89a46c;
    --lgreen3:#92b66b;
    --red1:#ba3f3f;
    --max-w:1000px;
}

html{
    font-family: "Zen Maru Gothic","Noto Sans JP","ヒラギノ角ゴシック","Yu Gothic","Meiryo UI",sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
.maru-font{
    font-family:"Zen Maru Gothic","Noto Sans JP","ヒラギノ角ゴシック","Yu Gothic","Meiryo UI",sans-serif !important;
}
.fuwa-font{
    font-family:"Cherry Bomb One", sans-serif !important;
}

body {
    margin: 0;
    background-color: #f6f5ee;
}

article,aside,footer,header,nav,section {
  display: block;
}

button,input,optgroup,select,textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

h1{
    font-size: 2em;
    margin: 0.67em 0;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    text-decoration: none;
    color:var(--theme);
    font-weight:bold;
}
p{
    line-height:1.5em;
}




/* header
----------------------------------- */
.page-header{
    background-color: #ffffffd0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
}
/* .page-header::after{
    content: "";
    display: block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    filter: blur(5px);
    position: absolute;
    top: -5px;
    left: -5px;
    margin: auto;
    background-color: #ffffffc0;
} */
.header-area{
    padding:10px 20px;
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
    align-items: center;
    max-width:calc(var(--max-w) - 40px);
    margin:auto;
}
#header-left{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.panel-site-title{
    display: flex;
    flex-wrap:nowrap;
    align-items: center;
}
.site-icon{
    width:50px;
    height:50px;
    border-radius:10px;
}
.site-titles{
    margin-left:15px;
}
.site-title{
    margin: 0;
    color: var(--theme);
    font-weight: bold;
    font-size: 30px;
    font-family: "Cherry Bomb One", sans-serif !important;
    text-align: left;
    letter-spacing: 0.2em;
    line-height: 1em;
}
.site-subtitle{
    color:#555;
    margin:0;
    font-weight:bold;
    font-size:13px;
}
.hd-sns-button{
    display: block;
    width:35px;
    height:35px;
    text-align: center;
    line-height:35px;
    margin:0;
    margin-left:15px;
    border:solid 2px var(--theme);
    border-radius:50%;
    background-color: transparent;
    font-size:22px;
    color:var(--theme);
    font-weight:bold;
    transition: all ease 0.3s;
}
.hd-sns-button:hover{
    background-color: var(--theme);
    color: #fff;
}


.site-bar-dt{
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
    width:calc(100% - 300px);
    max-width:600px;
}
.site-bar-mb{
    display: none;
}
.site-bar-mb i{
    font-size:23px;
    color:var(--theme);
}
.site-bar-dt a, .footer-nav a{
    font-size:14px;   
    transition: all ease 0.3s;
    padding-bottom:0.5em;
    border-bottom:solid 1px transparent;
}
.site-bar-dt a{
    text-align: center;
}
.footer-nav a{
    padding-bottom:0.3em;
}
.site-bar-dt a:hover, .footer-nav a:hover{
    border-bottom:solid 1px var(--theme);
}

@media(max-width:800px){
    .site-bar-dt{
        display: none;
    }
    .site-bar-mb{
        display: block;
    }
}





/* footer
----------------------------------- */
footer{
    background-color: #fff;
    padding:50px 0;
}
.copyright p{
    color:#ccc;
    padding:10px 20px;
    text-align: center;
}

.footer-content{
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
    align-items: start;
    width:calc(100% - 40px);
    max-width:calc(var(--max-w) - 40px);
    margin:auto;
    padding:20px;
}

.footer-main{
    width:calc(33% - 20px);
    margin-right:20px;
}
.footer-main .panel-site-title{
    margin-bottom:20px;
}
.sns-button-wrapper{
    display: flex;
    flex-wrap:nowrap;
    justify-content: left;
    width:calc(100%);
    margin-top:30px;
    padding-top:20px;
    border-top:solid 2px #efefef;
}   
.footer-sns-button{
    width:40px;
    height:40px;
    text-align: center;
    line-height:40px;
    margin:0 7px;
    border-radius:50%;
    background-color: var(--theme);
    font-size:18px;
    color:#fff;
    font-weight:bold;
}

.footer-nav-outer{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: stretch;
    width:calc(66%);
}
.footer-nav{
    width:calc(33% - 20px);
    margin:10px;
    display: flex;
    flex-direction: column;
}
.footer-nav h3{
    width:calc(100%);
    margin:0;
    margin-bottom:0.5em;
    padding-bottom:0.7em;
    border-bottom:dashed 2px var(--theme);
    color:var(--theme);
    font-size:17px;
}
.footer-nav a{
    display: inline-block;
    padding:0.8em 0;
    border-bottom:solid 1px #efefef;
    font-size:14px;
}

@media(max-width:800px){
    .page-footer{
        padding:30px 20px;
    }
    .footer-content,.footer-main{
        display: block;
        width:calc(100%);
        padding:0;
    }
    
    .footer-nav-outer{
        width:calc(100%);
        display: block;
        margin-top:30px;
    }
    .footer-nav{
        width:calc(100%);
        margin: 30px 0;
    }
}






/* page, single
----------------------------------- */

#content, .panel_text, .responsive{
    margin:auto;
    object-fit: cover;
    background-position: bottom;
}
#content.page, .panel_text, .responsive{
    max-width:calc(var(--max-w) - 40px);
    width:calc(100% - 40px);
    padding:0 20px;
}
.panel_text{
    padding:50px 20px;
}
@media(max-width:800px){

}
#content-wrapper{
    padding:40px 0px;
}



/* hero
----------------------------------- */

.hero,.hero-s{
    position: relative;
    width:calc(100vw);
    height:500px;
    max-height:100vh;
}
.hero-s{
    height:250px;
}
.hero::before,.hero-s::before{
    content:"";
    background-image:radial-gradient(#ffffff00, #a8b27147), url(assets/images/hero5.jpg), url(assets/images/hero5.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(1px);
    z-index:-1;
}
.hero::after{
    content:"";
    background-image:url(assets/images/logo_white.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 80px;
    right:30px;
    margin:auto;
    width: 40%;
    height: 40%;
    aspect-ratio: 2165/2550;
    max-width:1000px;
    z-index:0;
    opacity: 0.9;
    transform: rotate(358deg);
}
@media(min-width:750px){
    .hero::after{
        top: 0;
        right:100px;
        bottom: 0;
        height:65%;
        opacity: 1;
    }
}

.hero-text{
    position: absolute;
    top:calc(75% - 20px);
    left:50px;
}
@media(max-width:600px){
    .hero-text{
        left:0;
    }
    .hero-text div{
        margin-bottom: 10px !important;
        clip-path:polygon(0% 0,100% 0,95% 100%,0 100%) !important;
    }
}

.hero-wrapper,.hero-s-wrapper{
    position: relative;
    height:calc(100% - 60px);
    width:calc(100% - 40px);
    max-width:calc(var(--max-w) - 40px);
    margin:auto;
    padding:30px 20px;
}

.hero-text div{
    display: inline-block;
    margin:5px 0;
    padding:0.6em 2em;
    clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);

    background:linear-gradient(90deg, #fff, rgb(255 255 255 / 70%));
    color:#000;
    font-weight:bold;
    font-size:17px;
}

.hero-s h1{
    position: absolute;
    bottom:1em;
    padding-left:0.5em;
    font-weight:bold;
    color:#fff;
    text-align: left;
    border-left:solid 10px #fff;
}


/* home - general
------------------------------------ */
.home-title{
    font-weight:bold;

}




/* home - post
----------------------------------- */
#post-block{
    width:calc(100%);
    max-width:calc(var(--max-w) - 0px);
    padding:0px;
    margin:auto;
}
#block-outer-post h2{
    color:var(--theme);
}
.post-s{
    width:calc(100%);
    margin:30px 0;
    border-bottom:solid 2px #e4dfbf;

    display: flex;
    flex-wrap:nowrap;
    justify-content: left;
    align-items: center;
}
.post-s-thumbnail{
    width:100px;
    min-width:100px;
    height:100px;
    min-height:100px;
    border-radius:50%;
    margin-right:20px;
    object-fit: cover;
}
.post-s-content{
    width:calc(100% - 120pxs);
}
.post-s-meta a{
    color:#aaa;
    font-size:15px;
    font-weight:bold;
}
.post-s-title{
    margin-top:0.3em;
    font-size:18px;
    color:var(--theme);
}
.post-s-ex{
    width:calc(100%);
}
.post-s-ex p{
    width:calc(100%);
}




/* home - project
----------------------------------- */

.block-outer{
    width:calc(100vw - 40px);
    margin:0;
    padding:30px 20px;
}
#block-outer-project{
    background-color:var(--lgreen1);
}
#home-project{
    max-width:calc(var(--max-w) - 40px);
    margin:auto;
    color:#fff;
}

.project-outer{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items:top;
    margin:30px 0;
}

.project-block{
    position: relative;
    margin:20px 0px;
    
    width:calc(25% - 30px);
    text-align: center;
}

.project-block h3{
    /* position: absolute;
    top:calc(50% - 1em);
    width:calc(100%); */
    display: inline-block;
    margin: 15px 0;
    margin-bottom: 0;
    padding: 0.8em;
    border-bottom:solid 2px #6ea176;

    font-weight:bold;
    color:#fff;
    font-size:16px;
}
.project-block img{
    display: block;
    width:200px;
    height:200px;
    margin:auto;
    border:solid 0px;
    border-radius:150px;
    box-shadow:0 0 0 10px #6ea176;

    object-fit:cover;
}
.project-block p{
    width:100%;
    color:#fff;
    font-weight:400;
}

@media(max-width:1000px){
    .project-outer div{
        width:calc(50% - 20px - 20px);
    }
}

@media(max-width:600px){
    .project-outer div{
        width:calc(100% - 10px - 10px);
        margin:20px 0px;
        /* box-shadow:0 0 0 5px #333; */
    }
}