@charset "UTF-8";

/*===========================================================*/
/* # TOPページ
/*===========================================================*/
body.home .site-main{
	overflow-x: hidden;
}
.site-main {
  /*font-size: clamp(14px, 1.6rem, 18px);*/
  font-size: 1.6rem;
}
@media(max-width:767px) {
  .site-main {
    font-size: clamp(14px, 1.4rem, 16px);
  }
}
/*==  top-main-visual ==*/
.top-main-visual{
  width:100%;
	height: 48.71428vw;
  overflow:hidden;
	background: var(--pointCl01);
	background-size: cover;
}
.top-main-visual .section-inner{
  width: 84.6428571vw;
  height: 100%;
  position: relative;
}
.top-mainvisual-ill{
  width:28.1428571vw;
  position: absolute;
  top: 9vw;
  right: 1.0714285vw;
}
.top-mainvisual-copy .copy01{
  position: absolute;
  top:11.7857142vw;
  left: 1.3571428vw;
  width:49.8571428vw;
}
.top-mainvisual-copy .copy02{
  position: absolute;
  top:26.6428571vw;
  left: 1.5vw;
  width: 45.3571428vw;
}
.top-mainvisual-btns{
  position: absolute;
  bottom: 3.2rem;
  right: 0;
  display: flex;
  width: 70rem;
  max-width: 100%;
}
.top-mainvisual-btns .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.6rem;
  line-height: 5rem;
  color:#fff;
  border: #fff solid .4rem;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 600;
}
.top-mainvisual-btns .btn::after{
  content: "";
  width:2rem;
  height: 2rem;
  background: url("../images/common/icon_arrow_wg.svg") top left / contain no-repeat;
  margin-left: 2rem;
}
.top-mainvisual-btns .btn-left{
  width:37rem;
  border-radius: 3.8rem 0 0 3.8rem;
}
.top-mainvisual-btns .btn-right{
  width:33rem;
  border-radius: 0 3.8rem 3.8rem 0;
  border-left: 0;
}
@media(max-width:767px) {
  .top-main-visual{
    height: 63.5rem;
  }
  .top-main-visual .section-inner{
    width: 84.666666vw;
    height: 100%;
  }
  .top-mainvisual-ill{
    width: 23.2rem;
    position: absolute;
    top: 26.6rem;
    right: calc(50% - 11.6rem);
  }
  .top-mainvisual-copy .copy01{
    top:6.85rem;
    left: 0.7rem;
    width:31.2rem;
  }
  .top-mainvisual-copy .copy02{
    top: 16.45rem;
    left: 0.8rem;
    width: 31.2rem;
  }
  .top-mainvisual-btns{
    bottom: 5rem;
  }
  .top-mainvisual-btns .btn{
    height: 5.6rem;
    font-size: 1.2rem;
    border-width: 2px;
  }
  .top-mainvisual-btns .btn::after{
    width: 1rem;
    height: 1rem;
    margin-left: .8rem;
  }
  .top-main-visual .section-inner{
    width:84.53333%;
  }
  .top-mainvisual-btns .btn-left{
    width:16.5rem;
  }
  .top-mainvisual-btns .btn-right{
    width:15rem;
  }
}
/*==  top-section ==*/
.section{
  width:100%;
}
.section-inner{
  width:calc((100% - 128rem)/2 + 110.5rem + 5rem);
}
.section-inner.f-inner{
  display: flex;
}
.section-inner.f-right{ 
  justify-content: flex-start;
  margin: 0 0 0 auto;
}
.section-inner.f-left{
  flex-direction: row-reverse;
  margin: 0 auto 0 0;
}
.section-inner.f-col{
  flex-direction: column;
  margin: 0 0 0 auto;
}
.section-inner .text-block{
  width:51.5rem;
  max-width: 100%;
  background: #fff;
}
.section-inner .text-block p{
  margin-bottom: 1.9em;
}
.section-inner .figure-block{
  width:59.0rem;
  max-width: 100%;
}
.section-inner.f-left .figure-block{
  padding: 8rem 5rem 4rem 0;
}
.section-inner.f-right .figure-block{
  padding: 8rem 0 4rem 5rem;
}
.top-section-heading{
  margin:0 0 3.6rem;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.4;
}

