@charset "UTF-8";

body {
font-size: 16px;
}
.in {
width: 84.375%;
max-width: 1620px;
}
.in72 {
width: 72%;
max-width: 1390px;
}
.mob {
display: none !important;
}
h3 {
font-size: 35px;
}
.ellipse_mask_warp::before, .ellipse_mask_warp::after {
width: 100%;
height: 2.6vw;
}
.bg_gradation_circle {
width: 72.9166666667vw;
height: 72.9166666667vw;
}
.btn_10 {
width: 320px;
height: 70px;
padding-left: 30px;
}
.btn_10::before {
width: 40px;
height: 40px;
right: 20px;
}
.recr_permalink .btn_10,
#page-we-contact .btn_10 {
width: 430px;
}
.btn_move_arrow {
right: 20px;
width: 40px;
height: 40px;
}
.btn_circle {
width: 60px;
height: 60px;
}
.btn_circle .btn_move_arrow {
font-size: 27px;
} .site_header::before {
height: 80px;
}
.site_header .logo {
width: 50px;
}
.site_header .text_logo {
width: 187px;
}
.site_header .hed_logo {
width: 262px;
}
.nav_fix_area {
padding: 25px 220px 0 110px;
}
.header_list {
font-size: 14px;
}
.custom_search_form {
font-size: 0.875em;
} .hamburger_wrapper {
width: 40px;
height: 24px;
top: 25px;
right: 40px;
}
.nav_btn .hamburger span {
height: 3px;
}
.nav_btn.active .hamburger span:nth-child(1) { margin-top: -1.5px;
}
.nav_btn.active .hamburger span:nth-child(3) { margin-bottom: -1.5px;
}
.nav_box .nav_fix_area {
padding: 0;
}
.pin_spacer.pc .nav_pc_area.active {
padding-left: 320px;
}
@media screen and (max-width: 1200px) {
.pin_spacer.pc .nav_pc_area.active {
padding-top: 70px;
padding-left: 40px;
}
.header_list {
font-size: calc(0.75rem + (1vw - 8.01px) * 0.5013);
}
} .scroll_infinity {
font-size: 100px;
}
.scroll_infinity._title_view {
margin-top: -0.5em;
}
#footer-menu {
font-size: 0.9375em;
padding-top: 80px;
padding-bottom: 20px;
}
#footer-menu .in {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
-moz-column-gap: 20px;
column-gap: 20px;
}
#footer-menu .logo_wrap {
margin-bottom: 35px;
max-width: 355px;
}
#footer-menu .logo_wrap .logo {
width: 50px;
}
#footer-menu .logo_wrap .logo_sitename {
width: 274px;
}
#footer-menu .address_wrap {
margin-bottom: 50px;
}
.footer_list {
-moz-column-gap: 90px;
column-gap: 90px;
row-gap: 1em;
}
.about_this_site {
margin-bottom: 40px;
}
.footer_right_content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
max-width: 764px;
} .card03 {
width: 100%;
height: 32vw;
}
.l-inner {
padding-left: calc(80px + 50vw);
padding-right: calc(40px + 3.125vw);
top: 0;
}
.card03 .swiper-slide {
border-radius: 20px;
transition: aspect-ratio 1.5s, translate 1.5s, border-radius 600ms 600ms ease;
translate: 0 0;
}
.card03 .swiper-slide:not(.swiper-slide-active) {
aspect-ratio: 1/0.467;
border-radius: 13px;
translate: 0 53.7%;
}
.hedimgs_buttons {
bottom: 0;
}
.first_slide h2 {
gap: 20px;
top: 0;
left: 0;
}
.first_slide h2 .title01 {
font-size: 2.1875em;
font-size: 1.8229166667vw;
}
.first_slide h2 .title02 {
font-size: 6.25em;
font-size: 4.208333vw;
}
.first_slide h2 .lead {
font-size: 1.625em;
font-size: 1.3541666667vw;
}
@media screen and (max-width: 1140px) {
.card03 {
height: 45vw;
}
.l-inner {
padding-left: calc(40px + 30.2083333333vw);
}
.hedimgs_buttons {
top: 90%;
}
}
@media screen and (min-width: 1141px) {
.first_slide h2 {
padding-left: calc(80px + 50vw - (46.875vw - 120px + 40px));
}
}
.first_slide_lead {
display: flex;
align-items: center;
gap: 3.6458333333vw;
}
.first_slide_lead .left_wrap::before {
right: -10%;
width: 5.3125em;
}
.first_slide_lead h3 {
margin-top: 2em;
}
.first_slide_lead .btn_wrap {
margin-top: 40px;
margin-bottom: 115px;
}
.first_slide_lead .img_map {
width: 28.4895833333vw;
}
.first_slide_lead._page.Up {
margin-top: -20vw;
color: #fff;
}
.title_wrap .title_eng {
font-size: 6.25em;
}
.title_wrap .title_ja {
font-size: 1.8em;
margin-top: -10px;
}
.title_wrap._tate .title_ja {
margin-left: 0.5em;
margin-top: 0;
margin-bottom: 10px;
}
.grid_box {
display: grid;
grid-template-columns: auto 1fr;
}
.card_list {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 1.5625vw;
margin-top: 50px;
}
.card_list .card a {
padding: 1.4em 5% 1.4em 8%;
grid-template-columns: 5.5208333333vw 1fr;
gap: 1.5em;
}
.card_list .card p {
font-size: 1.3125em;
}
#home-news {
padding-top: 100px;
padding-bottom: 110px;
}
#home-news .title_wrap {
margin-bottom: 1em;
}
#home-news .post_item a {
display: flex;
align-items: center;
padding: 1.3em;
padding-left: 3.3em;
}
#home-news .post_item .btn_wrap .btn_circle {
width: 45px;
height: 45px;
}
#home-news .post_item .btn_wrap .btn_circle .btn_move_arrow {
font-size: 16px;
}
#home-news .post_title {
margin-left: 3.28125vw;
margin-right: 20px;
}
#home-companies {
padding-top: 55px;
padding-bottom: calc(2.6vw + 80px);
}
#home-companies .grid_box {
gap: 2.34375vw;
max-width: 1195px;
}
#home-companies .right_wrap {
margin-top: 45px;
}
#home-companies .cat_list {
grid-template-columns: repeat(3, 1fr);
gap: 2.0833333333vw;
}
#home-companies .cat_item {
border-radius: 20px;
}
#home-companies .cat_item a {
padding-bottom: 12.5%;
}
#home-companies .cat_item .cat_icon_wrap {
height: 70%;
}
.cube_container {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px;
}
.cube_container li:hover {
z-index: 2;
}
.cube_container li:hover .item_image_wrap .label {
transition: background-color 0s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #00a0f0;
color: #fff;
}
.cube_container .item_image_wrap .label {
font-size: 1em;
}
.outer_block {
clip-path: inset(1.1em 1.1em 60% 1.1em round 15px);
}
.outer_block span {
padding: calc(72% + 11px) 0 13px;
}
#home-interview {
margin-top: -8vw;
}
#home-interview .title_wrap {
margin-top: 60px;
margin-bottom: 50px;
}
#home-interview .btn_wrap {
margin-bottom: 55px;
}
#home-interview .ellipse_mask_warp {
padding-top: 2.6vw;
margin-top: -2.6vw;
padding-bottom: 2.6vw;
}
.cdi_content .btn_wrap,
.page_comp_btn_container .btn_wrap,
#home-interview .btn_wrap {
display: flex;
flex-direction: row;
justify-content: center;
gap: 80px;
}
.slider_wrapper {
margin-top: 45px;
}
.slide {
width: 20.8333333333vw;
}
#home-rec-int {
margin-top: -2.6vw;
padding-bottom: 100px;
}
#home-rec-int .part_wrapper {
padding-top: calc(2.6vw + 118px);
}
.home-hamada {
padding-top: 115px;
padding-bottom: 153px;
} .subpage {
position: relative;
}
@keyframes reveal {
from {
background-position: top center;
}
to {
background-position: top 100% center;
}
}
.subpage::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-image: url(//work.joho-hamada.jp/wp-content/themes/hatarakouhamada/images/subpage_pc.png);
background-position: top center;
background-size: 100%;
animation: linear reveal both;
animation-timeline: view(block);
}
.common_title_container {
background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0));
} .page_title_wrap .page_title {
font-size: max(1.8229166667vw, 20px);
}
.page_title_wrap .copy {
font-size: max(2.1875vw, 25px);
border-radius: 8px;
}
#page-we-info,
#page-we-experience {
padding-top: 150px;
padding-bottom: 90px;
}
#page-we-info {
padding-bottom: 205px;
}
.first_slide_p {
font-size: 2.1875em;
}
.cus_post_list {
margin-top: 80px;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-moz-column-gap: 50px;
column-gap: 50px;
row-gap: 4.6875vw;
}
.cus_post_list p {
font-size: 0.875em;
line-height: 21px;
}
.cus_post_list .company_img_wrap .label {
font-size: 0.875em;
height: 13.6363636364%;
}
.img_wrap img {
margin-right: -16%;
}
.grid_columns4 .cus_post_list {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-moz-column-gap: 40px;
column-gap: 40px;
}
.grid_columns4 .cus_post_list .company_img_wrap .label {
height: 10.3448275862%;
}
.gradation_box_container {
padding-top: 85px;
padding-bottom: 75px;
}
.gradation_box_container .btn_wrap {
text-align: center;
margin-top: 50px;
}
.gradation_box_container h2 {
font-size: 1.875em;
left: -1.16em;
}
.gradation_box_container h2.overpass {
font-size: 2.125em;
}
.gradation_box_container#workers-interview {
padding-top: 230px;
}
.gradation_box_container#company-detail-info {
padding-top: 105px;
padding-bottom: 155px;
}
.gradation_box_content {
padding: 75px 0 60px;
}
.gradation_box_content .inner {
width: 89.2857142857%;
}
.add_padding {
padding-bottom: 205px;
}
.add_padding#page-movies, .add_padding#page-hamada-industry {
padding-bottom: 150px;
}
.banner_list {
grid-template-columns: repeat(3, 1fr);
width: 93.75%;
margin: 45px auto 0;
}
#archive_companies {
padding-bottom: 0;
}
.industry_main_container,
.archive_companiesw {
display: flex;
align-items: flex-start;
flex-direction: column-reverse;
gap: 50px;
}
.company_cat_list {
box-shadow: 0px -10px 15px -5px rgba(0, 0, 0, 0.1);
}
.company_cat_list p {
font-size: 11px;
}
.scroll_box {
position: sticky;
bottom: -120px;
left: 0;
z-index: 99;
width: 100%;
transition: bottom 0.5s ease;
}
.scroll_box.active {
bottom: 0;
}
.page_comp_btn_container {
padding-top: 70px;
padding-bottom: 110px;
}
#single_company_main .page_comp_btn_container {
padding-top: 100px;
padding-bottom: 0;
}
.single_firstview {
position: relative;
padding-right: 5%;
}
.single_firstview .single_thumb {
width: 71.8681318681%;
margin-left: auto;
}
.single_firstview .single_thumb img {
border-radius: 1.0416666667vw;
}
.single_firstview .company_copy {
font-size: 2.1875em;
margin-left: 36.8131868132%;
margin-top: 1.4583333333vw;
}
.top_border::before {
width: 2em;
height: 0.1428571429em;
}
.profile_content,
.youtube_content {
position: absolute;
top: 5.2083333333vw;
left: 0;
width: 34.8958333333%;
}
.profile_content .profile_detail,
.profile_content .cat_name,
.youtube_content .profile_detail,
.youtube_content .cat_name {
font-size: 0.875em;
}
.profile_content h3,
.youtube_content h3 {
font-size: max(1.8229166667vw, 16px);
}
.youtube_content {
gap: 1.25em;
aspect-ratio: 670/820;
padding: 0;
padding-top: 3.125%;
padding-left: 5%;
}
.youtube_content h3 {
width: 90%;
}
.youtube_content .youtube {
width: 14.0625vw;
aspect-ratio: 270/480;
background: #000;
}
.profile_content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4.6% 5% 5.5%;
}
.profile_content h4 {
font-size: 1.625em;
}
.profile_content .grid_box {
gap: 1.25em;
}
.cat_icon_wrap._circle {
width: 100px;
height: 100px;
width: 5.2083333333vw;
height: 5.2083333333vw;
}
.single_main_content {
margin-top: 11vw;
}
.single_main_content h3 {
font-size: 1.875em;
}
.single_main_content article:not(:last-of-type) {
margin-bottom: 10em;
}
.summary_content .flex_box {
display: flex;
justify-content: space-between;
margin-bottom: 45px;
}
.summary_content .flex_box > div {
width: 46%;
}
.areamap_img_wrap {
width: 93.8461538462%;
margin: 0;
}
.detail_content .top_border::before {
width: 1.6666666667em;
height: 0.1333333333em;
}
.over_block {
flex-direction: row;
}
.over_block .block_ttl {
width: 47.9166666667vw;
margin-left: calc(50% - 50vw);
}
.over_block .right_wrap {
width: 46.4285714286%;
margin-top: 50px;
}
.detail_content_box .detail_content:nth-child(2n+2) .over_block,
.multiples_of2 .over_block {
flex-direction: row-reverse;
}
.detail_content_box .detail_content:nth-child(2n+2) .over_block .block_ttl,
.multiples_of2 .over_block .block_ttl {
margin-left: unset;
margin-right: calc(50% - 50vw);
}
.detail_content_box .detail_content:nth-child(2n+2) .over_image::before,
.multiples_of2 .over_image::before {
top: 10px;
left: unset;
right: 0;
border-radius: 2.5vw 0 0 2.5vw;
}
.detail_content_box .detail_content:nth-child(2n+2) .over_image img,
.multiples_of2 .over_image img {
border-radius: 2.5vw 0 0 2.5vw;
}
.caption_wrap {
margin-left: 0;
margin-right: 5%;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.5em;
}
.caption_wrap .caption_hed {
padding: 0.2em 0.8em 0;
margin-bottom: 0;
}
.detail_content:not(:has(img)) .right_wrap {
width: 100%;
}
.cdi_wrapper .gradation_box_content,
.relation_interview_wrapper .gradation_box_content {
padding: 60px 0;
}
.cdi_wrapper .inner .left_wrap,
.relation_interview_wrapper .inner .left_wrap {
display: flex;
flex-direction: column;
justify-content: center;
}
.relation_interview_wrapper .inner .left_wrap {
width: 39.6%;
justify-content: flex-end;
}
.relation_interview_wrapper .inner .right_wrap {
width: 55.4%;
}
.relation_interview_wrapper .cat_icon_wrap._circle {
width: 100px;
height: 100px;
margin-bottom: 1em;
}
.company_data {
font-size: 1.625em;
}
.lifework_wrapper .gradation_box_content {
padding: 50px 0;
}
.lifework_copy {
font-size: 1.875em;
}
.schedule th {
font-size: 1em;
}
.movies_lead {
margin: 100px 0;
}
.movie_list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-moz-column-gap: 2.0833333333vw;
column-gap: 2.0833333333vw;
row-gap: 2.7604166667vw;
margin-bottom: 80px;
}
.industry_section {
padding-top: 200px;
}
.industry_section:first-of-type {
padding-top: 70px;
}
.industry_section:last-of-type {
margin-bottom: 110px;
}
.industry_hed {
border-radius: 20px;
width: 95%;
font-size: 2.1875em;
}
.industry_lead {
font-size: 1.875em;
}
.industry_container {
gap: 60px;
margin-top: 110px;
}
.industry_container:has(.external_links_wrap) {
gap: 20px;
margin-top: 50px;
}
.industry_content {
border-radius: 20px;
width: calc(50% - 30px);
padding: 40px 28px;
}
.industry_content:has(.external_links_wrap) {
padding: 0;
}
.industry_content .external_links_wrap {
padding: 20px 40px 20px 60px;
}
.industry_content h5 span {
font-size: 0.78em;
}
.industry_content .icon_wrap {
margin: 20.48px 0;
}
.industry_content .numbers .num {
font-size: 5em;
}
.industry_content .numbers .unit {
font-size: 1.875em;
}
.industry_content .numbers .notes {
font-size: 2.25em;
}
.industry_content .st {
font-size: 0.875em;
}
.bar_chart1 {
justify-content: center;
width: 85%;
min-width: 665px;
padding-bottom: 90px;
}
.bar_chart1 .woman_wrap,
.bar_chart1 .man_wrap {
position: absolute;
bottom: 0;
}
.bar_chart1 .man_wrap {
left: 0;
}
.bar_chart1 .woman_wrap {
right: 0;
}
#js-bar-chart {
width: 550px;
height: 346px;
}
.ranking li {
grid-template-columns: 40px repeat(auto-fit, minmax(200px, 1fr));
}
.ranking li::before {
font-size: 1.375em;
}
.ranking li:first-of-type::before {
font-size: 1.875em;
}
.ranking li:first-of-type .ran_num {
font-size: 3.3125em;
}
.ranking .ran_hed {
font-size: 1.5em;
}
.ranking .ran_num {
font-size: 2.5em;
}
.i_and_i_detail {
display: grid;
gap: 60px;
margin: 50px 0 65px;
}
.i_and_i_detail .grid_box {
display: grid;
grid-template-columns: 150px 1fr;
gap: 50px;
}
.i_and_i_detail .icon_wrap {
width: 100%;
aspect-ratio: 1/1;
border-radius: 10px;
background: #f1f4f5;
display: flex;
align-items: center;
justify-content: center;
}
.i_and_i_detail .text_wrap {
display: flex;
flex-direction: column;
justify-content: center;
}
.i_and_i_detail .text_wrap h5 {
font-weight: 700;
font-size: 1.875em;
text-align: left;
}
@media screen and (min-width: 1320px) {
#home-news .grid_box {
grid-template-columns: auto 1fr;
gap: 5.7291666667vw;
}
#home-news .left_wrap {
padding-top: 0;
flex-direction: column;
justify-content: flex-start;
}
#home-news .right_wrap {
margin-top: 0;
}
}
@media screen and (min-width: 1025px) {
.chart_wrap.pie_chart {
flex-wrap: nowrap;
justify-content: space-between;
}
.home_rec_int_wrapper {
display: flex;
justify-content: space-between;
}
.home_rec_int_wrapper .title_wrap .title_eng {
font-size: 5.2083333333vw;
}
.home_rec_int_wrapper .title_wrap._tate .title_ja {
font-size: max(1.25vw, 18px);
}
#home-recruit,
#home-intern {
width: 47.5%;
}
#home-recruit a .title_wrap,
#home-intern a .title_wrap {
top: -2.90625vw;
}
#home-recruit a .btn_wrap,
#home-intern a .btn_wrap {
bottom: 8%;
}
#home-intern {
margin-top: 80px;
}
}
@media screen and (min-width: 961px) {
.gradation_box_content .inner .left_wrap,
.gradation_box_content .inner .right_wrap {
width: 46%;
}
}
@media screen and (max-width: 1319px) {
#home-news {
padding-top: 0;
}
#home-companies .cat_list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 1024px) {
.company_cat_list p {
font-size: 10px;
}
}
@media screen and (max-width: 960px) {
#home-companies .cat_list {
grid-template-columns: 1fr;
gap: 4vw;
}
.industry_content .numbers .num {
font-size: 2.5em;
}
.industry_content .numbers .unit {
font-size: 1.4375em;
}
.industry_content .numbers .notes {
font-size: 1.625em;
}
.bar_chart2 {
grid-template-columns: 1fr 160px 1fr;
}
.bar_chart2 .chart_labels {
bottom: 9px;
}
.bar_chart2 .chart_labels .custom_legend li {
line-height: 1;
font-size: 10px;
}
.maleChart_title,
.femaleChart_title {
font-size: 2em;
}
}
.sourceshed {
font-size: 1.375em;
}
.bosyuyoko th {
width: 23%;
}
.bosyuyoko > table > tbody > tr > td,
.bosyuyoko > table > tbody > tr > th {
padding: 10px 10px 10px 20px;
vertical-align: top;
border: 1px solid #CFCDCD;
}
.bosyuyoko .intable {
margin-top: -10px;
margin-bottom: -10px;
}
.bosyuyoko .intable * {
word-break: break-word;
}
.bosyuyoko .intable th,
.bosyuyoko .intable td {
padding: 10px 0;
}
.bosyuyoko .intable tr + tr {
border-top: 1px solid #CFCDCD;
}
#colorbox .modal {
height: 100vh;
}
.modal th {
width: 23%;
}
.modal td,
.modal th {
padding: 10px 10px 10px 20px;
vertical-align: top;
}
.search-item__list {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 1em;
column-gap: 1em;
row-gap: 10px;
}
.news_list li + li {
margin-top: 30px;
}
.news_h h3 {
font-size: 1.5em;
}
.news_h p {
font-size: 1em;
}
.news_list_thumb {
width: 22.22%;
height: 14vw;
max-height: 160px;
}
.news_content .btn_wrap {
margin-top: 80px;
}
.event_detimgbox ul li {
width: 48%;
}