@charset "UTF-8";
/* style.css */
/**********************************************
	front page
***********************************************/
.mv {
  position: relative;
  margin: 80px 0 55px;
}
@media screen and (min-width: 960px) {
  .mv {
    margin-bottom: 160px;
  }
}
@media screen and (min-width: 1366px) {
  .mv {
    margin-bottom: 174px;
  }
}
.mv::after {
  content: "";
  display: block;
  width: calc(131 / 323 * 100%);
  aspect-ratio: 131 / 167;
  background-image: url("../img/mv_ball_sp.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
}
@media screen and (min-width: 1080px) {
  .mv::after {
    top: 150px;
    right: 0;
  }
}
.mv_wrap {}
@media screen and (min-width: 1920px) {
  .mv_wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    with: calc(1420 / 1920 * 100%);
  }
}
.cc {
  position: relative;
  margin-bottom: 200px;
}
@media screen and (min-width: 960px) {
  .cc {
    margin-left: 44px;
  }
}
.cc p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 16 / 375 * 100vw, 32px);
}
.js_text span {
  opacity: 0;
}
.cc h1 {
  font-family: "Bad Script", cursive;
  font-size: clamp(60px, 60 / 375 * 100vw, 120px);
  color: #745634;
  transform: rotate(-9.5deg);
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 2;
}
@media screen and (min-width: 960px) {
  .cc h1 {
    font-size: 116px;
  }
}
.cc h1 span {
  display: block;
}
.cc h1 span:last-of-type {
  margin-left: 0.6em;
  margin-top: -0.5em;
}
.mv_img {
  margin: -130px 0 55px;
  position: relative;
  border-radius: 999px 999px 10px 10px;
	  transform: scale(1.2);
  transform-origin: center;
  object-fit: cover;
	opacity: 0;

}
.mv_bg {
  content: "";
  display: block;
  width: calc(100% + 46px);
  height: calc(100% + 46px);
  background: -webkit-linear-gradient(180deg, #edebd5, #e6f3f1);
  background-image: linear-gradient(180deg, #edebd5, #e6f3f1);
  overflow: hidden;
  border-radius: 999px 999px 10px 10px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
.mv_img_img{
	overflow: hidden;
	  border-radius: 999px 999px 10px 10px;
}
.mv_img_img img {
}
@media screen and (min-width: 960px) {
  .mv_img {
    width: 614px;
    margin-bottom: 160px;
  }
}
@media screen and (min-width: 1366px) {
  .mv_img {
    margin: -95px auto 0;
  }
}
@media screen and (min-width: 1920px) {
  .mv_img {
    margin: -255px auto 0;
  }
}
.mv_img.is_show{
  transform: scale(1);
  transition: 5s;
	opacity:1;
}
.scroll {
  width: calc(39 / 323 * 100%);
  max-width: 60px;
  margin: 0 auto;
}
@media screen and (min-width: 1366px) {
  .scroll {
    width: calc(100 / 1354 * 100%);
    max-width: unset;
    margin: 0;
    position: absolute;
    bottom: 20px;
    right: 0;
  }
}
/*@media screen and (min-width: 960px){
	.scroll{
		display: flex;
	}
}*/
/**********************************************
	fp_about page
***********************************************/
.fp_about_sec {
  margin-bottom: 80px;
}
@media screen and (min-width: 960px) {
  .fp_about_sec {
    margin-bottom: 220px;
  }
}
@media screen and (min-width: 1366px) {
  .fp_about_sec .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.sec_ttl {
  text-align: center;
  margin-bottom: 70px;
}
@media screen and (min-width: 960px) {
  .sec_ttl {
    margin-bottom: 160px;
  }
}
.sec_ttl h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 28 / 375 * 100vw, 36px);
}
@media screen and (min-width: 1366px) {
  .sec_ttl h2 {
    font-size: 40px;
  }
}
.sec_ttl p {
  font-size: clamp(10px, 10 / 375 * 100vw, 20px);
  text-align: center;
}
@media screen and (min-width: 960px) {
  .sec_ttl p {
    font-size: 16px;
  }
}
.fp_about_wrap {
  margin-bottom: 50px;
  position: relative;
}
@media screen and (min-width: 1366px) {
  .fp_about_wrap {
    width: calc(613 / 1354 * 100%);
  }
}
.char_about {
  width: calc(117 / 323 * 100%);
  position: absolute;
  top: -35px;
  left: 0;
  z-index: 1;
}
@media screen and (min-width: 960px) {
  .char_about {
    top: -80px;
  }
}
@media screen and (min-width: 1366px) {
  .char_about {
    width: 237px;
    top: -72px;
  }
}
.fp_about_img img {
  width: 100%;
}
.fp_about_txt {}
@media screen and (min-width: 1366px) {
  .fp_about_txt {
    width: calc(536 / 1354 * 100%);
  }
}
.fp_about_lead {
  margin-bottom: 30px;
}
.fp_about_lead h2 {
  font-size: clamp(20px, 20 / 375 * 100vw, 30px);
  padding-bottom: 5px;
  border-bottom: solid 1px #8E7E67;
  margin-bottom: 5px;
}
@media screen and (min-width: 1366px) {
  .fp_about_lead h2 {
    font-size: 32px;
    padding-bottom: 10px;
  }
}
.fp_about_lead p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 12 / 375 * 100vw, 24px);
  text-align: right;
  padding-top: 5px;
}
@media screen and (min-width: 1366px) {
  .fp_about_lead p {
    padding-top: 10px;
  }
}
.fp_about_detail {
  margin-bottom: 30px;
}
@media screen and (min-width: 1366px) {
  .fp_about_detail {
    margin-bottom: 50px;
  }
}
/**********************************************
	fp_works page
***********************************************/
.fp_works_sec {
  margin-bottom: 80px;
}
@media screen and (min-width: 960px) {
  .fp_works_sec {
    margin-bottom: 220px;
  }
}
.fp_sec_ttl.works {
  margin-bottom: 82px;
}
.fp_works_wrap {
  margin-bottom: 50px;
  position: relative;
}
@media screen and (min-width: 1366px) {
  .fp_works_wrap {
    margin-bottom: 0;
  }
}
.char_works {
  width: calc(221 / 323 * 100%);
  position: absolute;
  top: -55px;
  left: 0;
  z-index: -1;
}
@media screen and (min-width: 960px) {
  .char_works {
    width: 430px;
    top: -98px;
  }
}
.fp_works_sec ul {}
@media screen and (min-width: 1366px) {
  .fp_works_sec ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
.fp_works_sec li {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 50px;
  position: relative;
  border-radius: 5px;
}
.fp_works_sec li::after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: -webkit-linear-gradient(180deg, #edebd5, #e6f3f1);
  background-image: linear-gradient(180deg, #edebd5, #e6f3f1);
  z-index: -1;
  border-radius: 5px;
}
.fp_works_sec li:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 960px) {
  .fp_works_sec li {
    padding: 42px 39px;
    margin-bottom: 130px;
  }
}
@media screen and (min-width: 1366px) {
  .fp_works_sec li {
    width: calc(612 / 1354 * 100%);
  }
}
.fp_works_inner img {
  border-radius: 5px;
  margin-bottom: 30px;
}
.fp_works_title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.23em;
  margin-bottom: 10px;
}
.label {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 10 / 375 * 100vw, 13px);
  color: #DF5959;
  border: solid 1px #DF5959;
  border-radius: 500px;
  width: fit-content;
  margin-bottom: 20px;
  padding: 6px 20px;
}
@media screen and (min-width: 1366px) {
  .label {
    font-size: 13px;
  }
}
/**********************************************
	about page
***********************************************/
.about_sec {
  margin-bottom: 110px;
}
@media screen and (min-width: 960px) {
  .about_sec {
    margin-bottom: 220px;
  }
}
.sec_ttl.about {
  margin: 40px auto 80px;
}
@media screen and (min-width: 1366px) {
  .sec_ttl.about {
    margin: 80px auto 160px;
  }
}
.sec_ttl h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 28 / 375 * 100vw, 38px);
}
@media screen and (min-width: 1366px) {
  .sec_ttl h1 {
    font-size: 40px;
  }
}
.about_wrap {
  margin-bottom: 80px;
}
@media screen and (min-width: 960px) {
  .about_wrap {
    margin-bottom: 130px;
  }
}
@media screen and (min-width: 1366px) {
  .about_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 160px;
    column-gap: 150px;
  }
}
.about_img1 img {
  display: block;
  width: calc(268 / 375 * 100%);
  margin-bottom: 30px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
@media screen and (min-width: 1366px) {
  .about_img1 {
    width: calc(876 / 1920 * 100%);
  }
}
@media screen and (min-width: 960px) {
  .about_img1 img {
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1366px) {
  .about_img1 img {
    width: 100%;
    height: 424px;
    object-fit: cover;
    margin-bottom: 0;
  }
}
.about_txt {
  width: calc(323 / 375 * 100%);
  margin: 0 auto 30px;
}
@media screen and (min-width: 960px) {
  .about_txt {
    width: fit-content;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1366px) {
  .about_txt {
    margin: 0;
  }
}
@media screen and (min-width: 1920px) {
  .about_txt {
    width: calc(351 / 1920 * 100%);
    margin: 0;
  }
}
.about_lead {
  margin-bottom: 40px;
}
@media screen and (min-width: 1366px) {
  .about_lead {
    margin-bottom: 40px;
  }
}
.about_lead h2 {
  font-size: clamp(20px, 20 / 375 * 100vw, 22px);
  margin-bottom: 20px;
}
@media screen and (min-width: 1366px) {
  .about_lead h2 {
    font-size: 32px;
    margin-bottom: 40px;
  }
}
.about_lead p {}
.about_career {}
.about_career h2 {
  font-size: clamp(16px, 16 / 375 * 100vw, 18px);
  margin-bottom: 5px;
}
@media screen and (min-width: 1366px) {
  .about_career h2 {
    font-size: 18px;
  }
}
.about_career_list {}
.about_career_list_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.about_career_list_item dt {
  width: 7.5em;
}
.about_career_list_item dd {
  width: calc(100% - 7.5em);
}
.about_img2 {}
.about_img2 img {
  display: block;
  width: calc(268 / 375 * 100%);
  margin: 0 0 0 auto;
  object-fit: cover;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
@media screen and (min-width: 960px) {
  .about_img2 {
    width: calc(268 / 375 * 100%);
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 1366px) {
  .about_img2 {
    width: calc(377 / 1920 * 100%);
  }
}
@media screen and (min-width: 1366px) {
  .about_img2 img {
    width: 100%;
    height: 424px;
    object-fit: cover;
    object-position: right;
  }
}
.about_container {
  max-width: 650px;
  margin: 0 auto;
}
@media screen and (min-width: 1366px) {
  .about_container {
    width: 100%;
    max-width: unset;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1920px) {
  .about_container {
    max-width: 1404px;
  }
}
.about_contents_sec {
  width: calc(100% - 40px);
  background-color: #fff;
  padding: 30px;
  margin: 0 auto 80px;
  position: relative;
  border-radius: 5px;
}
@media screen and (min-width: 960px) {
  .about_contents_sec {
    margin-bottom: 130px;
  }
}
@media screen and (min-width: 1366px) {
  .about_contents_sec {
    width: calc(1173 / 1464 * 100%);
    padding: 70px 120px;
    margin-bottom: 160px;
  }
}
.about_contents_sec::after {
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: -webkit-linear-gradient(180deg, #edebd5, #e6f3f1);
  background-image: linear-gradient(180deg, #edebd5, #e6f3f1);
  z-index: -1;
  border-radius: 5px;
}
.about_contents_sec:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 1366px) {
  .about_ml_inner {
    position: relative;
  }
}
.about_subtitle {
  margin-bottom: 50px;
}
@media screen and (min-width: 1366px) {
  .about_subtitle {
    margin-bottom: 80px;
  }
}
.about_subtitle h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 24 / 375 * 100vw, 36px);
  color: #8E7E67;
}
@media screen and (min-width: 1366px) {
  .about_subtitle h2 {
    font-size: 48px;
  }
}
.about_subtitle p {
  font-size: clamp(10px, 10 / 375 * 100vw, 15px);
}
@media screen and (min-width: 1366px) {
  .about_subtitle p {
    font-size: 18px;
  }
}
.about_motive_contents {
  margin-bottom: 50px;
}
@media screen and (min-width: 1366px) {
  .about_motive_contents {
    width: calc(499 / 1166 * 100%);
  }
  .about_motive_contents.right {
    margin: 0 0 0 auto;
  }
}
.about_motive_contents:last-of-type {
  margin-bottom: 0;
}
.about_motive_contents h3 {
  margin-bottom: 5px;
  font-size: clamp(16px, 16 / 375 * 100vw, 18px);
}
@media screen and (min-width: 1366px) {
  .about_motive_contents h3 {
    font-size: 18px;
  }
}
.about_motive_contents .number {
  width: 100%;
  margin-bottom: 10px;
  border-bottom: solid 0.5px #8E7E67;
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
}
.about_motive_contents .number::after {
  content: "";
  display: inline-block;
  width: 15px;
  aspect-ratio: 1/2;
  background-image: url("../img/one.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.about_motive_contents .number.two::after {
  background-image: url("../img/two.svg");
}
.about_motive_contents .number.three::after {
  background-image: url("../img/three.svg");
}
.about_motive_contents p.about_detail {
  border-bottom: dotted 1px #8E7E67;
}
.human_img {
  width: calc(223 / 283 * 100%);
  margin: 0 auto 50px;
}
@media screen and (min-width: 960px) {
  .human_img {
    width: 50%;
  }
}
@media screen and (min-width: 1366px) {
  .human_img {
    width: calc(304 / 1166 * 100%);
    margin: 0;
    position: absolute;
    top: 0;
    right: calc(105 / 1166 * 100%);
  }
}
.about_skill_inner {}
@media screen and (min-width: 1366px) {
  .about_skill_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.about_skill_contents {
  border-bottom: 1px dotted #8E7E67;
}
@media screen and (min-width: 1366px) {
  .about_skill_contents {
    width: calc(499 / 1166 * 100%);
  }
}
.about_skill_contents:first-of-type {
  margin-bottom: 50px;
}
.about_skill_contents h3 {
  margin-bottom: 5px;
}
.about_skill_detail {}
.strengths_deail {
  border-bottom: dotted 1px #8E7E67;
}
.about_strengths_inner {}
@media screen and (min-width: 1366px) {
  .about_strengths_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.rectangle_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 33px;
  margin-bottom: 50px;
}
@media screen and (min-width: 1366px) {
  .rectangle_wrap {
    width: calc(497 / 1173 * 100%);
    justify-content: flex-start;
  }
}
.rectangle {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-bottom-right-radius: 5px;
  width: calc(72 / 283 * 100%);
  max-width: 72px;
  min-height: 290px;
  aspect-ratio: 72 / 290;
  writing-mode: vertical-rl;
}
@media screen and (min-width: 1366px) {
  .rectangle {
    width: calc(126 / 497 * 100%);
    max-width: unset;
    aspect-ratio: 126 / 506;
  }
}
@media screen and (min-width: 1920px) {
  .rectangle {
    height: 500px;
  }
}
.rectangle.yellow {
  background-image: linear-gradient(180deg, #fffad0, #fff292);
  color: #DBC838;
}
.rectangle.green {
  background-image: linear-gradient(180deg, #e4ffd0, #aeff96);
  color: #38DB50;
  transition-delay: 1s;
}
.rectangle.blue {
  background-image: linear-gradient(180deg, #D0FCFF, #96F8FF);
  color: #38DBDB;
  transition-delay: 1.5s;
}
.rectangle h3 {
  padding-top: 20px;
  font-size: clamp(16px, 16 / 375 * 100vw, 16px);
  letter-spacing: 0.4em;
  color: #8E7E67;
}
@media screen and (min-width: 1366px) {
  .rectangle h3 {
    padding-top: 35px;
    font-size: 20px;
  }
}
@media screen and (min-width: 1920px) {
  .rectangle h3 {
    padding-top: 35px;
    font-size: 24px;
  }
}
.rectangle p {
  padding-top: 15px;
  text-align: end;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: clamp(28px, 28 / 375 * 100vw, 28px);
  line-height: 1;
}
@media screen and (min-width: 1366px) {
  .rectangle p {
    font-size: clamp(28px, 50 / 1920 * 100vw, 50px);
  }
}
@media screen and (min-width: 1920px) {
  .rectangle p {
    font-size: 50px;
  }
}
.about_strengths_txt_wrap {}
@media screen and (min-width: 1366px) {
  .about_strengths_txt_wrap {
    width: calc(506 / 1173 * 100%);
  }
}
.about_strengths_list {}
.about_strengths_list dl {
  margin-bottom: 30px;
  border-bottom: dotted 1px #8E7E67;
}
.about_strengths_list .inner {}
.about_strengths_list dl dt {}
.about_strengths_list dl dd {}
.finger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(88 / 343 * 100%);
  margin: 30px auto;
}
.finger1 {}
.finger2 {}
.about_strengths_txt {
  border-bottom: dotted 1px #8E7E67;
}
.vision_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.vision_img {
  width: 86px;
  margin-bottom: 15px;
}
@media screen and (min-width: 1366px) {
  .vision_img {
    width: 137px;
    margin: 0;
  }
}
.about_vision_contents {
  border-bottom: dotted 1px #8E7E67;
}
.highlight {
  color: #DF5959;
}
/**********************************************
	works page
***********************************************/
.works_sec {
  margin-bottom: 80px;
}
@media screen and (min-width: 960px) {
  .works_sec {
    margin-bottom: 220px;
  }
}
.works_sec li {
  margin-bottom: 80px;
}
.works_ttl {
  margin: 50px auto;
}
@media screen and (min-width: 1366px) {
  .works_ttl {
    margin: 80px auto 160px;
  }
}
.works_ttl h1 {
  font-size: clamp(16px, 16 / 375 * 100vw, 32px);
  margin-bottom: 10px;
}
@media screen and (min-width: 1366px) {
  .works_ttl h1 {
    font-size: 36px;
  }
}
.works_ttl p {}
.works_ttl a {
  font-size: clamp(12px, 12 / 375 * 100vw, 16px);
  color: #8E7E67;
  border-bottom: dotted 1px #8E7E67;
}
@media screen and (min-width: 1366px) {
  .works_ttl a {
    font-size: 16px;
  }
}
.works_img img {
  margin-bottom: 50px;
  border-radius: 3px;
}
@media screen and (min-width: 1366px) {
  .works_img img {
    margin-bottom: 160px;
  }
}
.container_works {
  width: calc(283 / 375 * 100%);
  margin: 0 auto 50px;
}
@media screen and (min-width: 1366px) {
  .container_works {
    width: calc(1241 / 1920 * 100%);
    margin: 0 auto 160px;
  }
}
.works_list {}
@media screen and (min-width: 1366px) {
  .works_list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1366px) {
  .works_list_left, .works_list_right {
    width: calc(499 / 1239 * 100%);
  }
}
.works_detail {
  margin-bottom: 30px;
}
@media screen and (min-width: 1366px) {
  .works_detail {
    margin-bottom: 80px;
  }
  .works_detail:last-of-type {
    margin-bottom: 0;
  }
}
.works_detail dt {}
.works_detail dt {
  margin: 0 0 20px 24px;
  font-size: clamp(16px, 16 / 375 * 100vw, 20px);
}
@media screen and (min-width: 1366px) {
  .works_detail dt {
    margin: 0 0 20px 27px;
    font-size: 20px;
  }
}
.works_detail dd {
  border-bottom: solid 0.5px #8E7E67;
  padding-bottom: 30px;
}
@media screen and (min-width: 1366px) {
  .works_detail dd {
    padding-bottom: 80px;
  }
}
.works_detail dd p {}
.works_number {}
.works_detail {
  position: relative;
}
.works_detail::before {
  content: "01 ";
  font-size: clamp(10px, 10 / 375 * 100vw, 13px);
  position: absolute;
  top: -5px;
  left: 0;
}
@media screen and (min-width: 960px) {
  .works_detail::before {
    font-size: 12px;
  }
}
.works_detail.target::before {
  content: "02 ";
}
.works_detail.issues::before {
  content: "03 ";
}
.works_detail.improvement::before {
  content: "04 ";
}
.works_detail.design::before {
  content: "05 ";
}
.works_detail.time::before {
  content: "06 ";
}
.works_detail.tool::before {
  content: "07 ";
}
.mockup img {
  margin-bottom: 60px;
}
@media screen and (min-width: 1366px) {
  .mockup img {
    margin-bottom: 220px;
  }
}