/*
Theme Name: Inspiro Child
Theme URI: https://www.wpzoom.com/free-wordpress-themes/inspiro-lite/
Template: inspiro
Author: WPZOOM
Author URI: https://www.wpzoom.com/
Description: Inspiro is a professional & lightweight photo and video-focused WordPress theme with a modern design. Packed with features including a fullscreen area that supports Vimeo, YouTube & self-hosted video background, Page Builder integration, Inspiro is perfect for showing off your photography and video portfolio. Moreover, the theme is compatible with WooCommerce and popular Page Builders such as Elementor, Beaver Builder. Learn more and check out our powerful premium version at https://www.wpzoom.com/themes/inspiro/
Tags: one-column,two-columns,right-sidebar,flexible-header,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,threaded-comments,translation-ready,e-commerce,wide-blocks,portfolio,blog,custom-background,featured-image-header,full-width-template,theme-options,block-styles
Version: 1.4.1.1631167551
Updated: 2021-09-09 06:05:51

*/

html {
    scroll-behavior: smooth;
}
/*投稿ページの投稿者、日にちを非表示に*/
.entry-footer .post-author, 
.page .entry-cover-image .entry-header .entry-meta,
.single .entry-cover-image .entry-header .entry-meta {
	display:none !important;
}

/*ヘッダー背景 スクロールで白を80%　ぼかす*/
.headroom--not-top .navbar,
.has-header-image.home.blog .headroom--not-top .navbar,
.has-header-image.inspiro-front-page .headroom--not-top .navbar,
.has-header-video.home.blog .headroom--not-top .navbar,
.has-header-video.inspiro-front-page .headroom--not-top .navbar {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(10px);
}

/*ヘッダー　スクロールしてない時　文字を白に*/
.headroom--top .navbar a{
    color: #FFF !important;
}
.headroom--top .sb-search .sb-search-button-close .sb-icon-search .svg-icon,
.headroom--top .sb-search .sb-search-button-open .sb-icon-search .svg-icon {
    fill: #FFF !important;
}
.headroom--top .navbar-toggle .icon-bar {
    background: #FFF !important;
}

/*ヘッダー　スクロールして背景が白になった時の文字を黒にする*/
.headroom--not-top .navbar a{
    color: #000 !important;
}
.headroom--not-top .sb-search .sb-search-button-close .sb-icon-search .svg-icon,
.headroom--not-top .sb-search .sb-search-button-open .sb-icon-search .svg-icon {
    fill: #000 !important;
}
.headroom--not-top .navbar-toggle .icon-bar {
    background: #000 !important;
}

/*ヒーローエリアの文字とラインを消す*/
.site-branding {
	display:none !important;
}

.site-content {
	margin-bottom:5rem;
}

/*画像4枚並び*/
.col_4 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_4 .top_thumb{
    width: calc( 25% - 9px );
	aspect-ratio: 1 / 1;
    margin-right: 12px;
    margin-bottom: 12px;
	text-align:center;
}
.col_4 .top_thumb:nth-child(4n){
    margin-right: auto;
}
.col_4 .top_thumb img {
	object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 960px) {
    .col_4 .top_thumb{
        width: calc( 33.33333% - 8px ) ;
    }
    .col_4 .top_thumb:nth-child(4n){
        margin-right: 12px;
    }
    .col_4 .top_thumb:nth-child(3n){
        margin-right: auto;
    }
}
@media screen and (max-width: 580px) {
	.col_4 .top_thumb{
        width: 100% ;
    }
    /*.col_4 < *{
        width: calc( 50% - 6px ) ;
    }
    .col_4 < *:nth-child(3n){
        margin-right: 12px;
    }
    .col_4 < *:nth-child(2n){
        margin-right: auto;
    }*/
}

/*横2つ並び*/
.col_2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_2 .top_half {
    width: calc( 50% - 15px ) ;
    margin-right: 30px;
    margin-bottom: 30px;
}
.col_2 .top_half:nth-child(2n){
    margin-right: auto;
}
.col_2 .top_half {
    height: auto;
    position: relative;
    overflow: hidden
}
@media screen and (max-width: 960px) {
    .col_2 .top_half {
        width: 100%;
        margin-right: auto;
    }
}

/*トップページの自己紹介部分*/
.about_content {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
* {
  box-sizing: border-box;
}

/*コンタクトページ*/
.page .full-width #post-106 .entry-content{
    max-width: 1280px !important;
    margin: 0 auto;
    padding: 0;
}