@charset "UTF-8";

#topMain {
  width: 100%;
  height: 40vw;
  margin: 0 0 150px;
  background: url(../img/top_main.jpg) no-repeat;
  background-size: 100% auto;
  background-position: center;
  object-fit: cover;
  overflow: hidden;
  position: relative;
}
#topMain h1 {
  width: 100%;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}
#topMain h1 br {
  display: none;
}
#topMain h1 img {
  width: 5.6vw;
  margin: 0 auto 1vw;
  display: block;
}
#topMain h1 #topMainTxt1 {
  margin: 0 auto 1.6vw;
  font-size: 3.9vw;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
  letter-spacing: 0.4vw;
  text-shadow: 0 3px 5px rgba(255,255,255,0.5);
  display: block;
}
#topMain h1 #topMainTxt1 span {
  font-size: 4.7vw;
}
#topMain h1 #topMainTxt1 b {
  letter-spacing: -1.5vw;
}
#topMain h1 #topMainTxt2 {
  font-size: 2.2vw;
  font-weight: bold;
  letter-spacing: 0.2vw;
  text-shadow: 1px 2px 3px #fff;
  display: block;
}
#topMainScroll {
  width: 72px;
  height: 80px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
#topMainScroll::after {
  content : '';
  width : 3px;
  height : 50px;
  display : block;
  position : absolute;
  background: #fff;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
#topMainScroll:hover {
  opacity: 1;
}
@media all and (max-width: 1040px) {
  #topMain {
    margin: 0 0 105px;
  }
}
@media all and (max-width: 768px) {
  #topMain {
    height: 111vw;
    margin: 0 0 50px;
    background: url(../img/top_main_sp.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
  }
  #topMain h1 {
    width: 74.7vw;
    top: 47vw;
  }
  #topMain h1 br {
    display: block;
  }
  #topMain h1 img {
    width: 18vw;
    margin: 0;
    position: absolute;
    top: 0.6vw;
    right: 0;
  }
  #topMain h1 #topMainTxt1 {
    margin: 0 auto 4vw;
    font-size: 11.5vw;
    letter-spacing: 0.1vw;
    text-align: left;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  #topMain h1 #topMainTxt1 span {
    font-size: 13.9vw;
  }
  #topMain h1 #topMainTxt1 span:nth-child(1) {
    margin: 0 1vw 0 0;
  }
  #topMain h1 #topMainTxt1 b {
    display: none;
  }
  #topMain h1 #topMainTxt2 {
    margin: 0 0 0 1.5vw;
    font-size: 4.8vw;
    letter-spacing: 0.1vw;
    line-height: 150%;
    text-align: left;
    text-align: justify;
    text-justify: inter-ideograph;
  }
  #topMainScroll {
    width: 56px;
    height: 73px;
    font-size: 14px;
  }
  #topMainScroll::after {
    width : 2px;
    height : 50px;
  }
}








#topConcept {
  width: 1000px;
  margin: 0 auto 150px;
}
#topConceptContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#topConceptImg {
  width: 32%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
#topConceptImg .sp {
  display: none;
}
#topConceptImg li {
  width: 100%;
}
#topConceptImg li img {
  border-radius: 30px;
}
#topConceptTxt {
  width: 65%;
}
#topConceptTxt p {
  margin: 0;
  font-size: 21px;
  font-weight: bold;
  line-height: 250%;
  text-align: justify;
  text-justify: inter-ideograph;
}
@media all and (max-width: 1040px) {
  #topConcept {
    width: 100%;
    margin: 0 auto 80px;
  }
  #topConceptContent {
    display: block;
  }
  #topConceptImg {
    width: 100%;
    margin: 0 0 20px;
    display: block;
  }
  #topConceptImg .sp {
    display: block;
  }
  #topConceptImg .pc {
    display: none;
  }
  #topConceptImg li img {
    border-radius: 0;
  }
  #topConceptTxt {
    width: calc(100% - 40px);
    max-width: 768px;
    margin: 0 auto;
  }
  #topConceptTxt p {
    margin: 0;
    font-size: 14px;
    line-height: 200%;
  }
}













.topBusiness1,
.topBusiness2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topBusiness1 {
  margin: 0 0 150px calc( ( ( 100vw - ( 100vw - 100% ) ) - 1000px ) / 2 );
}
.topBusiness2 {
  margin: 0 calc( ( ( 100vw - ( 100vw - 100% ) ) - 1000px ) / 2 ) 190px 0;
}
.topBusiness1 .sp,
.topBusiness2 .sp {
  display: none;
}
.topBusinessContent {
  width: 240px;
}
.topBusinessTxt {
  margin: 0 0 30px;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}
