@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Montserrat:wght@500&family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&display=swap');
#SiteID {
font-family: 'Noto Sans JP', 'Yu Gothic UI', 'Noto Sans', sans-serif !important;
}
:root {
--basic-range: 1275px;
--wide-range: 1368px;
--gutter: 10px;
--gutter-figures: 180px;
--figures-p-item: 15px 45px;
--figures-p-item-wide: 15px 80px;
--figures-p-item-lg: 15px 60px;
--figures-p-item-md: 10px 40px;
--figures-w-thumb: 166px;
--figures-w-thumb-wide: 250px;
--figures-w-thumb-lg: 100px;
--color-red: #B80004;
--color-black: #000;
--bg-red: #B80004;
/* --bg-black: #000;*/
--bg-black: linear-gradient(90deg, rgba(24, 24, 24, 1), rgba(72, 72, 72, 1) 50%, rgba(24, 24, 24, 1));
--bg-light-gray: #e4e7ea;
--icon-arrow: url('data:image/svg+xml;charset=UTF-8,') no-repeat center / 1.5em;
--icon-arrow-2: url('data:image/svg+xml;charset=UTF-8,') no-repeat 38% 50% / 1.5em;
}
#Contents {
background-color: #F3F4F5;
color: #212121;
overflow: hidden;
}
#Contents > .GridSet {
position: relative;
}
/*--------------------------------------------------
Section Title
--------------------------------------------------*/
.section-recruit {
margin-bottom: 100px;
position: relative;
z-index: 1;
}
.section-recruit *,
.section-recruit *::after,
.section-recruit *::before {
box-sizing: border-box;
}
/*--------------------------------------------------
Grid
--------------------------------------------------*/
.row {
display: flex;
flex-wrap: wrap;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.row > * {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.row.g-32 { --gutter: 32px; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-3 { flex: 0 0 auto; width: 25%; }
@media screen and (max-width: 1304px) {
.col-xl-12 { width: 100%; }
}
@media screen and (max-width: 994px) {
.col-lg-12 { width: 100%; }
}
@media screen and (max-width: 767px) {
.col-md-12 { width: 100%; }
}
@media screen and (max-width: 579px) {
.col-sm-12 { width: 100%; }
}
@media screen and (max-width: 399px) {
.col-xs-12 { width: 100%; }
}
/*--------------------------------------------------
List
--------------------------------------------------*/
.breadcrumb-list {
background-color: #ffffff;
box-sizing: border-box;
font-size: 12px;
height: 44px;
}
.breadcrumb-list ul {
display: flex;
padding-top: 14px;
}
.breadcrumb-list ul li::after {
color: #aaaaaa;
content: ">";
font-size: 10px;
margin: 0 0.8em;
}
.breadcrumb-list ul li:last-child:after {
content: "";
margin: 0;
}
.breadcrumb-list a {
text-decoration: none;
}
.breadcrumb-list a:hover {
text-decoration: underline;
}
@media screen and (max-width: 1304px) {
.interview-page-top .breadcrumb-list,.interview-page01 .breadcrumb-list,.interview-page02 .breadcrumb-list,.interview-page03 .breadcrumb-list,.interview-page04 .breadcrumb-list {
margin-left: -15px;
padding: 0 15px;
width: 100vw;
}
}
ul.asterisk li {
list-style-type: none;
position: relative;
margin-left: 1.5em;
}
ul.asterisk li:before {
content: "※";
display: inline;
position: absolute;
left: -1.5em;
}
ol.asterisk {
counter-reset:num;
padding-left: 0;
}
ol.asterisk li {
list-style-type: none;
position: relative;
padding-left: 2em;
}
ol.asterisk li:before {
/* content: "※";*/
display: inline;
position: absolute;
left: 0;
content: "※"counter(num);
counter-increment: num;
}
/*--------------------------------------------------
Utility
--------------------------------------------------*/
.ml-15 { margin-left:15px!important; }
.mb-80 { margin-bottom:80px!important; }
.fz-26 { font-size: 26px!important; }
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.br-adjust02 {
display: none;
}
@media screen and (max-width: 1150px) {
.br-adjust02 {
display: block;
}
}
.only-sp {
display: none;
}
@media screen and (max-width: 767px) {
.only-pc {
display: none;
}
.only-sp {
display: inline;
}
}
.br-adjust {
display: none;
}
@media screen and (max-width: 399px) {
.br-adjust {
display: block;
}
}
@media only screen and (min-width: 768px) and (max-width: 1250px){
.sp-size-adjust {
font-size: 2.2vw!important;
}
}
/*--------------------------------------------------
Section Title
--------------------------------------------------*/
.recruit-title {
position: relative;
margin-bottom: 65px;
}
.recruit-title h2 {
line-height: 1.2;
font-family: 'Lato', 'Meiryo', sans-serif;
font-size: 64px;
padding-bottom: 0;
}
.recruit-title-en {
line-height: 1;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
position: relative;
}
.recruit-title-en::after {
content: "";
display: inline-block;
width: 0.7em;
height: 0.7em;
background-color: #E60027;
position: relative;
top: calc(50% - 0.4em);
margin-left: 0.4em;
border-radius: 50%;
}
.recruit-title .recruit-title-en {
line-height: 1;
font-size: 13px;
margin-bottom: 10px;
}
.recruit-title-left h2 {
margin-left: 30px;
line-height: 0.92;
}
.recruit-title-left .recruit-title-en {
position: absolute;
top: 0;
left: 5px;
transform: rotate(90deg);
transform-origin: left;
margin-bottom: 0;
}
.recruit-title-en.is-vertical {
position: absolute;
top: 15%;
left: 10px;
transform: rotate(90deg) translate(-50%, 0);
transform-origin: left;
line-height: 1;
}
.recruit-title-en.is-red {
color: #e60027;
}
.recruit-title:not(.recruit-title-left) h2 br {
display: none;
}
@media screen and (max-width: 994px) {
.recruit-title-left {
margin-bottom: 35px;
}
.recruit-title h2 br {
display: inline;
}
}
/*--------------------------------------------------
Description
--------------------------------------------------*/
.description {
margin-bottom: 0;
line-height: 2.2;
}
/*--------------------------------------------------
Link
--------------------------------------------------*/
.more-3 {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #fff!important;
text-decoration: none!important;
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
line-height: 1;
}
.more-3:hover {
color: #fff!important;
}
.more-3 > span:first-child {
padding: 0.12em 0.25em;
background-image: url(/recruit/newgraduate/image/btn_read.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.more-3 > span:last-child {
background-image: url(/recruit/newgraduate/image/btn_read_arrow.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 2.2em;
margin-left: 0.2142856em;
position: relative;
overflow: hidden;
}
.more-3 > span:last-child::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-3 > span:last-child::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: -100%;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-4 {
font-family: 'Lato', sans-serif;
font-size: 20px;
line-height: 1;
padding-left: 8px;
color: #fff!important;
text-decoration: none!important;
position: relative;
white-space: nowrap;
width: 175px;
height: 26px;
background-image: url(/recruit/newgraduate/image/btn_read_small.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: flex-start;
align-items: center;
}
.more-4:hover {
color: #fff!important;
}
.more-4 span {
content: "";
position: absolute;
width: 2.5em;
height: 100%;
top: 0;
right: 0;
overflow: hidden;
}
.more-4 span::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-4 span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-general {
position: relative;
white-space: nowrap;
display: flex;
justify-content: flex-start;
}
.more-general span {
color: #ffffff;
content: "";
position: absolute;
width: 3em;
height: 100%;
top: 0;
right: 0;
overflow: hidden;
}
.more-general span::after,
.more-general span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-general span::before {
left: -100%;
}
.more-general-red,.more-general-pink,.more-general-ivory,.more-general-blue {
position: relative;
justify-content: flex-start;
line-height: 1.2;
}
.more-general-red span,.more-general-pink span,.more-general-ivory span,.more-general-blue span {
color: #ffffff;
content: "";
position: absolute;
width: 1.5em;
height: 100%;
top: 0;
right: 0;
overflow: hidden;
}
.more-general-red span::after,
.more-general-red span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("/recruit/image/arrow_red.png") center right no-repeat;
background-size: 22px 2px;
animation: arrow-slide ease-in-out 1.5s infinite;
}
.text-plus {
padding-top: 11px!important;
padding-bottom: 11px!important;
}
.new-win-text {
display: block;
font-weight: normal;
font-size: 12px;
color: #333333;
}
.more-general-pink span::after,
.more-general-pink span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("/recruit/image/arrow_pink.png") center right no-repeat;
background-size: 22px 2px;
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-general-ivory span::after,
.more-general-ivory span::before,
.more-general-blue span::after,
.more-general-blue span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("/recruit/image/arrow_ivory.png") center right no-repeat;
background-size: 22px 2px;
animation: arrow-slide ease-in-out 1.5s infinite;
}
.more-general-blue span::after,
.more-general-blue span::before {
background-image: url("/recruit/image/arrow_blue.png");
}
.more-general-red span::before,.more-general-pink span::before,.more-general-ivory span::before,.more-general-blue span::before {
left: -100%;
}
@media screen and (max-width: 1304px) {
.more-3 {
font-size: 30px;
}
.more-3 > span:first-child {
padding: 0.12em 0.25em 0.2em;
}
}
@media screen and (max-width: 767px) {
.more-3 {
font-size: 20px;
}
.more-3 > span:first-child {
padding: 0.4em 0.5em 0.5em;
}
.text-plus {
padding-top: 9px!important;
padding-bottom: 9px!important;
}
}
@keyframes arrow-slide {
0% { transform: translateX(0%); }
50% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
/*--------------------------------------------------
Component
--------------------------------------------------*/
.back-text {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 240px;
line-height: 1.4em;
mix-blend-mode: overlay;
opacity: 0.65;
text-align: center;
}
/*--------------------------------------------------
Branding
--------------------------------------------------*/
#section-branding {
margin-bottom: 80px;
}
.branding-back-image {
position: absolute;
width: 2439px; /*830px;*/ /*954px*/
height: 1100px;
top: 0;
left: calc(50% - (1400px - 1275px) );
background-image: url(/recruit/newgraduate/image/back_top_large_1100.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
#section-branding .recruit-title-en {
position: absolute;
top: 50%;
left: 10px;
transform: rotate(90deg) translate(-50%, 0);
transform-origin: left;
line-height: 1;
letter-spacing: 0.04em;
font-size: 12px;
z-index: 1;
}
.branding-main {
position: relative;
z-index: 0;
padding-top: 45px;
cursor: pointer;
}
.branding-images {
margin-left: 70px;
margin-right: calc((156px + 30px) / 2 + 15px);
height: 600px;
position: relative;
}
.branding-images > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
z-index: 0;
overflow: hidden;
}
.branding-images > div > img {
max-width: 9999px!important;
height: 100%!important;
left: 50%;
position: relative;
transform: translateX(-50%);
}
.branding-images > div.active {
opacity: 1;
z-index: 1;
visibility: visible;
}
.branding-images > div.fadein {
visibility: visible;
animation: mv-image-fadein ease-out .5s;
}
.branding-images > div.fadeout {
visibility: visible;
animation: mv-image-fadeout ease-out .5s;
}
.branding-copy {
position: absolute;
top: 0;
left: 160px;
height: calc(100% - 85px / 2);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
z-index: 2;
}
.branding-copy div:first-child {
margin-bottom: 20px;
font-weight: bold;
}
.branding-copy div:first-child {
background-color: #fff;
color: var(--color-black);
line-height: 1.2;
font-size: 22px;
padding: 10px 16px 5px;
}
.branding-copy div:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.branding-copy div:last-child span {
background-size: cover;
background-repeat: no-repeat;
color: #fff;
line-height: 1;
font-size: 72px;
font-weight: bold;
padding: 14px 0px 5px 20px;
margin-top: 5px;
margin-bottom: 5px;
}
.branding-copy div:last-child span:nth-child(1) {
background-image: url(/recruit/newgraduate/image/copy_back_top.jpg);
}
.branding-copy div:last-child span:nth-child(2) {
background-image: url(/recruit/newgraduate/image/copy_back_top_2.jpg);
}
.branding-side {
position: absolute;
top: 45px;
right: 15px;
height: calc(100% - 85px / 2);
z-index: 2;
counter-reset:number;
}
.branding-side > div {
position: absolute;
top: 0;
right: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
opacity: 0;
}
.branding-side > div.active {
opacity: 1;
z-index: 1;
visibility: visible;
}
.branding-side > div.fadein {
visibility: visible;
animation: mv-slide-fadein ease-out .5s;
}
.branding-side > div.fadeout {
visibility: visible;
animation: mv-slide-fadeout ease-out .5s;
}
.branding-thumb {
position: relative;
width: calc(30px + 156px);
height: calc(30px + 156px);
border-radius: 50%;
margin-bottom: 15px;
overflow: hidden;
padding: 15px;
background:linear-gradient(to right, rgba(255,255,255,0.5) 0, rgba(255,255,255,0.5) 30%, rgba(2184,0,4,0.5) 100%);
background: rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
}
.branding-thumb img {
border-radius: 50%;
width: 156px;
height: 156px;
}
.branding-thumb::after {
content: "";
position: absolute;
width: calc(100% - 30px);
height: calc(100% - 30px);
top: 15px;
left: 15px;
border-radius: 50%;
border:10px solid #000;
opacity: 0.4;
}
.branding-meta {
display: flex;
flex-direction: column;
padding-left: 80px;
margin-bottom: 15px;
position: relative;
color: #fff;
}
/*.branding-meta::before {
content: "0"counter(number);
counter-increment: number;
position: absolute;
top: 50%;
left: 0;
font-size: 70px;
line-height: 1;
transform: translate(0, -50%);
font-family: 'Oswald', sans-serif;
font-feature-settings: "palt";
text-align: center;
}*/
.branding-meta > div:nth-child(1) {
font-weight: bold;
font-size: 20px;
line-height: 1.2;
margin-bottom: 5px;
white-space: nowrap;
text-align: right;
}
.branding-meta > div:nth-child(2) {
font-size: 14px;
font-weight: bold;
line-height: 1.2;
text-align: right;
white-space: nowrap;
}
.branding-bottom {
display: flex;
justify-content: flex-end;
flex-direction: row;
margin-top: calc(0px - 85px / 2);
margin-right: 0;
margin-left: -10px;
margin-right: -10px;
z-index: 2;
}
.branding-item {
position: relative;
cursor: pointer;
background-color: #000;
/* max-width: 264px;
margin-left: 10px;
margin-right: 10px;*/
max-width: 176px;
margin-left: 6.5px;
margin-right: 6.5px;
}
.branding-item img {
width: 100%;
transition: opacity .5s;
opacity: 0.5;
position: relative;
}
.branding-item.active img {
opacity: 1;
}
.branding-item > div {
position: absolute;
/* padding: 15px 20px;*/
padding: 25px 10px 15px;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.branding-item > div > span {
background: var(--bg-black);
color: #fff;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
margin-top: 2px;
margin-bottom: 2px;
/* font-size: 20px;*/
font-size: 15px;
font-weight: bold;
line-height: 1;
/* padding: 5px 9px 2px;*/
padding: 4px 6px 2px;
}
.branding-item > div > span:last-child {
/* font-size: 14px;*/
font-size: 13px;
}
/*animation: arrow-slide ease-in-out 1.5s infinite;*/
@keyframes mv-image-fadein {
0% { opacity:0; transform: translateX(-50px); }
100% { opacity:1; transform: translateX(0); }
}
@keyframes mv-image-fadeout {
0% { opacity:1; transform: translateX(0); }
100% { opacity:0; transform: translateX(50px); }
}
@keyframes mv-slide-fadein {
0% { opacity:0; transform: translateX(50px); }
100% { opacity:1; transform: translateX(0); }
}
@keyframes mv-slide-fadeout {
0% { opacity:1; transform: translateX(0); }
100% { opacity:0; transform: translateX(-50px); }
}
@media screen and (max-width: 1304px) {
.branding-back-image {
top: 0;
left: auto;
right: -15px;
width: 60%;
}
}
@media screen and (max-width: 994px) {
#section-branding.section-recruit {
margin-left: 0;
margin-right: 0;
}
.branding-images {
margin-left: 40px;
}
.branding-copy {
left: 80px;
}
.branding-copy div:first-child {
font-size: 18px;
}
.branding-copy div:last-child span {
font-size: 60px;
}
.branding-images {
margin-right: calc((156px + 30px) / 2);
}
.branding-side {
right: 0px;
}
.branding-item > div {
padding-left: 10px;
padding-right: 10px;
}
.branding-item > div > span {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
#section-branding {
margin-bottom: 200px;
}
#section-branding .recruit-title-en {
top: auto;
bottom: -48px;
}
.branding-back-image {
width: 85%;
top: -100px;
}
.branding-main {
margin-left: -15px;
margin-right: -15px;
padding-top: 165px;
}
.branding-images {
margin-left: 0;
margin-right: 15px;
height: 400px;
}
.branding-copy {
position: absolute;
top: 20px;
left: 15px;
height: auto;
display: block;
z-index: 2;
}
.branding-copy div:first-child {
font-size: 20px;
margin-bottom: 15px;
}
.branding-copy div:last-child span {
font-size: 55px;
}
.branding-side {
top: auto;
right: 15px;
bottom: -10px;
height: auto;
}
.branding-side > div {
height: auto;
}
.branding-thumb {
display: none;
}
.branding-bottom {
bottom: 15px;
right: 20px;
margin-left: 0;
margin-right: 0;
position: absolute;
counter-reset:number;
}
.branding-item {
width: 30px;
height: 30px;
margin-left: 10;
margin-right: 0;
background-color: transparent;
}
.branding-item img {
display: none;
}
.branding-item > div {
display: none;
}
.branding-item::after {
/* content: "0"counter(number);
counter-increment: number;*/
content: "●";
color: #B3B3B3;
font-weight: bold;
font-family: 'Oswald', sans-serif;
font-size: 20px;
text-align: center;
display: block;
}
.branding-item.active::after {
color: var(--bg-red);
/* text-decoration: underline;*/
}
}
@media screen and (max-width: 579px) {
.branding-main {
padding-top: 145px;
}
.branding-images {
height: 350px;
}
.branding-copy div:first-child {
font-size: 16px;
}
.branding-copy div:last-child span {
font-size: 40px;
}
.branding-meta > div:nth-child(1) {
font-size: 18px;
}
.branding-meta > div:nth-child(2) {
font-size: 14px;
}
.branding-meta::before {
font-size: 60px;
}
}
@media screen and (max-width: 399px) {
.branding-main {
padding-top: 135px;
}
.branding-images {
height: 320px;
}
.branding-copy div:first-child {
font-size: 14px;
}
.branding-copy div:last-child span {
font-size: 36px;
}
}
/*--------------------------------------------------
Company
--------------------------------------------------*/
#section-company {
width: 100vw;
margin-left: calc(0px - (1400px - 1275px) / 2);
max-width:1400px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.company-left {
position: relative;
z-index: 1;
}
.company-right {
width: 630px;
background-color: #fff;
padding: 120px 112px;
}
.company-right .description {
font-size: 18px;
line-height: 2.2em;
letter-spacing: 0.04em;
margin-bottom: 80px;
}
.company-image {
position: absolute;
top: 47%;
transform: translate(0, -50%);
}
.company-image img {
width: calc(1634px / 2);
}
@media screen and (max-width: 1399px) {
#section-company {
margin-left: calc(0px - (100vw - 100%) / 2);
}
.company-image img {
width: calc(100vw - 630px + (1634px / 2 + 630px - 1400px));
}
}
@media screen and (max-width: 1304px) {
.company-image img {
max-width: none!important;
width: calc(100% + 50px);
}
.company-left {
width: 50%;
}
.company-right {
width: 50%;
padding: 50px 30px 50px 90px;
}
}
@media screen and (max-width: 994px) {
.company-right {
padding: 50px 30px 50px 70px;
}
.company-right .recruit-title h2 {
font-size: 55px;
line-height: 1.1em;
}
}
@media screen and (max-width: 767px) {
#section-company {
flex-direction: column-reverse;
margin-left: auto;
width: 100%;
}
.company-left {
width: 100%;
}
.company-right {
padding:30px 30px 80px 30px;
margin-right: -15px;
margin-left: -15px;
width: calc(100% + 30px);
}
.company-right .description {
margin-bottom: 2em;
}
.company-image {
position: relative;
top:auto;
transform: none;
}
.company-image img {
width: 100%;
}
}
@media screen and (max-width: 320px) {
.company-right .recruit-title h2 {
font-size: 49px;
line-height: 1.2em;
}
}
/*--------------------------------------------------
Works
--------------------------------------------------*/
#section-works {
padding-left: 160px;
padding-right: 160px;
padding-bottom: 60px;
margin-bottom: 250px;
position: relative;
display: flex;
}
.works-block:first-child {
padding-top: 20px;
}
.works-back {
position: absolute;
bottom: 0;
right: calc(0px - (1400px - 1275px) / 2);
z-index: -1;
}
.works-back-text {
position: absolute;
font-family: 'Lato', sans-serif;
font-size: 200px;
line-height: 0.9em;
top: -90px;
left: -100px;
z-index: -1;
color: #fff;
user-select:none;
}
.works-block-1 {
margin-bottom: 75px;
width: 554px;
}
.works-block-1 > div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.works-block-1 .description {
font-size: 18px;
letter-spacing: 0.04em;
margin-bottom: 40px;
padding-right: 50px;
}
.works-block-1 .more-3 {
margin-left: 70px;
}
@media screen and (max-width: 1304px) {
#section-works {
padding-left: 4%;
padding-right: 4%;
}
.works-back{
width: calc(100% + 15px);
right: -15px;
}
.accessory-3 {
display: none;
}
.works-block:first-child {
width: 100%;
}
.works-block-1 {
width: auto;
}
.works-block-1 .more-3 {
margin-left: 20%;
}
.works-block img {
max-width: none !important;
width: 120%;
}
}
@media screen and (max-width: 994px) {
#section-works {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.works-back {
height: 200px;
width: calc(100% + 32px + 47px);
right: -47px;
}
.works-back-text {
font-size: 100px;
top: -50px;
left: -30px;
}
}
@media screen and (max-width: 767px) {
#section-works {
display: block;
margin-bottom: 150px;
}
.works-block {
padding-left: 15px;
padding-right: 15px;
}
.works-block-1 {
flex-direction: column;
margin-bottom: 30px;
}
.works-block-1 .description {
padding-left: 0;
padding-right: 0;
margin-bottom: 2em;
}
.works-block-1 .more-3 {
margin-left: 0;
}
.works-block img {
width: 100%;
}
}
/*--------------------------------------------------
Figures
--------------------------------------------------*/
#section-figures {
padding-left: var( --gutter-figures);
padding-right: var( --gutter-figures);
padding-bottom: min(270px, calc((100vw - 30px) * 270 / 1275));
margin-bottom: 20px;
z-index: 2;
position: relative;
}
#section-figures .recruit-title h2 {
font-size: 32px;
font-weight: bold;
letter-spacing: 0.04em;
margin-left: 0;
}
.recruit-subtitle {
font-size: 24px;
margin-top: 10px;
font-weight: bold;
}
.figure-item {
margin-bottom: 20px;
background-color: #fff;
padding: var(--figures-p-item);
position: relative;
border-bottom: 3px solid #C6D1DB;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
}
.figure-item-wide {
padding: var(--figures-p-item-wide);
}
.figure-item-square {
height: calc(100% - 20px);
display: flex;
justify-content: center;
align-items: center;
}
.figure-thumb {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.figure-thumb img {
width: var(--figures-w-thumb);
height: var(--figures-w-thumb);
min-width: var(--figures-w-thumb);
min-height: var(--figures-w-thumb);
}
.figure-thumb.figure-thumb-large img {
width: var(--figures-w-thumb-wide);
height: var(--figures-w-thumb-wide);
min-width: var(--figures-w-thumb-wide);
min-height: var(--figures-w-thumb-wide);
}
.figure-thumb > div {
font-size: 22px;
font-weight: bold;
white-space: nowrap;
z-index: 1;
text-align: center;
line-height: 1.2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.figures-back-text {
position: absolute;
font-family: 'Lato', sans-serif;
font-size: 200px;
line-height: 0.9em;
top: -150px;
right: -113px;
z-index: -1;
color: #fff;
font-weight: bold;
user-select:none;
}
.figures-back {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
z-index: -1;
}
.figures-back-image {
width: 100%;
}
.figure-data {
font-size: 30px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
position: relative;
font-size: 30px;
line-height: 1;
white-space: nowrap;
align-items: baseline;
}
.figure-data span {
font-size: 2.4em;
display: inline-block;
margin-left: 3px;
margin-right: 3px;
color: #E60027;
font-weight: bold;
font-family: 'Oswald', sans-serif;
}
.figure-data span.plus {
font-weight: normal;
font-size: 2em;
margin-left: 10px;
margin-right: 10px;
align-self: center;
color: #333;
}
.figure-data sup {
font-size: 0.5em;
}
.figure-remarks-1 {
position: relative;
margin-top: -20px;
font-size: 14px;
}
.figure-remarks-1 > .asterisk {
margin-top: 0;
margin-bottom: 5px;
}
.figure-remarks-2 {
font-size: 14px;
margin-top: 10px;
}
.figure-graph {
font-size: 15px;
}
.figure-graph > div:first-child {
line-height: 1;
}
.figure-graph .figure-data {
font-size: 20px;
}
.figure-graph .figure-data span {
font-size: 40px;
}
.figure-chart {
position: relative;
width: 330px;
height: 330px;
display: flex;
align-items: center;
}
.figure-chart img {
width: 103px;
height: 55px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.figure-chart > div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-weight: bold;
font-size: 22px;
}
#figure-canvas {
width: 330px;
height: 330px;
}
@media screen and (max-width: 1304px) {
#section-figures {
--gutter-figures: 100px;
}
}
@media screen and (max-width: 994px) {
#section-figures {
--gutter-figures: 30px;
}
.figures-back-text {
font-size: 100px;
top: -63px;
left: 30px;
}
.figures {
margin-top: 20px;
}
.figure-item {
padding: var(--figures-p-item-lg)!important;
}
.figure-thumb > div {
font-size: 20px;
}
.figure-thumb img {
width: var(--figures-w-thumb-lg)!important;
height: var(--figures-w-thumb-lg)!important;
min-width: var(--figures-w-thumb-lg)!important;
min-height: var(--figures-w-thumb-lg)!important;
}
.figure-remarks-1 {
margin-top: 0;
}
}
@media screen and (max-width: 767px) {
#section-figures {
/*
--gutter-figures: 10px;
*/
padding-left: 0;
padding-right: 0;
}
.figure-item {
padding: var(--figures-p-item-md)!important;
}
.figure-data {
font-size:16px;
}
.figure-data span {
font-size: 4em;
}
.figure-data span.plus {
font-size: 2em;
}
.figure-remarks-1 {
font-size: 10px;
}
.figure-remarks-2 {
font-size: 10px;
}
}
@media screen and (max-width: 579px) {
#section-figures {
--gutter-figures: 15px;
}
.figure-thumb > div {
font-size: 16px;
}
.figure-data span {
font-size: 2.4em;
}
.figure-data span.plus {
font-size: 1em;
}
.figure-chart {
width: 260px;
height: 260px;
}
}
@media screen and (max-width: 399px) {
#figure-canvas {
width: 240px;
height: 240px;
}
.size-adjust-01 .figure-data {
font-size: 11px;
}
}
/*--------------------------------------------------
Links
--------------------------------------------------*/
#section-links {
margin-bottom: 20px;
background-color: #212121;
padding: 80px 60px 80px 60px;
}
.links-item {
color: #fff!important;
text-decoration: none!important;
border: 1px solid #fff;
display: flex;
justify-content: space-between;
width: 100%;
padding: 35px 35px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
}
.links-item::before {
content: "";
position: absolute;
top:-3px;
left: -3px;
width: 5px;
height: calc(100% + 3px * 2);
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
.links-item::after {
content: "";
position: absolute;
top:-3px;
right: -3px;
width: 5px;
height: calc(100% + 3px * 2);
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
.links-item > div:first-child > div:first-child {
font-size: 30px;
}
.links-item > div:last-child {
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 994px) {
#section-links {
padding: 15px 25px;
}
.links-item {
padding: 20px;
flex-direction: column;
}
.links-item > div:last-child {
display: block;
margin-top: 20px;
}
}
@media screen and (max-width: 767px) {
.links-item {
flex-direction: row;
}
}
@media screen and (max-width: 579px) {
.links-item {
flex-direction: column;
}
}
/*--------------------------------------------------
Interview
--------------------------------------------------*/
#section-interview-top,
#section-interview-patt01 {
margin-bottom: 0;
}
#section-interview-patt02 {
margin-bottom: 60px;
}
#section-interview-patt03 {
margin-bottom: 150px;
}
.interview-top-wrap {
width: var(--wide-range);
margin-left: calc(0px - (var(--wide-range) - var(--basic-range)) / 2);
height: 673px;
position: relative;
}
.interview-top-bg-bottom {
background-color: var(--bg-light-gray);
bottom: 0;
height: 200px;
position: absolute;
width: 100%;
z-index: -1;
}
.interview-top-bg-photo {
background: center center/cover no-repeat;
height: 100%;
position: absolute;
right: 0;
width: 73%;
}
.interview-copy-wrap {
left: 9%;
/* top: 206px;*/
top: 342px;
position: absolute;
}
.interview-copy-num {
background: url(/recruit/newgraduate/image/bg_black_124.jpg) center center/cover no-repeat;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 105px;
line-height: 0.97em;
height: 1.05em;
margin-bottom: 26px;
text-align: center;
width: 1.2em;
}
.interview-copy {
background-image: linear-gradient(
to bottom,
transparent 0%,
#ffffff 0%,
#ffffff 92%,
transparent 92%
);
font-size: 32px;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.04em;
}
.interview-copy .blank {
padding-left: 0.5em;
}
.interview-profile {
background-color: #ffffff;
bottom: 0;
font-weight: bold;
height: 56px;
padding: 18px 320px 0 30px;
position: absolute;
right: 0;
}
.interview-profile-homed {
font-size: 20px;
margin-right: 24px;
}
.interview-profile-name,
.interview-profile-joined {
font-size: 12px;
margin-right: 16px;
}
.interview-profile-link {
background: url(/recruit/newgraduate/image/bg_red_241.jpg)top center/cover no-repeat;
bottom: 15px;
color: #ffffff;
display: block;
font-size: 13px;
font-weight: bold;
height: 58px;
padding: 20px 0 0 24px;
position: absolute;
right: 63px;
text-decoration: none;
width: 241px;
}
.interview-profile-link:link,
.interview-profile-link:visited {
color: #ffffff;
text-decoration: none;
}
@media screen and (max-width: 1274px) {
.interview-top-wrap {
width: 100vw;
margin-left: -15px;
}
.interview-profile-link {
right: 0;
}
}
@media screen and (max-width: 900px) {
.interview-copy .only-sp {
display: inline;
}
}
@media screen and (max-width: 767px) {
.interview-patt01-bg {
padding-top: 10vw;
}
.interview-top-wrap {
height: 550px;
}
.interview-top-bg-photo {
background-position-y: -50px;
width: 86%;
}
.interview-copy-wrap {
left: 6%;
/* top: 170px;*/
top: 259px;
}
.interview-copy-num {
font-size: 60px;
}
.interview-copy {
background-image: linear-gradient(
to bottom,
transparent 5%,
#ffffff 5%,
#ffffff 100%,
transparent 100%
);
font-size: 19px;
line-height: 2.2em;
padding-bottom: 0.2em;
padding-top: 0.3em;
}
.interview-profile {
height: 5em;
padding-bottom: 100px;
padding-right: 0;
width: 80%;
}
.interview-profile span {
display: inline-block;
}
.interview-profile-homed {
width: 100%;
}
.interview-profile-link {
bottom: 8px;
height: 30px;
padding-top: 6px;
right: 8px;
}
}
@media screen and (max-width: 399px) {
.interview-page01 .interview-top-bg-photo {
background-position-x: -370px;
}
.interview-page02 .interview-top-bg-photo {
background-position-x: -350px;
}
/* .interview-page04 .interview-top-bg-photo {
background-position-x: -250px;
}*/
.interview-page03 .interview-top-bg-photo {
background-position-x: -400px;
}
.interview-page06 .interview-top-bg-photo {
background-position-x: -400px;
}
}
.interview-patt01-bg {
background-color: var(--bg-light-gray);
margin-left: calc(0px - (var(--wide-range) - var(--basic-range)) / 2);
padding-bottom: 70px;
width: var(--wide-range);
}
.interview-patt-main {
display: flex;
justify-content: center;
}
#section-interview-patt01 .interview-patt-main {
flex-direction: row-reverse;
margin-top: -150px;
}
#section-interview-patt01 .interview-patt-main-photo {
margin-right: 64px;
}
.interview-patt-main-text {
margin-top: 55px;
width: 580px;
}
.interview-patt-main-text .recruit-title-en {
margin-bottom: 16px;
}
.interview-patt-main-text .recruit-subtitle {
margin-bottom: 2em;
}
.interview-patt-main-text .description p {
color: #4a4a4a;
line-height: 2em;
margin-bottom: 2em;
}
@media screen and (max-width: 1274px) {
.interview-patt01-bg {
margin-left: -15px;
width: 100vw;
}
.back-text {
font-size: 17vw;
}
#section-interview-patt01 .interview-patt-main {
margin-left: 15px;
margin-right: 15px;
margin-top: -11vw;
box-sizing: border-box;
}
#section-interview-patt01 .interview-patt-main-photo {
margin-right: 6vw;
}
}
@media screen and (max-width: 767px) {
.interview-patt-main {
display: block;
}
#section-interview-patt01 .interview-patt-main {
margin-top: -27vw;
}
.interview-patt-main-text .recruit-subtitle {
font-size: 20px;
margin-bottom: 1em;
}
.interview-patt-main-text {
width: 100%;
}
#section-interview-patt01 .interview-patt-main-photo {
margin-right: 0;
}
}
.interview-patt02-bg {
margin-left: calc(0px - (var(--wide-range) - var(--basic-range)) / 2);
width: var(--wide-range);
}
#section-interview-patt02 .interview-patt-main-photo {
margin-top: -60px;
}
#section-interview-patt02 .interview-patt-main-text {
margin-right: 56px;
margin-top: 110px;
}
.interview-patt02-bg .interview-patt-bg-photo {
position: relative;
}
.interview-patt02-bg .interview-patt-bg-photo::before {
background: url(/recruit/newgraduate/image/dcr_aboutworks.png) center center/cover no-repeat;
content: "";
height: 57px;
left: 174px;
position: absolute;
top: -35px;
width: 78px;
}
#section-interview-patt02 .interview-patt-main-photo {
position: relative;
}
#section-interview-patt02 .interview-patt-main-photo::before {
background: url(/recruit/newgraduate/image/dcr_accessory.png) center center/cover no-repeat;
bottom: 15px;
content: "";
height: 57px;
position: absolute;
right: 50px;
width: 137px;
}
@media screen and (max-width: 1274px) {
.interview-patt02-bg {
margin-left: -15px;
width: 100vw;
}
.interview-patt02-bg .interview-patt-bg-photo::before {
left: 10vw;
}
}
@media screen and (max-width: 767px) {
#section-interview-patt02 .interview-patt-main-text {
margin-right: 5vw;
margin-top: 20px;
}
#section-interview-patt02 .interview-patt-main-photo {
margin-top: 0;
}
#section-interview-patt02 .interview-patt-main-photo::before {
bottom: -25px;
right: 5vw;
}
}
.interview-patt03-bg .back-text {
font-size: 200px;
line-height: 0.9em;
mix-blend-mode: normal;
opacity: 1;
}
#section-interview-patt03::before {
background: url(/recruit/newgraduate/image/back_shape_2.png) center center/contain no-repeat;
bottom: -558px;
content: "";
height: 935px;
position: absolute;
right: -609px;
width: 1012px;
}
#section-interview-patt03 .interview-patt-main {
margin-top: -276px;
}
#section-interview-patt03 .interview-patt-main-text {
width: 754px;
}
#section-interview-patt03 .description {
position: relative;
}
#section-interview-patt03 .description::after {
background: url(/recruit/newgraduate/image/dcr_aboutcompany_2.png) center center/cover no-repeat;
content: "";
height: 86px;
position: absolute;
right: -170px;
top: 260px;
width: 42px;
}
@media screen and (max-width: 1120px) {
.interview-patt03-bg .back-text {
font-size: 17.5vw;
}
#section-interview-patt03 .interview-patt-main {
margin-top: -24.5vw;
}
}
@media screen and (max-width: 767px) {
#section-interview-patt03 {
margin-bottom: 4em;
}
#section-interview-patt03::before {
bottom: -140vw;
right: -116vw;
width: 200vw;
}
#section-interview-patt03 .interview-patt-main {
margin-top: -41vw;
}
#section-interview-patt03 .interview-patt-main-text {
width: 100%;
}
#section-interview-patt03 .description::after {
display: none;
}
#section-interview-patt03 .interview-patt-main-text .description p.mb-80 {
margin-bottom: 2em !important;
}
}
.interview-patt04-bg {
background-color: #ffffff;
margin-left: calc(0px - (var(--wide-range) - var(--basic-range)) / 2);
width: var(--wide-range);
}
#section-interview-patt04 .interview-patt-wrap {
margin: 0 auto;
padding-bottom: 50px;
padding-top: 82px;
width: 1120px;
}
#section-interview-patt04 .recruit-title {
margin-bottom: 0;
}
#section-interview-patt04 .recruit-title h2 {
background: none;
font-size: 48px;
line-height: 1.05em;
}
#section-interview-patt04 .recruit-subtitle {
font-size: 20px;
}
#section-interview-patt04 .recruit-title-en {
font-size: 12px;
}
#section-interview-patt04 .interview-patt-main {
justify-content: space-between;
}
#section-interview-patt04 .interview-patt-main-text {
width: 528px;
}
#section-interview-patt04 .interview-patt-main-text .recruit-subtitle {
margin-bottom: 0.6em;
}
@media screen and (max-width: 1274px) {
.interview-patt04-bg {
margin-left: -15px;
width: 100vw;
}
}
@media screen and (max-width: 1150px) {
.interview-patt04-bg {
padding: 0 15px;
}
#section-interview-patt04 .interview-patt-wrap {
padding-top: 4vw;
width: auto;
}
#section-interview-patt04 .interview-patt-main-text {
margin-top: 3vw;
}
#section-interview-patt04 .interview-patt-main-text:first-child {
margin-right: 5vw;
}
}
@media screen and (max-width: 767px) {
#section-interview-patt04 {
margin-bottom: 50px;
}
#section-interview-patt04 .interview-patt-wrap {
padding-top: 8vw;
}
#section-interview-patt04 .interview-patt-main-text {
margin-top: 8vw;
width: 100%;
}
#section-interview-patt04 .interview-patt-main-text:first-child {
margin-right: 0;
}
}
#section-interview-other .recruit-title {
text-align: center;
}
#section-interview-other .recruit-title .recruit-title-en {
margin-bottom: 0;
}
.interview-other-list {
display: flex;
flex-wrap: wrap;
/*justify-content: space-between;*/
gap: 9px 9px;
}
.interview-other-list a {
display: block;
max-width: 312px;
position: relative;
}
.interview-other-list a.is-current {
pointer-events: none;
}
.interview-other-list a::after {
background-color: #4a4a4a;
content: "";
display: block;
height: 100%;
left: 0;
mix-blend-mode: multiply;
opacity: 0.63;
position: absolute;
transition: opacity 0.1s ease-out;
top: 0;
width: 100%;
}
.interview-other-list a:hover::after,
.interview-other-list a.is-current::after {
opacity: 0;
}
.interview-other-list-text {
bottom: 27px;
left: 29px;
position: absolute;
z-index: 1;
}
.interview-other-list-text p,
.interview-other-list-text span {
background: url(/recruit/newgraduate/image/btn_read.jpg) center center/cover no-repeat;
color: #ffffff;
display: inline-block;
font-weight: bold;
min-height: 1.44em;
margin-bottom: 0.2em;
padding: 0 0.3em;
}
.interview-other-list-text p {
font-size: 32px;
}
.interview-other-list-text p.small {
font-size: 26px;
height: 1.64em;
margin-bottom: 0.3em;
padding: 0.1em 0.3em;
}
.interview-other-list-text span {
padding: 0 0.7em;
}
@media screen and (max-width: 1300px) {
.interview-other-list {
gap: 0.5vw 0.5vw;
}
/* .interview-other-list > li {
margin-right: 0.8vw;
}
.interview-other-list > li:last-child {
margin-right: 0;
}*/
.interview-other-list-text {
left: 10%;
}
.interview-other-list-text p {
font-size: 2.6vw;
}
.interview-other-list-text p.small {
font-size: 1.9vw;
}
}
@media screen and (max-width: 767px) {
#section-interview-other {
margin-bottom: 50px;
}
#section-interview-other .recruit-title h2 {
font-size: 32px;
}
#section-interview-other .recruit-title {
margin-bottom: 30px;
}
#section-interview-other .recruit-subtitle {
font-size: 20px;
}
.interview-other-list {
flex-wrap: wrap;
justify-content: space-between;
gap: unset;
}
.interview-other-list > li {
margin-bottom: 1.4vw;
margin-right: 0;
width: 49.2%;
}
.interview-other-list-text {
left: 5%;
}
.interview-other-list-text p {
font-size: 5vw;
}
.interview-other-list-text p.small {
font-size: 3.8vw;
}
.interview-other-list-text span {
font-size: 3.6vw;
height: 1.64em;
}
}
/*--------------------------------------------------
Entry
--------------------------------------------------*/
#section-entry {
margin-bottom: 20px;
}
#section-entry > a,
#section-entry.multiple {
display: block;
color: #fff !important;
text-decoration: none !important;
position: relative;
}
#section-entry > a > div,
#section-entry.multiple .entry-inner {
padding: 0 120px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
#section-entry.multiple .entry-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#section-entry > a > div > p:first-child,
#section-entry.multiple .entry-inner > div:first-child p:first-child {
font-family: 'Lato', sans-serif;
font-size: 80px;
line-height: 1.6em;
}
#section-entry > a > div > p:nth-child(2),
#section-entry.multiple .entry-inner > div:first-child p:nth-child(2) {
font-size: 20px;
font-weight: bold;
letter-spacing: 0.06em;
}
#section-entry.multiple .entry-inner > div:first-child p:nth-child(2) {
color: #fff;
}
#section-entry img {
width: 100%;
}
#section-entry.multiple .entry-inner .entry-link > p {
position: relative;
font-size: 20px;
line-height: 2;
}
#section-entry.multiple .entry-inner .entry-link > p a {
color: #fff !important;
}
.entry-arrow {
position: absolute;
right: 120px;
top: calc(50% - 40px);
width: 80px;
height: 80px;
overflow: hidden;
font-size: 40px;
}
.multiple .entry-arrow {
right: 0;
top: 0;
height: 1em;
}
.entry-arrow::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: -100%;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
.entry-arrow::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: var(--icon-arrow);
animation: arrow-slide ease-in-out 1.5s infinite;
}
@media screen and (max-width: 994px) {
#section-entry > a > div,
#section-entry.multiple .entry-inner {
padding: 0 40px;
}
#section-entry > a > div > p:first-child,
#section-entry.multiple .entry-inner > div:first-child p:first-child {
font-size: 60px;
}
#section-entry > a::after {
right: 100px;
}
.entry-arrow {
right: 40px;
}
}
@media screen and (max-width: 767px) {
#section-entry > a > div {
padding: 0 20px;
}
#section-entry > a > div > p:first-child {
font-size: 32px;
}
#section-entry > a::after {
right: 50px;
}
#section-entry.multiple {
background: url(/recruit/newgraduate/image/back_entry.jpg) center center/cover no-repeat;
}
#section-entry.multiple img {
display: none;
}
#section-entry.multiple .entry-inner {
position: relative;
padding: 10px 20px;
align-items: flex-start;
flex-direction: column;
}
#section-entry.multiple .entry-inner > div:first-child {
margin-bottom: 20px;
}
#section-entry.multiple .entry-inner > div:first-child p:first-child {
font-size: 32px;
}
.entry-arrow {
right: 20px;
}
}
/*--------------------------------------------------
Accessory
--------------------------------------------------*/
.accessory-1 {
position: absolute;
top: -44px;
left: 80px;
z-index: 2;
background-image: url(/recruit/newgraduate/image/dcr_aboutcompany.png);
background-repeat: no-repeat;
background-size: cover;
width: 227px;
height: 88px;
}
.accessory-2 {
position: absolute;
bottom: -43px;
left: 267px;
z-index: 2;
background-image: url(/recruit/newgraduate/image/dcr_aboutcompany_2.png);
background-repeat: no-repeat;
background-size: cover;
width: 42px;
height: 86px;
}
.accessory-3 {
position: absolute;
width: 61px;
height: 57px;
top: 35px;
left: 688px;
z-index: 2;
background-image: url(/recruit/newgraduate/image/dcr_aboutworks.png);
background-repeat: no-repeat;
background-size: cover;
width: 78px;
height: 57px;
}
.accessory-4 {
position: absolute;
top: -57px;
right: -62px;
z-index: 2;
background-image: url(/recruit/newgraduate/image/dcr_datafigure_2.png);
background-repeat: no-repeat;
background-size: cover;
width: 140px;
height: 57px;
}
.accessory-5 {
position: absolute;
top: 615px;
left: 50px;
z-index: 2;
background-image: url(/recruit/newgraduate/image/dcr_datafigure.png);
background-repeat: no-repeat;
background-size: cover;
width: 42px;
height: 48px;
}
.accessory-6 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 85px);
z-index: 0;
}
.accessory-6 > span {
position: absolute;
top: 0;
left: 100px;
width: 2px;
height: 100%;
z-index: 0;
background-color: #E9EDEC;
}
.accessory-6 > span:nth-child(1) { left: calc(100% / 7 * 0 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(2) { left: calc(100% / 7 * 1 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(3) { left: calc(100% / 7 * 2 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(4) { left: calc(100% / 7 * 3 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(5) { left: calc(100% / 7 * 4 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(6) { left: calc(100% / 7 * 5 + 100% / 7 / 2 - 1px); }
.accessory-6 > span:nth-child(7) { left: calc(100% / 7 * 6 + 100% / 7 / 2 - 1px); }
.accessory-7 {
position: absolute;
bottom: -38%;
left: -50%;
background-image: url(/recruit/newgraduate/image/back_shape_2.png);
background-repeat: no-repeat;
background-size: cover;
width: 1011px;
height: 935px;
z-index: -2;
}
.accessory-8 {
position: absolute;
bottom: -40%;
right: -25%;
background-image: url(/recruit/newgraduate/image/back_shape_1.png);
background-repeat: no-repeat;
background-size: cover;
width: 852px;
height: 852px;
z-index: -2;
}
.accessory-9 {
position: absolute;
bottom: 0;
transform: translate(0, 100%);
right: 0;
background-image: url(/recruit/newgraduate/image/dcr_aboutworks_2.png);
background-repeat: no-repeat;
background-size: cover;
width: 775px;
height: 86px;
z-index: -2;
}
@media screen and (max-width: 1304px) {
}
@media screen and (max-width: 994px) {
.accessory-1 {
width: calc(227px * 0.6);
height: calc(88px * 0.6);
top: calc(0px - 88px * 0.6 / 2);
left: 38px;
}
.accessory-2 {
width: calc(42px * 0.6);
height: calc(86px * 0.6);
bottom: calc(0px - 86px * 0.6 / 2);
left: 100px;
}
.accessory-3 {
left: auto;
top: 30px;
right: 18px;
width: calc(78px * 0.8);
height: calc(57px * 0.8);
}
.accessory-5 {
display: none;
}
.accessory-9 {
width: calc(775px * 0.6);
height: calc(86px * 0.6);
}
}
@media screen and (max-width: 767px) {
.accessory-1 {
width: calc(227px * 0.4);
height: calc(88px * 0.4);
top: calc(0px - 88px * 0.4 / 2);
left: 38px;
}
.accessory-2 {
width: calc(42px * 0.4);
height: calc(86px * 0.4);
bottom: calc(0px - 86px * 0.4 / 2);
left: 100px;
}
.accessory-3 {
left: auto;
top: 35px;
right: 18px;
width: calc(78px * 0.6);
height: calc(57px * 0.6);
}
.accessory-4 {
width: calc(140px * 0.6);
height: calc(57px * 0.6);
top: calc(0px - 57px * 0.6);
right: 4px;
}
.accessory-5 {
display: none;
}
.accessory-7 {
bottom: -30%;
width: calc(1011px * 0.5);
height: calc(935px * 0.5);
}
.accessory-8 {
bottom: -20%;
width: calc(852px * 0.5);
height: calc(852px * 0.5);
}
.accessory-9 {
width: calc(775px * 0.5);
height: calc(86px * 0.5);
}
}
.delay {
opacity: 0;
transform: translate(0, 100px);
transition: opacity 1s, transform 1s;
}
.delay.show {
opacity: 1;
transform: translate(0, 0);
}
.ring {
height: 98%;
width: 98%;
vertical-align: middle;
transform-origin: center;
transform: rotate(-90deg);
position: absolute;
top: 1%;
left: 1%;
z-index: 1;
}
.ring circle {
fill: none;
stroke: #fff;
stroke-dasharray: 0, 126;
stroke-dashoffset:0;
display: none;
}
.ring circle.start {
display: block;
animation: stretch 4s ease-in-out;
animation-delay: .5s
}
@keyframes stretch {
0% {
stroke-dasharray: 0, 126;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 126, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 126, 126;
stroke-dashoffset: -126;
}
}
/*--------------------------------------------------
Recruit Top
--------------------------------------------------*/
#Contents.recruit-top {
padding-left: 0;
padding-right: 0;
background-color: #ffffff;
}
#Contents.recruit-top .breadcrumb-list {
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
.recruit-branding {
width: 100%;
height: 250px;
background: url("/recruit/image/img_recruit_branding.jpg") center center no-repeat;
margin-bottom: 100px;
}
.recruit-branding .recruit-branding-in {
display: table;
width: 100%;
max-width: 1305px;
height: 100%;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}
.recruit-branding .recruit-branding-in h1 {
display: table-cell;
text-align: left;
vertical-align: middle;
}
.recruit-branding .recruit-branding-in h1 > span {
position: relative;
display: inline-block;
font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-weight: bold;
font-size: 30px;
color: #0d3558;
}
.recruit-branding .recruit-branding-in h1 > span::before {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #0d3558;
}
.contents-section {
margin-bottom: 100px;
}
.contents-section-light {
margin-bottom: 50px!important;
}
.contents-width {
position: relative;
z-index: 1;
width: 100%;
max-width: 1275px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.recruit-top-set {
width: 100%;
}
.recruit-top-set .recruit-top-set-item {
float: left;
width: 31.921568627%;
height: 396px;
margin-right: 2.117647058%;
padding: 3.137254901% 2.352971176% 2.352971176% 2.352971176%;
background-color: #f5f5f5;
box-sizing: border-box;
}
.recruit-top-set .recruit-top-set-item:nth-child(3n) {
margin-right: 0;
}
.recruit-top-link {
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 18px;
border: solid 1px #e60027;
text-decoration: none;
text-align: center;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
color: #e60027;
transition: 0.2s;
}
.recruit-top-link:link,
.recruit-top-link:visited {
color: #e60027;
text-decoration: none;
}
.recruit-top-link:hover {
background-color: rgba(255,255,255,0.9);
}
.recruit-top-set-icon {
width: 100%;
height: auto;
max-width: 212px;
margin: 0 auto 40px auto;
border-radius: 212px;
background-color: #ffffff;
}
.recruit-top-set-icon > img {
width: 100%;
height: auto;
}
.fs-24 {
font-size: 24px!important;
}
.recruit-set-item {
float: left;
width: 48.078431372%;
margin-right: 3.84317254%;
}
.recruit-set-item:nth-child(2n) {
margin-right: 0;
}
a.recruit-set-item-link {
margin-top: 20px;
}
a.recruit-set-item-link {
text-decoration: none;
font-weight: bold;
font-size: 20px;
color: #e10229;
line-height: 1.2;
}
a.recruit-set-item-link:hover {
text-decoration: underline;
}
.recruit-set-item-image img {
width: 100%;
height: auto;
transition: 0.2s;
}
a.recruit-set-item-link:hover .recruit-set-item-image img {
opacity: 0.8;
}
.recruit-set-item-title {
margin: 0 0 50px 0;
padding: 0;
background: none;
font-weight: bold;
font-size: 20px;
color: #e10229;
line-height: 1.3;
}
.recruit-set-item-caption {
margin-top: 25px;
line-height: 1.3;
}
.recruit-set-item-text {
padding-right: 30px;
font-size: 16px;
line-height: 1.6;
}
@media screen and (max-width: 1305px) {
.contents-width {
padding: 0 15px;
}
}
@media screen and (max-width: 767px) {
.recruit-branding {
width: 100%;
height: 150px;
background: url("/recruit/image/img_recruit_branding.jpg") left 25% center no-repeat;
background-size: cover;
margin-bottom: 50px;
}
.contents-section {
margin-bottom: 50px;
}
.recruit-top-set .recruit-top-set-item {
float: none;
width: 100%;
height: auto;
margin-right: 0;
margin-bottom: 30px;
padding: 30px;
}
.recruit-top-set .recruit-top-set-item:last-child {
margin-bottom: 0;
}
.recruit-top-link {
height: auto;
padding-top: 10px;
padding-bottom: 7px;
}
.recruit-branding .recruit-branding-in h1 > span {
font-size: 24px;
}
.recruit-branding .recruit-branding-in h1 > span::before {
bottom: -3px;
}
.recruit-top-set-icon {
margin: 0 auto 30px auto;
}
}
@-moz-document url-prefix(), @media screen and (max-width: 767px) {
.recruit-top-link {
padding-top: 10px;
padding-bottom: 10px;
}
}
/*--------------------------------------------------
Message
--------------------------------------------------*/
#Contents.sub-page {
padding-left: 0;
padding-right: 0;
}
.GridSet.wid100p {
width: 100%;
margin: 0!important;
}
#Contents.sub-page .GridSet.wid100p .Grid4 {
padding: 0!important;
}
#Contents.sub-page .breadcrumb-list {
padding: 0 15px;
}
.sub-page-layout .recruit-title-en.is-vertical {
top: 116px;
}
.sub-page-layout {
padding: 75px 15px 60px 25px;
}
.message-title h1 {
font-size: 50px;
font-weight: bold;
line-height: 1.1;
color: #212121;
}
.message-title h1 span {
display: block;
margin-top: 5px;
font-size: 26px;
}
.message-branding {
position: relative;
z-index: 1;
width: 100%;
/*max-width: 1400px;*/
height: 364px;
margin: 0 auto 50px auto;
background: url("/recruit/newgraduate/image-message/img_message_branding.jpg") center top no-repeat;
background-size: cover;
}
.message-greeting {
margin-bottom: 100px;
font-size: 20px;
line-height: 1.4;
}
.message-section {
width: 100%;
max-width: 1130px;
margin: 0 auto 75px auto;
}
.message-title-2nd {
margin: 0 0 30px 0!important;
padding: 13px 15px 10px 15px;
background-color: #e8e8e8;
background-image: none;
font-weight: bold;
font-size: 24px;
color: #212121;
line-height: 1.3;
}
.message-list {
margin-top: 30px;
}
.message-list > li {
min-height: 26px;
margin-bottom: 10px;
padding-top: 3px;
padding-left: 45px;
background: url("/recruit/newgraduate/image-message/icon_message_list.png") left top no-repeat;
background-size: 34px 26px;
font-weight: bold;
font-size: 18px;
line-height: 1.3;
color: #4a4a4a;
}
.message-list > li:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.message-branding {
height: 250px;
margin: 0 auto 30px auto;
background: url("/recruit/newgraduate/image-message/img_message_branding.jpg") right 32.5% top no-repeat;
background-size: cover;
}
.sub-page-layout .recruit-title-en.is-vertical {
top: 80px;
}
.sub-page-layout {
padding: 40px 15px 40px 25px;
}
.message-title h1 {
font-size: 38px;
}
.message-title h1 span {
font-size: 18px;
}
.message-greeting {
margin-bottom: 50px;
}
.message-section {
margin-bottom: 50px;
}
.message-list {
margin-top: 15px;
}
}
/*--------------------------------------------------
About People
--------------------------------------------------*/
.sub-page-layout .recruit-title-en.is-vertical.interview-top-vertical {
top: 109px;
}
.about-people-set {
width: 100%;
max-width: 1130px;
margin: 0 auto;
}
a.about-people-set-item {
position: relative;
float: left;
display: block;
width: 46.548672566%;
margin-right: 6.902654867%;
margin-bottom: 80px;
padding-left: 4.24778761%;
text-decoration: none;
box-sizing: border-box;
transition: 0.2s;
}
a.about-people-set-item:nth-child(2n){
margin-right: 0;
}
a.about-people-set-item img {
width: 100%;
height: auto;
transition: 0.2s;
}
.about-people-set-title {
display: table;
width: 100%;
background-color: #ffffff;
}
.about-people-set-title > span {
display: table-cell;
padding: 10px 10px 8px 15px;
vertical-align: middle;
font-weight: bold;
font-size: 14px;
color: #333333;
line-height: 1.3;
}
.about-people-set-absolute {
position: absolute;
bottom: 7%;
left: 0;
width: 100%;
}
.about-people-set-absolute-title {
position: relative;
top: 25px;
display: inline-block;
width: 100%;
max-width: 255px;
/* max-width: 235px;*/
padding: 7px 120px 7px 20px;
border: solid 4px transparent;
background-color: #333333;
font-weight: bold;
font-size: 20px;
color: #ffffff;
box-sizing: border-box;
transition: 0.2s;
}
.about-people-set-absolute-title > span {
position: absolute;
top: 50%;
right: 20px;
font-size: 14px;
transform: translateY(-50%);
}
.about-people-set-absolute-text {
width: 90%;
margin-left: 2%;
padding: 30px 15px 5px 15px;
border: solid 4px transparent;
background-color: #e60027;
font-weight: bold;
color: #ffffff;
line-height: 1.5;
box-sizing: border-box;
transition: 0.2s;
}
a.about-people-set-item:hover img {
opacity: 0.7;
}
a.about-people-set-item:hover .about-people-set-absolute-title {
border: solid 4px #ffffff;
}
a.about-people-set-item:hover .about-people-set-absolute-text {
border: solid 4px #ffffff;
}
@media screen and (max-width: 767px) {
.sub-page-layout .recruit-title-en.is-vertical.interview-top-vertical {
top: 71px;
}
a.about-people-set-item {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 50px;
}
.about-people-set-absolute {
bottom: 3%;
}
.about-people-set-absolute-title {
padding: 3px 120px 3px 20px;
font-size: 16px;
}
.about-people-set-absolute-text {
font-size: 12px;
}
}
/*--------------------------------------------------
About
--------------------------------------------------*/
.about-branding {
position: relative;
z-index: 1;
width: 100%;
/*max-width: 1400px;*/
height: 364px;
margin: 0 auto 50px auto;
background: url("/recruit/newgraduate/image-about/img_about_branding.jpg") center top no-repeat;
background-size: cover;
}
.section-second {
max-width: 1144px;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
}
.second-anchor {
width: 100%;
}
.second-anchor > li {
display: table;
float: left;
width: 20%;
}
.second-anchor.col4anc {
max-width: 904px;
margin: 0 auto 100px auto;
}
.second-anchor.col4anc > li {
width: 25%;
}
.second-anchor > li > a {
display: table-cell;
padding: 7px 10px 7px 10px;
border-top: solid 1px #c8c8c8;
border-bottom: solid 1px #c8c8c8;
border-right: solid 1px #c8c8c8;
background-color: #dbdbdb;
text-align: center;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
font-size: 14px;
color: #333333;
line-height: 1.2;
box-sizing: border-box;
transition: 0.2s;
}
.second-anchor > li > a:hover {
background-color: #8b8b8b;
color: #ffffff;
}
.second-anchor > li:first-child > a {
border-left: solid 1px #c8c8c8;
}
.second-anchor > li > a > span {
position: relative;
display: inline-block;
padding-right: 20px;
}
.second-anchor > li > a > span::before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 10px;
height: 10px;
border-top: solid 2px #e60027;
border-right: solid 2px #e60027;
transform: rotate(135deg) translateX(-50%) translateY(50%);
transition: 0.2s;
}
.second-anchor > li > a:hover > span::before {
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
}
.title-second-h1 h1 {
margin-bottom: 70px;
font-size: 50px;
font-weight: bold;
line-height: 1.25;
color: #212121;
}
.title-second-h1 h1 span {
display: block;
font-size: 26px;
}
.title-second {
margin: 0 0 40px 0!important;
padding-top: 0;
padding-bottom: 0;
padding-left: 50px;
background: url("/recruit/newgraduate/image/dcr_aboutworks.png") top 1px left no-repeat;
background-size: 40px auto;
font-weight: normal;
font-size: 24px;
color: #333333;
line-height: 1.5;
}
.title-second02 {
margin: 0 0 15px 0;
padding: 0;
background: none;
font-weight: bold;
font-size: 20px;
color: #333333;
line-height: 1.4;
}
.title-second03 {
margin: 0 0 15px 0;
padding: 0;
background: none;
font-weight: bold;
font-size: 24px;
color: #333333;
line-height: 1.4;
}
.title-second04 {
margin: 0 0 40px 0;
padding: 0;
background: none;
text-align: center;
}
.title-second04 span {
display: inline-block;
border-bottom: solid 1px #707070;
font-weight: normal;
font-size: 24px;
color: #212121;
line-height: 1.3;
}
.title-second05 {
margin: 0 0 30px 0;
padding: 0;
background: none;
text-align: center;
font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-size: 20px;
color: #e10229;
}
.text-second {
font-weight: normal;
font-size: 16px;
line-height: 1.5;
}
.text-second-large {
font-weight: normal;
font-size: 24px;
line-height: 1.4;
}
.image-second img {
max-width: 100%;
height: auto;
}
.text-second + .image-set-list {
margin-top: 50px;
}
.image-set-list > li {
float: left;
width: 46.902654867%;
margin-right: 6.194690265%;
margin-bottom: 50px;
}
.image-set-list > li:nth-child(2n) {
margin-right: 0;
}
.image-set-list > li img {
width: 100%;
height: auto;
}
.image-set-list-title {
margin-top: 15px;
font-weight: bold;
font-size: 24px;
line-height: 1.3;
}
.image-set-list-text {
margin-top: 7px;
font-size: 16px;
line-height: 1.5;
}
.about-list {
max-width: 1128px;
margin: 60px auto 0 auto;
}
.about-list > li {
position: relative;
float: left;
width: 13.120567375%;
margin-right: 8.59929078%;
}
.about-list > li:nth-child(5n) {
margin-right: 0;
}
.about-list > li .about-icon {
position: relative;
top: -13px;
z-index: 2;
width: 100%;
height: auto;
}
.about-list > li::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 148px;
background-color: #e5e5e5;
}
.about-list > li::after {
content: "";
position: absolute;
top: calc(50% - 25px);
left: calc(-50% + 18px);
z-index: 3;
width: 12px;
height: 51px;
background: url("/recruit/newgraduate/image-about/icon_triangle.png") center center no-repeat;
background-size: 12px 51px;
}
.about-list > li:first-child::after {
display: none;
}
.about-list > li .about-list-text {
position: absolute;
bottom: 10px;
left: 0;
z-index: 3;
width: 100%;
font-weight: bold;
font-size: 16px;
text-align: center;
}
.table-second {
width: 100%;
border-collapse: collapse;
}
.table-second tr th {
padding: 20px 5px;
border: solid 1px rgba(255,255,255,0.7);
background-color: rgba(183,183,183,0.4);
font-weight: bold;
font-size: 16px;
}
.table-second tr td {
padding: 20px;
border: solid 1px rgba(255,255,255,0.7);
background-color: rgba(183,183,183,0.4);
font-size: 16px;
}
.table-second tr:first-child th,.table-second tr:first-child td {
border-top: none;
}
.table-second tr:last-child th,.table-second tr:last-child td {
border-bottom: none;
}
.table-second tr th:first-child {
border-left: none;
}
.table-second tr td:last-child {
border-right: none;
}
.modal-body video {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
width: 80%;
max-width: 1000px;
margin: 0 auto;
}
.video-tag {
width: 100%;
max-width: 1000px;
}
.movie-icon {
position: relative;
display: block;
}
.movie-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 88px;
height: 88px;
border-radius: 88px;
background-color: rgba(230,0,39,0.7);
transform: translateY(-50%) translateX(-50%);
transition: 0.2s;
}
.movie-icon:hover::before {
background-color: rgba(230,0,39,1);
}
.movie-icon::after {
content: "";
position: absolute;
top: 50%;
left: calc(50% + 3px);
z-index: 2;
width: 88px;
height: 88px;
border-radius: 88px;
background: url("/recruit/newgraduate/image-about/icon_movie.png") center center no-repeat;
background-size: 29px 33px;
transform: translateY(-50%) translateX(-50%);
}
.mfp-content {
position: static;
}
.mfp-close {
top: 10px!important;
right: 10px!important;
width: 100px;
height: 100px;
background: url("/recruit/newgraduate/image-about/icon_modal_close.png") center center no-repeat!important;
background-size: 100px!important;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.taL {
text-align: left!important;
}
.taC {
text-align: center!important;
}
.taR {
text-align: right!important;
}
.mt-adjust01 {
margin-top: 30px;
}
.mt-adjust02 {
margin-top: 50px;
}
.mt-adjust03 {
margin-top: 5px;
}
.mt-adjust04 {
margin-top: 10px;
}
.mb-adjust02 {
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.mb-adjust01 {
margin-bottom: 25px;
}
}
@media screen and (max-width: 767px) {
.text-second-large {
font-size: 18px;
}
.about-branding {
height: 200px;
margin: 0 auto 30px auto;
background: url("/recruit/newgraduate/image-about/img_about_branding.jpg") center center no-repeat;
background-size: cover;
}
.second-anchor.col4anc {
margin-bottom: 0;
}
.second-anchor > li,.second-anchor.col4anc > li {
float: none;
width: 100%;
}
.second-anchor > li > a > span {
display: block;
}
.about-list {
margin: 60px auto 0 auto;
}
.about-list > li {
float: none;
width: 100%;
margin-right: 0%;
margin-bottom: 90px;
}
.about-list > li:last-child {
margin-bottom: 70px;
}
.about-list > li .about-icon {
position: absolute;
top: calc(50% - 60px);
z-index: 3;
width: 120px;
height: 120px;
border-radius: 120px;
background-color: #e5e5e5;
}
.about-list > li .about-list-text {
position: relative;
bottom: 0;
z-index: 2;
display: block;
width: calc(100% - 60px);
margin-left: 60px;
border-radius: 20px;
padding: 20px 0 20px 60px;
background-color: #ececec;
box-sizing: border-box;
}
.about-list > li::before {
display: none;
}
.about-list > li::after {
content: "";
position: absolute;
top: auto;
left: calc(50% - 25px);
bottom: -50px;
z-index: 3;
width: 51px;
height: 12px;
background: url("/recruit/newgraduate/image-about/icon_triangle_sp.png") center center no-repeat;
background-size: 51px 12px;
}
.about-list > li:first-child::after {
display: block;
}
.about-list > li:last-child::after {
display: none;
}
.title-second {
margin: 0 0 30px 0!important;
padding-left: 30px;
background: url("/recruit/newgraduate/image/dcr_aboutworks.png") top 2px left no-repeat;
background-size: 25px auto;
font-size: 20px;
line-height: 1.3;
}
.message-title-2nd {
padding: 10px 10px 7px 10px;
font-size: 20px;
}
.title-second02 {
font-size: 18px;
}
.title-second03 {
font-size: 20px;
}
.title-second04 {
margin: 0 0 30px 0;
}
.title-second04 span {
font-size: 20px;
}
.text-second + .image-set-list {
margin-top: 30px;
}
.title-second05 {
margin-bottom: 20px;
font-size: 20px;
}
.image-set-list > li {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.image-set-list > li:last-child {
margin-bottom: 15px;
}
.image-set-list-title {
margin-top: 10px;
font-size: 18px;
}
.modal-body video {
width: calc(100% - 20px);
}
.table-second {
width: 100%;
}
.table-second colgroup col {
width: 100%;
}
.table-second tr th,.table-second tr td {
display: block;
width: 100%;
padding: 10px;
border: none;
border-bottom: solid 1px rgba(255,255,255,0.7)!important;
box-sizing: border-box;
}
.mt-adjust02 {
margin-top: 30px;
}
.mt-adjust04 {
margin-top: 0;
}
.mfp-close {
top: 5px!important;
right: 5px!important;
width: 50px;
height: 50px;
background: url("/recruit/newgraduate/image-about/icon_modal_close.png") center center no-repeat!important;
background-size: 50px!important;
}
.info-declaration {
padding: 30px 15px!important;
}
}
/*--------------------------------------------------
job
--------------------------------------------------*/
.sub-page-layout .recruit-title-en.is-vertical.job-vertical {
top: 108px;
}
.drop-down-list {
position: relative;
margin-bottom: 30px;
}
.drop-down-list .drop-down-title {
position: relative;
width: 100%;
padding: 13px 220px 12px 30px;
border-radius: 30px;
background-color: #dce2f6;
box-sizing: border-box;
line-height: 1.4;
font-weight: bold;
font-size: 18px;
color: #3b4e92;
}
.drop-down-list .bg-white {
position: absolute;
top: 30px;
left: 0;
z-index: -1;
width: 100%;
height: calc(100% - 30px);
background-color: #ffffff;
transition: 0.5s;
}
.drop-down-list .drop-down-body {
width: 100%;
padding: 30px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
font-size: 16px;
box-sizing: border-box;
}
.drop-down-category {
position: absolute;
right: 15px;
top: 50%;
min-width: 200px;
padding: 5px 10px 3px 10px;
border-radius: 100px;
background-color: #6f81c2;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #ffffff;
box-sizing: border-box;
transform: translateY(-50%);
}
.drop-down-list.drop-down-red .drop-down-title {
background-color: #f1d5e2;
color: #7e3b5b;
}
.drop-down-list.drop-down-red .drop-down-category {
background-color: #b26388;
color: #ffffff;
}
.drop-down-list.drop-down-ivory .drop-down-title {
background-color: #f2e7d5;
color: #926b26;
}
.drop-down-list.drop-down-ivory .drop-down-category {
background-color: #a58a5c;
color: #ffffff;
}
.smooth-page-top {
text-align: right;
}
.smooth-page-top a {
position: relative;
display: inline-block;
padding-right: 20px;
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: #333333;
}
.smooth-page-top a:hover {
text-decoration: underline;
}
.smooth-page-top a::before {
content: "";
position: absolute;
top: 9px;
right: 2px;
width: 8px;
height: 8px;
border-top: solid 2px #e60027;
border-right: solid 2px #e60027;
transform: rotate(-45deg);
}
.next-block {
position: relative;
padding-top: 60px;
}
.next-block::before {
content: "";
position: absolute;
top: -15px;
left: calc(50% - 66px);
width: 0;
height: 0;
border-style: solid;
border-width: 23px 66px 0 66px;
border-color: #444444 transparent transparent transparent;
}
.job-link {
display: block;
width: 100%;
max-width: 400px;
margin: 25px auto 0 auto;
padding: 18px;
border: solid 1px #b26388;
text-decoration: none;
text-align: center;
box-sizing: border-box;
font-size: 18px;
font-weight: bold;
color: #b26388;
transition: 0.2s;
}
.job-link:link,
.job-link:visited {
color: #b26388;
text-decoration: none;
}
.job-link:hover {
background-color: #fff0f3;
}
.job-link.job-link-ivory {
border: solid 1px #a58a5c;
color: #a58a5c;
}
.job-link.job-link-ivory:hover {
background-color: #fff8ec;
}
.job-link.job-link-ivory:link,
.job-link.job-link-ivory:visited {
color: #a58a5c;
text-decoration: none;
}
.job-link.job-link-blue {
border: solid 1px #6f81c2;
color: #6f81c2;
}
.job-link.job-link-blue:hover {
background-color: #dce2f6;
}
.job-link.job-link-blue:link,
.job-link.job-link-blue:visited {
color: #6f81c2;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.sub-page-layout .recruit-title-en.is-vertical.job-vertical {
top: 71px;
}
.drop-down-list {
margin-bottom: 30px;
}
.drop-down-list .drop-down-title {
position: relative;
width: 100%;
padding: 15px 15px 50px 15px;
text-align: center;
border-radius: 100px;
}
.drop-down-list .bg-white {
position: absolute;
top: 30px;
left: 0;
z-index: -1;
width: 100%;
height: calc(100% - 30px);
background-color: #ffffff;
transition: 0.5s;
}
.drop-down-list .drop-down-body {
padding: 15px;
}
.drop-down-category {
position: absolute;
right: auto;
left: 50%;
top: auto;
width: calc(100% - 100px);
max-width: 300px;
bottom: 10px;
padding: 5px 10px 3px 10px;
transform: translateX(-50%) translateY(0%);
}
.job-link {
font-size: 16px;
}
}
.br-adjust01 {
display: none;
}
@media screen and (max-width: 399px) {
.br-adjust01 {
display: block;
}
}
/*--------------------------------------------------
info
--------------------------------------------------*/
.small-section {
margin-bottom: 50px;
}
.sub-page-layout .recruit-title-en.is-vertical.info-vertical {
top: 132px;
}
.info-box {
width: 100%;
}
.info-box-item {
position: relative;
float: left;
width: 49.026548672%;
margin-right: 1.946902654%;
margin-bottom: 22px;
padding: 40px 30px 20px 30px;
border-radius: 11px;
background: #e8e8e8 url("/recruit/newgraduate/image-about/bg_info_item.png") left top no-repeat;
background-size: 68px 58px;
box-sizing: border-box;
}
.info-box-item:nth-child(2n) {
margin-right: 0;
}
.info-box-item .info-box-num {
position: absolute;
top: 6px;
left: 7px;
width: 24px;
height: 24px;
border-radius: 24px;
background-color: #ffffff;
text-align: center;
font-weight: bold;
color: #bc1330;
}
.info-box-list dt {
margin-bottom: 10px;
font-weight: bold;
font-size: 20px;
line-height: 1.3;
color: #212121;
}
.info-box-list dd {
font-size: 16px;
line-height: 1.5;
color: #4a4a4a;
}
.info-list {
margin-top: 30px;
}
.info-list li {
float: left;
width: 100%;
max-width: 275px;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 10px 3px 10px;
border-radius: 50px;
background-color: #8b8b8b;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #ffffff;
box-sizing: border-box;
}
.info-list li:nth-child(4n) {
margin-right: 0;
}
.info-flow {
max-width: 1128px;
margin: 0 auto;
}
.info-flow > li {
position: relative;
float: left;
display: table;
/*width: 13.120567375%;
margin-right: 8.59929078%;*/
width: 148px;
margin-right: 97px;
margin-bottom: 20px;
}
.info-flow > li:nth-child(5n) {
margin-right: 0;
}
.info-flow > li::after {
content: "";
position: absolute;
top: calc(50% - 25px);
right: calc(-50% + 18px);
z-index: 3;
width: 12px;
height: 51px;
background: url("/recruit/newgraduate/image-about/icon_triangle.png") center center no-repeat;
background-size: 12px 51px;
}
.info-flow > li:last-child::after {
display: none;
}
.info-flow > li .info-flow-in {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 148px;
padding: 10px;
border-radius: 148px;
background-color: #e4e9ee;
font-weight: bold;
font-size: 16px;
color: #174f68;
box-sizing: border-box;
}
.info-declaration {
width: 100%;
padding: 30px;
background-color: #e8e8e8;
box-sizing: border-box;
}
.info-text-small {
display: block;
font-size: 12px!important;
line-height: 1.5!important;
}
.dt-wid-4em {
display: inline-block;
width: 4em;
}
.dt-wid-7em {
display: inline-block;
width: 7em;
}
.indent-text01 {
text-indent: -1em;
margin-left: 1em;
}
.text-paragraph {
margin-bottom: 1em;
}
.dot-list > li {
position: relative;
padding-left: 15px;
}
.dot-list > li::before {
content: "";
position: absolute;
top: 11px;
left: 5px;
width: 3px;
height: 3px;
border-radius: 3px;
background-color: #333333;
font-size: 0;
}
.info-mailadress img {
width: 100%;
max-width: 350px!important;
height: auto;
}
.info-mailadress img:hover {
border-bottom: solid 1px #cc0022;
}
.sp-scroll-box01 + .smooth-page-top,.sp-scroll-box02 + .smooth-page-top,.info-declaration + .smooth-page-top,.text-second + .smooth-page-top {
margin-top: 15px;
}
@media screen and (max-width: 1170px) {
.info-list li:nth-child(4n) {
margin-right: 10px;
}
}
@media screen and (max-width: 767px) {
.sub-page-layout .recruit-title-en.is-vertical.info-vertical {
top: 95px;
}
.sp-scroll-box01,.sp-scroll-box02 {
overflow-x: scroll;
}
.sp-scroll-box01 img {
width: 100%!important;
max-width: 100%!important;
min-width: 800px!important;
}
.sp-scroll-box02 img {
width: 100%!important;
max-width: 100%!important;
min-width: 600px!important;
}
.info-box-item {
float: none;
width: 100%;
padding: 40px 25px 20px 25px;
}
.info-box-list dt {
font-size: 18px;
}
.info-list li {
max-width: 220px;
font-size: 16px;
}
.info-flow {
margin: 0 auto;
padding-bottom: 30px;
}
.info-flow > li {
float: none;
width: 100%;
min-height: 72px;
margin-right: 0%;
margin-bottom: 40px;
}
.info-flow > li:last-child {
margin-bottom: 0;
}
.info-flow > li::after {
content: "";
position: absolute;
top: auto;
left: calc(50% - 25px);
bottom: -27px;
z-index: 3;
width: 51px;
height: 12px;
background: url("/recruit/newgraduate/image-about/icon_triangle_sp.png") center center no-repeat;
background-size: 51px 12px;
}
.info-flow > li .info-flow-in {
height: auto;
}
.small-section {
margin-bottom: 30px;
}
}
/*--------------------------------------------------
disability
--------------------------------------------------*/
.sub-page-layout .recruit-title-en.is-vertical.disability-vertical {
top: 119px;
}
.disability-table {
display: table;
width: 100%;
min-height: 90px;
}
.disability-table .col01,.disability-table .col02 {
display: table-cell;
width: 50%;
padding: 15px;
border: solid 8px #d6d6d6;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
transition: 0.2s;
}
.disability-table .col01 {
border-right: solid 4px #d6d6d6;
cursor: default;
pointer-events: none;
}
.disability-table .col02 {
border-left: solid 4px #d6d6d6;
}
.disability-table .col02:hover {
background-color: #efefef;
}
.tel-style {
display: inline-block;
min-height: 40px;
padding: 12px 5px 5px 40px;
background: url("/recruit/image/icon_tel.png") left center no-repeat;
background-size: 30px 40px;
text-decoration: none!important;
font-weight: bold;
font-size: 22px;
color: #212121!important;
line-height: 1.2;
box-sizing: border-box;
}
.mail-style {
display: inline-block;
min-height: 40px;
padding: 10px 5px 5px 50px;
background: url("/recruit/image/icon_mail.png") left center no-repeat;
background-size: 41px 30px;
text-decoration: none!important;
font-weight: bold;
font-size: 22px;
color: #212121!important;
line-height: 1.2;
box-sizing: border-box;
}
.mail-style > img {
width: 100%;
max-width: 450px!important;
height: auto;
}
@media screen and (max-width: 1170px) {
.disability-table {
display: table;
width: 100%;
min-height: 90px;
}
.disability-table .col01,.disability-table .col02 {
display: block;
width: 100%;
padding: 15px;
border: solid 6px #d6d6d6;
}
.disability-table .col01 {
border-right: solid 6px #d6d6d6;
border-bottom: solid 3px #d6d6d6;
}
.disability-table .col02 {
border-left: solid 6px #d6d6d6;
border-top: solid 3px #d6d6d6;
}
}
@media screen and (max-width: 767px) {
.sub-page-layout .recruit-title-en.is-vertical.disability-vertical {
top: 83px;
}
.disability-table .col01 {
pointer-events: auto;
cursor: pointer;
}
.disability-table .col01, .disability-table .col02 {
min-height: 105px;
padding: 10px 5px 5px 5px;
}
.tel-style {
padding: 50px 5px 5px 5px;
background: url("/recruit/image/icon_tel.png") center top no-repeat;
background-size: 30px 40px;
font-size: 20px;
}
.mail-style {
padding: 50px 5px 5px 5px;
background: url("/recruit/image/icon_mail.png") center 5px no-repeat;
background-size: 41px 30px;
font-size: 3vw;
}
.disability-table .col01:hover {
background-color: #efefef;
}
}
@media screen and (max-width: 399px) {
.mail-style {
font-size: 3.8vw;
}
}
/*--------------------------------------------------
career
--------------------------------------------------*/
.sub-page-layout .recruit-title-en.is-vertical.career-vertical {
top: 110px;
}
@media screen and (max-width: 767px) {
.sub-page-layout .recruit-title-en.is-vertical.career-vertical {
top: 74px;
}
}
/*--------------------------------------------------
clearFix
--------------------------------------------------*/
.info-flow:after,
.info-list:after,
.info-box:after,
.about-list:after,
.image-set-list:after,
.second-anchor:after,
.about-people-set:after,
.recruit-top-set:after,
.recruit-set:after,
.message-set:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .info-flow,
*:first-child+html .info-list,
*:first-child+html .info-box,
*:first-child+html .about-list,
*:first-child+html .image-set-list,
*:first-child+html .second-anchor,
*:first-child+html .about-people-set,
*:first-child+html .recruit-top-set,
*:first-child+html .recruit-set,
*:first-child+html .message-set { zoom: 1; }