@charset "utf-8";
/* CSS Document */
.m-plus-1p-thin {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.m-plus-1p-light {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.m-plus-1p-black {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  font-style: normal;
}
html {
  background-color: #fff;
}
body {
  width: 100vw;
  margin: 0 auto;
  background-color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}
header {
  background-color: #EC6D1E;
  height: 100px;
}
header ul {
  display: flex;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(1.5rem, 1.221rem + 1.19vw, 2.5rem);
  color: #fff;
  margin: 0 auto 0 calc(100vw / 63);
}
header ul li {
  list-style: none;
  padding: calc(100vw / 69);
  align-items: center;
}
header ul li a {
  text-decoration: none;
  color: #fff;
}
@media (max-width:768px) {
	header {
    height: 50px;
  }
  .pc-menu {
    display: none;
  }
	
}
@media (min-width: 769px) {
  .pc-menu {
    display: block;
  }
  .sp-menu {
    display: none;
  }
}
.sp-menu__box {
  position: fixed;
  top: 9px;
  right: 20px;
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.sp-menu__box span, .sp-menu__box span:before, .sp-menu__box span:after {
  content: "";
  display: block;
  height: 3px;
  width: 33px;
  border-radius: 3px;
  background: #602134;
  position: absolute;
}
.sp-menu__box span:before {
  bottom: 10px;
}
.sp-menu__box span:after {
  top: 10px;
}
#sp-menu__check {
  display: none;
}
#sp-menu__check:checked ~ .sp-menu__box span {
  background: rgba(255, 255, 255, 0);
}
#sp-menu__check:checked ~ .sp-menu__box span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#sp-menu__check:checked ~ .sp-menu__box span::after {
  top: 0;
  transform: rotate(-45deg);
}
#sp-menu__check:checked ~ .sp-menu__content {
  right: 0;
}
.sp-menu__content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 80;
  background-color: #EC6D1E;
  transition: all 0.5s;
}
.sp-menu__list {
  display: flex;
  flex-direction: column;
  margin: auto 0;
  box-sizing: border-box;
	padding:0;
}
.sp-menu__item {
  list-style: none;
}
.sp-menu__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 36px;
  color: #ffffff;
  text-decoration: none;
  
  padding: 20px 0;
  text-align: center;
}
.top {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: #EC6D1E;
  padding-top: 5%;
  display: flex;
  flex-direction: column;
  position: relative;
}
h1 {
  width: clamp(20rem, 15.731rem + 18.22vw, 35.313rem);
  height: clamp(13.813rem, 10.99rem + 12.04vw, 23.938rem);
  position: relative;
  display: block;
  align-content: center;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #000;
  font-size: clamp(1.5rem, 1.221rem + 1.19vw, 2.5rem);
  text-align: center;
  line-height: 3rem;
}
h1:before {
  content: "";
  position: absolute;
  border: 35px solid transparent;
  border-top: 35px solid #fff;
  bottom: -65px;
  left: 50%;
  margin-left: -35px;
}
.top_head img {
  width: clamp(22.563rem, 21.622rem + 5.01vw, 25.938rem);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media(max-width:767px){
	.top{
		height: calc(100vh - 50px);
		padding-top: 35%;
	}
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ec6d1e;
  font-size: clamp(0.938rem, 0.781rem + 0.67vw, 1.5rem);
  font-weight: 400;
}
h3::before, h3::after {
  content: '';
  width: 3px;
  height: 40px;
  background-color: #ec6d1e;
}
h3::before {
  margin-right: 10px;
  transform: rotate(-30deg)
}
h3::after {
  margin-left: 10px;
  transform: rotate(30deg)
}
h2 {
  display: block;
  color: #ec6d1e;
  font-size: clamp(2.188rem, 1.961rem + 0.97vw, 3rem);
  font-weight: 900;
  margin-block-start: 0;
  margin-block-end: 0;
}
.skill {
  margin-bottom: calc(10vw*0.6);
}
.skill_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.skillh3h2 {
  margin: calc(10vw*0.5) auto calc(10vw*0.5);
}
.particles_pcsp, .particles_pc {
  width: 31%;
  height: 100%;
}
.particles_sp {
  display: none;
}
.skill_subtitle {
  padding: 10px;
  width: calc(100vw / 4.1);
  margin: 0 auto 15px;
  color: #fff;
  font-size: clamp(1.5rem, 1.361rem + 0.59vw, 2rem);
  font-weight: 600;
  background-color: #ec6d1e;
  border-radius: 50px;
  text-align: center;
  z-index: 2;
}
.skill_design_translation {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  width: 100%;
}
.skill_design {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: calc(100vw / 2.6);
  padding: 0 0 45px;
  margin: 0 3vw;
}
.skill_design::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 100%;
  height: 95%;
  border: 3px solid #999;
  border-radius: 20px;
  z-index: 1;
}
.skill_design_img {
  width: 100%;
  margin-top: 10px;
  padding: 0 35px;
}
.skill_translation {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  width: calc(100vw / 2.6);
  padding-bottom: 60px;
  margin: 0 3vw;
  z-index: 2;
}
.skill_translation_globe {
  width: calc(100vw / 15.9);
}
.skill_translation_papers {
  display: flex;
  margin-top: 35px;
}
.skill_translation_J {
  display: block;
  background-image: url("../image/paper.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: calc(100vw / 8.6);
  height: calc(100vw / 7.2);
  font-size: clamp(1rem, 0.895rem + 0.45vw, 1.375rem);
  text-align: center;
  padding-top: calc(100vw / 17);
}
.skill_translation_arrow_yellow {
  width: calc(100vw / 22);
  margin: 0 10px;
}
.skill_translation_E {
  display: block;
  background-image: url("../image/paper_check.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: calc(100vw / 8.6);
  height: calc(100vw / 7.2);
  font-size: clamp(0.813rem, 0.656rem + 0.67vw, 1.375rem);
  text-align: center;
  padding-top: calc(100vw / 17);
}
.skill_translation::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 100%;
  height: 95%;
  border: 3px solid #999;
  border-radius: 20px;
  z-index: 1;
}
@media(max-width:767px) {
  .skill {
    display: flex;
    flex-direction: column;
  }
  .skill_title {
    display: flex;
    flex-direction: column;
  }
  .particles_pcsp {
    width: 100%;
  }
  .particles_pc {
    display: none;
  }
  .particles_sp {
    display: block;
  }
  .skill_design_translation {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .skill_subtitle {
    width: calc(100vw / 1.1);
    font-size: 24px;
    margin-bottom: 40px;
  }
  .skill_design, .skill_translation {
    width: calc(100% - 20px);
  }
  .skill_design::after, .skill_translation::after {
    display: none;
  }
  .skill_translation_J, .skill_translation_E {
    width: calc(100vw / 3);
    height: calc(100vw / 3);
    padding-top: calc(100vw / 7);
  }
  .skill_translation_globe, .skill_translation_arrow_yellow {
    width: calc(100vw / 6);
  }
}
.design {
  width: 100%;
  height: auto;
  background-color: #00ADA9;
  background-image: url("../image/cloud.svg"), url("../image/cloud.svg"), url("../image/cloud.svg"), url("../image/cloud.svg"), url("../image/cloud.svg"), url("../image/cloud.svg");
  background-size: auto;
  background-position: -5% 0%, 97% 20%, 3% 40%, 107% 60%, -5% 80%, 97% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: border-box;
  padding-bottom: clamp(1.875rem, -0.739rem + 11.15vw, 11.25rem);
}
.design h2, .design h3 {
  color: #fff;
  width: 100%;
  text-align: center;
  position: absolute;
}
.design h2 {
  top: 146px;
}
.design h3 {
  top: 88px;
}
.design h3::before, .design h3::after {
  background-color: #fff;
}
.design_title {
  display: flex;
  width: 100%;
  height: 320px;
  position: relative;
}
.design_airplane_pc {
  position: absolute;
  bottom: 15%;
  right: 0;
  width: 80%;
}
.design_airplane_sp {
  display: none;
}
.design_steps {
  width: 85%;
  margin: 0 auto;
  padding: 5%;
  background-color: #fff;
  border-radius: 30px;
}
.design_step01, .design_step02, .design_step03, .design_step04, .design_step05 {
  display: inline-flex;
  width: 100%;
  margin-bottom: 3%;
  position: relative;
  justify-content: space-around;
}
.design_number_pc {
  width: clamp(3rem, 1.39rem + 3.36vw, 5rem);
  height: clamp(3rem, 1.39rem + 3.36vw, 5rem);
  background-color: #EC6D1E;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  font-size: clamp(0.625rem, 0.323rem + 0.63vw, 1rem);
  font-weight: 900;
  line-height: 1.1;
  z-index: 2;
}
.design_number_pc span {
  font-size: clamp(1.188rem, 0.534rem + 1.36vw, 2rem);
}
.design_steps_EC {
  width: 50%;
  position: relative;
  z-index: 1;
}
.design_steps_ECimage {
  position: absolute;
  max-width: 80%;
  top: clamp(1.125rem, 0.521rem + 1.26vw, 1.875rem);
  left: clamp(1.125rem, 0.521rem + 1.26vw, 1.875rem);
}
.design_steps_ECtext {
  max-width: 80%;
  margin: 180px 0 0 auto;
  padding: clamp(0.625rem, 0.122rem + 1.05vw, 1.25rem);
  border: solid 8px;
  border-color: #00ADA9;
  border-radius: 30px;
  background-color: rgb(255 255 255 / 80%);
  position: relative;
}
.greentext {
  color: #00ADA9;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.design_steps_content {
  width: 50%;
  margin-right: 0;
  padding-top: 1%;
  padding-left: 1%;
  position: relative;
}
.design_steps_text {
  display: flex;
  flex-direction: column;
  width: 87%;
  margin: 0 0 0 auto;
  line-height: 2;
}
.design_steps_title {
	margin: 0;
  color: #00ADA9;
  font-size: clamp(2.188rem, 1.961rem + 0.97vw, 3rem);
  font-weight: 900;
	line-height: 1;
}
.design_steps_title_05pc {
  font-size: clamp(1.75rem, 0.744rem + 2.1vw, 3rem);
}
.design_steps_title_05sp {
  display: none;
}
.design_steps_orange {
  display: flex;
}
.design_steps_horn {
  margin-right: 3%;
}
.design_steps_horn img {
  width: 50px;
}
.design_steps_orangeback {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #EC6D1E;
  color: #fff;
  text-align: left;
  margin-top: 20px;
  padding: 15px 30px;
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  font-weight: 500;
}
.design_steps_orangeback::before, .design_steps_orangeback::after {
  content: '';
  width: 3px;
  height: 30px;
	border-radius: 3px;
  background-color: #fff;
}
.design_steps_orangeback::before {
  margin-right: 15px;
  transform: rotate(-30deg)
}
.design_steps_orangeback::after {
  margin-left: 15px;
  transform: rotate(30deg);
}
@media(max-width:767px) {
  .design {
    background-image: url("../image/cloud_sp.png"), url("../image/cloud_sp.png"), url("../image/cloud_sp.png"), url("../image/cloud_sp.png"), url("../image/cloud_sp.png"), url("../image/cloud_sp.png");
    background-size: auto;
    background-position: -20% -5%, 130% 20%, -5% 45%, 115% 70%, -5% 95%, ;
  }
  .design_title {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
  }
  .design h2 {
    top: 195px;
  }
  .design h3 {
    top: 138px;
  }
  .design_airplane_pc {
    display: none;
  }
  .design_airplane_sp {
    display: block;
    position: absolute;
    top: 10%;
    right: 5%;
  }
  .design_steps {
    padding: 5% 5% 10%;
  }
  .design_step01, .design_step02, .design_step03, .design_step04, .design_step05 {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    position: relative;
    justify-content: center;
    margin: 3% auto 0;
  }
  .design_steps_title {
    text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff;
    z-index: 3;
    padding: 10px 0 0 45px;
  }
  .design_steps_title_05pc {
    display: none;
  }
  .design_steps_title_05sp {
    display: block;
    line-height: 40px;
    padding: 0px 0 0 45px;
  }
  .design_steps_EC {
    width: 100%;
  }
  .design_steps_ECimage {
    position: relative;
    max-width: 100%;
    display: block;
    top: 0;
    left: 0;
    margin: 0 auto;
  }
  .design_steps_ECtext {
    max-width: 100%;
    padding: clamp(0.625rem, 0.122rem + 1.05vw, 1.25rem);
    border: none;
    top: 0;
    left: 0;
    position: relative;
    margin: 25px auto 0;
  }
  .design_steps_orangeback {
    width: 100%;
    padding: 10px 30px;
    display: flex;
    margin: 45px 4%;
    align-items: center;
    justify-content: center;
  }
  .design_steps_content {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 0;
    padding-left: 0;
    position: relative;
  }
  .design_steps_horn {
    display: none;
  }
  .design_steps_text {
    width: 100%;
  }
}
.dot {
  display: flex;
  flex-direction: column;
  color: #EC6D1E;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  justify-content: center;
}
.arrow {
  width: 50px; /* 適当な箱を作るための幅 */
  height: 50px; /* 適当な箱を作るための高さ */
  margin: 10px auto;
  position: relative; /* 基準位置とする */
}
.arrow::before, .arrow::after {
  content: ""; /* 疑似要素に指定必須 */
  width: 29px; /* 線の長さを指定 */
  height: 8px; /* 線の幅を指定 */
  display: inline-flex; /* インラインブロックにする */
  border-radius: 5px; /* 線を角丸にする */
  background: #EC6D1E; /* 線の色を指定 */
  position: absolute; /* 相対位置に指定 */
  right: 10px; /* 右から10pxの位置に配置 */
}
.arrow::before {
  right: 37%;
  top: 0;
  transform: rotate(50deg); /* 45度回転させる */
}
.arrow::after {
  left: 37%;
  top: 0;
  transform: rotate(-50deg); /* -45度回転させる */
}
.about {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: clamp(4.375rem, 4.026rem + 1.49vw, 5.625rem) 0 clamp(6.25rem, 5.901rem + 1.49vw, 7.5rem);
}
.about_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: clamp(2.5rem, 1.977rem + 2.23vw, 4.375rem) clamp(4.375rem, -8.703rem + 27.28vw, 20.625rem) clamp(4.375rem, 3.852rem + 2.23vw, 6.25rem);
}
.about_image {
  width: 40%;
  padding-right: 7%;
}
.about_image img {
  width: 100%;
}
.about_text {
  width: 60%;
	padding-left:7%;
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  line-height: 2;
  font-weight: 400;
}
.about_girls ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}
.about_girls ul li img {
  width: auto;
  height: 140px;
}
@media(max-width:767px) {
  .about_content {
    flex-direction: column;
    text-align: center;
    margin: clamp(2.5rem, 1.977rem + 2.23vw, 4.375rem) 5% clamp(4.375rem, 3.852rem + 2.23vw, 6.25rem);
  }
  .about_image {
    width: 100%;
    padding-right: 0;
  }
  .about_image img {
    width: 320px;
    right: 0;
  }
  .about_text {
    width: 90%;
    text-align: start;
    padding-top: 50px;
  }
  .about_girls ul {
    padding: 0;
    margin: 0;
  }
  .about_girls ul :nth-child(n+4) {
    display: none;
  }
}
.contact {
  width: 100%;
  height: auto;
  background-color: #EC6D1E;
  margin: 0 auto;
  padding: 5% 0;
}
.contact h2, .contact h3 {
  color: #fff;
  width: 100%;
  text-align: center;
}
.contact h3::before, .contact h3::after {
  background-color: #fff;
}
.contact_content {
  width: 75%;
  margin: 3% auto 0;
  padding: 5% 8%;
  background-color: #fff;
  border-radius: 30px;
}
.contact_line {
  display: flex;
  width: 100%;
  margin-bottom: 60px;
  margin-top: 30px;
}
.contact_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  font-weight: 400;
  width: 30%;
}
.contact_name {
  display: inline-flex;
  justify-content: space-between;
  width: 70%;
}
.contact_name input {
  margin-left: 10px;
}
.contact_name input:first-child {
  margin-right: 10px;
}
.contact_mail {
  width: 70%;
}
.contact_textarea_title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 7px;
  padding-right: 20px;
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  font-weight: 400;
  width: 30%;
}
.contact_textarea {
  width: 70%;
  height: 480px;
}
.contact_name input, .contact_mail, textarea {
  width: 100%;
  display: block;
  padding: 15px;
  border: 1px solid #000;
}
.contact_mail{
	width: 70%;
}
textarea {
  height: 480px;
}
.button {
  display: block;
  margin: 70px auto 0;
  padding: 20px 80px;
  font-size: 24px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  color: #fff;
  background-color: #EC6D1E;
}
@media(max-width:767px) {
  .contact_content {
    width: 91%;
  }
  .contact_line {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-bottom: 10px;
  }
  .contact_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
  .contact_title, .contact_textarea_title {
    margin-bottom: 0;
  }
  .contact_name, .contact_mail, .contact_textarea, .contact_textarea_title {
    width: 100%;
  }
}
footer {
  width: 100%;
  height: auto;
  background-color: #EC6D1E;
  margin: 0 auto;
  padding: 1% 10%;
}
footer ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  color: #fff;
  text-align: center;
  font-size: clamp(1.5rem, 1.221rem + 1.19vw, 2.5rem);
  font-weight: 900;
  margin: 0;
}
footer ul li a {
  text-decoration: none;
  color: #fff;
}
@media(max-width:767px) {
  footer {
    padding: 70px 0 40px;
  }
  footer ul {
    flex-direction: column;
    padding: 0;
  }
}
.copyright {
  background-color: #EC6D1E;
  margin: 0 auto;
  padding: 1% 10%;
  color: #fff;
  text-align: center;
  font-size: 16px;
}