/*--------------------------------------------------------------
# Import
--------------------------------------------------------------*/
/* Font */
@import url('https://fonts.googleapis.com/css2?family=Pavanam&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&family=Lexend+Mega:wght@100..900&display=swap');

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@media screen and (max-width: 576px) {
  /* 576px以下の幅の場合 */
  .item .item-wrap>.work-info h3 {
    font-size:    1.50rem;
    font-weight:  bold;
  }    
  .item .item-wrap>.work-info span {
    font-size:    1.00rem;
  }
}

@media screen and (min-width: 576px) {
  /* 576pxまでの幅の場合 */
  .item .item-wrap>.work-info h3 {
    font-size:    1.00rem;
    font-weight:  bold;
  }    
  .item .item-wrap>.work-info span {
    font-size:    0.80rem;
  }
}

@media screen and (min-width: 768px) {
  /* 768xまでの幅の場合 */
    .item .item-wrap>.work-info h3 {
      font-size:    1.125rem;
      font-weight:  bold;
    }    
    .item .item-wrap>.work-info span {
      font-size:    0.75rem;
    }
  }

  ::selection {
    color:            #906020;
    background-color: #E5D8B8;
  }

body {
  font-family: 'メイリオ', 'Meiryo', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  /* "Inconsolata", monospace ;*/
  color: #0d1e2d;
  background-color: #f8f8f8;
}

a {
  color:            #606060;
  text-decoration:    none;
  transition-duration: 0.25s;
}

a:hover {
  color:            #C09020;
  transition-duration: 0.25s;
}