@media(max-width:767px) {
  .section-inner{
    width:100%;
  }
  .section-inner.f-inner{
    display: block;
  }
  .section-inner .text-block{
    width:32rem;
  }
  .section-inner.f-right .text-block{
    margin-left: auto;
  }
  .section-inner.f-left .text-block{
    margin-right: auto;
  }
  .section-inner .text-block p{
    margin-bottom: 1.5em;
  }
  .section-inner .figure-block{
    100%;
  }
  .section-inner.f-left .figure-block{
    padding: 20px;
  }
  .section-inner.f-right .figure-block{
    padding: 3rem;
  }
  .top-section-heading{
    margin:0;
    font-size: 2.4rem;
  }
}


/*==  top-about ==*/
.top-about-section{
  background-color: var(--pointCl02);
}
.top-about-section .sub-heading span{
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .1rem .1rem .3rem;
  margin:0;
  background-color: var(--pointCl01);
  line-height: 1;
  color:#fff;
  font-size: 3.6rem;
  font-weight: 600;
}
.top-about-section .sub-heading span:not(:first-child){
  margin-top:1rem;
}
.top-about-section .section-inner .text-block{
  padding: 6.8rem 4.8rem 5.6rem 6.2rem;
  position: relative;
}
.top-about-section .section-inner .text-block::after{
  content: "";
  width:8.5rem;
  height: 47.5rem;
  background: url("../images/top/text_about.svg") top left / contain no-repeat;
  position: absolute;
  top:3.3rem;
  left:-7.7rem;
}
.top-about-section .section-inner.f-right .figure-block{
  padding:8rem 0 8rem 13rem;
}
.top-about-section .figure-image{
  width:42.8rem;
  margin: 2.5rem 0 0 0.8rem;
}
@media(max-width:767px) {
  .top-about-section .sub-heading span{
    font-size: 2.4rem;
  }
  .top-about-section .sub-heading span:not(:first-child){
    margin-top:.6rem;
  }
  .top-about-section .section-inner .text-block{
    padding: 4.5rem 3rem 1rem 3rem;
  }
  .top-about-section .section-inner .text-block::after{
    width: 4.25rem;
    height: 23.75rem;
    top: 2rem;
    left: -3.8rem;
  }
  .top-about-section .section-inner.f-right .figure-block{
    padding:3rem 3rem 3rem 3rem;
  }
  .top-about-section .figure-image{
    width:28.9rem;
    margin: 1.4rem auto 0;
  }
}

