@charset "utf-8";
/* ---------------------------------------------------------------------------------
©︎ SASAKI PLANNING INC.

HTML CSS Selectors top

$Revision: 2.0 $
--------------------------------------------------------------------------------- */
#contents-wrapper {
  padding-top: 0;
}
.sec-ttl {
  font-size: 200px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  writing-mode: vertical-rl;
  position: absolute;
  top: 0;
  z-index: -1;
  transition-delay:600ms;
}
.effect-on.sec-ttl {
  opacity: 0.5;
}
/*---------------------------------------------------------------------------------
FV
--------------------------------------------------------------------------------- */
.read-sec {
  padding-top: 495px;
  margin-bottom: 340px;
}
.read-sec__ttl {
  margin-bottom: 38px;
  font-size: 50px;
  line-height: 1;
  text-align: center;
  opacity : 0;
  transition : all 300ms 300ms ease-out;
}
.read-sec__txt {
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  opacity : 0;
  transition : all 300ms 600ms ease-out;
}
.sc .read-sec__ttl,
.sc .read-sec__txt {
  opacity: 1;
}


/*---------------------------------------------------------------------------------
OUR WORKS
--------------------------------------------------------------------------------- */
.works {
  width: 1114px;
  padding-left: 294px;
  margin: 0 auto 290px;
  position: relative;
}
.works .sec-ttl {
  left: 0;
}
.works-ttl {
  margin-bottom: 25px;
  font-size: 40px;
  line-height: 1;
}
.works-read {
  margin-bottom: 122px;
}
.works-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.works-list li {
  width: 381px;
  padding-bottom: 100px;
}
.works-list.new li {
  width: 100%;
}
.works-list a {
  display: block;
  width: 100%;
}
.works-list__img {
  width: 100%;
  padding-top: 61.71%;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
  overflow:hidden;
}
.works-list__img img {
  position: absolute;
  top: 0;
  left: 0;
}
.works-list__name {
  font-size: 20px;
}
.works-list__category {
  padding-top: 6px;
  font-size: 14px;
  line-height: 1;
}
.more-btn {
  width: 347px;
  margin: 0 auto;
}
.more-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  height: 74px;
  background-color: #fff;
  border-radius: 37px;
  font-size: 16px;
  line-height: 1;
  position: relative;
}
.more-btn a:hover {
  opacity: 1;
}
.more-btn a::before,
.more-btn a::after {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 19px;
  bottom: 0;
  margin: auto;
  content:"";
}
.more-btn a::before {
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 72.41%, #fff 100%);
  z-index: 2;
  opacity: 1;
}
.more-btn a::after {
  background-color: #000;
  z-index: 3;
  transition : all 300ms 0ms ease-out;
}

.more-btn .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.5px 0 2.5px 6px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  top: 0;
  right: 32px;
  bottom: 0;
  margin: auto;
  z-index: 4;
  transition : all 300ms 0ms ease-out;
}
.more-btn a:hover::before {
  transition : all 800ms 0ms ease-out;
  transform: scale(6);
  opacity: 0;
}
.more-btn a:hover::after {
  background-color: #EAEAEA;
}
.more-btn a:hover .arrow {
  border-color: transparent transparent transparent #000;
}
/*---------------------------------------------------------------------------------
SERVICES
--------------------------------------------------------------------------------- */
.service {
  width: 1114px;
  margin: 0 auto 285px;
  position: relative;
}
.service .sec-ttl {
  right: -85px;
}
.service-ttl {
  margin-bottom: 25px;
  font-size: 40px;
  line-height: 1;
}
.service-read {
  width: 820px;
  margin-bottom: 141px;
  font-size: 16px;
  line-height: 1.75;
}
.service-list {
  display: flex;
  flex-wrap: wrap;
  width: 975px;
}
.service-list li {
  width: 270px;
  margin: 0 55px 90px 0;
}
.service-list li:nth-of-type(3n+2) {
  transition-delay: 400ms;
}
.service-list li:nth-of-type(3n) {
  transition-delay: 500ms;
}
.service-list li:hover .service-list-in {
  transition : all 300ms 0ms ease-out;
  transform: translate(0,-20px);
}
.service-list-in__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  height: 190px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 27px;
}
.service-list-in__icon img {
  width: 98px;
}
.service-list-in__name {
  margin-bottom: 17px;
  font-size: 20px;
}
.service-list-in__txt {
}
.service-note {
}

/*---------------------------------------------------------------------------------
COMPANY INFO
--------------------------------------------------------------------------------- */
.company {
  width: 1114px;
  padding-left: 294px;
  margin: 0 auto 380px;
  position: relative;
}
.company .sec-ttl {
  left: 0;
}
.company-ttl {
  margin-bottom: 25px;
  font-size: 40px;
  line-height: 1;
}
.company-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 140px;
}
.company-list dt {
  width: 225px;
  padding: 45px 0 40px;
  position: relative;
}
.company-list dd {
  width: calc(100% - 225px);
  padding: 45px 0 40px;
  position: relative;
}
.company-list dt::before,
.company-list dd::before {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(49,45,43,.3);
  position: absolute;
  bottom: 0;
  left: 0;
  content:"";
}
.company-list dt::after {
  width: 16px;
  height: 1px;
  background-color: #312d2b;
  position: absolute;
  bottom: 0;
  left: 0;
  content:"";
}

.member-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-top: 68px;
}
.member-list li {
  width: 380px;
}
.member-list li:nth-of-type(2) {
  transition-delay:500ms;
  margin-top: 135px;
}
.member-list__img {
  margin-bottom: 35px;
}
.member-list__name {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1;
}
.member-list__job {
  margin-bottom: 45px;
  line-height: 1;
}
.member-list__txt {
  font-size: 18px;
  line-height: 2;
}



/*---------------------------------------------------------------------------------

--------------------------------------------------------------------------------- */