/*┌──────────────────────────────────────
/*│ スタイルシート v0.0.1 (2017/01/05)
/*│ style.css
/*└─────────────────────────────────────*/
/*-- [ メイン ] --------------------------------------------------------------*/
#CoverPicture {
position: relative;
height: min(12.5vw);
width: 100%;
}
#CoverPicture br {display: none;}
@media screen and (max-width: 640px) {
#CoverPicture {
/*height: auto;*/
/*padding-top: 112.2666666667vw;*/
padding-top: 30vw;
}
#CoverPicture br {display: inline;}
}
#CoverPicture > * {
position: relative;
}
#CoverPicture > img#CoverPictureSmart {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: 50% 68%;
position: absolute;
width: 100%;
}
#CoverPictureSupport > img#CoverPictureSmart {
display: block;
margin: 80px auto 0;
width: 500px;
}
#CoverPicture>div:nth-of-type(1) {
width: 100%;
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-40%);
transform: translateX(-50%);
text-align: center;
font-size: 1.5vw;
line-height: 110%;
font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
#CoverPicture>div:nth-of-type(1)>span {
color: #FFFF00;
text-shadow:
.03em .03em .02em #009cd9,
-.03em .03em .02em #009cd9,
-.03em -.03em .02em #009cd9,
.03em -.03em .02em #009cd9;
}
@media screen and (max-width: 640px) {
#CoverPicture {
height: 4.5vw;
}
#CoverPicture > img#CoverPictureSmart {
/*height: 112.5333333333vw;*/
/*height: 180.5333333333vw;*/
object-position: 50% 63%;
top: 0;
}
#CoverPicture>div:nth-of-type(1) {
top: 15%;
left: 50%;
transform: translateY(-15%);
transform: translateX(-50%);
font-size: 4vw;
}
}
/*------------------------------------*/
/* 採用申込フォーム */
#Application>p {
width: 80%;
margin:0 auto;
}
#Application table {
border-top : 2px solid #f08e59;
border-bottom : 2px solid #f08e59;
width: 95%;
border-collapse: collapse;
border-spacing: 0;
margin:0 auto 30px;
}
#Application th,
#Application td {
color:#000;
padding: 25px;
background : #FFF url( '../assets/images/dot_table.gif' ) top left repeat-x;
line-height:180%;
font-size: 22px; font-size: 2.2rem;
}
#Application th {
background-color: #fff6c4;
width: 270px;
line-height:125%;
vertical-align:top;
text-align: left;
}
#Application tr.Req>th::before,
#Application tr.Free>th::before {
display: block;
color: #FFF;
width:auto;
padding: 2px;
margin-right:10px;
float: left;
font-size: 16px; font-size: 1.6rem;
}
#Application tr.Req>th::before {
background-color: #ec5f77;
content: "必須";
}
#Application tr.Free>th::before {
background-color: #1891d6;
content: "任意";
margin-right:10px;
}
#Application tr:nth-of-type(1)>th,
#Application tr:nth-of-type(1)>td {
background-image:none;
}
#Application td>span, #Application td>p {
font-size: 162px; font-size: 1.62rem;
line-height:125%;
}
@media screen and (max-width: 767px){
#Application table {
width: 100%;
}
#Application th,
#Application td {
display: block;
padding: 12px;
font-size: 12px; font-size: 1.2rem;
}
#Application th {
width: 100%;
}
#Application td {
width: 100%;
}
}
input[type="text"], input[type="email"], input[type="date"], textarea {width: 480px;}
#birth_yyyy {width: 60px;}
#birth_mm, #birth_dd {width: 40px;}
#graduation {width: 200px;}
#cmnt {
height: 64px;height: 6.4rem;
}
#license_etc {width: 120px;}
select, input, textarea, button {
vertical-align:2px; vertical-align:0.2rem;
margin-right:5px;
}
#Consent {
padding : 5px;
overflow : auto;
width : 480px;
height : 150px;
border : 1px #C6BA9D solid;
font-size: 12px; font-size: 1.2rem;
line-height: 125%;
}
#Application p.Message {text-align: center;}
#Application>form:nth-of-type(1) button {
width: 706px;
height: 142px;
display: block;
border-radius: 10px;
background-color: #E7350D;
color:#FFF;
font-size: 56px; font-size: 5.6rem;
font-weight: bold;
margin:0 auto;
}
#Application>form:nth-of-type(2) button {
width: 706px;
height: 100px;
display: block;
border-radius: 10px;
background-color: #00a6ff;
color:#FFF;
font-size: 36px; font-size: 3.6rem;
font-weight: bold;
margin:0 auto;
}
@media screen and (max-width: 767px){
input[type="text"], input[type="email"], input[type="date"], textarea {width: 100%;}
select, input, textarea, button {
vertical-align:-2px; vertical-align:-0.2rem;
}
#Consent {width: 100%;}
#Application>form:nth-of-type(1) button {
font-size: 28px; font-size: 2.8rem;
width: 250px;
height: 70px;
}
#Application>form:nth-of-type(2) button {
font-size: 18px; font-size: 1.8rem;
width: 250px;
height: 50px;
}
}
.Mono>ul>li+li {
margin-top: 2em;
}
.Chapter > h2::before {
vertical-align: -3px;
content: "";
background: url("/qjin/assets/images/ico_handle32x32.svg") center center no-repeat;
background-size: cover;
display: inline-block;
height: 32px;
width: 32px;
margin-right: 0;
}
/* プログレッシブバー */
.Progressbar {
position: relative;
margin: 0 0 2em;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Progressbar li {
position: relative;
list-style-type: none;
text-align: center;
text-transform: uppercase;
width: 33.333%;
color: #eee;
font-weight: bold;
}
.Progressbar li.active,
.Progressbar li.complete {
color: #d60000;
}
/* マーク */
.Progressbar li:before {
display: block;
width: 32px;
height: 32px;
margin: 1px auto 0.5em auto;
content: '';
border: 3px #bbb solid;
background: url('data:image/svg+xml;utf8,') center center no-repeat #fff;
background-size: cover;
text-align: center;
border-radius: 50%;
}
.Progressbar li.active:before,
.Progressbar li.complete:before {
display: block;
width: 32px;
height: 32px;
margin: 1px auto 0.5em auto;
content: '';
border: 3px #d60000 solid;
background: url('data:image/svg+xml;utf8,') center center no-repeat #fff;
background-size: cover;
text-align: center;
border-radius: 50%;
}
/* 線 */
.Progressbar li:after {
position: absolute;
z-index: -1;
top: 15px;
left: -50%;
width: 100%;
height: 3px;
content: '';
background-color: #bbb;
}
.Progressbar li:first-child:after {
content: none;
}
.Progressbar li.active:after,
.Progressbar li.complete:after {
background-color: #d60000;
}
/*----------------------------------------------------------------------------*/
/* 移植テスト用CSS */
* {
padding: 0;
margin: 0;
word-break: break-all;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
main>article {
font-family: "Noto Sans JP";
line-height: 200%;
}
main>article p {
margin-bottom: 0;
}
#OtamoiForm h1 {
font-size: 40px;
}
#OtamoiForm label,
#OtamoiForm input,
#OtamoiForm select {
font-size: 36px;
}
#OtamoiForm {
border: 3px solid;
border-radius: 125px;
padding: 1em;
}
#OtamoiForm h1 {
text-align: center;
margin: 1em 0;
}
#OtamoiForm>form>div {
display: flex;
justify-content: space-between;
margin: 1.5em;
}
#OtamoiForm>form>div:last-child {
justify-content: flex-end;
margin: 0;
margin-top: 2em;
}
#OtamoiForm form label {
width: 45%;
position: relative;
text-indent: 2em;
padding: .5em;
}
#OtamoiForm form label::before {
content: "";
position: absolute;
background-image: url(img/pic_bus_mark.jpg);
background-size: contain;
width: 2em;
height: 2em;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#OtamoiForm form input:not([type="image"]) {
width: 50%;
border: 3px solid #B4C7E7;
background-color: #DEEBF7;
border-radius: 15px;
padding: .5em;
}
#OtamoiForm form input[type="image"] {
width: 20%;
height: auto;
}
#OtamoiForm form img {
width: 40%;
height: auto;
}
/* success page */
#SuccessMessage p {
font-size: 30px;
white-space: normal;
line-height: 1.4;
}
#SuccessMessage p:first-child {
font-size: 36px;
font-weight: bold;
}
#SuccessMessage p:nth-child(2) {
font-weight: bold;
}
#SuccessMessage {
border: 3px solid;
border-radius: 125px;
padding: 1em;
display: flex;
background-color: #E2F0D9;
}
#SuccessMessage>div:first-child {
width: 30%;
height: 100%;
}
#SuccessMessage>div:first-child img {
width: 95%;
height: auto;
}
#SuccessMessage>div:last-child {
width: 70%;
position: relative;
}
#SuccessMessage>div:last-child::before {
content: "";
position: absolute;
background-image: url(img/pic_logo.svg);
background-repeat: no-repeat;
width: 45%;
height: 30%;
bottom: 0;
}
/* #SuccessMessage>div>p {
margin: 1em 0;
}
#SuccessMessage>div>p:first-child {
margin-top: 1em;
margin: 2em 0;
} */
@media screen and (max-width: 812px) {
main>article {
width: auto;
}
main>article>div {
width: 90%;
margin: 0 auto;
}
#OtamoiForm h1 {
font-size: 4.25vw;
}
#OtamoiForm label,
#OtamoiForm input,
#OtamoiForm select {
font-size: 3.75vw;
}
#OtamoiForm {
border-radius: 60px;
}
#OtamoiForm>form>div {
margin: 1em .5em;
}
#OtamoiForm form label {
width: 45%;
text-indent: 3em;
}
#OtamoiForm form label::before {
width: 3em;
height: 3em;
}
#OtamoiForm form input[type="image"] {
width: 30%;
}
#OtamoiForm form select {
width: 55%;
}
#OtamoiForm form img {
width: 35%;
height: auto;
}
#SuccessMessage p {
font-size: 3.75vw;
line-height: 1.4;
}
#SuccessMessage p:first-child {
font-size: 4.25vw;
}
#SuccessMessage {
border-radius: 60px;
padding: .5em;
}
#SuccessMessage>div {
font-size: 0;
}
#SuccessMessage>div:first-child {
width: 30%;
}
#SuccessMessage>div:first-child img {
width: 100%;
}
/* #SuccessMessage>div>p {
margin: .5em 0;
}
#SuccessMessage>div>p:first-child {
margin: 1em 0;
} */
#SuccessMessage>div:last-child {
padding-bottom: 20%;
}
#SuccessMessage>div:last-child::before {
height: 25%;
}
}