/*==  top-service ==*/
.top-service-section{
  background-color: var(--pointCl03);
}
.top-service-section .section-inner{
  background: #fff;
}
.top-service-section .section-inner.f-left .figure-block{
  padding: 8rem 0 8rem 0;
}
.top-service-section .section-inner .text-block{
  padding: 7rem 8rem 20rem 7rem;
  position: relative;
}
.top-service-section .section-inner .text-block::after{
  content: "";
  width:7.7rem;
  height: 34.8rem;
  background: url("../images/top/text_service.svg") top left / contain no-repeat;
  position: absolute;
  top:4.3rem;
  right:-7.4rem;
}
.top-service-section .section-inner .text-block::before{
  content: "";
  width:27.5rem;
  height: 24.8rem;
  background: url("../images/top/person_illust02.png") bottom right / contain no-repeat;
  position: absolute;
  bottom: 0;
  right: -9.5rem;
}
.top-service-section .sub-heading span{
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .2rem .2rem .4rem;
  margin:0;
  background-color: var(--textCl);
  line-height: 1;
  color:#fff;
  font-size: 2.4rem;
  font-weight: 600;
}
.service-item-container {
  width:58rem;
  display: grid;
  grid-template-columns: 27.674% 27.674% 40.747%;
  grid-template-rows: 17.3rem 24.4rem;
  gap: 1.3rem 1rem;
  margin:2.3rem 1rem 3rem 0;
}
.service-item.item1,
.service-item.item2{
  background-color: var(--pointCl03);
}
.service-item.item3,
.service-item.item4{
  background-color: #fff;
}
.service-item.item1 {
  grid-column: 1 / 3;
}
.service-item.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3; 
}
.service-item.item1 .service-item-desc{
  margin-top:1.8rem;
}
.service-item.item2 .service-item-desc{
  margin-top:21.4rem;
}
.service-item.item3 .service-item-desc{
  margin-top:8.5rem;
}
.service-item.item4 .service-item-desc{
  margin-top:8.5rem;
}
.service-item a{
  display: block;
  width:100%;
  height: 100%;
  color:#fff;
}
.service-item .service-item-inner{
  width:100%;
  height: 100%;
  position: relative;
}
.service-item.item1 a .service-item-inner{
  color: #fff;
  padding: 2.5rem 12rem 1rem 2rem;
  background: url("../images/top/icon_publication.svg") top 3.8rem right 2rem no-repeat;
  background-size: 8.7rem;
}
.service-item.item2 a .service-item-inner{
  color: #fff;
  padding: 2.5rem .3rem 1rem .9rem;
  background: url("../images/top/icon_degital.svg") top 11.5rem left 6.4rem no-repeat;
  background-size: 10.6rem;
}
.service-item.item3 a,
.service-item.item4 a{
  border: var(--pointCl03) solid 5px;
}
.service-item.item3 a .service-item-inner{
  color: var(--textCl);
  padding: 2.2rem .5rem 1rem 1rem;
  background: url("../images/top/icon_voice.svg") top 6.3rem left 5.8rem no-repeat;
  background-size: 3.7rem;
}
.service-item.item4 a .service-item-inner{
  color: var(--textCl);
  padding: 2.2rem .5rem 1rem 1rem;
  background: url("../images/top/icon_movie.png") top 5.8rem left 4.3rem no-repeat;
  background-size: 6.5rem;
}
.service-item.item3 a:hover .service-item-inner,
.service-item.item4 a:hover .service-item-inner{
  color:#fff;
}
.service-item.item3 a::before,
.service-item.item4 a::before{
  width:calc(100% + 10px);
  height: calc(100% + 10px);
  margin:-5px 0 0 -5px;
}
.service-item a .service-item-inner::after{
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  background: url("../images/common/icon_arrow_wp.svg") top left / contain no-repeat;
}
.service-item.item3 a .service-item-inner::after,
.service-item.item4 a .service-item-inner::after{
  background-image: url("../images/common/icon_arrow_pw.svg");
  bottom: 1rem;
}
.service-item-title {
  line-height: 1;
  margin:0 0 0.5rem 0;
  font-size: 2.6rem;
  font-weight: 700;
  padding-left:.5rem;
}
.service-item.item2 .service-item-title{
  padding-left: 1.5rem;
}
.service-item-desc {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.service-item.item4 a .service-item-desc{
  letter-spacing: -0.8px;
}
.top-faq-btn a{
  display: flex;
  width:100%;
  height: 7rem;
  color:var(--textCl);
  border-radius: 3.5rem;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: bold;
  background: #e9e9e9;
  background-size: 2.8rem;
  position: relative;
}
.top-faq-btn a .btn-icon{
  position: absolute;
  top:50%;
  right: 3.5rem;
  transform: translateY(-50%);
  width:2.8rem;
  height: 2.8rem;
  background: url("../images/common/icon_arrow_bw.svg") top left /contain no-repeat;
}

@media(max-width:767px) {
  .top-service-section .section-inner{
    background: none;
  }
  .top-service-section .sub-heading span{
    font-size: 2rem;
  }
  .top-service-section .section-inner .figure-block{
    background: #fff;
  }
  .top-service-section .section-inner .text-block{
    padding: 4.5rem 3rem 8rem 3rem;
  }
  .top-service-section .section-inner .text-block::after{
    width: 3.85rem;
    height: 17.4rem;
    top: 2.2rem;
    right: -3.7rem;
  }
  .top-service-section .section-inner .text-block::before{
    width:13.8rem;
    height: 12.4rem;
    right:-4.7rem;
    bottom:0;
  }
  .top-service-section .section-inner.f-left .figure-block{
    padding: 2.2rem 3rem 5rem 3rem;
  }
  .service-item-container {
    width: 100%;
    grid-template-columns: 14.95rem 14.95rem;
    grid-template-rows: 10.8rem 13.3rem 18rem;
    gap: 1.5rem 1.5rem;
    margin:2rem 0 1.5rem 0;
  }
  .service-item.item1 a .service-item-inner{
    display: flex;
    padding: 2rem .5rem 1rem 1.5rem;
    background-position: top 5.6rem left 2.5rem;
    background-size: 4.3rem;
  }
  .service-item.item2 a .service-item-inner{
    display: flex;
    padding: 2rem .5rem 1rem 1.5rem;
    background-position: top 5.2rem left 2.5rem;
    background-size: 4.8rem;
  }
  .service-item.item3 a .service-item-inner{
    padding: 1.5rem .5rem 1rem 1.2rem;
    background-position: top 4.8rem left 5.5rem;
    background-size: 3rem;
  }
  .service-item.item4 a .service-item-inner{
    padding: 1.5rem .5rem 1rem 1.2rem;
    background-position: top 5rem left 4.6rem;
    background-size: 4.6rem;
  }
  .service-item.item1 a .service-item-inner::after,
  .service-item.item2 a .service-item-inner::after{
    bottom:1.2rem;
    right:1.5rem;
  }
  .service-item.item3 a .service-item-inner::after,
  .service-item.item4 a .service-item-inner::after{
    top:1.5rem;
    right:1.2rem;
  }
  .service-item.item2 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  .service-item.item3 a,
  .service-item.item4 a{
    border: var(--pointCl03) solid 2.5px;
  }
  .service-item-title {
    font-size: 2rem;
  }
  .service-item.item1 .service-item-title,
  .service-item.item2 .service-item-title{
    width:9.2rem;
    padding:0;
  }
  .service-item-desc {
    font-size: 1.3rem;
    letter-spacing: -0.5px;
    line-height: 1.4;
  }
  .service-item.item1 .service-item-desc,
  .service-item.item2 .service-item-desc{
    margin:0;
  }
  .service-item.item3 .service-item-desc,
  .service-item.item4 .service-item-desc{
    margin-top:7rem;
  }
  .top-faq-btn a{
    font-size: 1.4rem;
    height: 6.2rem;
  }
  .top-faq-btn a .btn-icon{
    right: 2.5rem;
    width:2rem;
    height: 2rem;
  }
}

/*==  top-project ==*/
.top-project-section{
  background-color: var(--pointCl01);
}
.top-project-section .section-inner .text-block{
  padding: 7.5rem 9rem 4rem 7.8rem;
  position: relative;
}
.top-project-section .section-inner .text-block::after{
  content: "";
  width:9.6rem;
  height: 59rem;
  background: url("../images/top/text_project.svg") top left / contain no-repeat;
  position: absolute;
  top:4.3rem;
  left:-9.3rem;
}
.top-project-section .section-inner.f-right .figure-block{
  padding: 8rem 0 0 6rem;
  position: relative;
}
.top-project-section .section-inner .figure-block::before{
  content: "";
  width:14.5rem;
  height: 46.8rem;
  background: url("../images/top/person_illust03.png") bottom right / contain no-repeat;
  position: absolute;
  bottom: -9.3rem;
  left: -8.5rem;
  z-index: 999;
}
.top-project-section .sub-heading span{
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .2rem .2rem .4rem ;
  margin:0;
  background-color: var(--pointCl02);
  line-height: 1;
  color:var(--textCl);
  font-size: 2.6rem;
  font-weight: 600;
}
.top-project-section span:not(:first-child){
  margin-top: .7rem;
}
.top-project-section .top-project-check{
  background-color: var(--pointCl01);
  padding:2.5rem 0;
}
.top-project-section .project-item-container{
  width:53.4rem;
  max-width: 100%;
  display: flex;
  gap: 1.3rem 1rem;
  flex-wrap: wrap;
  margin-top: 2.3rem;
}
.top-project-section .project-item{
  width:26rem;
  height: 10rem;
}
.project-item a{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pointCl02);
  color:var(--textCl);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  padding:0 0 0 2.8rem;
  position: relative;
}
.project-item a .btn-icon{
  position: absolute;
  top:50%;
  right: 2.1rem;
  transform: translateY(-50%);
  width:2.8rem;
  height: 2.8rem;
  background: url("../images/common/icon_arrow_wy.svg") top left /contain no-repeat;
}