.topBusinessTxt h2 {
  margin: 0 0 0 30px;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: 10px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  display: block;
}
.topBusinessTxt p {
  margin: 0 5px;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 10px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
}
.topBusiness1 figure,
.topBusiness2 figure {
  width: calc( ( 100% - 1000px ) + 630px );
}
.topBusiness1 figure img,
.topBusiness2 figure img {
  width: 100%;
  aspect-ratio: 16 / 12;
  object-fit: cover;
}
.topBusiness1 figure img {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.topBusiness2 figure img {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.topBusinessBtn {
  display: none;
}
@media all and (max-width: 1400px) {
  .topBusiness1 figure img,
  .topBusiness2 figure img {
    aspect-ratio: 14 / 12;
  }
}
@media all and (max-width: 1300px) {
  .topBusiness1 figure img,
  .topBusiness2 figure img {
    aspect-ratio: 13 / 12;
  }
}
@media all and (max-width: 1040px) {
  .topBusiness1,
  .topBusiness2 {
    flex-wrap: wrap;
  }
  .topBusiness1 .sp,
  .topBusiness2 .sp {
    display: block;
  }
  .topBusiness1 {
    margin: 0 0 85px;
  }
  .topBusiness2 {
    margin: 0 0 100px;
  }
  .topBusinessContent {
    width: 30%;
    margin: 0 3% 30px;
  }
  .topBusiness1 .pc,
  .topBusiness2 .pc {
    display: none;
  }
  .topBusinessTxt {
    margin: 0;
  }
  .topBusinessTxt h2 {
    margin: 0 0 0 3vw;
    font-size: 4.5vw;
    letter-spacing: 1vw;
  }
  .topBusinessTxt p {
    margin: 0 0.5vw;
    font-size: 3vw;
    letter-spacing: 1vw;
  }
  .topBusiness1 figure,
  .topBusiness2 figure {
    width: 64%;
    margin: 0 0 30px;
  }
  .topBusiness1 figure img,
  .topBusiness2 figure img {
    aspect-ratio: 7.4 / 10;
  }
  .topBusinessBtn {
    width: 100%;
    display: block;
  }
}
@media all and (max-width: 768px) {
  .topBusinessTxt h2 {
    font-size: 5.4vw;
  }
  .topBusinessTxt p {
    font-size: 3.7vw;
  }
}
@media all and (max-width: 668px) {
  .topBusinessTxt h2 {
    font-size: 5.5vw;
  }
  .topBusinessTxt p {
    font-size: 4vw;
  }
}
@media all and (max-width: 468px) {
  .topBusinessTxt p {
    font-size: 4.20vw;
  }
}
@media all and (max-width: 420px) {
  .topBusinessTxt p {
    font-size: 4.35vw;
  }
}







#topWorks {
  width: 1000px;
  margin: 0 auto 150px;
}
.topWorksList {
  margin: 0 0 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 70px 1.333333333%;
}
.topWorksList li {
  width: 24%;
}
.topWorksList li a {
  display: block;
}
.topWorksList li figure {
  width: 100%;
  margin: 0 0 15px;
  aspect-ratio: 16 / 12;
  border-radius: 30px;
  overflow: hidden;
}
.topWorksList li figure img {
  width: 100%;
  aspect-ratio: 16 / 12;
  object-fit: cover;
  border-radius: 30px;
  transition: transform .6s ease;
}
.topWorksList li a:hover {
  opacity: 0.8;
}
.topWorksList li a:hover figure img {
  opacity: 0.8;
  transform: scale(1.1);
}
.topWorksList li h3 {
  font-size: 16px;
  line-height: 130%;
  font-weight: bold;
  text-align: justify;
  text-justify: inter-ideograph;
}
.topWorksList li data {
  font-size: 16px;
  line-height: 130%;
  text-align: justify;
  text-justify: inter-ideograph;
}
@media all and (max-width: 1040px) {
  #topWorks {
    width: calc(100% - 40px);
    max-width: 768px;
    margin: 0 auto 110px;
  }
  .topWorksList {
    margin: 0 0 30px;
    gap: 35px 20px;
  }
  .topWorksList li {
    width: calc(50% - 10px);
  }
  .topWorksList li figure {
    margin: 0 0 10px;
  }
  .topWorksList li h3 {
    font-size: 13px;
  }
  .topWorksList li data {
    font-size: 13px;
  }
}









#topInstagram {
  width: 1000px;
  margin: 0 auto 150px;
}
.topInstagramList {
  margin: 0 0 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 70px 3.733333333%;
}
.topInstagramList li {
  width: 22.2%;
}
.topInstagramList li a {
  display: block;
}
.topInstagramList li figure {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  overflow: hidden;
}
.topInstagramList li figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 30px;
  transition: transform .6s ease;
}
.topInstagramList li a:hover {
  opacity: 0.8;
}
.topInstagramList li a:hover figure img {
  opacity: 0.8;
  transform: scale(1.1);
}
@media all and (max-width: 1040px) {
  #topInstagram {
    width: calc(100% - 40px);
    max-width: 768px;
    margin: 0 auto 60px;
  }
  .topInstagramList {
    margin: 0 0 30px;
    gap: 20px;
  }
  .topInstagramList li {
    width: calc(50% - 10px);
  }
}

/*wp-instagram*/
#topInstagram .sb_instagram_header,
#topInstagram #sbi_load {
  display: none;
}
#topInstagram .sbi_item {
  border-radius: 30px;
}
#topInstagram #sb_instagram #sbi_images {
  padding: 0;
  margin: 0 0 40px;
}
@media all and (max-width: 1040px) {
  #topInstagram #sb_instagram #sbi_images {
    padding: 0;
    margin: 0 0 10px;
  }
}