@charset "UTF-8";
#eyecatch {
  background-image: url(/assets/images/painting/eyecatch.jpg);
 }
 #gNav .painting::before {
  background: #0e10d9;
  height: 20px;
  width: 10px;
  content: "";
  display: block;
  margin: 0 auto 10px;
}

/* ========
  #overview
================ */
#overview {
  background-image: url("/assets/images/painting/overview-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
#overview .balloon.active:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -10px;
  border-top: 10px solid #040FD9;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
#overview .item-title {
  border-radius: 35px;
}
#overview .tab-content {
  background: rgb(255 255 255 / 86%);
}
#overview .tab-content-title {
  width: 10rem;
  border-radius: 35px;
}
#overview .tab-column > div {
  border-radius: 15px;
  box-sizing: border-box;
  height: 100%;
}

/* ========
  タブ切り替え
================ */
.wrap-tab {
  overflow: hidden;
}
.list-tab > li {
  display: block;
  margin: 0 2px;
  width: auto;
  background-color: white;
  color: #040FD9;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 15px;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}
.list-tab > li:after,
.list-tab .active:after {
  font-family: "Font Awesome 5 Free";
	font-weight: 900;
  position: absolute;
  right: 3%;
}
.list-tab > li:after {
	content: "\f138";
}
.list-tab .active:after {
	content: "\f13a";
}
.list-tab .active {
  background: #040FD9;
  color: white;
}
.list-tab .active span:before,
.list-tab span:before {
	content: "";
  display: inline-block;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  vertical-align: middle;
}
.list-tab li span:before,
.list-tab li.active span:before {
  display: block;
  margin: auto;
}
.list-tab .bousui span:before,
.list-tab .bousui.active span:before {
  width: 18px;
}
.list-tab .tosou span:before,
.list-tab .tosou.active span:before {
  width: 28px;
}
.list-tab .ceiling span:before,
.list-tab .ceiling.active span:before {
  width: 20px;
}

.list-tab .bousui span:before {
  background-image: url("/assets/images/works/bousui-blue.png");
}
.list-tab .tosou span:before {
  background-image: url("/assets/images/works/tosou-blue.png");
}
.list-tab .ceiling span:before {
  background-image: url("/assets/images/works/ceiling-blue.png");
}
.list-tab .bousui.active span:before {
  background-image: url("/assets/images/works/bousui-white.png");
}
.list-tab .tosou.active span:before {
  background-image: url("/assets/images/works/tosou-white.png");
}
.list-tab .ceiling.active span:before {
  background-image: url("/assets/images/works/ceiling-white.png");
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* ========
  process
================ */


@media screen and (min-width: 768px) {
  #top-main {
    height: 98vh;
    background-position: center;
  }
  #main-message {
    background-position: right -50%;
    background-size: 36%;
  }
  .list-tab > li {
    width: 12rem;
  }
  .list-tab li span:before, .list-tab li.active span:before {
    display: inline-block;
    margin: auto;
    background-position: left;
  }
}