@charset "UTF-8";
/* フォント */
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-medium {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.shippori-mincho-semibold {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.shippori-mincho-bold {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.shippori-mincho-extrabold {
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
}


/* 共通部分 */
:root{
  --black:#242424;
  --white:#fff;
  --gray:#b3b3b3;
  --textcolor:#333333;
}
*,::before,::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family:"Noto Serif JP", serif;
  line-height:1.7;
  color: var(--textcolor);
  background:url("../image/background2.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  background-color:rgba(244, 245, 255, 0.3);
  background-blend-mode:lighten;
}
img {
  max-width:100%;
  height: auto;
}
a {
  color: var(--graycolor);
  text-decoration-line: none;
  display: block;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
.top_button>li:nth-child(3){
  background-color: var(--black);
  color: var(--white);
  /* transform: translateY(1.5px);
  box-shadow: none; */
}
.top_button > li:nth-child(3):before{
  border-left: 1.5em solid var(--white);
}

/* 会社説明会・お仕事体験 */
h3{
  display: flex;
  align-items: center;
  width: 100%;
  margin: 5% 0 2% 0;
  font-size: clamp(14px,2.25vw,28px);
  font-weight: 800;
}
h3::after{
  content: "";
  display: block;
  background: var(--black);
  width: 20%;
  height: 1px;
  flex-grow: 1;
  margin-left: 1em;
}
#entry{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#entry>p{
  text-align: center;
  font-size: clamp(14px,2vw,24px);
  padding: .1em 0;
  margin-bottom: .5em;
  line-height: 2;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
}
#entry>p:first-child{
  margin-top: 2.5%;
}
#entry>p:last-child{
  margin-bottom: 4%;
}
.entry_button{
  background: var(--black);
  color: var(--white);
  border-radius: 50px;
  padding: 1em;
  cursor: pointer;
  margin: 2em auto;
  font-size: clamp(10.5px,1.75vw,18px);
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
  transition: .2s;
}
.entry_button:hover{
transform: translateY(1.5px);
box-shadow: none;
}
.step5{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.step{
  width: 15%;
  max-width: 110px;
}
.triangle{
  width: 3%;
  max-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.annai_text>p{
  font-size: clamp(10.5px,1.75vw,20px);
}
.timetable p{
  font-size: clamp(9px,1.5vw,20px);
}
.kasen{
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #b3b3b371;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.timetable{
  margin-top: 1.5em;
}

.color_red{
  color: red;
}
.table{
  background-color: var(--white);
  border: 1px solid #333;
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
  margin-top: .5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table>p,
.sagyou_picture{
  padding: 1.5%;
}
.table>p{
  width: 55%;
}
.sagyou_picture{
  width: 40%;
}
#form>form{
  font-size: clamp(10.5px,1.75vw,20px);
}
#form label{
  margin: 2px 0;
  display: flex;
  align-items: center;
}
.radiotext{
  padding-left: .5em;
}
.intext{
  width: 20%;
}


/* 入力欄 共通の枠線（先に設定） */
#form input:not([type="radio"]):not([type="checkbox"]),
#form textarea,
#form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0.6em;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #fff;
  font-size: inherit;
}

/* エラー状態の枠線色 */
#form .invalid {
  border-color: #d32f2f !important;
  box-shadow: 0 0 0 1px #d32f2f20;
}

/* フォーカス時（見やすく） */
#form input:focus,
#form textarea:focus,
#form select:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 1px #33310;
}

/* エラーメッセージの基本スタイル（JSでinline指定でもOK） */
.field-error {
  color: #d32f2f;
  font-size: 0.9em;
  margin-top: 4px;
}
``


#form select option{
  font-size: clamp(8px,1.5vw,20px);
}
.form_nakami{
  display: flex;
  flex-direction: column;
  padding: 2% 0;
}
.form_nakami>p{
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #b3b3b371;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}
.soushin_button{
  background: var(--black);
  color: var(--white);
  border-radius: 50px;
  padding: .5em;
  cursor: pointer;
  margin: 2em auto;
  font-size: clamp(10.5px,1.75vw,18px);
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  letter-spacing: .25em;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);
  transition: .2s;
}
.soushin_button:hover{
  transform: translateY(1.5px);
  box-shadow: none;
}



/* タブレット・モバイル */
@media(max-width:600px){
  #entry>p{
    text-align: center;
    font-size: clamp(12px,1.75vw,20px);
  }
}