@charset "UTF-8";
/*
* this css file is main css.
* this style are using for indivisual projects.
*
*/
/*=====================
* modules
=======================*/
/*---
overtide
---*/
.hdg_lv2{
  border: 0;
  font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 400;
  font-size: 2em;
  padding-left: 0;
}
.ifo.event .item{
  min-width: 9em;
}
div[role="alert"]{
  display: block;
  background-color: #f9ebeb;
  padding: 1em;
  border-radius: 0.4em;
}
div[role="alert"] ul{
  line-height: initial;
  margin-top: 1em;
}
.wpcf7-not-valid{
  background-color: #f9ebeb;
}
span[role="alert"]{
  display: block;
  margin-top: 1.3em;
  color: #da0000;
}
/*---wordpress---*/
.wp-block-gallery {
  margin: 2em 0 3em;
}
.wp-block-gallery ul{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.wp-block-gallery.columns-2 ul li.blocks-gallery-item{
  width: calc(50% - 1em);
  height: 600px;
}
.wp-block-gallery.columns-3 ul li.blocks-gallery-item{
  width: calc(33% - 1em);
  height: 400px;
}
.wp-block-gallery.columns-4 ul li.blocks-gallery-item{
  width: calc(25% - 1em);
  height: 300px;
}
.wp-block-gallery.columns-5 ul li.blocks-gallery-item{
  width: calc(20% - 1em);
  height: 240px;
}
/*--- Zoom Instagram ---*/
a.ig-b-v-24{
  border-color: #333333;
  color: #333333 !important;
  font-family: inherit;
  background-color: transparent;
}
a.ig-b-v-24:hover{
  background-color: #333333;
  color: #ffffff;
}
/*---
head-line
---*/
h2.hdg_lv1{
  font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 400;
  font-size: 2em;
  text-align: center;
}
h2.hdg_lv1 span {
  display: block;
  margin-top: 2em;
  font-size: 0.5em;
}
h2.hdg_lv1 span strong {
  border-top: #333 1px solid;
  padding-top: 1em;
}
.buttons_lv1{
  text-align: center;
  padding: 1em;
}
.buttons_lv1 a{
  border: 1px solid #aaa;
  color: #aaa;
  background-color: #ffffff;
  text-align: center;
  padding: 0.5em 2em;
  transition: all .7s
}
.buttons_lv1 a:hover{
  border: 1px solid #333;
  color: #fff;
  background-color: #333333;
}
/*---
layout
---*/
body{
  font-weight: 400;
}
header {
  position: fixed;
  top:0;
  z-index: 99;
  width: 100%;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px 3px 3px rgba(100,100,100,0.5);
  opacity: 0.8;
}
header > .title > h1 {
  margin: 0.5em;
}
header > .title > h1 > a > img {
  width: auto;
  max-width: none;
  height: 50px;
}
header > #humberger > nav > .main-nav{
  align-items: center;
}
header > #humberger .icon{
  width: 30px !important;
}
header > #humberger .icon a:hover{
  background: none;
}
header > #humberger > nav {
  margin: 0;
}
main {
  line-height:0;
  word-break: break-all;
}

section p{
  line-height: 1.8;
}
.main-visual {
  /* background-image: url('https://b-p-j.com/wp-content/themes/bpj_norizo/common/images/main_001.jpg'); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 86vh;
  padding: 0em 0 2em 0;
}
.main-visual p {
  height: 100%;
  text-align: center;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main-visual p > img {
  width: auto;
  height: 80%;
}
.section {
  margin-top: 5em;
}
.section > .inner {
  width: 1200px;
  margin: 0 auto;
}
.sec00.section{
  margin-top: 0;
}
#archive .sec00.section{
  margin-top: 7.5em;
}
.col2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% - 2em);
  margin: 0 auto;
}
.col2 .column{
  width: 50%;
  margin-right: 2em;
}
.col2.reverse {
  flex-direction: row-reverse;
}
/*------
* box
--------*/
.box-item {
  margin: 0 1.2em;
}
.box-annotation {
  background-color: var(--def-gray-hightlight);
  padding: 0.8em 1.2em;
  border-radius: 0.2em;
}
.box-annotation .hdl-lv3 {
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--def-gray-light);
}
/*------
* works parts
--------*/
.works ul{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: wrap;
}
.works ul li {
  max-width: 25%;
  width:  25%;
  position: relative;
}
.works ul li img {
  object-fit: cover;
  max-height: 25vw;
}
.works ul li a .discription {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  color: #ffffff;
  opacity: 0;
}
.works ul li a:hover .discription {
  opacity: 1;
}
.works ul li a .discription > .inner {
  padding: 2em;
  font-size: 1em;
  line-height: 1.4;
  width: calc(100% - 4em);
}
.works ul li a:hover .discription > .inner .hdg_lv3 {
  word-wrap: normal;
  word-break: normal;
}
#archive .works ul li{
  max-width: calc(25% - 1em);
  margin: 0.5em;
  position: inherit;
}
#archive .works ul li img {
  max-height: 300px;
}
#archive .works ul li .discription{
  position: inherit;
  opacity: 1;
  color: #000000;
  background: none;
}
#archive .works ul li a .discription > .inner {
  padding: 0;
  width: 100%;
}
#archive .works ul li a .discription > .inner > .hdg_lv3{
  margin-bottom: 0.3em;
  font-weight: normal;
}
#archive .works ul li a .discription > .inner > p{
  margin: 0;
}
.info > .item > dt {
  min-width: 10em;
}
.info > .item > dd a {
  color: var(--text-link-colo);
}
footer {
  margin-top: 2em;
}
footer > .footer > .sns-follow > li {
  margin: 1em;
}
footer > .footer > .sns-follow > li > a {
  max-width: 30px;
}
footer #primary-sidebar div {
  margin-bottom: 1.6em;
}
footer .works .square-box li {
  width: calc(33% - 0.4em) !important;
  max-width: calc(33% - 0.4em) !important;
  margin: 0.2em !important;
  aspect-ratio: 1 / 1 !important;
}
footer .works .square-box li img {
  max-height: -webkit-fill-available !important;
}
footer .works .buttons_lv1 a {
  white-space: nowrap;
}

