@charset "UTF-8";
.site-top.newgraduate-breadcrumb {
display: none!important;
}
.site-top .newgraduate-localnav {
padding-bottom: 0;
}
.site-top.newgraduate-voice {
margin-bottom: 0!important;
}
.site-footer {
margin-top: 0!important;
}
.newgraduate-breadcrumb {
display: block;
padding: 0 15px;
border-top: 1px solid #e1e1e1;
font-size: 1.2rem;
}
.newgraduate-breadcrumb .breadcrumb-inner {
max-width: 1240px;
margin: 0 auto;
padding: 13px 0;
overflow: hidden;
}
.newgraduate-breadcrumb .breadcrumb-list {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.newgraduate-breadcrumb .breadcrumb-list > li {
position: relative;
padding: 0 35px 0 0px;
}
.newgraduate-breadcrumb .breadcrumb-list > li::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
right: 15px;
bottom: 0;
width: 8px;
height: 8px;
margin: auto 0;
border: solid #666;
border-width: 0 1px 1px 0;
background-color: transparent;
transform: rotate(-45deg);
z-index: 0;
}
.newgraduate-breadcrumb .breadcrumb-list > li > a {
display: inline-block;
color: #333;
}
.newgraduate-breadcrumb .breadcrumb-list > li:last-child > a {
pointer-events: none;
text-decoration: none;
}
.newgraduate-breadcrumb .breadcrumb-list > li:last-child::after {
display: none;
}
.newgraduate-inner {
width: 100%;
margin: 0 auto;
}
[class^="newgraduate-section"] + [class^="newgraduate-section"] {
margin-top: 0;
}
.newgraduate-section > .section-inner > *:first-child,
.newgraduate-section-v2 > .section-inner > *:first-child ,
.newgraduate-section > .section-inner > section > *:first-child,
.newgraduate-section-v2 > .section-inner > section > *:first-child {
margin-top: 0!important;
}
.newgraduate-heading1 .heading-title .heading-label {
line-height: 1.65;
font-weight: bold;
}
.newgraduate-heading2 .heading-title {
position: relative;
}
.newgraduate-heading2 .heading-title::before {
display: block;
position: absolute;
left: 0;
background-color: #cc0000;
content: "";
}
.newgraduate-heading2 .heading-title .heading-label {
line-height: 1.4;
font-weight: bold;
}
.newgraduate-heading2-v2 .heading-title {
position: relative;
}
.newgraduate-heading2-v2 .heading-title::before {
display: block;
position: absolute;
top: 0;
left: 0;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/calendar-ic01.png") no-repeat 0 0/contain;
content: ""
}
.newgraduate-heading2-v2 .heading-title .heading-label {
line-height: 1.4;
font-weight: bold;
}
.newgraduate-heading3 .heading-title {
position: relative;
}
.newgraduate-heading3 .heading-title::before {
display: block;
position: absolute;
left: 0;
top: 0;
background-color: #707070;
content: "";
}
.newgraduate-heading3 .heading-title .heading-label {
line-height: 1.4;
font-weight: bold;
}
.newgraduate-heading3-v2 .heading-title {
position: relative;
}
.newgraduate-heading3-v2 .heading-title::before {
display: block;
position: absolute;
top: 0;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/person-icon01.png") no-repeat 0 0/contain;
content: ""
}
.newgraduate-heading3-v2 .heading-title .heading-label {
line-height: 1.4;
font-weight: bold;
}
.newgraduate-heading3-v3 .heading-title {
position: relative;
}
.newgraduate-heading3-v3 .heading-title .heading-label {
line-height: 1.4;
font-weight: bold;
}
.newgraduate-lead {
margin-top: .8em;
line-height: 1.5;
}
.newgraduate-text {
margin-top: .8em;
line-height: 1.5;
}
.newgraduate-text-bold {
line-height: 1.5;
font-weight: bold;
}
.newgraduate-anchor + section > *:first-child {
margin-top: 0!important;
}
.newgraduate-anchor .anchor-list {
display: flex;
flex-flow: row wrap;
}
.newgraduate-anchor .anchor-link {
display: block;
position: relative;
min-width: 200px;
padding: 4px 30px 7px 15px;
border: 1px solid #676262;
border-radius: 10px;
text-align: center;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-anchor .anchor-link::after {
display: block;
position: absolute;
top: calc(50% - 2px);

right: 17px;
width: 10px;
height: 10px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: translateY(-50%) rotate(135deg) skew(-10deg, -10deg);
content: "";
}
.newgraduate-anchor .anchor-label {
font-size: 1.5rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.newgraduate-media > .media-detail {
flex: 1 1;
line-height: 1.5;
}
.newgraduate-media > .media-detail > :first-child {
margin-top: 0!important;
}
.newgraduate-media .media-figure {
text-align: center;
}
.newgraduate-media .media-figure > img {
max-width: 100%;
}
.newgraduate-schedule {
background: #dedede url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/jobintroduction/01-solution-sales/image/index-bg01.jpg") no-repeat center top/cover;
}
.newgraduate-schedule .schedule-inner {
width: 100%;
margin: 0 auto;
}
.schedule-box {
background-color: #fff;
}
.schedule-box .box-title {
position: relative;
font-weight: bold;
line-height: 1.4;
}
.schedule-box .box-title::before {
display: block;
position: absolute;
left: 0;
background-color: #cc0000;
content: "";
}
.schedule-list {
}
.schedule-list > *:first-child {
margin-top: 0!important;
}
.schedule-list > li {
position: relative;
}
.schedule-description-list {
display: flex;
}
.schedule-description-list > dt {
position: relative;
text-align: right;
}
.schedule-description-list > dt::before {
display: block;
position: absolute;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/jobintroduction/01-solution-sales/image/index-ic01.png") no-repeat center/contain;
content: "";
}
.schedule-description-list > dd {
flex: 1 1;
width: 100%;
}
.newgraduate-voice-container {
position: relative;
}
.newgraduate-voice .voice-heading .heading-label {
font-weight: bold;
line-height: 1.4;
}
.newgraduate-voice .voice-heading .heading_sub {
font-weight: bold;
color: #666;
text-align: center;
}
.newgraduate-button-column {
display: flex;
justify-content: flex-start;
flex-flow: row wrap;
}
.newgraduate-foot .foot-guide-column {
display: flex;
justify-content: center;
padding: 0 10px;
}
.newgraduate-foot .foot-guide-column > *:nth-of-type(2n + 1) {
margin-left: 0;
}
.newgraduate-foot .guide-item {
display: flex;
justify-content: center;
}
.newgraduate-foot .guide-item .item-link {
display: block;
text-decoration: none;
}
.newgraduate-foot .guide-item .item-figure {
position: relative;
text-align: center;
}
.newgraduate-foot .foot-detail {
background:url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/newgraduate-bg01.jpg") no-repeat center top/cover;
}
.newgraduate-foot .foot-button-wrap {
display: flex;
justify-content: center;
margin-top: 25px;
}
/*animation*/
.is-fadein {
animation-name:fadein;
animation-duration:0.5s;
animation-fill-mode:forwards;
animation-delay: 0.2s;
}
[data-fadein="ture"] {
transform: translateY(100px);
opacity: 0;
}
@keyframes fadein {
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (min-width: 768px), print {
.site-top .nav-child {
display: none!important;
}
.newgraduate-pc-hidden {
display: none;
}
.newgraduate-localnav {
position: relative;
width: 100%;
padding-bottom: 75px;
background: #121413;
z-index: 11;
}
.newgraduate-localnav.is-fixed {
position: fixed;
top: 0;
left: 0;
}
.newgraduate-localnav .nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1280px;
padding: 20px;
margin: 0 auto;
color: #fff;
}
.newgraduate-localnav .nav-head {
display: none;
}
.newgraduate-localnav .nav-link {
flex-shrink: 0;
margin-left: 10px;
}
.newgraduate-localnav .nav-link > a {
position: relative;
display: block;
border-radius: 9px;
background-color: #cc0000;
padding: 10px 68px 15px 50px;
text-decoration: none;
color: #fff;
line-height: 1;
transition: .2s background-color ease-out;
}
.newgraduate-localnav .nav-link > a:hover {
background-color: #b1000e;
}
.newgraduate-localnav .nav-link > a::after {
content: "";
display: block;
position: absolute;
top: calc(50% - 8px);
right: 16px;
width: 16px;
height: 16px;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png") no-repeat;
background-size: contain;
}
.newgraduate-localnav .nav-link > a > span {
font-size: 1.5rem;
font-weight: bold;
}
.newgraduate-localnav .nav-menu {
display: none;
}
.newgraduate-localnav .nav-body {
display: flex;
flex-flow: row wrap;
color: #fff;
}
.newgraduate-localnav .nav-body .nav-title {
position: relative;
margin-right: 14px;
padding-right: 14px;
}
.newgraduate-localnav .nav-body .nav-title::after {
content: "";
display: block;
position: absolute;
top: calc(50% - 10px);
right: -1px;
width: 2px;
height: 22px;
background: #fff;
}
.newgraduate-localnav .nav-body .nav-title a {
position: relative;
font-size: 2.2rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-title a::before {
content: "";
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
height: 2px;
background: #fff;
transition: .2s opacity ease-out;
opacity: 0;
}
.newgraduate-localnav .nav-body .nav-title a:hover::before {
opacity: 1;
}
.newgraduate-localnav .nav-body .nav-list {
display: flex;
flex-flow: row wrap;
}
.newgraduate-localnav .nav-body .nav-list > li + li {
margin-left: 24px;
}
.newgraduate-localnav .nav-body .nav-list > li > a {
position: relative;
font-size: 2.2rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-list > li > a::before {
content: "";
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
height: 2px;
background: #fff;
transition: .2s opacity ease-out;
opacity: 0;
}
.newgraduate-localnav .nav-body .nav-list > li > a:hover::before {
opacity: 1;
}
.newgraduate-localnav .nav-body .nav-list > li.is-current > a::before {
width: 100%;
height: 4px;
background: #cc0000;
opacity: 1;
}
.newgraduate-localnav .nav-body .nav-child {
position: absolute;
display: flex;
align-items: center;
bottom: -1px;
left: 0;
width: 100%;
height: 75px;
padding-bottom: 1px;
background: #f5f5f5;
color: #333;
}
.newgraduate-localnav .nav-body .nav-child .child-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.newgraduate-localnav .nav-body .nav-child .child-heading {
color: #333;
font-size: 3rem;
font-weight: bold;
}
.newgraduate-localnav .nav-body .nav-child .child-list {
display: flex;
align-items: baseline;
margin-left: 10px;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li + li {
margin-left: 40px;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li > a {
position: relative;
font-size: 2rem;
color: #333;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li > a::before {
content: "";
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 100%;
height: 3px;
background: #1a1a1a;
transition: .2s opacity ease-out;
opacity: 0;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li > a:hover::before {
opacity: 1;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li.is-current > a {
font-weight: bold;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li.is-current > a::before {
left: -5px;
width: calc(100% + 10px);
height: 4px;
background: #cc0000;
opacity: 1;
}
.newgraduate-localnav .nav-body .nav-close {
display: none;
}
.newgraduate-localnav .nav-body .nav-close > a > span {
position: relative;
font-size: 1.2rem;
}
.newgraduate-localnav .nav-overlay {
display: none;
}
.newgraduate-inner {
max-width: calc(1240px + (15px * 2));
padding: 17px 15px 0;
}
.newgraduate-section,
.newgraduate-section-v2 {
margin-top: 50px;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
}
.newgraduate-section-v2 {
background-color: #F5F5F7;
}
.newgraduate-section > .section-inner,
.newgraduate-section-v2 > .section-inner {
width: 100%;
max-width: calc(1240px + (15px * 2));
margin: 0 auto;
padding: 25px 15px 40px;
}
.newgraduate-top-hero {
position: relative;
width: 100%;
}
.newgraduate-top-hero .hero-image img {
width: 100vw
}
.newgraduate-top-hero .hero-heading1 {
position: absolute;
left: calc( 375 * 100vw / 1920);
bottom: calc( 85 * 100vw / 1920);
background-color: #cc0000;
}
.newgraduate-top-hero .hero-heading1-title {
font-size: calc( 40 * 100vw / 1920);
font-weight: bold;
line-height: 1.3;
color: #fff;
}
.newgraduate-top-hero .hero-heading1-inner {
padding: calc( 40 * 100vw / 1920) calc( 27 * 100vw / 1920) calc( 68 * 100vw / 1920) calc( 22 * 100vw / 1920);
}
.newgraduate-heading1 {
padding: 0 0 10px;
border-bottom: 1px solid #707070;
}
.newgraduate-heading1 .heading-title {
}
.newgraduate-heading1 .heading-title .heading-label {
font-size: 3.5rem;
}
.newgraduate-heading1 + * {
margin-top: 25px!important;
}
.newgraduate-heading1-v2 {
position: relative;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
background: #1E1E1E;
}
.newgraduate-heading1-v2::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 64%;
height: 100%;
background: linear-gradient(to right,  rgba(26,26,26,1) 0%,rgba(65,67,66,1) 89%,rgba(86,88,87,0) 100%);
z-index: 1;
}
.newgraduate-heading1-v2 .heading-title {
}
.newgraduate-heading1-v2 .heading-title .heading-label {
font-size: 3.5rem;
font-weight: bold;
color: #fff;
}
.newgraduate-heading1-v2 .heading-inner {
width: 1240px;
margin: 0 auto;
display: flex;
}
.newgraduate-heading1-v2 .heading-content {
display: flex;
align-items: center;
justify-content: flex-start;
width: 50%;
margin-right: 35px;
padding: 20px 0 20px 20px;
min-height: 180px;
z-index: 2;
}
.newgraduate-heading1-v2 .heading-visual {
position: absolute;
top: 0;
right: 0;
width: 50%;
text-align: right;
}
.newgraduate-heading1-v2 + * {
margin-top: 25px!important;
}
.newgraduate-top-heading2 {

}
.newgraduate-top-heading2 .heading-title {
position: relative;
padding-left: 33px;

}
.newgraduate-top-heading2 .heading-title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 78px;
background-color: #cc0000;
}
.newgraduate-top-heading2 .heading-label {
font-size: 3.6rem;
line-height: 1.4;
font-weight: bold;
}
.newgraduate-top-heading2 .heading-sub {
padding-left: 37px;
font-size: 2rem;
font-weight: bold;
color: #666;
}
.newgraduate-heading2 {
margin-top: 50px;
}
.newgraduate-heading2 + * {
margin-top: 25px!important;
}
.newgraduate-heading2 ~ * {
padding-left: 0!important;
}
.newgraduate-heading2 .heading-title {
padding: 0 0 3px 30px;
}
.newgraduate-heading2 .heading-title::before {
top: 0;
width: 16px;
height: 45px;
}
.newgraduate-heading2 .heading-title .heading-label {
font-size: 3rem;
}
.newgraduate-heading2-v2 {
margin-top: 50px;
}
.newgraduate-heading2-v2 + * {
margin-top: 25px!important;
}
.newgraduate-heading2-v2 ~ * {
padding-left: 0!important;
}
.newgraduate-heading2-v2 .heading-title {
padding: 0 0 3px 60px;
}
.newgraduate-heading2-v2 .heading-title::before {
width: 49px;
height: 45px;
}
.newgraduate-heading2-v2 .heading-title .heading-label {
font-size: 3rem;
}
.newgraduate-heading3 {
margin-top: 35px;
}
.newgraduate-heading3 + * {
margin-top: 22px!important;
}
.newgraduate-heading3 ~ * {
padding-left: 10px!important;
padding-right: 10px!important;
}
.newgraduate-heading3 .heading-title {
padding: 3px 0 3px 30px;
}
.newgraduate-heading3 .heading-title::before {
width: 16px;
height: 42px;
}
.newgraduate-heading3 .heading-title .heading-label {
font-size: 2.3rem;
}
.newgraduate-heading3-v2 {
margin-top: 20px;
margin-left: -15px;
}
.newgraduate-heading3-v2 + * {
margin-top: 25px!important;
}
.newgraduate-heading3-v2 ~ * {
padding-left: 0!important;
}
.newgraduate-heading3-v2 .heading-title {
padding: 0 0 3px 40px;
}
.newgraduate-heading3-v2 .heading-title::before {
left: 10px;
width: 30px;
height: 32px;
}
.newgraduate-heading3-v2 .heading-title .heading-label {
font-size: 2.3rem;
}
.newgraduate-heading3-v3 {
margin-top: 60px;
}
.newgraduate-heading3-v3 + * {
margin-top: 22px!important;
}
.newgraduate-heading3-v3 ~ * {
padding-left: 10px!important;
padding-right: 10px!important;
}
.newgraduate-heading3-v3 .heading-title {
padding: 3px 0 3px 10px;
}
.newgraduate-heading3-v3 .heading-title .heading-label {
font-size: 2.3rem;
}
.newgraduate-heading3-v3 .heading-title::before {
position: absolute;
top: -50px;
left: 0;
padding: 0 40px;
}
.newgraduate-heading3-v3[data-graduate-course*="liberal-arts"] .heading-title::before {
background: #00428E;
content:"文系";
font-size: 2.3rem;
font-weight: bold;
line-height: 1.6;
color: #fff;
text-align: center;
}
.newgraduate-heading3-v3[data-graduate-course*="science"] .heading-title::before {
background: #00428E;
content:"理系";
font-size: 2.3rem;
font-weight: bold;
line-height: 1.6;
color: #fff;
text-align: center;
}
.newgraduate-lead {
font-size: 2.3rem;
font-weight: bold;
}
.newgraduate-text,
.newgraduate-text-bold {
margin-top: 2em;
font-size: 2rem;
}
.newgraduate-inner > .newgraduate-text-bold {
margin-top: 100px;
font-size: 3rem;
}
.newgraduate-anchor {
}
.newgraduate-anchor + * {
margin-top: 55px!important;
}
.newgraduate-anchor .anchor-list {
margin-right: -18px;
margin-bottom: -18px;
}
.newgraduate-anchor .anchor-list > li {
margin-right: 18px;
margin-bottom: 18px;
}
.newgraduate-anchor .anchor-link:hover {
text-decoration: underline;
background-color: rgba(245, 245, 247, 1);
}
.newgraduate-job-category-nav {
margin: 58px auto 0;
max-width: 60%;
}
.newgraduate-job-category-nav .job-category-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 700px;
margin: 0 -25px -30px 0;
}
.newgraduate-job-category-nav .job-category-nav-list li {
margin: 0 25px 30px 0;
}
.newgraduate-job-category-nav .job-category-nav-list-type {
display: block;
padding: 2px 15px 3px;
border: 1px solid #676262;
border-radius: 20px;
line-height: 1.4;
text-align: center;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-job-category-nav .job-category-nav-list-type.is-active,
.newgraduate-job-category-nav .job-category-nav-list-type:hover {
color: #fff;
background-color: #676363;
}
.newgraduate-top-media {
display: flex;
margin-top: 100px;
}
.newgraduate-top-media-mt0.newgraduate-top-media {
margin-top: 0;
}
.newgraduate-top-media .media-image {
position: relative;
}
.newgraduate-top-media .media-image > img {
width: 50vw;
}
.newgraduate-top-media .media-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.newgraduate-top-media .media-body {
max-width: 616px
}
.newgraduate-top-media .media-body .newgraduate-text{
margin-top: 35px;
}
.newgraduate-top-media[data-image="left"] {
margin-left: calc(50% - 50vw);
}
.newgraduate-top-media[data-image="left"] .media-image > img {
max-width: 862px;
}
.newgraduate-top-media[data-image="left"] .media-body {
margin-left: 108px;
}
.newgraduate-top-media[data-image="left"] .media-image::before {
background-image: linear-gradient(90deg, transparent 0, transparent 60%, #fff 95%, #fff 100%);
}
.newgraduate-top-media[data-image="right"] {
flex-flow: row-reverse;
margin-right: calc(50% - 50vw);
}
.newgraduate-top-media[data-image="right"] .media-image > img {
max-width: 814px;
}
.newgraduate-top-media[data-image="right"] .media-body {
margin-right: calc(150 * 100vw /1920 );
}
.newgraduate-top-media[data-image="right"] .media-image::before {
background-image: linear-gradient(-90deg, transparent 0, transparent 60%, #fff 95%, #fff 100%);
}
.newgraduate-media {
display: flex;
padding-right: 10px;
padding-left: 10px;
}
.newgraduate-media[data-media-pc="image-right"] > .media-image {
order: 2;
}
.newgraduate-media[data-media-pc="image-right"] > .media-detail {
order: 1;
margin-right: 20px;
}
.newgraduate-media[data-media-pc="image-left"] > .media-image {
order: 1;
}
.newgraduate-media[data-media-pc="image-left"] > .media-detail {
order: 2;
margin-left: 20px;
}
.newgraduate-media[data-image-size-pc="2col"] > .media-image {
width: calc((100% - (20px * 1)) / 2);
}
.newgraduate-media[data-image-size-pc="3col"] > .media-image {
width: calc((100% - (25px * 2)) / 3);
}
.newgraduate-media[data-image-size-pc="500"] > .media-image {
width: calc(100% * (500/1240));
}
.newgraduate-media[data-image-size-pc="430"] > .media-image {
width: calc(100% * (430/1240));
}
.newgraduate-schedule {
margin-top: 40px;
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
}
.newgraduate-schedule .schedule-inner {
max-width: calc(1240px + (15px * 2));
padding: 60px 15px 65px;
}
.schedule-box {
margin: 0 30px;
padding: 18px 25px 50px 25px;
border: 1px solid #707070;
box-shadow: 0px 6px 6px rgba(0, 0, 0, .45);
}
.schedule-box .box-head {
}
.schedule-box .box-title {
padding: 0 0 3px 30px;
font-size: 3rem;
}
.schedule-box .box-title::before {
top: 0;
width: 16px;
height: 45px;
}
.schedule-box .box-head + .box-body {
padding-top: 30px;
}
.schedule-list > li {
margin-top: 20px;
font-size: 2rem;
}
.schedule-list > li::before,
.schedule-list > li::after {
display: block;
position: absolute;
left: 13px;
width: 2px;
background-color: #393737;
content: "";
}
.schedule-list > li::before {
top: 36px;
height: calc(100% - 40px + 20px);
}
.schedule-list > li::after {
bottom: -15px;
height: 12px;
transform: rotate(-30deg);
transform-origin: bottom;
}
.schedule-list > li:last-child::before,
.schedule-list > li:last-child::after {
display: none;
}
.schedule-description-list > dt {
width: 110px;
padding-left: 30px;
}
.schedule-description-list > dt::before {
top: 2px;
left: 0;
width: 26px;
height: 26px;
}
.schedule-description-list > dd {
margin-left: 20px;
}
.newgraduate-voice {
margin-top: 110px;
margin-bottom: 140px;
}
.newgraduate-top .newgraduate-voice {
padding: 0 10px;
}
.newgraduate-voice .voice-heading {
}
.newgraduate-voice .voice-heading + * {
margin-top: 30px!important;
}
.newgraduate-voice .voice-heading .heading-title {
text-align: center;
}
.newgraduate-voice .voice-heading .heading-label {
font-size: 3.6rem;
}
.newgraduate-voice .voice-heading .heading_sub {
font-size: 2rem;
}
.newgraduate-voice .voice-column {
display: flex;
justify-content: center;
flex-flow: row wrap;
padding: 0 10px;
}
.newgraduate-voice .voice-item {
width: calc((100% - (25px * 2)) / 3 - 0.1px);
margin-left: 25px;
}
.newgraduate-voice .voice-item:nth-of-type(3n + 1) {
margin-left: 0;
}
.newgraduate-voice .voice-item:nth-of-type(n + 4):nth-of-type(3n + 1):last-child {
margin-right: calc(((100% - (25px * 2)) / 3) * 2 + 25px * 2);
}
.newgraduate-voice .voice-item:nth-of-type(n + 4):nth-of-type(3n + 2):last-child {
margin-right: calc(((100% - (25px * 2)) / 3) * 1 + 25px * 1);
}
.newgraduate-top .newgraduate-voice-container {
padding-bottom: 70px;
margin-bottom: 30px;
}
.newgraduate-top .newgraduate-voice .swiper {
overflow: hidden;
}
.newgraduate-top .newgraduate-voice .swiper .voice-item {
margin-left: 25px;
}
.newgraduate-top .newgraduate-voice .swiper .voice-item:first-child {
margin-left: 0;
}
.newgraduate-top .newgraduate-voice .newgraduate-voice-container.is-active .swiper .voice-item {
margin-left: 0;;
}
.newgraduate-top .newgraduate-voice .swiper .voice-item:nth-last-child(-n+3) {
opacity: 1;
transform: translateY(0);
}
.newgraduate-top .newgraduate-voice .voice-item:nth-of-type(n + 4):nth-of-type(3n + 1):last-child {
margin-right: 0;
}
.newgraduate-top .newgraduate-voice .voice-item:nth-of-type(n + 4):nth-of-type(3n + 2):last-child {
margin-right: 0;
}
.newgraduate-voice .voice-item .item-link {
position: relative;
display: block;
}
.newgraduate-voice .voice-item .item-link::after {
display: block;
position: absolute;
z-index: 2;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(112, 112, 112, .7);
pointer-events: none;
content: "";
transition: .2s opacity ease-out;
}
.newgraduate-voice .voice-item .item-link:hover::after {
opacity: 1;
}
.newgraduate-voice .voice-item .item-media {
position: relative;
}
.newgraduate-voice .voice-item .item-figure {
text-align: center;
overflow: hidden;
}
.newgraduate-voice .voice-item .item-figure > img {
max-width: 100%;
transition: .2s transform ease-out;
}
.newgraduate-voice .voice-item .item-link:hover .item-figure > img {
transform: scale(1.1);
}
.newgraduate-voice .voice-item .item-detail {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
min-height: 52%;
padding: 55px 20px 20px;
}
.newgraduate-voice .voice-item .item-detail::before {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7), rgba(0,0,0,.7), rgba(0,0,0,.7));
opacity: 1;
content: "";
transition: .2s opacity ease-out;
}
.newgraduate-voice .voice-item .item-link:hover .item-detail::before {
opacity: 0;
}
.newgraduate-voice .voice-item .item-lead {
font-size: 1.9rem;
font-weight: bold;
color: #fff;
}
.newgraduate-voice .voice-item .item-badge-wrap {
margin-top: 20px;
}
.newgraduate-voice .voice-item .item-badge + .item-badge {
margin-top: 15px;
}
.newgraduate-voice .voice-item .item-badge .badge-label {
display: inline-block;
padding: 5px 20px;
background-color: #fff;
font-size: 1.8rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(1) {
animation-delay: 0.5s;
}
.newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(2) {
animation-delay: 1s;
}
.newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(3) {
animation-delay: 1.5s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(1) {
animation-delay: 0s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(2) {
animation-delay: 0s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(3) {
animation-delay: 0s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(4) {
animation-delay: 0.5s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(5) {
animation-delay: 1s;
}
.newgraduate-top .newgraduate-voice .voice-item[data-fadein="ture"]:nth-of-type(6) {
animation-delay: 1.5s;
}
.newgraduate-news {
margin-top: 100px;
}
.newgraduate-news .news-heading {

}
.newgraduate-news .news-heading .heading-title {
text-align: center;
}
.newgraduate-news .heading-label {
font-size: 3.6rem;
font-weight: bold;
line-height: 1.4;
}
.newgraduate-news .news-article {
display: flex;
}
.newgraduate-news .news-contents {
width: 100%;
margin: 37px auto 0;
}
.newgraduate-news .news-article .news-property {
flex-shrink: 0;
width: 155px;
}
.newgraduate-news .news-article .news-date {
font-size: 1.8rem;
}
.newgraduate-news .news-article .news-title {
font-size: 2rem;
}
.newgraduate-news .news-article + .news-article {
margin-top: 10px;
}

.newgraduate-news .news-article .news-type {
color: #333;
}
.newgraduate-box-column[data-centering="true"] {
justify-content: center;
}
.newgraduate-box-column[data-col-pc="1"] > * {
width: 100%;
}
.newgraduate-box-column[data-col-pc="2"] > * {
width: 600px;
margin-left: 20px;
}
.newgraduate-box-column[data-col-pc="3"] > * {
width: calc((100% - (25px * 2)) / 3);
margin-left: 25px;
}
.newgraduate-box-column[data-col-pc="2"] > *:nth-of-type(2n + 1) {
margin-left: 0;
}
.newgraduate-box-column[data-col-pc="2"] > *:nth-of-type(n + 3) {
margin-top: 20px;
}
.newgraduate-box-column[data-col-pc="3"] > *:nth-of-type(3n + 1) {
margin-left: 0;
}
.newgraduate-box-column[data-col-pc="3"] > *:nth-of-type(n + 4) {
margin-top: 25px;
}
.newgraduate-box-column {
display: flex;
justify-content: center;
margin-top: 100px;
}
.newgraduate-box {
border: 1px solid #212121;
}
.newgraduate-box .box-head {
padding: 18px 20px 0;
}
.newgraduate-box .box-title {
text-align: center;
font-size: 3.6rem;
font-weight: bold;
}
.newgraduate-box .box-body {
padding: 0 20px 43px;
}
.newgraduate-job-box-layout {
margin-top: 66px;
width: 100%;
}
.newgraduate-job-box-layout .job-box-layout-column {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.newgraduate-job-box-layout .job-box-card {
width: calc((100% - 40px) /2);
background-color: #fff;
}
.newgraduate-job-box-layout .job-box-card {
margin-bottom: 58px;
}
.newgraduate-job-box-layout .job-box-card-type {
display: block;
height: 100%;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.newgraduate-job-box-layout .job-box-card-image-area {
position: relative;
}
.newgraduate-job-box-layout .job-box-card-image {
transition: opacity .25s cubic-bezier(.4,0,.2,1) 0s;
}
.newgraduate-job-box-layout .job-box-card-image img {
width: 100%;
}
.newgraduate-job-box-layout .job-box-card-image::after {
position: absolute;
right: 0;
top: 0;
padding: 0 25px;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .job-box-card-image::after {
background: #9500CC;
content:"営業職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .job-box-card-image::after {
background: #01B248;
content:"技術職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .job-box-card-image::after {
background: #CC4D08;
content:"事務系";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="planning"] .job-box-card-image::after {
background: #007ACD;
content:"企画職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="staff"] .job-box-card-image::after {
background: #CC0001;
content:"本社管理スタッフ";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-heading {
margin-left: -1px;
margin-right: -1px;
padding: 10px 20px;
text-align: center;
background: #F5F5F5;
}
.newgraduate-job-box-layout .job-box-heading .heading-label {
font-size: 3.0rem;
font-weight: bold;
}
.newgraduate-job-box-layout .job-box-card-body {
padding: 30px 18px 20px;
}
.newgraduate-job-box-layout .job-box-card-detail-title {
position: relative;
padding-left: 30px;
border-bottom: 1px solid #707070;
}
.newgraduate-job-box-layout .job-box-card-detail-title::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 100%;
background-color: #707070;
content: "";
}
.newgraduate-job-box-layout .job-box-card-detail-title .heading-label {
font-size: 2.3rem;
font-weight: bold;
}
.newgraduate-job-box-layout .job-box-card-detail-text {
margin: 20px 0;
}
.newgraduate-job-box-layout .job-box-card-detail-list {
margin-top: 20px;
}
.newgraduate-job-box-layout .job-box-card-detail-list li {
position: relative;
list-style: none;
margin: 1em 0 0;
padding-left: 1.125em;
}
.newgraduate-job-box-layout .job-box-card-detail-list li:before {
display: inline-block;
position: absolute;
top: .8em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #090909;
content: "";
}
.newgraduate-box-v2 {
width: 85%;
margin: 60px auto 0;
padding: 42px 60px 32px;
border: 5px solid #CC0000;
border-radius: 40px;
box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.5);
}
.newgraduate-box-v2 .box-title {
font-size: 3.0rem;
font-weight: bold;
}
.newgraduate-box-v3 {
border: 1px solid #212121;
background-color: #fff;
}
.newgraduate-box-v3 .box-head {
padding: 18px 20px 0;
}
.newgraduate-box-v3 .box-title {
position: relative;
padding-left: 30px;
border-bottom: 1px solid #707070;
font-size: 2.3rem;
font-weight: bold;
}
.newgraduate-box-v3 .box-title::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 100%;
background-color: #707070;
content: "";
}
.newgraduate-box-v3 .box-body {
padding: 10px 20px 30px;
}
.newgraduate-button-column[data-centering="true"] {
justify-content: center;
}
.newgraduate-button-column[data-col-pc="1"] > * {
width: 100%;
}
.newgraduate-button-column[data-col-pc="2"] > * {
width: calc((600px - (20px * 1)) / 2);
margin-left: 20px;
}
.newgraduate-button-column[data-col-pc="3"] > * {
width: calc((100% - (25px * 2)) / 3);
margin-left: 25px;
}
.newgraduate-button-column[data-col-pc="2"] > *:nth-of-type(2n + 1) {
margin-left: 0;
}
.newgraduate-button-column[data-col-pc="2"] > *:nth-of-type(n + 3) {
margin-top: 20px;
}
.newgraduate-button-column[data-col-pc="3"] > *:nth-of-type(3n + 1) {
margin-left: 0;
}
.newgraduate-button-column[data-col-pc="3"] > *:nth-of-type(n + 4) {
margin-top: 25px;
}
.newgraduate-button {
display: flex;
}
.newgraduate-button .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 16px 30px 16px 5px;
background-color: #fff;
border: 5px solid #084791;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-button .button-link:hover {
background-color: #084791;
}
.newgraduate-button .button-link[data-button-color*="technical"] {
border-color: #AD0874;
}
.newgraduate-button .button-link[data-button-color*="technical"]:hover {
background-color: #AD0874;
}
.newgraduate-button .button-link::before,
.newgraduate-button .button-link::after {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transition: .2s opacity ease-out;
transform: translateY(-50%);
}
.newgraduate-button .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
opacity: 1;
}
.newgraduate-button .button-link:hover::before {
opacity: 0;
}
.newgraduate-button .button-link::after {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png");
opacity: 0;
}
.newgraduate-button .button-link:hover::after {
opacity: 1;
}
.newgraduate-button .button-label {
font-size: 2.3rem;
font-weight: bold;
color: #333;
transition: .2s color ease-out;
}
.newgraduate-button .button-link:hover .button-label {
color: #fff;
}
.newgraduate-button-v2 {
display: flex;
}
.newgraduate-button-v2 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 16px 35px 16px 10px;
background-color: #fff;
border: 5px solid #ac0070;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-button-v2 .button-link:hover {
background-color: #ac0070;
}
.newgraduate-button-v2 .button-link::before,
.newgraduate-button-v2 .button-link::after {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transition: .2s opacity ease-out;
transform: translateY(-50%);
}
.newgraduate-button-v2 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
opacity: 1;
}
.newgraduate-button-v2 .button-link:hover::before {
opacity: 0;
}
.newgraduate-button-v2 .button-link::after {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png");
opacity: 0;
}
.newgraduate-button-v2 .button-link:hover::after {
opacity: 1;
}
.newgraduate-button-v2 .button-label {
font-size: 2.3rem;
font-weight: bold;
color: #333;
transition: .2s color ease-out;
}
.newgraduate-button-v2 .button-link:hover .button-label {
color: #fff;
}
.newgraduate-button-v3 {
display: flex;
}
.newgraduate-button-v3 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 20px 35px 20px 10px;
background-color: #fff;
border: 10px solid #cc0000;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-button-v3 .button-link:hover {
background-color: #b1000e;
border: 10px solid #b1000e;
}
.newgraduate-button-v3 .button-link::before,
.newgraduate-button-v3 .button-link::after {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transition: .2s opacity ease-out;
transform: translateY(-50%);
}
.newgraduate-button-v3 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
opacity: 1;
}
.newgraduate-button-v3 .button-link:hover::before {
opacity: 0;
}
.newgraduate-button-v3 .button-link::after {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png");
opacity: 0;
}
.newgraduate-button-v3 .button-link:hover::after {
opacity: 1;
}
.newgraduate-button-v3 .button-label {
font-size: 2rem;
font-weight: bold;
color: #333;
transition: .2s color ease-out;
}
.newgraduate-button-v3 .button-link:hover .button-label {
color: #fff;
}
.newgraduate-button-v4[data-centering-pc="true"] {
justify-content: center;
}
.newgraduate-button-v4 {
display: flex;
margin-top: 40px;
min-width: 255px;
}
.newgraduate-button-v4 .button-link {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 11px 45px 15px 25px;
min-width: 255px;
background-color: #d63333;
border-radius: 30px;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-button-v4 .button-link:hover {
background-color: #c0333e;
}
.newgraduate-button-v4 .button-label {
font-size: 2rem;
font-weight: bold;
color: #fff;
}
.newgraduate-button-v4 .button-label::before {
content: '';
position: absolute;
top: 50%;
right: 23px;
margin-top: -7px;
width: 16px;
height: 16px;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png") no-repeat center / contain;
}
.newgraduate-button-v5 {
display: flex;
max-width: 460px;
margin: 30px auto 0;
}
.newgraduate-button-v5 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 16px 30px;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link {
background: #04428C;
border: 4px solid #04428C;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link {
background: #AD0874;
border: 4px solid #AD0874;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link {
background: #CC4D08;
border: 4px solid #CC4D08;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link:hover,
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link:hover,
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link:hover {
background: #fff;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #04428C;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #AD0874;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #CC4D08;
}
.newgraduate-button-v5 .button-link::before,
.newgraduate-button-v5 .button-link::after {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transition: .2s opacity ease-out;
transform: translateY(-50%);
}
.newgraduate-button-v5 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png");
opacity: 1;
}
.newgraduate-button-v5 .button-link:hover::before {
opacity: 0;
}
.newgraduate-button-v5 .button-link::after {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
opacity: 0;
}
.newgraduate-button-v5 .button-link:hover::after {
opacity: 1;
}
.newgraduate-button-v5 .button-label {
font-size: 2.0rem;
font-weight: bold;
color: #fff;
transition: .2s color ease-out;
}
.newgraduate-button-v5 .button-link:hover .button-label {
color: #333;
}
.newgraduate-foot {
}
.newgraduate-foot .foot-guide {
width: 100%;
max-width: calc(1240px + (15px * 2));
margin: 0 auto;
padding: 130px 15px 70px;
}
.newgraduate-foot .foot-guide-column > * {
width: calc((100% - (25px * 2)) / 3);
margin-left: 25px;
}
.newgraduate-foot .guide-item .item-figure > img {
display: inline-block;
width: 134px;
margin: 0 auto;
transition: .2s opacity ease-out;
}
.newgraduate-foot .guide-item .item-figure > img.item-iamge-on {
position: absolute;
z-index: -1;
opacity: 1;
top: 0;
left: calc(50% - (134px / 2));
}
.newgraduate-foot .guide-item .item-link:hover .item-figure> img.item-iamge {
opacity: 0;
}
.newgraduate-foot .guide-item .item-link:hover .item-figure> img.item-iamge-on {
opacity: 1;
}
.newgraduate-foot .guide-item .item-label {
margin-top: 25px;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
line-height: 1.5;
color: #333;
}
.newgraduate-foot .foot-detail {
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
}
.newgraduate-foot .foot-detail .detail-inner {
width: 100%;
max-width: calc(1240px + (15px * 2));
margin: 0 auto;
padding: 50px 15px 60px;
}
.newgraduate-foot .foot-detail .detail-lead {
font-size: 2rem;
font-weight: bold;
text-align: center;
color: #fff;
line-height: 1.5;
}
.newgraduate-foot .foot-detail .detail-note {
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #fff;
line-height: 1.5;
}
.newgraduate-foot .foot-button-wrap > * {
width: calc((100% - (25px * 2)) / 3);
margin-left: 25px;
flex-flow: row wrap;
}
.newgraduate-foot .foot-button-wrap > *:nth-of-type(3n + 1) {
margin-left: 0;
}
.newgraduate-foot .foot-button-wrap > *:nth-of-type(n + 4) {
margin-top: 25px;
}
.newgraduate-requirements-list-wrap {
margin: 2em 0 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.newgraduate-requirements-list-wrap >:first-child {
margin-top: 0;
}
.newgraduate-requirements-list-wrap .requirements-description-list {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 100%;
padding: 2em 0;
}
.newgraduate-requirements-list-wrap .requirements-description-list:nth-of-type(even) {
background-color: #f5f5f7;
}
.newgraduate-requirements-list-wrap .requirements-description-list dt {
flex-shrink: 0;
width: 20%;
margin-right: 2.5em;
padding-left: 30px;
font-size: 2.3rem;
font-weight: bold;
line-height: 1.4;
}
.newgraduate-requirements-list-wrap .requirements-description-list dd,
.newgraduate-requirements-list-wrap .requirements-description-list .description-text {
width: 100%;
font-size: 1.8rem;
line-height: 1.5;
}
.newgraduate-requirements-list-wrap .requirements-description-list .description-text + .description-text {
margin-top: 1.5em;
}
.newgraduate-requirements-list-wrap .requirements-description-list .description-type {
color: #333;
}
.newgraduate-training-list-wrap .training-description-list {
font-size: 2rem;
}
.newgraduate-training-list-wrap .unorder-list li {
position: relative;
list-style: none;
padding-left: .7em;
}
.newgraduate-training-list-wrap .unorder-list li::before {
display: inline-block;
position: absolute;
top: .8em;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #090909;
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev,
.newgraduate-top .newgraduate-voice-container .swiper-button-next {
display: none;
top: calc(50% - 35px);
width: 45px;
height: 61px;
border: 2px solid #707070;
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::before,
.newgraduate-top .newgraduate-voice-container .swiper-button-next::before {
content: "";
display: block!important;
position: absolute;
top: 12px;
left: -4px;
width: 33px;
height: 33px;
border-top: solid 3px #707070;
border-right: solid 3px #707070;
transform: rotate(45deg);
opacity: 1;
color: #707070;
z-index: 999;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::after,
.newgraduate-top .newgraduate-voice-container .swiper-button-next::after {
display: none;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev:focus, .newgraduate-top .newgraduate-voice-container .swiper-button-next:focus,
.newgraduate-top .newgraduate-voice-container .swiper-button-prev:hover, .newgraduate-top .newgraduate-voice-container .swiper-button-next:hover {
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev:hover::before, .newgraduate-top .newgraduate-voice-container .swiper-button-next:hover::before {
opacity: .5;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev {
left: -25px;
z-index: 1;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::before {
content: "";
left: 12px;
transform: rotate(225deg);
}
.newgraduate-top .newgraduate-voice-container .swiper-button-next {
right: -25px;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-next::before {
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination {
bottom: 15px
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet {
position: relative;
width: 20px;
height: 20px;
margin: 0 5px;
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet:before {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border: 2px solid #707070;
border-radius: 50%;
opacity: 1;
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet:hover::before {
opacity: .5;
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet-active:before {
border: 2px solid #CC0000;
background-color: #CC0000;
color: #CC0000;
}
.newgraduate-top .newgraduate-voice-container.is-active .swiper-button-prev,
.newgraduate-top .newgraduate-voice-container.is-active .swiper-button-next {
display: block!important;
}
}

@media screen and (min-width: 768px) and (max-width: 1270px) {
.newgraduate-voice .voice-item .item-detail {
padding:  4.33vw 1.574vw 1.574vw;
}
.newgraduate-top .newgraduate-voice .voice-item .item-detail {
padding:  4.33vw 2vw 1.574vw;
}
.newgraduate-voice .voice-item .item-lead {

font-size: 1.5vw;
}
.newgraduate-voice .voice-item .item-badge .badge-label {
font-size: 1.4vw;
}
}

@media screen and (max-width: 767px) {
.newgraduate-sp-hidden {
display: none;
}
.newgraduate-breadcrumb {
display: none;
}
.newgraduate-localnav {
position: relative;
display: flex;
width: 100%;
z-index: 11;
}
.newgraduate-localnav.is-fixed {
position: fixed;
top: 0;
left: 0;
}
.newgraduate-localnav .nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 5px 5px 5px 10px;
background: #121413;
color: #fff;
}
.newgraduate-localnav .nav-head {
font-size: 1.4rem;
font-weight: bold;
}
.newgraduate-localnav .nav-link {
margin-left: 10px;
}
.newgraduate-localnav .nav-link > a {
position: relative;
display: block;
border-radius: 7px;
background-color: #cc0000;
padding: 3px 20px 5px 7px;
text-decoration: none;
color: #fff;
line-height: 1;
}
.newgraduate-localnav .nav-link > a::after {
content: "";
display: block;
position: absolute;
top: calc(50% - 4px);
right: 5px;
width: 8px;
height: 8px;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png") no-repeat;
background-size: contain;
}
.newgraduate-localnav .nav-link > a > span {
font-size: 1rem;
font-weight: bold;
}
.newgraduate-localnav .nav-menu {
flex-shrink: 0;
}
.newgraduate-localnav .nav-menu > a {
position: relative;
display: block;
width: 50px;
height: 50px;
padding: 25px 3px 3px;
background: #a6a6a6;
color: #fff;
text-decoration: none;
line-height: 0;
text-align: center;
}
.newgraduate-localnav .nav-menu > a > span {
font-size: 1rem;
line-height: 1;
}
.newgraduate-localnav .nav-menu > a::before,
.newgraduate-localnav .nav-menu > a::after,
.newgraduate-localnav .nav-menu > a > span::before {
content: "";
display: block;
position: absolute;
left: 50%;
width: 14px;
height: 2px;
background: #fff;
transform: translateX(-50%);
transform-origin: center;
transition: .2s top ease-out .2s, .2s transform ease-out, .2s width ease-out, .2s opacity ease-out;
}
.newgraduate-localnav .nav-menu > a::before {
top: 5px;
}
.newgraduate-localnav .nav-menu > a > span::before {
top: 11px;
}
.newgraduate-localnav .nav-menu > a::after {
top: 17px;
}
.newgraduate-localnav .nav-menu > a.is-active::before,
.newgraduate-localnav .nav-menu > a.is-active::after {
top: 12px;
width: 16px;
transition: .2s top ease-out, .2s transform ease-out .2s, .2s width ease-out, .2s opacity ease-out;
}
.newgraduate-localnav .nav-menu > a.is-active::before {
transform: translateX(-50%) rotate(45deg);
}
.newgraduate-localnav .nav-menu > a.is-active::after {
transform: translateX(-50%) rotate(-45deg);
}
.newgraduate-localnav .nav-menu > a.is-active > span::before {
opacity: 0;
}
.newgraduate-localnav .nav-body {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 15px 14px 30px;
border-top: 1px solid #fff;
background: #121413;
color: #fff;
overflow-y: auto;
z-index: 1;
}
.newgraduate-localnav .nav-body .nav-title a {
font-size: 1.4rem;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-list {
margin-top: 16px;
padding-left: 16px;
}
.newgraduate-localnav .nav-body .nav-list > li + li {
margin-top: 15px;
}
.newgraduate-localnav .nav-body .nav-list > li > a {
font-size: 1.4rem;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-list > li.is-current > a {
font-weight: bold;
}
.newgraduate-localnav .nav-body .nav-child {
margin-top: 8px;
padding-left: 20px;
}
.newgraduate-localnav .nav-body .nav-child .child-heading {
display: none;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li + li {
margin-top: 10px;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li > a {
font-size: 1.3rem;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-child .child-list > li.is-current > a {
font-weight: bold;
}
.newgraduate-localnav .nav-body .nav-close {
margin-top: 35px;
}
.newgraduate-localnav .nav-body .nav-close > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 9px;
border: 1px solid #707070;
border-radius: 10px;
background: #121413;
color: #fff;
text-decoration: none;
}
.newgraduate-localnav .nav-body .nav-close > a > span {
position: relative;
font-size: 1.2rem;
}
.newgraduate-localnav .nav-overlay {
content: "";
display: none;
position: absolute;
top: 100%;
right: 0;
width: 100vw;
height: 150vh;
background: rgba(0, 0, 0, .5);
transition: .2s opacity ease-out;
z-index: 0;
}
.newgraduate-inner {
padding: 20px 10px 0;
}
.newgraduate-section,
.newgraduate-section-v2 {
margin-top: 40px;
margin-left: -10px;
margin-right: -10px;
}
.newgraduate-section-v2 {
background-color: #f5f5f7;
}
.newgraduate-section > .section-inner,
.newgraduate-section-v2 > .section-inner {
width: 100%;
margin: 0 auto;
padding: 10px 10px 15px;
}
.newgraduate-top-hero {
width: 100%;
}
.newgraduate-top-hero .hero-image > img{
max-width: 100%;
}
.newgraduate-top-hero .hero-heading1 {
width: 100%;
background-color: #cc0000;
}
.newgraduate-top-hero .hero-heading1-inner {
padding: 7px 10px;
}
.newgraduate-top-hero .hero-heading1-title {
font-size: 1rem;
font-weight: bold;
line-height: 2;
color: #fff;
}

.newgraduate-heading1 {
}
.newgraduate-heading1 .heading-title {
}
.newgraduate-heading1 .heading-title .heading-label {
font-size: 2.5rem;
}
.newgraduate-heading1 + * {
margin-top: 15px!important;
}
.newgraduate-heading1-v2 {
padding: 20px 10px 0;
}
.newgraduate-heading1-v2 .heading-title .heading-label {
font-size: 2.5rem;
font-weight: bold;
color: #070707;
}
.newgraduate-heading1-v2 + * {
margin-top: 15px!important;
}

.newgraduate-top-heading2 {

}
.newgraduate-top-heading2 .heading-title {
position: relative;
margin-top: 12px;
padding-left: 25px;
}
.newgraduate-top-heading2 .heading-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 50px;
background-color: #cc0000;
}
.newgraduate-top-heading2 .heading-label {
font-size: 2rem;
font-weight: bold;
line-height: 1.3
}
.newgraduate-top-heading2 .heading-sub {
padding-left: 25px;
font-size: 1.5rem;
font-weight: bold;
color: #666;
}
.newgraduate-heading2 {
margin-top: 20px;
}
.newgraduate-heading2 + * {
margin-top: 13px!important;
}
.newgraduate-heading2 .heading-title {
padding: 0 0 0 20px;
}
.newgraduate-heading2 .heading-title::before {
top: 2px;
width: 12px;
height: 30px;
}
.newgraduate-heading2 .heading-title .heading-label {
font-size: 2.3rem;
}
.newgraduate-heading2-v2 {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 20px;
}
.newgraduate-heading2-v2 + * {
margin-top: 13px!important;
}
.newgraduate-heading2-v2 .heading-title {
padding: 0 0 0 50px;
}
.newgraduate-heading2-v2 .heading-title::before {
width: 38px;
height: 35px;
}
.newgraduate-heading2-v2 .heading-title .heading-label {
font-size: 2.3rem;
}
.newgraduate-heading3 {
margin-top: 15px;
}
.newgraduate-heading3 + * {
margin-top: 17px!important;
}
.newgraduate-heading3 .heading-title {
padding: 3px 0 3px 20px;
}
.newgraduate-heading3 .heading-title::before {
width: 10px;
height: 30px;
}
.newgraduate-heading3 .heading-title .heading-label {
font-size: 1.5rem;
}
.newgraduate-heading3-v2 {
margin-top: 20px;
}
.newgraduate-heading3-v2 + * {
margin-top: 13px!important;
}
.newgraduate-heading3-v2 .heading-title {
padding: 0 0 0 20px;
}
.newgraduate-heading3-v2 .heading-title::before {
left: 0;
width: 20px;
height: 22px;
}
.newgraduate-heading3-v2 .heading-title .heading-label {
font-size: 1.5rem;
}
.newgraduate-heading3-v3 {
margin-top: 50px;
}
.newgraduate-heading3-v3 + * {
margin-top: 13px!important;
}
.newgraduate-heading3-v3 .heading-title {
padding: 3px 0;
}
.newgraduate-heading3-v3 .heading-title .heading-label {
font-size: 1.5rem;
letter-spacing: -0.05em
}
.newgraduate-heading3-v3 .heading-title::before {
position: absolute;
top: -40px;
left: 0;
padding: 0 25px 2px;
}
.newgraduate-heading3-v3[data-graduate-course*="liberal-arts"] .heading-title::before {
background: #00428E;
content:"文系";
font-size: 1.6rem;
font-weight: bold;
color: #fff;
text-align: center;
}
.newgraduate-heading3-v3[data-graduate-course*="science"] .heading-title::before {
background: #00428E;
content:"理系";
font-size: 1.6rem;
font-weight: bold;
color: #fff;
text-align: center;
}
.newgraduate-heading3 {
margin-top: 15px;
}
.newgraduate-heading3 + * {
margin-top: 17px!important;
}
.newgraduate-heading3 .heading-title {
padding: 3px 0 3px 20px;
}
.newgraduate-heading3 .heading-title .heading-label {
font-size: 1.5rem;
}
.newgraduate-lead {
font-size: 1.5rem;
font-weight: bold;
}
.newgraduate-text,
.newgraduate-text-bold {
margin-top: 15px;
font-size: 1.3rem;
}
.newgraduate-inner > .newgraduate-text-bold {
margin-top: 0;
font-size: 1.5rem;
}
.newgraduate-anchor {
}
.newgraduate-anchor + * {
margin-top: 20px!important;
}
.newgraduate-anchor .anchor-list {
}
.newgraduate-anchor .anchor-list > *:first-child {
margin-top: 0;
}
.newgraduate-anchor .anchor-list > li {
width: 100%;
margin-top: 10px;
}
.newgraduate-job-category-nav {
margin-top: 26px;
}
.newgraduate-job-category-nav .job-category-nav-list {
display: flex;
flex-wrap: wrap;
max-width: 340px;
margin: 0 -3px -7px 0;
}
.newgraduate-job-category-nav .job-category-nav-list li {
margin: 0 3px 7px 0;
}
.newgraduate-job-category-nav .job-category-nav-list-type {
display: block;
padding: 2px 11px 3px;
border: 1px solid #676262;
border-radius: 20px;
line-height: 1.4;
text-align: center;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-job-category-nav .job-category-nav-list-type.is-active{
color: #fff;
background-color: #676363;
}
.newgraduate-top-media {
margin-top: 40px;
}
.newgraduate-top-media-mt0.newgraduate-top-media {
margin-top: 0;
}
.newgraduate-top-media .media-head {
margin-left: -10px;
width: 100vw;
}
.newgraduate-top-media .media-image > img {
max-width: 100%;
}
.newgraduate-top-media .media-body {
margin-top: 12px;
}
.newgraduate-media {
display: flex;
flex-flow: row wrap;
}
.newgraduate-media[data-media-sp="col"] > .media-image {
order: 1;
width: 100%;
}
.newgraduate-media[data-media-sp="col"] > .media-detail {
order: 2;
width: 100%;
margin-top: 15px;
}
.newgraduate-media[data-media-sp="col-reverse"] > .media-image {
order: 2;
width: 100%;
margin-top: 15px;
}
.newgraduate-media[data-media-sp="col-reverse"] > .media-detail {
order: 1;
width: 100%;
}
.newgraduate-media[data-image-size-sp="full"] > .media-image {
margin-left: -10px;
margin-right: -10px;
width: calc(100% + (10px * 2));
}
.newgraduate-media[data-image-size-sp="355"] > .media-image {
width: calc(100% + (10px * 2));
}
.newgraduate-schedule {
margin-top: 0;
margin-left: -10px;
margin-right: -10px;
}
.newgraduate-schedule .schedule-inner {
width: 100%;
margin: 0 auto;
padding: 20px 15px 40px;
}
.schedule-box {
margin: 0;
padding: 15px 15px 30px 15px;
box-shadow: 0px 4px 8px rgb(0, 0, 0, .45);
}
.schedule-box .box-head {
display: flex;
justify-content: center;
}
.schedule-box .box-title {
padding: 0 0 3px 20px;
font-size: 2.3rem;
}
.schedule-box .box-title::before {
top: 2px;
width: 12px;
height: 30px;
}
.schedule-box .box-head + .box-body {
padding-top: 20px;
}
.schedule-list > li {
margin-top: 15px;
font-size: 1.2rem;
}
.schedule-description-list > dt {
width: 70px;
padding-left: 15px;
text-align: center;
}
.schedule-description-list > dt::before {
top: 0;
left: -10px;
width: 20px;
height: 20px;
}
.schedule-description-list > dd {
margin-left: 10px;
}
.newgraduate-voice {
margin-top: 50px;
margin-bottom: 40px;
}
.newgraduate-voice .voice-heading {
}
.newgraduate-voice .voice-heading + * {
margin-top: 20px!important;
}
.newgraduate-voice .voice-heading .heading-title {
text-align: center;
}
.newgraduate-voice .voice-heading .heading-label {
font-size: 2rem;
}
.newgraduate-voice .voice-heading .heading_sub {
font-size: 1.5rem;
}
.newgraduate-voice .voice-column {
display: block;
}
.newgraduate-top .newgraduate-voice .voice-column {
padding-bottom: 65px;
}
.newgraduate-voice .voice-column > *:first-child {
margin-top: 0!important;
}
.newgraduate-voice .voice-item {
width: 100%;
margin-top: 25px;
}
.newgraduate-top .newgraduate-voice .newgraduate-voice-container {
padding-bottom: 65px;
margin-bottom: 30px;
}
.newgraduate-top .newgraduate-voice .newgraduate-voice-container > *:first-child {
margin-top: 0!important;
}
.newgraduate-top .newgraduate-voice .voice-item:last-child {
opacity: 1;
transform: translateY(0);
}
.newgraduate-voice .voice-item .item-link {
display: block;
padding: 20px 10px;
background-color: #707070;
text-decoration: none;
}
.newgraduate-voice .voice-item .item-media {
display: flex;
justify-content: flex-start;
}
.newgraduate-voice .voice-item .item-image {
width: 40%;
}
.newgraduate-voice .voice-item .item-figure {
text-align: center;
}
.newgraduate-voice .voice-item .item-figure > img {
max-width: 100%;
}
.newgraduate-voice .voice-item .item-detail {
flex: 1 1;
width: 100%;
margin-left: 10px;
}
.newgraduate-voice .voice-item .item-lead {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
}
.newgraduate-voice .voice-item .item-badge-wrap {
margin-top: 20px;
}
.newgraduate-voice .voice-item .item-badge {
display: inline-block;
padding: 5px 5px;
text-align: left;
background-color: #fff;
}
.newgraduate-voice .voice-item .item-badge + .item-badge {
margin-top: 10px;
}
.newgraduate-voice .voice-item .item-badge .badge-label {
font-size: 1.4rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-link {
padding: 0;
background-color: transparent;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-media {
display: block;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-image {
width: 100%;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-detail {
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 330px;
min-height: 46%;
margin-left: 0;
padding: 50px 20px 14px;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-detail::before {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7), rgba(0,0,0,.7), rgba(0,0,0,.7));
opacity: 1;
content: "";
transition: .2s opacity ease-out;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-image .item-figure img {
width: 330px;
margin: 0 auto;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-lead {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-badge-wrap {
margin-top: 5px;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-badge {
display: block;
padding: 0;
background-color: transparent;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-badge + .item-badge {
margin-top: 10px;
}
.newgraduate-top > .newgraduate-voice .voice-item .item-badge .badge-label {
display: inline-block;
padding: 5px 10px;
background-color: #fff;
font-size: 1.5rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
.newgraduate-news {
margin-top: 20px;
}
.newgraduate-news .heading-title {
text-align: center;
}
.newgraduate-news .heading-label {
font-size: 2rem;
font-weight: bold;
line-height: 1.4;
}
.newgraduate-news .news-contents {
margin-top: 7px;
}
.newgraduate-news .news-article {
display: flex;
align-items: flex-start;
}
.newgraduate-news .news-article + .news-article {
margin-top: 20px;
}
.newgraduate-news .news-property {
display: flex;
flex-shrink: 0;
width: 90px;
}
.newgraduate-news .news-title {
font-size: 1rem;
line-height: 1.8
}
.newgraduate-news .news-date {
font-size: 1rem;
}
.newgraduate-news .news-type {
color: #333;
}
.newgraduate-box-column {
margin-top: 34px;
}
.newgraduate-box-column section + section {
margin-top: 20px;
}
.newgraduate-box {
border: 1px solid #212121;
}
.newgraduate-box .box-head {
padding: 18px 10px 0;
}
.newgraduate-box .box-title {
text-align: center;
font-size: 2rem;
font-weight: bold;
line-height: 1.4;

}
.newgraduate-box .box-body {
padding: 0 10px 30px 10px;
}
.newgraduate-box-v2 {
margin-top: 30px;
padding: 14px 20px;
border: 5px solid #CC0000;
border-radius: 40px;
box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.5);
}
.newgraduate-box-v2 .box-title {
font-size: 1.7rem;
font-weight: bold;
}
.newgraduate-box-v3 {
border: 1px solid #212121;
background-color: #fff;
}
.newgraduate-box-v3 .box-head {
padding: 18px 10px 0;
}
.newgraduate-box-v3 .box-title {
position: relative;
padding-left: 20px;
border-bottom: 1px solid #707070;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.4;
}
.newgraduate-box-v3 .box-title::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background-color: #707070;
content: "";
}
.newgraduate-box-v3 .box-body {
padding: 0 10px 30px 10px;
}
.newgraduate-job-box-layout {
width: 100vw;
margin: 38px -10px;
}
.newgraduate-job-box-layout .job-box-card {
background-color: #fff;
}
.newgraduate-job-box-layout .job-box-card {
margin-bottom: 28px;
}
.newgraduate-job-box-layout .job-box-card-type {
display: block;
}
.newgraduate-job-box-layout .job-box-card-image-area {
position: relative;
}
.newgraduate-job-box-layout .job-box-card-image {
transition: opacity .25s cubic-bezier(.4,0,.2,1) 0s;
}
.newgraduate-job-box-layout .job-box-card-image img {
width: 100%;
}
.newgraduate-job-box-layout .job-box-card-image::after {
position: absolute;
right: 0;
top: 0;
min-width: 135px;
padding: 0 15px;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .job-box-card-image::after {
background: #9500CC;
content:"営業職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .job-box-card-image::after {
background: #01B248;
content:"技術職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .job-box-card-image::after {
background: #CC4D08;
content:"事務系";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="planning"] .job-box-card-image::after {
background: #007ACD;
content:"企画職";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="staff"] .job-box-card-image::after {
background: #CC0001;
content:"本社管理スタッフ";
font-size: 2.0rem;
color: #fff;
text-align: center;
}
.newgraduate-job-box-layout .job-box-heading {
padding: 10px 20px;
text-align: center;
background: #F5F5F5;
}
.newgraduate-job-box-layout .job-box-heading .heading-label {
font-size: 2.0rem;
font-weight: bold;
}
.newgraduate-job-box-layout .job-box-card-body {
padding: 15px 8px 14px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.newgraduate-job-box-layout .job-box-card-detail-title {
position: relative;
padding-left: 20px;
border-bottom: 1px solid #707070;
}
.newgraduate-job-box-layout .job-box-card-detail-title::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background-color: #707070;
content: "";
}
.newgraduate-job-box-layout .job-box-card-detail-title .heading-label {
font-size: 1.5rem;
font-weight: bold;
}
.newgraduate-job-box-layout .job-box-card-detail-text {
margin: 10px 0;
padding: 0 8px;
}
.newgraduate-job-box-layout .job-box-card-detail-list {
margin-top: 10px;
padding: 0 8px;
}
.newgraduate-job-box-layout .job-box-card-detail-list li {
position: relative;
list-style: none;
margin: 0.6em 0 0;
padding-left: 1.14em;
}
.newgraduate-job-box-layout .job-box-card-detail-list li:before {
display: inline-block;
position: absolute;
top: .6em;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #090909;
content: "";
}
.newgraduate-button-column > *:first-child {
margin-top: 0!important;
}
.newgraduate-button-column[data-centering="true"] {
justify-content: center;
}
.newgraduate-button-column[data-col-sp="1"] > * {
width: 100%;
margin-top: 10px;
}
.newgraduate-button-column[data-col-sp="2"] > * {
width: calc((100% - (20px * 1)) / 2);
margin-top: 10px;
}
.newgraduate-button-column[data-col-sp="3"] > * {
width: calc((100% - (25px * 2)) / 3);
margin-top: 10px;
}
.newgraduate-button-column[data-col-sp="2"] > *:nth-of-type(2n + 1) {
margin-left: 0;
}

.newgraduate-button-column[data-col-sp="2"] > *:nth-of-type(n + 3) {
margin-top: 20px;
}
.newgraduate-button-column[data-col-sp="3"] > *:nth-of-type(3n + 1) {
margin-left: 0;
}
.newgraduate-button-column[data-col-sp="3"] > *:nth-of-type(n + 4) {
margin-top: 25px;
}
.newgraduate-button {
display: flex;
}
.newgraduate-button .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 15px 34px 15px 10px;
background-color: #fff;
border: 5px solid #084791;
text-decoration: none;
}
.newgraduate-button .button-link[data-button-color*="technical"] {
border-color: #AD0874;
}
.newgraduate-button .button-link::before {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 14px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transform: translateY(-50%);
}
.newgraduate-button .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
}
.newgraduate-button .button-label {
font-size: 1.8rem;
font-weight: bold;
color: #333;
}
.newgraduate-button-v2 {
display: flex;
}
.newgraduate-button-v2 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 16px 35px 16px 10px;
background-color: #fff;
border: 5px solid #d63333;
text-decoration: none;
}
.newgraduate-button-v2 .button-link::before {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transform: translateY(-50%);
}
.newgraduate-button-v2 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
}
.newgraduate-button-v2 .button-label {
font-size: 1.8rem;
font-weight: bold;
color: #333;
}
.newgraduate-button-v3 {
display: flex;
}
.newgraduate-button-v3 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 16px 35px 16px 10px;
background-color: #fff;
border: 10px solid #cc0000;
text-decoration: none;
}
.newgraduate-button-v3 .button-link::before {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transform: translateY(-50%);
}
.newgraduate-button-v3 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
}
.newgraduate-button-v3 .button-label {
font-size: 1.8rem;
font-weight: bold;
color: #333;
}
.newgraduate-button-v4 {
display: flex;
margin-top: 25px;
min-width: 255px;
justify-content: center;
}
.newgraduate-button-v4 .button-link {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 15px 45px 17px 20px;
min-width: 255px;
background-color: #d63333;
border-radius: 30px;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-button-v4 .button-link:hover {
background-color: #c0333e;
}
.newgraduate-button-v4 .button-label {
font-size: 2rem;
font-weight: bold;
color: #fff;
}
.newgraduate-button-v4 .button-label::before {
content: '';
position: absolute;
top: 50%;
right: 23px;
margin-top: -9px;
width: 16px;
height: 16px;
background: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png") no-repeat center / contain;
}
.newgraduate-button-v5 {
display: flex;
max-width: 304px;
margin: 15px auto 0;
}
.newgraduate-button-v5 .button-link {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
padding: 4px 15px;
text-decoration: none;
transition: .2s background-color ease-out;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link {
background: #04428C;
border: 4px solid #04428C;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link {
background: #AD0874;
border: 4px solid #AD0874;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link {
background: #CC4D08;
border: 4px solid #CC4D08;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link:hover,
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link:hover,
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link:hover {
background: #fff;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="sales"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #04428C;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="technical"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #AD0874;
}
.newgraduate-job-box-layout .job-box-card[data-sort*="officeWork"] .newgraduate-button-v5 .button-link:hover {
border: 4px solid #CC4D08;
}
.newgraduate-button-v5 .button-link::before,
.newgraduate-button-v5 .button-link::after {
display: block;
position: absolute;
z-index: 1;
top: 50%;
right: 18px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
transition: .2s opacity ease-out;
transform: translateY(-50%);
}
.newgraduate-button-v5 .button-link::before {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic01.png");
opacity: 1;
}
.newgraduate-button-v5 .button-link:hover::before {
opacity: 0;
}
.newgraduate-button-v5 .button-link::after {
background-image: url("/-/media/Project/Canon/CanonJP/Website/corporate/recruit/newgraduate/shared/image/arrow-ic02.png");
opacity: 0;
}
.newgraduate-button-v5 .button-link:hover::after {
opacity: 1;
}
.newgraduate-button-v5 .button-label {
font-size: 2.0rem;
font-weight: bold;
color: #fff;
transition: .2s color ease-out;
}
.newgraduate-button-v5 .button-link:hover .button-label {
color: #333;
}
.newgraduate-foot {
}
.newgraduate-foot .foot-guide {
padding: 35px 0 50px;
}
.newgraduate-foot .foot-guide-column > * {
width: calc((100% - (20px * 1)) / 2);
margin-left: 20px;
}
.newgraduate-foot .guide-item .item-figure > img {
display: inline-block;
width: 114px;
margin: 0 auto;
}
.newgraduate-foot .guide-item .item-figure > img.item-iamge-on {
display: none;
}
.newgraduate-foot .guide-item .item-label {
margin-top: 20px;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
line-height: 1.5;
color: #333;
}
.newgraduate-foot .foot-detail .detail-inner {
width: 100%;
margin: 0 auto;
padding: 15px 10px;
}
.newgraduate-foot .foot-detail .detail-lead {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
color: #fff;
line-height: 1.5;
}
.newgraduate-foot .foot-detail .detail-note {
margin-top: 20px;
font-size: 1rem;
text-align: center;
color: #fff;
line-height: 1.5;
}
.newgraduate-foot .foot-button-wrap > * {
width: 100%;
flex-flow: row wrap;
}
.newgraduate-foot .foot-button-wrap > *:nth-of-type(n + 2) {
margin-top: 15px;
}
.newgraduate-requirements-list-wrap {
margin: 2em 0 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.newgraduate-requirements-list-wrap >:first-child {
margin-top: 0;
}
.newgraduate-requirements-list-wrap .requirements-description-list {
display: block;
width: 100%;
padding: 1em 0;
}
.newgraduate-requirements-list-wrap .requirements-description-list:nth-of-type(even) {
background-color: #f5f5f7;
}
.newgraduate-requirements-list-wrap .requirements-description-list dt {
margin-right: 1.5em;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.4;
}
.newgraduate-requirements-list-wrap .requirements-description-list dd {
margin-top: .5em;
padding-left: 15px;
}
.newgraduate-requirements-list-wrap .requirements-description-list dd,
.newgraduate-requirements-list-wrap .requirements-description-list .description-text {
font-size: 1.3rem;
line-height: 1.4;
}
.newgraduate-requirements-list-wrap .requirements-description-list .description-text + .description-text {
margin-top: 1.5em;
}
.newgraduate-requirements-list-wrap .requirements-description-list .description-type {
color: #333;
}
.newgraduate-training-list-wrap .training-description-list {
font-size: 1.3rem;
}
.newgraduate-training-list-wrap .unorder-list li {
position: relative;
list-style: none;
padding-left: .7em;
}
.newgraduate-training-list-wrap .unorder-list li::before {
display: inline-block;
position: absolute;
top: .8em;
left: 0;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #090909;
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev,
.newgraduate-top .newgraduate-voice-container .swiper-button-next {
display: block;
top: calc(50% - 32.5px);
width: 40px;
height: 54px;
border: 2px solid #707070;
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::after,
.newgraduate-top .newgraduate-voice-container .swiper-button-next::after {
display: none;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev:focus, .newgraduate-top .newgraduate-voice-container .swiper-button-next:focus,
.newgraduate-top .newgraduate-voice-container .swiper-button-prev:hover, .newgraduate-top .newgraduate-voice-container .swiper-button-next:hover {
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::before, .newgraduate-top .newgraduate-voice-container .swiper-button-next::before {
content: "";
display: block!important;
position: absolute;
top: 12px;
left: -2px;
width: 26px;
height: 26px;
border-top: solid 3px #707070;
border-right: solid 3px #707070;
transform: rotate(45deg);
opacity: 1;
color: #707070;
z-index: 999;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev {
left: 0;
z-index: 1;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-prev::before {
content: "";
left: 12px;
transform: rotate(225deg);
}
.newgraduate-top .newgraduate-voice-container .swiper-button-next {
right: 0;
}
.newgraduate-top .newgraduate-voice-container .swiper-button-next::before {
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination {
bottom: 10px;
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet {
position: relative;
margin: 0 7.5px;
width: 15px;
height: 15px;
background-color: #fff;
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet:before {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
color: #fff;
border: 2px solid #707070;
border-radius: 50%;
opacity: 1;
content: "";
}
.newgraduate-top .newgraduate-voice-container .swiper-pagination-bullet-active:before {
width: 15px;
height: 15px;
border: 2px solid #CC0000;
background-color: #CC0000;
color: #CC0000;
}
}