@media(max-width:767px) {
  .top-project-section .sub-heading span{
    font-size: 2rem;
  }
  .top-project-section .sub-heading span:not(:first-child){
    margin-top:.6rem;
  }
  .top-project-check{
    margin-left: 3rem;
    padding: 2rem 3rem;
  }
  .top-project-section .section-inner .text-block{
    padding: 4.5rem 3rem 1.5rem 3rem;
  }
  .top-project-section .section-inner .text-block::after{
    width: 4.8rem;
    height: 28.9rem;
    top: 2.2rem;
    left: -4.6rem;
  }
  .top-project-section .section-inner .figure-block::before{
    width: 7.3rem;
    height: 23.4rem;
    bottom: -2rem;
    left: 0.7rem;
  }
  .top-project-section .section-inner.f-right .figure-block{
    padding: 3rem 3rem 3rem 7.85rem;
  }
  .top-project-section .project-item-container{
    width:100%;
    gap: .7rem .5rem;
  }
  .top-project-section .project-item{
    width:49%;
    height: 5rem;
  }
  .project-item a{
    font-size: 1.4rem;
    padding:0 0 0 1.4rem;
    line-height: 1.2;
  }
  .project-item a .btn-icon{
    right: 1.0rem;
    width: 1.3rem;
    height: 1.3rem;
  }
}