/*-- animation class --*/
.relative_items > li.notactive{
  display:none;
  transition: all .7s;
  animation: fade-out .7s linear 0s;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*=====================
* sigle
=======================*/
#single {
  position: relative;
}
#single .section{
  margin-top: 3em;
}
#single .section.sec00{
  margin-top: 0em;
}
#single .sec00 .main-visual p {
  margin: 0;
}
#single .sec00 .main-visual p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#single .sec01,
#single .sec02{
  margin-bottom: 5em;
}
#single main {
  line-height: 1.6;
}
#single .works ul li {
  max-width: inherit;
  width: calc(25% - 1em);
  margin: 0.5em;
}

.pre-next > .items > li > a > div > p > img{
  object-fit: cover;
  height: 18vh;
}
.pre-next > .items > li > a > div > h4.tit {
  margin: 0.5em 0 0.5em;
}
.pre-next .items .none a {
  color: #aaa;
}
.pre-next .items li.next .arrow-title,
.pre-next .items li.next h4.tit,
.pre-next .items li.next.none a p{
  text-align: right;
}

/*-----
* categoly
------*/
.categoly{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.categoly li a {
  white-space: nowrap;
  color: #aaa;
  font-size: 0.9em;
  border: 1px solid #aaa;
  padding: 0.3em 1em;
  margin: 0 0.5em 0.5em 0;
}
.categoly li a:hover {
  background: #333333;
  color: #ffffff;
}
/*=====================
* light_box
=======================*/
.light_box {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 97;
  display: none;
}
.light_box .mask {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
}
.light_box .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.light_box .inner figure {
  margin: 1em;
}
.light_box .inner .pre,
.light_box .inner .next {
  position: relative;
  width: 54px;
  height: 38px;
  background-color: rgba(0, 0, 0, 0.8);
}
.light_box .inner .pre span,
.light_box .inner .next span {
  position: absolute;
  top: 2px;
  left: 22px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 15px;
  height: 15px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  -webkit-transform: translateY(50%) translateX(-50%) rotate(-45deg);
  transform: translateY(50%) translateX(-50%) rotate(-45deg);
  line-height: 0;
  font-size: 0;
  padding: 0;
}
.light_box .inner .next span {
  left: 16px;
  -webkit-transform: translateY(50%) translateX(-50%) rotate(135deg);
  transform: translateY(50%) translateX(-50%) rotate(135deg);
}



/*=====================
* page
=======================*/



/*=====================
* side
=======================*/






/********************************************************
*
* 640px size
*
********************************************************/
@media screen and (max-width:640px) {
  /*---
  overried
  ----*/
  /*---wordpress---*/
  .wp-block-gallery.columns-2 ul li.blocks-gallery-item,
  .wp-block-gallery.columns-3 ul li.blocks-gallery-item,
  .wp-block-gallery.columns-4 ul li.blocks-gallery-item,
  .wp-block-gallery.columns-5 ul li.blocks-gallery-item{
    width: calc(50% - 1em);
    height: 50vw;
  }
  /*---
  module
  ---*/
  .col2 {
    display: block;
  }
  .col2 .column {
    width: 100%;
  }
  header > #humberger > nav {
    margin: 1em;
  }
  .main-visual p {
    position: relative;
    height: inherit;
    text-align: inherit;
  }
  .main-visual p > img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .section .inner {
    width: calc(100% - 2em);
    margin: 0 auto;
  }
  .section.sec02 .inner{
    width: 100%;
    margin: 0;
  }
  .works ul li img {
    max-height: 50vw;
  }
  .works ul li a:hover .discription > .inner {
    padding: 0.5em;
    width: calc(100% - 1em);
  }
  #single .works ul li{
    width: 50%;
    margin: 0;
    line-height: 0;
  }
  #archive .works ul li {
    width: calc(50% - 1em);
    max-width: calc(50% - 1em);
  }
  .works ul li {
    width: 50%;
    max-width: 50%;
  }
  #archive .works ul li img{
    max-height: 50vw;
  }
  #single .works ul li a .discription > .inner {
    display: none;
  }
  .light_box .inner{
    width: 100%;
  }
  .light_box .inner .pre,
  .light_box .inner .next {
    position: absolute;
    left: 0;
    width: 38px;
  }
  .light_box .inner .next {
    left: calc(100% - 38px);
  }
}