@charset "utf-8";

/* ---------------------------------------------------
   File: index.css
   Version: 1.0.0
   Update: 2025-03-31
   Author: https://flowlab.co.jp

   (c)2007-2025 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */
/* ====================================================
		Main Visual
==================================================== */
#mainVisual ul {
  display: flex;
  flex-wrap: wrap;
}
#mainVisual ul li {
  width: 33.333%;
}




/* ====================================================
		Contents
==================================================== */
/* -------------------------------
		Title
------------------------------- */
#main h2 strong,
#main h2 span,
#tit_job-description strong,
#tit_job-description span {
  display: block;
}

/* English */
#main h2 strong,
#tit_job-description strong {
  color: #CE1046;
  font-size: 7rem;
  font-family: Arial, Helvetica, "sans-serif";
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  letter-spacing: 0;
  line-height: 1;
}

/* Japanese */
#main h2 span,
#tit_job-description span {
  font-size: 1.5rem;
  font-weight: 500;
}

/* -------------------------------
		Layout
------------------------------- */
#main article {
  padding: 140px 8%;
}
#main article.bgPink {
  background: #fdf1f1;
  padding: 100px 8%;
}




/* ====================================================
		Vision
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#vision {
  text-align: center;
}

/* -------------------------------
		Title
------------------------------- */
#vision h2 {
  padding-bottom: 70px;
}
#vision h2 strong {
  color: #333;
}

/* -------------------------------
		Vision Map
------------------------------- */
#vision img {
  display: block;
  padding-bottom: 60px;
}

/* -------------------------------
		Button
------------------------------- */
#vision .btn a {
  color: #fff;
  font-size: 2.2rem;
  background: rgb(206, 16, 70);
  padding: 40px 10%;
  display: inline-block;
  position: relative;
}

/* Arrow */
#vision .btn a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: rotate(45deg) translateY(-50%);
  transition: .3s;
}




/* ====================================================
		News
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#news {
}

/* -------------------------------
		Title
------------------------------- */
#news h2 {
  width: 23%;
}

/* -------------------------------
		Detail
------------------------------- */
#news dl {
  width: 77%;
}
#news dl dt,
#news dl dd {
  border-bottom: 1px solid #e6e6e6;
  padding: 30px 0;
}

/* Date */
#news dl dt {
  width: 26%;
  letter-spacing: .05em;
  overflow-wrap: break-word;
}

/* Category */
#news dl dt span {
  color: #fff;
  font-size: 1.3rem;
  background: #CE1046;
  padding: 3px 12px;
  margin-left: 20px;
  display: inline-block;
}
#news dl dt span.information {
  background: #333;
}

/* Detail */
#news dl dd {
  width: 74%;
}




/* ====================================================
		Female Real Activities
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#female {
  
}
#female #femaleDetail {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 80px;
  margin-bottom: 80px;
}
#female #femaleDetail div {
  width: 41%;
  line-height: 2;
}

/* -------------------------------
		Title
------------------------------- */
#female h2 {
  padding-bottom: 60px;
}

/* -------------------------------
		Catch Copy
------------------------------- */
#female .catchCopy {
  color: #CE1046;
  font-size: 2.4rem;
  font-weight: 600;
  padding-bottom: 30px;
}

/* -------------------------------
		Images - chert
------------------------------- */
#female #femaleDetail .photo {
  width: 54%;
}

/* -------------------------------
		Interview
------------------------------- */
#female #staffGallery section {
  padding-bottom: 80px;
}
#female #staffGallery section div div {
  width: 46%;
}

/* Title */
#female #staffGallery h3 {
  color: #CE1046;
  font-size: 2.4rem;
  padding-bottom: 20px;
}

/* Photo */
#female #staffGallery .photo {
  width: calc(100% - 8px);
  border: 4px solid #CE1046;
  margin-top: 30px;
}

/* Button */
#female #staffGallery .btn {
  text-align: right;
  padding-top: 20px;
}
#female #staffGallery .btn a {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  background: #CE1046;
  display: inline-block;
  padding: 8px 30px 10px 20px;
}
#female #staffGallery .btn a span {
  position: relative;
  padding-right: 16px;
}
#female #staffGallery .btn a span::after {
  content: '';
  width: 11px;
  height: 8px;
  background: url("../img_common/icon_blank_white.png") no-repeat 0 0 / 11px 8px;
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}