/*==  top-swiper ==*/
.swiper-block{
  width: 100%;
  height: auto;
  margin: 0 0 0 auto;
  overflow: visible;
  background-color: var(--pointCl02);
  padding:2rem 3.25rem 2rem 4.85rem;
  position: relative;
}
.swiper-block .swiper {
}
.swiper-slide{
  width: 14.4rem;
  height: 20.7rem;
  overflow: hidden;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.swiper-slide a{
  display: block;
  width:100%;
  height: 100%;
}
.swiper-slide img{
  width:100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% top;
}

.swiper-button-next, 
.swiper-button-prev{
  width:3.8rem;
  height: 3.8rem;
}
.swiper-button-next{
  right:2.3rem;
  background: url("../images/common/icon_arrow_next.svg") top left / contain no-repeat;
}
.swiper-button-prev{
  left:4.0rem;
  background: url("../images/common/icon_arrow_prev.svg") top left / contain no-repeat;
}
.swiper-button-next::after, 
.swiper-button-prev::after{
  display: none;
}

@media(max-width:767px) {
  .swiper-block{
    padding:1.8rem 3.7rem 1.8rem 3.7rem;
  }
  .swiper-slide{
    width: 9rem;
    height: 12.94rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .swiper-button-next, 
  .swiper-button-prev{
    width:2.35rem;
    height: 2.35rem;
  }
  .swiper-button-next{
    right:2.8rem;
  }
  .swiper-button-prev{
    left:2.8rem;
  }
}

/*==  top-sns ==*/
.top-sns-section{
  background-color: var(--pointCl03);
}
.top-sns-section .section-inner.f-inner{
  align-items: flex-start;
}
.top-sns-section .section-inner .text-block{
  position: relative;
  padding: 7.5rem 9rem 0 9rem;
}
.top-sns-section .section-inner .text-block::after{
  content: "";
  width:8.3rem;
  height: 23.2rem;
  background: url("../images/top/text_sns.svg") top left / contain no-repeat;
  position: absolute;
  top:4.3rem;
  right:-7.7rem;
}
.top-sns-instagram{
  width:25.7rem;
  height: 7.4rem;
}
.top-sns-links{
  background-color: var(--pointCl03);
  margin: 12.4rem -9rem 0 -9rem;
  padding:7.8rem 0 7.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.top-sns-section .section-inner .top-sns-links::before{
  content: "";
  width:20rem;
  height: 17.5rem;
  background: url("../images/top/person_illust04.png") bottom right / contain no-repeat;
  position: absolute;
  top: -17.5rem;
  right: -4.5rem;
}
.top-sns-item:nth-child(1){
  margin-right: 6rem;
}
.top-sns-item:nth-child(2){
  margin-right: 4.7rem;
}
.top-sns-item a.top-sns-x {
  display: block;
  width: 3.9rem;
  height: 4rem;
}
.top-sns-item a.top-sns-insta {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
}
.top-sns-item a.top-sns-note {
  display: block;
  width: 12.9rem;
  height: 4.9rem;
}

.top-sns-section .section-inner.f-left .figure-block{
  padding: 7.8rem 12rem 7.5rem 0;
}
@media(max-width:767px) {
  .top-sns-section .section-inner .text-block{
    padding: 4.5rem 3rem 0 3rem;
  }
  .top-sns-section .section-inner .text-block::after{
    width: 4.15rem;
    height: 11.6rem;
    top: 2.3rem;
    right: -3.9rem;
  }
  .top-sns-section .section-inner.f-left .figure-block{
    padding: 3rem 3rem 5rem 3rem;
  }
  .top-sns-instagram{
    width:18.5rem;
    height: 5.35rem;
  }
  .top-sns-links{
    margin: 5rem -3rem 0 -3rem;
    padding:6rem 0 3rem 5.5rem;
  }
  .top-sns-section .section-inner .top-sns-links::before{
    width:9.9rem;
    height: 8.75rem;
    right:-3.9rem;
    top:-8.75rem;
  }
  .top-sns-item:nth-child(1){
    margin-right: 3.6rem;
  }
  .top-sns-item:nth-child(2){
    margin-right: 2.6rem;
  }
  .top-sns-item a.top-sns-x {
    width: 2.6rem;
    height: 2.7rem;
  }
  .top-sns-item a.top-sns-insta {
    width: 2.9rem;
    height: 2.9rem;
  }
  .top-sns-item a.top-sns-note {
    width: 8.6rem;
    height: 3.2rem;
  }
}

.is-anchor{
  padding-top:6.8rem;
  margin-top:-6.8rem;
}
@media(max-width:767px) {
  .is-anchor{
    padding-top:6rem;
    margin-top:-6rem;
  }
}