@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700&family=Orbitron:wght@500;600&family=Shippori+Mincho:wght@400;500;600;700&display=swap");
* {
font-size: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #fff;
height: 100%;
}
body {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
font-size: 62.5%;
font-style: normal;
line-height: 1.6em;
color: #000;
font-weight: 300;
}
#wrapper {
font-size: 150%;
line-height: 160%;
}
img {
border: 0;
vertical-align: top;
outline: none;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
outline: none;
overflow: hidden;
color: #d16c15;
transition: 0.3s;
}
a:hover {
text-decoration: none;
outline: none;
opacity: 0.7;
}
.svg {
fill: currentColor;
}
.pre {
position: relative;
}
.disn {
display: none;
}
.disb {
display: block;
}
.m0a {
margin: 0 auto;
}
.pa0 {
padding: 0 !important;
}
.mb1e {
margin-bottom: 1em
}
.mb2e {
margin-bottom: 2em
}
.mb3e {
margin-bottom: 3em
}
.fl {
float: left;
}
.fr {
float: right;
}
.tal {
text-align: left !important;
}
.tar {
text-align: right !important;
}
.tac {
text-align: center !important;
}
.img100 {
width: 100%;
}
.maxImage {
max-width: 100%;
}
.h100 {
height: 100%;
}
.color01 {
color: #d16c15
}
.ov {
transition: all .4s;
}
.ov:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.bigtext {
font-size: 200%;
line-height: 170%;
text-align: center;
font-weight: 100;
}
.flame01 {
background: url(/recruit/assets/images/flame_bg01.png) no-repeat;
background-position: center;
background-size: contain;
padding: 20px;
text-align: center;
}
.flame02 {
background: url(/recruit/assets/images/flame_bg02.png) no-repeat;
background-position: center;
background-size: contain;
padding: 25px;
text-align: center;
}
.flame03 {
background: url(/recruit/assets/images/flame_bg03.png) no-repeat;
background-position: center;
background-size: contain;
padding: 15px;
text-align: center;
}
.comment01 {
line-height: 2.5rem;
text-align: center;
margin-bottom: 2em;
}
.comment02 {
line-height: 1.8rem;
text-align: center;
margin-bottom: 2em;
}
.comment03 {
line-height: 1.8rem;
text-align: left;
margin-bottom: 1em;
}
.comment03-80 {
line-height: 1.8rem;
text-align: left;
max-width: calc(1200px * .8);
margin: 0 auto 1em;
}
.spBox {
display: none;
}
.pcBox {
display: inherit;
}
.bg01 {
background-color: #f6f6f6;
}
.bg02 {
background-color: #e1d9d4;
}
.bg03 {
background-color: #f6f6f6;
background-image: url(/recruit/assets/images/bg03.webp);
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
.bg04 {
background-image: url(/recruit/assets/images/bg04.webp);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.arrow_r {
position: relative;
display: inline-block;
padding-left: 20px;
}
.arrow_r:after {
content: '';
width: 12px;
height: 12px;
border: 0;
border-top: solid 3px #d16c15;
border-right: solid 3px #d16c15;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 20px;
bottom: 0;
margin: auto;
}
.arrow_u {
position: relative;
display: inline-block;
padding-left: 20px;
}
.arrow_u:after {
content: '';
width: 12px;
height: 12px;
border: 0;
border-bottom: solid 2px #d16c15;
border-right: solid 2px #d16c15;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 20px;
bottom: 0;
margin: auto;
}
.btBox01 {
display: flex;
justify-content: center;
}
.btBox01 .innerBox {
flex-basis: 35%;
margin: 0 2%;
}
.btBox01 a {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
} .btn {
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
text-align: center;
outline: none; transition: ease .15s;
}
.btn span {
position: relative;
z-index: 3;
display: block;
font-size: 60%;
} .bgskew::before {
content: '';
position: absolute;
transform: skewX(-25deg);
top: 0;
left: -130%;
background: rgba(255, 255, 255, .2);
width: 120%;
height: 100%;
}
.bgskew:hover {
opacity: 1;
} .bgskew:hover::before {
animation: skewanime .6s forwards; }
@keyframes skewanime {
100% {
left: -10%; }
}
.bt01 {
background: #d16c15;
color: #fff;
width: 70%;
display: block;
margin: 0 auto;
padding: 30px;
font-size: 140%;
height: 100%;
}
.bt01.arrow_r:after {
border-top: solid 3px #fff;
border-right: solid 3px #fff;
top: 0;
bottom: 0;
}
.bt01.arrow_u:after {
border-bottom: solid 3px #fff;
border-right: solid 3px #fff;
top: 0;
bottom: 0;
}
.fade-in-bottom {
opacity: 0;
animation-name: fadein-bottom;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.slide-bottom {
opacity: 0;
transform: translateY(20px);
transition: all 1.3s 0s ease-out;
}
.wait01 {
transition: all 1.3s 0.2s ease-out;
}
.wait02 {
transition: all 1.3s 0.4s ease-out;
}
.wait03 {
transition: all 1.3s 0.6s ease-out;
}
.wait04 {
transition: all 1.3s 0.8s ease-out;
}
.wait05 {
transition: all 1.3s 1.0s ease-out;
}
.wait06 {
transition: all 1.3s 1.2s ease-out;
} .slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
} .leftAnime {
opacity: 0; }
.slideAnimeLeftRight {
animation-name: slideTextX100;
animation-duration: 0.8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%); opacity: 0;
}
to {
transform: translateX(0); opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name: slideTextX-100;
animation-duration: 0.8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%); opacity: 0;
}
to {
transform: translateX(0); opacity: 1;
}
}
.btntransform {
position: relative;
}
.btntransform::before {
content: '';
position: absolute;
left: 0;
bottom: 15px;
z-index: -1;
width: 0px;
height: 4px;
background: #d16c15;
transition: .2s ease-out;
}
.btntransform:hover {
opacity: 1;
}
.btntransform:hover::before {
width: 100%;
}  header {
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
z-index: 999;
top: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 0) 100%);
}
header h1 {
width: 410px;
margin: 20px 0 0 20px;
flex-basis: 30%;
}
header h1 img {
max-width: 410px;
}
header #gmenu {
display: flex;
flex-basis: 68%;
justify-content: flex-end;
}
header #gmenu li {
white-space: nowrap;
margin-left: 1%;
position: relative;
cursor: pointer;
}
header #gmenu li.spBt {
display: none;
}
header #gmenu li.snsBox {
display: none;
}
header #gmenu li a {
color: #000;
font-weight: 400;
font-size: 100%;
display: block;
padding: 0 10px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
header #gmenu li.openMenu .subMenu { position: fixed;
top: 84px;
left: 0;
width: 100%;
background: rgba(225, 217, 212, .95);
padding: 20px 10px;
opacity: 0;
transition: all 1.5s;
z-index: 999;
}
header #gmenu li.openMenu.active .subMenu { opacity: 1;
}
header #gmenu li.openMenu .subMenu ul {
width: 100%;
max-width: 1100px;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
display: flex;
}
header #gmenu li.openMenu .subMenu ul li {
flex-basis: 23%;
text-align: center;
margin: 0 1% 10px 0;
}
header #gmenu li.openMenu .subMenu ul li a {
display: block;
color: #000;
position: relative;
font-weight: inherit;
padding: 0;
}
header #gmenu li.openMenu .subMenu ul li img {
width: 100%;
border-radius: 5px;
object-fit: cover;
height: 100px;
object-position: center 30%;
margin-bottom: 3px;
}
header #gmenu li.openMenu .subMenu ul li h2 {
color: #d16c15;
font-weight: 500;
font-size: 80%;
line-height: 120%;
}
header #gmenu li.openMenu .subMenu ul li .name {
font-size: 110%;
}
header #gmenu li.openMenu .subMenu ul li .joining {
font-size: 75%;
color: #636363;
margin-left: 0.5em;
}
header .entry {
margin-left: 5px;
}
header .entry a {
font-weight: 400;
width: 100%;
display: flex;
align-items: center;
color: #fff;
background: #d16c15;
padding: 0 40px;
font-size: 140%;
position: relative;
height: 84px;
}
header .entry a.arrow_r:after {
border-color: #fff;
right: 10px;
} .contentBox {
margin: 0 auto;
width: 100%;
padding: 60px 30px;
max-width: 1200px;
overflow: hidden;
}
.contentBoxS {
margin: 0 auto;
width: 100%;
padding: 0 30px;
max-width: 1200px;
overflow: hidden;
}
.contentBoxL {
margin: 0 auto;
width: 100%;
padding: 40px 0;
position: relative;
overflow: hidden;
}
.contentBoxSmallLeft01 {
margin: 60px auto 40px;
width: 100%;
padding-right: 63%;
text-align: right;
}
.contentBoxSmallLeft01 .title {
text-align: right;
}
.contentBoxSmallLeft01 .title .image {
width: 330px;
margin-top: 20px;
margin-left: auto;
display: block;
}
.contentBoxSmallLeft02 {
margin: 60px auto 40px;
width: 100%;
max-width: 1200px;
padding-left: 30px;
text-align: left;
padding-right: calc(62vw - ((100vw - 1200px) / 2));
}
.contentBoxSmallLeft02 .title {
text-align: left;
}
.contentTitle01 {
text-align: center;
font-weight: 300;
font-size: 280%;
line-height: 140%;
margin-bottom: .8em;
}
.contentTitle01 .emphasis {
color: #d16c15;
}
.contentTitle02 {
text-align: center;
font-weight: 300;
font-size: 280%;
line-height: 160%;
margin-bottom: 1em;
}
.contentTitle02 .emphasis {
color: #fff;
background: #d16c15;
padding: 0 10px;
margin: 0 0.1em;
}
a .contentTitle02 {
color: #000;
}
.contentTitle03 {
text-align: center;
font-weight: 300;
font-size: 280%;
line-height: 120%;
margin-bottom: 0.3em;
}
.contentTitle04 {
text-align: center;
font-weight: 300;
font-size: 150%;
line-height: 120%;
margin-bottom: 1em;
}
.contentTitle05 {
text-align: left;
font-weight: 300;
font-size: 250%;
line-height: 160%;
}
.contentTitle05 .subTitle {
color: #fff;
background: #d16c15;
padding: 0 10px;
margin: 0 0.1em;
display: block;
font-size: 60%;
line-height: 170%;
width: fit-content;
}
.contentTitle05 .comment {
color: #636363;
margin-left: 0.5em;
font-size: 60%;
}
.contentTitle06 {
color: #d16c15;
font-size: 120%;
font-weight: 400;
position: relative;
width: fit-content;
}
.contentTitle06:before {
content: "";
display: block;
width: 0.8em;
height: 100%;
position: absolute;
bottom: 0;
left: -1.5em;
background: url(/recruit/assets/images/comment_icon01.png) no-repeat;
background-size: contain;
}
.contentTitle06:after {
content: "";
display: block;
width: 0.8em;
height: 100%;
position: absolute;
bottom: 0;
right: -1.5em;
background: url(/recruit/assets/images/comment_icon02.png) no-repeat;
background-size: contain;
}
.subTitle01 {
font-weight: 400;
font-size: 50%;
margin-bottom: 0.2em;
line-height: 140%;
color: #d67a2c;
display: block;
}
.subTitle_t {
font-weight: 400;
font-size: 40%;
margin-bottom: 0.5em;
display: block;
}
#pageHeader {
color: #fff;
position: relative;
padding-top: 84px;
}
#pageHeader .titleBox {
background: #da8944;
width: 85%;
margin-top: 130px;
height: 220px;
padding: 0 0 10px 30px;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
#pageHeader h1 {
font-size: 350%;
color: #000;
line-height: 150%;
font-weight: 300;
}
#pageHeader h1 span {
color: #fff;
}
#pageHeader .eSentence {
font-size: 130%;
font-weight: 100;
padding-left: 5px;
}
#pageHeader .image {
width: 60%;
position: absolute;
object-fit: cover;
height: 330px;
bottom: 20px;
right: 0;
}
#pageHeader.headerL .image {
height: 560px;
bottom: -210px;
right: 0;
}
.flexBox01 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexBox01 .leftBox {
flex-basis: 50%;
margin-top: -80px;
}
.flexBox01 .rightBox {
flex-basis: 50%;
padding: 20px 60px;
}
.flexBox02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexBox01 .innerBox {
flex-basis: 50%;
margin-bottom: 1em;
}
.floatBox01 {
overflow: hidden;
}
.floatBox01 .img01 {
float: right;
margin: 1em 0 0 2em;
width: 50%;
}
.floatBox01 .textBox {}
.list01 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list01 li {
flex-basis: 33.2%;
}
.list01 li a {
display: block;
background-color: #b0aaa6;
color: #fff;
display: flex;
justify-content: space-between;
}
.list01 li img {
height: 320px;
object-fit: cover;
object-position: top;
flex-basis: 75%;
width: 75%;
}
.list01 li .title {
position: relative;
flex-basis: 25%;
}
.list01 li .title:after {
content: '';
width: 15px;
height: 15px;
border: 0;
border-top: solid 4px #d16c15;
border-right: solid 4px #d16c15;
transform: rotate(45deg);
position: absolute;
bottom: 12px;
right: 45%;
}
.list01 li .title p {
writing-mode: vertical-rl;
color: #fff;
font-size: 160%;
margin: 20px auto 0;
letter-spacing: 0.05em;
}
.list01 li .title p span {
font-size: 140%;
margin-bottom: 0.1em;
} .list01 li a.bgskew::before {
top: 0;
left: -220%;
background: rgba(209, 108, 36, .4);
width: 200%;
height: 100%;
}
.list02 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list02 li {
flex-basis: 23%;
text-align: center;
margin-bottom: 40px;
}
.list02 li a {
display: block;
color: #000;
position: relative;
}
.list02 li img {
width: 100%;
border-radius: 10px;
object-fit: cover;
height: 160px;
}
.list02 li h2 {
color: #d16c15;
font-weight: 500;
font-size: 85%;
}
.list02 li .name {
font-size: 130%;
}
.list02 li .joining {
font-size: 75%;
color: #636363;
margin-left: 0.5em;
}
.list02 li .career {
font-size: 90%;
color: #666;
}
.list03 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list03 li {
flex-basis: 33.2%;
}
.list03 li a {
display: block;
background-color: #b0aaa6;
color: #fff;
justify-content: space-between;
}
.list03 li img {
height: 120px;
object-fit: cover;
object-position: top;
flex-basis: 100%;
width: 100%;
}
.list03 li .title {
position: relative;
width: 100%;
padding: 20px;
}
.list03 li .title:after {
content: '';
width: 15px;
height: 15px;
border: 0;
border-bottom: solid 4px #d16c15;
border-right: solid 4px #d16c15;
transform: rotate(45deg);
position: absolute;
top: 32%;
right: 10%;
}
.list03 li .title p {
color: #fff;
font-size: 160%;
margin: 0 auto;
letter-spacing: 0.05em;
}
.list03 li .title p span {
font-size: 140%;
margin-bottom: 0.1em;
} .list03 li a.bgskew::before {
top: 0;
left: -220%;
background: rgba(209, 108, 36, .4);
width: 200%;
height: 100%;
}
.list04 li {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
.list04 li .image {
flex-basis: 25%;
width: 25%;
object-fit: cover;
border-radius: 5px;
}
.list04 li .textBox {
flex-basis: 73%;
padding-top: 10px;
}
.list04 li .title {
font-size: 130%;
font-weight: 400;
margin-bottom: 1em;
}
.list04 li .title .no {
color: #fff;
margin-right: 0.5em;
}
.list04 li p {
padding-left: 0.5em;
}
.list05 {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
position: relative;
margin-bottom: 25px;
}
.list05 .innerBox {
flex-basis: 27%;
display: flex;
position: relative;
flex-direction: column-reverse;
margin: 0 10px 20px 0;
}
.list05 .innerBox:nth-of-type(3n) {
margin-left: auto;
}
.list05 .innerBox:first-of-type,
.list05 .innerBox:nth-of-type(3n + 1) {
margin-right: auto;
}
.list05 .innerBox .title {
text-align: center;
font-weight: 400;
font-size: 115%;
}
.list05 .innerBox .image {
width: 100%;
margin-bottom: 3px;
}
.list06 {
margin-top: 60px;
}
.list06 .innerBox {
display: flex;
position: relative;
margin-bottom: 30px;
padding: 10px 0;
justify-content: center;
width: 100%;
}
.list06 .innerBox:after {
content: "";
display: block;
position: absolute;
bottom: -30px;
height: 13px;
width: 100%;
background: url(/recruit/assets/images/history_arrow.png) no-repeat;
background-position: center top;
background-size: contain;
border-top: 1px solid #e1d9d4;
}
.list06 .innerBox:last-of-type:after {
display: none;
}
.list06 .imgBox {
flex-basis: 20%;
margin-right: 3%;
}
.list06 .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list06 .textBox {
flex-basis: 55%;
padding: 10px 0;
align-self: center;
}
.list06 .textBox .title {
font-weight: 600;
font-size: 230%;
letter-spacing: 0.25em;
margin-bottom: 0.5em;
}
.list06 .textBox .title span {
font-size: 70%;
font-weight: : 500;
}
.list06 .textBox .text {
margin-bottom: 0.2em;
}
.list06 .textBox .text .comment {
font-size: 80%;
}
.list06 .textBox .text .important {
color: #d67a2c;
font-weight: 400;
font-size: 120%;
}
.list07 {
display: flex;
justify-content: space-between;
}
.list07 .innerBox {
flex-basis: 31.5%;
}
.list07 .title {
background-color: #e4ddd8;
padding: 1em;
font-size: 150%;
font-weight: 300;
border-radius: 6px;
text-align: center;
margin-bottom: 0.5em;
}
.list07 .textBox {
font-size: 90%;
}
.list08 .innerBox {
background-color: #fff;
padding: 30px 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.list08 .title {
font-size: 110%;
font-weight: 400;
position: relative;
padding-left: 3em;
color: #d16c15;
margin-bottom: 0.5em;
}
.list08 .title:before {
content: "";
display: block;
width: 3em;
height: 2.2em;
background: url(/recruit/assets/images/icon_q.png) no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
left: 0;
}
.list08 .answer {
padding-left: 3em;
}
.list09 .innerBox {
margin-bottom: 3px;
display: flex;
justify-content: space-between;
}
.list09 .title {
font-weight: 400;
border-right: 3px solid #e1d9d4;
padding: 1em 1em 1em 0;
text-align: right;
flex-basis: 27%;
}
.list09 .detail {
padding: 1em 0 1em 1em;
flex-basis: 73%;
}
.list09 .detail .innerFlex {
display: flex;
flex-wrap: wrap;
}
.list09 .detail .innerFlex .box {
margin-right: 5em;
}
.flowBox {
display: flex;
}
.flowBox .innerBox {
flex-basis: 25%;
margin-bottom: 3px;
}
.flowBox .innerBox:nth-of-type(1) .title,
.flowBox .innerBox:nth-of-type(1) .title:before {
background-color: #e9ab4a;
}
.flowBox .innerBox:nth-of-type(2) .title,
.flowBox .innerBox:nth-of-type(2) .title:before {
background-color: #edac65;
}
.flowBox .innerBox:nth-of-type(3) .title,
.flowBox .innerBox:nth-of-type(3) .title:before {
background-color: #dc873d;
}
.flowBox .innerBox:nth-of-type(4) .title,
.flowBox .innerBox:nth-of-type(4) .title:before {
background-color: #d16c15;
}
.flowBox .title {
font-weight: 400;
font-size: 130%;
display: flex;
height: 48px;
padding-left: 50px;
align-items: center;
color: #fff;
position: relative;
}
.flowBox .title:before {
position: absolute;
margin: auto;
content: "";
vertical-align: middle;
top: 12px;
right: -35px;
z-index: 5;
height: calc(48px / 2);
width: 48px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transform: rotate(90deg);
}
.flowBox .title:after {
position: absolute;
margin: auto;
content: "";
vertical-align: middle;
top: 11px;
right: -38px;
z-index: 4;
background: #fff;
height: calc(52px / 2);
width: 50px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transform: rotate(90deg);
}
.flowBox .innerBox span {
font-size: 150%;
margin-left: 0.2em;
margin-top: -0.2em;
}
.flowBox .detail {
padding: 0.5em 50px;
}
.scheduleBox {
margin-bottom: 30px;
}
.scheduleBox .title {
color: #d16c15;
font-size: 130%;
font-weight: 400;
margin-bottom: 0.3em;
}
.scheduleBox .title span {
font-size: 80%;
font-weight: 400;
}
.scheduleBox .scheduleList {}
.scheduleBox .scheduleList dl {
display: flex;
justify-content: space-between;
}
.scheduleBox .scheduleList dt,
.scheduleBox .scheduleList dd {
font-size: 90%;
position: relative;
padding: 8px 0;
}
.scheduleBox .scheduleList dt {
flex-basis: 15%;
text-align: right;
}
.scheduleBox .scheduleList dt:after {
content: "";
display: block;
height: 6px;
width: 6px;
background: #d16c15;
border-radius: 100%;
top: calc((1em + 26px) * .5);
right: -34%;
position: absolute;
}
.scheduleBox .scheduleList dd {
flex-basis: 75%;
}
.scheduleBox .scheduleList dd:before {
content: "";
display: block;
height: 100%;
width: 2px;
background: #d16c15;
bottom: 0;
left: -8%;
position: absolute;
}
.scheduleBox .scheduleList dl:first-of-type dd:before,
.scheduleBox .scheduleList dl:last-of-type dd:before {
height: 50%;
}
.scheduleBox .scheduleList dl:last-of-type dd:before {
top: 0;
bottom: auto;
}
.employeeBox .photoBox {
position: relative;
}
.employeeBox .photoBox img {
width: 90%;
position: relative;
margin-bottom: 2px;
}
.employeeBox .photoBox .photoComment {
margin-bottom: 30px;
color: #666;
font-size: 90%;
position: relative;
padding-left: 2px;
}
.employeeBox .photoBox img:nth-of-type(1),
.employeeBox .photoBox .photoComment:nth-of-type(1) {
left: -30px;
}
.employeeBox .photoBox img:nth-of-type(2) {
margin-left: auto;
}
.employeeBox .interviewBox p {
margin-bottom: 1em;
}
.employeeBox .interviewBox .interviewPhotoBox {
width: 60%;
text-align: left;
right: -40px;
float: right;
margin: 1em 0 1em -20px;
position: relative;
}
.employeeBox .interviewBox .interviewPhotoBox img {
width: 100%;
}
.employeeBox .interviewBox .interviewPhotoBox .photoComment {
color: #666;
font-size: 90%;
text-align: right;
padding-right: 12px;
}
.commentBox {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.commentBox .title {
position: absolute;
top: 60px;
left: 25%;
font-weight: 500;
}
.commentBox .photo {
border-radius: 100%;
flex-basis: 13%;
width: 13%;
margin-right: 3%;
}
.commentBox .innerBox {
background-color: #f6f6f6;
border-radius: 20px;
position: relative;
padding: 20px;
flex-basis: 75%;
margin-top: 2em;
}
.commentBox .innerBox:after {
content: "";
display: block;
position: absolute;
top: 0;
left: -20px;
height: 100%;
width: 20px;
background: url(/recruit/assets/images/comment_bg01.png) no-repeat;
background-position: center 40%;
background-size: contain;
}
.commentBox .message {}
.commentBox .name {
color: #5f5f5f;
} #entryBox {
text-align: center;
padding: 30px;
}
#entryBox p {
font-weight: 400;
}
#entryBox .btn {
width: 50%;
margin: 10px auto;
padding: 30px;
font-size: 140%;
}
#entryBox .btn.arrow_r:after {
width: 12px;
height: 12px;
border: 0;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
top: 0;
right: 20px;
bottom: 0;
}
#entryBox .btn:hover::before {
animation: skewanime .5s forwards; } footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #4e4842;
color: #fff;
}
footer .logo {
flex-basis: 360px;
align-self: center;
padding: 30px;
}
footer .logo img {
min-width: 200px;
}
footer .snsBox {
flex-basis: 140px;
align-self: center;
display: flex;
padding: 10px 10px 5px;
margin-right: auto;
}
footer .snsBox a {
display: block;
margin: 0 7px;
}
footer .snsBox a img {
width: 20px;
} footer .officialLinkBox {
flex-basis: 15.5em;
align-self: center;
display: flex;
padding: 10px 10px 5px;
}
footer .officialLinkBox a {
width: 100%;
position: relative;
display: block;
background: #827771;
color: #fff;
padding: 3px 7px;
font-size: 95%;
}
footer .officialLinkBox a:after {
border-top: solid 2px #fff;
border-right: solid 2px #fff;
right: 8px;
bottom: 0;
width: 8px;
height: 8px;
} footer #footerMenu {
padding: 0 20px;
display: grid;
grid-template-columns: 11em 11em 1fr;
grid-template-rows: 1.8em;
grid-template-areas:
"areaA areaB areaC"
"areaD areaE areaC"
"areaF areaG areaC";
}
.itemA {
grid-area: areaA;
}
.itemB {
grid-area: areaB;
}
.itemC {
grid-area: areaC;
}
.itemD {
grid-area: areaD;
}
.itemE {
grid-area: areaE;
}
.itemF {
grid-area: areaF;
}
.itemG {
grid-area: areaG;
}
footer #footerMenu li {
position: relative;
padding-left: 1.2em;
}
footer #footerMenu li:after {
content: "・";
position: absolute;
left: 0;
top: 0;
}
footer #footerMenu li,
footer #footerMenu li a {
color: #dad5d1;
}
footer #footerMenu li a {
cursor: pointer;
}
footer #footerMenu li a:hover {
opacity: .8;
}
footer #footerMenu li.parentMenu .subMenu {
font-size: 80%;
margin-left: 0.5em;
display: flex;
flex-wrap: wrap;
}
footer #footerMenu li.parentMenu .subMenu li {
flex-basis: 35%;
}
footer #footerMenu li.parentMenu .subMenu li a {
color: #bcb5b0;
}
footer address {
flex-basis: 100%;
margin-left: auto;
color: #afa9a5;
font-style: normal;
font-weight: 300;
text-align: right;
font-size: 75%;
padding: 5px 20px;
align-self: end;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px 100px;
gap: 20px;
} @media screen and (max-width: 1200px) {
.contentBoxSmallLeft02 {
padding-right: 62vw;
}
} @media screen and (max-width: 1000px) {
.disn1000 {
display: none;
}
header #gmenu li a {
font-size: 90%;
padding: 30px 5px;
}
header .entry a {
padding: 0px 15px;
font-size: 100%;
}
header .entry a:after {
display: none;
}
#pageHeader .titleBox {
margin-top: 51px;
}
#pageHeader .image {
height: 250px;
}
#pageHeader.headerL .titleBox {
margin-top: 130px;
height: 250
}
#pageHeader.headerL .image {
height: 460px;
bottom: -110px;
right: 0;
}
#pageHeader.headerL .titleBox {
margin-top: 220px;
}
#pageHeader.headerL .image {
height: 330px;
top: 84px;
width: 80%;
right: 0;
}
.contentTitle05 .comment {
font-size: 46%;
display: block;
margin-left: 0;
line-height: 130%;
margin-bottom: 0.3em;
}
.contentTitle05 .subTitle {
margin: 0 auto;
}
.contentBoxSmallLeft01 {
padding: 20px 20px 5px;
margin: 0 auto;
text-align: center;
background-color: #f6f6f6
}
.contentBoxSmallLeft01 .title {
text-align: center;
}
.contentBoxSmallLeft02 {
padding: 20px 20px 10px;
margin: 0 auto 20px;
text-align: center;
background-color: #f6f6f6
}
.contentBoxSmallLeft02 .title {
text-align: center;
}
.contentBoxSmallLeft01 .title .image {
width: 330px;
margin-top: 10px;
margin-right: auto;
}
.flowBox {
width: calc(100% - 20px);
}
.list02 li img {
height: 13vw;
}
.list03 li .title:after {
width: 10px;
height: 10px;
border-bottom: solid 3px #d16c15;
border-right: solid 3px #d16c15;
right: 10px;
}
.list03 li img {
height: 70px;
}
.list03 li .title {
padding: 10px;
}
.list03 li .title p {
font-size: 120%;
letter-spacing: 0;
}
footer #footerMenu li.parentMenu .subMenu li {
flex-basis: 47%;
}
} @media screen and (max-width: 760px) {
.btntransform:hover {
opacity: 1;
}
.btntransform:hover::before {
display: none;
}
header h1 {
flex-basis: 270px;
margin: 15px;
}
header .btn-gnavi {
margin: 0;
margin-left: auto;
width: 60px;
z-index: 998;
cursor: pointer;
background-repeat: no-repeat;
background-size: 60%;
background-color: #d16c15;
background-image: url(/recruit/assets/images/menu_icon_open.png);
background-position: center;
transition: 0.4s;
padding: 0px 15px;
}
header .btn-gnavi.open {
background-image: url(/recruit/assets/images/menu_icon_close.png);
background-color: #fff;
}
header #gmenu {
position: fixed;
overflow-y: scroll;
top: 0;
right: -100%;
width: 100%;
height: 100%;
z-index: 990;
background: rgba(225, 217, 212, .9);
padding-top: 70px;
display: block;
}
header #gmenu.open {}
header #gmenu li {
display: block;
max-width: none;
opacity: 0;
transition: all 1.5s;
}
header #gmenu.open li {
opacity: 1;
}
header #gmenu li.spBt {
display: inherit;
}
header #gmenu.open li.snsBox {
display: flex;
justify-content: center;
}
header #gmenu.open li.snsBox a {
flex-basis: 30px;
margin: 0 10px;
}
header #gmenu.open li.snsBox a img {
width: 30px;
}
header #gmenu.open li a {
color: #333;
padding: 1.2em 0;
font-size: 110%;
text-align: center;
display: block;
font-weight: 500;
}
header #gmenu li.openMenu .subMenu {
position: relative;
top: unset;
left: unset;
width: 100%;
padding: 0;
background: transparent;
;
}
header #gmenu li.openMenu .subMenu ul {
margin-top: -15px;
}
header #gmenu li.openMenu .subMenu ul li {
flex-basis: 100%;
text-align: left;
margin: 0 0 10px 0;
position: relative;
display: inline-block;
}
header #gmenu li.openMenu .subMenu ul li:after {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: solid 2px #d16c15;
border-right: solid 2px #d16c15;
transform: rotate(45deg);
position: absolute;
top: -40%;
left: 18px;
bottom: 0;
margin: auto;
}
header #gmenu li.openMenu .subMenu ul li a {
padding: 10px;
text-align: left;
}
header #gmenu li.openMenu .subMenu ul li img {
display: none;
}
header #gmenu li.openMenu .subMenu ul li h2 {
padding-left: 25px;
}
header #gmenu li.openMenu .subMenu ul li .name {
padding-left: 10px;
font-size: 100%;
}
header .entry {
width: 90px;
margin-left: 1px;
z-index: 999;
}
header .entry a {
padding: 0 18px 0 8px;
}
header .entry a:after {
display: inherit;
}
header .entry .arrow_r:after {
width: 8px;
height: 8px;
border-top: solid 2px #d16c15;
border-right: solid 2px #d16c15;
}
#pageHeader .titleBox {
width: 100%;
margin-top: 70px;
height: 150px;
padding: 0 0 10px 10px;
}
#pageHeader h1 {
font-size: 180%;
line-height: 120%;
}
#pageHeader .eSentence {
font-size: 90%;
padding-left: 1px;
}
#pageHeader .image {
width: 95%;
height: 145px;
bottom: 74px;
}
#pageHeader.headerL .titleBox {
margin-top: 240px;
}
#pageHeader.headerL .image {
height: 310px;
bottom: 80px;
right: 0;
}
.subTitle01 {
font-size: 60%;
}
.commentBox .title {
top: 40px;
}
.contentBox {
padding: 40px 20px;
}
.scheduleBox .scheduleList dt {
flex-basis: 20%;
}
.scheduleBox .scheduleList dd {
flex-basis: 70%;
}
.scheduleBox .scheduleList dt:after {
right: -30%;
}
.btBox01 .innerBox {
flex-basis: 47%;
margin: 0 1%;
}
.list02 li {
flex-basis: 48%;
margin-bottom: 20px;
}
.list02 li img {
height: 26vw;
}
.list03 li .title {
padding: 7px;
}
.list03 li .title p span {
display: block;
}
.list05 .innerBox {
margin: 0 10px 10px 0;
}
.list05 .innerBox .title {
font-size: 100%;
} #entryBox .btn {
width: 80%;
}
#entryBox {
padding: 15px;
}
footer .logo {
flex-basis: 50%;
padding: 20px;
}
footer .snsBox {
flex-basis: 50%;
padding: 10px 10px 0;
}
footer address {
flex-basis: 100%;
padding: 0 10px;
}
footer #footerMenu {
display: none;
}
} @media screen and (max-width: 600px) {
a:hover {
text-decoration: none;
opacity: 1
}
.disn600 {
display: inline-block;
}
.pcBox {
display: none;
}
.spBox {
display: inherit;
}
.ov:hover {
opacity: 1;
filter: alpha(opacity=100);
}
#wrapper {
font-size: 160%;
line-height: 160%;
}
#pageHeader .titleBox {
margin-top: 40px;
}
#pageHeader .image {
height: 115px;
}
.contentBox {
padding: 30px 15px;
}
.contentBoxS {
padding: 0 15px;
}
.contentBoxL {
padding: 30px 0;
}
.contentTitle01 {
font-size: 170%;
margin-bottom: 0.5em;
}
.contentTitle02 {
font-size: 170%;
line-height: 120%;
margin-bottom: 0.5em;
}
.contentTitle04 {
font-weight: 400;
font-size: 110%;
}
.comment02 {
line-height: 1.4rem;
text-align: left;
font-size: 90%;
margin-bottom: 1em;
}
.comment01 {
line-height: 1.4rem;
text-align: left;
font-size: 90%;
}
.bigtext {
font-size: 150%;
font-weight: 300;
text-align: left;
}
.btBox01 {
flex-direction: column;
}
.bt01 {
width: 80%;
margin: 10px auto;
padding: 20px;
font-size: 130%;
} .bgskew::before {
display: none;
}
.bgskew:hover {} .bgskew:hover::before {}
.flexBox01 {
padding: 0 20px;
}
.flexBox01 .leftBox {
flex-basis: 100%;
margin-top: 0;
margin-bottom: 0.5em;
}
.flexBox01 .rightBox {
flex-basis: 100%;
padding: 0;
}
.flexBox02 {
flex-direction: column;
}
.flexBox01 .innerBox {
margin-bottom: 0.5em;
}
.floatBox01 .img01 {
float: none;
margin: 0 0 1em;
width: 100%;
}
.list01 li {
flex-basis: 100%;
margin-bottom: 2px;
}
.list01 li img {
height: 100px;
flex-basis: 45%;
width: 45%;
}
.list01 li .title {
flex-basis: 55%;
}
.list01 li .title p {
writing-mode: inherit;
font-size: 100%;
margin: 20px auto 0;
letter-spacing: 0;
padding-left: 10px;
text-align: left;
}
.list01 li .title:after {
content: '';
width: 10px;
height: 10px;
bottom: 12px;
right: 5%;
}
.list02 li img {
border-radius: 5px;
margin-bottom: 3px;
}
.list02 li h2 {
font-size: 75%;
line-height: 130%;
}
.list02 li .name {
font-size: 100%;
line-height: 130%;
}
.list02 li .career {
font-size: 80%;
}
.list03 li .title p {
font-size: 90%;
line-height: 150%;
text-align: left;
}
.list03 li img {
height: 40px;
}
.list03 li .title:after {
bottom: 10px;
top: auto;
}
.list04 li {
flex-direction: column;
}
.list04 li .image {
width: 100%;
object-fit: cover;
border-radius: 5px;
height: 120px;
object-position: center -40px;
margin-bottom: 5px;
flex-basis: auto;
}
.list04 li .title {
margin-bottom: 0.5em;
}
.list04 li p {
padding-left: 0.5em;
}
.list05 {
justify-content: space-between;
}
.list05 .innerBox {
flex-basis: 44%;
}
.list05 .innerBox,
.list05 .innerBox:first-of-type,
.list05 .innerBox:nth-of-type(3n),
.list05 .innerBox:nth-of-type(3n + 1) {
margin-left: inherit;
margin-right: inherit;
}
.list05 .innerBox .title {
font-size: 80%;
}
.list06 {
margin-top: 20px;
}
.list06 .imgBox {
flex-basis: 24%;
}
.list06 .imgBox img {
border-radius: 4px;
}
.list06 .textBox {
flex-basis: 75%;
}
.list06 .textBox .title {
font-weight: 700;
font-size: 160%;
letter-spacing: 0.2em;
margin-bottom: 0.2em;
}
.list06 .textBox .text {
margin-bottom: 0.2em;
line-height: 140%;
font-size: 90%;
}
.list07 {
flex-direction: column;
}
.list07 .innerBox {
margin-bottom: 20px;
}
.list07 .title {
padding: 0.5em;
font-size: 130%;
}
.list08 .answer {
padding-left: 0;
}
.list08 .innerBox {
padding: 30px 20px 20px;
}
.scheduleBox .scheduleList dt:after {
right: -26%;
}
.employeeBox .interviewBox .interviewPhotoBox {
margin: 1em 0;
width: 100%;
right: auto;
}
.employeeBox .interviewBox img {}
.commentBox {
flex-direction: column;
}
.commentBox .title {
top: inherit;
left: inherit;
position: relative;
margin-bottom: 0.5em;
}
.commentBox .photo {
width: 40%;
margin-right: 0;
margin-bottom: 0.5em;
}
.commentBox .innerBox {
padding: 20px;
margin-top: 0;
}
.commentBox .innerBox:after {
content: "";
display: block;
position: absolute;
top: -32px;
left: 60%;
height: 50px;
width: 50px;
background-position: 1vw top;
transform: rotate(75deg);
}
.flowBox {
width: 100%;
flex-direction: column;
}
.flowBox .innerBox {
margin-bottom: 0;
display: flex;
}
.flowBox .title {
font-size: 100%;
height: 80px;
padding: 10px;
align-items: end;
position: relative;
flex-basis: 25%;
justify-content: center;
}
.flowBox .innerBox:nth-of-type(1) .title {
height: 60px;
}
.flowBox .title:before {
position: absolute;
margin: auto;
content: "";
vertical-align: middle;
top: auto;
right: 0;
bottom: -23px;
z-index: 5;
height: calc(48px / 2);
width: 100%;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transform: rotate(180deg);
left: 0;
}
.flowBox .title:after {
position: absolute;
margin: auto;
content: "";
vertical-align: middle;
top: auto;
right: 0;
bottom: -25px;
background: #fff;
height: calc(49px / 2);
width: 100%;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transform: rotate(180deg);
}
.flowBox .detail {
padding: 10px 20px;
flex-basis: 75%;
display: flex;
align-self: end;
} #entryBox .btn {
width: 100%;
}
.wait00Sp {
transition: all 1.3s 0s ease-out;
}
.wait01Sp {
transition: all 1.3s 0.2s ease-out;
}
footer .logo {
flex-basis: 70%;
padding: 20px 20px 10px;
}
footer .snsBox {
flex-basis: 50%;
margin-bottom: 10px;
}
footer address {
flex-basis: 100%;
margin-bottom: 10px;
}
.contentBoxSmallLeft01 .title .image {
width: 80%;
margin-top: 10px;
}
}