@charset "UTF-8"; /* -------------------------------------------------- shared/css/projects.css --------------------------------------------------- */ /* ------------- common -------------- */ .p_resultList { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -8px; } .p_resultList> li { width: 25%; padding: 0 8px; margin-bottom: 28px; } .p_resultList> li> a { display: block; height: 100%; padding: 10px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .p_resultList> li> a:hover { background-color: #eff3f9; } .p_resultList> li> a> .p_img { position: relative; width: 100%; max-width: 100%; } .p_resultList> li> a> .p_img:before { content: ""; display: block; padding-top: 100%; } .p_resultList> li> a> .p_img> .p_img_inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .p_resultList> li> a> .p_img> .p_img_inner> img { max-width: 100%; max-height: 100%; width: auto; height: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p_resultList> li> a> .p_name { margin-top: 18px; } .p_resultList> li> a> .p_info { margin-top: 18px; color: #333333; } .p_resultList> li> a> .p_year { margin-top: 10px; color: #333333; } .p_subContent { margin-top: 18px; } .p_toggleTitle { font-size: 1.4rem; padding: 12px 24px; color: #356cb6; margin-top: 18px; border: 1px solid #e2e6e8; border-radius: 3px; position: relative; cursor: pointer; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .p_toggleTitle:hover { background-color: #eff3f9; } .p_toggleTitle:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.8rem; content: ""; position: absolute; right: 12px; top: 50%; margin-top: -0.4rem; } .p_toggleTitle.s_open:after { content: ""; } .works-search-func { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .works-search-func li { width: 50%; padding-left: 5px; display: block; } .works-search-func li> button { width: 100%; text-align: center; color: #356cb6; border: 2px solid #356cb6; border-radius: 20px; display: block; padding: 5px; font-weight: 700; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .works-search-func li> button:hover, .works-search-func li> button.active { background-color: #356cb6; color: #ffffff; } .works-search-func li:first-child { padding-right: 5px; padding-left: 0; } .works-form-location li:nth-child(n+49) { display: none; } #workRefineSearchField { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #workRefineSearchField #urlParam { display: none; } #workRefineSearchField ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -18px; margin-bottom: 48px; } #workRefineSearchField li label { margin-right: 24px; margin-top: 18px; } #workRefineSearchField li:last-child label { margin-right: 0; } #workRefineSearchField label { display: block; min-width: 160px; } #workRefineSearchField input[type=radio] { display: none; } #workRefineSearchField input[type=radio]+ span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } #workRefineSearchField input[type=radio]+ span> span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 40px; padding-right: 10px; border: 1px solid #e2e6e8; border-radius: 3px; font-size: 1.4rem; color: #356cb6; min-height: 40px; line-height: 1; font-weight: 700; position: relative; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } #workRefineSearchField input[type=radio]+ span> span:hover { border-color: #356cb6; } #workRefineSearchField input[type=radio]+ span> span:before { content: ""; display: block; position: absolute; background-color: #e2e6e8; border: 7px solid #e2e6e8; border-radius: 50%; width: 20px; height: 20px; top: 50%; left: 10px; margin-top: -10px; -webkit-transition: all 0.3s; transition: all 0.3s; } #workRefineSearchField input[type=radio]:checked+ span> span { border-color: #356cb6; } #workRefineSearchField input[type=radio]:checked+ span> span:before { background-color: #ffffff; border-color: #356cb6; } #workRefineSearchField .p_clearBtn { display: block; padding-left: 30px; padding-right: 10px; text-align: center; font-size: 1.4rem; height: 20px; line-height: 20px; font-weight: 700; position: relative; white-space: nowrap; cursor: pointer; margin-bottom: 48px; } #workRefineSearchField .p_clearBtn:hover { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } #workRefineSearchField .p_clearBtn:hover:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } #workRefineSearchField .p_clearBtn:before { content: ""; display: block; position: absolute; background-color: #e2e6e8; border-radius: 3px; width: 20px; height: 20px; top: 50%; left: 0; margin-top: -10px; } .works-form-area { margin-top: 14px; border-bottom: 1px solid #e2e6e8; } .works-form-area .works-form-area-item { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #e2e6e8; position: relative; } .works-form-area .works-form-area-name { padding: 6px 0; display: block; font-size: 1.4rem; color: #356cb6; font-weight: bold; position: relative; cursor: pointer; } .works-form-area .works-form-area-name:before, .works-form-area .works-form-area-name:after { content: ""; display: block; position: absolute; } .works-form-area .works-form-area-name:before { margin-top: -1px; right: 12px; top: 50%; width: 10px; height: 0; border: 1px solid #356cb6; } .works-form-area .works-form-area-name:after { margin-top: -5px; right: 16px; top: 50%; width: 0; height: 10px; border: 1px solid #356cb6; } .works-form-area .works-form-area-body { display: none; } .works-form-area .works-form-area-body> ul { padding-top: 0; margin-bottom: 12px; } .works-form-area .works-form-area-name.is-open:after { display: none; } .m_yearSlider { margin-left: auto; margin-right: auto; padding: 35px 20px 20px; } .m_yearSlider .noUi-connect { background-color: #356cb6; } .works-search-year-input { text-align: center; font-size: 1.4rem; } .works-search-year-input input { width: 5em; text-align: center; border-radius: 4px; border: 1px solid #e2e6e8; padding: 4px; } /* ------------- 施工実績 -------------- */ .works-pickup { /* display: none; */ max-width: 1200px; width: 100%; margin: auto; margin-bottom: 34px; position: relative; } .works-pickup .works-pickup-item { position: relative; height: auto; min-height: 400px; overflow: hidden; max-width: 1200px; display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; width: 100%; } .works-pickup .works-pickup-item:hover { opacity: 0.8; ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .works-pickup .works-pickup-item> .image { width: 400px; background-color: #eff3f9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .works-pickup .works-pickup-item> .body { border-left: 1px solid #ffffff; background-color: #eff3f9; -webkit-flex-shrink: 100; -ms-flex-negative: 100; flex-shrink: 100; -webkit-box-flex: 5; -webkit-flex-grow: 5; -ms-flex-positive: 5; flex-grow: 5; padding: 36px; padding-bottom: 64px; position: relative; } .works-pickup .works-pickup-item> .body> .label { font-family: Oswald; font-size: 1.2rem; letter-spacing: 0.2rem; } .works-pickup .works-pickup-item> .body> .heading { margin-top: 18px; font-size: 2.4rem; color: #356cb6; } .works-pickup .works-pickup-item> .body> .heading a:hover { text-decoration: underline; } .works-pickup .works-pickup-item> .body> .text { margin-top: 18px; font-size: 1.6rem; line-height: 1.6; text-align: justify; color: #333; } .works-pickup .works-pickup-item> .body> .more { position: absolute; right: 36px; bottom: 36px; } .works-pickup .works-pickup-item> .body> .more> span { font-family: Oswald; letter-spacing: 0.2rem; font-weight: 400; position: relative; display: block; padding-left: 20px; font-size: 1.6rem; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .works-pickup .works-pickup-item> .body> .more> span:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; content: ""; position: absolute; top: 50%; font-size: 1.4rem; margin-top: -0.5rem; left: 0; } .works-pickup .slick-prev { left: -25px; } .works-pickup .slick-prev:before { content: ""; margin-left: -0.6rem; } .works-pickup .slick-next { right: -25px; } .works-pickup .slick-next:before { content: ""; margin-left: -0.4rem; } .works-pickup .slick-list { z-index: 1; } .works-pickup .slick-arrow { font-size: 0; position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; padding: 0; margin-top: -25px; border-radius: 25px; background-color: #ffffff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25); color: #356cb6; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .works-pickup .slick-arrow:hover { background-color: #356cb6; color: #ffffff; } .works-pickup .slick-arrow:before, .works-pickup .slick-arrow:after { -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .works-pickup .slick-arrow:hover:before, .works-pickup .slick-arrow:hover:after { border-color: #ffffff; } .works-pickup .slick-arrow:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.5rem; font-size: 1rem; z-index: 6; } .works-pickup .slick-dots { position: absolute; width: 100%; bottom: -34px; text-align: center; font-size: 1rem; line-height: 1; margin-top: 20px; } .works-pickup .slick-dots> li { display: inline-block; margin: 0 5px; } .works-pickup .slick-dots> li> button { font-size: 0; display: inline-block; height: 10px; width: 10px; border-radius: 5px; background-color: #eeeeee; cursor: pointer; padding: 0; } .works-pickup .slick-dots> li.slick-active> button { background-color: #356cb6; } /* ------------- 施工実績詳細 -------------- */ .wrapper.wrapper--continuous.wrapper--paleblue { padding-top: 0; padding-bottom: 0; background-color: transparent; } .wrapper.wrapper--continuous.wrapper--paleblue > .container { max-width: 100%; padding: 0; } .works-carousel-thumbs-wrapper .slick-track { width: 100%!important; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: stretch; } .works-carousel-wrapper { width: 100%; position: relative; } .works-carousel { width: 100%; height: auto; max-height: 750px; margin: 0 auto; overflow: hidden; background: #eff2f9; } .works-carousel> div> div:not([class]):after { z-index: 5; top: 0; bottom: 0; right: 0; left: 0; display: block; content: ""; position: absolute; } .works-carousel .works-carousel-item { /* display: none;*/ /*position: relative;*/ width: 100%; max-width: 100%; /*height: 500px;*/ } .works-carousel .works-carousel-item:before { content: ""; display: block; /* padding-top: 100%;*/ } .works-carousel .works-carousel-item-inner { position: static; display: block; } .works-carousel img, .works-carousel .works-carousel-item-inner> img { width: auto; /* max-width: 1000px;*/ height: 750px; max-height: 100%; margin: auto; } .works-carousel .works-carousel-item-inner:after { z-index: 5; top: 0; bottom: 0; right: 0; left: 0; display: block; content: ""; position: absolute; } .works-carousel .slick-prev { left: 24px; } .works-carousel .slick-prev:before { content: ""; margin-left: -0.6rem; } .works-carousel .slick-next { right: 24px; } .works-carousel .slick-next:before { content: ""; margin-left: -0.4rem; } .works-carousel .slick-arrow { font-size: 0; position: absolute; top: 0;bottom: 0; margin: auto; z-index: 20; width: 70px; height: 70px; border-radius: 50%; background-color: #ffffff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25); color: #356cb6; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .works-carousel .slick-arrow:hover { background-color: #356cb6; color: #ffffff; } .works-carousel .slick-arrow:before, .works-carousel .slick-arrow:after { -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .works-carousel .slick-arrow:hover:before, .works-carousel .slick-arrow:hover:after { border-color: #ffffff; } .works-carousel .slick-arrow:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.5rem; font-size: 1rem; z-index: 3; } .works-carousel-thumbs-wrapper { width: 100%; height: 60px; margin-top: 30px; position: static; /* position: absolute; right: 0; top: 0;*/ } .works-carousel-thumbs-wrapper> div, .works-carousel-thumbs-wrapper> div> div, .works-carousel-thumbs-wrapper> div> div> div { height: auto !important; } .works-carousel-thumbs-wrapper .works-carousel-thumb { /* display: none;*/ position: relative; width: 60px; max-width: 60px; border: none !important; margin-top: 0; margin-right: 10px; margin-left: 10px; background: #c6cfe0; } .works-carousel-thumbs-wrapper .works-carousel-thumb:first-child { margin-top: 0; } .works-carousel-thumbs-wrapper .works-carousel-thumb:before { content: ""; display: block; padding-top: 100%; } .works-carousel-thumbs-wrapper .works-carousel-thumb:after { top: 0; bottom: 0; left: 0; right: 0; display: block; content: ""; z-index: 5; position: absolute; } .works-carousel-thumbs-wrapper .slick-current:after { z-index: 4; content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; border: 4px solid #356cb6 !important; } .works-carousel-thumbs-wrapper .works-carousel-thumb-inner { z-index: 3; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .works-carousel-thumbs-wrapper .works-carousel-thumb-inner> img { max-width: 100%; max-height: 100%; width: auto; height: auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .title-body.title-body--works h1 { display: inline-block; } .works-tag-list { float: right; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding-left: 12px; margin-left: auto; } .works-tag-list> li { padding: 4px 8px 3px 8px; margin-top: 10px; display: block; background-color: #ffffff; color: #356cb6; font-weight: 700; margin-left: 12px; border: 1px solid #356cb6; border-radius: 12px; font-size: 1.1rem; white-space: nowrap; } .works-tag-list> li:first-child { margin-left: 0; } .works-table th { width: 10em; white-space: nowrap; } .works-person { width: 87px !important; } @media (max-width: 1024px) { /* ------------- 施工実績詳細 -------------- */ .works-carousel { max-height: 100vw; } .works-carousel:not(.slick-slider), .works-carousel .works-carousel-item-inner { width: 100%; padding-bottom: 61.25%; position: relative; overflow: hidden; } .works-carousel img, .works-carousel .works-carousel-item-inner> img { max-width: 100%; max-height: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .works-carousel .slick-arrow { width: 100px; height: 100px; } .works-carousel .slick-next { right: -60px; } .works-carousel .slick-next::before { right: 70%;left: auto; } .works-carousel .slick-prev { left: -60px; } .works-carousel .slick-prev::before { left: 77%; } } @media (max-width: 767px) { /* ------------- common -------------- */ .p_resultList { display: block; } .p_resultList> li { width: auto; } .p_resultList> li> a .p_img { height: auto; } .p_resultList> li> a .p_img:before { display: none; } .p_resultList> li> a .p_img> .p_img_inner { position: static; } .works-search-func { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .works-search-func> li { margin-bottom: 0; } /* ------------- 施工実績 -------------- */ .works-pickup .works-pickup-item { display: block !important; } .works-pickup .works-pickup-item> .image { width: auto; border-bottom: 1px solid #ffffff; } .works-pickup .works-pickup-item> .image> .figure-fixed { width: 400px; } .works-pickup .works-pickup-item> .body { border: none; padding-right: 24px; } .works-pickup .slick-arrow { display: none !important; } /* ------------- 施工実績検索結果 -------------- */ .workRefineSearchField { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* ------------- 施工実績詳細 -------------- */ .works-table th { width: auto; white-space: normal; } .works-carousel .slick-arrow { width: 60px; height: 60px; } .works-carousel .slick-next { right: -30px; } .works-carousel .slick-prev { left: -30px; } .works-carousel .slick-next::before { right: 62%;left: auto; } .works-carousel .slick-prev::before { left: 69%; } } @media (min-width: 768px) and (max-width: 991px) { /* ------------- common -------------- */ .p_resultList> li { width: 33.33333%; } } @media (max-width: 479px) { /* ------------- 施工実績 -------------- */ .works-pickup .works-pickup-item> .body> .text { display: none; } } @media (max-width: 991px) { /* ------------- 施工実績 -------------- */ .works-pickup .works-pickup-item { height: auto; } .works-pickup .works-pickup-item> .body { padding-top: 24px; padding-left: 24px; padding-bottom: 52px; } .works-pickup .works-pickup-item> .body> .more { right: 24px; bottom: 24px; } /* ------------- 施工実績詳細 -------------- */ .works-carousel-thumbs-wrapper { display: none; } } @media (max-width: 1500px) { /* ------------- 施工実績 -------------- */ .works-pickup .works-pickup-item> .body { padding-right: 48px; } .works-pickup .slick-prev { left: -65px; } .works-pickup .slick-prev:before { content: ""; left: 75%; } .works-pickup .slick-next { right: -65px; } .works-pickup .slick-next:before { content: ""; left: 25%; margin-left: -0.9rem; } .works-pickup .slick-arrow { width: 100px; height: 100px; border-radius: 50px; } .works-pickup .slick-arrow:before { margin-top: -0.8rem; font-size: 1.6rem; } } @media (max-width: 1200px) { /* ------------- 施工実績 -------------- */ .works-pickup .works-pickup-item { padding: 0; } } @media (max-width: 1199px) { /* ------------- 施工実績 -------------- */ .works-pickup { overflow: hidden; } }