/* ====================================================
		Interview
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#main article.interview {
  padding: 0 0 120px;
}
.interview .photoArea {
  align-items: center;
  background: #fdf1f1;
}
.interview .questionArea {
  padding: 80px 8% 0;
}

/* -------------------------------
		Title
------------------------------- */
#tit_job-description {
  padding: 0 8% 50px;
}

/* -------------------------------
		Photo
------------------------------- */
.interview .photo {
  width: 52%;
}

/* -------------------------------
		Profile
------------------------------- */
.interview .photoArea div {
  width: calc(48% - 12%);
  padding: 0 6%;
}

/* Job Title */
.interview .jobTitle {
  color: #CE1046;
  font-size: 2.6rem;
  font-weight: 600;
  border-bottom: 1px solid #CE1046;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* Name */
.interview h2 {
  padding-bottom: 40px;
}

/* Name - English */
.interview h2 strong {
  font-size: 5.6rem!important;
  letter-spacing: 0;
  padding-bottom: 15px;
}

/* Name - Japanese */
.interview h2 span {
  color: #fff;
  font-size: 2.2rem!important;
  line-height: 1;
  letter-spacing: .1em;
  background: #CE1046;
  padding: 7px 14px 8px!important;
  display: inline-block!important;
}

/* -------------------------------
		Interview / Sales & SA
------------------------------- */
#interview_sales .photo,
#interview_sa .photo {
  order: 2;
}
#interview_sales div,
#interview_sa div {
  order: 1;
}

/* -------------------------------
		Question
------------------------------- */
.interview .questionArea section {
  line-height: 2;
  padding-bottom: 50px;
}

/* -------------------------------
		Title
------------------------------- */
.interview h3 {
  color: #CE1046;
  font-size: 2.4rem;
  padding-bottom: 20px;
}

/* -------------------------------
		Q1 : Job description
------------------------------- */
.interview .questionArea section:first-child {
  width: 42%;
}

/* -------------------------------
		Q2 : Day off
------------------------------- */
.interview .questionArea section:nth-child(2) {
  width: 49%;
}

/* Photo */
.interview .questionArea section:nth-child(2) .photo {
  width: 37%;
  margin-top: 0.5em;
  order: 1;
}

/* Text */
.interview .questionArea section:nth-child(2) .txt {
  width: 58%;
  order: 2;
}




/* ====================================================
		Entry
==================================================== */
/* -------------------------------
		Title
------------------------------- */
#entry h2 {
  padding-bottom: 60px;
}

/* -------------------------------
		Button
------------------------------- */
#entry .flex div {
  width: 48%;
}
#entry .flex div a {
  width: 100%;
  color: #fff;
  text-align: center;
  display: block;
  position: relative;
  padding: 40px 0;
}

/* Arrow */
#entry .flex div a::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: rotate(45deg) translateY(-50%);
  transition: .3s;
}
#entry .flex div a:hover::after {
  right: 36px;
}

/* Type */
#entry .flex div a strong {
  font-size: 5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  display: block;
  padding-bottom: 5px;
}

/* Detail */
#entry .flex div a p {
  font-size: 1.6rem;
}

/* New Graduate */
#entry .newGraduate a {
  background: #CE1046;
}

/* Mid Career */
#entry .midCareer a {
  background: #292870;
}




/* ====================================================
		Stores
==================================================== */
/* -------------------------------
		Illust Map
------------------------------- */
#stores p {
  max-width: 1000px;
  margin: 0 auto;
}












