@charset "UTF-8";

html {
  font-size: 100%;
}
/*
フッターを画面下に配置するために、
「position: relative;」を設定
「min-height」で最小の高さを画面の高さにあわせる
*/
body 
{
  position: relative;
}
img 
{
  max-width: 100%;
}
li 
{
  list-style: none;
}
p
{
  font-size: 16px;
  line-height: 2;
}
p.caption
{
  color: #8a8a8a;
  text-align:center;
}
h1
{
  color:#ffd966;
  font-size:24px;
  font-weight:bold;
  text-align:center;
}
h2
{
  font-size:22px;
  font-weight: bold;
  margin-bottom: 20px;
}
h3
{
  font-size:20px;
  font-weight: bold;
}
h4
{
  font-size:18px;
  font-weight:normal;
}
a:hover
{
  opacity: 0.7;
}
.button
{
  display:block;
  font-size:18px;
  font-weight: bold;
  text-decoration: none;  
  text-align: center;
  color:#000;
  cursor:pointer;
  line-height: 4;
}
.button::before
{
  background: linear-gradient(to left,#ffd966, #ffccaa);  
}

.right-arrow, .right-arrow::before
{
  position:absolute;
  content:"";
  width:8px;
  height:2px;
  top: 30px;
  right: 10px;
  background-color: #ffffff;
}
.right-arrow
{
  transform: translateX(0px) translateY(0px) rotate(45deg);
}
.right-arrow::before
{
  transform: translateX(14px) translateY(-26px) rotate(-90deg);
}
.container
{
  max-width: 1100px;
  padding: 0 30px 0 30px;
  margin: 0 auto 0 auto;
}
section
{
  margin-bottom:150px;
}
/*Single page*/
.singlepage
{
  padding: 32px 0 100px 0;
}
.page-title
{
  margin-bottom:30px;
  font-weight:normal;
  font-size:25px;
}
.page-menu
{
  position:relative;
  width:100%;
  border-bottom:1px solid #ccc;
  z-index: 2;
}
.page-menu p
{
  display: block;
}
.page-menu p a
{
  height:100%;
  color: #555;
  text-decoration: none;
  border-bottom:none;
}
.page-menu p a:hover
{
  text-decoration: underline;
  text-underline-offset: 9px;
}

/*Header*/
header 
{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100px;
  z-index:2;
}
.logo
{
  width:auto;
  height:100%;
  padding:5px 0 5px 0;
  margin:0 0 0 20px;
}
.p-catchcopy
{
  position: absolute;
  top: calc(50vh - 64px);
  left: calc(50vw - 308px);
  font-size: 50px;
  font-weight: bold;
  line-height: 1.1;
  z-index: 10;
}
header nav
{
  position: absolute;
  top:0px;
  right:200px;
  width: 600px;
  z-index: 1;
  overflow-y: hidden;
} 
header nav ul
{
  padding-top: 20px;
  margin: 0px 0px 0px 0px;
  display: flex;
}
header nav ul li 
{
  position:relative;
  width:auto;
  padding:6px 32px 6px 14px;
}
header nav ul li .button
{
  font-weight: normal;
}
header nav ul li:before, header nav ul li:after
{
  position:absolute;
  content:"";
  width:10px;
  height:2px;
  top: 17px;
  left:0px;
  background-color: #ffaa33;
}
header nav ul li:before
{
  transform: translateY(-3px) rotate(45deg);
}
header nav ul li:after
{
  transform: translateY(3px) rotate(-45deg);
}
header nav ul li .button
{
  line-height:1.5;
}
header nav.fixed-bar
{
  position: fixed;
  left: 0;
  top: -60px;
  width: 100vw;
  background-color: #fff;
  box-shadow: 0px 0px 6px #555;  
  z-index: 1;
}
header nav.fixed-bar ul 
{
  justify-content: space-evenly;
  padding-top: 10px;
  padding-bottom: 10px;
}
.contact-button
{
  position:absolute;
  width:200px;
  height:70px;
  top:8px;
  right:8px;
  border:1px solid #ffaa33;
  color:#fff;
}
.contact-button::before
{
  position:absolute;
  content:"";
  width:190px;
  height:60px;
  top:12px;
  left:5px;
  z-index:-1;
}
.contact-button:hover::before
{
  opacity: 0.7;
}

/*Main*/
main
{
  background-image: url("img/background-6360861_1280.png");
  background-attachment: fixed;
  background-size: cover;
}
main .button
{
  display: block;
  position:relative;
  width:300px;
  height:70px;
  margin: 0 auto;
  border:1px solid #ffaa33;
  color:#fff;
}
main .button::before
{
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  top:6px;
  left:6px;
  z-index:-1;
}
main .button:hover::before
{
  opacity: 0.7;
}
.slicked
{
  overflow-x: hidden;
}
.hero .slicked img
{
  width:100%;
  height:100vh;
  z-index: -1;
  margin-bottom:100px;
  object-fit: cover;
  opacity: 0.4;
}
.hero-page .slicked img
{
  height:80vh;
  object-position: top;
}
img.hero-left-logo
{
  position: absolute;
  top: 85vh;
  left:10vw;
  width:25vw;
  z-index: 1;
}
#about
{
  width: 100%;
  height: auto;
}
.origins
{
  display: flex;
  justify-content:center;
  width:100%;
  margin:100px 0 150px 0;
}
.origins div
{
  width:400px;
}
.origins div h2
{
  font-size:36px;
  font-weight: normal;
  text-align:center;
}
.origins div p
{
  text-align:center;
}
.orange-colored
{
  color:#ff780d;
}
.pink-colored
{
  color:#ffd966;
}
/*work*/
.work-details
{
  display: flex;
  justify-content: space-between;
  margin: 80px 0 55px 0;
}
.work-details div
{
  width:45%;
}
.work-details div h2
{
  text-align: center;
  font-size: 32px;
  font-weight: normal;
}
.work-details div p
{
  text-align: center;
}
.work-details img
{  
  width:45%;
  height:auto;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0px 2px 8px #888;
  object-fit: contain;
}
/*Topcis*/
#topics
{
  height:100%;
}
.logoset-topics
{
  width:150px;
  height:auto;
}
.logoset-topics img
{
  margin-bottom:20px;
}
.topics-company, .topics-recruit
{
  display:block;
  width:50%;
  padding:15% 0 15% 0;
  background-color: #ffaa33;
  text-decoration: none;
}
.topics-company:hover, .topics-recruit:hover
{
  filter: brightness(1.5);
}
.topics-company h2, .topics-recruit h2, .topics-company p, .topics-recruit p
{
  text-align: center;
  color: #fff;
}
.topics-recruit
{
  margin-left:50%;
}
/*Contact*/
#contact
{
  text-align: center;
}
.description-contact
{
  margin: 20px auto;
}

/*Footer*/
footer
{
  width:100%;
  background-color: #ccc; 
}
footer .container
{
  display:flex;
}
.footer-logoset
{
  display: flex;
  flex-direction: column;
  width:250px;
}
.footer-logoset p
{
  line-height:1.25;
  text-align: center;
}
footer ul
{
  margin:auto 0 0 150px;
}
.footer-menu
{
  display: flex;
  margin-left:100px;
}
.footer-menu ul
{
  margin: 100px 0 0 80px;
}
.footer-menu ul li
{
  position:relative;
  margin-bottom:20px;
  font-weight:bold;
}
.footer-menu ul li a
{
  color:#000;
  font-weight:bold;
  text-decoration: none;
}
.footer-menu ul li::before, .footer-menu ul li::after
{
  position:absolute;
  content:"";
  width:8px;
  height:2px;
  top: 30px;
  left:-30px;
  background-color: #ffaa33;
}
.footer-menu ul li::before
{
  transform: translateX(14px) translateY(-24px) rotate(45deg);
}
.footer-menu ul li::after
{
  transform: translateX(14px) translateY(-18px) rotate(-45deg);
}
.footer-menu ul li.dotted
{
  margin-left:25px;
}
.footer-menu ul li.dotted::before
{
  display: none;
}
.footer-menu ul li.dotted::after
{
  position:absolute;
  content:"";
  width:4px;
  height:4px;
  border-radius: 50%;
  top: 27px;
  left:-30px;
  background-color: #ffaa33;
}
small
{
  display: block;
  padding:16px;
  margin-top: 80px;
  text-align: center;  
  letter-spacing: 3px;
  background-color:#fff;
}

/*Others*/
.mob-only
{
  display: none;
}

/*Missions and visions*/
#misvis
{
  width:100%;
  height:550px;
}
#misvis .misvis-container
{
  position:relative;
  display:flex;
  margin:30px auto 0 auto;
  width:100%;
  max-width:820px;
}
#misvis .misvis-container h2
{
  font-size:36px;
  font-weight: normal;
  text-align:center;
}
#misvis .misvis-container .misvis-container-item-pink, .misvis-container-item-orange
{
  position:absolute;
  width:450px;
  height:450px;
  border-radius:50%;
}
#misvis .misvis-container p
{
  font-size: 30px;
  text-align:center;
}
#misvis .misvis-container h2
{
  font-size:50px;
  margin-top:50px;
  margin-bottom:0;
}
.misvis-container-item-pink
{
  top:0;
  left:0;
  border:30px solid #ffd966aa;
}
.misvis-container-item-pink h2
{
  color: #ffd966;
}
.misvis-container-item-orange
{
  top:0;
  right:0;
  border:30px solid #fccaa1aa;
}
.misvis-container-item-orange h2
{
  color: #fccaa1;
}

/*Vision and credo*/
#vandc
{
  width:100%;
  height:850px;
}
#vandc .vandc-container
{
  display:flex;
  justify-content:center;
  margin:30px auto 0 auto;
  width:100%;
  gap:30px;
}
#vandc .vandc-container h2
{
  font-size: 50px;
  font-weight:normal;
  margin-bottom:0;
}
#vandc .vandc-container ul li
{
  list-style: disc;
  font-size: 25px;
}
#vandc .vandc-container .vandc-container-item-credo, #vandc .vandc-container .vandc-container-item-value
{
  width:50%;
  padding:40px;
}
#vandc .vandc-container .vandc-container-item-value
{
  position:relative;
  padding:80px;
  border-radius:8px;
  background: linear-gradient(to right top, #a691d9,#ebe2ff);

  z-index:1;
}
#vandc .vandc-container .vandc-container-item-value::before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  margin:20px;
  border-radius:4px;
  background-color:#fff;

  z-index:2;
}
#vandc .vandc-container .vandc-container-item-value h2
{
  position:relative;
  color: #a691d9;
  
  z-index:3;
}
#vandc .vandc-container .vandc-container-item-value ul
{
  display:flex;
  flex-direction: column;
  gap:25px;
}
#vandc .vandc-container .vandc-container-item-value li
{
  position:relative;

  z-index:3;
}
#vandc .vandc-container .vandc-container-item-value ul li::marker
{
  color:#a691d9;
}
#vandc .vandc-container .vandc-container-item-credo
{
  position:relative;
  padding:70px;
  background: linear-gradient(to right top, #99beed ,#deddfc);
  border-radius:8px;
  z-index:1;
}
#vandc .vandc-container .vandc-container-item-credo::before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  margin:20px;
  border-radius:4px;
  background-color:#fff;

  z-index:2;
}
#vandc .vandc-container .vandc-container-item-credo h2
{
  position:relative;
  color:#99beed;
  z-index:3;
}
#vandc .vandc-container .vandc-container-item-credo li
{
  position:relative;

  z-index:3;
}
#vandc .vandc-container .vandc-container-item-credo ul li::marker
{
  color:#99beed;
}
#vandc .vandc-container .vandc-container-item-credo ul
{
  display:grid;
  width:auto;
  height:auto;
  grid-template-columns: 0.5fr 0.5fr;
  grid-template-rows: 0.25fr 0.25fr 0.25fr 0.25fr;
  grid-template-areas: 
    "areaA areaA"
    "areaB areaB"
    "areaC areaD"
    "areaE areaF";
  gap:25px;
}
#itemA
{
  grid-area: areaA;
}
#itemB
{
  grid-area: areaB;
}
#itemC
{
  grid-area: areaC;
}
#itemD
{
  grid-area: areaD;
}
#itemE
{
  grid-area: areaE;
}
#itemF
{
  grid-area: areaF;
}

/*Coming soon*/
.comingsoon
{
  display:flex;
  justify-content: space-evenly;
  width:100%;
  margin-bottom:32px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.comingsoon li
{
  padding:30px;
}

/*Company*/
#company dl
{
  display:grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto auto auto auto auto auto;
  width:100%;
}
#company dl p
{
  font-weight:bold;
}
#company dl dt
{
  position:relative;
  padding:32px 32px 32px 100px;
}
#company dl dt::before
{
  position:absolute;
  content:"";
  top:0;
  left:0;
  width:200%;
  height:100%;
  border-top:1px dashed #ffaa33;
}
#company dl dt:first-of-type::before
{
  border-top:none;
}
#company dl dd
{
  padding:32px 32px 32px 0;
  position:relative;
}

/*Contact*/
.contact-flow
{
  display: flex;
  flex-direction: row-reverse;
  width:100%;
  margin:30px 0 30px 0;
}
.contact-flow li
{
  position:relative;
  width:33.3%;
  height:70px;
  line-height:4.5;
  z-index:1;
}
.contact-flow li::before
{
  content:"";
  position:absolute;
  width:110%;
  height:70px;
  top:0;
  left:0;
  overflow: visible;
  clip-path: polygon(0% 0%,90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
  background-color: #ddd;
  z-index:-1;
}
.contact-flow li.flow-current-phase
{
  color:#fff;
}
.contact-flow li.flow-current-phase::before
{
  background-color: #fca1c8;
}
.contact-flow li:last-child::before
{
  clip-path: polygon(0% 0%,90% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 50%);
}
.contact-flow li:first-child::before
{
  clip-path: polygon(0% 0%,80% 0%, 90% 50%, 80% 100%, 0% 100%, 10% 50%);
}

/*clip-path: polygon(0% 0%,90% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 50%);*/
.table-contact
{
  width:100%;
  margin: 0 auto 0 auto;
  max-width:800px;
}
.table-contact tbody tr
{
  position: relative;
  text-align: left;
}
.table-contact tbody tr::before
{
  content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-top: 1px dashed #aaa;
}
.table-contact tbody tr:first-child::before
{
  border-top: 0px dashed #aaa;
}
.table-contact tbody tr th
{
  text-align: left;
  vertical-align: baseline;
  width:300px;
  padding:32px 0 0 0;
}
.table-contact tbody tr td
{
  position: relative;
  padding:32px 0 32px 0;
}
.table-contact tbody tr span.required
{
  position: absolute;
  display:block;
  top: 32px;
  left: 180px;
  font-weight: bold;
  color:#ffaa33;
}
.table-contact tbody tr span.required::before
{
  content:"";
  position: absolute;
  width:50px;
  height:30px;
  top:0px;
  left:-8px;
  border:1px solid #ffaa33;
  border-radius: 4px; 
}
.table-contact tbody tr td input
{
  padding: 4px;
  border: 1px solid #aaa
}
.table-contact tbody tr td input.wpcf7-validates-as-required
{
  background-color: #FEE;
}
.table-contact tbody tr td textarea
{
  width:100%;
  height:220px;
  padding: 4px;
  border: 1px solid #aaa;
  background-color: #FEE;
}
.wpcf7-tel
{
  width:120px;
}
.tel-bar
{
  margin: 0 10px 0 10px;
}
.table-contact .wpcf7-radio
{
  display:flex;
  flex-direction: column;
}
input[type="radio"]
{
  display: none;
}
.wpcf7-list-item-label
{
  position:relative;
  cursor:pointer;
  margin-left:14px;
  text-align: left;
}
.wpcf7-list-item-label::before
{
  content: '';
  position:absolute;
  top:0px;
  left:-30px;
  width:20px;
  height:20px;
  border-radius:50%;
  border: 2px solid #888;
  background-color: #fff;
}
input[type="radio"]:checked + .wpcf7-list-item-label::after
{
  content: '';
  position:absolute;
  top:4px;
  left:-26px;
  width:12px;
  height:12px;
  border-radius:50%;
  background-color: #555;
}
main .button.wide-button
{
  width:450px;
}

/*Recruite General*/
#message-from-company h2, #message-from-collegues h2, #about-working-space h2, #about-job-seleciton h2,
 #message-from-company h3, #message-from-collegues h3, #about-working-space h3, #about-job-seleciton h3
{
  text-align: center;
  font-weight:normal;
}
#message-from-company h3, #message-from-collegues h3, #about-working-space h3, #about-job-seleciton h3
{
  color:#ffd966;
}
/* Recruite-Message*/
#message-from-company
{
  position:relative;
  padding:80px 30px 80px 30px;
  margin-top:30px;
  border-radius:8px;
  background: linear-gradient(to left bottom,#ffd966, #ffccaa);

  z-index:1;
}
#message-from-company::before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  margin:20px;
  border-radius:4px;
  background-color:#fff;

  z-index:2;
}
#message-from-company *
{
  position:relative;  
  z-index:3;
}
#message-from-company h3
{
  margin-bottom:20px;
}
.list-concepts
{
  margin:20px 0 80px 0;
}
#message-from-company ul li
{
  position:relative;
  text-align:center;
  margin-bottom:20px;
}
.list-style-pink-dot li p
{
  position:relative;
}
.list-style-pink-dot li p::before
{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  margin-left:-30px;
  top:3px;
  background-color:#ffaa33;
  border-radius: 50%;
}
.unique-methods
{
  display:flex;
  justify-content:space-between;
}
.unique-methods li
{
  width:300px;
  height:auto;
}
.unique-methods h2
{
  margin: 10px 0 10px 0;
}

/*Recruite-Messages*/
.collegue-message-container, 
  .collegue-message-container-reverse
{
  display:flex;
  justify-content: space-between;
}
#message-from-collegues .collegue-message-container h3,
  #message-from-collegues .collegue-message-container-reverse h3
{
  text-align: left;
  justify-content: space-between;
}
.collegue-message-container img, 
  .collegue-message-container-reverse img
{
  width:20%;
  height:20%;
}
.collegue-message-container div *,
.collegue-message-container-reverse div *
{
  position:relative;
  z-index:3;
}
.collegue-message-container-reverse
{
  flex-direction: row-reverse;
}
.collegue-single-message
{
  position:relative;
  width:70%;
  padding:40px 40px 40px 40px;
  margin-bottom:50px;
  border-radius:8px;
  background: linear-gradient(to left,#ffd966, #ffccaa);

  z-index:1;
}
.collegue-single-message::before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  margin:5px;
  border-radius:4px;
  background-color:#fff;

  z-index:2;
}
#message-from-collegues .collegue-single-message h3
{
  font-size: 25px;
  margin-bottom:20px;
}
.collegue-arrow
{
  position:absolute;
  top:10px;
  left:-65px;
}
.collegue-arrow::before
{
  content:"";
  position:absolute;
  width:30px;
  height:41px;
  background-color: #ffccaa;
  z-index:3;
  clip-path: polygon(0% 50%,100% 0%, 100% 100%);
}
.collegue-arrow::after
{
  content:"";
  position:absolute;
  width:23px;
  height:30px;
  top:5px;
  left:11px;
  background-color: #fff;
  z-index:3;
  clip-path: polygon(0% 50%,100% 0%, 100% 100%);
}
.collegue-message-container-reverse .collegue-arrow
{
  position:absolute;
  top:80px;
  right:-28px;
  transform: rotate(180deg);
}
.collegue-message-container-reverse .collegue-arrow::before
{
  background-color: #ffd966;
}
/*Recruite Working Space*/
#about-working-space
{
  position:relative;
  padding:80px 30px 80px 30px;
  margin-top:30px;
  border-radius:8px;
  background: linear-gradient(to left bottom,#ffd966, #ffccaa);

  z-index:1;
}
#about-working-space::before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:calc(100% - 40px);
  height:calc(100% - 40px);
  margin:20px;
  border-radius:4px;
  background-color:#fff;

  z-index:2;
}
#about-working-space *
{
  position:relative;
  font-size:24px;
  text-align: center;
  z-index:3;
}
/*Recruite-Selection*/
#about-job-selection h2
{
  text-align: center;
}
#about-job-selection ul
{
  display:flex;
  justify-content: space-between;
  gap:20px;
}
#about-job-selection p
{
  font-size:18px;
  text-align: center;
}
#about-job-selection p.job-selection-tips
{
  margin-top:-10px;
  font-size:12px;
}

/*Mobile*/
@media screen and (max-width: 900px) 
{
  .mob-only
  {
    display:initial;
  }
  .pc-only
  {
    display:none;
  }
  .container
  {
    max-width: none;
    margin: 0 auto;
  }
  p
  {
    font-size:14px;
  }
  .button
  {
    font-size:14px;
  }
  h2
  {
    font-size:26px;
  }
  .right-arrow
  {
    transform: translateX(0px) translateY(-7px) rotate(45deg);
  }

  /*Header*/
  header
  {
    display: initial;
    height:50px;
  }
  header nav
  {
    position:fixed;
    width: 100vw;
    height: 100vh;
    top:0vh;
    left:100vw;
    background: linear-gradient(to left bottom,#ffd966, #ffccaa);
    z-index: 1;
  }
  header nav ul
  {
    margin: 30px 30px 0px 100px;
    flex-direction: column;
  }
  header nav ul li
  {
    width:100%;
    text-align: left;
    margin-bottom:10px;
  }
  header nav ul li .button
  {
    color: #555;
    text-align: left;
  }
  header nav ul li:before, header nav ul li:after
  {
    background-color: #555;
  }
  header nav ul li.dotted:before
  {
    display:none;
  }
  header nav ul li.dotted:after
  {
    position:absolute;
    content:"";
    width:4px;
    height:4px;
    top: 16px;
    left:6px;
    border-radius: 50%;
    background-color: #555;
    transform: translateY(0) rotate(0);
  }
  .logo-nav
  {
    width:80px;
    margin: 10px;
  }
  .logo
  {
    width:auto;
    height:50px;
    margin:0 0 0 10px;
  }
  .hamburger-bg
  {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    background: linear-gradient(to left bottom,#ffd966, #ffccaa);
    z-index: 0;
  }
  .hamburger
  {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    z-index: 2;
  }
  .hamburger::before, .hamburger span, .hamburger::after
  {
    content: '';
    position: absolute;
    left: 14px;
    width: 23px;
    height: 10px;
    border-bottom: 2px solid #fff;
    transition: all 0.3s;
  }
  .hamburger::before
  {
    transform:translateY(4px);
  }
  .hamburger span
  {
    transform:translateY(14px);
  }
  .hamburger::after
  {
    transform: translateY(24px);
  }

  .hamburger.open::before
  {
    transform: translateY(16px) translateX(-3px) rotate(-45deg);
  }
  .hamburger.open span
  {
    display: none;
  }
  .hamburger.open::after
  {
    transform:translateY(16px) translateX(3px) rotate(45deg);
  }

  .contact-button
  {
    display: none;
  }
  img.hero-left-logo
  {
    position: absolute;
    top:82vh;
    left:1vw;
    width:45vw;
    z-index: 1;
  }
  .p-catchcopy
  {
    top: calc(50vh - 64px);
    left: calc(50vw - 128px);
    font-size: 20px;
    line-height: 1.1;
  }
  /*main*/
  main .button
  {
    width:220px;
    height:60px;
  }
  .origins
  {
    flex-direction: column;
    margin:100px 0 0px 0;
  }
  .origins div
  {
    width:100%;
    margin-bottom:120px;
  }
  .origins div h2
  {
    font-size:26px;
  }
  /*work*/
  .work-details
  {
    flex-direction: column;
    flex-direction: column-reverse;
    margin: 10px 0 55px 0;
  }
  .work-details div
  {
    width:100%;
  }
  .work-details div h2
  {
    font-size:26px;
  }
  .work-details img
  {
    width:100%;
    margin-bottom:50px;
  }
  /*Topcis(Mobile)*/
  .topics-company, .topics-recruit
  {
    width:100%;
  }
  .topics-recruit
  {
    margin-left:0%;
  }
  .logoset-topics
  {
    text-align: center;
    margin: auto auto;
  }
  .logoset-topics img
  {
    width:80px;
    margin:auto auto;
  }
  /*Contact(Mobile)*/
  /*Footer(Mobile)*/
  footer .container
  {
    flex-direction:column;
  }
  .footer-logoset
  {
    width:100%;
    justify-content: space-between;
    flex-direction: row;
  }
  .footer-logoset p
  {
    margin: auto 0 auto 0;
  }
  .footer-logoset img
  {
    width:170px;
    height:170px;
  }
  .footer-menu
  {
    width:100%;
    margin:0;
  }
  .footer-menu ul
  {
    width:100%;
    margin: 10px 0 0 10px;
  }

  /*Missions and visions*/
  #misvis
  {
    height:120vw;
  }
  #misvis .misvis-container .misvis-container-item-pink, .misvis-container-item-orange
  {
    width:60vw;
    height:60vw;
    left:calc(20% - 20px);
  }
  .misvis-container-item-pink
  {
    top:0;
    border:20px solid #ffd966aa;
  }
  .misvis-container-item-orange
  {
    top:50vw;
    border:20px solid #fccaa1aa;
  }
  #misvis .misvis-container p
  {
    font-size: 20px;
  }
  #misvis .misvis-container h2
  {
    margin-top:calc(30vw - 100px);
    font-size:30px;
  }

  /*Vision and credo*/
  #vandc
  {
    height:auto;
  }
  #vandc .vandc-container
  {
    flex-direction:column;
  }
  #vandc .vandc-container .vandc-container-item-credo, #vandc .vandc-container .vandc-container-item-value
  {
    width:100%;
  }
  #vandc .vandc-container .vandc-container-item-value
  {
    padding:50px;
  }
  #vandc .vandc-container .vandc-container-item-value::before
  {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    margin:10px;
  }
  #vandc .vandc-container h2
  {
    font-size:30px;
  }
  #vandc .vandc-container ul li
  {
    font-size: 20px;
  }

  /*Coming soon*/
  #company dl
  {
    display:grid;
    grid-template-columns: 40% 60%;
  }
  .comingsoon
  {
    flex-direction:column;
    text-align:center;
  }
  .comingsoon li
  {
    padding:15px;
  }

  /*Company*/
  #company dl dt
  {

    padding:16px 16px 16px 0;
  }
  #company dl dt::before
  {
    width:250%;
  }
  #company dl dd
  {
    padding:16px 16px 16px 0;
  }

  /*contact*/
  .contact-flow li
  {
    height:50px;
    line-height:3;
  }
  .contact-flow li::before
  {
    height:50px;
  }
  .table-contact tbody tr
  {
    display:flex;
    flex-direction: column;
  }
  .table-contact tbody tr span.required
  {
    position: relative;
    display:inline;
    top: 0;
    left: 30px;
    font-weight: bold;
    color:#ffaa33;
  }
  .table-contact tbody tr span.required::before
  {
    top:-4px;
    left:-11px;
  }
  .table-contact tbody tr td
  {
    width:100%;
  }
  .table-contact tbody tr td input
  {
    width:100%;
  }
  .table-contact tbody tr td input.wpcf7-tel
  {
    width:25%;
  }
  main .button.wide-button
  {
    width:100%;
  }

  /*Recruite General*/
  #message-from-company h2, #message-from-collegues h2, #about-working-space h2, #about-job-seleciton h2,
  #message-from-company h3, #message-from-collegues h3, #about-working-space h3, #about-job-seleciton h3
  {
    font-size:20px;
  }
  #message-from-company p, #message-from-collegues p, #about-working-space p, #about-job-seleciton p
  {
    font-size:14px;
    line-height:1.5;
  }
  /*Recruite-Message*/
  #message-from-company h3
  {
    margin-bottom:10px;
  }
  .list-concepts
  {
    margin:0 0 40px 10px;
  }
  .list-style-pink-dot li p::before
  {
    width:10px;
    height:10px;
    margin-left:-15px;
    top:7px;
  }
  #message-from-company::before
  {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    margin:10px;
  }
  #message-from-company .list-concepts li
  {
    text-align:left;
    margin-bottom:10px;
  }
  .unique-methods
  {
    flex-direction: column;
  }
  .unique-methods li
  {
    margin: 0 auto;
  }
  /*Recruite-Messages*/
  .collegue-single-message
  {
    padding:20px 20px 20px 20px;
    height:250px;
  }
  #message-from-collegues .collegue-single-message h3
  {
    font-size: 18px;
    margin-bottom:20px;
  }
  .collegue-arrow
  {
    position:absolute;
    top:10px;
    left:-45px;
  }
  /*Recruite Working Space*/
  /*Recruite-Selection*/
  #about-job-selection ul
  {
    flex-direction: column;
  }
  #about-job-selection ul li img
  {
    width:100%;
  }
  /*Job list*/
  .title-job-list
  {
    font-size:20px;
  }

  /*Others*/
  .desk-only
  {
    display: none;
  }
}

@media screen and (max-width:700px)
{
  .container
  {
    max-width: none;
    padding:0 16px 0 16px;
    margin: 0 auto;
  }

  /*Contact*/
  .table-contact tbody tr
  {
    display: flex;
    flex-direction: column;
  }
}