/*CSS jobの分をまとめる*/
@charset "UTF-8";
/*翻訳をしないページへの注記*/
.language-switching-annotation {
margin: 2.5vw 0 0 0;
margin-bottom: 10px;
/*margin: 4.5vw 5.5vw 0 17.75rem;*/
font-size: clamp(10px, 1.1vw, 14px);
text-align: left;
color: #266fc4;
font-weight: 700;
width: 77%;
text-align: left;
padding-top: 10px;
}
#apply .language-switching-annotation {
margin: 4.5vw 5.5vw 0 17.75rem;
}
#email-input .language-switching-annotation {
margin-left: 17.75rem;
margin-right: auto;
}
@media(max-width:1000px) {
#email-input .language-switching-annotation {
margin-left: auto;
}
}
#email-input .language-switching-annotation {
margin-left: 17.75rem;
margin-right: auto;
}
@media(max-width:1000px) {
#email-input .language-switching-annotation {
margin-left: auto;
}
}
@media(max-width:1000px) {
#apply .language-switching-annotation {
margin: 15px auto 10px;
}
}
@media(max-width:1000px) {
#email-input .language-switching-annotation {
width: auto;
}
}
@media (max-width: 1000px) {
#email-confirm .language-switching-annotation {
width: auto;
}
}
@media (max-width: 1000px) {
#email-complete .language-switching-annotation {
width: auto;
}
}
#entry-confirm .language-switching-annotation {
margin: 4.5vw 5.5vw 0 17.75rem;
}
@media(max-width:1000px) {
#entry-confirm .language-switching-annotation {
margin: 0 auto;
}
}
#email-input .language-switching-annotation {
margin-left: 17.75rem;
margin-right: auto;
}
@media(max-width:1000px) {
#email-input .language-switching-annotation {
margin-left: auto;
}
}
#thanks .language-switching-annotation {
margin: 4.5vw 5.5vw 0 17.75rem;
}
@media(ma-width:768px) {
.language-switching-annotation {
width: 100%;
}
}
/*1.トップページ url(/job) blade名（job/top.blade.php）*/
/* 求職者側のトップページ */
:root {
--color-blue: #266fc4;
--color-black: #141414;
--color-white: #ffffff;
--font-weight-black: 900;
--font-weight-medium: 500;
}
html {
/* 一旦%部分をコメントアウト */
/* font-size: 62.5%; */
/* 16px * 62.5% = 10px */
width: 100%;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
color: #000000; /* RGB */
font-family: "Noto sans JP", serif;
font-size: 1.6rem;
text-align: left;
font-style: normal;
}
#top {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans JP", sans-serif;
overflow: hidden;
/* margin-left: 270px; */
/* @media screen and (max-width: 765px) {
margin-left: 0px;
} */
/* ーーーあとで共通にするか相談する。ーーー */
/* padding-right: calc(max(102px, 10vw)); */
/* */
@media screen and (max-width: 765px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 5vw));
padding-right: calc(max(10px, 5vw));
/* ーーー */
}
}
#top #section__top {
height: 55vw;
margin: 4.5vw 0 0 19.7vw;
@media screen and (max-width: 1000px) {
margin: 0;
margin-top: 13vw;
margin-bottom: 13vw;
}
}
/*765px〜1000pxまでの間でスタイルを当てる*/
@media (min-width: 765px) and (max-width: 1000px) {
/* 765px以上1000px以下の時に適用されるスタイル */
#top #section__top {
max-width: 100vw;
}
}
#section__message {
margin: 6.9vw 0 0 23.25vw;
}
@media(max-width:1000px) {
#section__message {
margin: 4.5vw 0 0 2.7vw;
}
}
@media(max-width:768px) {
#section__message {
margin: 0 auto;
}
}
.top__FV-wrap {
margin-left: 4.5vw;
width: 100vw;
@media screen and (max-width: 765px) {
top: 50px;
}
}
#section__top h1 {
color: var(--color-blue);
font-size: clamp(22px, 4.0vw, 70px);
width: fit-content;
letter-spacing: (70px * 0.08);
font-weight: 900;
@media screen and (max-width: 765px) {
font-size: 22px;
}
}
@media screen and (max-width: 400px) {
#section__top h1 {
font-size: 20px;
}
}
.message__text--origin {
border: solid 1px #141414;
}
#section__top .top__subtext {
color: var(--color-white);
font-size: 41px;
letter-spacing: (41px * 0.01);
margin-left: 11.8vw;
margin-bottom: 10px;
@media screen and (max-width: 765px) {
font-size: 17px;
margin-left: 41px;
margin-bottom: 18px;
/* display: none; */
/* background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='360' viewBox='0 0 280 360' fill='none'%3E%3Cpath d='M0 0H280L280 360L0 360Z' fill='%23266fc4'/%3E%3C/svg%3E"); */
}
}
.FV_image {
position: absolute;
right: 0px;
bottom: 0;
z-index: -1;
width: 81vw;
top: -129px;
}
@media(max-width: 1000px) {
.FV_image {
width: 100vw;
top: 0;
}
}
@media(max-width: 500px) {
.FV_image {
width: 130vw;
top: 70px;
}
}
.FV_background {
/* background-image: url('data:image/svg+xml;utf8,'); */
/* background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1250' height='912' viewBox='0 0 1250 912' fill='none'%3E%3Cpath d='M312.5 0H1250L937.5 912H0L312.5 0Z' fill='%23266fc4'/%3E%3C/svg%3E"); */
background-size: cover;
left: -50px;
top: 0px;
position: absolute;
height: 820px;
z-index: -1;
@media screen and (max-width: 765px) {
/* display: none; */
/* background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='360' viewBox='0 0 280 360' fill='none'%3E%3Cpath d='M0 0H280L280 360L0 360Z' fill='%23266fc4'/%3E%3C/svg%3E"); */
left: 0px;
top: 72px;
width: 280px;
height: 360px;
}
}
.top__title-1 {
display: flex;
text-align: center;
align-items: center;
/* background-image: url('data:image/svg+xml;utf8,'); */
/* background-image: url('data:image/svg+xml;utf8,'); */
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-size: cover;
background-position: center;
width: 34.6vw;
height: 11vw;
margin-left: 7vw;
max-width: 47rem;
margin-bottom: 1.3vw;
padding-left: 4.3vw;
@media screen and (max-width: 465px) {
width: 180px;
height: 40px;
padding-left: 17px;
padding-top: 2px;
margin-left: 31px;
}
}
@media(max-width:1000px) {
.top__title-1 {
margin-left: 7.2vw;
}
}
@media(max-width:1000px) {
.top__title-2 {
margin-left: 5.8vw;
}
}
@media(max-width:1000px) {
.top__title-3 {
margin-left: 2.8vw;
}
}
@media(max-width:1000px) {
.top__title-2 {
margin-left: 4.3vw;
}
}
.top__title-2 {
display: flex;
text-align: center;
align-items: center;
/* background-image: url('data:image/svg+xml;utf8,'); */
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
width: 37.6vw;
height: 11vw;
padding-left: 3.8vw;
margin-left: 4.1vw;
margin-bottom: 1.3vw;
flex-direction: column;
align-items: flex-start;
justify-content: center;
@media screen and (max-width: 465px) {
width: 180px;
height: 40px;
padding-left: 17px;
padding-top: 2px;
margin-left: 16px;
margin-top: 10px;
}
}
.top__title-3 {
display: flex;
text-align: center;
align-items: center;
/* background-image: url('data:image/svg+xml;utf8,'); */
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
width: 41.6vw;
height: 11vw;
padding-left: 3.8vw;
margin-left: 0.5vw;
margin-bottom: 10px;
@media screen and (max-width: 465px) {
width: 227px;
height: 40px;
padding-left: 17px;
padding-top: 2px;
margin-left: 10.8vw;
margin-top: 10px;
}
}
@media(max-width:1000px) {
.top__title-3 {
margin-left: -0.2vw;
}
}
#top .answer a {
color: #266FC4;
opacity: 0.5;
}
#section__message {
position: relative;
@media screen and (max-width: 765px) {
/* height: 330px; */
/* overflow-x: hidden; */
}
}
.section__message-wrap {
position: relative;
overflow-x: hidden;
}
#section__support {
margin-top: 190px;
position: relative;
overflow: hidden;
margin: 6.9vw 0 0 23.25vw;
padding-right: 5.5vw;
@media screen and (max-width: 1000px) {
margin: 4.5vw 0 0 2.7vw;
}
}
.section_title {
font-size: 80px;
color: var(--color-blue);
margin-bottom: 5vw;
@media screen and (max-width: 765px) {
font-size: 35px;
margin-left: 20px;
margin-right: 20px;
}
}
.message__text-bold {
font-weight: var(--font-weight-black);
font-size: 24px;
margin-bottom: 43px;
@media screen and (max-width: 765px) {
font-size: 14px;
margin-bottom: 22px;
margin-left: 20px;
}
}
.message__text {
font-size: 18px;
font-weight: var(--font-weight-medium);
@media screen and (max-width: 765px) {
font-size: 14px;
line-height: 20px;
margin-left: 20px;
}
}
.message__txt--origin-bold {
font-size: 18px;
line-height: 36px;
margin-bottom: 25px;
font-weight: var(--font-weight-medium);
@media screen and (max-width: 765px) {
font-size: 14px;
line-height: 20px;
}
}
.message_image-wrap {
position: absolute;
top: 50px;
right: -100px;
display: none;
z-index: -1;
width: 845px;
height: 432px;
background-image: url(../images/glink-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: 80% 80%;
@media screen and (max-width: 765px) {
width: 271px;
height: 114px;
right: -23px;
bottom: 0px;
margin-top: 90px;
}
}
.support__list-wrap {
@media screen and (max-width: 765px) {
margin-top: 40px;
}
}
.support__list {
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
@media screen and (max-width: 765px) {
flex-direction: column;
}
}
.support_list li {
list-style: none;
text-decoration: none;
text-decoration-line: none;
}
.support_list,
.support_list li p {
list-style: none;
}
.support__item {
width: 22.5vw;
height: 21vw;
display: flex;
align-items: center;
flex-direction: column;
background-color: var(--color-white);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
justify-content: center;
@media screen and (max-width: 765px) {
flex-direction: row;
width: 324px;
height: 93px;
justify-content: flex-start;
gap: 34px;
padding-left: 27px;
}
}
.support__item:has(.support_item-image-3) {
@media screen and (max-width: 765px) {
padding-left: 17px;
}
}
.support_item-image-1 {
width: 9.5vw;
height: auto;
@media screen and (max-width: 765px) {
width: 55px;
}
}
.support_item-image-2 {
width: 8.0vw;
height: auto;
@media screen and (max-width: 765px) {
width: 43px;
}
}
.support_item-image-3 {
width: 10.4vw;
height: auto;
@media screen and (max-width: 765px) {
width: 64px;
}
}
.support__item-text {
font-size: clamp(14px, 1.6vw, 24px);
font-weight: var(--font-weight-black);
text-decoration: none;
text-decoration-line: none;
margin-top: 33px;
text-align: center;
@media screen and (max-width: 765px) {
font-size: 14px;
margin-top: 0px;
}
}
.support_item-image-2 + .support__item-text {
@media screen and (max-width: 765px) {
margin-left: 13px;
}
}
.support_item-image-3 + .support__item-text {
/* マッチングの項目のマージンを変更 */
margin-top: 0px;
}
.support__button-wrap {
display: flex;
align-items: center;
flex-direction: column;
}
.support__button-detail {
background-color: #3e3e3e;
color: var(--color-white);
padding: 19px 93px 20px 94px;
border-radius: 10px;
margin-top: 62px;
font-size: 24px;
font-weight: var(--font-weight-black);
@media screen and (max-width: 765px) {
font-size: 15px;
padding: 10px 54px;
margin-top: 24px;
}
}
.support__bg {
position: absolute;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
right: -70px;
top: 0px;
position: absolute;
width: 855px;
height: 660px;
z-index: -1;
@media screen and (max-width: 765px) {
display: none;
right: 0px;
width: 464px;
height: 550px;
}
}
.support__bg-mobile {
display: none;
position: relative;
@media screen and (max-width: 765px) {
display: block;
}
}
.support__bg-mobile svg {
position: absolute;
top: -460px;
right: 0px;
z-index: -1;
}
#section__entry {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
margin-top: 239px;
background-color: var(--color-white);
margin: 6.9vw 5.5vw 0 23.25vw;
padding-top: 37px;
padding-bottom: 37px;
border: var(--color-blue) solid 7px;
background-color: var(--color-white);
@media screen and (max-width: 1000px) {
padding-top: 37px;
height: auto;
justify-content: start;
margin: 5.5vw ;
}
}
.entry__image {
width: 20vw;
position: absolute;
right: 0px;
bottom: 0px;
@media screen and (max-width: 765px) {
padding-top: 0px;
width: 130px;
right: 0px;
height: auto;
}
}
@media(max-width:768px) {
#section__support {
margin: 50px auto;
}
}
/*ここにエントリーフォームの画像が入る*/
.entry__image-wrap {
width: 15vw;
}
.entry__image-wrap img {
width: 100%;
}
.entry__title {
color: var(--color-white);
font-size: 33px;
font-weight: var(--font-weight-black);
background-color: var(--color-blue);
padding: 8px 36px 8px 29px;
@media screen and (max-width: 765px) {
font-size: 22px;
padding: 13px 0px 14px 0px;
width: 56%;
text-align: center;
border: var(--color-blue) 2px solid;
/* display: none; */
}
}
.entry__text-1 {
font-size: 33px;
font-weight: var(--font-weight-black);
margin-top: 30px;
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.entry__text-1 span {
color: var(--color-blue);
font-weight: var(--font-weight-black);
}
.entry__text-2 {
font-size: 28px;
font-weight: var(--font-weight-black);
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.entry__button {
font-size: 20px;
font-weight: var(--font-weight-black);
background-color: var(--color-blue);
padding: 10px 99px 10px 99px;
color: var(--color-white);
margin-top: 34px;
@media screen and (max-width: 765px) {
font-size: 16px;
border-radius: 5px;
letter-spacing: calc(16px * 0.05);
padding: 12px 36px 11px 37px;
}
}
.entry__bg {
position: absolute;
/* background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1250' height='912' viewBox='0 0 1250 912' fill='none'%3E%3Cpath d='M230 0H1230L940 912L0 912Z' fill='%23266fc4'/%3E%3C/svg%3E"); */
/* background-image: url("data:image/svg+xml;utf8,"); */
/* background-image: url("data:image/svg+xml;utf8,"); */
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.1;
background-size: cover;
left: 0px;
top: -200px;
position: absolute;
width: 914px;
height: 830px;
z-index: -1;
@media screen and (max-width: 765px) {
display: none;
}
}
.entry__bg-mobile {
display: none;
position: relative;
@media screen and (max-width: 765px) {
display: block;
}
}
.entry__bg-mobile svg {
position: absolute;
top: -600px;
/* right: 0px; */
z-index: -3;
}
.faq__title {
font-size: 80px;
color: var(--color-blue);
@media screen and (max-width: 765px) {
font-size: 35px;
}
}
#section__faq {
margin: 0 0 0 23.35vw;
margin-top: 161px;
position: relative;
margin-bottom: 161px;
}
@media(max-width: 1000px) {
#section__faq {
margin: 50px 5.5vw 50px 5.5svw;
}
}
.question {
display: flex;
align-items: center;
padding: 20px 62px;
cursor: pointer;
transition: background-color 0.3s ease;
background-color: var(--color-white);
@media screen and (max-width: 765px) {
padding: 10px 12px;
}
/* border-bottom: 2px solid var(--color-blue); */
}
.faq__subtext {
font-size: 18px;
font-weight: var(--font-weight-black);
margin-top: 10px;
margin-bottom: 10px;
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
#top #section-question .Question-point-image {
width: 253px;
position: absolute;
right: 0;
bottom: 0;
}
#top #section-question .Question-point-image img {
width: 100%;
}
.faq__list-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5vw;
@media screen and (max-width: 765px) {
font-size: 14px;
margin-top: 22px;
}
}
.faq-item {
margin-bottom: 18px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 70vw;
max-width: 910px;
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.question-number {
font-size: 24px;
font-weight: bold;
color: var(--color-blue);
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.question-text {
flex: 1;
font-size: 20px;
font-weight: bold;
margin-left: 11px;
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.toggle-button .border {
width: 12px;
height: 2px;
background: var(--color-blue);
display: block;
border-radius: 5px;
}
.toggle-button .border:nth-child(1) {
margin-bottom: -2px;
}
.toggle-button .border:nth-child(2) {
transform: rotate(90deg);
/* margin-left: 10px; */
}
.answer {
font-size: 16px;
padding-left: 115px;
padding-bottom: 29px;
padding-top: 29px;
padding-right: 63px;
border-top: var(--color-blue) solid 2px;
display: none;
background-color: var(--color-white);
@media screen and (max-width: 765px) {
font-size: 14px;
padding-left: 26px;
padding-bottom: 14px;
padding-top: 14px;
padding-right: 22px;
}
}
.answer-label {
color: #266FC4;
}
.vertical {
display: block;
}
.faq__bg {
position: absolute;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
right: 0px;
top: 20px;
position: absolute;
width: 914px;
height: 830px;
z-index: -1;
@media screen and (max-width: 765px) {
display: none;
}
}
/*2. サポート内容 url(/job/support) blade名（job/support.blade.php）*/
:root {
--color-blue: #266fc4;
--color-black: #141414;
--color-white: #ffffff;
--font-weight-black: 900;
--font-weight-medium: 500;
}
body:has(.bg-slash) {
/* 背景のスラッシュの図形で画面幅が横にスクロールできないようにする。 */
overflow-x: hidden;
}
.bg-slash {
/* 背景 */
background-color: var(--color-blue);
/* opacity: 0.2; */
width: 341%;
height: 121%;
transform: rotate(-78.8deg);
position: absolute;
color: aqua;
top: 0;
left: -108%;
z-index: -1;
display: none;/*スタイルが崩れるので一旦消、調整したら再度入れる*/
@media screen and (max-width: 765px) {
display: none;
}
}
main#support {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
padding-left: 17px;
/* padding-right: 17px; */
/* ーーーあとで共通にするか相談する。ーーー */
padding-left: 343px;
padding-top: 50px;
/* padding-right: calc(max(102px, 10vw)); */
/* */
@media screen and (max-width: 765px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 5vw));
/* padding-right: calc(max(10px, 5vw)); */
/* ーーー */
}
}
#support h1 {
font-size: 80px;
letter-spacing: calc(80px * 0.03);
margin-bottom: 10px;
@media screen and (max-width: 765px) {
font-size: 27px;
letter-spacing: calc(27px * 0.03);
}
}
#support .sub__title {
font-weight: bold;
}
.supportlist {
display: flex;
margin-top: 31px;
flex-wrap: wrap;
gap: 25px 30px;
margin-bottom: 30px;
@media screen and (max-width: 765px) {
margin-bottom: 40px;
}
}
.supportlist__item {
background-color: var(--color-white);
border-radius: 10px;
border: 4px solid var(--color-blue);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
padding: 37px 30px 37px 44px;
width: 100%;
max-width: 500px;
@media screen and (max-width: 765px) {
padding: 17px 10px 37px 10px;
}
}
.supportlist__image-wrap {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.supportlist__image {
width: 123px;
height: auto;
margin-right: 20px;
@media screen and (max-width: 765px) {
width: 73px;
margin-right: 10px;
}
}
.supportlist__title {
font-size: 24px;
font-weight: var(--font-weight-black);
line-height: 31px;
@media screen and (max-width: 765px) {
font-size: 16px;
line-height: 24px;
}
}
.supportlist__task-title {
font-size: 16px;
color: var(--color-white);
background-color: var(--color-blue);
padding: 2px 22px 2px 22px;
width: fit-content;
border-radius: 5px;
margin-top: 9px;
margin-bottom: 5px;
@media screen and (max-width: 765px) {
font-size: 14px;
padding: 2px 12px 2px 12px;
}
}
.supportlist__task-text {
font-size: 16px;
line-height: 30px;
@media screen and (max-width: 765px) {
font-size: 14px;
line-height: 21px;
}
}
.supportlist__item.item2 {
border: 4px solid #f2c94c;
}
.item2 .supportlist__task-title {
background-color: #f2c94c;
}
.item2 .term {
margin-top: 36px;
font-size: 16px;
line-height: 30px;
@media screen and (max-width: 765px) {
margin-top: 30px;
font-size: 14px;
}
}
.supportlist__item.item3 {
border: 4px solid #ffa857;
}
.item3 .supportlist__task-title {
background-color: #ffa857;
}
.supportlist__item.item4 {
border: 4px solid #58c4f2;
}
.item4 .supportlist__task-title {
background-color: #58c4f2;
}
.supportlist__item.item5 {
border: 4px solid #ff6f91;
}
.item5 .supportlist__task-title {
background-color: #ff6f91;
}
/*3. 仕事紹介の流れ url(/job/workflow) blade名（job/workflow.blade.php）*/
:root {
--color-blue: #266fc4;
--color-black: #141414;
--color-white: #ffffff;
--font-weight-black: 900;
--font-weight-medium: 500;
}
#process .bg-slash {
/* 背景 */
overflow-x: hidden;
background-color: var(--color-blue);
opacity: 0.2;
width: 341%;
height: 121%;
transform: rotate(-78.8deg);
position: absolute;
color: aqua;
top: 0;
left: -87%;
z-index: -1;
display: none;/*これは一旦調整が必要なので非表示にしておく*/
@media screen and (max-width: 765px) {
display: none;
}
}
.process {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
/* margin-left: 270px; */
/* @media screen and (max-width: 765px) {
margin-left: 0px;
} */
/* ーーーあとで共通にするか相談する。ーーー */
padding-left: 300px;
padding-top: 50px;
/* padding-right: calc(max(102px, 10vw)); */
/* */
margin-bottom: 100px;
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 5vw));
padding-right: calc(max(10px, 5vw));
/* ーーー */
}
}
.process h1 {
font-size: 80px;
letter-spacing: calc(80px * 0.03);
margin-bottom: 10px;
@media screen and (max-width: 765px) {
font-size: 27px;
letter-spacing: calc(27px * 0.03);
}
}
.process .content__wrap {
text-align: center;
width: fit-content;
margin: 0 auto;
}
.process .title,
.process .sub__title {
text-align: left;
@media screen and (max-width: 765px) {
text-align: center;
}
}
.process .sub__title {
font-weight: bold;
@media screen and (max-width: 765px) {
font-size: 15px;
margin-top: 8px;
}
}
.process .section__title {
font-size: 32px;
letter-spacing: calc(32px * 0.03);
margin-bottom: 64px;
margin-top: 75px;
@media screen and (max-width: 765px) {
font-size: 20px;
letter-spacing: calc(16px * 0.03);
margin-bottom: 34px;
margin-top: 55px;
}
}
.process .flow__area {
display: flex;
flex-direction: column;
align-items: center;
}
.process .flow__item-list {
display: flex;
align-items: center;
gap: 20px 6px;
flex-wrap: wrap;
@media screen and (max-width: 765px) {
gap: 26px 26px;
justify-content: center;
}
}
.process .flow__item {
background-color: var(--color-blue);
font-weight: var(--font-weight-medium);
color: var(--color-white);
width: 112px;
height: auto;
min-height: 150px;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 20px;
border-radius: 10px;
justify-content: center;
}
.process .flow__icon-small {
width: 38px;
height: auto;
margin-top: 10px;
}
.process .step__number {
font-size: 14px;
color: var(--color-blue);
background-color: var(--color-white);
margin: 0px;
position: absolute;
top: -15px;
padding: 5px 14px;
border-radius: 10px;
}
.process .step__title {
margin-top: 7px;
margin-bottom: 15px;
font-size: 16px;
@media screen and (max-width: 765px) {
font-size: 14px;
width: 100%;
}
}
.process .blue__arrow {
width: 7px;
height: 14px;
@media screen and (max-width: 765px) {
display: none;
}
}
.process .flow__step2 .flow__icon-small {
margin-top: 2px;
width: 43px;
height: auto;
}
.process .flow__step3 .flow__icon-small {
margin-top: 14px;
}
.process .flow__step4 .flow__icon-small {
margin-top: 11px;
width: 29px;
height: auto;
}
.process .flow__step4 .step__title {
margin-top: 9px;
}
.process .flow__step5 .flow__icon-small {
margin-top: 13px;
width: 41px;
height: auto;
}
.process .flow__step5 .step__title {
margin-top: 12px;
}
.process .flow__step6 .flow__icon-small {
margin-top: 13px;
width: 32px;
height: auto;
}
.process .flow__step7 .flow__icon-small {
margin-top: 13px;
width: 39px;
height: auto;
}
.process .flow__step7 .step__title {
font-size: 13px;
line-height: 13px;
}
.process .flow__step8 .flow__icon-small {
margin-top: 4px;
width: 47px;
height: auto;
}
.process .flow__step8 .step__title {
margin-top: 10px;
}
.process .flow__support {
margin-top: 150px;
@media screen and (max-width: 765px) {
margin-top: 50px;
}
}
.process .support__flow-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
@media screen and (max-width: 765px) {
margin-bottom: 60px;
}
}
.process .support__item {
display: flex;
background-color: var(--color-white);
border: var(--color-blue) solid 5px;
border-radius: 10px;
padding: 37px 58px;
width: 100%;
max-width: 899px;
box-sizing: border-box;
height: auto;
@media screen and (max-width: 765px) {
width: 80%;
display: block;
padding: 17px 17px 17px 17px;
}
}
.process .support__item .step__title {
color: var(--color-white);
font-size: 14px;
padding: 6px 15px 5px 15px;
line-height: auto;
background-color: var(--color-blue);
border-radius: 60px;
margin-top: 0px;
margin-bottom: 10px;
}
.process .support__image-wrap {
@media screen and (max-width: 765px) {
margin-right: 0px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
}
.process .support__image {
width: 68px;
height: auto;
}
.process .support__title {
font-size: 23px;
font-weight: var(--font-weight-black);
color: var(--color-blue);
margin: 0px;
@media screen and (max-width: 765px) {
font-size: 16px;
}
}
.process .support__text-wrap {
text-align: center;
margin-top: 7px;
}
.process .support__text {
margin-top: 15px;
font-size: 18px;
font-weight: var(--font-weight-medium);
@media screen and (max-width: 765px) {
font-size: 14px;
margin-top: 8px;
}
}
.process .blue__arrow-support {
width: 20px;
height: 10px;
}
.footer {
padding-left: 300px;
@media screen and (max-width: 765px) {
padding-left: 20px;
}
}
/*4.お役立ち情報一覧 url(/job/useful) blade名（job/useful.blade.php）*/
:root {
--color-blue: #266fc4;
--color-black: #141414;
--color-white: #ffffff;
--font-weight-black: 900;
--font-weight-medium: 500;
}
main#tips {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
padding-left: 17px;
padding-right: 17px;
/* ーーーあとで共通にするか相談する。ーーー */
padding-left: 300px;
padding-top: 50px;
padding-right: calc(max(102px, 10vw));
/* */
@media screen and (max-width: 765px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 5vw));
padding-right: calc(max(10px, 5vw));
/* ーーー */
}
}
#tips a {
color: #000000;
font-weight: 500;
}
.tips h1 {
font-size: 80px;
letter-spacing: calc(80px * 0.03);
margin-bottom: 10px;
@media screen and (max-width: 765px) {
font-size: 27px;
letter-spacing: calc(27px * 0.03);
}
}
.bg-slash {
/* 背景 */
background-color: var(--color-blue);
opacity: 0.2;
width: 341%;
height: 121%;
transform: rotate(-78.8deg);
position: absolute;
color: aqua;
top: 0;
left: -87%;
z-index: -1;
@media screen and (max-width: 765px) {
display: none;
}
}
.tips .sub__title {
font-weight: bold;
margin-bottom: 60px;
}
.tips .tips__list {
margin-top: 57px;
display: flex;
flex-wrap: wrap;
position: relative;
justify-content: center;
margin: 0 auto 150px;
gap: 57px 69px;
@media screen and (max-width: 765px) {
width: 321px;
height: 174x;
margin-bottom: 40px;
/* background-color: #266fc4; */
}
}
.tips .image__wrap {
width: 396px; /* 画像の幅を指定 */
height: 213px; /* 画像の高さを指定 */
position: relative;
@media screen and (max-width: 765px) {
width: 321px;
height: 174px;
/* background-color: #266fc4; */
}
}
.tips .image__background {
/* 背景のフォルダの画像、 */
width: 396px;
height: 213px;
/* 画像の色を変更できるようにする。 */
background-color: #a8c5e7;
mask-image: url("../images/background_file_image.png"); /* マスクに使用する画像 */
mask-size: cover; /* マスクのサイズを指定 */
mask-repeat: no-repeat; /* マスクの繰り返しを防ぐ */
mask-position: center; /* マスクの位置を中央に */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
z-index: -1;
@media screen and (max-width: 765px) {
width: 321px;
height: 174px;
mask-size: 100%;
/* マスク画像のサイズを90%に縮小 */
}
}
.tips .tipstitle__wrap {
min-width: 220px;
text-align: center;
}
.tips .tips__title {
font-size: 25px;
background-color: white;
margin-top: 15px;
padding: 6px 10px 5px 10px;
font-weight: var(--font-weight-medium);
@media screen and (max-width: 765px) {
font-size: 16px;
}
}
.tips .tips_comming-soon {
font-size: 25px;
color: #e00;
padding: 6px 10px 5px 10px;
font-weight: var(--font-weight-medium);
transform: rotate(-3deg);
@media screen and (max-width: 765px) {
font-size: 16px;
}
}
.tips .tips__item {
position: relative;
/* height: 213px; */
width: 396px;
min-height: 479px;
display: flex;
justify-content: space-between;
flex-direction: column;
@media screen and (max-width: 765px) {
min-height: 279px;
}
}
.tips .tipsimage__wrap {
position: absolute;
z-index: 2;
left: -12px;
bottom: 0px;
@media screen and (max-width: 765px) {
/* left: 0px; */
}
}
.tips .tips__image {
width: 138px;
height: auto;
@media screen and (max-width: 765px) {
width: 100px;
height: auto;
}
}
.tips .tips__theme {
padding-bottom: 10px;
border-bottom: var(--color-black) solid 1px;
text-wrap: wrap;
padding-top: 10px;
margin-bottom: 5px;
@media screen and (max-width: 765px) {
height: fit-content;
padding-bottom: 14px;
}
}
.tips .tips__theme p {
font-size: 18px;
font-weight: var(--font-weight-black);
margin-top: 0px;
margin-bottom: 0px;
@media screen and (max-width: 765px) {
font-size: 14px;
}
}
.tips .tips2 .image__background {
background-color: #ffd791;
}
.tips .tips3 .image__background {
background-color: #f8dbf9;
}
.tips .tips3 .tips__image {
@media screen and (max-width: 765px) {
width: 96px;
}
}
.tips .tips3 .tipsimage__wrap {
@media screen and (max-width: 765px) {
padding-left: 10px;
}
}
.tips .tips4 .image__background {
background-color: #facac2;
}
.tips .tips4 .tips__image {
width: 85px;
@media screen and (max-width: 765px) {
width: 66px;
}
}
.tips .tips4 .tipsimage__wrap {
left: 12px;
@media screen and (max-width: 765px) {
/* left: 23px; */
}
}
.tips .tips5 .image__background {
background-color: #c1e5bb;
}
.tips .tips5 .tipsimage__wrap {
left: 12px;
@media screen and (max-width: 765px) {
/* left: 23px; */
}
}
.tips .tips5 .tips__image {
width: 109px;
@media screen and (max-width: 765px) {
width: 86px;
}
}
.tips .tips6 .image__background {
background-color: #bfe5e2;
}
.tips .tips6 .tipsimage__wrap {
@media screen and (max-width: 765px) {
left: -2px;
}
}
.tips .tips6 .tips__image {
@media screen and (max-width: 765px) {
width: 96px;
}
}
.tips .tips6 .itps__title {
margin-bottom: 0px;
margin-top: 25px;
}
.tips .tips7 .itps__title {
margin-bottom: 0px;
margin-top: 15px;
}
.tips .tips6 .tipstitle__wrap:nth-child(2) .itps__title,
.tips .tips7 .tipstitle__wrap:nth-child(2) .itps__title {
margin-top: 11px;
}
.tips .tips7 .image__background {
background-color: #cac4c3;
}
.tips .tips7 .tipsimage__wrap {
left: 0px;
}
.tips .tips7 .tips__image {
width: 108px;
@media screen and (max-width: 765px) {
width: 86px;
}
}
.tips .tips8 .image__background {
background-color: #cdbcf9;
}
.tips .tips8 .tipsimage__wrap {
left: 7px;
}
.tips .tips8 .tips__image {
width: 101px;
@media screen and (max-width: 765px) {
width: 86px;
}
}
.tips .content__list {
font-size: 16px;
counter-reset: list-counter; /* カウンターをリセット */
/* padding-left: 5px; */
font-weight: var(--font-weight-medium);
flex-grow: 2;
@media screen and (max-width: 765px) {
font-size: 14px;
flex-grow: 0;
padding-left: 0px;
}
}
.tips .content__list li {
list-style: none; /* デフォルトのリストスタイルを無効化 */
counter-increment: list-counter; /* カウンターをインクリメント */
text-align: left;
}
.tips .content__list li::before {
content: "# " counter(list-counter) " ";
/* 擬似要素の位置を調整する */
/* float: left; */
margin-right: 3px;
margin-top: 1px;
letter-spacing: calc(-16px * 0.1);
@media screen and (max-width: 765px) {
margin-right: 3px;
margin-top: 0px;
letter-spacing: calc(-14px * 0.1);
}
}
/*もっと見るボタン 記事がこれ以上増えていったら出すようにする
一旦noneにしておく*/
.detialbutton__wrap {
text-align: right;
margin-top: 10px;
display: none;
}
.tips .detail__button {
background-color: var(--color-blue);
color: var(--color-white);
font-size: 16px;
padding: 8px 17px 8px 16px;
border-radius: 50px;
@media screen and (max-width: 765px) {
font-size: 14px;
padding: 8px 17px 8px 16px;
}
}
.footer {
padding-left: 300px;
@media screen and (max-width: 765px) {
padding-left: 20px;
}
}
/*5.お知らせ一覧 url(/job/news) blade名（job/news.blade.php）*/
.news {
margin: 155px 20px;
}
@media screen and (max-width:765px) {
.news {
margin-top: 130px;
}
}
.news__inner {
max-width: 960px;
margin: 0 auto;
}
@media screen and (max-width:765px) {
.news__inner {
padding-inline: 16px;
}
}
.news__label {
display: flex;
align-items: center;
gap: 21px;
}
@media screen and (max-width:765px) {
.news__label {
gap: 10px;
}
}
.news__dot {
width: 21px;
height: 21px;
background: #D9D9D9;
border-radius: 50%;
}
@media screen and (max-width:765px) {
.news__dot {
width: 10px;
height: 10px;
}
}
.news__section-title {
font-size: 24px;
color: #333;
font-weight: 500;
}
@media screen and (max-width:765px) {
.news__section-title {
font-size: 20px;
}
}
.news__heading {
font-size: 87px;
font-weight: 900;
letter-spacing: 0.09em;
margin-top: 5px;
}
@media screen and (max-width:765px) {
.news__heading {
font-size: 45px;
}
}
.news__list {
margin-top: 62px;
}
@media screen and (max-width:765px) {
.news__list {
margin-top: 30px;
}
}
.news__item {
border-bottom: 1px solid #ccc;
padding: 16px 0;
}
.news__link {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news__date,
.news__info-date {
font-size: 16px;
font-weight: 500;
color: #333;
}
.news__tag {
background: #333;
color: white;
padding: 5px 23px;
border-radius: 60px;
font-size: 11px;
letter-spacing: 0.13em;
margin: 10px 0;
display: inline-block;
}
@media screen and (max-width:765px) {
.news__tag {
margin: 10px 0;
}
}
.news__text {
margin-bottom: 10px;
font-size: 20px;
font-weight: 900;
color: #333;
}
@media screen and (max-width:765px) {
.news__text {
margin-left: initial;
font-size: 20px;
margin-top: 10px;
}
}
.news__back {
display: inline-block;
margin-top: 66px;
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 60px;
}
@media screen and (max-width:765px) {
.news__back {
margin-top: 30px;
font-size: 14px;
}
}
/*6.お知らせ記事ページ url(/job/news/detail/{id}) blade名（/job/news/detail.blade.php）*/
.news-single {
margin-top: 228px;
margin-bottom: 228px;
}
@media screen and (max-width:765px) {
.news-single {
margin-top: 135px;
}
}
.news-single__inner {
max-width: 691px;
margin: 0 auto;
}
@media screen and (max-width:765px) {
.news-single__inner {
padding-inline: 16px;
}
}
.news-single__meta {
display: flex;
align-items: center;
gap: 17px;
font-size: 14px;
font-weight: 500;
}
.news-single__date {
letter-spacing: 0.12em;
}
.news-single__tag {
display: inline-block;
background-color: #333;
color: #fff;
padding: 5px 18px;
border-radius: 10px;
line-height: calc(17/14);
}
.news-single__title {
margin-top: 22px;
font-size: clamp(());
font-weight: 500;
letter-spacing: 0.01em;
line-height: calc(36/30);
}
.news-single__separator {
}
.news-single__content {
margin-top: 30px;
}
.news-single__content-text {
font-size: clamp(16px, 1.25vw, 20px);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.01em;
margin-top: 30px;
}
.news-single__back-link {
display: block;
text-align: center;
color: #333;
font-size: 16px;
line-height: calc(19/16);
letter-spacing: 0.01em;
margin-top: 56px;
text-align: left;
display: block;
width: 15.4375rem;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: left;
color: #FFFFFF;
font-size: 12px;
line-height: 1.2;
margin-top: 3vw;
width: fit-content;
padding: 10px;
}
/*メールアドレス入力画面*/
#email-input p.apply__annotation {
font-size: clamp(0.7rem, 1.25vw, 18px);
text-align: center;
margin-top: 20px;
letter-spacing: -0.08em;
}
#email-input p.perror {
font-size: clamp(16px, 1.3vw, 20px);
margin-bottom: 20px;
margin-top: 20px;
}
#email-input h2.section-title {
margin: 0;
}
.section-title h2.section-title {
margin: 0;
}
#email-input .processing::after {
content: '';
display: inline-block;
width: 1em;
animation: dots 3s steps(3, end) infinite;
}
@keyframes dots {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
#email-confirm button {
color: #ffffff;;
}
#email-confirm .profile-form {
margin: 4.5vw auto;
}
#email-confirm .language-switching-annotation {
margin: 4.5vw auto;
}
#email-confirm .language-switching-annotation {
margin: 4.5vw 5.5vw 0 17.75rem;
}
@media screen and (max-width: 1000px) {
#email-confirm .language-switching-annotation {
margin: 0 auto;
}
}
#email-complete .language-switching-annotation {
margin: 4.5vw auto;
display: none;
}
/*7.エントリー url(/job/entry) blade名（job/entry.blade.php）*/
.contact {
margin-inline: 2.0625rem 2.1875rem;
margin-block: 3.25rem;
}
@media screen and (max-width: 765px) {
.contact {
margin-block: 6.375rem 2rem;
margin-inline: 1rem;
}
}
.profile-form {
background-color: #F7F7F8;
padding: 3.5rem 4.25rem 2.8125rem 3.125rem;
margin-top: 3.375rem;
width: 80%;
margin: 4.5vw 0 0 19.7vw;
}
@media screen and (max-width: 765px) {
.profile-form {
padding-inline: 1.25rem;
padding-block: 3.125rem 2.6875rem;
}
}
.profile-form__form {
display: -ms-grid;
display: grid;
gap: 3.125rem;
}
@media screen and (max-width: 765px) {
.profile-form__form {
gap: 2.6875rem;
}
}
.profile-form__inner {
position: relative;
}
.profile-form__required-item {
position: absolute;
top: 0;
right: 0;
}
.profile-form__wrapper {
display: -ms-grid;
display: grid;
gap: 1rem;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper {
gap: 1.25rem;
}
}
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
width: 24.75rem;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
width: 19.1875rem;
}
}
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: 33.1875rem;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: 19.1875rem;
}
}
.profile-form__heading {
font-size: 1.5625rem;
line-height: 1.2;
margin-bottom: 0.875rem;
}
@media screen and (max-width: 765px) {
.profile-form__heading {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
#apply.profile-form__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 1200px) {
.profile-form__group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
align-items: initial;
}
}
.profile-form__group:has(textarea) {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.profile-form__group.profile-form__group--address input {
width: 33.1875rem;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--address input {
width: 19.1875rem;
}
}
.profile-form__label {
min-width: 18.75rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
@media screen and (max-width: 765px) {
.profile-form__label {
min-width: initial;
font-size: 1rem;
line-height: 1.1875;
}
}
#apply .apply__annotation {
font-weight: 500;
color: red;
text-align: center;
font-size: clamp(11px, 1.1vw, 14px);
margin-bottom: 10px;
margin-top: 30px;
}
#apply .apply__annotation
.profile-form__required {
color: #FD5E17;
margin-left: 0.3125rem;
}
.profile-form__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__row {
gap: 1.8125rem;
margin-top: 0.1875rem;
}
}
.profile-form__row:has(select) {
gap: 1rem;
}
@media screen and (max-width: 765px) {
.profile-form__row:has(select) {
gap: 0.375rem;
}
}
.profile-form__row-item span {
display: block;
font-size: 1rem;
line-height: 1.1875;
font-weight: 500;
margin-bottom: 0.625rem;
}
@media screen and (max-width: 765px) {
.profile-form__row-item span {
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.profile-form__row.profile-form__row--graduate select {
width: initial;
}
.profile-form__group.profile-form__group--jlpt select {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--jlpt select {
width: 9.75rem;
}
}
.profile-form__input {
background-color: #FFFFFF;
border: 1px solid #9F9D9D;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border-radius: 0.25rem;
width: initial;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__input {
width: 8.625rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select {
background-color: #FFFFFF;
padding-block: 0.875rem 0.5rem;
padding-inline: 1.3125rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
width: initial;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__select {
width: 11.125rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select.profile-form__select--birthday {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__select.profile-form__select--birthday {
width: 4.875rem;
}
}
.profile-form__radio-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5.0625rem;
}
@media screen and (max-width: 765px) {
.profile-form__radio-group {
gap: 2.125rem;
}
}
.profile-form__wrapper.profile-form__wrapper--school .profile-form__radio-group {
gap: 1.25rem;
}
.profile-form__radio input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 13px;
height: 13px;
border: 1px solid #9F9D9D;
border-radius: 50%;
cursor: pointer;
background-color: #FFFFFF;
}
/* チェックされたラジオボタン内側のスタイル */
.profile-form__radio input[type=radio]::before {
background-color: blue;
border-radius: 50%;
bottom: 0;
content: "";
height: 9px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 9px;
}
/* チェックされたらラジオボタン内側を表示 */
.profile-form__radio input[type=radio]:checked::before {
opacity: 1;
}
.profile-form__textarea {
background-color: #FFFFFF;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
min-height: 8.4375rem;
width: 33.1875rem;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__textarea {
width: 18.9375rem;
margin-top: 0.5rem;
}
}
.profile-form__privacy {
text-align: center;
margin-top: 1.25rem;
}
@media screen and (max-width: 765px) {
.profile-form__privacy {
margin-top: initial;
}
}
.profile-form__privacy-label {
font-size: 1.125rem;
line-height: 1.2222222222;
}
@media screen and (max-width: 765px) {
.profile-form__privacy-label {
font-size: 1rem;
line-height: 1.1875;
}
}
.profile-form__privacy-link {
color: #3B6BF0;
}
/* 共通：確認ボタン (input と button 両方対応) */
.profile-form__submit input,
.profile-form__submit button {
display: block;
width: 15.4375rem;
margin-inline: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF;
font-size: 1.5625rem;
line-height: 1.2;
transition: color 0.3s ease, background-color 0.3s ease;
font-weight: 500;
border: none;
cursor: pointer;
}
@media screen and (max-width: 765px) {
.profile-form__submit input,
.profile-form__submit button {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222;
}
}
/* hover 時 */
.profile-form__submit input:hover,
.profile-form__submit button:hover {
background-color: #DFDFDF;
}
/* 必須項目エラー用 */
.is-error {
border: 2px solid #e00 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input:invalid {
background-color: lightpink;
}
#apply .profile-form {
width: 80%;
margin: 4.5vw 0 0 19.7vw;
}
@media(max-width:1000px) {
#apply .profile-form {
width: auto;
margin: 0;
}
}
/*8.エントリー入力確認画面 url(/job/entry/confirm) blade名（job/entry/confirm.blade.php）
※これは今main.phpを読み込ませているので、HTMLを書き直し*/
.profile-form__row-item {
font-size: 16px;
}
.contact {
margin-inline: 2.0625rem 2.1875rem;
margin-block: 3.25rem;
}
@media screen and (max-width: 765px) {
.contact {
margin-block: 6.375rem 2rem;
margin-inline: 1rem;
}
}
/*ここに説明文が入ります*/
.confirm-description {
font-weight: 500;
color: red;
text-align: center;
font-size: clamp(11px, 1.1vw, 14px);
margin: 30px 0 10px 19.7vw;
}
.profile-form {
background-color: #F7F7F8;
padding: 3.5rem 4.25rem 2.8125rem 3.125rem;
}
@media screen and (max-width: 765px) {
.profile-form {
padding-inline: 1.25rem;
padding-block: 3.125rem 2.6875rem;
}
}
.profile-form__form {
display: -ms-grid;
display: grid;
gap: 2rem;
justify-content: center;
}
#entry-confirm .profile-form__group {
align-items: flex-start;
display: flex;
}
#entry-confirm .profile-form__row-item {
display: flex;
}
@media(max-width:1000px) {
.profile-form {
margin: 0 auto;
}
}
@media screen and (max-width: 765px) {
.profile-form__form {
gap: 2.6875rem;
}
}
.profile-form__inner {
position: relative;
}
.profile-form__required-item {
position: absolute;
top: 0;
right: 0;
}
.profile-form__wrapper {
display: -ms-grid;
display: grid;
gap: 1.5rem;
width: fit-content;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper {
gap: 1.25rem;
}
}
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
width: 24.75rem;
width: auto;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
width: 19.1875rem;
}
}
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: 33.1875rem;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: 19.1875rem;
}
}
.profile-form__heading {
font-size: 1.5625rem;
line-height: 1.2;
margin-bottom: 0.875rem;
}
@media screen and (max-width: 765px) {
.profile-form__heading {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
#entry-confirm.profile-form__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: solid 1px #3333;
}
@media(max-width:1437px) {
.profile-form__group {
flex-direction: row;
align-items: flex-start;
row-gap: 10px;
display: flex;
flex-wrap: wrap;
}
}
@media screen and (max-width: 1200px) {
.profile-form__group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
align-items: initial;
}
}
.profile-form__group:has(textarea) {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.profile-form__group.profile-form__group--address input {
width: 33.1875rem;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--address input {
width: 19.1875rem;
}
}
.profile-form__label {
min-width: 18.75rem;
font-size: 1.125rem;
line-height: 1.2222222222;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__label {
min-width: initial;
font-size: 1rem;
line-height: 1.1875;
}
}
#apply .apply__annotation {
font-weight: 500;
color: red;
text-align: center;
font-size: clamp(11px, 1.1vw, 14px);
margin-bottom: 10px;
margin: 4.5vw 5.5vw 0 17.75rem;
text-align: center;
}
@media(max-width:1000px) {
#apply .apply__annotation {
margin: 0;
}
}
.profile-form__required {
color: #FD5E17;
margin-left: 0.3125rem;
font-weight: 500;
}
.profile-form__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
margin-top: initial;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__row {
gap: 1.8125rem;
margin-top: 0.1875rem;
}
}
.profile-form__row:has(select) {
gap: 1rem;
}
@media screen and (max-width: 765px) {
.profile-form__row:has(select) {
gap: 0.375rem;
}
}
.profile-form__row-item span {
display: block;
font-size: 1rem;
line-height: 1.1875;
font-weight: 500;
margin-bottom: 0.625rem;
}
@media screen and (max-width: 765px) {
.profile-form__row-item span {
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.profile-form__row.profile-form__row--graduate select {
width: initial;
}
.profile-form__group.profile-form__group--jlpt select {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--jlpt select {
width: 9.75rem;
}
}
.profile-form__input {
background-color: #FFFFFF;
border: 1px solid #9F9D9D;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border-radius: 0.25rem;
width: 90%;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__input {
width: 8.625rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select {
background-color: #FFFFFF;
padding: 0.875rem 0.8rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
width: initial;
margin-top: initial;
font-weight: 500;
font-size: 1.3rem;
}
@media screen and (max-width: 765px) {
.profile-form__select {
width: 11.125rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select.profile-form__select--birthday {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__select.profile-form__select--birthday {
width: 4.875rem;
}
}
.profile-form__radio-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5.0625rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__radio-group {
gap: 2.125rem;
}
}
.profile-form__wrapper.profile-form__wrapper--school .profile-form__radio-group {
gap: 1.25rem;
font-size: 1.3rem;
}
.profile-form__radio input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 13px;
height: 13px;
border: 1px solid #9F9D9D;
border-radius: 50%;
cursor: pointer;
background-color: #FFFFFF;
}
/* チェックされたラジオボタン内側のスタイル */
.profile-form__radio input[type=radio]::before {
background-color: blue;
border-radius: 50%;
bottom: 0;
content: "";
height: 9px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 9px;
}
/* チェックされたらラジオボタン内側を表示 */
.profile-form__radio input[type=radio]:checked::before {
opacity: 1;
}
.profile-form__textarea {
background-color: #FFFFFF;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
min-height: 8.4375rem;
width: 33.1875rem;
margin-top: initial;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__textarea {
width: 18.9375rem;
margin-top: 0.5rem;
}
}
.profile-form__privacy {
text-align: center;
margin-top: 1.25rem;
}
@media screen and (max-width: 765px) {
.profile-form__privacy {
margin-top: initial;
}
}
.profile-form__privacy-label {
font-size: 1.125rem;
line-height: 1.2222222222;
}
@media screen and (max-width: 765px) {
.profile-form__privacy-label {
font-size: 1rem;
line-height: 1.1875;
}
}
.profile-form__privacy-link {
color: #3B6BF0;
}
.profile-form__submit input {
display: block;
width: 15.4375rem;
margin-inline: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF;
font-size: 1.5625rem;
line-height: 1.2;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__submit input {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
.profile-form__submit input:hover {
background-color: #DFDFDF;
}
/* 必須項目エラー用 */
.is-error {
border: 2px solid #e00 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input:invalid {
background-color: lightpink;
}
/*↑*/
.confirm__inner {
margin-top: 2.5625rem;
}
@media screen and (max-width: 765px) {
.confirm__inner {
margin-top: 1.0625rem;
}
}
.confirm__text {
text-align: center;
font-size: 1.4375rem;
line-height: 1.2173913043;
font-weight: 600;
}
@media screen and (max-width: 765px) {
.confirm__text {
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.confirm__table {
margin-top: 5.625rem;
width: 100%;
background-color: #F7F7F8;
padding-block: 3rem 2rem;
padding-left: initial;
}
@media screen and (max-width: 765px) {
.confirm__table {
margin-top: 1.9375rem;
padding-block: 1.5rem 1.625rem;
padding-left: 1.25rem;
}
}
.confirm__table tbody {
display: block;
text-align: left;
width: 32.9375rem;
margin-inline: auto;
}
@media screen and (max-width: 765px) {
.confirm__table tbody {
width: initial;
margin-inline: initial;
}
}
.confirm__table tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
@media screen and (max-width: 765px) {
.confirm__table tr {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.confirm__table th {
width: 16.25rem;
}
@media screen and (max-width: 765px) {
.confirm__table th {
width: initial;
}
}
.confirm__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F7F7F8;
padding-bottom: 4.375rem;
gap: 0.875rem;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.confirm__submit {
gap: 2.4375rem;
padding-bottom: 2rem;
margin-top: 1.125rem;
background-color: initial;
}
}
.confirm__submit input[type=button] {
display: block;
background-color: #B0B0B0;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1.5625rem;
line-height: 1.2;
color: #FFFFFF;
text-align: center;
padding-block: 1.125rem;
max-width: 100%;
width: 15.4375rem;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 765px) {
.confirm__submit input[type=button] {
border-radius: 0.375rem;
width: 8.3125rem;
background-color: #3E3E3E;
font-size: 0.875rem;
line-height: 1.2142857143;
padding-block: 0.5625rem;
}
}
.confirm__submit input[type=button]:hover {
background-color: #333333;
}
.confirm__submit input[type=submit] {
display: block;
background-color: #000000;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1.5625rem;
line-height: 1.2;
color: #FFFFFF;
text-align: center;
padding-block: 1.125rem;
max-width: 100%;
width: 15.4375rem;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 765px) {
.confirm__submit input[type=submit] {
border-radius: 0.375rem;
width: 8.3125rem;
font-size: 0.875rem;
line-height: 1.2142857143;
padding-block: 0.5625rem;
}
}
.confirm__submit input[type=submit]:hover {
background-color: #B0B0B0;
}
/*以下が確認画面の入力戻るボタンと登録するボタン*/
#entry-confirm .return-confirm-btn-wrap {
display: flex;
justify-content: center; /* 中央揃え */
gap: 1rem; /* ボタン間の余白 */
}
@media(max-width:500px) {
#entry-confirm .return-confirm-btn-wrap {
display: flex;
justify-content: center;
gap: 1rem;
flex-direction: column;
align-content: stretch;
align-items: center;
}
}
/* ===== return ボタン ===== */
#entry-confirm .profile-form__return {
display: block;
width: 15.4375rem;
background-color: #e9e9e9;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #3E3E3E;
font-size: 1.5625rem;
line-height: 1.2;
font-weight: 500;
border: none;
cursor: pointer;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
#entry-confirm .profile-form__return:hover {
background-color: #DFDFDF;
}
@media screen and (max-width: 765px) {
#entry-confirm .profile-form__return {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
/* ===== registration ボタン ===== */
#entry-confirm .profile-form__registration {
display: block;
width: 15.4375rem;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF !important;
font-size: 1.5625rem;
line-height: 1.2;
font-weight: 500;
border: none;
cursor: pointer;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
#entry-confirm .profile-form__registration button.btn-primary {
color: #ffffff;
}
#entry-confirm .profile-form__registration:hover {
background-color: #DFDFDF;
}
@media screen and (max-width: 765px) {
#entry-confirm .profile-form__registration {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
#entry-confirm .profile-form__registration input {
color: #FFFFFF !important;
}
/*9.送信完了画面 url(/job/entry/complete) blade名（job/entry/complete.blade.php）*/
.contact {
margin-top: 100px;
margin-bottom: 100px;
}
.thanks__container {
margin-inline: auto;
border: 3px solid #000000;
border-radius: 1.25rem;
padding-block: 4.8125rem 3.1875rem;
position: relative;
text-align: center;
margin: 0 auto;
}
@media screen and (max-width: 765px) {
.thanks__container {
margin-top: 2.0625rem;
max-width: initial;
padding-block: 2.5rem 9.75rem;
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 1000px) {
.thanks__container {
margin-left: 0;
margin-right: 0;
}
}
#thanks h3 {
font-size: 30px;
text-align: center;
}
#thanks .section-title {
margin: 6.9vw;
}
#thanks .contact {
margin: 4.5vw 5.5vw 0 17.75rem;
}
.thanks__container::after {
content: "";
position: absolute;
background-image: url(../images/thanks.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 8.5rem;
height: 11.125rem;
bottom: 0;
right: 0.75rem;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 765px) {
.thanks__container::after {
width: 6.4375rem;
height: 8.4375rem;
left: 50%;
right: initial;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.thanks__title {
text-align: center;
font-weight: 600;
font-size: clamp(20px, 1.1vw, 25px);
line-height: 1.5;
}
@media screen and (max-width: 765px) {
.thanks__title {
font-size: 1.25rem;
line-height: 1.2;
}
}
.thanks__text {
margin-top: 2.625rem;
margin-bottom: 2.625rem;
width: 100%;
max-width: 48rem;
margin-inline: auto;
text-align: center;
font-weight: 500;
font-size: 1.375rem;
line-height: 1.1818181818;
}
@media screen and (max-width: 765px) {
.thanks__text {
margin-top: 1.625rem;
max-width: 14.5rem;
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.thanks__button {
display: block;
width: 15.4375rem;
margin-inline: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF;
font-size: 1.5625rem;
line-height: 1.2;
margin: 6.9vw auto 6.9vw 49vw;
}
@media (min-width: 768px) and (max-width: 1000px) {
.thanks__button {
margin: 2rem auto 0;
}
}
@media screen and (max-width: 765px) {
.thanks__button {
width: 12rem;
border-radius: 0.375rem;
padding-block: 0.75rem;
font-size: 1.125rem;
line-height: 1.2222222222;
margin: 2rem auto 0;
}
}
/*10.運用会社 url(/job/company) blade名（job/company.blade.php）*/
/* 黒は141414 */
:root {
--font-weight-black: 900;
--font-weight-medium: 500;
--color-black: #141414;
}
#companyInfo {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 50px;
padding-right: calc(max(102px, 10vw));
margin: 0 0 6.9vw 23.25vw; /* */
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 10vw));
padding-right: calc(max(10px, 10vw));
/* ーーー */
margin: 0;
}
}
#companyInfo h1 {
font-size: 30px;
margin-bottom: 2.5vw;
@media screen and (max-width: 765px) {
font-size: 20px;
}
}
#companyInfo .company__info-title {
font-size: 18px;
letter-spacing: calc(25px * 0.1);
@media screen and (max-width: 765px) {
font-size: 16px;
}
}
#companyInfo p {
font-size: 16px;
margin-bottom: 2.0vw;
letter-spacing: calc(16px * 0.1); /* フォントサイズの10% */
font-weight: var(--font-weight-medium);
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの10% */
line-height: calc(14px * 1.5);
margin-top: 0px;
}
}
#companyInfo ul.business__content {
padding-left: 0px;
letter-spacing: calc(16px * 0.1);
li {
list-style: none;
font-size: 18px;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの10% */
}
}
p {
line-height: 25px;
}
}
#companyInfo .license__number-area {
border-top: var(--color-black) solid 1px;
padding-top: 23px;
padding-bottom: 74px;
margin-top: 63px;
}
#companyInfo .license,
#companyInfo .license__number {
font-size: 18px;
line-height: 25px;
letter-spacing: calc(18px * 0.1); /* フォントサイズの10% */
margin: 0px;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの10% */
}
}
#companyInfo .license__number {
color: #d81111;
margin: 0px;
}
#companyInfo a {
color: #266FC4;
border-bottom: 1px solid #266FC4;
}
#companyInfo a:hover {
opacity: 0.5;
}
/*11.利用規約 url(/job/term) blade名（job/term.blade.php）*/
/* 黒は141414 */
:root {
--font-weight-black: 900;
--font-weight-medium: 500;
--color-black: #141414;
}
#terms {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
font-weight: var(--font-weight-medium);
margin-bottom: 94px;
text-align: left;
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 50px;
padding-right: calc(max(102px, 10vw));
margin: 0 0 6.9vw 23.25vw;
/* */
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 10vw));
padding-right: calc(max(10px, 10vw));
margin: 0;
}
}
#terms h1.title {
font-size: 30px;
margin-bottom: 38px;
letter-spacing: calc(25px * 0.1);
@media screen and (max-width: 765px) {
font-size: 18px;
}
}
#terms .section__title {
text-align: left;
font-size: 20px;
font-weight: var(--font-weight-medium);
margin-top: 24px;
margin-bottom: 0px;
letter-spacing: calc(20px * 0.1);
font-weight: 900;
@media screen and (max-width: 765px) {
font-size: 16px;
margin-bottom: 8px;
letter-spacing: calc(16px * 0.1);
}
}
#terms .term-index {
font-size: 18px;
letter-spacing: calc(18px * 0.1);
padding-left: 50px;
margin-bottom: 55px;
@media screen and (max-width: 765px) {
font-size: 16px;
margin-bottom: 38px;
padding-left: 20px;
letter-spacing: calc(16px * 0.1);
}
li {
margin-bottom: 16px;
list-style-position: inside;
@media screen and (max-width: 765px) {
margin-bottom: 8px;
}
}
}
#terms p {
margin-top: 10px;
margin-bottom: 0.5vw;
font-size: 16px;
letter-spacing: calc(16px * 0.1);
line-height: 1.4;
@media screen and (max-width: 765px) {
font-size: 14px;
margin-top: 8px;
margin-bottom: 8px;
letter-spacing: calc(14px * 0.1);
}
}
#terms p:last-child {
/* 最後のpタグのみ */
margin-top: 11px;
margin-bottom: 30px;
}
#terms h3 {
font-size: clamp(16px, 1.25vw, 18px);
margin-bottom: 0.5vw;
}
#terms ul li {
font-size: clamp(14px, 1.25vw, 16px);
}
#terms ul li:last-child {
/* 最後のpタグのみ */
margin-bottom: 0.5vw;
}
/*12.セキュリティ方針 url(/job/security) blade名（job/security.blade.php）*/
/* 黒は141414 */
:root {
--font-weight-black: 900;
--font-weight-medium: 500;
--color-black: #141414;
}
#security-policy {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 50px;
padding-bottom: 160px;
padding-right: calc(max(102px, 10vw));
margin: 0 0 6.9vw 23.25vw;
/* */
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-bottom: 60px;
padding-left: calc(max(10px, 10vw));
padding-right: calc(max(10px, 10vw));
/* ーーー */
margin: 0;
}
}
#security-policy h1.title {
font-size: 30px;
margin-bottom: 3.0vw;
@media screen and (max-width: 765px) {
font-size: 18px;
}
}
#security-policy .sub__title {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 0px;
@media screen and (max-width: 765px) {
font-size: 16px;
margin-bottom: 8px;
}
}
#security-policy p {
font-size: 16px;
line-height: 25px;
letter-spacing: calc(16px * 0.1); /* フォントサイズの10% */
font-weight: 500;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの10% */
line-height: calc(14px * 1.5);
margin-top: 0px;
}
}
.footer {
padding-left: 300px;
@media screen and (max-width: 765px) {
padding-left: 20px;
}
}
/*13.プライバシーポリシー url(/job/privacy) blade名（job/privacy.blade.php）*/
/* 黒は141414 */
:root {
--font-weight-black: 900;
--font-weight-medium: 500;
--color-black: #141414;
}
#privacy__policy {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans JP", sans-serif;
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 50px;
padding-right: calc(max(102px, 10vw));
margin: 0 0 6.9vw 23.25vw;
/* */
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 10vw));
padding-right: calc(max(10px, 10vw));
margin: 0;
/* ーーー */
}
}
#privacy__policy .title {
font-size: 25px;
@media screen and (max-width: 765px) {
font-size: 18px;
}
}
#privacy__policy .sub__title {
font-size: 20px;
font-weight: bold;
margin-top: 25px;
margin-bottom: 15px;
@media screen and (max-width: 765px) {
font-size: 16px;
margin-bottom: 15px;
}
}
#privacy__policy .policy__clause {
font-size: 18px;
margin-bottom: 16px;
margin-top: 15px;
@media screen and (max-width: 765px) {
font-size: 15px;
margin-top: 15px;
}
}
#privacy__policy .policy__paragraph {
font-size: 16px;
line-height: 25px;
letter-spacing: calc(16px * 0.1); /* フォントサイズの8% */
font-weight: 500;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの8% */
line-height: calc(14px * 1.5);
}
}
#privacy__policy .policy__list {
padding-left: 30px;
@media screen and (max-width: 765px) {
padding-left: 0px;
text-indent: -16px;
}
li {
list-style: none;
font-size: 16px;
line-height: 25px;
letter-spacing: calc(16px * 0.1); /* フォントサイズの8% */
font-weight: 500;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの8% */
line-height: calc(14px * 1.5);
padding-left: 30px;
/* text-indent: -30px; */
}
}
}
#privacy__policy .revision__section {
display: flex;
justify-content: flex-end;
margin-top: 30px;
font-size: 16px;
}
.footer {
padding-left: 300px;
@media screen and (max-width: 765px) {
padding-left: 20px;
}
}
/*14.取り扱いの範囲 url(/job/occupation) blade名（job/occupation.blade.php）*/
/* 黒は141414 */
:root {
--font-weight-black: 900;
--font-weight-medium: 500;
--color-black: #141414;
}
#jobtypes {
/* 全体で色を指定する：黒 */
color: var(--color-black);
font-family: "Noto Sans", sans-serif;
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 50px;
padding-bottom: 160px;
padding-right: calc(max(102px, 10vw));
margin: 0 0 6.9vw 23.25vw;
/* */
@media screen and (max-width: 1000px) {
/* ーーーあとで共通にするか相談する。ーーー */
padding-top: 90px;
padding-left: calc(max(10px, 10vw));
padding-right: calc(max(10px, 10vw));
/* ーーー */
margin: 0;
}
}
#jobtypes .title {
font-size: 30px;
@media screen and (max-width: 765px) {
font-size: 18px;
}
}
#jobtypes .sub__title {
font-size: 20px;
font-weight: bold;
margin-top: 25px;
@media screen and (max-width: 765px) {
font-size: 16px;
}
}
#jobtypes h3 {
font-size: 18px;
}
#jobtypes .jobtypes__clause {
font-size: 18px;
margin-top: 25px;
font-weight: 700;
@media screen and (max-width: 765px) {
font-size: 15px;
margin-top: 15px;
}
}
#jobtypes .jobtypes__paragraph {
font-size: 16px;
letter-spacing: calc(16px * 0.1); /* フォントサイズの8% */
font-weight: 500;
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの8% */
line-height: calc(14px * 1.5);
}
}
#jobtypes .jobtypes__list {
padding-left: 30px;
@media screen and (max-width: 765px) {
padding-left: 0px;
text-indent: -16px;
}
li {
list-style: none;
font-size: 16px;
line-height: 25px;
letter-spacing: calc(16px * 0.1); /* フォントサイズの8% */
@media screen and (max-width: 765px) {
font-size: 14px;
letter-spacing: calc(14px * 0.1); /* フォントサイズの8% */
line-height: calc(14px * 1.5);
padding-left: 30px;
/* text-indent: -30px; */
}
}
}
#jobtypes .revision__section {
display: flex;
justify-content: flex-end;
margin-top: 30px;
}
.footer {
padding-left: 300px;
@media screen and (max-width: 765px) {
padding-left: 20px;
}
}
#jobtypes a {
color: #266FC4;
}
/*15.お役立ち情報の下層ページ１ITキャリアパス url(/job/useful/detail/example4) blade名（job/useful/detail/example4.blade.php）*/
.career-path {
margin-top: 163px;
margin-inline: auto;
margin: 12.5vw 7vw 0 13vw;
}
@media(max-width:1000px) {
.career-path {
margin: 150px 0 20px 0;
}
}
@media screen and (max-width:765px) {
.career-path {
padding-inline: 16px;
margin-top: 108px;
}
}
.career-path__time {
font-size: 16px;
font-weight: 500;
}
.career-path__title {
margin-top: 9px;
font-size: 33px;
font-weight: bold;
line-height: calc(45/33);
letter-spacing: 0.08em;
}
@media screen and (max-width:765px) {
.career-path__title {
font-size: 24px;
}
}
.career-path__container {
display: grid;
gap: 40px;
}
@media screen and (max-width:765px) {
.it-industry__container {
gap: 32px;
}
}
.career-path__text {
margin-top: 35px;
font-size: 18px;
}
.career-path__heading {
font-size: 27px;
font-weight: 600;
line-height: calc(37/27);
letter-spacing: 0.05em;
border-left: 3px solid #266FC4;
padding-left: 14px;
}
.career-path__image-placeholder {
margin-top: 44px;
max-width: 978px;
}
.career-path__job-wrapper {
display: grid;
gap: 30px;
margin-top: 48px;
}
.career-path__job-content {
margin-top: 20px;
border: 2px solid #266FC4;
border-radius: 10px;
padding: 20px 32px;
max-width: 1038px;
}
@media screen and (max-width:765px) {
.career-path__job-content {
max-width: 100%;
}
}
.career-path__job-label {
font-size: 15px;
font-weight: 600;
line-height: calc(20/15);
}
.career-path__job-list {
margin-top: 7px;
}
.career-path__job-role {
font-size: 15px;
font-weight: 400;
line-height: calc(20/15);
min-width: 113px;
display: inline-block;
}
.career-path__list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 40px;
}
.career-path__item {
display: flex;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
}
.career-path__left,
.career-path__right {
border: 2px solid #266FC4;
border-radius: 10px;
padding: 10px 15px;
font-weight: bold;
}
.career-path__left {
flex: 0 0 150px;
text-align: center;
margin-right: 10px;
}
.career-path__arrow {
font-size: 24px;
margin-right: 10px;
}
@media screen and (max-width:765px) {
.career-path__right {
width: 100%;
}
}
.career-path__text-summary {
font-size: 18px;
}
.career-path ul li {
font-size: 16px;
}
.career-path ul li span.career-path__job-role {
font-size: 16px;
font-weight: 700;
}
/*16.お役立ち情報の下層ページ２IT業界の仕組み url(/job/useful/detail/example1) blade名（job/useful/detail/example1.blade.php）*/
.it-industry {
margin-top: 163px;
max-width: 1031px;
margin-inline: auto;
margin-bottom: 163px;
}
@media screen and (max-width:1000px) {
.it-industry {
padding-inline: 16px;
margin-top: 108px;
}
}
.it-industry__time {
font-size: 16px;
font-weight: 500;
}
.it-industry__title {
margin-top: 9px;
font-size: 33px;
font-weight: bold;
line-height: calc(45/33);
letter-spacing: 0.08em;
}
@media screen and (max-width:765px) {
.it-industry__title {
font-size: 24px;
}
}
.it-industry__container {
display: grid;
gap: 40px;
margin-top: 81px;
}
@media screen and (max-width:765px) {
.it-industry__container {
gap: 32px;
margin-top: 60px;
}
}
.it-industry__heading {
font-size: 27px;
font-weight: 600;
line-height: calc(37/27);
letter-spacing: 0.05em;
border-left: 3px solid #266FC4;
padding-left: 14px;
}
.it-industry__text {
margin-top: 20px;
font-size: 16px;
line-height: calc(25/16);
letter-spacing: 0.05em;
padding-left: 14px;
max-width: 80%;
}
.it-industry__image-placeholder {
margin-top: 44px;
max-width: 978px;
}
.it-industry__job-wrapper {
display: grid;
gap: 30px;
margin-top: 48px;
}
.it-industry__job-title {
font-size: 18px;
line-height: calc(25/18);
color: #141414;
font-weight: 600;
}
.it-industry__job-text {
margin-left: 18px;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
}
.it-industry__job-content {
margin-top: 20px;
border: 2px solid #266FC4;
border-radius: 10px;
padding: 20px 32px;
max-width: 600px;
}
.it-industry__job-label {
font-size: 15px;
font-weight: 600;
line-height: calc(20/15);
}
.it-industry__job-list {
margin-top: 7px;
}
.it-industry__job-content ul li {
font-size: 16px;
}
.it-industry__job-content ul li span.it-industry__job-role{
font-size: 16px;
font-weight: 700;
}
.it-industry__job-role {
font-size: 18px;
font-weight: 400;
line-height: calc(20/15);
display: inline-block;
}
.it-industry__job-block:nth-child(1) .it-industry__job-role {
min-width: 187px;
}
.it-industry__job-block:nth-child(2) .it-industry__job-role {
min-width: 140px;
}
.it-industry__job-block:nth-child(3) .it-industry__job-role {
min-width: 114px;
}
.it-industry__job-block:nth-child(4) .it-industry__job-role {
min-width: 140px;
}
.it-industry__job-block:nth-child(5) .it-industry__job-role {
min-width: 169px;
}
.it-industry__block {
margin-top: 66px;
}
.it-industry__block-heading {
font-size: 18px;
font-weight: 600;
line-height: calc(25/18);
}
.it-industry__flow {
margin-top: 19px;
}
.it-industry__flow-item {
font-size: 16px;
font-weight: 400;
line-height: calc(25/16);
letter-spacing: 0.05em;
}
article.it-industry {
margin: 4.5vw 0 0 13vw;
}
@media(max-width:1000px){
article.it-industry {
margin-left: 0;
}
}
/*17.トップページ url(/job) blade名（job/top.blade.php）*/
/*18.トップページ url(/job) blade名（job/top.blade.php）*/
/*19.トップページ url(/job) blade名（job/top.blade.php）*/
/*email入力確認画面 url(/job/email/confirm) blade名（job/entry/confirm.blade.php） */
html {
/* 一旦%部分をコメントアウト */
/* 16px * 62.5% = 10px */
width: 100%;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
color: #000000; /* RGB */
font-family: "Noto sans JP", serif;
font-size: 1.6rem;
text-align: left;
font-style: normal;
}
/*7.エントリー url(/job/email) blade名（job/entry.blade.php）*/
.contact {
margin-inline: 2.0625rem 2.1875rem;
margin-block: 3.25rem;
}
@media screen and (max-width: 765px) {
.contact {
margin-block: 6.375rem 2rem;
margin-inline: 1rem;
}
}
/*ここに説明文が入ります*/
.confirm-description {
font-weight: 500;
color: red;
text-align: center;
font-size: clamp(11px, 1.1vw, 14px);
margin-bottom: 10px;
margin-top: 30px;
margin: 4.5vw 5.5vw 0 17.75rem;
}
#email-input .profile-form {
background-color: #F7F7F8;
padding: 3.5rem 4.25rem 2.8125rem 3.125rem;
margin: 4.5vw 11vw;
}
@media screen and (max-width: 765px) {
.profile-form {
padding-inline: 1.25rem;
padding-block: 3.125rem 2.6875rem;
margin: 0;
}
}
@media(max-width:1000px) {
#email-input .profile-form {
margin: 0 auto;
}
}
@media(max-width:400px) {
#email-input .profile-form {
padding: 0;
}
}
.profile-form__form {
display: -ms-grid;
display: grid;
gap: 2rem;
}
#entry-confirm .profile-form__group {
align-items: flex-start;
display: flex;
flex-direction: row;
}
#entry-confirm .profile-form__row-item {
display: flex;
}
@media(max-width:1000px) {
.profile-form {
margin: 0 auto;
width: min-content;
}
}
@media(max-width:1000px) {
#email-confirm .profile-form {
margin: 0 auto;
width: fit-content;
}
}
@media(max-width:1000px){
#entry-confirm .profile-form {
width: fit-content;
}
}
@media screen and (max-width: 765px) {
.profile-form__form {
gap: 2.6875rem;
}
}
.profile-form__inner {
position: relative;
}
.profile-form__required-item {
position: absolute;
top: 0;
right: 0;
}
.profile-form__wrapper {
display: -ms-grid;
display: grid;
gap: 1.5rem;
width: fit-content;
margin-bottom: 5.5vw;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper {
gap: 1.25rem;
}
}
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
/*width: 24.75rem;*/
font-size: 16px;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--address input,
.profile-form__wrapper.profile-form__wrapper--address select {
width: auto;
}
}
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: min-content;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper.profile-form__wrapper--school input,
.profile-form__wrapper.profile-form__wrapper--school select {
width: 19.1875rem;
}
}
.profile-form__heading {
font-size: 1.5625rem;
line-height: 1.2;
margin-bottom: 0.875rem;
}
@media screen and (max-width: 765px) {
.profile-form__heading {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
#entry-confirm.profile-form__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media(max-width:1437px) {
.profile-form__group {
flex-direction: column;
align-items: flex-start;
display: flex;
}
}
@media screen and (max-width: 1200px) {
.profile-form__group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
align-items: initial;
text-align: left;
}
}
.profile-form__group:has(textarea) {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.profile-form__group.profile-form__group--address input {
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--address input {
width: 19.1875rem;
}
}
.profile-form__label {
min-width: 18.75rem;
font-size: 14px;
line-height: 1.2222222222;
font-weight: 500;
display: flex;
}
@media screen and (max-width: 765px) {
.profile-form__label {
min-width: initial;
font-size: 1rem;
line-height: 1.1875;
}
}
#email-input .apply__annotation {
font-weight: 500;
color: red;
text-align: center;
font-size: clamp(11px, 1.1vw, 14px);
margin-bottom: 10px;
margin: 2.0vw 0 0 0;
}
@media(max-width:1000px) {
#email-input .apply__annotation {
margin: 6.9vw 0;
}
}
.profile-form__required {
color: #FD5E17;
margin-left: 0.3125rem;
font-weight: 500;
font-size: 16px;
}
.profile-form__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
margin-top: initial;
font-weight: 500;
align-items: flex-end;
}
@media screen and (max-width: 765px) {
.profile-form__row {
gap: 1.8125rem;
margin-top: 0.1875rem;
}
}
.profile-form__row:has(select) {
gap: 1rem;
}
@media screen and (max-width: 765px) {
.profile-form__row:has(select) {
gap: 0.375rem;
}
}
.profile-form__row-item span {
display: block;
font-size: 1rem;
line-height: 1.1875;
font-weight: 500;
margin-bottom: 0.625rem;
text-align: left;
}
@media screen and (max-width: 765px) {
.profile-form__row-item span {
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.profile-form__row.profile-form__row--graduate select {
width: initial;
}
.profile-form__group.profile-form__group--jlpt select {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__group.profile-form__group--jlpt select {
width: 9.75rem;
}
}
.profile-form__input {
background-color: #FFFFFF;
border: 1px solid #9F9D9D;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border-radius: 0.25rem;
width: 90%;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.profile-form__input {
width: 8.625rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select {
background-color: #FFFFFF;
padding: 0.875rem 0.8rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
width: max-content;
margin-top: initial;
font-weight: 500;
font-size: 16px;
}
@media screen and (max-width: 765px) {
.profile-form__select {
width: 11.125rem;
padding-block: 0.5rem 0.6875rem;
padding-inline: 0.875rem 0.625rem;
margin-top: 0.5rem;
}
}
.profile-form__select.profile-form__select--birthday {
width: initial;
}
@media screen and (max-width: 765px) {
.profile-form__select.profile-form__select--birthday {
width: 4.875rem;
}
}
.profile-form__radio-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5.0625rem;
font-weight: 500;
font-size: 16px;
}
@media screen and (max-width: 765px) {
.profile-form__radio-group {
gap: 2.125rem;
font-size: 16px;
}
}
.profile-form__wrapper.profile-form__wrapper--school .profile-form__radio-group {
gap: 1.25rem;
font-size: 16px;
}
.profile-form__radio input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 13px;
height: 13px;
border: 1px solid #9F9D9D;
border-radius: 50%;
cursor: pointer;
background-color: #FFFFFF;
}
/* チェックされたラジオボタン内側のスタイル */
.profile-form__radio input[type=radio]::before {
background-color: blue;
border-radius: 50%;
bottom: 0;
content: "";
height: 9px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 9px;
}
/* チェックされたらラジオボタン内側を表示 */
.profile-form__radio input[type=radio]:checked::before {
opacity: 1;
}
.profile-form__textarea {
background-color: #FFFFFF;
padding-block: 0.8125rem 0.5625rem;
padding-inline: 0.875rem;
border: 1px solid #9F9D9D;
border-radius: 0.25rem;
min-height: 8.4375rem;
width: 33.1875rem;
margin-top: initial;
font-size: 1.3rem;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__textarea {
width: 18.9375rem;
margin-top: 0.5rem;
}
}
.profile-form__privacy {
text-align: center;
margin-top: 1.25rem;
}
@media screen and (max-width: 765px) {
.profile-form__privacy {
margin-top: initial;
}
}
.profile-form__privacy-label {
font-size: 1.125rem;
line-height: 1.2222222222;
margin-bottom: 40px;
display: block;
}
@media screen and (max-width: 765px) {
.profile-form__privacy-label {
font-size: 1rem;
line-height: 1.1875;
}
}
.profile-form__privacy-link {
color: #3B6BF0;
}
.profile-form__submit input {
display: block;
width: 15.4375rem;
margin-inline: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF;
font-size: 1.5625rem;
line-height: 1.2;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
font-weight: 500;
}
@media screen and (max-width: 765px) {
.profile-form__submit input {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
.profile-form__submit input:hover{
color: inherit !important;
background-color: #3E3E3E !important; /* 元の色を維持 */
color: #FFFFFF !important;
}
/* 必須項目エラー用 */
.is-error {
border: 2px solid #e00 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input:invalid {
background-color: lightpink;
}
/*↑*/
.confirm__inner {
margin-top: 2.5625rem;
}
@media screen and (max-width: 765px) {
.confirm__inner {
margin-top: 1.0625rem;
}
}
.confirm__text {
text-align: center;
font-size: 1.4375rem;
line-height: 1.2173913043;
font-weight: 600;
}
@media screen and (max-width: 765px) {
.confirm__text {
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.confirm__table {
margin-top: 5.625rem;
width: 100%;
background-color: #F7F7F8;
padding-block: 3rem 2rem;
padding-left: initial;
}
@media screen and (max-width: 765px) {
.confirm__table {
margin-top: 1.9375rem;
padding-block: 1.5rem 1.625rem;
padding-left: 1.25rem;
}
}
.confirm__table tbody {
display: block;
text-align: left;
width: 32.9375rem;
margin-inline: auto;
}
@media screen and (max-width: 765px) {
.confirm__table tbody {
width: initial;
margin-inline: initial;
}
}
.confirm__table tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
@media screen and (max-width: 765px) {
.confirm__table tr {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.confirm__table th {
width: 16.25rem;
}
@media screen and (max-width: 765px) {
.confirm__table th {
width: initial;
}
}
.confirm__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #F7F7F8;
padding-bottom: 4.375rem;
gap: 0.875rem;
margin-top: initial;
}
@media screen and (max-width: 765px) {
.confirm__submit {
gap: 2.4375rem;
padding-bottom: 2rem;
margin-top: 1.125rem;
background-color: initial;
}
}
.confirm__submit input[type=button] {
display: block;
background-color: #B0B0B0;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1.5625rem;
line-height: 1.2;
color: #FFFFFF;
text-align: center;
padding-block: 1.125rem;
max-width: 100%;
width: 15.4375rem;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 765px) {
.confirm__submit input[type=button] {
border-radius: 0.375rem;
width: 8.3125rem;
background-color: #3E3E3E;
font-size: 0.875rem;
line-height: 1.2142857143;
padding-block: 0.5625rem;
}
}
.confirm__submit input[type=button]:hover {
background-color: #333333;
}
.confirm__submit input[type=submit] {
display: block;
background-color: #000000;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1.5625rem;
line-height: 1.2;
color: #FFFFFF;
text-align: center;
padding-block: 1.125rem;
max-width: 100%;
width: 15.4375rem;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
}
@media screen and (max-width: 765px) {
.confirm__submit input[type=submit] {
border-radius: 0.375rem;
width: 8.3125rem;
font-size: 0.875rem;
line-height: 1.2142857143;
padding-block: 0.5625rem;
}
}
.confirm__submit input[type=submit]:hover {
background-color: #B0B0B0;
}
/*以下が確認画面の入力戻るボタンと登録するボタン*/
.return-confirm-btn-wrap {
display: flex;
justify-content: center; /* 中央揃え */
gap: 1rem; /* ボタン間の余白 */
flex-wrap: wrap;
}
@media(max-width:500px) {
.return-confirm-btn-wrap {
display: flex;
justify-content: center;
gap: 1rem;
flex-direction: column;
align-content: stretch;
align-items: center;
}
}
/* ===== return ボタン ===== */
.profile-form__return {
display: block;
width: auto;
background-color: #B0B0B0;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #3E3E3E;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
border: none;
cursor: pointer;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
padding-left: 10px;
padding-right: 10px;
}
#entry-confirm .profile-form__return:hover {
background-color: #DFDFDF;
}
@media screen and (max-width: 765px) {
#entry-confirm .profile-form__return {
width: 12rem;
padding-block: 0.6875rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
/* ===== registration ボタン ===== */
.profile-form__registration {
display: block;
width: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF!important;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
border: none;
cursor: pointer;
-webkit-transition: color 0.3s ease, background-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease;
padding-left: 10px;
padding-right: 10px;
}
@media screen and (max-width: 765px) {
.profile-form__registration {
line-height: 1.2222222222;
}
}
.profile-form__registration input {
color: #FFFFFF !important;
}
.profile-form__wrapper {
display: -ms-grid;
display: grid;
gap: 1.5rem;
width: inherit;
margin-bottom: 5.5vw;
}
@media screen and (max-width: 765px) {
.profile-form__wrapper {
gap: 1.25rem;
padding: 5px;
}
}
@media screen and (max-width: 765px) {
#email-input .profile-form__wrapper {
padding: 10px;
}
}
@media screen and (max-width: 765px) {
#email-input .profile-form__required {
margin-top: 0.3125rem;
margin-right: 0.3125rem;
}
}
.profile-form__wrapper {
margin-bottom: 0;
}
.profile-form__registration input:hover{
color: inherit !important;
background-color: #3E3E3E !important; /* 元の色を維持 */
color: #FFFFFF !important;
}
#email-confirm .confirm-description {
margin-left: 0;
}
#email-confirm .section-title {
margin-left: 0;
}
/*9.email完了画面 url(/job/email/complete) blade名（job/entry/complete.blade.php）*/
.contact {
margin-top: 100px;
margin-bottom: 100px;
}
.thanks__container {
margin-top: 6.9vw;
max-width: 66rem;
border: 3px solid #000000;
border-radius: 1.25rem;
padding-block: 4.8125rem 3.1875rem;
position: relative;
margin: 0 auto;
}
@media screen and (max-width: 765px) {
.thanks__container {
margin-top: 2.0625rem;
max-width: initial;
}
}
.thanks__container::after {
content: "";
position: absolute;
background-image: url(../images/thanks.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 8.5rem;
height: 11.125rem;
bottom: 0;
right: 0.75rem;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 1300px) {
.thanks__container::after {
display: none;
width: 6.4375rem;
height: 8.4375rem;
left: 50%;
right: initial;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.thanks__title {
text-align: center;
font-weight: 600;
font-size: 1.75rem;
line-height: 1.5;
}
@media screen and (max-width: 765px) {
.thanks__title {
font-size: 1.25rem;
line-height: 0.6;
}
}
.thanks__text {
margin-top: 2.625rem;
margin-bottom: 10px;
width: 100%;
max-width: 48rem;
margin-inline: auto;
text-align: center;
font-weight: 500;
font-size: 16px;
line-height: 1.1818181818;
}
@media screen and (max-width: 765px) {
.thanks__text {
margin-top: 1.625rem;
max-width: 90%;
font-size: 0.875rem;
line-height: 1.2142857143;
}
}
.thanks__button {
display: block;
width: 15.4375rem;
margin-inline: auto;
background-color: #3E3E3E;
border-radius: 0.75rem;
padding-block: 1.0625rem;
text-align: center;
color: #FFFFFF;
font-size: 1.5625rem;
line-height: 1.2;
margin-top: 6.9vw;
}
@media screen and (max-width: 765px) {
.thanks__button {
margin-top: 2.0625rem;
width: 12rem;
border-radius: 0.375rem;
padding-block: 0.75rem;
font-size: 1.125rem;
line-height: 1.2222222222;
}
}
#thanks.profile-form__group.profile-form__group--address {
text-align: center;
}
@media (max-width: 1437px) {
#thanks.profile-form__group {
flex-direction: column;
align-items: flex-start;
row-gap: 0;
display: flex;
align-items: center;
}
}
#email-complete .email__label {
text-align: center;
}
.thanks__button:hover{
color: inherit !important;
background-color: #222222 !important; /* 元の色を維持 */
color: #FFFFFF !important;
}
@media(max-width:1437px) {
#email-confirm .profile-form__group {
flex-direction: column;
align-items: flex-start;
display: flex;
}
}
#email-confirm .profile-form__label {
text-align: left
}
#email-complete .profile-form__row-item span {
text-align: center;
color: #e00;
}
@media(max-width:1437px) {
#email-complete .profile-form__group {
flex-direction: column;
align-items: center;
display: flex;
}
}
.profile-form__registration button {
color: #ffffff;
}
.profile-form__group.profile-form__group--address {
display: flex;
flex-direction: column;
}
#email-complete .profile-form__group.profile-form__group--address {
align-items: center;
}
#email-complete .profile-form__label {
justify-content: center;
}
@media(max-width:1440px) {
.thanks__container {
max-width: 50rem;
}
}
#apply .profile-form__heading {
margin-bottom: 0;
}
/*
#email-complete .thanks__container {
max-width: none;
margin: 20px 3.7vw 0px 17.5vw;
width: auto;
}
@media(max-width:1440px) {
#email-complete .thanks__container {
margin-left: auto;
margin-right: auto;
}
}*/
#email-complete .section-title {
margin: 0;
margin-bottom: 20px;
}
#email-complete .thanks__button {
margin-top: 50px;
}