@charset "UTF-8";
.zbmenu.navbar { border-color: transparent; font-size: 14px; background-color: rgba(0, 0, 0, 0.85) !important; -webkit-backdrop-filter: saturate(150%) blur(30px); backdrop-filter: saturate(150%) blur(30px); border-color: transparent; font-size: 14px; }

.zbmenu, .mainmenu { animation-duration: 0.3s; }

.intro-section { text-align: center; height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.content-section { --scroll-length: 1.5; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }

.content-section .content .subheading, .content-section .content .paragraph { opacity: 1; opacity: calc(1 + var(--viewport-y)); }

/* ---------------------------------- */
/* ---------------------------------- */
.heading, .intro-heading { font-weight: 700; font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; font-size: 2.6rem; text-align: center; line-height: 3.854rem; margin-top: 7rem; margin-bottom: 2rem; }

p { font-size: 1rem; line-height: 1.618rem; }

aside p { font-size: 1rem; line-height: 1.618rem; }

hr.footer { border-top: 1px solid #3f5f3c; }

body, html { height: 100%; width: 100%; margin: 0; padding: 0; line-height: 1.618; font-weight: 400; letter-spacing: -0.015em; font-family: "SF Pro Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 16px; color: #353535; }

.header .sub-header { color: green; font-size: 1.2rem; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0.4rem; line-height: 1.6; }

.herotxt { z-index: 10000; position: absolute; letter-spacing: 0em; font-size: 8rem; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.bgimg-hero { /* background-color: gray; */ background-size: cover; background-position: center; background-color: transparent; background-repeat: no-repeat; }

.bgBokehEffect { background-color: rgba(255, 255, 255, 0.8) !important; -webkit-backdrop-filter: saturate(150%) blur(30px); backdrop-filter: saturate(150%) blur(30px); border-radius: 0.2rem; color: black; }

.bgimg-bokeh { /* background-color: gray; */ background-image: url(/images/zenbrush3/BgNotan.jpg); background-size: cover; background-position-y: -14rem; background-color: transparent; }

.bgimg-vivid { /* background-color: gray; */ background-image: url(/images/zenbrush3/BgVivid.jpg); background-size: contain; background-color: transparent; background-position-x: center; background-repeat: no-repeat; }

.bg-feature { background-color: #222; }

.newbadge { font-size: .8rem; }

/*gallery
**************************************************************/
.gallery { background-image: url(../images/zenbrush3/asanoha.gif); }

.gallery .img-fluid, .gallery .nopadding { padding: 0; }

.gallery span.overlay { width: 100%; height: 100%; position: absolute; background: url(../images/zenbrush2/galleryoveray.png) no-repeat 50% 50%; background-size: 130% auto; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; filter: alpha(opacity=0); }

.gallery span.overlay:hover { opacity: 1; filter: alpha(opacity=100); }

.row-0 { margin-left: -10px; margin-right: -10px; }

.scale { overflow: hidden; }

.scale a img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; transition: transform 0.3s linear; }

.scale a:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

.scrollbtn { position: absolute; /* top: 0; */ left: 0; right: 0; bottom: 10px; margin: auto; font-size: 1rem; width: 150px; }

.scrollbtn a span { position: absolute; top: -3.8rem; left: 50%; width: 1.5rem; height: 3rem; margin-left: -0.75rem; border: 2px solid #c7c7c7; border-radius: 50px; box-sizing: border-box; }

.scrollbtn a span::before { position: absolute; top: 10px; left: 50%; content: ""; width: 6px; height: 6px; margin-left: -3px; background-color: #5f925b; border-radius: 100%; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; box-sizing: border-box; }

@-webkit-keyframes sdb { 0% { -webkit-transform: translate(0, 0);
    opacity: 0; }
  40% { opacity: 1; }
  80% { -webkit-transform: translate(0, 20px);
    opacity: 0; }
  100% { opacity: 0; } }

@keyframes sdb { 0% { transform: translate(0, 0);
    opacity: 0; }
  40% { opacity: 1; }
  80% { transform: translate(0, 20px);
    opacity: 0; }
  100% { opacity: 0; } }

/*Media Query 微調整
***********************************************/
/*スマートフォン*/
@media screen and (max-width: 767px) { .heading, .intro-heading { font-size: 1.6rem; margin-top: 5rem; line-height: 2.58rem; }
  .heading.platform { font-size: 1.4rem; }
  .header .sub-header { font-size: 0.8rem; line-height: 1; }
  .bgimg-bokeh { background-position-y: -26rem; } }

@media screen and (min-width: 992px) { .bgimg-bokeh { background-position-y: -13rem; } }

@media screen and (min-width: 1700px) { .bgimg-bokeh { background-position-y: -18rem; } }

@media screen and (min-width: 2000px) { .bgimg-bokeh { background-position-y: -26rem; } }

@media screen and (min-width: 2300px) { .bgimg-bokeh { background-position-y: -36rem; } }

/*ローディング画面
***********************************************/
#loading { width: 100vw; height: 100vh; height: calc(var(--vh, 1vh) * 100); transition: all 1s; background-color: white; position: fixed; top: 0; left: 0; z-index: 1031; }

.spinner { width: 100px; height: 100px; background-color: #676767; border-radius: 100%; animation: sk-scaleout 1s infinite ease-in-out; }

/* ローディングアニメーション */
@keyframes sk-scaleout { 0% { transform: scale(0); }
  100% { transform: scale(1);
    opacity: 0; } }

.loaded { opacity: 0; visibility: hidden; }

.carousel-indicators .active { width: 30px; height: 3px; margin-right: 3px; margin-left: 3px; }

.card { border: none; }