/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Title
  ------------------------------- */
  /* English */
  #main h2 strong,
  #tit_job-description strong {
    font-size: 5rem;
  }

  /* Japanese */
  #main h2 span,
  #tit_job-description span {
    font-size: 1.5rem;
  }
  

  
  
  /* ====================================================
      Vision
  ==================================================== */
  /* -------------------------------
      Button
  ------------------------------- */
  #vision .btn a {
    padding: 30px 10%;
  }
  
  
  
  
  /* ====================================================
      News
  ==================================================== */
  /* -------------------------------
      Detail
  ------------------------------- */
  #news dl {
    display: block;
  }
  #news dl dt,
  #news dl dd {
    width: 100%;
    padding: 0;
  }
  
  /* Date */
  #news dl dt {
    border-bottom: none;
    padding-top: 20px;
  }
  
  /* Category */
  #news dl dt span {
    margin-left: 10px;
  }
  
  /* Detail */
  #news dl dd {
    padding-bottom: 20px;
  }
  
  
  
  
  /* ====================================================
      Interview
  ==================================================== */
  /* -------------------------------
      Profile
  ------------------------------- */
  .interview .photoArea div {
    width: calc(48% - 10%);
    padding: 0 5%;
  }
  
  /* Job Title */
  .interview .jobTitle {
    padding-bottom: 10px;
  }
  
  /* Name */
  .interview h2 {
    padding-bottom: 20px;
  }
  
  /* Name - English */
  .interview h2 strong {
    font-size: 5rem!important;
    padding-bottom: 10px;
  }
  
  /* Name - Japanese */
  .interview h2 span {
    font-size: 1.8rem!important;
  }
  
  /* -------------------------------
      Q3 : Day off
  ------------------------------- */
  .interview .questionArea .dayOff {
    padding: 10px 5% 30px;
  }
  
  /* Title */
  .interview .questionArea .dayOff h3 {
    width: 100%;
    padding-bottom: 10px;
  }
  .interview .questionArea .dayOff h3 span {
    font-size: 1.8rem;
    padding: 7px 14px 9px;
  }

  /* Text */
  .interview .questionArea .dayOff p {
    width: 100%;
    padding-top: 0;
  }
  
  
  
  
  /* ====================================================
      Entry
  ==================================================== */
  /* -------------------------------
      Button
  ------------------------------- */
  /* Type */
  #entry .flex div a strong {
    font-size: 4rem;
  }

}













