@charset "UTF-8"; .c5-reset_css { /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) 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 */ /* Preferred box-sizing value */ /* Reapply the pointer cursor for anchor tags */ /* Remove list styles (bullets/numbers) */ /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ /* Safari - solving issue when using user-select:none on the text input doesn't working */ /* revert the 'white-space' property for textarea elements on Safari */ /* minimum style to allow to style meter element */ /* preformatted text - use only for this feature */ /* reset default text opacity of input placeholder */ /* remove default dot (•) sign */ /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /* 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*/ /* apply back the draggable feature - exist only in Chromium and Safari */ /* Revert Modal native behavior */ } .c5-reset_css *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } .c5-reset_css *, .c5-reset_css *::before, .c5-reset_css *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .c5-reset_css a, .c5-reset_css button { cursor: revert; } .c5-reset_css ol, .c5-reset_css ul, .c5-reset_css menu { list-style: none; } .c5-reset_css img { max-inline-size: 100%; max-block-size: 100%; vertical-align: top; } .c5-reset_css table { border-collapse: collapse; } .c5-reset_css input, .c5-reset_css textarea { -webkit-user-select: auto; } .c5-reset_css textarea { white-space: revert; } .c5-reset_css meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } .c5-reset_css :where(pre) { all: revert; } .c5-reset_css ::-webkit-input-placeholder { color: unset; } .c5-reset_css ::-moz-placeholder { color: unset; } .c5-reset_css :-ms-input-placeholder { color: unset; } .c5-reset_css ::-ms-input-placeholder { color: unset; } .c5-reset_css ::placeholder { color: unset; } .c5-reset_css ::marker { content: initial; } .c5-reset_css :where([hidden]) { display: none; } .c5-reset_css :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; } .c5-reset_css :where([draggable=true]) { -webkit-user-drag: element; } .c5-reset_css :where(dialog:modal) { all: revert; } html { position: relative; scroll-behavior: smooth; } .c5-reset_css { color: #2F353D; font-size: 16px; font-weight: 300; } .c5-reset_css a:hover { cursor: pointer; } .c5-reset_css p { line-height: 1.6; } .c5-reset_css sup { line-height: 0; font-size: 0.5em; vertical-align: super; } @media screen and (max-width: 640px) { .c5-reset_css { font-size: 14px; font-size: 3.73333vw; } } .c5-bg--gray { background-color: #F2F2F2; } .c5-category_head { margin-bottom: 60px; position: sticky; z-index: 99; top: 0; background-color: #fff; } .c5-category_head:has(+ .c5-mv) { margin-bottom: 0; } .c5-category_head__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .c5-category_head h1 { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0 auto 0 0; padding: 18px 0; } .c5-category_head h1 a:hover { text-decoration: none; color: inherit; } .c5-category_head h1 a:visited { color: inherit; } .c5-category_head__nav ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; gap: 30px; font-size: 14px; } .c5-category_head__nav li.c5-category_head__nav--current span { width: 100%; padding-bottom: 8px; border-bottom: solid 2px #2F353D; text-align: center; } .c5-category_head__nav li a { display: block; padding: 20px 0; position: relative; } .c5-category_head__nav li a::after { content: ""; left: 0; bottom: 0; width: 100%; height: 5px; position: absolute; -webkit-transition: 0.3s; transition: 0.3s; background: #bebebe; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } .c5-category_head__nav li a:hover { text-decoration: none; color: inherit; } .c5-category_head__nav li a:visited { color: inherit; } .c5-category_head__nav li a:hover::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } @media screen and (max-width: 640px) { .c5-category_head { padding: 15px 0; margin-bottom: 40px; } .c5-category_head h1 { font-size: 16px; padding: 0; } .c5-category_head__inner { position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c5-category_head__nav { position: absolute; width: calc(100% + 40px); left: -20px; top: calc(100% + 15px); background-color: #fff; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.3s ease; transition: 0.3s ease; opacity: 0; visibility: hidden; } .c5-category_head__nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } .c5-category_head__nav li { border-bottom: 1px solid #ccc; } .c5-category_head__nav li a { text-align: center; padding: 10px; } .c5-category_head__nav li a::after { display: none; } } .c5-spmenu-btn { display: none; border: none; height: 13px; width: 20px; position: relative; background: none; padding: 0; } .c5-spmenu-btn span, .c5-spmenu-btn span::before, .c5-spmenu-btn span::after { position: absolute; content: ""; height: 1px; width: 100%; background-color: #000; -webkit-transition: 0.3s ease; transition: 0.3s ease; display: block; } .c5-spmenu-btn span { top: 50%; } .c5-spmenu-btn span::before { top: -6px; } .c5-spmenu-btn span::after { bottom: -6px; } .c5-spmenu-btn.open span { background-color: transparent; } .c5-spmenu-btn.open span::before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c5-spmenu-btn.open span::after { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .c5-spmenu-btn.open + .c5-category_head__nav { opacity: 1; visibility: visible; } @media screen and (max-width: 640px) { .c5-spmenu-btn { display: block; } } .c5-mv { height: 400px; background: #fff url("/professional/solution/catv/images/top/mv.jpg") no-repeat center; } .c5-mv__inner { max-width: 1200px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; background-color: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; } .c5-mv__ttl { font-size: 3rem; line-height: 1.2; margin: 0; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .c5-mv__txt { font-size: 1.25rem; margin: 0; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 640px) { .c5-mv { height: 69.33333vw; background-size: cover; } .c5-mv__ttl { font-size: 9.066666vw; } .c5-mv__txt { font-size: 4.26vw; } } .c5-h--bg_1 { font-size: 26px; line-height: 1.5; text-align: center; margin-bottom: 40px; } @media screen and (max-width: 640px) { .c5-h--bg_1 { font-size: 5.33333vw; margin-bottom: clamp(2.5rem, 1.25rem + 6.25vw, 3.75rem); } } .c5-h--bg_2 { font-size: 20px; font-weight: 600; padding: 10px 0.5em 8px; text-align: center; color: #fff; background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); margin-bottom: 1em; } .c5-h--bg_3 { width: 100%; padding: 20px 0.5em 16px; font-size: 24px; font-weight: 600; line-height: 1.4; color: #fff; text-align: center; background-position: center; background-size: cover; background-image: url(../images/common/bg-h3-01.jpg); margin-bottom: 20px; } @media screen and (max-width: 640px) { .c5-h--bg_3 { padding: clamp(1.25rem, 6.25vw, 2.5rem) 0.5em clamp(1rem, 5vw, 2rem); font-size: clamp(1.25rem, 6.25vw, 2.5rem); background-image: url(../images/common/bg-h3-01-sp.jpg); } } .c5-h--bg_3--2 { background-image: url(../images/common/bg-h3-02.jpg); } @media screen and (max-width: 640px) { .c5-h--bg_3--2 { background-image: url(../images/common/bg-h3-02-sp.jpg); } } .c5-h--bg_3--3 { background-image: url(../images/common/bg-h3-03.jpg); } @media screen and (max-width: 640px) { .c5-h--bg_3--3 { background-image: url(../images/common/bg-h3-03-sp.jpg); } } .c5-h--bg_3--4 { background-image: url(../images/common/bg-h3-04.jpg); } @media screen and (max-width: 640px) { .c5-h--bg_3--4 { background-image: url(../images/common/bg-h3-04-sp.jpg); } } .c5-h--double_border { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; font-size: 32px; text-align: center; padding: 36px 1em 34px; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 49, 107, 0)), color-stop(27.08%, #00316B), color-stop(51.56%, #109C94), color-stop(77.08%, #00316B), to(rgba(0, 49, 107, 0))), -webkit-gradient(linear, left top, right top, from(rgba(0, 49, 107, 0)), color-stop(27.08%, #00316B), color-stop(51.56%, #109C94), color-stop(77.08%, #00316B), to(rgba(0, 49, 107, 0))), -webkit-gradient(linear, left top, right top, from(rgba(0, 49, 107, 0)), color-stop(27.08%, #00316B), color-stop(51.56%, #109C94), color-stop(77.08%, #00316B), to(rgba(0, 49, 107, 0))), -webkit-gradient(linear, left top, right top, from(rgba(0, 49, 107, 0)), color-stop(27.08%, #00316B), color-stop(51.56%, #109C94), color-stop(77.08%, #00316B), to(rgba(0, 49, 107, 0))); background: linear-gradient(90deg, rgba(0, 49, 107, 0) 0%, #00316B 27.08%, #109C94 51.56%, #00316B 77.08%, rgba(0, 49, 107, 0) 100%), linear-gradient(90deg, rgba(0, 49, 107, 0) 0%, #00316B 27.08%, #109C94 51.56%, #00316B 77.08%, rgba(0, 49, 107, 0) 100%), linear-gradient(90deg, rgba(0, 49, 107, 0) 0%, #00316B 27.08%, #109C94 51.56%, #00316B 77.08%, rgba(0, 49, 107, 0) 100%), linear-gradient(90deg, rgba(0, 49, 107, 0) 0%, #00316B 27.08%, #109C94 51.56%, #00316B 77.08%, rgba(0, 49, 107, 0) 100%); background-position: left 0 top 0, left 0 top 8px, left 0 bottom 8px, left 0 bottom 0; background-size: 100% 2px, 100% 1px, 100% 1px, 100% 2px; background-repeat: no-repeat; margin-bottom: 60px; } .c5-h--double_border span { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); } @media screen and (max-width: 640px) { .c5-h--double_border { font-size: 20px; padding: 16px 20px 14px; } } .c5-h--border_left_bottom { font-size: 28px; font-weight: 600; line-height: 1.4; margin-bottom: 30px; } @media screen and (max-width: 640px) { .c5-h--border_left_bottom { font-size: clamp(1.25rem, 0.5rem + 3.75vw, 2rem); margin-bottom: clamp(1.25rem, 6.25vw, 2.5rem); } } .c5-h--gradient_text { font-size: 28px; font-weight: 600; line-height: 1.4; margin-bottom: 30px; background: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background: linear-gradient(90deg, #109C94 0%, #00316B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width: 640px) { .c5-h--gradient_text { font-size: clamp(1.25rem, 0.75rem + 2.5vw, 1.75rem); margin-bottom: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem); } } .c5-h--gradient_text--small { font-size: 16px; line-height: 1.6; margin-bottom: 10px; } .c5-h--gradient_text--large { font-size: 32px; } @media screen and (max-width: 640px) { .c5-h--gradient_text--large { font-size: clamp(1.25rem, 0.5rem + 3.75vw, 2rem); margin-bottom: clamp(1.25rem, 0.5rem + 3.75vw, 2rem); } } .c5-h--with_link { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c5-h--with_link h2 { font-size: 28px; font-weight: 600; line-height: 1.4; } @media screen and (max-width: 640px) { .c5-h--with_link h2 { font-size: clamp(1.25rem, 0.5rem + 3.75vw, 2rem); } } .c5-h--with_link a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c5-h--with_link a::after { content: ""; display: block; width: 10px; height: 10px; margin-left: 10px; border-bottom: solid 1px #2F353D; border-right: solid 1px #2F353D; -webkit-transform: translateY(-1px) rotate(-45deg); transform: translateY(-1px) rotate(-45deg); } .c5-grid--pc_2col-sp_1col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } @media screen and (max-width: 640px) { .c5-grid--pc_2col-sp_1col { grid-template-columns: 1fr; gap: 30px; } } .c5-grid--pc_3col-sp_1col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 120px; } @media screen and (max-width: 640px) { .c5-grid--pc_3col-sp_1col { gap: clamp(1.875rem, 9.38vw, 3.75rem); } } .c5-grid--pc_3col-sp_1col--type2 { gap: 75px; } @media screen and (max-width: 640px) { .c5-grid--pc_3col-sp_1col--type2 { gap: clamp(1.875rem, 9.38vw, 3.75rem); } } .c5-grid--pc_4col-sp_1col { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 120px 40px; } @media screen and (max-width: 640px) { .c5-grid--pc_4col-sp_1col { gap: clamp(3.75rem, 18.75vw, 7.5rem); } } .c5-button--type1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 0.6em 8px; color: #fff; font-weight: 600; background-color: #2D75C7; margin-top: 15px; -webkit-transition: color ease 0.5s, background-color ease 0.5s; transition: color ease 0.5s, background-color ease 0.5s; } .c5-button--type1:hover { color: #2D75C7; background-color: #fff; border: solid #2D75C7 1px; padding: 9px 0.6em 7px; text-decoration: none; -webkit-transition: color ease 0.5s, background-color ease 0.5s; transition: color ease 0.5s, background-color ease 0.5s; } .c5-button--type1.inline { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; min-width: 200px; } .c5-button--type2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 396px; padding-top: 12px; padding-bottom: 8px; font-size: 26px; font-weight: 600; line-height: 1.6; color: #fff; background-color: #D24615; -webkit-transition: color ease 0.5s, background-color ease 0.5s; transition: color ease 0.5s, background-color ease 0.5s; } @media screen and (max-width: 640px) { .c5-button--type2 { font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem); } } .c5-button--type2:hover { color: #D24615; text-decoration: none; background-color: #fff; padding-top: 10px; padding-bottom: 6px; border: solid 2px #D24615; -webkit-transition: color ease 0.5s, background-color ease 0.5s; transition: color ease 0.5s, background-color ease 0.5s; } .c5-button--type3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 15px 20px; border: solid 1px rgba(47, 53, 61, 0.3); -webkit-box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.08); box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.08); background-color: #fff; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; } .c5-button--type3 img { width: 50px; margin-right: 22px; } .c5-button--type3 span { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; font-weight: 600; line-height: 1.4; } .c5-button--type3 span::before { position: relative; content: ""; display: block; width: 0; height: 0; margin-right: 8px; -webkit-transform: translateY(6px); transform: translateY(6px); border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #2F353D; } @media screen and (max-width: 640px) { .c5-button--type3 img { width: 44px; } .c5-button--type3 span { font-size: 16px; } } .c5-button--type3:hover { border-color: rgba(47, 53, 61, 0.5); -webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.2); -webkit-transition: all ease 0.3s; transition: all ease 0.3s; -webkit-transform: translateX(2px) translateY(2px); transform: translateX(2px) translateY(2px); } .c5-button--type3:hover:hover { text-decoration: none; color: inherit; } .c5-button--type3:hover:visited { color: inherit; } .c5-button--type4 { position: relative; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 11px 24px 9px; margin: 20px auto 0; border-radius: 160px; background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); background-size: 0; background-position: top 50%, left 50%; } .c5-button--type4:hover { text-decoration: none; color: inherit; } .c5-button--type4:visited { color: inherit; } .c5-button--type4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 160px; border: solid 1px transparent; background: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)) border-box border-box; background: linear-gradient(90deg, #109C94 0%, #00316B 100%) border-box border-box; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: xor; mask-composite: exclude; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-button--type4 span { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; background: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background: linear-gradient(90deg, #109C94 0%, #00316B 100%); -webkit-background-clip: text; background-clip: text; } .c5-button--type4 span::after { content: ""; display: block; height: 14px; width: 14px; border-bottom: solid 1px; border-right: solid 1px; -o-border-image: linear-gradient(45deg, #109c94 0%, #00316b 100%) 1; border-image: linear-gradient(45deg, #109c94 0%, #00316b 100%) 1; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c5-button--type4:hover { color: #fff; background-size: 100%; } .c5-button--type4:hover::before { opacity: 0; } .c5-button--type4:hover span::after { -o-border-image: none; border-image: none; border-color: #fff; } .c5-list--news li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px 30px; margin-top: 30px; } .c5-list--news li time { -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 640px) { .c5-list--news li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem); } } .c5-list--point { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .c5-list--point li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px; border: solid 1px; -o-border-image: linear-gradient(90deg, #109C94 0%, #00316B 100%) 1; border-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)) 1; border-image: linear-gradient(90deg, #109C94 0%, #00316B 100%) 1; margin-bottom: 20px; } .c5-list--point li:last-of-type { margin-bottom: 0; } .c5-list--point__num { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-right: 15px; } .c5-list--point__num span { font-size: 24px; font-weight: 600; line-height: 1; background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .c5-list--point__num span:first-child { font-size: 12px; font-weight: 700; margin-bottom: 8px; } .c5-list--point__body { padding-top: 2px; padding-left: 15px; border-left: solid 1px #109C94; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c5-list--point__body p { background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .c5-list--check { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px 60px; } .c5-list--check li { position: relative; margin-left: 35px; text-indent: -35px; } .c5-list--check li::before { position: relative; content: url(../images/common/icon-check.svg); padding-right: 10px; top: 3px; } @media screen and (max-width: 640px) { .c5-list--check { gap: 20px 60px; } } .c5-itembox--type1 { position: relative; border: solid 1px; -o-border-image: linear-gradient(90deg, #109C94 0%, #00316B 100%) 1; border-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)) 1; border-image: linear-gradient(90deg, #109C94 0%, #00316B 100%) 1; -webkit-transition: opacity ease 0.5s; transition: opacity ease 0.5s; container-type: inline-size; } .c5-itembox--type1::before { content: ""; display: block; position: absolute; right: -2px; bottom: -2px; height: 35px; width: 35px; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); background-color: #fff; } .c5-itembox--type1::after { content: ""; display: block; position: absolute; right: -1px; bottom: -1px; height: 35px; width: 35px; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); background-image: linear-gradient(to right bottom, #00316b 0px, #00316b calc(50% + 1px), #fff calc(50% + 1px), #fff 100%); } .c5-itembox--type1__flex { display: grid; grid-template-columns: 50% 1fr; gap: 30px; padding: 30px; } .c5-itembox--type1__flex__left img { max-inline-size: unset; max-block-size: unset; max-width: 100%; } .c5-itembox--type1__flex__right { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; } @container (max-width: 500px) { .c5-itembox--type1__flex { grid-template-columns: 1fr; padding: 20px; } .c5-itembox--type1__flex__left { width: 100%; } .c5-itembox--type1__flex__left img { width: 100%; } .c5-itembox--type1__flex__right { max-width: 100%; } } .c5-itembox--type2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 580px; margin-left: auto; margin-right: auto; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-itembox--type2 img { margin-bottom: 10px; } .c5-itembox--type2 dt { text-align: center; font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 20px; } .c5-itembox--type2:hover { opacity: 0.8; text-decoration: none; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-itembox--type3 dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .c5-itembox--type3 dl dt { display: inline-block; background-image: -webkit-gradient(linear, left top, right top, from(#109C94), to(#00316B)); background-image: linear-gradient(90deg, #109C94 0%, #00316B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px; font-weight: 600; margin-top: 20px; margin-bottom: 10px; } @media screen and (max-width: 640px) { .c5-itembox--type3 dl dt { font-size: clamp(1.25rem, 1rem + 1.25vw, 1.5rem); } } .c5-itembox--type4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; container-type: inline-size; } @media screen and (max-width: 640px) { .c5-itembox--type4 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .c5-itembox--type4__img { -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: -37px; max-width: 560px; } .c5-itembox--type4__img img { width: 100%; } .c5-itembox--type4__body { width: 250px; padding-top: 37px; -ms-flex-negative: 0; flex-shrink: 0; } .c5-itembox--type4__body p { margin-bottom: 30px; } @container (max-width: 560px) { .c5-itembox--type4__body { padding-top: clamp(0.75rem, -4.719rem + 8.93vw, 2.313rem); } } @media screen and (max-width: 980px) { .c5-itembox--type4__body { width: 100%; padding-top: clamp(2.5rem, -1.029rem + 8.82vw, 4.375rem); } } @media screen and (max-width: 640px) { .c5-itembox--type4__body { padding-top: 0; } .c5-itembox--type4__body p { margin-bottom: 20px; } } .c5-itembox--type5 { position: relative; } .c5-itembox--type5 img { width: 100%; } .c5-itembox--type5 p { margin-top: 20px; } .c5-itembox--type6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: clamp(1.25rem, 6.25vw, 2.5rem) 40px; } .c5-itembox--type6__body { -ms-flex-negative: 1; flex-shrink: 1; padding-bottom: 40px; } .c5-itembox--type6__body__text { margin-bottom: 30px; } .c5-itembox--type6__body__text .c5-strong { margin-bottom: 10px; } .c5-itembox--type6__img { -ms-flex-negative: 0; flex-shrink: 0; min-width: 370px; max-width: 100%; } @media screen and (max-width: 640px) { .c5-itembox--type6 { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .c5-itembox--type6__body { padding-bottom: 0; } .c5-itembox--type6__body__text { margin-bottom: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem); } .c5-itembox--type6__img { min-width: unset; } } .c5-itembox--type7 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem) 60px; background-color: #F2F2F2; padding-top: 30px; padding-bottom: 30px; max-width: 788px; margin-left: auto; margin-right: auto; } .c5-itembox--type7 picture { line-height: 1; } .c5-itembox--type7__left { -ms-flex-negative: 1; flex-shrink: 1; } .c5-itembox--type7__left__logo { max-width: 280px; } .c5-itembox--type7__left__logo span { margin-bottom: 10px; font-size: 14px; font-weight: 600; } .c5-itembox--type7__right { -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 640px) { .c5-itembox--type7 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding-top: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem); padding-bottom: clamp(1.25rem, 0.625rem + 3.13vw, 1.875rem); } } .c5-itembox--type8 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .c5-itembox--type8 ul { gap: 15px 60px; margin-bottom: 20px; } .c5-itembox--type8 .c5-button--type4 { margin-top: auto; } .c5-modal { display: none; } .c5-modal--sp { display: none; } @media screen and (max-width: 640px) { .c5-modal--sp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .c5-modal__img { width: calc(100vw - 50px); overflow-x: scroll; overflow-y: visible; } .c5-modal__img img { max-height: calc(100vh - 180px); } .c5-modal__img::-webkit-scrollbar { height: 4px; border-radius: 40px; margin-top: 15px; } .c5-modal__img::-webkit-scrollbar-track { background-color: #2F353D; } .c5-modal__img::-webkit-scrollbar-thumb { border-radius: 40px; background-color: #F2F2F2; } .c5-modal__button { position: relative; display: block; font-size: 14px; color: #109C94; margin-top: 10px; margin-left: auto; margin-right: auto; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-modal__button::before { position: relative; content: url(../images/common/icon-plus.svg); padding-right: 5px; top: 3px; } .c5-modal__button:hover { color: #109C94; -webkit-text-decoration: #fff; text-decoration: #fff; font-weight: 600; -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .modaal-inner-wrapper { max-width: 100%; } .modaal-container { background: none; } .modaal-content-container { padding: 0; } .modaal-close { position: relative; top: auto; bottom: auto; right: auto; left: auto; width: unset; height: unset; background: none; border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 35px; margin-left: auto; margin-right: auto; } .modaal-close:hover { background: none; } .modaal-close::before { position: relative; content: url(../images/common/icon-minus.svg); padding-right: 5px; width: auto; height: auto; background: none; border-radius: 0; left: unset; top: unset; -webkit-transform: unset; transform: unset; } .modaal-close::after { display: none; } .modaal-close:focus::before, .modaal-close:focus::after, .modaal-close:hover::before, .modaal-close:hover::after { background: none; } .c5-footer_inquery { position: sticky; bottom: 0; background-color: rgba(47, 53, 61, 0.8); padding: 32px 0 34px; margin-top: 160px; margin-bottom: 0 !important; visibility: hidden; opacity: 0; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-footer_inquery--disp { visibility: visible; opacity: 1; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .c5-footer_inquery__btnWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 640px) { .c5-footer_inquery { margin-top: clamp(3.75rem, 18.75vw, 7.5rem); } } section { margin-bottom: 120px; } @media screen and (max-width: 640px) { section { margin-bottom: clamp(3.75rem, 18.75vw, 7.5rem); } } .c5-inner_padding { padding: 60px; } @media screen and (max-width: 980px) { .c5-inner_padding { padding: clamp(2.5rem, 0.136rem + 5.9vw, 3.75rem); } } @media screen and (max-width: 640px) { .c5-inner_padding { padding: 40px clamp(1.25rem, 6.25vw, 2.5rem); } } .c5-il-b { display: inline-block; } .c5-strong { font-size: 18px; font-weight: 600; letter-spacing: 0.1em; line-height: 2; } @media screen and (max-width: 640px) { .c5-strong { font-size: 16px; line-height: 1.6; } } .c5-annotation { font-size: 12px; margin-left: 12px; text-indent: -12px; margin-top: 10px; } .c5-annotation::before { content: "※"; } .s5-returnToTop { margin-top: 0; } .s5-returnToTop__button { -webkit-transition: opacity ease 0.3s 0.5s; transition: opacity ease 0.3s 0.5s; } .s5-returnToTop__button--hide { opacity: 0; pointer-events: none; -webkit-transition: opacity ease 0.3s 0s; transition: opacity ease 0.3s 0s; } @media screen and (max-width: 640px) { .c5-pc { display: none; } } .c5-sp { display: none; } @media screen and (max-width: 640px) { .c5-sp { display: block; } } .c5-stickyContact { background: rgba(0, 0, 0, 0.5); text-align: center; z-index: 1; position: sticky; left: 0; bottom: 0; width: 100%; padding: 10px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 756px) { .c5-stickyContact { padding: 10px; } } .c5-stickyContact.js-contactFadein { display: none; } .c5-stickyContact + .s5-returnToTop { margin: 0; } .c5-stickyContact ~ .s5-returnToTop .s5-returnToTop__inner1 { bottom: 50px; } .c5-btn-stickyContact { display: inline-block; color: #fff; background-color: #f5683a; font-size: 17px; line-height: 1.3; font-weight: bold; text-decoration: none; padding: 10px 20px; min-width: 240px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #f5683a; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .c5-btn-stickyContact:hover { color: #f5683a; text-decoration: none; background-color: #fff; } @media only screen and (max-width: 756px) { .c5-btn-stickyContact { min-width: 190px; font-size: min(14px, 3.8vw); padding: 10px; } } .c5-stickyContact-inner { max-width: 1200px; margin: 0 auto; } .c5-stickyContact-inner:has(> :nth-child(2)) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } @media only screen and (max-width: 756px) { .c5-stickyContact-inner:has(> :nth-child(2)) { gap: 10px; } } .c5-stickyContact-inner:has(> :nth-child(2)) > a { margin: 0 !important; } @media only screen and (max-width: 756px) { .c5-stickyContact-inner:has(> :nth-child(2)) > a { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%; min-width: 0; } }/*# sourceMappingURL=common.css.map */