@charset "UTF-8"; /*** The new CSS reset - version 1.8.2 (last updated 23.12.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-inline-size: 100%; max-block-size: 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; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: ""; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } @media screen and (min-width: 768px) { a[href^="tel:"] { pointer-events: none; } } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } html { scroll-behavior: smooth; margin-top: 0 !important; } body { width: 100%; margin: auto; font-family: "NotoSansJpMedium"; font-size: 10px; color: #333; overflow-x: hidden; } body.open { overflow-y: hidden; } main { padding-top: 60px; } @media screen and (max-width: 768px) { main { overflow-x: hidden; padding-top: 53px; } } .lower_page_main { padding-top: 166.633px; max-width: 860px; margin: auto; } .lower_page_main.wide { max-width: 980px; } .lower_page_main.selection_point { max-width: 980px; } @media screen and (max-width: 768px) { .lower_page_main.selection_point { width: 100%; background: #fff; } } @media screen and (max-width: 768px) { .lower_page_main.selection_point.works { background: #fff; } } .lower_page_main.selection_point.work_archive { max-width: 1060px; } @media screen and (max-width: 768px) { .lower_page_main.selection_point.work_archive { background: #fff; } } .lower_page_main.questionnaire { background: #e0d4be; width: 100%; max-width: 100%; padding-bottom: 5px; } @media screen and (max-width: 768px) { .lower_page_main.questionnaire { padding-bottom: 20px; } } .lower_page_main_inner { max-width: 980px; } @media screen and (max-width: 768px) { .lower_page_main_inner { width: 362px; margin: auto; background: #fff; } } @media screen and (max-width: 768px) { .lower_page_main { background: #fff; padding-top: 64px; } } img { display: block; } .top_main { background: #f6f4f0; } .bold_text { font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .contents_title_typeA { text-align: center; } } .contents_title_typeA_text { font-size: 20px; font-family: "NotoSansJpBold"; color: #d09b58; position: relative; } @media screen and (max-width: 768px) { .contents_title_typeA_text { font-size: 16px; } } .contents_title_typeA_content { font-size: 36px; font-family: "NotoSansJpBold"; writing-mode: vertical-rl; position: relative; right: -8px; top: 17px; } @media screen and (max-width: 768px) { .contents_title_typeA_content { font-size: 20px; writing-mode: horizontal-tb; position: relative; right: 0; top: 0; text-align: center; } } .contents_title_typeA_content.secondLine { line-height: 1; font-size: 30px; right: -3px; } @media screen and (max-width: 768px) { .contents_title_typeA_content.secondLine { font-size: 20px; } } .contents_title_typeA_content.secondLine::before { right: -7px; } .contents_title_typeA_content:before { content: ""; display: block; width: 70px; height: 12px; background-color: #333; position: absolute; top: -17px; left: -7px; } @media screen and (max-width: 768px) { .contents_title_typeA_content:before { display: none; } } .lower_page_title { font-size: 26px; font-family: "NotoSansJpBold"; border-bottom: 2.5px solid #000; padding-bottom: 10px; } .lower_page_title.advice_service { font-size: 30px; } @media screen and (max-width: 768px) { .lower_page_title.advice_service { font-size: 22px; padding-bottom: 20px; } } @media screen and (max-width: 768px) { .lower_page_title.advice_service.works { padding-bottom: 25px; } } .lower_page_title.advice_service.works.works_archive { font-size: 31px; } @media screen and (max-width: 768px) { .lower_page_title.advice_service.works.works_archive { font-size: 20px; padding-bottom: 10px; } } .lower_page_title.advice_service.questionnaire { padding-bottom: 0; border-bottom: 3px solid #333; } @media screen and (max-width: 768px) { .lower_page_title.advice_service.questionnaire { border-bottom: 6px solid 333; } } @media screen and (max-width: 768px) { .lower_page_title.selection_point { font-size: 24px; padding-bottom: 10px; } } .lower_page_title.works_single { font-size: 23px; border-bottom: 6px solid #333; padding-bottom: 5px; } @media screen and (max-width: 768px) { .lower_page_title.works_single { font-size: 24.5px; padding-bottom: 10px; } } .lower_page_title.works_single.mt_top { margin-top: 100px; } @media screen and (max-width: 768px) { .lower_page_title.works_single.mt_top { margin-top: 60px; } } .lower_page_title.works_single.taxonomy { border-bottom: none; padding: 10px 0 0; font-size: 25px; } @media screen and (max-width: 768px) { .lower_page_title.works_single.taxonomy { font-size: 18px; } } @media screen and (max-width: 768px) { .lower_page_title { font-size: 22px; padding-bottom: 5px; border-bottom: 4px solid #333; } } .lower_page_subtitle { font-size: 14px; margin-left: 5px; color: #d09b57; } .lower_page_subtitle .post-ratings { font-size: 19px; display: flex; justify-content: space-between; align-items: center; } .lower_page_subtitle .post-ratings img { width: 20px; height: 20px; margin: 0 5px 0 10px; position: relative; top: 2px; } .post-ratings { font-size: 19px; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 768px) { .post-ratings { justify-content: flex-start; } } .post-ratings img { width: 20px; height: 20px; margin: 0 5px 0 10px; position: relative; top: 2px; } .post-ratings.sp_archive { flex-direction: row-reverse; } .post-ratings.sp_archive img { margin: 0 10px 0 0; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .header { position: fixed; background: #fff; z-index: 100000; max-width: 1920px; left: 50%; transform: translateX(-50%); width: 100%; padding: 23px 100px 22px 100px; } @media screen and (max-width: 768px) { .header { padding: 11px 28px 11px 14px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); } } .header_top_area { display: flex; justify-content: space-between; align-items: center; } .header_top_left_area { width: 404px; } @media screen and (max-width: 768px) { .header_top_left_area { width: 221px; } } .header_top_left_area_link { width: 100%; } .header_top_left_area_image { width: 100%; } .header_top_right_area { display: flex; justify-content: center; align-items: center; gap: 20px; } @media screen and (max-width: 768px) { .header_top_right_area { display: none; } } @media screen and (max-width: 768px) { .header_top_right_area_link { margin: 34px auto 0 auto; } } .header_top_right_area_link.tel { width: 249px; } @media screen and (max-width: 768px) { .header_top_right_area_link.tel { margin-top: 34px; } } .header_top_right_area_link.contact { width: 296px; } @media screen and (max-width: 768px) { .header_top_right_area_link.contact { margin-top: 20px; width: 296px; } } .header_top_right_area_link.contact:hover { transition: 0.3s; opacity: 0.8; } .header_bottom_nav { max-width: 1380px; width: 1380px; margin: auto; display: flex; justify-content: center; gap: 69px; margin-top: 26px; } @media screen and (max-width: 768px) { .header_bottom_nav { display: none; } } .header_bottom_nav_link { font-size: 16px; font-family: "NotoSansJpBold"; } .header_bottom_nav_link:hover { color: #d09b57; } .header_bottom_nav_link.active { color: #d09b57; } .header_bottom_nav_link.icon { cursor: pointer; padding-bottom: 10px; } .header_bottom_nav_link.icon::after { content: ""; display: inline-block; vertical-align: bottom; background-image: url("../images/common/menu_icon.webp"); background-size: contain; background-repeat: no-repeat; width: 24px; height: 24px; margin-left: 8px; } .header_bottom_nav_link.icon.more { cursor: default; } .header_bottom_nav_link.icon.more:hover { color: #333; } .header_bottom_nav_link_icon_wrapper { position: relative; } .header_bottom_nav_link_icon_wrapper.example:hover .header_bottom_nav_link_hover_menu.example { display: block; } .header_bottom_nav_link_icon_wrapper.voice:hover .header_bottom_nav_link_hover_menu.voice { display: block; } .header_bottom_nav_link_icon_wrapper.more:hover .header_bottom_nav_link_hover_menu.more { display: block; } .header_bottom_nav_link_hover_menu { display: none; position: absolute; top: 30px; left: -69px; width: 240px; background: #fff8ef; padding: 24px; border-radius: 10px; } .header_bottom_nav_link_hover_menu:hover { display: block; } .header_bottom_nav_link_hover_menu_link { display: block; font-size: 16px; margin-top: 18px; font-family: "NotoSansJpBold"; } .header_bottom_nav_link_hover_menu_link::before { content: ""; display: inline-block; vertical-align: bottom; background-image: url("../images/common/menu_right_icon.webp"); background-size: contain; background-repeat: no-repeat; width: 24px; height: 24px; margin-right: 8px; } .header_bottom_nav_link_hover_menu_link.active { color: #d09b57; } .header_bottom_nav_link_hover_menu_link:hover { color: #d09b57; } .header_bottom_nav_link_hover_menu_link.top { margin-top: 0; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .hero_section { max-width: 1920px; margin: auto; } @media screen and (max-width: 768px) { .hero_section { width: 100vw; } } .hero_section_image { width: 100%; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .eyeCatch_head { margin-top: 48px; font-size: clamp(20px, 36 / 1024 * 100vw, 36px); text-align: center; font-family: "NotoSansJpBold"; } .eyeCatch_section { max-width: 860px; margin: auto; padding-bottom: 80px; } @media screen and (max-width: 768px) { .eyeCatch_section { width: 334px; } } .eyeCatch_section_frame { display: block; width: 100%; height: 711px; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .eyeCatch_section_frame { display: none; } } .eyeCatch_section_frame.graph { height: auto; } .eyeCatch_section_title { font-family: "NotoSansJpRegular"; text-align: center; margin: 47px 0 11px 0; font-size: 28px; } @media screen and (max-width: 768px) { .eyeCatch_section_title { font-size: 20px; } } .eyeCatch_section_title.subtitle { position: absolute; top: 35px; right: 95px; } @media screen and (max-width: 768px) { .eyeCatch_section_title.subtitle { position: static; margin-top: 0; } } .eyeCatch_section_map_area { padding-top: 100px; position: relative; } @media screen and (max-width: 768px) { .eyeCatch_section_map_area { padding-top: 25px; } } .eyeCatch_section_map_area.graph { margin-top: 60px; } @media screen and (max-width: 768px) { .eyeCatch_section_map_area.graph { margin-top: 0; } } .eyeCatch_section_map_image { position: absolute; width: 737px; top: 200px; left: 50%; transform: translateX(-50%); z-index: 10; } @media screen and (max-width: 768px) { .eyeCatch_section_map_image { width: 100%; position: static; transform: none; } } .eyeCatch_section_map_bottom_image { position: absolute; width: 146px; bottom: 20px; right: 130px; } @media screen and (max-width: 768px) { .eyeCatch_section_map_bottom_image { position: static; } } .eyeCatch_section_map_bottom_text { font-size: 14px; position: absolute; bottom: 112px; right: 60px; line-height: 1.2; transform: rotate(14.318694692deg); } .eyeCatch_section_good_image { position: absolute; top: 0; left: 70px; width: 177px; height: 159px; } @media screen and (max-width: 768px) { .eyeCatch_section_good_image { position: static; width: 124px; height: auto; } } .eyeCatch_section_small_text { font-size: 21px; } @media screen and (max-width: 768px) { .eyeCatch_section_small_text { font-size: 16px; } } .eyeCatch_section_text { font-family: "NotoSansJpBold"; font-size: 21px; position: absolute; top: 160px; left: 0; width: 100%; text-align: center; } @media screen and (max-width: 768px) { .eyeCatch_section_text { position: static; font-size: 15px; } } .eyeCatch_section_text.graph { width: 726px; left: 50%; transform: translateX(-50%); text-align: left; font-family: "NotoSansJpMedium"; } @media screen and (max-width: 768px) { .eyeCatch_section_text.graph { width: 100%; transform: none; text-align: center; } } .eyeCatch_section_area_wrapper { position: absolute; background: #fff; width: 427px; bottom: 20px; left: 20px; padding: 10px; } @media screen and (max-width: 768px) { .eyeCatch_section_area_wrapper { display: none; } } .eyeCatch_section_area_text { font-size: 16px; font-family: "NotoSansJpBold"; line-height: 1.3; } .eyeCatch_section_area_text.possible { font-family: "NotoSansJpMedium"; margin-top: 6px; font-size: 12px; } .eyeCatch_section_area_text_possible_label { font-size: 14px; } .eyeCatch_section_btn { display: block; margin: auto; width: 303px; margin-top: 10px; } .eyeCatch_section_btn_area { margin-top: 44px; } .eyeCatch_section_btn_title { font-size: 20px; text-align: center; } .eyeCatch_section_btn_image { width: 100%; } .eyeCatch_section_sp_map { width: 334px; margin: 34px auto 0 auto; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .service_section { max-width: 860px; margin: auto; padding: 60px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .service_section { flex-direction: column; padding-top: 30px; max-width: 362px; background: #fff; padding: 30px; } } .service_section_detail_text { margin-top: 120px; font-size: 16px; writing-mode: vertical-rl; } @media screen and (max-width: 768px) { .service_section_detail_text { writing-mode: horizontal-tb; margin-top: 20px; } } .service_section_contents_area { background: #fff; width: 680px; padding: 40px; } @media screen and (max-width: 768px) { .service_section_contents_area { width: 100%; max-width: 362px; padding: 40px 0; } } .service_section_contents_top { display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .service_section_contents_top { flex-direction: column; width: 100%; } } .service_section_contents_top_item { width: 280px; } @media screen and (max-width: 768px) { .service_section_contents_top_item { width: 100%; } } @media screen and (max-width: 768px) { .service_section_contents_top_item.second { margin-top: 60px; } } .service_section_contents_top_item_title { margin-top: 9px; font-family: "NotoSansJpBold"; font-size: 24px; } @media screen and (max-width: 768px) { .service_section_contents_top_item_title { font-size: 26px; margin-top: 0; } } .service_section_contents_top_item_subtitle { font-family: "NotoSansJpBold"; margin-top: 23px; font-size: 16px; } @media screen and (max-width: 768px) { .service_section_contents_top_item_subtitle { font-size: 16px; margin-top: 6px; } } .service_section_contents_top_item_subtitle.bottom { font-size: 14px; } .service_section_contents_top_item_text { font-size: 14px; margin-top: 9px; height: 90px; } @media screen and (max-width: 768px) { .service_section_contents_top_item_text { height: auto; font-size: 16px; margin-top: 0; } } .service_section_contents_top_item_btn { font-size: 14px; display: block; width: 280px; background: #000; color: #fff; text-align: center; padding: 10px 0; border: 1px solid #000; letter-spacing: 0.1em; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn { width: 100%; font-size: 16px; padding: 2px 0; margin-top: 6px; } } .service_section_contents_top_item_btn.bottom { width: 250px; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.bottom { width: 100%; } } .service_section_contents_top_item_btn.portfolio { width: 100%; padding: 8px 0; margin-top: 20px; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.portfolio { padding: 10px 0; } } .service_section_contents_top_item_btn.column { margin-top: 2px; border: none; transition: 0.3s; } .service_section_contents_top_item_btn.column:hover { background: #e0d4be; font-size: 15px; text-decoration: underline; } .service_section_contents_top_item_btn.in_preparation { color: #e0d4be; background: rgba(40, 38, 38, 0.57); border: 1px solid rgba(40, 38, 38, 0.57); } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.in_preparation { color: #fff; border: none; padding: 10px 0; } } .service_section_contents_top_item_btn.in_preparation:hover { color: #3a0404; border: 1px solid #3a0404; background: #e0d4be; } .service_section_contents_top_item_btn.works { margin-top: 10px; width: 100%; border: 1px solid #e0d4be; color: #e0d4be; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.works { font-size: 18px; padding: 10px 0; } } .service_section_contents_top_item_btn.works:hover { border: 1px solid #3a0404; background: #dbdbdb; } .service_section_contents_top_item_btn.works.preparation { background: #8b8885; } .service_section_contents_top_item_btn.works.preparation:hover { background: #8b8885; border: 1px solid #e0d4be; color: #e0d4be; } .service_section_contents_top_item_btn.works.archive:hover { border: 1px solid #000; background: #fff; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.works.archive { width: 50%; margin: 20px auto 0 auto; } } .service_section_contents_top_item_btn.works.archive.taxonomy { border: 1px solid #000; color: #fff; font-size: 17px; } .service_section_contents_top_item_btn.works.archive.taxonomy:hover { border: 1px solid #000; background: #fff; color: #000; } @media screen and (max-width: 768px) { .service_section_contents_top_item_btn.works.archive.taxonomy { width: 100%; margin: 10px auto 0 auto; } } .service_section_contents_top_item_btn:hover { transition: 0.3s; background: #fff; color: #000; } .service_section_contents_top_border { width: 1px; height: 391px; background: #000; } @media screen and (max-width: 768px) { .service_section_contents_top_border { display: none; } } .service_section_contents_bottom_area { display: flex; justify-content: space-between; border-top: 1px solid #000; margin-top: 30px; padding-top: 30px; } @media screen and (max-width: 768px) { .service_section_contents_bottom_area { flex-direction: column-reverse; width: 100%; border-top: none; } } .service_section_contents_bottom_item_image { width: 322px; object-fit:cover; max-width:280px; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .portfolio_section { max-width: 860px; margin: auto; padding: 60px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .portfolio_section { flex-direction: column; padding-top: 30px; max-width: 334px; padding: 30px 0; } } .portfolio_section_contents { margin-top: 60px; } .portfolio_section_contents.taxonomy { margin-top: 30px; padding: 20px 30px 30px; border: 1px solid #333; } @media screen and (max-width: 768px) { .portfolio_section_contents.taxonomy { padding: 0 0 40px; border: none; border-bottom: 1px solid #333; } } .portfolio_section_contents.top { margin-top: 0; } .portfolio_section_contents_area { width: 740px; } @media screen and (max-width: 768px) { .portfolio_section_contents_area { width: 100%; } } .portfolio_section_contents_title { font-size: 24px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .portfolio_section_contents_title { font-size: 20px; } } .portfolio_section_contents_flex { width: 100%; display: flex; background: #f0eadf; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex { flex-direction: column; background: #f6f4f0; } } .portfolio_section_contents_flex.works_single { margin-top: 20px; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex.works_single { margin-top: 0; background: #fff; padding: 0 10px; } } .portfolio_section_contents_flex.taxonomy { gap: 30px; background: #fff; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex.taxonomy { margin-top: 0; background: #fff; padding: 0; flex-direction: row; gap: 20px; } } .portfolio_section_contents_flex.bottom { justify-content: space-around; background: #f6f4f0; } .portfolio_section_contents_flex_title { font-size: 18px; font-family: "NotoSansJpBold"; margin-bottom: 10px; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex_title { font-size: 16px; } } @media screen and (max-width: 768px) { .portfolio_section_contents_flex_title.works_single { font-size: 21px; } } .portfolio_section_contents_flex_title.taxonomy { font-size: 20px; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex_title.taxonomy { font-size: 17px; } } .portfolio_section_contents_flex_image { display: block; width: 355px; height: 321px; } @media screen and (max-width: 768px) { .portfolio_section_contents_flex_image { width: 169px; height: 153px; } } .portfolio_section_contents_flex_image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .portfolio_section_contents_before_area { width: 45%; } @media screen and (max-width: 768px) { .portfolio_section_contents_before_area { width: 100%; } } .portfolio_section_contents_before_area.taxonomy { width: 50%; } .portfolio_section_contents_before_white { background: #f6f4f0; padding: 10px 20px 20px 5px; } @media screen and (max-width: 768px) { .portfolio_section_contents_before_white { padding: 10px 0 0 0; } } .portfolio_section_contents_before_white.works_single { background: #fff; } .portfolio_section_contents_before_white.taxonomy { background: #fff; padding: 0; } .portfolio_section_contents_before_text { font-size: 12px; padding: 20px; } @media screen and (max-width: 768px) { .portfolio_section_contents_before_text { font-size: 16px; padding: 20px 0 0 0; } } .portfolio_section_contents_before_text.works_single { font-size: 15.5px; } .portfolio_section_contents_after_area { width: 55%; padding: 10px 20px 20px 20px; } @media screen and (max-width: 768px) { .portfolio_section_contents_after_area { width: 100%; padding: 10px 0 0 0; } } .portfolio_section_contents_after_area.taxonomy { width: 50%; padding: 0; } .portfolio_section_contents_bottom_image { width: 31%; } @media screen and (max-width: 768px) { .portfolio_section_contents_bottom_image { width: 100%; margin-top: 10px; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .staff_section { max-width: 860px; margin: auto; padding: 60px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .staff_section { flex-direction: column; padding-top: 30px; max-width: 334px; padding: 30px 0; } } .staff_section_contents { margin-top: 60px; } .staff_section_contents_area { width: 740px; } @media screen and (max-width: 768px) { .staff_section_contents_area { width: 100%; margin-top: 16px; } } .staff_section_contents_text { font-size: 16px; font-family: "NotoSansJpBold"; } .staff_section_contents_member_area { display: flex; gap: 20px; flex-wrap: wrap; } @media screen and (max-width: 768px) { .staff_section_contents_member_area { margin-top: 24px; gap: 13px; } } .staff_section_contents_member_wrapper { width: 160px; } .staff_section_contents_member_image { margin-top: 10px; width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; } .staff_section_contents_member_post { font-family: "NotoSansJpBold"; font-size: 20px; margin-top: 15px; } @media screen and (max-width: 768px) { .staff_section_contents_member_post { font-size: 14px; } } .staff_section_contents_member_name { font-family: "NotoSansJpBold"; font-size: 20px; } @media screen and (max-width: 768px) { .staff_section_contents_member_name { font-size: 16px; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .customers_voice_section { max-width: 860px; margin: auto; padding: 60px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .customers_voice_section { flex-direction: column; padding-top: 30px; max-width: 362px; padding: 30px 0; } } .customers_voice_section_contents { width: 740px; background: #eee7dc; padding: 30px; display: flex; margin-top: 20px; } .customers_voice_section_contents.works_single { width: 100%; margin-top: 10px; } @media screen and (max-width: 768px) { .customers_voice_section_contents.works_single { padding-bottom: 28px; } } @media screen and (max-width: 768px) { .customers_voice_section_contents { flex-direction: column; padding: 14px; padding-bottom: 24px; } } @media screen and (max-width: 768px) { .customers_voice_section_contents { width: 100%; } } .customers_voice_section_contents.top { margin-top: 0; } .customers_voice_section_contents_area { margin-top: 60px; } @media screen and (max-width: 768px) { .customers_voice_section_contents_area { margin-top: 20px; } } .customers_voice_section_contents_image { width: 50%; } @media screen and (max-width: 768px) { .customers_voice_section_contents_image { width: 100%; } } .customers_voice_section_contents_voice { display: flex; flex-direction: column; justify-content: space-between; padding-left: 40px; } @media screen and (max-width: 768px) { .customers_voice_section_contents_voice { display: block; padding: 40px 20px 0 20px; } } @media screen and (max-width: 768px) { .customers_voice_section_contents_voice.work_single { padding: 10px 0 0 0; } } .customers_voice_section_contents_voice_text { font-size: 15px; } @media screen and (max-width: 768px) { .customers_voice_section_contents_voice_text.work_single { font-size: 16px; } } @media screen and (max-width: 768px) { .customers_voice_section_contents_voice_bottom_image { display: none; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .works_section { max-width: 860px; margin: auto; padding: 60px 0 120px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .works_section { flex-direction: column-reverse; padding-top: 30px; max-width: 362px; padding: 30px 0; } } .works_section_movie_area { background: #fff; padding: 20px 30px; position: relative; } @media screen and (max-width: 768px) { .works_section_movie_area { margin-top: 20px; padding: 20px 10px; } } @media screen and (max-width: 768px) { .works_section_movie_area iframe { width: 100%; height: 200px; } } .works_section_movie_text { font-size: 13px; margin-top: 10px; } .works_section_movie_bottom_image { position: absolute; bottom: 0; right: 0; } @media screen and (max-width: 768px) { .works_section_movie_bottom_image { display: none; } } .works_section_movie_bottom_image.boy { width: 352px; bottom: -136px; right: -163px; } .works_section_movie_bottom_image.girl { width: 150px; right: -156px; bottom: -98px; } .column_section { max-width: 860px; margin: auto; padding: 60px 0; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .column_section { flex-direction: column; padding-top: 30px; max-width: 362px; padding: 30px 0; } } .column_section_title_image { width: 159px; margin-top: 80px; } @media screen and (max-width: 768px) { .column_section_title_image { display: none; } } .column_section_contents { display: flex; background: #fff; margin-top: 20px; } .column_section_contents.top { margin-top: 0; } @media screen and (max-width: 768px) { .column_section_contents { padding: 15px 20px 50px 20px; } } .column_section_contents_area { width: 628px; } @media screen and (max-width: 768px) { .column_section_contents_area { width: 100%; margin-top: 20px; } } .column_section_contents_inner { padding: 20px 10px; background: #eee7dc; } @media screen and (max-width: 768px) { .column_section_contents_inner { padding: 0; background: transparent; } } .column_section_contents_image { width: 206px; height: 154.5px; -o-object-fit: cover; object-fit: cover; } .column_section_contents_image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .column_section_contents_image { width: 126px; height: 126px; } } .column_section_contents_text { font-size: 16px; margin-top: 12px; background: linear-gradient( to bottom, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .column_section_contents_text:hover { background: linear-gradient( to bottom, rgb(149, 146, 148) 40%, rgba(149, 146, 148, 0) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width: 768px) { .column_section_contents_text { margin-top: 0; background: initial; color: #000; -webkit-background-clip: initial; -webkit-text-fill-color: initial; font-size: 20px; } } .column_section_contents_text_area { padding: 24px 16px; } @media screen and (max-width: 768px) { .column_section_contents_text_area { padding: 0 0 0 18px; width: 60%; display: flex; flex-direction: column-reverse; justify-content: flex-end; } } .column_section_contents_date { font-size: 12px; line-height: 34px; } @media screen and (max-width: 768px) { .column_section_contents_date { margin-top: 8px; } } .column_section_contents_category { width: 65.3px; font-size: 14px; text-align: center; padding: 4px 0; background: #b5b2b4; color: #ded2bd; } .column_section_contents_category:hover { opacity: 0.7; } @media screen and (max-width: 768px) { .column_section_contents_category { display: none; } } .column_section_contents_more_btn_area { margin-top: 40px; } @media screen and (max-width: 768px) { .column_section_contents_more_btn_area { margin-top: 0; padding: 0 20px 40px 20px; background: #fff; } } .column_section_contents_more_btn_text { font-size: 18px; } @media screen and (max-width: 768px) { .column_section_contents_more_btn_text { display: none; } } .column_section_contents_good_number { font-size: 14px; } .column_section_contents_good_icon { font-size: 16px; color: #e84a43; margin-left: 5px; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } @media screen and (max-width: 768px) { .news_main { padding: 0; } } .news_section { margin: auto; padding: 54px 0 0 0; max-width: 860px; display: flex; justify-content: space-between; align-items: flex-start; } @media screen and (max-width: 768px) { .news_section { padding: 0 0 50px 0; width: 357px; flex-direction: column; align-items: center; } } .news_section_contents { padding: 13px 16px; width: 330px; height: 125px; background-color: #fff; font-size: 14px; font-family: "NotoSansJpMedium"; display: flex; justify-content: space-between; align-items: flex-start; } @media screen and (max-width: 768px) { .news_section_contents { width: 357px; font-size: 20px; } } .news_section_contents_area { width: 675px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } @media screen and (max-width: 768px) { .news_section_contents_area { margin-top: 20px; width: 357px; grid-template-columns: repeat(1, 1fr); grid-gap: 15px; } } .news_section_contents_text { width: 240px; height: 100%; } .news_section_contents_text_title { font-size: 16px; font-family: "NotoSansJpMedium"; color: #2b272a; } .news_section_contents_text_title:hover { color: #b5b2b4; opacity: 0.7; } .news_section_contents_date { margin-top: 10px; font-size: 12px; font-family: "NotoSansJpMedium"; } @media screen and (max-width: 768px) { .news_section_contents_date { font-size: 16px; } } .news_section_contents_img_area { margin: auto; width: 80px; height: 80px; } .news_section_contents_img_area_img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .news { background-color: #f6f4f0; } .news_page { padding: 181px 40px 0 60px; margin: auto; max-width: 1200px; display: flex; gap: 40px; justify-content: space-between; align-items: flex-start; } @media screen and (max-width: 768px) { .news_page { padding: 0 0 50px 0; width: 100%; flex-direction: column; } } .news_page.taxonomy { max-width: 1160px; } .news_page_left_area { width: 100%; max-width: 800px; } @media screen and (max-width: 768px) { .news_page_left_area { width: 100%; } } .news_page_left_area ul { list-style: disc; margin-bottom: 1em; } .news_page_left_area li { font-size: 14px; margin-left: 1em; line-height: 1.5; } .news_page_left_area li::marker { display: block; content: "・"; font-size: 1em; } .news_page_left_area.taxonomy { width: 800px; } @media screen and (max-width: 768px) { .news_page_left_area.taxonomy { width: 100%; } } .news_page_left_contents { padding: 30px; width: 100%; background-color: #e0d4be; } @media screen and (max-width: 768px) { .news_page_left_contents { padding: 60px 30px 30px; } } .news_page_left_contents:not(:first-child) { margin-top: 30px; } .news_page_left_contents.sp_archive { margin: 0; } .news_page_left_contents.sp_archive.not_found { padding: 60px; } .news_page_left_contents.sp_archive.no_search { padding: 180px 60px 240px; } .news_page_left_contents.sp_archive.search { padding: 0; margin: 0 0 20px; display: flex; justify-content: space-between; align-items: center; background-color: transparent; } .news_page_left_contents.sp_archive.search.top { margin-top: 100px; } .news_page_left_contents.sp_archive.top { margin-top: 75px; } .news_page_left_contents_imgTxt_area { display: flex; justify-content: space-between; text-decoration: none !important; } .news_page_left_contents.taxonomy { padding: 0; margin: 30px 0; display: flex; justify-content: space-between; align-items: center; background-color: transparent; } @media screen and (max-width: 768px) { .news_page_left_contents.taxonomy { flex-direction: column; align-items: flex-start; } } .news_page_left_contents.taxonomy:not(:first-child) { margin-top: 0; } .news_page_left_contents_taxonomy_text { width: 435px; } @media screen and (max-width: 768px) { .news_page_left_contents_taxonomy_text { padding: 0 20px; width: 100%; } } .news_page_left_contents_taxonomy_text.search { padding: 0 30px; margin: 0 auto; width: 90%; background-color: #e0d4be; } @media screen and (max-width: 768px) { .news_page_left_contents_taxonomy_text.sp_archive { padding: 0; } } .news_page_left_contents_taxonomy_text a { text-decoration: none !important; } .news_page_left_contents_image { width: 100%; } .news_page_left_contents_image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .news_page_left_contents_image.taxonomy { width: 340px; height: 250px; } .news_page_left_contents_image.taxonomy img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .news_page_left_contents_image.taxonomy { width: 100vw; height: auto; } .news_page_left_contents_image.taxonomy img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } } .news_page_left_contents_image.sp_archive { width: 94px; height: 94px; } .news_page_left_contents_image.sp_archive img { -o-object-fit: cover; object-fit: cover; } .news_page_left_contents_date_area { display: flex; justify-content: space-between; align-items: center; position: relative; } .news_page_left_contents h2.wp-block-heading { margin-top: 1.5em; padding: 10px 0; font-size: 24px; font-family: "NotoSansJpMedium"; color: #2b272a; line-height: 1.2; } @media screen and (max-width: 768px) { .news_page_left_contents h2.wp-block-heading { font-size: 20px; } } .news_page_left_contents h2.wp-block-heading::after { content: ""; width: 100%; height: 4px; background: #925b5b; display: block; } .news_page_left_contents h3.wp-block-heading { font-size: clamp(18px, 20 / 1024 * 100vw, 20px); font-family: "NotoSansJpBold"; padding-left: 14px; position: relative; } .news_page_left_contents h3.wp-block-heading::before { content: ""; height: 100%; width: 4px; background: #925b5b; position: absolute; top: 50%; left: 0; translate: 0 -50%; } .news_page_left_contents p { margin-bottom: 18px; font-size: 15px; font-family: "NotoSansJpRegular"; color: #2b272a; line-height: 2; } .news_page_left_contents p.news_page_left_contents_tag_title { margin-top: 38px; font-size: 14px; font-family: "NotoSansJpRegular"; color: #2b272a; text-align: center; margin-bottom: 12px; text-align: start; } .news_page_left_contents p.news_page_left_contents_text { font-size: 12px; font-family: "NotoSansJpRegular"; } .news_page_left_contents p.news_page_left_contents_text.search { padding-top: 10px; font-size: 21.5px; color: #2b272a; } .news_page_left_contents p.news_page_left_contents_date { margin: 30px 0; font-size: 12px; font-family: "NotoSansJpMedium"; } .news_page_left_contents p.news_page_left_contents_date.search { font-size: 16px; } .news_page_left_contents p.news_page_left_contents_ellipsis { margin: 0; display: block; text-align: right; writing-mode: vertical-rl; position: relative; } .news_page_left_contents p.news_page_left_contents_ellipsis.sp_archive { margin-left: auto; writing-mode: horizontal-tb; } .news_page_left_contents a { font-size: 15px; font-family: "NotoSansJpRegular"; color: #959294; line-height: 27px; text-decoration: underline; } .news_page_left_contents a.news_page_left_contents_tag { padding: 6px 12px; font-size: 14px; color: #3a0404; border: 1px solid #959294; text-align: center; line-height: 17px; } .news_page_left_contents a.news_page_left_contents_tag:hover { border: 1px solid #2b272a; } .news_page_left_contents_title { padding-bottom: 65px; font-size: 26px; font-family: "NotoSansJpMedium"; } .news_page_left_contents_title.taxonomy { padding-bottom: 10px; } .news_page_left_contents_title.sp_archive { padding-bottom: 0; width: 266px; } .news_page_left_contents_title.black { color: #2b272a; } .news_page_left_contents_title.search { font-size: 35px; color: #2b272a; line-height: 35px; padding-bottom: 10px; } .news_page_left_contents_category { margin-bottom: 12px; text-decoration: none !important; } .news_page_left_contents_category:hover { color: #959294; } .news_page_left_contents_category.archive a { display: block; margin-top: 40px; font-size: 14px; font-family: "NotoSansJpRegular"; color: #2b272a; position: relative; bottom: -12px; text-align: right; } .news_page_left_contents_category.archive a::after { content: ""; position: absolute; bottom: 40px; left: 0; width: 100%; height: 1px; background-color: #2b272a; } .news_page_left_contents_category.archive a:hover { color: #d09b58; opacity: 0.7; } .news_page_left_contents_category_area { margin: 100px 0 30px; font-size: 12px; font-family: "NotoSansJpMedium"; color: #2b272a; text-align: right; position: relative; display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } @media screen and (max-width: 768px) { .news_page_left_contents_category_area { text-align: start; align-items: flex-start; flex-direction: column; } .news_page_left_contents_category_area::after { content: ""; position: absolute; bottom: -20px; left: 0; width: 100%; height: 1px; background-color: #2b272a; } } .news_page_left_contents_category_area.on_tag { margin-top: 50px; } @media screen and (max-width: 768px) { .news_page_left_contents_category_area.on_tag { font-size: 12px; margin: 12px 0; } } .news_page_left_contents_category_area a { font-size: 12px; color: #2b272a; } .news_page_left_contents_category_area::before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 2px; background-color: #2b272a; } @media screen and (max-width: 768px) { .news_page_left_contents_category_area::before { display: none; } } .news_page_left_contents_tag { text-decoration: none !important; } .news_page_left_contents_tag_area { display: grid; align-items: center; grid-template-columns: repeat(6, 1fr); gap: 10px; } @media screen and (max-width: 768px) { .news_page_left_contents_tag_area { grid-template-columns: repeat(3, 1fr); } } .news_page_left_contents_tag_title { font-size: 14px; font-family: "NotoSansJpMedium"; color: #2b272a; text-align: center; margin-bottom: 12px; text-align: start; } .news_page_left_contents_sns i { font-size: 18px; margin-right: 30px; } .news_page_left_contents_sns i:hover { color: #10a1ab; } .news_page_left_contents_view_area { padding-bottom: 18px; display: flex; justify-content: space-between; align-items: center; position: relative; border-bottom: 1px solid #2b272a; } @media screen and (max-width: 768px) { .news_page_left_contents_view_area { width: 100%; } } .news_page_left_contents_view_area.search { margin: 50px 0 15px; border-bottom: none; position: relative; } .news_page_left_contents_view_area.search::before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 0.5px; background-color: #959294; } .news_page_left_contents_view_area.sp_archive { justify-content: flex-start; gap: 15px; } .news_page_left_contents_view_count { font-size: 12px; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 768px) { .news_page_left_contents_view_count { font-size: 19px; } } .news_page_left_contents_view_count_icon { margin-right: 6px; position: relative; top: 1px; } .news_page_left_contents_view_count.search { color: #2b272a; } .news_page_left_contents_share { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 100001; } .news_page_left_contents_share_area { padding: 35px 20px 0; width: 100%; height: 195px; background-color: #e0d4be; z-index: 100002; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .news_page_left_contents_share_area.link { height: 287px; } .news_page_left_contents_share_area_items { margin-top: 32px; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; } .news_page_left_contents_share_area_item { width: 50px; height: 50px; font-size: 30px; } @media screen and (max-width: 768px) { .news_page_left_contents_share_area_item { width: 60px; height: 60px; } } .news_page_left_contents_share_area_item_circle { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; } .news_page_left_contents_share_area_item_circle.facebook { background-color: #3b5998; } .news_page_left_contents_share_area_item_circle.twitter { background-color: #55acee; } .news_page_left_contents_share_area_item_circle.linkedin { background-color: #0077b5; } .news_page_left_contents_share_area_item_circle.link { background-color: #333; } .news_page_left_contents_share_area_item_circle_icon { width: 30px; height: 30px; } .news_page_left_contents_share_area_item img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .news_page_left_contents_share_area_btn { width: 177px; height: 54px; font-size: 18.8px; text-align: center; } .news_page_left_contents_share_area_btn.cancel { color: rgb(149, 146, 148); background-color: #e0d4be; border: 1px solid rgb(149, 146, 148); } .news_page_left_contents_share_area_btn.copy { color: #e0d4be; background-color: rgb(149, 146, 148); } .news_page_left_contents_share_area_btn.copy.copied { border: 3px solid rgb(0, 0, 247); } .news_page_left_contents_share_area_btn_area { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; } .news_page_left_contents_share_area_input { margin-top: 35px; width: 100%; height: 54px; font-size: 18.8px; font-family: "NotoSansJpMedium"; line-height: 54px; color: #2b272a; padding: 0 20px; background-color: #e0d4be; border: 1px solid rgb(149, 146, 148); } .news_page_left_contents_share_area_input input { width: 100%; height: 30px; background-color: rgb(149, 146, 148); } .news_page_left_contents_share_title { font-size: 21.5px; font-family: "NotoSansJpMedium"; text-align: center; } .news_page_left_contents_share_btn { width: 200px; height: 55px; background-color: #e0d4be; font-size: 14px; font-family: "NotoSansJpMedium"; color: #2b272a; line-height: 55px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); position: absolute; top: 30px; right: 30px; z-index: 100; display: flex; justify-content: center; align-items: center; gap: 10px; } .news_page_left_contents_share_btn.taxonomy { top: 60px; right: 40px; } .news_page_left_contents_share_close { font-size: 50px; position: absolute; top: 30px; right: 30px; color: #fff; z-index: 100; } .news_page_left_contents_share_link { width: 18px; height: 18px; } .news_page_left_contents_share_link_text { margin: 0 !important; } .news_page_left_contents_select { padding: 0 30px; width: 100%; height: 100%; color: #2b272a; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; left: 0; z-index: 100; } .news_page_left_contents_select_area { margin: 0 0 1px; width: 100%; height: 64.5px; font-size: 16px; font-family: "NotoSansJpMedium"; line-height: 64.5px; background-color: #e0d4be; display: flex; justify-content: space-between; align-items: center; position: relative; } .news_page_left_contents_select_icon { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); } .news_page_left_contents_not_found { font-size: 32px; font-family: "NotoSansJpMedium"; text-align: center; } .news_page_left_contents_not_found_text { padding-top: 10px; font-size: 21.5px !important; font-family: "NotoSansJpMedium"; text-align: center; } .news_page_right_area { width: 225px; } @media screen and (max-width: 768px) { .news_page_right_area { padding: 30px 30px 10px; width: 100%; background-color: #f6f4f0; } } .news_page_right_title { margin: 30px 0 10px; font-size: 20px; font-family: "NotoSansJpMedium"; color: #000; position: relative; } .news_page_right_title::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 100%; height: 5px; background-color: #000; } .news_page_right_contents { margin: 35px auto; padding: 0 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 768px) { .news_page_right_contents { justify-content: center; gap: 20px; } } .news_page_right_contents.taxonomy { margin-bottom: 0; } .news_page_right_contents_image { width: 45px; height: 45px; } @media screen and (max-width: 768px) { .news_page_right_contents_image { width: 60px; height: 60px; } } .news_page_right_contents_image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .news_page_right_contents_title { width: 135px; font-size: 12px; font-family: "NotoSansJpMedium"; color: #000; } .news_page_right_contents_title:hover { color: #959294; opacity: 0.7; } @media screen and (max-width: 768px) { .news_page_right_contents_title { font-size: 14px; width: 190px; } } .news_page_right_contents_category { font-size: 14px; color: #959294; position: relative; left: 80px; } .news_page_right_contents_category:hover { opacity: 0.7; } @media screen and (max-width: 768px) { .news_page_right_contents_category { left: 0; } } .news_page_right_contents_category:hover { opacity: 0.7; } .news_page_right_archive { padding: 10px 0; font-size: 16px; font-family: "NotoSansJpMedium"; } .news_page_right_archive li { padding: 2px 0; } .news_page_right_tag { padding: 10px 0; font-size: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media screen and (max-width: 768px) { .news_page_right_tag { grid-template-columns: repeat(4, 1fr); } } .news_page_right_tag li:hover { color: #959294; opacity: 0.7; } .news_page_right_sns { padding: 10px 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } .blog_contact_button a:first-child { display: block; padding: 12px; margin: 0 auto; width: 194px; font-size: 14px; font-family: "NotoSansJpMedium"; color: #000000; background-color: #fff; border: 3px solid rgb(132, 24, 32); } .pagination { padding: 20px 0 35px; font-size: 13px; font-family: "NotoSansJpRegular"; display: flex; justify-content: center; align-items: center; gap: 30px; } @media screen and (max-width: 768px) { .pagination { padding: 10px 0 35px; background-color: #e0d4be; font-size: 20px; gap: 50px; } } @media screen and (max-width: 768px) { .pagination.is_category { background-color: #f6f4f0; } } .current { font-family: "NotoSansJpRegular"; color: #959294; } @media screen and (max-width: 768px) { .current { color: #000; } } .first_jump.disabled, .prev.disabled, .next.disabled, .last_jump.disabled { pointer-events: none; color: #959294; } .site_main_blog { padding-top: 30px; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .top_contact-form_wrap { background: #fff; width: 90%; padding: 24px 64px 24px 32px; } @media screen and (min-width: 768px) { .top_contact-form_wrap { margin-right: 24px; } } .contact_section { padding: 80px 0; max-width: 880px; margin: auto; display: flex; justify-content: space-between; align-items: flex-start; } .contact_section_require { font-size: 6px; position: relative; top: -8px; } .contact_section_form_area { padding: 54px 65px; width: 630px; height: 644px; background-color: #fff; } .contact_section_form_area.page { padding: 30px 0 0; width: 100%; height: auto; background-color: transparent; } .contact_section_form_name { width: 240px; height: 45px; } .contact_section_form_name_area { width: 100%; display: flex; justify-content: space-between; align-items: center; } .contact_section_form_name_area.page { width: 100%; } @media screen and (max-width: 768px) { .contact_section_form_name_area.page { height: 67px; } } .contact_section_form_name_area.page span { width: 100%; } @media screen and (max-width: 768px) { .contact_section_form_name_area.page span { height: 67px; } } @media screen and (max-width: 768px) { .contact_section_form_name_area.page { height: 67px; } } .contact_section_form_name_label { width: 240px; font-size: 16px; font-family: "NotoSansJpBold"; } .contact_section_form_name_input { margin-top: 2px; padding: 0 10px; width: 240px; height: 45px; background-color: #f2efe9; font-size: 16px; } .contact_section_form_name_input:not(.page) { background-color: #ddd; border-radius: 2px; } .contact_section_form_name_input:hover { background-color: #f2efe9; } .contact_section_form_name_input:nth-child(2) { margin-left: auto; } .contact_section_form_name_input.page { width: 100%; } @media screen and (max-width: 768px) { .contact_section_form_name_input.page { height: 67px; font-size: 22px; } } .contact_section_form_name_input.hidden { display: none; } .contact_section_form_label { font-size: 16px; font-family: "NotoSansJpBold"; } .contact_section_form_input { margin-top: 2px; padding: 0 10px; width: 100%; height: 45px; background-color: #f2efe9; font-size: 16px; } .contact_section_form_input:not(.page) { background-color: #ddd; border-radius: 2px; } .contact_section_form_input:hover { background-color: #f2efe9; } @media screen and (max-width: 768px) { .contact_section_form_input { height: 67px; font-size: 22px; } } .contact_section_form_textarea { margin-top: 2px; padding: 10px; width: 100%; height: 120px; background-color: #f2efe9; font-size: 16px; } .contact_section_form_textarea:not(.page) { background-color: #ddd; border-radius: 2px; } .contact_section_form_textarea:hover { background-color: #f2efe9; } @media screen and (max-width: 768px) { .contact_section_form_textarea { font-size: 22px; } } .contact_section_form_submit { margin-inline: auto; width: clamp(300px, 400 / 1024 * 100vw, 400px); height: 64px; background-color: #333; font-size: 16px; font-family: "NotoSansJpBold"; text-align: center; color: #fff; } .contact_section_form_submit input:hover { cursor: pointer; } .contact_section_form_email, .contact_section_form_tel, .contact_section_form_message { padding-top: 30px; } .contact_section_form_email.page, .contact_section_form_tel.page, .contact_section_form_message.page { padding-top: 2px; } @media screen and (max-width: 768px) { .contact_section_form_email.page, .contact_section_form_tel.page, .contact_section_form_message.page { padding-top: 0; margin-top: 20px; } } @media screen and (max-width: 768px) { .contact_section_form_email, .contact_section_form_tel { height: auto; } } @media screen and (max-width: 768px) { .contact_section_form_message { height: 120px; } } .contact_section_form_submit { margin-top: 30px; display: block; } @media screen and (max-width: 768px) { .contact_section_form_submit { height: 51px; font-size: 22px; } } .contact_page_inner { padding: 60px 0 30px 0; } @media screen and (max-width: 768px) { .contact_page_inner { width: 362px; margin: auto; background: #fff; padding: 30px 10px; } } .contact_page_contents_area { display: flex; justify-content: space-between; align-items: flex-start; } .contact_page_contents_form { width: 600px; } @media screen and (max-width: 768px) { .contact_page_contents_form { width: 100%; } } .contact_page_contents_info { margin-top: 30px; width: 240px; } .contact_page_contents_info_title { font-size: 20px; font-family: "NotoSansJpBold"; } .contact_page_contents_info_text { font-size: 16px; white-space: nowrap; } .contact_page_contents_info a { color: #333; text-decoration: underline; } .wpcf7-not-valid-tip { font-size: 16px; } .wpcf7-response-output { display: none !important; } .wpcf7-not-valid { border: 1px solid red !important; } /* ============================================== -------- 202404 ============================================== */ :root { --current-color: #d09b56; --step-item-width: 4em; --step-item-corner: 2em; --step-border-width: 2px; } .lower_page_title { } .contact_page_title { font-size: 18px; } .contact_page_title span { display: block; font-size: 40px; text-transform: uppercase; } .advice_service { } .contact_page_top_message { margin-top: 32px; font-size: 16px; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-weight: normal; } .contact_page_contents_form:has(.input_area) { width: 100%; max-width: 860px; } .form-step { margin-top: 32px; max-width: 800px; display: flex; flex-direction: column; } @media screen and (min-width: 768px) { .form-step { border: var(--step-border-width) solid var(--current-color); flex-direction: row; justify-content: center; } } .form-step_item { width: 100%; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; height: var(--step-item-width); position: relative; z-index: 1; } @media screen and (min-width: 768px) { .form-step_item { width: calc(100% / 3); flex-shrink: 0; } } .form-step_item:first-child { z-index: 3; } .form-step_item:nth-child(2) { z-index: 2; } .form-step_item:last-child { z-index: 1; } .form-step_item:not(:first-child)::before { content: ""; display: block; margin-inline: auto; border: 15px solid; border-color: #eee7dc transparent transparent transparent; position: absolute; left: 50%; top: 0; translate: -50% 0%; } @media screen and (min-width: 768px) { .form-step_item:not(:first-child)::before { border: none; margin-inline: inherit; left: auto; top: auto; translate: var(--step-border-width) 0%; } .form-step_item::before, .form-step_item::after { box-sizing: content-box; width: 3em; aspect-ratio: 10/9; content: ""; position: absolute; right: calc(-1 * var(--step-item-corner)); z-index: 10; top: 50%; } .form-step_item::before { translate: var(--step-border-width) 0; height: calc(100% + var(--step-border-width) * 2); clip-path: polygon( 0% 0%, calc(100% - var(--step-item-corner)) 0%, 100% 50%, calc(100% - var(--step-item-corner)) 100%, 0% 100% ); background: var(--current-color); translate: var(--step-border-width) -50%; } .form-step_item::after { height: 100%; clip-path: polygon( 0% 0%, calc(100% - var(--step-item-corner)) 0%, calc(100% - var(--step-border-width)) 50%, calc(100% - var(--step-item-corner)) 100%, 0% 100% ); background: #fff; translate: calc(var(--step-border-width) / 2) -50%; } .form-step_item__current::after { background: var(--current-color); } } .form-step_item__current { background: var(--current-color); color: #fff; } .input_area .contact_section_form_area div:not(:first-child) { margin-top: 40px; } .contact_section_form-title { font-size: clamp(16px, 18 / 1024 * 100vw, 18px); display: flex; align-items: center; gap: 12px; } .contact_section_form-title:has(.acceptance_link) { gap: 0; } .form-tag { white-space: nowrap; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 4px 8px; background-color: #ddd; } .form-tag.__required { background-color: #d19d59; color: #fff; } .input_area input, .input_area .wpcf7-list-item-label, .input_area textarea { font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-weight: normal; } input { appearance: auto; } @media screen and (min-width: 768px) { input.__sm { max-width: 360px; } } .wpcf7-radio, .wpcf7-checkbox { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .wpcf7-list-item { font-size: 16px; } .wpcf7-list-item input { display: inline-block; vertical-align: middle; scale: 1.5; margin-right: 6px; } ::placeholder { font-size: clamp(14px, 16 / 1024 * 100vw, 16px); color: #b5b2b4; font-weight: normal; } .privacy-box { border: 1px #bbb solid; padding: 32px; height: 200px; overflow-y: scroll; } .privacy-box h3 { font-size: 20px; } .privacy-box h4 { margin-top: 32px; font-size: 16px; } .privacy-box p { font-size: 14px; line-height: 1.8; } .acceptance { display: flex; flex-direction: row-reverse; justify-content: center; } .confirm_area { display: none; margin-top: 40px; } .confirm_area h3 { font-weight: bold; font-size: 20px; margin-bottom: 1em; } .confirm_area p:first-child { margin-bottom: 3em; } .confirm_area p { font-size: 16px; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-weight: normal; font-weight: normal; margin-bottom: 16px; } .confirm_area span { display: inline-block; font-weight: bold; } input:disabled { cursor: not-allowed !important; } .back_button.contact_section_form_submit { background-color: #ccc; color: #333; margin-top: 8px; } /* ---------- 202404 ---------- */ .contact_thanks_page { padding: 280px 0 80px; margin: auto; width: 100%; max-width: 860px; } @media screen and (max-width: 768px) { .contact_thanks_page { padding: 120px 0 50px; } } .contact_thanks_page_contents_info_text { margin-top: 40px; font-size: 16px; font-family: "NotoSansJpMedium"; text-align: center; white-space: nowrap; } .contact_thanks_page_contents_info_text.big { font-size: 20px; font-family: "NotoSansJpBold"; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } footer { width: 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } .footer { background-color: #fff; max-width: 860px; margin: auto; padding: 25px 15px 35px 0; /* display: flex; */ justify-content: space-between; align-items: center; } @media screen and (max-width: 768px) { .footer { max-width: 362px; padding: 0; } } .footer_top_area { width: 90%; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } @media screen and (min-width: 1024px) { .footer_top_area { width: 100%; margin: 0; flex-direction: row; align-items: end; justify-content: space-between; } } .footer_top_area_flexitem { flex-shrink: 0; } .footer_tel { } @media screen and (min-width: 768px) { .footer_tel { max-width: 220px; } } .footer_tel_link { display: inline-block; margin-bottom: 10px; } @media screen and (min-width: 1024px) { .footer_tel_link { max-width: 180px; } } .footer_contact_btn_link.contact { width: 80%; display: block; margin-inline: auto; } @media screen and (min-width: 1024px) { .footer_contact_btn_link.contact { margin-inline: 0; } } .footer_jaccs_logo { max-width: 180px; } .footer_left_area_link { display: block; height: 71px; position: relative; left: -15px; } @media screen and (max-width: 768px) { .footer_left_area_link { margin-top: 10px; left: 0; } } .footer_left_area_link img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .footer_left_area_text { padding-left: 5px; font-size: 15px; font-family: "NotoSansJpBold"; white-space: nowrap; width: fit-content; } @media screen and (max-width: 768px) { .footer_left_area_text { padding-left: 0; width: fit-content; } } .footer_left_area_tell { font-size: 9px; font-family: "NotoSansJpBold"; display: flex; align-items: center; gap: 2px; } .footer_left_area_copy { font-size: 12px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .footer_left_area_copy { margin-top: 10px; } } .footer_left_area_privacy { font-size: 6px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .footer_left_area_privacy { font-size: 10px; font-family: "NotoSansJpMedium"; padding-top: 10px; padding-bottom: 80px; } } .footer_bottom_area { margin-top: 48px; margin-bottom: 30px; width: 90%; margin-inline: auto; } @media screen and (max-width: 768px) { .footer_bottom_area { } } @media screen and (min-width: 1024px) { .footer_bottom_area { width: 100%; display: flex; gap: 64px; } } .footer_map_wrap { display: none; max-width: 300px; aspect-ratio: 3/2; flex-shrink: 0; } @media screen and (min-width: 1024px) { .footer_map_wrap { display: block; } } .footer_bottom_area iframe { width: 100%; height: 100%; aspect-ratio: 3/2; } .footer_bottom_inner { width: 100%; } .footer_nav_list_group { display: flex; flex-direction: column; gap: 2em; } @media screen and (min-width: 1024px) { .footer_nav_list_group { display: flex; width: 100%; flex-direction: row; justify-content: space-between; } } .footer_nav_list_col { } .footer_nav_list__sp { display: flex; justify-content: space-between; } @media screen and (min-width: 1024px) { .footer_nav_list__sp { display: contents; } } .footer_nav_head { font-family: "NotoSansJpBold"; font-weight: bold; font-size: 14px; margin-bottom: 0.5em; } @media screen and (min-width: 1024px) { .footer_nav_head { margin-bottom: 2em; } } .footer_nav_list { display: flex; flex-direction: column; } @media screen and (min-width: 1024px) { .footer_nav_list { gap: 1em; } } .footer_nav_item { font-family: "NotoSansJpRegular"; font-size: 14px; } .footer_nav_link { display: inline-block; height: 100%; } @media (hover: hover) { .footer_nav_link:hover { text-decoration: underline; } } .footer_insta_link { margin-top: 1em; display: flex; align-items: center; gap: 8px; font-size: 13px; } @media (hover: hover) { .footer_insta_link:hover { text-decoration: underline; } } .footer_insta_icon { aspect-ratio: 1; width: 24px; height: 24px; object-fit: cover; } @media (hover: hover) { .footer_insta_link:hover .footer_insta_icon { opacity: 0.6; } } .company_page_section { width: 806px; margin: auto; } @media screen and (max-width: 768px) { .company_page_section { background: #fff; width: 362px; padding: 0 14px; } } .company_page_section.top { padding-top: 68px; } @media screen and (max-width: 768px) { .company_page_section.top { padding-top: 20px; } } .company_page_section_philosophy_area { display: flex; justify-content: space-between; padding-bottom: 30px; } @media screen and (max-width: 768px) { .company_page_section_philosophy_area { padding-bottom: 150px; } } .company_page_section_philosophy_text { width: 540px; font-size: 16px; white-space: pre-line; } @media screen and (max-width: 768px) { .company_page_section_philosophy_text { width: 100%; font-size: 14px; } } .company_page_section_philosophy_image { position: absolute; } .company_page_section_philosophy_image.father { width: 187px; bottom: 0; left: 0; } .company_page_section_philosophy_image.boy { width: 128px; height: 132px; bottom: 10px; right: 0; } .company_page_section_philosophy_image_area { position: relative; width: 266px; height: 187px; margin-top: 64px; } .company_page_section_about_area { width: 675px; padding: 40px 0; } @media screen and (max-width: 768px) { .company_page_section_about_area { width: 100%; padding: 40px 0 0 0; } } .company_page_section_about_contents { width: 506px; margin-left: auto; display: flex; border-bottom: 1px dashed #d1ccd0; padding: 0 0 20px 5px; margin-top: 20px; } @media screen and (max-width: 768px) { .company_page_section_about_contents { width: 100%; flex-direction: column; border-bottom: none; } } .company_page_section_about_contents.company { margin-top: 0; padding-bottom: 10px; } .company_page_section_about_contents.last { border-bottom: none; } .company_page_section_about_label { width: 196px; font-size: 16px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .company_page_section_about_label { width: 100%; font-size: 18px; border-bottom: 8px solid #e8e6e8; margin-bottom: 10px; } } .company_page_section_about_data { width: 310px; font-size: 16px; } @media screen and (max-width: 768px) { .company_page_section_about_data { font-size: 13px; } } .company_page_section_about_data_link { text-decoration: underline; } .company_page_section_history_area { padding: 40px 0 60px 0; } @media screen and (max-width: 768px) { .company_page_section_history_area { padding: 40px 0 0 0; } } .company_page_section_history_contents { display: flex; font-size: 16px; font-family: "NotoSansJpBold"; padding-bottom: 60px; } .company_page_section_history_contents.last { padding-bottom: 120px; } @media screen and (max-width: 768px) { .company_page_section_history_contents_year { font-size: 18px; } } .company_page_section_history_contents_wrapper { padding-top: 100px; display: flex; align-items: flex-end; justify-content: space-between; white-space: nowrap; } @media screen and (max-width: 768px) { .company_page_section_history_contents_wrapper { padding-top: 20px; } } .company_page_section_history_contents_left_area { width: 420px; } @media screen and (max-width: 768px) { .company_page_section_history_contents_left_area { width: 100%; } } @media screen and (max-width: 768px) { .company_page_section_history_contents_text { white-space: normal; width: 300px; } } .company_page_section_history_contents_circle { position: relative; margin: 0 20px; } @media screen and (max-width: 768px) { .company_page_section_history_contents_circle { color: transparent; margin: 0 10px; } } .company_page_section_history_contents_circle.top::after { content: ""; width: 3px; height: 454px; background: #000; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 768px) { .company_page_section_history_contents_circle.top::after { width: 1px; top: 0; } } @media screen and (max-width: 768px) { .company_page_section_history_contents_circle.top::before { content: "▼"; position: absolute; bottom: -420px; color: #000; } } .company_page_section_history_contents_right_area { width: 361px; } .company_page_section_history_contents_right_image { width: 100%; } .company_page_section_ceo_greeting_area { display: flex; justify-content: space-between; padding: 40px 0 80px 0; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_area { flex-direction: column-reverse; padding-top: 30px; } } .company_page_section_ceo_greeting_text_area { width: 48%; font-size: 16px; display: flex; flex-direction: column; justify-content: space-between; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_text_area { width: 100%; font-size: 14px; } } .company_page_section_ceo_greeting_text_headline { font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_text_headline { margin-top: 20px; } } .company_page_section_ceo_greeting_text_content { width: 505px; font-size: 17px; line-height: 34px; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_text_content { margin-top: 30px; width: 100%; font-size: 15px; line-height: 30px; } } .company_page_section_ceo_greeting_text_name_area { margin-top: 20px; width: 505px; font-size: 17px; text-align: right; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_text_name_area { width: 100%; font-size: 14px; text-align: left; } } .company_page_section_ceo_greeting_image { width: 100%; } .company_page_section_ceo_greeting_image_area { width: 261px; height: 258px; } @media screen and (max-width: 768px) { .company_page_section_ceo_greeting_image_area { margin: auto; width: 241px; height: 239px; } } .business_guide_page_inner { max-width: 804px; margin: auto; padding-bottom: 140px; } @media screen and (max-width: 768px) { .business_guide_page_inner { width: 362px; background: #fff; padding: 0 10px; } } .business_guide_page_section { padding-top: 68px; } @media screen and (max-width: 768px) { .business_guide_page_section.top { padding-top: 20px; } } .business_guide_page_work_area { display: flex; justify-content: space-between; margin-top: 20px; } @media screen and (max-width: 768px) { .business_guide_page_work_area.bottom { padding-bottom: 60px; } } @media screen and (max-width: 768px) { .business_guide_page_work_area { flex-direction: column-reverse; } } .business_guide_page_work_text { width: 405px; font-size: 16px; margin-left: 5px; } @media screen and (max-width: 768px) { .business_guide_page_work_text { font-size: 17.5px; width: 100%; margin-top: 10px; } } .business_guide_page_work_image { width: 100%; } .business_guide_page_work_image_area { width: 367px; } @media screen and (max-width: 768px) { .business_guide_page_work_image_area { width: 100%; } } .business_guide_page_step_area { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px; gap: 75px; } @media screen and (max-width: 768px) { .business_guide_page_step_area { flex-direction: column; gap: 0; margin-top: 0; } } .business_guide_page_step_contents { width: 193px; } @media screen and (max-width: 768px) { .business_guide_page_step_contents { width: 100%; margin-top: 20px; } } .business_guide_page_step_number { letter-spacing: 0.01em; font-size: 68px; font-family: "NotoSansJpBold"; color: #d09b57; line-height: 1; } @media screen and (max-width: 768px) { .business_guide_page_step_number { font-size: 42px; } } .business_guide_page_step_title { font-size: 22px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .business_guide_page_step_title { font-size: 20px; } } .business_guide_page_step_image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .business_guide_page_step_image_area { width: 166px; height: 166px; margin-top: 10px; } @media screen and (max-width: 768px) { .business_guide_page_step_image_area { width: 140px; height: 140px; margin: auto; margin-top: 0; } } .business_guide_page_step_content { margin-top: 10px; font-size: 16px; } @media screen and (max-width: 768px) { .business_guide_page_step_content { font-size: 17px; } } .business_guide_page_step_bottom_area { padding: 70px 0 60px 0; } @media screen and (max-width: 768px) { .business_guide_page_step_bottom_area { padding: 50px 0 20px 0; } } .business_guide_page_step_bottom_text { font-size: 18px; } .business_guide_page_step_bottom_link { color: #d09b57; text-decoration: underline; } .business_guide_page_contents_image { margin-top: 1em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } @media screen and (min-width: 1024px) { .business_guide_page_contents_image { flex-direction: row; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .advice_service_page_inner { padding: 60px 0 30px 0; } @media screen and (max-width: 768px) { .advice_service_page_inner { width: 362px; margin: auto; background: #fff; padding: 30px 10px; } } .advice_service_page_contents_area { margin-top: 30px; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .advice_service_page_contents_area { margin-top: 10px; flex-direction: column-reverse; } } .advice_service_page_contents_area.bottom { padding-bottom: 80px; } @media screen and (max-width: 768px) { .advice_service_page_contents_area.bottom { margin-top: 30px; flex-direction: column; padding-bottom: 20px; } } .advice_service_page_contents_image { width: 100%; } .advice_service_page_contents_image_area { width: 412px; } @media screen and (max-width: 768px) { .advice_service_page_contents_image_area { width: 100%; } } .advice_service_page_contents_image_area.bottom { width: 363.9px; } @media screen and (max-width: 768px) { .advice_service_page_contents_image_area.bottom { width: 100%; } } .advice_service_page_contents_text { font-size: 16px; width: 421px; } @media screen and (max-width: 768px) { .advice_service_page_contents_text { font-size: 17px; margin-top: 5px; width: 100%; } } .advice_service_page_contents_text.bottom { width: 453.9px; } @media screen and (max-width: 768px) { .advice_service_page_contents_text.bottom { width: 100%; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .selection_point_page_inner { padding: 60px 0 30px 0; } @media screen and (max-width: 768px) { .selection_point_page_inner { width: 100%; margin: auto; padding: 0; } } .selection_point_page_title_area { padding: 0 60px; } @media screen and (max-width: 768px) { .selection_point_page_title_area { width: 362px; margin: auto; background: #fff; padding: 30px 10px; } } .selection_point_page_title_area_inner { background: #fff; } @media screen and (max-width: 768px) { .selection_point_page_title_area_inner { background: #fff; } } .selection_point_page_title_text { font-size: 16px; margin-top: 20px; } .selection_point_page_contents { display: flex; justify-content: space-between; margin-top: 60px; } @media screen and (max-width: 768px) { .selection_point_page_contents { padding-top: 60px; margin-top: 0; background: #fff; flex-direction: column; width: 100%; } } @media screen and (max-width: 768px) { .selection_point_page_contents.reverse { flex-direction: column-reverse; } } @media screen and (max-width: 768px) { .selection_point_page_contents.top { padding-top: 0; } } .selection_point_page_contents.bottom { padding-bottom: 80px; } .selection_point_page_contents_image { width: 100%; } .selection_point_page_contents_image_area { width: 490px; } @media screen and (max-width: 768px) { .selection_point_page_contents_image_area { width: 100%; } } .selection_point_page_contents_title { font-size: 22px; font-family: "NotoSansJpBold"; margin-top: 20px; } .selection_point_page_contents_text { font-size: 16px; margin-top: 20px; } .selection_point_page_contents_text_area { width: 402.9px; } @media screen and (max-width: 768px) { .selection_point_page_contents_text_area { width: 100%; padding: 0 30px; } } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .faq_page_inner { padding: 60px 0 30px 0; } @media screen and (max-width: 768px) { .faq_page_inner { width: 362px; margin: auto; background: #fff; padding: 30px 10px; } } .faq_page_subtitle { font-size: 16px; margin-top: 5px; } .faq_page_mokuji_area { border: 1px solid #d1ccd0; width: 337.7px; margin-top: 30px; padding: 10px 20px 20px 20px; font-size: 16px; } .faq_page_mokuji_title { font-family: "NotoSansJpBold"; } .faq_page_mokuji_list { padding-left: 20px; } .faq_page_mokuji_list_item { margin-top: 10px; } .faq_page_mokuji_list_link:hover { transition: 0.3s; color: #d1ccd0; } .faq_page_contents { margin-top: 60px; border-bottom: 1px solid #000; padding-bottom: 60px; } @media screen and (max-width: 768px) { .faq_page_contents { margin-top: 30px; border-bottom: none; padding-bottom: 20px; } } .faq_page_contents.last { border-bottom: none; padding-bottom: 0; } .faq_page_contents_wrapper { padding: 30px 0 80px 0; } @media screen and (max-width: 768px) { .faq_page_contents_wrapper { padding-bottom: 200px; } } .faq_page_contents_title { font-size: 20px; font-family: "NotoSansJpBold"; display: flex; } @media screen and (max-width: 768px) { .faq_page_contents_title { font-size: 22px; align-items: flex-start; } } .faq_page_contents_icon { width: 30.9px; margin-right: 10px; } @media screen and (max-width: 768px) { .faq_page_contents_icon { width: 50px; padding-left: 10px; margin-top: 5px; } } .faq_page_faq_area { font-size: 16px; padding: 50px 0 0 20px; } @media screen and (max-width: 768px) { .faq_page_faq_area { background: #f6f4f0; padding: 10px 10px 20px 2px; margin-top: 20px; font-size: 17px; } } .faq_page_faq_area.top { padding-top: 40px; } @media screen and (max-width: 768px) { .faq_page_faq_area.top { padding-top: 10px; } } .faq_page_faq_icon { font-family: "Helvetica"; font-size: 20px; margin-right: 15px; } @media screen and (max-width: 768px) { .faq_page_faq_icon { font-size: 24px; } } .faq_page_faq_text { display: flex; } .faq_page_faq_text.answer { margin-top: 20px; } .faq_page_faq_text_right { max-width: 632.9px; } .works_page_inner { padding: 60px 34px 30px 34px; } @media screen and (max-width: 768px) { .works_page_inner { background: #fff; padding: 30px 10px; margin: auto; width: 362px; } } .works_page_content_text { display: block; font-size: 18px; margin-top: 10px; } @media screen and (max-width: 768px) { .works_page_content_text { font-size: 13.5px; } } .works_page_content_text.works_archive { font-size: 16px; } @media screen and (max-width: 768px) { .works_page_content_text.works_archive { font-size: 16px; } } .works_page_content_text.works_archive.bottom { margin-top: 40px; margin-bottom: -20px; } .works_page_contents { background: #f6f4f0; margin-top: 30px; padding: 10px 20px 20px 20px; } .works_page_contents_area { padding-bottom: 30px; } @media screen and (max-width: 768px) { .works_page_contents_area { padding-bottom: 0; } } .works_page_contents_title { font-size: 24px; font-family: "NotoSansJpBold"; display: flex; } @media screen and (max-width: 768px) { .works_page_contents_title { font-size: 20px; } } .works_page_contents_title .preparation { font-size: 0.7em; margin-left: 0.5em; padding: 0 8px; color: #e0d4be; background: #8b8885; display: flex; align-items: center; justify-content: center; } .works_page_contents_image { width: 278px; } @media screen and (max-width: 768px) { .works_page_contents_image { width: 100%; margin-top: 10px; } } .works_page_contents_image_area { margin-top: 10px; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .works_page_contents_image_area { margin-top: 0; flex-direction: column; } } .works_single_page_inner { padding: 60px 0; } @media screen and (max-width: 768px) { .works_single_page_inner { background: #fff; padding: 20px 10px 60px 10px; margin: auto; width: 362px; } } .works_single_page_inner.taxonomy { padding: 0; } @media screen and (max-width: 768px) { .works_single_page_inner.taxonomy { padding: 0; width: 100%; } } .works_single_page_questionnaire_area { margin-top: 80px; } @media screen and (max-width: 768px) { .works_single_page_questionnaire_area { margin-top: 60px; } } .works_single_page_questionnaire_title { font-size: 18px; font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .works_single_page_questionnaire_title { font-size: 22px; border-bottom: 1px solid #282626; } } .works_single_page_data_area { margin-top: 60px; } .works_single_page_data_title { font-size: 18px; font-family: "NotoSansJpBold"; display: flex; align-items: center; } .works_single_page_data_title::after { content: ""; display: block; height: 1px; width: 100%; background: #000; margin-left: 10px; } @media screen and (max-width: 768px) { .works_single_page_data_title { font-size: 20px; } } .works_single_page_data_table_area { display: flex; justify-content: space-between; flex-wrap: wrap; } .works_single_page_data_table_contents { font-size: 16px; display: flex; width: 421px; border-bottom: 1px dashed #d1ccd0; padding: 40px 0 40px 5px; } @media screen and (max-width: 768px) { .works_single_page_data_table_contents { font-size: 18px; width: 100%; padding: 20px 0 20px 0; } } .works_single_page_data_table_label { font-family: "NotoSansJpBold"; width: 143px; } @media screen and (max-width: 768px) { .works_single_page_data_table_label { width: 50%; } } .works_single_page_data_table_data { width: 288px; } @media screen and (max-width: 768px) { .works_single_page_data_table_data { width: 50%; } } .works_archive_contents { border: 1px solid #d1ccd0; width: 49%; padding: 25px; margin-bottom: 2%; } @media screen and (max-width: 768px) { .works_archive_contents { width: 100%; padding: 10px 15px; } } .works_archive_contents_inner { padding: 60px 0; } @media screen and (max-width: 768px) { .works_archive_contents_inner { background: #fff; padding: 20px 0; margin: auto; width: 362px; } } .works_archive_contents_inner_top { width: 800px; max-width: 800px; margin: auto; } @media screen and (max-width: 768px) { .works_archive_contents_inner_top { width: 100%; } } .works_archive_contents_area { padding-top: 40px; } .works_archive_contents_area.taxonomy { padding-top: 0; } .works_archive_contents_wrapper { margin-top: 5px; display: flex; gap: 2%; flex-wrap: wrap; } @media screen and (max-width: 768px) { .works_archive_contents_wrapper { flex-direction: column; gap: 0; } } .works_archive_contents_image { width: 100%; height: 366px; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .works_archive_contents_image { height: 300px; } } .works_archive_contents_title { font-family: "NotoSansJpBold"; font-size: 22px; margin-top: 10px; } @media screen and (max-width: 768px) { .works_archive_contents_title { margin-top: 5px; font-size: 18px; } } .works_archive_other_category_area { padding: 60px 0; width: 100%; display: flex; } @media screen and (max-width: 768px) { .works_archive_other_category_area { flex-direction: column; position: relative; left: 50%; transform: translateX(-50%); width: 100vw; padding: 100px 0; background: #fff; } } .works_archive_other_category_contents { display: flex; width: 50%; } @media screen and (max-width: 768px) { .works_archive_other_category_contents { width: 100%; flex-direction: column; } } .works_archive_other_category_contents_image { width: 50%; } @media screen and (max-width: 768px) { .works_archive_other_category_contents_image { width: 100%; } } .works_archive_other_category_contents_title { font-size: 22px; font-family: "NotoSansJpBold"; height: 64px; margin-bottom: 60px; } @media screen and (max-width: 768px) { .works_archive_other_category_contents_title { font-size: 24px; margin: 0; height: auto; } } .works_archive_other_category_contents_text { font-size: 18px; } @media screen and (max-width: 768px) { .works_archive_other_category_contents_text { margin-top: 20px; font-size: 20px; } } .works_archive_other_category_contents_text_area { width: 50%; display: flex; flex-direction: column; justify-content: center; text-align: center; } @media screen and (max-width: 768px) { .works_archive_other_category_contents_text_area { padding: 20px 0 30px 0; width: 100%; background: #fff; } } .works_archive_other_category_contents_btn { display: block; width: 68%; margin: 10px auto 0 auto; background: #000; font-size: 16px; color: #fff; padding: 8px 0; cursor: pointer; transition: all 0.3s; } .works_archive_other_category_contents_btn:hover { color: #e0d4be; } @media screen and (max-width: 768px) { .works_archive_other_category_contents_btn { width: 55%; font-size: 17px; padding: 10px 0; margin-top: 20px; } } .works_archive_bottom_banner_area { padding: 0 20px; } .questionnaire_page_inner { max-width: 980px; margin: auto; padding-bottom: 60px; } @media screen and (max-width: 768px) { .questionnaire_page_inner { width: 334px; margin: auto; overflow: hidden; } } .questionnaire_page_contents.slider { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #e0d4be; z-index: 1000000; } .questionnaire_page_contents_area { padding: 0 20px; margin: auto; padding-top: 20px; } @media screen and (max-width: 768px) { .questionnaire_page_contents_area { padding: 20px 0; } } .questionnaire_page_contents_text { font-size: 18px; margin-top: 10px; } .questionnaire_page_contents_text strong { font-family: "NotoSansJpBold"; } @media screen and (max-width: 768px) { .questionnaire_page_contents_text { font-size: 15px; } } .questionnaire_page_contents_text.slider { display: none; } .questionnaire_page_contents_image_area { display: flex; flex-wrap: wrap; gap: 30px; padding: 20px 10px 0 10px; height: 3600px; overflow: hidden; } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area .slick-prev { left: -10px; width: 80px; height: 80px; border-radius: 9999px; z-index: 10; } .questionnaire_page_contents_image_area .slick-prev::before { content: ""; display: block; margin: auto; width: 40px; height: 40px; background: url(../images/common/sp_slick_arrow_left.svg) no-repeat center center; background-size: contain; } .questionnaire_page_contents_image_area .slick-prev.full_screen { background: #efe9de; } .questionnaire_page_contents_image_area .slick-prev.slick-disabled { cursor: default; opacity: 0; } } .questionnaire_page_contents_image_area .slick-next { right: -10px; width: 80px; height: 80px; border-radius: 9999px; z-index: 10; } .questionnaire_page_contents_image_area .slick-next::before { content: ""; display: block; margin: auto; width: 40px; height: 40px; background: url(../images/common/sp_slick_arrow_right.svg) no-repeat center center; background-size: contain; } .questionnaire_page_contents_image_area .slick-next.full_screen { background: #efe9de; } .questionnaire_page_contents_image_area .slick-next.slick-disabled { cursor: default; opacity: 0; } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area { padding: 20px; height: auto; } } .questionnaire_page_contents_image_area.open { height: auto; overflow: visible; } @media screen and (min-width: 769px) { .questionnaire_page_contents_image_area.list figure { width: 133px !important; } } .questionnaire_page_contents_image_area figure { cursor: pointer; position: relative; } .questionnaire_page_contents_image_area.slider { height: 820px; width: 1340px; padding: 0 392.5px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .questionnaire_page_contents_image_area.slider.full_screen { width: 100%; padding: 0 31%; height: 100%; } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area.slider { padding: 0; width: 100%; height: auto; transform: none; top: 72px; } } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area.slider.sp_preview { top: 50%; transform: translateY(-50%); } } .questionnaire_page_contents_image_area.slider figure { cursor: default; width: auto; } .questionnaire_page_contents_image_area.slider .slick-list { margin: auto; } .questionnaire_page_contents_image_area.slider .slick-prev { left: 5px; width: 80px; height: 80px; border-radius: 9999px; } .questionnaire_page_contents_image_area.slider .slick-prev::before { content: ""; display: block; margin: auto; width: 30px; height: 30px; background: url(../images/common/slick_arrow_left.svg) no-repeat center center; background-size: contain; } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area.slider .slick-prev { display: none !important; } } .questionnaire_page_contents_image_area.slider .slick-prev.full_screen { background: #efe9de; } .questionnaire_page_contents_image_area.slider .slick-prev.slick-disabled { cursor: default; opacity: 0; } .questionnaire_page_contents_image_area.slider .slick-next { right: 5px; width: 80px; height: 80px; border-radius: 9999px; } .questionnaire_page_contents_image_area.slider .slick-next::before { content: ""; display: block; margin: auto; width: 30px; height: 30px; background: url(../images/common/slick_arrow_right.svg) no-repeat center center; background-size: contain; } @media screen and (max-width: 768px) { .questionnaire_page_contents_image_area.slider .slick-next { display: none !important; } } .questionnaire_page_contents_image_area.slider .slick-next.full_screen { background: #efe9de; } .questionnaire_page_contents_image_area.slider .slick-next.slick-disabled { cursor: default; opacity: 0; } .questionnaire_page_contents_image_mask.hover { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #925b5b; opacity: 0.8; } .questionnaire_page_contents_image_name.hover { display: none; color: #e0d4be; position: absolute; font-size: 20px; top: 40px; left: 5px; } .questionnaire_page_contents_image_name.slider { display: none !important; } .questionnaire_page_contents_more_btn { font-size: 14px; padding: 11px 29px; border: 1px solid #000; cursor: pointer; } .questionnaire_page_contents_more_btn_area { padding: 60px 0 0 0; text-align: center; } .questionnaire_page_contents_more_btn_area.hide { display: none; } .questionnaire_page_contents_slider_file_name { position: absolute; top: 120px; font-size: 20px; color: rgb(58, 4, 4); right: 500px; } @media screen and (max-width: 768px) { .questionnaire_page_contents_slider_file_name { display: none; } } @media screen and (max-width: 768px) { .questionnaire_page_contents_slider_file_name.active { display: block; position: fixed; top: 665px; left: 25px; font-size: 24px; } } .questionnaire_page_contents_slider_file_name.full_screen { display: none; } .questionnaire_page_contents_slider_close_btn { display: none; position: absolute; top: 30px; right: 25px; cursor: pointer; color: rgb(58, 4, 4); z-index: 9999999; } .questionnaire_page_contents_slider_close_btn span { font-size: 49px; font-weight: 100; } @media screen and (max-width: 768px) { .questionnaire_page_contents_slider_close_btn { top: 13px; left: 11px; } } .questionnaire_page_contents_slider_close_btn.open { display: block; } .questionnaire_page_contents_slider_close_btn.full_window { left: 35px; width: 43px; } .questionnaire_page_contents_slider_close_btn.full_window span { font-size: 40px; } .questionnaire_page_contents_slider_sp_fullscreen_close_btn { display: none; position: fixed; top: 7px; right: 6px; cursor: pointer; color: rgb(58, 4, 4); z-index: 9999999; } .questionnaire_page_contents_slider_sp_fullscreen_close_btn span { font-size: 34px; font-weight: 100; } .questionnaire_page_contents_slider_sp_fullscreen_close_btn.active { display: block; } .sp_preview_slider { background: #fff; transform: scale(2); } .sp_preview_slider.none { display: none; } @media screen and (max-width: 768px) { figure.wp-block-image.size-large.slick-slide.slick-current.slick-active.slick-center { opacity: 0.3; } } .interview_page_inner { padding: 60px 0 20px 0; } @media screen and (max-width: 768px) { .interview_page_inner { width: 362px; margin: auto; background: #fff; padding: 30px 10px; } } .interview_page_column_area { width: 48%; } @media screen and (max-width: 768px) { .interview_page_column_area { width: 100%; } } .interview_page_contents { position: relative; border: 2px solid #000; width: 100%; margin-top: 80px; padding: 20px 30px; } .interview_page_contents_area { padding-bottom: 80px; display: flex; justify-content: space-between; } @media screen and (max-width: 768px) { .interview_page_contents_area { padding-bottom: 40px; } } .interview_page_contents_number { position: absolute; font-weight: 900; font-family: "NotoSansJpBold"; color: #fff; background: #000; font-size: 48px; top: -40px; left: -20px; display: flex; align-items: center; justify-content: center; width: 85px; height: 80px; border-radius: 10px; } .interview_page_contents_title { font-size: 20px; font-family: "NotoSansJpBold"; } .interview_page_contents_title_area { padding-left: 60px; padding-bottom: 10px; border-bottom: 3px dotted #000; } .interview_page_contents_subtitle { font-size: 15px; } .interview_page_contents_image { width: 100%; height: 250px; -o-object-fit: cover; object-fit: cover; } .interview_page_contents_image.modal { width: 100%; height: 90%; -o-object-fit: contain; object-fit: contain; } .interview_page_contents_image_area { margin-top: 20px; position: relative; width: 100%; height: auto; cursor: pointer; } .interview_page_contents_image_area:hover .interview_page_contents_image_number { opacity: 1; transition: 0.5s; } .interview_page_contents_image_area:hover .interview_page_contents_image_title { opacity: 1; transition: 0.5s; } .interview_page_contents_image_slider .slick-arrow { width: 32px; height: 134px; background-color: #e0d4be; top: 50%; transform: translateY(-50%); z-index: 10; } .interview_page_contents_image_slider .slick-arrow:before { content: ""; font-size: 18px; color: #b5b2b4; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .interview_page_contents_image_slider .slick-prev { left: 0px; } .interview_page_contents_image_slider .slick-prev:before { content: "＜"; } .interview_page_contents_image_slider .slick-next { right: 0px; } .interview_page_contents_image_slider .slick-next:before { content: "＞"; } .interview_page_contents_image_slider_modal { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .interview_page_contents_image_slider_modal .slick-arrow { width: 33%; height: 100vh; background-color: transparent; top: 50%; transform: translateY(-50%); z-index: 10; } .interview_page_contents_image_slider_modal .slick-arrow:before { content: ""; font-size: 40px; color: #b5b2b4; position: absolute; top: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 768px) { .interview_page_contents_image_slider_modal .slick-arrow:before { font-size: 50px; color: #fff; } } .interview_page_contents_image_slider_modal .slick-prev { left: 0; } .interview_page_contents_image_slider_modal .slick-prev:before { left: 10%; content: "＜"; } @media screen and (max-width: 768px) { .interview_page_contents_image_slider_modal .slick-prev:before { left: 30%; } } .interview_page_contents_image_slider_modal .slick-next { right: 0; } .interview_page_contents_image_slider_modal .slick-next:before { right: 0; left: 90%; content: "＞"; } @media screen and (max-width: 768px) { .interview_page_contents_image_slider_modal .slick-next:before { left: 70%; } } .interview_page_contents_image_slider_modal .slick-list { margin: auto !important; width: 30% !important; height: 30rem !important; } @media screen and (max-width: 768px) { .interview_page_contents_image_slider_modal .slick-list { width: 100% !important; } } .interview_page_contents_image_slider_modal .slick-slide { margin: auto !important; height: 30rem !important; -o-object-fit: contain !important; object-fit: contain !important; } .interview_page_contents_image_number { opacity: 0; font-size: 11px; position: absolute; top: 5px; right: 5px; transition: 0.5s; } .interview_page_contents_image_title { opacity: 0; font-size: 17px; position: absolute; left: 0; bottom: 0; background: rgba(185, 176, 159, 0.8); width: 100%; padding: 5px 0 5px 10px; color: #4a1917; transition: 0.5s; } .interview_page_contents_image_title.modal { opacity: 1; font-size: 20px; color: #fff; background: transparent; padding: 10px 0 10px 20px; text-align: center; bottom: -5%; transform: translateY(-50%); } @media screen and (max-width: 768px) { .interview_page_contents_image_title.modal { left: -3.5%; } } .interview_page_contents_bottom_text_area { font-size: 15.5px; margin-top: 10px; } .interview_page_contents_bottom_name { font-family: "NotoSansJpBold"; margin-top: 20px; } @media screen and (max-width: 768px) { .interview_page_contents_bottom_name { text-align: right; } } .interview_page_contents_illustration_image { margin-left: auto; } .interview_page_contents_illustration_image_area { margin-top: 10px; margin-bottom: -60px; } .interview_page_modal { position: fixed; z-index: 9999999; left: 0; top: 0; width: 100vw; height: 100wh; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .interview_page_modal.hidden { display: none; } .interview_page_modal_content { margin: auto; display: block; width: 80%; max-width: 700px; } .interview_page_modal_close { position: fixed; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; z-index: 11; } .interview_page_modal_close:hover, .interview_page_modal_close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .hamburger_menu { z-index: 10010; } .hamburger_menu_wrapper { position: relative; z-index: 100030; width: 32px; height: 32px; } .hamburger_menu_line { position: absolute; width: 18px; height: 2px; background: #000000; left: 50%; transform: translateX(-50%); } .hamburger_menu_line.top { top: 8px; transition: all 0.3s ease; } .hamburger_menu_line.top.open { left: 10px; top: 20px; transform: rotate(45deg); transition: all 0.3s ease; } .hamburger_menu_line.center { top: 50%; transform: translate(-50%, -50%); } .hamburger_menu_line.center.open { display: none; } .hamburger_menu_line.bottom { bottom: 8px; transition: all 0.3s ease; } .hamburger_menu_line.bottom.open { left: 10px; bottom: 10px; transform: rotate(-45deg); transition: all 0.3s ease; } .hamburger_menu_drawer_menu { display: none; z-index: 100020; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #e0d4be; padding-bottom: 20px; padding-top: 40px; width: 100%; flex-direction: column; } .hamburger_menu_drawer_menu.open { display: flex; } .hamburger_menu_drawer_menu_link { font-family: "NotoSansJpBold"; text-align: center; padding: 12px 20px; font-size: 15px; letter-spacing: 0.1em; display: block; } .hamburger_menu_drawer_menu_link.plus { padding: 0; } .hamburger_menu_drawer_menu_link_more { display: none; } .hamburger_menu_drawer_menu_link_more.open { display: block; } .hamburger_menu_drawer_menu_link.active { color: #fff; } .hamburger_menu_drawer_menu_link_plusBtn { font-size: 16px; padding-right: 16px; margin-left: -22px; font-family: "NotoSansJpBold"; } .hamburger_menu_drawer_menu_link_plusBtn_area { display: flex; justify-content: center; padding: 12px 0; } .hamburger_menu_drawer_menu_link_plusBtn.open::before { content: "ー"; } .fixed_btn_wrapper { position: fixed; bottom: 0; display: flex; z-index: 100000; width: 100%; height: 70px; background: #fff; } .fixed_btn_wrapper.hidden { display: none !important; } .fixed_btn_contents { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .fixed_btn_contents_image { margin-top: 4px; width: 34px; } .fixed_btn_contents_text { font-size: 15px; margin-top: 6px; } .contact_banner_section { width: 100%; border-top: 1px solid #000; padding: 30px 0; } .contact_banner_section.gold { border-color: #d09b57; } .contact_banner_title { font-size: 20px; font-family: "NotoSansJpBold"; text-align: center; margin-bottom: 30px; } .contact_banner_contents { width: 377px; background: #ededed; padding: 30px 0; } .contact_banner_contents.gold { background: #efe9de; } .contact_banner_contents_area { display: flex; justify-content: center; gap: 30px; } .contact_banner_contents_icon { width: 54px; height: 54px; margin: auto; } .contact_banner_contents_title { font-size: 20px; font-family: "NotoSansJpBold"; text-align: center; margin-top: 10px; } .contact_banner_contents_btn { font-size: 16px; padding: 8px 0; display: block; width: 301px; margin: auto; margin-top: 10px; background: #d09b57; border: 1px solid #d09b57; text-align: center; color: #fff; transition: 0.3s; } .contact_banner_contents_btn:hover { background: #e0d4be; color: #3a0404; border: 1px solid #3a0404; } .breadcrumb_trail_wrapper { display: flex; align-items: center; padding-top: 60px; } @media screen and (max-width: 768px) { .breadcrumb_trail_wrapper { width: 362px; background: transparent; padding: 30px 0 0 20px; flex-wrap: wrap; line-height: 1.8; } } .breadcrumb_trail_wrapper.questionnaire { padding-top: 20px; padding-left: 10px; } .breadcrumb_trail_home_link { width: 16px; height: 16px; } @media screen and (max-width: 768px) { .breadcrumb_trail_home_link { width: 20px; height: 20px; } } .breadcrumb_trail_home_slash { font-size: 14px; margin: 0 20px; } @media screen and (max-width: 768px) { .breadcrumb_trail_home_slash { margin: 0 30px; font-size: 16px; } } .breadcrumb_trail_home_text { font-size: 16px; text-decoration: underline; } @media screen and (max-width: 768px) { .breadcrumb_trail_home_text { font-size: 19px; } } .breadcrumb_trail_home_text.link { text-decoration: none; } .breadcrumb_trail_home_text.link:hover { text-decoration: underline; } @font-face { font-family: "NotoSansJpMedium"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Medium.otf); } @font-face { font-family: "NotoSansJpRegular"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.otf); } @font-face { font-family: "NotoSansJpBold"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.otf); } @font-face { font-family: "NotoSansJpThin"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Thin.otf); } @font-face { font-family: "NotoSansJpLight"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Light.otf); } @font-face { font-family: "NotoSansJpBlack"; src: url(../fonts/Noto_Sans_JP/NotoSansJP-Black.otf); } @font-face { font-family: "NotoSerifJpRegular"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Regular.otf); } @font-face { font-family: "NotoSerifJpMedium"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Medium.otf); } @font-face { font-family: "NotoSerifJpBold"; src: url(../fonts/Noto_Serif_JP/NotoSerifJP-Bold.otf); } @font-face { font-family: "Helvetica"; src: url(../fonts/Helvetica/Helvetica-W01-Bold.ttf); } /*--------------------------------------------------*\ | カラー | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | 横幅 | \*--------------------------------------------------*/ /*--------------------------------------------------*\ | レスポンシブ | \*--------------------------------------------------*/ /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .pc_inline { display: inline; } .pc_fx { display: flex; } .sp { display: none !important; } .sp_inline { display: none !important; } .sp_fx { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media screen and (max-width: 600px) { .pc { display: none !important; } .pc_fx { display: none !important; } .pc_inline { display: none !important; } .sp { display: block !important; } .sp_inline { display: inline !important; } .sp_fx { display: flex !important; } } /*--------------------------------------------------*\ | utilty | \*--------------------------------------------------*/ .u_pc { display: block; } @media screen and (max-width: 600px) { .u_pc { display: none; } } .u_sp { display: none; } @media screen and (max-width: 600px) { .u_sp { display: block; } } .u_sp_imp { display: none !important; } @media screen and (max-width: 600px) { .u_sp_imp { display: block; } } .search_form { width: 90%; height: 40px; font-size: 18px; border-bottom: 0.5px solid #e0d4be; display: flex; justify-content: flex-start; align-items: center; } .search_form_back { font-size: 18px; } .search_form_button_icon { margin-right: 10px; font-size: 18px; } .search_form_input { width: 100%; height: 40px; } .search_form_input::-moz-placeholder { color: #e0d4be; opacity: 0.5; } .search_form_input::placeholder { color: #e0d4be; opacity: 0.5; } .search_form_input::-webkit-search-cancel-button { height: 20px; width: 20px; content: "×"; line-height: 20px; text-align: center; } .search_form_input_area { width: 90%; } .search_login { margin: 64px auto 0; padding: 0 30px; width: 100%; height: 64.5px; background-color: #959294; color: #e0d4be; z-index: 1000; } .search_login.search { position: fixed; margin: 11px auto 0; } .search_login_area { height: 64.5px; display: flex; justify-content: space-between; align-items: center; } .search_login_title { font-size: 18px; } .search-highlight { background-color: rgba(250, 173, 77, 0.3); color: #2b272a; } #loading { position: fixed; z-index: 999; height: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } #loading:before { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0d4be; } /* PULSE BUBBLES */ @keyframes pulse { 0% { transform: scale(0.7); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .spinner-box { position: relative; width: 90px; height: 120px; margin: 0 auto; top: -240px; } .pulse-container { width: 90px; display: flex; justify-content: space-between; align-items: center; z-index: 999; } .pulse-bubble { width: 15px; height: 15px; border-radius: 50%; background-color: #2b272a; } .pulse-bubble-1 { animation: pulse 0.8s ease 0.2s infinite alternate; } .pulse-bubble-2 { animation: pulse 0.8s ease 0.4s infinite alternate; } .pulse-bubble-3 { animation: pulse 0.8s ease 0.8s infinite alternate; } /*# sourceMappingURL=styles.css.map */