@charset "UTF-8";

/* slider
====================================================*/
.image-list{ display: none;}
.slide-wrap {
  display: block;
  margin: 0 auto;
  position: relative;
}

.bx-pager {
  margin: 0;
  padding: 0;
}

.bx-wrapper {
  margin-bottom: 0 !important;
}

.bx-wrapper .bx-viewport {
  left: -1px !important;
  border: none!important;
  margin: 0 auto !important;
  background: #fff;
  box-shadow: none!important;
}

.bx-wrapper .bx-viewport #slideshow img{
  width: 100%;
  height: var(--sliderHeight);
  object-fit: cover;
  object-position: center;
}

.bx-pager-item {
  visibility: hidden;
}

.overlay-logo{
  position: absolute;
  left: 8%;
  bottom: 10%;
  width: 48%;
  max-width: 371px;
  margin: 0;
  transition: opacity 1s linear;
}
.overlay-logo img{ object-fit: contain; width: 100%; height: auto;}
@media(min-width: 800px){
  .overlay-logo{ left: 9.4%; top: 12%; bottom: auto; width: 371px;}
}


/* talk
====================================================*/
  #talk{ background-color: var(--themeColor); padding: 10px; color: white; margin-bottom: var(--variableSpaceS);}
  #talk .outer-flame{ border: 1px solid var(--hoverColor);}
  #talk .title{border-bottom: 1px solid var(--hoverColor); padding: 10px;}
  #talk .title img{ max-width: 100%;}
  #talk .talk-inner{ display: flex; flex-wrap: wrap; gap: 50px; font-size: var(--fontSizeS); padding: var(--variableSpaceS); }
  .talk-inner .left{ flex-basis: 480px; margin: 0 auto;}
  .talk-inner .left figure{ width: 100%; height: 0; padding-top: 56.25%; position: relative;}
  .talk-inner .left figure iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
  #talk h2{ font-size: var(--fontSizeL); margin-bottom: 1em; line-height: 1.5;}
 #talk p{ margin-bottom: 30px;}
  .to-talk{ display: block; color: var(--themeColor); background-color: var(--themeColorLight); max-width: 500px; margin: auto; font-size: var(--fontSizeM); padding: 0.5em; text-align: center; transition: background-color 0.3s ease-in-out;}
  .to-talk:hover{ background-color: var(--hoverColor);}

@media(min-width: 1100px){
  #talk .talk-inner{ flex-wrap: nowrap; }
  .talk-inner .left{ flex-shrink: 0;}
}

/* staff-recommendation
===================================================*/
#staff-recommendation{ padding-bottom: var(--variableSpaceS);}



/* project
====================================================*/
#project{ background-color: #F7F7F7; padding: var(--variableSpaceS); margin-bottom: var(--variableSpaceM);}
#project h2{ font-size: var(--fontSizeL); text-align: center; font-weight: var(--boldFontWeight);}

.project-wrap{ display: flex; flex-wrap: wrap; gap: var(--variableSpaceS);}
.project-wrap .left{ flex-basis: 250px; flex-shrink: 0; margin: auto;}
.project-wrap .left figure{ margin-bottom: 1em;}
.project-wrap .left div{ color: #005787; border-style: solid; border-width: 1px 0 1px 0; border-inline-start-color: #005787; padding: 1em 0;}
.project-wrap .right{ font-size: var(--fontSizeXS)}
.project-wrap .accent{ color: var(--themeColor); letter-spacing: 0.3em; margin-bottom: 1em; }
.project-wrap p{ margin-bottom: 1.5em;}

@media(min-width: 1000px){
  .project-wrap{ flex-wrap: nowrap;}
}

/* frees pace */
.news {
  border-style: double none;
  /*border-color: #b2a487;*/
  max-width: 900px;
  padding: 18px 0 10px 0;
  margin: 0 auto;
  margin-top: 5em;
}

.news-inner {
  max-width: 1050px;
  /*margin-top: 10px;
  margin-bottom: 10px;*/
  padding-left: 5px;
  color: #5d5d5d;
}

.free-space {
  max-width: 900px;
  margin-top: 10px;
  margin-bottom: 3em;
  padding-left: 5px;
  color: #5d5d5d;
}

/* recommernd */
.recommend-items {
  margin-top: 3em;
}

/*ˇˇnew_items */
.new_item-items {
  margin-top: 3em;
}