@charset "UTF-8"; /* Theme Name: ctld */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* CSS Document */ * { backface-visibility: hidden; /* animation時のにじみ防止 */ -webkit-backface-visibility: hidden; /* animation時のにじみ防止 */ -webkit-font-smoothing: antialiased; /* animation時の文字にじみ防止 */ -moz-osx-font-smoothing: grayscale; /* animation時の文字にじみ防止 */ } body { font-family: "Zen Kaku Gothic New", "din-2014", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; overflow-wrap: break-word; background-image: url(../img/bg_img.png); background-repeat: repeat; line-height: 1.8; color: #231815; } input[type=checkbox] { border: 1px solid #231815; width: 16px; height: 16px; padding: 0; } /* font-size */ ul, ol, dl, li, strong, dt, dd, p, div, span, a, article, label, input, select, textarea { font-size: calc(15px + (16 - 15) * (100vw - 414px) / (1280 - 414)); font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } .bold { font-weight: bold !important; } .tal { text-align: left !important; } .tar { text-align: right !important; } .tac { text-align: center !important; } /* grid */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 16px; padding-right: 16px; padding-left: 16px; align-items: start; } .wrap { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 16px; align-items: start; } .center { text-align: center; } img { vertical-align: middle; } a { transition-duration: 0.2s; } a:hover { color: #f39800; } /* font-size */ p { font-weight: 400; } span { font-size: 60%; } @media (max-width: 768px) { p { font-size: 14px; } } /* wrapper */ .wrapper { max-width: 1600px; margin: 0 auto; padding: 0 16px; } .contents_wrapper { max-width: 1024px; margin: 160px auto 0; padding: 0 16px; } @media (max-width: 768px) { .contents_wrapper { margin-top: 80px; } } .sec_wrapper { margin-top: 160px; } @media (max-width: 768px) { .sec_wrapper { margin-top: 80px; } } /* header */ .header_mv { position: relative; } .header_mv .wrapper { padding: 0; } .header_mv > .wrapper { padding: 0; } .header_contents { width: 100%; max-width: 1600px; position: fixed; display: flex; justify-content: space-between; z-index: 20; top: 24px; padding: 0 16px 0 0; } .header_menu { min-width: 540px; margin: 0 0 auto 0; line-height: 1; text-align: center; display: flex; justify-content: space-between; background-color: #ffffff; border: solid 2px #F39800; border-radius: 10px; padding: 24px 32px; margin-right: 24px; } .header_logo img { height: 160px; } @media (max-width: 1280px) { .header_contents { top: 16px; } .header_logo img { height: 100px; } .header_menu { min-width: 440px; margin: 0 0 auto 0; line-height: 1; background-color: #ffffff; border: solid 0.5px #F39800; border-radius: 10px; padding: 16px 24px; margin-right: 16px; } } @media (max-width: 1024px) { .header_menu { display: none; } } /* menulist */ .menulist { line-height: 1.3; } .menulist .en { font-family: "din-2014"; font-weight: 900; font-size: 20px; letter-spacing: 1.5px; } .menulist .ja { font-weight: 700; font-size: 80%; } @media (max-width: 1280px) { .menulist .en { font-size: 16px; } } /* section_title */ .sec_title { position: relative; display: flex; flex-direction: column; text-align: center; width: -moz-fit-content; width: fit-content; margin: 0 auto 80px; font-family: "din-2014"; font-weight: 800; font-size: 32px; line-height: 1.3; padding: 0 16px; letter-spacing: 1.5px; } .sec_title span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: bold; font-size: 20px; } .sec_title::before { position: absolute; content: ""; width: 15px; height: 40px; background-image: url(../img/ashirai01.svg); top: 16px; left: -24px; } .sec_title::after { position: absolute; content: ""; width: 15px; height: 40px; background-image: url(../img/ashirai02.svg); top: 16px; right: -24px; } @media (max-width: 768px) { .sec_title { font-size: 24px; } .sec_title span { font-size: 16px; } .sec_title::before { top: 8px; left: -12px; } .sec_title::after { top: 8px; right: -12px; } } @media (max-width: 768px) { .sec_title { margin-bottom: 40px; } } /* table */ th { position: relative; padding: 20px 0 20px 10%; letter-spacing: 3px; font-weight: bold; width: 40%; } th:before { position: absolute; content: ""; top: 0; left: 0; width: 90%; height: 1px; border-top: solid 1px #F39800; } td { padding: 20px 0; border-top: solid 1px #a3a3a3; } table span { line-height: 80%; } @media (max-width: 768px) { th { padding: 8px 24px; } td { padding: 8px; } } @media (max-width: 540px) { table th, table td { width: 100%; display: block; } table th { letter-spacing: 1.5px; padding: 16px 0 0; } table th::before { width: 100%; } table td { border-top: none; padding: 0 0 16px; } } /* footer */ footer { background-color: #fffeee; } footer .contents_wrapper { margin: 80px auto 0; max-width: 550px; padding: 80px 16px; } @media (max-width: 768px) { footer .contents_wrapper { margin-top: 40px; padding: 40px 16px; } } .footer_menu { max-width: 100%; margin: 0 auto; line-height: 1; text-align: center; display: flex; justify-content: space-between; padding: 0 4%; } .footer_menu .menulist p { padding: 0; } .footer_contents { display: flex; justify-content: space-between; justify-content: space-around; width: 100%; margin-top: 80px; } @media (max-width: 430px) { .footer_contents { margin-top: 40px; flex-direction: column; text-align: center; } .footer_logo { margin-bottom: 24px; } .footer_logo img { width: 100px; } } .company_info { line-height: 1; } .company { font-size: 20px; font-weight: 900; padding-bottom: 16px; } .address { padding-bottom: 8px; } .address img { padding-right: 4px; } .address img, .sns_icon img { color: #393939; } .company_info p:nth-child(4) { padding-bottom: 0px; } .sns { display: flex; justify-content: space-between; width: 112px; margin-top: 16px; display: none; } @media (max-width: 430px) { .sns { margin: 16px auto; } } .footer_cr { width: 100%; height: 40px; line-height: 40px; align-items: center; color: #ffffff; text-align: center; font-weight: 600; background-color: #f39800; } @media (max-width: 768px) { .footer_cr { width: 100%; height: 30px; line-height: 30px; } } .mob-show { display: none; } @media (max-width: 768px) { .mob-show { display: block !important; } } .mob-clear { display: block; } @media (max-width: 768px) { .mob-clear { display: none !important; } } .mob-hidden { visibility: visible; } @media (max-width: 768px) { .mob-hidden { visibility: hidden !important; } } .pad-show { display: none; } @media (min-width: 769px) and (max-width: 1024px) { .pad-show { display: block !important; } } .pad-clear { display: block; } @media (min-width: 769px) and (max-width: 1024px) { .pad-clear { display: none !important; } } .pad-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1024px) { .pad-hidden { visibility: hidden !important; } } .web-show { display: none; } @media (min-width: 1025px) and (max-width: 1280px) { .web-show { display: block !important; } } .web-clear { display: block; } @media (min-width: 1025px) and (max-width: 1280px) { .web-clear { display: none !important; } } .web-hidden { visibility: visible; } @media (min-width: 1025px) and (max-width: 1280px) { .web-hidden { visibility: hidden !important; } } .max-show { display: none; } @media (min-width: 1281px) and (max-width: 1600px) { .max-show { display: block !important; } } .max-clear { display: block; } @media (min-width: 1281px) and (max-width: 1600px) { .max-clear { display: none !important; } } .max-hidden { visibility: visible; } @media (min-width: 1281px) and (max-width: 1600px) { .max-hidden { visibility: hidden !important; } } .mob-pad-show { display: none; } @media (max-width: 1024px) { .mob-pad-show { display: block !important; } } .mob-pad-clear { display: block; } @media (max-width: 1024px) { .mob-pad-clear { display: none !important; } } .mob-pad-hidden { visibility: visible; } @media (max-width: 1024px) { .mob-pad-hidden { visibility: hidden !important; } } .pad-web-show { display: none; } @media (min-width: 769px) and (max-width: 1280px) { .pad-web-show { display: block !important; } } .pad-web-clear { display: block; } @media (min-width: 769px) and (max-width: 1280px) { .pad-web-clear { display: none !important; } } .pad-web-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1280px) { .pad-web-hidden { visibility: hidden !important; } } .web-max-show { display: none; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-show { display: block !important; } } .web-max-clear { display: block; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-clear { display: none !important; } } .web-max-hidden { visibility: visible; } @media (min-width: 1025px) and (max-width: 1600px) { .web-max-hidden { visibility: hidden !important; } } .mob-web-show { display: none; } @media (max-width: 1280px) { .mob-web-show { display: block !important; } } .mob-web-clear { display: block; } @media (max-width: 1280px) { .mob-web-clear { display: none !important; } } .mob-web-hidden { visibility: visible; } @media (max-width: 1280px) { .mob-web-hidden { visibility: hidden !important; } } .mob-max-show { display: none; } @media (max-width: 1600px) { .mob-max-show { display: block !important; } } .mob-max-clear { display: block; } @media (max-width: 1600px) { .mob-max-clear { display: none !important; } } .mob-max-hidden { visibility: visible; } @media (max-width: 1600px) { .mob-max-hidden { visibility: hidden !important; } } .pad-max-show { display: none; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-show { display: block !important; } } .pad-max-clear { display: block; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-clear { display: none !important; } } .pad-max-hidden { visibility: visible; } @media (min-width: 769px) and (max-width: 1600px) { .pad-max-hidden { visibility: hidden !important; } } .openbtn { position: fixed; z-index: 9999; top: 16px; right: 16px; cursor: pointer; width: 48px; height: 48px; background-color: #FFFBF4; box-sizing: content-box; } .openbtn span { display: inline-block; transition: all 0.3s; position: absolute; left: 8px; height: 3px; border-radius: 2px; background-color: #393939; width: 32px; } .openbtn span:nth-of-type(1) { top: 16px; } .openbtn span:nth-of-type(2) { top: 24px; } .openbtn span:nth-of-type(3) { top: 32px; } .openbtn:hover span:nth-of-type(1) { top: 14px; } .openbtn:hover span:nth-of-type(3) { top: 34px; } .openbtn.active span:nth-of-type(1) { top: 18px; left: 8px; transform: translateY(6px) rotate(-45deg); width: 32px; } .openbtn.active span:nth-of-type(2) { opacity: 0; } .openbtn.active span:nth-of-type(3) { top: 30px; left: 8px; transform: translateY(-6px) rotate(45deg); width: 32px; } .no-scroll { overflow: hidden; height: 100%; } .header_nav_hum { position: fixed; z-index: 999; top: 0; right: -120%; width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 0.95); transition: all 0.6s; } .header_nav_hum.panelactive { right: 0; } .header_nav_hum.panelactive .header_nav_hum_wrapper { position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } .header_nav_hum .header_nav_hum_block { position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 16px); text-align: center; } .header_nav_hum .header_nav_hum_block .header_logo_mob { height: 200px; } .header_nav_hum .header_nav_hum_block li { margin: 10px; } .header_nav_hum .header_nav_hum_block a { font-weight: 600; font-size: 16px; position: relative; display: inline-block; color: #393939; text-decoration: none; transition: color 0.3s ease; } .header_nav_hum .header_nav_hum_block a a:hover { color: #ff6347; /* ホバー時のテキストカラーを変更 */ } .header_nav_hum .header_nav_hum_block a a:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* top */ .mv { position: relative; max-width: 1600px; max-height: 600px; margin: 0 auto; } @media (max-width: 430px) { .mv { max-height: 400px; } } .mv_img { max-height: 600px; } .mv_img img { display: flex; margin: 0 auto; -o-object-fit: cover; object-fit: cover; height: 600px; } @media (max-width: 768px) { .mv_img img { -o-object-fit: cover; object-fit: cover; height: 400px; } } @media (max-width: 768px) { .mv_img { min-height: 600px; } .mv_img .mv_img { width: 100vw; text-align: center; } } .mvdesc_outer { position: absolute; z-index: 15; top: 16%; left: 20%; color: #ffffff; } .mv_desc { font-size: clamp(0.875rem, 0.625rem + 1.25vw, 1.563rem); font-weight: 900; font-style: normal; line-height: 1.6; } @media (max-width: 1280px) { .mvdesc_outer { left: 13%; min-width: 340px; } .mv_desc { font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem); line-height: 1.6; } } @media (max-width: 768px) { .mvdesc_outer { left: 50%; transform: translateX(-50%); } .mvdesc_outer .mv_desc { font-size: 16px; } } @media (max-width: 768px) { .mvdesc_outer { top: 30%; } } @media (max-width: 430px) { .mvdesc_outer { top: 33%; } } .parts01, .parts02 { display: none; } @media (max-width: 430px) { .parts01 { position: absolute; display: block; width: 160px; bottom: 40px; left: 20px; } .parts02 { position: absolute; display: block; width: 140px; top: 80px; right: 20px; } } /* service */ .service_contents { margin-bottom: 80px; display: flex; width: 100%; align-items: center; } .service_contents:nth-child(2) { flex-flow: row-reverse; } .service_contents:nth-child(2) > .service_img { margin-left: 64px; margin-right: 0; } @media (max-width: 1024px) { .service_contents:nth-child(2) > .service_img { margin-left: 32px; margin-right: 0; } } @media (max-width: 768px) { .service_contents { margin-left: 0; display: block; } .service_contents:nth-child(2) > .service_img { margin-left: 0; } } @media (max-width: 430px) { .service_contents { margin-bottom: 40px; } } .service_img { position: relative; width: 60%; margin-right: 64px; } .service_img::after { position: absolute; content: ""; width: 100%; height: 100%; background-color: #f39800; border-radius: 10px; top: 10px; left: 10px; z-index: -1; } .service_img img { width: 100%; border-radius: 10px; } .service_text { width: 40%; } @media (max-width: 1024px) { .service_img { width: 55%; margin-right: 32px; } .service_img::after { top: 8px; left: 8px; } .service_text { width: 45%; } } @media (max-width: 768px) { .service_img { width: 100%; margin-right: 32px; } .service_img::after { top: 8px; left: 8px; } .service_text { width: 100%; } } .service_desc_b { font-weight: 600; } .service_title { font-family: "din-2014"; font-size: 24px; font-weight: 800; width: 50%; margin: 0 auto; text-align: center; line-height: 1.5; border-bottom: solid 2px #F39800; margin-bottom: 24px; } .service_title span { font-weight: 900; } @media (max-width: 768px) { .service_title { font-size: 20px; width: 40%; margin-top: 24px; } .service_title span { font-weight: 900; } } @media (max-width: 430px) { .service_title { margin-bottom: 8px; } } /* about */ .about_img { max-width: 560px; margin: 80px auto 0; text-align: center; } @media (max-width: 430px) { .about_img { margin: 40px auto 0; } } .about_en { font-size: 18px; font-weight: 800; } .value { padding-bottom: 16px; } .value:last-of-type { padding-bottom: 0; } .value .value_title { font-weight: bold; } @media (max-width: 768px) { .about_en { font-size: 16px; } .value p { letter-spacing: 0px; } } /* recruit */ .recruit_img_list { display: flex; justify-content: space-between; margin-bottom: 40px; } .recruit_img { padding: 0 1%; } .recruit p { text-align: center; font-weight: bold; } .recruit_btn { display: inline-block; width: 270px; height: 70px; padding: 40px; color: #ffffff; background-color: #f39800; border-radius: 100px; display: flex; justify-content: space-between; align-items: center; margin: 40px auto; transition-duration: 0.4s; } .recruit_btn:hover { color: #ffffff; transform: scale(1.1); } .btn_msg { line-height: 1.2; font-family: "din-2014"; font-size: 24px; font-weight: 800; } .btn_msg .ja { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 12px; } .btn_img, .btn_img img { text-align: center; width: auto; } /* ---------- Recruitページ ----------*/ .contact_mv { max-height: 400px; } .contact_mv .mv_img img { height: 400px; } .contact_mv .parts01 { bottom: 80px; } .contact_mv .recruit_desc { top: 200px; left: 0; right: 0; margin: 0 auto; } .contact_mv .mv_desc { display: flex; flex-direction: column; text-align: center; font-family: "din-2014"; font-weight: 800; font-size: 32px; line-height: 1.3; padding: 0 16px; letter-spacing: 1.5px; } .contact_mv .mv_desc span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: bold; font-size: 20px; } @media (max-width: 768px) { .contact_mv .mvdesc_outer { right: 0; transform: translateX(0); } } /* jobdesc */ .table_company { width: 100%; } .table_company th { font-weight: normal; letter-spacing: 0; padding: 0; } .table_company th::before { border: none; } .table_company td { width: 100vw; padding: 0 0 0 16px; border: none; } @media (max-width: 768px) { .table_company th, .table_company td { width: auto; display: inline-table; } .table_company th { width: 35%; } .table_company td { width: 65%; } }/*# sourceMappingURL=style.css.map */