a:focus {
  color:            #906020;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: 'メイリオ', 'Meiryo', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

img {
  user-select: none;
}

.section {
  padding: 7rem 0;
}

.filters a, 
.local-nav a {
  text-decoration:  none;
  color:          #808080;
  display:          inline-block;
  margin-top:       0.25rem;
  margin-bottom:    0.25rem;
  padding-left:     0.75rem;
  padding-right:    0.75rem;
  position:         relative;
  user-select:      none;
}

.filters a:hover,
.filters a:focus,
.filters a:active,
.local-nav a:hover,
.local-nav a:focus,
.local-nav a:active {
  color:            #404040;
  text-decoration:    none;
}

.filters a:hover:before,
.local-nav a:hover:before {
  content:          "";
  position:         absolute;
  left:             0.75rem;
  right:            0.75rem;
  bottom:           0.00rem;
  height:           1px;
  background-color: #404040;
}

.filters a.active,
.local-nav a.active {
  color:            #C09020;
}

.filters a.active:before,
.local-nav a.active:before {
  content:            "";
  position:           absolute;
  left:               0.75rem;
  right:              0.75rem;
  bottom:             0.00rem;
  height:             1px;
  background-color: #C09020;
}

.item {
  border:             none;
  margin-bottom:      2.0rem;
}

.item .item-wrap {
  display:            block;
  position:           relative;
  overflow:           hidden;
  border:             1px solid rgba(0, 0, 0, 0.125);
}

.item .item-wrap:after {
  z-index: 2;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: 0.3s all ease-in-out;
}

.item .item-wrap img {
  transition: 0.3s transform ease;
  transform: scale(1);
  user-select: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}

.item .item-wrap>.work-info {
  position: absolute;
  /*top: 50%;*/
  bottom: 1.00rem;
  width: 100%;
  text-align: center;
  z-index: 3;
  /* transform: translateY(-50%); */
  color: #fff;
  opacity: 0;
  visibility: hidden;
  /* margin-top: 20px; */
  text-shadow: 1px 1px 2px #000000;
  user-select: none;
  transition: 0.3s all ease;
}

.item .item-wrap>.work-info h3 {
  margin-bottom: 0;
}

.item .item-wrap>.work-info span {
  /* font-size: 14px; */
  /*font-size: 0.75rem;*/
  /*text-transform: uppercase;*/
  /*letter-spacing: 0.2rem;*/
  margin-bottom: 0;
  padding-bottom: 0;
}

.item .item-wrap:hover {
  text-decoration: none;
  box-shadow: 0rem 0rem 1.0rem 0rem rgba(255, 255, 255, 1.00);
}

.item .item-wrap:hover img {
  transform: scale(1.05);
  user-select: none;
	-moz-user-select: none;
}

.item .item-wrap:active img {
  transform: scale(1.00);
  user-select: none;
	-moz-user-select: none;
}

.item .item-wrap:active .work-info {
  transform: translateY(0.75rem);
}

.item .item-wrap:hover:after {
  opacity: 1;
  visibility: visible;
}

.item .item-wrap:hover .work-info {
  margin-top: 0px;
  opacity: 1;
  visibility: visible;
  animation: work-info_rise-up 0.5s ease-out;
}

@keyframes work-info_rise-up {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateY(4rem);
  }
  50% {
    opacity: 1;
    transform: translateY(-0.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticky-content {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  /* required */
}

.list-line li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}

.list-line li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 10px;
  height: 2px;
  background: #000;
}

.form-control {
  border-radius: 0;
  background: #f8f9fa;
  border: 1px solid transparent;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.form-control:active,
.form-control:focus {
  background: #eff1f4;
  outline: none;
  box-shadow: none;
  border: 1px solid transparent;
}

.custom-progress {
  height: 7px;
  border-radius: 0;
}

.custom-progress .progress-bar {
  background: #000000;
}

/* Services */
.services i {
  font-size: 40px;
}

.services h4 {
  padding-top: 10px;
}

/* Contact Form */
.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .error-message br+br {
  margin-top: 25px;
}

.php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* Custom Navmenu */
.custom-navmenu {
  background: #EAE6E3;
  background: linear-gradient(0deg, rgba(210,207,204,1) 0%, rgba(234,230,227,1) 5%, rgba(234,230,227,1) 100%);
}

.custom-navmenu .custom-menu,
.custom-navmenu .custom-menu li {
  padding:    0;
  margin:     0;
  list-style: none;
}

.custom-navmenu .custom-menu li {
  margin:     0;
  font-size:  medium;
}

.custom-navmenu .custom-menu li a {
  color:        #908070;
  padding: 10px 0 !important;
}

.custom-navmenu .custom-menu li a:hover {
  color: #C09020;
  text-decoration: none;
}

.custom-navmenu .custom-menu li.active a {
  color: #906020;
  text-decoration: none;
}

.custom-navmenu h3 {
  font-size: 20px;
  color: #fff;
}

.custom-navmenu p {
  color: rgba(98, 81, 69, 1.0);
}

.custom-navmenu a {
  color: rgba(255, 255, 255, 0.7);
}

.custom-navmenu a:hover {
  color: #fff;
}

/* Custom Navbar */
.custom-navbar {
  padding-top: 50px;
  width: 100%;
}

@media (max-width: 780px) {
  .custom-navbar>.container {
    padding-right: 0;
    padding-left: 0;
  }
}

.custom-navbar .navbar-brand {
  font-size: 1.7rem;
}

/* Burger */
.burger {
  width: 28px;
  height: 32px;
  cursor: pointer;
  position: relative;
}

.burger:before,
.burger span,
.burger:after {
  width: 100%;
  height: 2px;
  display: block;
  background: #808080;
  border-radius: 2px;
  position: absolute;
  opacity: 1;
}

.burger:before,
.burger:after {
  transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
  content: "";
}

.burger:before {
  top: 4px;
}

.burger span {
  top: 15px;
}

.burger:after {
  top: 26px;
}

/* Hover */
.burger:hover:before {
  top: 7px;
}

.burger:hover:after {
  top: 23px;
}

/* Click */
.burger.active span {
  opacity: 0;
}

.burger.active:before,
.burger.active:after {
  top: 40%;
}

.burger.active:before {
  transform: rotate(45deg);
}

.burger.active:after {
  transform: rotate(-45deg);
}

.burger:focus {
  outline: none;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  color: #808080;
  font-size: small;  
  padding: 0 0 2rem 0;
  user-select: none;
}

.footer a {
  color: #000;
}

.social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8f9fa;
  position: relative;
  text-align: center;
  color: #0d1e2d;
}

.social a span {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.social a:hover {
  color: #000;
}
/*--------------------------------------------------------------
# Bootstrap accordion (overwrite)
--------------------------------------------------------------*/
.accordion {
  --bs-accordion-color:             #0d1e2d;
  --bs-accordion-bg:                  transparent;
  --bs-accordion-transition:          color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
  --bs-accordion-border-color:        transparent;
  --bs-accordion-border-width:        0;
  --bs-accordion-border-radius:       0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%20d1e2d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%20d1e2d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color:  none;
  --bs-accordion-btn-focus-box-shadow:    none;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color:          #0d1e2d;
  --bs-accordion-active-bg:               transparent;
}

.accordion-button:not(.collapsed) {
  color: #0d1e2d;
  background-color: transparent;
  box-shadow: none;
}

.fs-5 {
  font-size: 1.00rem !important;
}

.fs-6 {
  font-size: 0.90rem !important;
}

/*--------------------------------------------------------------
# about
--------------------------------------------------------------*/
.about_credo {
  user-select: none;
}

.about_credo_main {
  font-family:        "Lexend Mega", sans-serif;
  font-weight:        100;
  font-style:         normal;
  text-shadow:        1px 1px 2px rgba(255, 255, 255, 1.0);
  color:              #e8e8e8;
}

.about_credo_sub {
  color:              hwb(42 60% 25%);
  font-family:          'Noto Serif JP', serif;
  font-weight:          600;
}

.about_item-category {
  font-family: 'Pavanam', sans-serif;
  color:              #606060;
}

.about_category-business {
  font-family: 'Pavanam', sans-serif;
  color:              #C09020;
}

.about_prof_lead-icon {
  /*color:              #4DC2B4;*/
  color:              #C09020;
}

.about_prof_sub-line-icon {
  color:              #C09020;
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
.not-found-404 {
  font-size: calc(1.625rem + 9.0vw);
  font-weight: 300;
  line-height: 1.2;
  color:              #808080;
}

/*--------------------------------------------------------------
# bs-lightbox
--------------------------------------------------------------*/
.bs-lightbox-thumbnail {
  cursor: zoom-in;
}

.bs-lightbox-gallery {
  cursor: zoom-out;
}

/*--------------------------------------------------------------
# original
--------------------------------------------------------------*/
.works-title {
  font-family: 'Pavanam', sans-serif;
  color:      #606060;
}

.works-description {  
  color: #606060;
  font-size: 0.875rem;
}

.works-credits {
  color: #606060;
  font-size: 0.875rem;
}

.header_corporate-value {
  font-family: 'Lexend Giga', sans-serif;
  opacity:      0.25;
  user-select:  none;
}