/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  
  /* ====================================================
      Main Visual
  ==================================================== */
  #mainVisual ul li {
    width: 50%;
  }
  
  

  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Title
  ------------------------------- */
  /* English */
  #main h2 strong,
  #tit_job-description strong {
    font-size: 3.4rem;
  }

  /* Japanese */
  #main h2 span,
  #tit_job-description span {
    font-size: 1.2rem;
  }

  /* -------------------------------
      Layout
  ------------------------------- */
  #main article {
    padding: 60px 8%;
  }
  #main article.bgPink {
    padding: 60px 8%;
  }
  
  
  
  
  /* ====================================================
      Vision
  ==================================================== */
  /* -------------------------------
      Title
  ------------------------------- */
  #vision h2 {
    padding-bottom: 40px;
  }
  
  /* -------------------------------
      Vision Map
  ------------------------------- */
  #vision img {
    padding-bottom: 30px;
  }
  
  /* -------------------------------
      Button
  ------------------------------- */
  #vision .btn a {
    font-size: 1.5rem;
    padding: 20px 10%;
    display: block;
  }
  
  /* Arrow */
  #vision .btn a::after {
    width: 6px;
    height: 6px;
    right: 20px;
  }
  
  
  
  
  /* ====================================================
      News
  ==================================================== */
  /* -------------------------------
      Title
  ------------------------------- */
  #news h2 {
    width: 100%;
    padding-bottom: 20px;
  }
  
  /* -------------------------------
      Detail
  ------------------------------- */
  #news dl {
    width: 100%;
    display: block;
  }
  #news dl dt,
  #news dl dd {
    width: 100%;
    font-size: 1.4rem;
    padding: 0;
  }
  
  /* Date */
  #news dl dt {
    border-bottom: none;
    padding: 20px 0 5px;
  }
  
  /* Category */
  #news dl dt span {
    font-size: 1.1rem;
    margin-left: 10px;
    padding: 2px 8px 3px;
  }
  
  /* Detail */
  #news dl dd {
    padding-bottom: 20px;
  }
  
  
  
  
  /* ====================================================
      Female Real Activities
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #female #femaleDetail {
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
  #female #femaleDetail div {
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.8;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #female h2 {
    padding-bottom: 40px;
  }

  /* -------------------------------
      Catch Copy
  ------------------------------- */
  #female .catchCopy {
    font-size: 1.6rem;
    padding-bottom: 10px;
  }
  
  /* -------------------------------
      Images - chert
  ------------------------------- */
  #female #femaleDetail .photo {
    width: 100%;
    padding-top: 30px;
  }
  
  /* -------------------------------
      Interview
  ------------------------------- */
  #female #staffGallery section {
    font-size: 1.4rem;
    padding-bottom: 40px;
  }
  #female #staffGallery section:first-child {
    padding-bottom: 60px;
  }
  #female #staffGallery section div div {
    width: 100%;
  }
  #female #staffGallery section div div:last-child {
    padding-top: 40px;
  }
  
  /* Title */
  #female #staffGallery h3 {
    font-size: 1.6rem;
    padding-bottom: 30px;
  }
  
  /* Photo */
  #female #staffGallery .photo {
    border: 2px solid #CE1046;
    margin-top: 10px;
  }
  
  /* Button */
  #female #staffGallery .btn {
    padding-top: 10px;
  }
  #female #staffGallery .btn a {
    font-size: 1.4rem;
  }
  
  
  
  /* ====================================================
      Interview
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #main article.interview {
    padding: 0 0 40px;
  }
  .interview .questionArea {
    padding: 30px 8% 0;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #tit_job-description {
    padding: 0 8% 30px;
  }
  
  /* -------------------------------
      Photo
  ------------------------------- */
  .interview .photo {
    width: 100%;
  }
  
  /* -------------------------------
      Profile
  ------------------------------- */
  .interview .photoArea div {
    width: calc(100% - 16%);
    padding: 20px 8% 30px;
  }
  
  /* Job Title */
  .interview .jobTitle {
    font-size: 1.5rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  /* Name */
  .interview h2 {
    padding-bottom: 10px;
  }

  /* Name - English */
  .interview h2 strong {
    font-size: 2.6rem!important;
    padding-bottom: 10px;
  }

  /* Name - Japanese */
  .interview h2 span {
    font-size: 1.4rem!important;
    padding: 5px 10px 6px!important;
  }
  
  /* Year - Store Name */
  .interview p {
    font-size: 1.3rem;
  }
  
  /* -------------------------------
      Question
  ------------------------------- */
  .interview .questionArea section {
    padding-bottom: 30px;
  }
  
  /* -------------------------------
      Interview / Sales
  ------------------------------- */
  #interview_sales .photo,
  #interview_sa .photo {
    order: 1;
  }
  #interview_sales div,
  #interview_sa div {
    order: 2;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  .interview h3 {
    font-size: 1.6rem;
    padding-bottom: 10px;
  }
  
  /* -------------------------------
      Q1 : Job description
  ------------------------------- */
  .interview .questionArea section:first-child {
    width: 100%;
    line-height: 2;
  }

  /* -------------------------------
      Q2 : Daily schedule
  ------------------------------- */
  .interview .questionArea section:nth-child(2) {
    width: 100%;
  }
  
  /* Photo */
  .interview .questionArea section:nth-child(2) .photo {
    width: 50%;
    order: 2!important;
    padding-top: 10px;
  }
  
  /* Text */
  .interview .questionArea section:nth-child(2) .txt {
    width: 100%;
    order: 1!important;
  }
    
  
  
  
  /* ====================================================
      Stores
  ==================================================== */
  /* -------------------------------
      Title
  ------------------------------- */
  #stores h2 {
    padding-bottom: 30px;
  }
  
  
  

  /* ====================================================
      Entry
  ==================================================== */
	/* -------------------------------
      Title
  ------------------------------- */
  #entry h2 {
    padding-bottom: 40px;
  }
  
  /* -------------------------------
      Button
  ------------------------------- */
  #entry .flex div {
    width: 100%;
    margin-bottom: 10px;
  }
  #entry .flex div a {
    padding: 20px 0;
  }
  
  /* Arrow */
  #entry .flex div a::after {
    width: 6px;
    height: 6px;
    right: 20px;
  }
  #entry .flex div a:hover::after {
    right: 20px;
  }
  
  /* Type */
  #entry .flex div a strong {
    font-size: 2rem;
    padding-bottom: 0;
  }

  /* Detail */
  #entry .flex div a p {
    font-size: 1.3rem;
  }

  


}