:root { --bgColor: #fff; --mainDarkColor: #08848D; --redColor: #FF3E00; --onTxtColor: #fff; --borderColor: #EAEAEA; --color-fg-default: #000000; --txt-lightColor: #FFFFFF; --txt-darkColor: #2C2C2C; --txt-thinColor: #C1BBBD; --base1Color: #FFFFFF; --base1-txt-bodyColor: var(--txt-darkColor); --base2Color: #F7F7F7; --base2-txt-bodyColor: var(--txt-darkColor); --baseColor: var(--base1Color); --inversion-baseColor: var(--base2Color); /* 反転カラー */ --mainColor: var(--main-defColor); --main-txt-bodyColor: #FFFFFF; --main05Color: #2AA1A4; --main05-txt-bodyColor: #FFFFFF; --subColor: #F9E34F; --thirdColor: #DBCFB9; --third-txt-bodyColor: #FFFFFF; --conversionColor: #F34811; --conversion-txt-bodyColor: #FFFFFF; --headerColor: #08848C; --header-txt-bodyColor: #FFFFFF; --gray-darkColor: #CBCBCB; --gray-thinColor: #EAEAEA; --lineColor: #39C45D; --line-txt-bodyColor: #FFFFFF; --line-txt-primaryColor: #FCFF6B; --product-footer-sitemap-bg-Color: #435764; --product-footer-sitemap-txt-bodyColor: #FFFFFF; --shop-float-bg-Color: #414141; --shop-float-txt-bodyColor: #FFFFFF; --blueDarkColor: #176eb7; --fweight-light: 300; --fweight-normal: 400; --fweight-medium: 500; --fweight-semibold: 600; --fweight-bold: 700; --fsize-base: 23; --s-large-content-width: 1400px; --s-content-width: 1200px; --s-content-small-width: 980px; --fsize-ratio: 1.2; --fsize-medium: calc(var(--fsize-base)* 1px); --fsize-x-medium: calc(var(--fsize-medium)* 1.1); --fsize-negative-ratio: calc(2 - var(--fsize-ratio)); --fsize-large: calc(var(--fsize-medium)* var(--fsize-ratio)); --fsize-x-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxxxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-xxxxxxxxxx-large: calc(var(--fsize-medium)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --fsize-small: calc(var(--fsize-medium)* var(--fsize-negative-ratio)); --fsize-x-small: calc(var(--fsize-medium)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)); --fsize-xx-small: calc(var(--fsize-medium)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)); --fsize-xxx-small: calc(var(--fsize-medium)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)); --lineheight-medium: var(--fsize-ratio); --lineheight-large: calc(var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-x-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xxx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xxxx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xxxxx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xxxxxx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-xxxxxxx-large: calc(var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)* var(--fsize-ratio)); --lineheight-small: var(--fsize-negative-ratio); --lineheight-x-small: calc(var(--fsize-negative-ratio)* var(--fsize-negative-ratio)); --lineheight-xx-small: calc(var(--fsize-negative-ratio)* var(--fsize-negative-ratio)* var(--fsize-negative-ratio)); --ffont-display: var(--fsize-xxxx-large); --ffont-title-large: var(--fsize-xx-large); --ffont-title-medium: var(--fsize-medium); --ffont-title-small: var(--fsize-medium); --ffont-subtitle: var(--fsize-small); --ffont-body-large: var(--fsize-medium); --ffont-body-medium: var(--fsize-medium); --ffont-body-small: var(--fsize-medium); --ffont-caption: var(--fsize-small); --ffont-family-system: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif; --ffont-family-english: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --size-base: 16px; --size-ratio: 1.2; --size-medium: calc(var(--fsize-base)* 1px); --size-negative-ratio: calc(2 - var(--size-ratio)); --size-large: calc(var(--size-medium)* var(--size-ratio)); --size-x-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)); --size-xx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxxxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-xxxxxxxxxx-large: calc(var(--size-medium)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)* var(--size-ratio)); --size-small: calc(var(--size-medium)* var(--size-negative-ratio)); --size-x-small: calc(var(--size-small)* var(--size-negative-ratio)* var(--size-negative-ratio)); --size-xx-small: calc(var(--size-x-small)* var(--size-negative-ratio)* var(--size-negative-ratio)* var(--size-negative-ratio)); --size-xxx-small: calc(var(--size-xx-small)* var(--size-negative-ratio)* var(--size-negative-ratio)* var(--size-negative-ratio)* var(--size-negative-ratio)); } :root { --swiper-navigation-color: var(--mainDarkColor); --swiper-pagination-color: var(--mainDarkColor); } @media only screen and (max-width: 1300px) { :root { --s-content-width: 90vw; } } @media only screen and (max-width: 1012px) { :root { --s-content-small-width: 90vw; } } @media only screen and (max-width: 768px) { :root { --fsize-base: 16; } } /* text */ .text-nowrap { white-space: nowrap; } .text-line-clamp-1 { min-height: 1.5em; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .text-line-clamp-2 { min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } @media (min-width: 544px) { .text-sm-center { text-align: center; } .text-sm-left { text-align: left; } .text-sm-right { text-align: right; } } @media (min-width: 768px) { .text-md-center { text-align: center; } .text-md-left { text-align: left; } .text-md-right { text-align: right; } } @media (min-width: 1012px) { .text-lg-center { text-align: center; } .text-lg-left { text-align: left; } .text-lg-right { text-align: right; } } @media (min-width: 1280px) { .text-xl-center { text-align: center; } .text-xl-left { text-align: left; } .text-xl-right { text-align: right; } } .lh-0 { line-height: 1; } .lh-1 { line-height: 1.2; } .lh-2 { line-height: 1.4; } .lh-3 { line-height: 1.6; } .lh-4 { line-height: 1.8; } .lh-5 { line-height: 2.0; } .lh-6 { line-height: 2.2; } .lh-7 { line-height: 2.4; } .lh-8 { line-height: 2.6; } .lh-9 { line-height: 2.8; } .lh-10 { line-height: 3.0; } *, ::before, ::after { background-repeat: no-repeat; box-sizing: border-box; } ::before, ::after { text-decoration: inherit; vertical-align: inherit; } * { padding: 0; margin: 0; } body { font-size: var(--ffont-body-medium); font-family: var(--ffont-family-system); overflow-x: hidden; } a { color: inherit; transition: all .3s; } a:hover { text-decoration: none; } strong { font-weight: var(--fweight-semibold); } ul { list-style: none; } figure { margin: 0; } figure svg { max-width: 100%; height: auto; } img { width: 100%; height: auto; max-width: 100%; } p:last-child { margin-bottom: 0; } .container-xxl { max-width: var(--s-large-content-width); margin-right: auto; margin-left: auto; } .container-xl { max-width: var(--s-content-width); margin-right: auto; margin-left: auto; } .container-md { max-width: var(--s-content-small-width); margin-right: auto; margin-left: auto; } .section { position: relative; padding-top: 4rem; padding-bottom: 4rem; } @media only screen and (max-width: 830px) { .section { padding-top: 3rem; padding-bottom: 3rem; } } .section.s-block-bg-image > .section-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--block-bg-image-style); background-image: var(--block-bg-image); } .section > .section-bg { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: calc(100%); background-position: left bottom; background-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; z-index: 1; } .section > .section-inner { position: relative; z-index: 2; } .en { font-family: var(--ffont-family-english); font-weight: var(--fweight-semibold); } /* font-color */ .color-fg-danger { color: var(--conversionColor) !important; --v-iconColor: var(--conversionColor); } .color-txt-thin { color: var(--txt-thinColor); } .color-gray-dark { color: var(--gray-darkColor); } .color-gray-thin { color: var(--gray-thinColor); } .color-main { color: var(--mainColor); } .color-mainDark { color: var(--mainDarkColor); } .color-conversion { color: var(--conversionColor); } .color-white { color: #FFFFFF; } .s-base1-bgcolor { --baseColor: var(--base1Color); --inversion-baseColor: var(--base2Color); background-color: var(--baseColor); color: var(--base1-txt-bodyColor); } .s-base2-bgcolor { --baseColor: var(--base2Color); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); color: var(--base2-txt-bodyColor); } .s-inversion-bgcolor { background-color: var(--inversion-baseColor); } .s-alternating-bgcolor:nth-child(2n) { --baseColor: var(--base1Color); --inversion-baseColor: var(--base2Color); background-color: var(--baseColor); } .s-alternating-bgcolor:nth-child(2n+1) { --baseColor: var(--base2Color); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); } .s-alternating-reverse .s-alternating-bgcolor:nth-child(2n+1) { --baseColor: var(--base1Color); --inversion-baseColor: var(--base2Color); background-color: var(--baseColor); } .s-alternating-reverse .s-alternating-bgcolor:nth-child(2n+0) { --baseColor: var(--base2Color); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); } .s-main-bgcolor { --baseColor: var(--mainColor); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); color: var(--main-txt-bodyColor); } .s-main05-bgcolor { --baseColor: var(--mainColor); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); color: var(--main05-txt-bodyColor); } .s-mainDark-bgcolor { --v-iconColor: var(--main-txt-bodyColor); background-color: var(--mainDarkColor); color: var(--main-txt-bodyColor); } .s-sub-bgcolor { background-color: var(--subColor); } .s-conversion-bgcolor { --baseColor: var(--conversionColor); --txtColor: var(--conversion-txt-bodyColor); background-color: var(--baseColor); color: var(--txtColor); } .s-header-bgcolor { background-color: var(--headerColor); color: var(--header-txt-bodyColor); } .s-shop-float-bgcolor { background-color: var(--shop-float-bg-Color); color: var(--shop-float-txt-bodyColor); } .s-gray-dark-bgcolor { --baseColor: var(--gray-darkColor); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); color: var(--base-txt-bodyColor); } .s-gray-thin-bgcolor { --baseColor: var(--gray-thinColor); --inversion-baseColor: var(--base1Color); background-color: var(--baseColor); color: var(--base-txt-bodyColor); } .s-line-bgcolor { --baseColor: var(--lineColor); --inversion-baseColor: var(--line-txt-bodyColor); --txtColor: var(--line-txt-bodyColor); background-color: var(--baseColor); color: var(--txtColor); } .s-black-bgcolor { --bgColor: #000000; --inversion-baseColor: #FFFFFF; --txtColor: #FFFFFF; --v-iconColor: var(--txtColor); background-color: var(--bgColor); color: var(--txtColor); } /* 表示・非表示設定 */ @media only screen and (min-width: 1581px) { .hide-child-br-max-1500 br { display: none !important; } .view-max-1500 { display: none !important; } } @media only screen and (max-width: 1580px) { .hide-child-br-min-1500 br { display: none !important; } .view-min-1500 { display: none !important; } } @media only screen and (min-width: 1481px) { .hide-child-br-max-1400 br { display: none !important; } .view-max-1400 { display: none !important; } } @media only screen and (max-width: 1480px) { .hide-child-br-min-1400 br { display: none !important; } .view-min-1400 { display: none !important; } } @media only screen and (min-width: 1381px) { .hide-child-br-max-1300 br { display: none !important; } .view-max-1300 { display: none !important; } } @media only screen and (max-width: 1380px) { .hide-child-br-min-1300 br { display: none !important; } .view-min-1300 { display: none !important; } } @media only screen and (min-width: 1280px) { .hide-child-br-max-1200 br { display: none !important; } .view-max-1200 { display: none !important; } } @media only screen and (max-width: 1279px) { .hide-child-br-min-1200 br { display: none !important; } .view-min-1200 { display: none !important; } .view-num4-min-1200 > *:nth-child(n+5) { display: none !important; } /* 4つだけにする */ .view-num5-min-1200 > *:nth-child(n+6) { display: none !important; } /* 5つだけにする */ .view-num6-min-1200 > *:nth-child(n+7) { display: none !important; } /* 6つだけにする */ .view-num7-min-1200 > *:nth-child(n+8) { display: none !important; } /* 7つだけにする */ .view-num8-min-1200 > *:nth-child(n+9) { display: none !important; } /* 8つだけにする */ .view-num9-min-1200 > *:nth-child(n+10) { display: none !important; } /* 9つだけにする */ .view-num10-min-1200 > *:nth-child(n+11) { display: none !important; } /* 10つだけにする */ .view-num11-min-1200 > *:nth-child(n+12) { display: none !important; } /* 11つだけにする */ .view-num12-min-1200 > *:nth-child(n+13) { display: none !important; } /* 12つだけにする */ .view-num13-min-1200 > *:nth-child(n+14) { display: none !important; } /* 13つだけにする */ .view-num14-min-1200 > *:nth-child(n+15) { display: none !important; } /* 14つだけにする */ .view-num15-min-1200 > *:nth-child(n+16) { display: none !important; } /* 15つだけにする */ } @media only screen and (min-width: 1181px) { .hide-child-br-max-xl br { display: none !important; } .view-max-xl { display: none !important; } .view-max-1100 { display: none !important; } } @media only screen and (max-width: 1180px) { .hide-child-br-min-xl br { display: none !important; } .view-min-xl { display: none !important; } .view-min-1100 { display: none !important; } .view-num4-min-1100 > *:nth-child(n+5) { display: none !important; } /* 4つだけにする */ .view-num5-min-1100 > *:nth-child(n+6) { display: none !important; } /* 5つだけにする */ .view-num6-min-1100 > *:nth-child(n+7) { display: none !important; } /* 6つだけにする */ .view-num7-min-1100 > *:nth-child(n+8) { display: none !important; } /* 7つだけにする */ .view-num8-min-1100 > *:nth-child(n+9) { display: none !important; } /* 8つだけにする */ .view-num9-min-1100 > *:nth-child(n+10) { display: none !important; } /* 9つだけにする */ .view-num10-min-1100 > *:nth-child(n+11) { display: none !important; } /* 10つだけにする */ .view-num11-min-1100 > *:nth-child(n+12) { display: none !important; } /* 11つだけにする */ .view-num12-min-1100 > *:nth-child(n+13) { display: none !important; } /* 12つだけにする */ .view-num13-min-1100 > *:nth-child(n+14) { display: none !important; } /* 13つだけにする */ .view-num14-min-1100 > *:nth-child(n+15) { display: none !important; } /* 14つだけにする */ .view-num15-min-1100 > *:nth-child(n+16) { display: none !important; } /* 15つだけにする */ } @media only screen and (min-width: 1013px) { .hide-child-br-max-lg br { display: none !important; } .view-max-lg { display: none !important; } .view-max-1000 { display: none !important; } } @media only screen and (max-width: 1012px) { .hide-child-br-min-lg br { display: none !important; } .view-min-lg { display: none !important; } .view-min-1000 { display: none !important; } .view-num4-min-1000 > *:nth-child(n+5) { display: none !important; } /* 4つだけにする */ .view-num5-min-1000 > *:nth-child(n+6) { display: none !important; } /* 5つだけにする */ .view-num6-min-1000 > *:nth-child(n+7) { display: none !important; } /* 6つだけにする */ .view-num7-min-1000 > *:nth-child(n+8) { display: none !important; } /* 7つだけにする */ .view-num8-min-1000 > *:nth-child(n+9) { display: none !important; } /* 8つだけにする */ .view-num9-min-1000 > *:nth-child(n+10) { display: none !important; } /* 9つだけにする */ .view-num10-min-1000 > *:nth-child(n+11) { display: none !important; } /* 10つだけにする */ .view-num11-min-1000 > *:nth-child(n+12) { display: none !important; } /* 11つだけにする */ .view-num12-min-1000 > *:nth-child(n+13) { display: none !important; } /* 12つだけにする */ .view-num13-min-1000 > *:nth-child(n+14) { display: none !important; } /* 13つだけにする */ .view-num14-min-1000 > *:nth-child(n+15) { display: none !important; } /* 14つだけにする */ .view-num15-min-1000 > *:nth-child(n+16) { display: none !important; } /* 15つだけにする */ } @media only screen and (min-width: 769px) { .hide-child-br-max-md br { display: none !important; } .view-max-md { display: none !important; } .view-max-700 { display: none !important; } } @media only screen and (max-width: 768px) { .hide-child-br-min-md br { display: none !important; } .view-min-md { display: none !important; } .view-min-700 { display: none !important; } .view-num4-min-700 > *:nth-child(n+5) { display: none !important; } /* 4つだけにする */ .view-num5-min-700 > *:nth-child(n+6) { display: none !important; } /* 5つだけにする */ .view-num6-min-700 > *:nth-child(n+7) { display: none !important; } /* 6つだけにする */ .view-num7-min-700 > *:nth-child(n+8) { display: none !important; } /* 7つだけにする */ .view-num8-min-700 > *:nth-child(n+9) { display: none !important; } /* 8つだけにする */ .view-num9-min-700 > *:nth-child(n+10) { display: none !important; } /* 9つだけにする */ .view-num10-min-700 > *:nth-child(n+11) { display: none !important; } /* 10つだけにする */ .view-num11-min-700 > *:nth-child(n+12) { display: none !important; } /* 11つだけにする */ .view-num12-min-700 > *:nth-child(n+13) { display: none !important; } /* 12つだけにする */ .view-num13-min-700 > *:nth-child(n+14) { display: none !important; } /* 13つだけにする */ .view-num14-min-700 > *:nth-child(n+15) { display: none !important; } /* 14つだけにする */ .view-num15-min-700 > *:nth-child(n+16) { display: none !important; } /* 15つだけにする */ } @media only screen and (min-width: 544px) { .hide-child-br-max-sm br { display: none !important; } .view-max-sm { display: none !important; } .view-max-500 { display: none !important; } } @media only screen and (max-width: 543px) { .hide-child-br-min-sm br { display: none !important; } .view-min-sm { display: none !important; } .view-min-500 { display: none !important; } } /* col-auto */ @media (min-width: 544px) { .col-sm-auto { width: auto; } } @media (min-width: 768px) { .col-md-auto { width: auto; } } @media (min-width: 1012px) { .col-lg-auto { width: auto; } } @media (min-width: 1280px) { .col-xl-auto { width: auto; } } /* GAP */ .flex-gap-0 { gap: 0; } .flex-gap-1 { gap: 0.5rem; } .flex-gap-2 { gap: 1rem; } .flex-gap-3 { gap: 1.5rem; } .flex-gap-4 { gap: 2rem; } .flex-gap-5 { gap: 2.5rem; } .flex-gap-6 { gap: 3rem; } .flex-gap-7 { gap: 3.5rem; } .flex-gap-8 { gap: 4rem; } @media (min-width: 544px) { .flex-gap-sm-0 { gap: 0; } .flex-gap-sm-1 { gap: 0.5rem; } .flex-gap-sm-2 { gap: 1rem; } .flex-gap-sm-3 { gap: 1.5rem; } .flex-gap-sm-4 { gap: 2rem; } .flex-gap-sm-5 { gap: 2.5rem; } .flex-gap-sm-6 { gap: 3rem; } .flex-gap-sm-7 { gap: 3.5rem; } .flex-gap-sm-8 { gap: 4rem; } } @media (min-width: 768px) { .flex-gap-md-0 { gap: 0; } .flex-gap-md-1 { gap: 0.5rem; } .flex-gap-md-2 { gap: 1rem; } .flex-gap-md-3 { gap: 1.5rem; } .flex-gap-md-4 { gap: 2rem; } .flex-gap-md-5 { gap: 2.5rem; } .flex-gap-md-6 { gap: 3rem; } .flex-gap-md-7 { gap: 3.5rem; } .flex-gap-md-8 { gap: 4rem; } } @media (min-width: 1012px) { .flex-gap-lg-0 { gap: 0; } .flex-gap-lg-1 { gap: 0.5rem; } .flex-gap-lg-2 { gap: 1rem; } .flex-gap-lg-3 { gap: 1.5rem; } .flex-gap-lg-4 { gap: 2rem; } .flex-gap-lg-5 { gap: 2.5rem; } .flex-gap-lg-6 { gap: 3rem; } .flex-gap-lg-7 { gap: 3.5rem; } .flex-gap-lg-8 { gap: 4rem; } } @media (min-width: 1280px) { .flex-gap-xl-0 { gap: 0; } .flex-gap-xl-1 { gap: 0.5rem; } .flex-gap-xl-2 { gap: 1rem; } .flex-gap-xl-3 { gap: 1.5rem; } .flex-gap-xl-4 { gap: 2rem; } .flex-gap-xl-5 { gap: 2.5rem; } .flex-gap-xl-6 { gap: 3rem; } .flex-gap-xl-7 { gap: 3.5rem; } .flex-gap-xl-8 { gap: 4rem; } } /* Font-Size */ .fsize-0 { font-size: 0; } .fsize-x-small { font-size: var(--fsize-x-small); } .fsize-small { font-size: var(--fsize-small); } .fsize-medium { font-size: var(--fsize-medium); } .fsize-x-medium { font-size: var(--fsize-x-medium); } .fsize-large { font-size: var(--fsize-large); } .fsize-x-large { font-size: var(--fsize-x-large); } .fsize-xx-large { font-size: var(--fsize-xx-large); } .fsize-xxx-large { font-size: var(--fsize-xxx-large); } .fsize-xxxx-large { font-size: var(--fsize-xxxx-large); } .fsize-xxxxx-large { font-size: var(--fsize-xxxxx-large); } .fsize-xxxxxx-large { font-size: var(--fsize-xxxxxx-large); } @media (min-width: 544px) { .fsize-sm-0 { font-size: 0; } .fsize-sm-x-small { font-size: var(--fsize-x-small); } .fsize-sm-small { font-size: var(--fsize-small); } .fsize-sm-medium { font-size: var(--fsize-medium); } .fsize-sm-large { font-size: var(--fsize-large); } .fsize-sm-x-large { font-size: var(--fsize-large); } } @media (min-width: 768px) { .fsize-md-0 { font-size: 0; } .fsize-md-x-small { font-size: var(--fsize-x-small); } .fsize-md-small { font-size: var(--fsize-small); } .fsize-md-medium { font-size: var(--fsize-medium); } .fsize-md-large { font-size: var(--fsize-large); } .fsize-md-x-large { font-size: var(--fsize-large); } } @media (min-width: 1012px) { .fsize-lg-0 { font-size: 0; } .fsize-lg-x-small { font-size: var(--fsize-x-small); } .fsize-lg-small { font-size: var(--fsize-small); } .fsize-lg-medium { font-size: var(--fsize-medium); } .fsize-lg-large { font-size: var(--fsize-large); } .fsize-lg-x-large { font-size: var(--fsize-large); } } @media (min-width: 1280px) { .fsize-xl-0 { font-size: 0; } .fsize-xl-x-small { font-size: var(--fsize-x-small); } .fsize-xl-small { font-size: var(--fsize-small); } .fsize-xl-medium { font-size: var(--fsize-medium); } .fsize-xl-large { font-size: var(--fsize-large); } .fsize-xl-x-large { font-size: var(--fsize-large); } } .fweight-light{ font-weight: var(--fweight-light); } .fweight-normal{ font-weight: var(--fweight-normal); } .fweight-medium{ font-weight: var(--fweight-medium); } .fweight-semibold{ font-weight: var(--fweight-semibold); } .fweight-bold{ font-weight: var(--fweight-bold); } /* Height */ .height-fix { height: 100%; } .height-0 { height: 0; } .height-1 { height: 1rem; } .height-2 { height: 2rem; } .height-3 { height: 3rem; } .height-4 { height: 4rem; } .height-5 { height: 5rem; } .height-6 { height: 6rem; } .height-7 { height: 7rem; } .height-8 { height: 8rem; } .height-9 { height: 9rem; } .height-10 { height: 10rem; } .height-11 { height: 11rem; } .height-12 { height: 12rem; } .height-13 { height: 13rem; } .height-14 { height: 14rem; } .height-15 { height: 15rem; } .min-height-0 { min-height: 0; } .min-height-1 { min-height: 1rem; } .min-height-2 { min-height: 2rem; } .min-height-3 { min-height: 3rem; } .min-height-4 { min-height: 4rem; } .min-height-5 { min-height: 5rem; } .min-height-6 { min-height: 6rem; } .min-height-7 { min-height: 7rem; } .min-height-8 { min-height: 8rem; } .min-height-9 { min-height: 9rem; } .min-height-10 { min-height: 10rem; } .min-height-11 { min-height: 11rem; } .min-height-12 { min-height: 12rem; } .min-height-13 { min-height: 13rem; } .min-height-14 { min-height: 14rem; } .min-height-15 { min-height: 15rem; } @media (min-width: 544px) { .min-height-sm-0 { min-height: 0; } .min-height-sm-1 { min-height: 1rem; } .min-height-sm-2 { min-height: 2rem; } .min-height-sm-3 { min-height: 3rem; } .min-height-sm-4 { min-height: 4rem; } .min-height-sm-5 { min-height: 5rem; } .min-height-sm-6 { min-height: 6rem; } .min-height-sm-7 { min-height: 7rem; } .min-height-sm-8 { min-height: 8rem; } .min-height-sm-9 { min-height: 9rem; } .min-height-sm-10 { min-height: 10rem; } .min-height-sm-11 { min-height: 11rem; } .min-height-sm-12 { min-height: 12rem; } .min-height-sm-13 { min-height: 13rem; } .min-height-sm-14 { min-height: 14rem; } .min-height-sm-15 { min-height: 15rem; } } @media (min-width: 768px) { .min-height-md-0 { min-height: 0; } .min-height-md-1 { min-height: 1rem; } .min-height-md-2 { min-height: 2rem; } .min-height-md-3 { min-height: 3rem; } .min-height-md-4 { min-height: 4rem; } .min-height-md-5 { min-height: 5rem; } .min-height-md-6 { min-height: 6rem; } .min-height-md-7 { min-height: 7rem; } .min-height-md-8 { min-height: 8rem; } .min-height-md-9 { min-height: 9rem; } .min-height-md-10 { min-height: 10rem; } .min-height-md-11 { min-height: 11rem; } .min-height-md-12 { min-height: 12rem; } .min-height-md-13 { min-height: 13rem; } .min-height-md-14 { min-height: 14rem; } .min-height-md-15 { min-height: 15rem; } } @media (min-width: 1012px) { .min-height-lg-0 { min-height: 0; } .min-height-lg-1 { min-height: 1rem; } .min-height-lg-2 { min-height: 2rem; } .min-height-lg-3 { min-height: 3rem; } .min-height-lg-4 { min-height: 4rem; } .min-height-lg-5 { min-height: 5rem; } .min-height-lg-6 { min-height: 6rem; } .min-height-lg-7 { min-height: 7rem; } .min-height-lg-8 { min-height: 8rem; } .min-height-lg-9 { min-height: 9rem; } .min-height-lg-10 { min-height: 10rem; } .min-height-lg-11 { min-height: 11rem; } .min-height-lg-12 { min-height: 12rem; } .min-height-lg-13 { min-height: 13rem; } .min-height-lg-14 { min-height: 14rem; } .min-height-lg-15 { min-height: 15rem; } } @media (min-width: 1280px) { .min-height-xl-0 { min-height: 0; } .min-height-xl-1 { min-height: 1rem; } .min-height-xl-2 { min-height: 2rem; } .min-height-xl-3 { min-height: 3rem; } .min-height-xl-4 { min-height: 4rem; } .min-height-xl-5 { min-height: 5rem; } .min-height-xl-6 { min-height: 6rem; } .min-height-xl-7 { min-height: 7rem; } .min-height-xl-8 { min-height: 8rem; } .min-height-xl-9 { min-height: 9rem; } .min-height-xl-10 { min-height: 10rem; } .min-height-xl-11 { min-height: 11rem; } .min-height-xl-12 { min-height: 12rem; } .min-height-xl-13 { min-height: 13rem; } .min-height-xl-14 { min-height: 14rem; } .min-height-xl-15 { min-height: 15rem; } } .box-crop-center { overflow: hidden; display: flex; align-items: center; } /* width */ .width-fix { width: 100%; } .width-0 { width: 0; } .width-1 { width: 1rem; --v-iconSize: 1rem; } .width-2 { width: 2rem; --v-iconSize: 2rem; } .width-3 { width: 3rem; --v-iconSize: 3rem; } .width-4 { width: 4rem; --v-iconSize: 4rem; } .width-5 { width: 5rem; --v-iconSize: 5rem; } .width-6 { width: 6rem; --v-iconSize: 6rem; } .width-7 { width: 7rem; --v-iconSize: 7rem; } .width-8 { width: 8rem; --v-iconSize: 8rem; } .width-9 { width: 9rem; --v-iconSize: 9rem; } .width-10 { width: 10rem; --v-iconSize: 10rem; } .width-11 { width: 11rem; --v-iconSize: 11rem; } .width-12 { width: 12rem; --v-iconSize: 12rem; } .width-13 { width: 13rem; --v-iconSize: 13rem; } .width-14 { width: 14rem; --v-iconSize: 14rem; } .width-15 { width: 15rem; --v-iconSize: 15rem; } .width-16 { width: 16rem; --v-iconSize: 16rem; } .width-17 { width: 17rem; --v-iconSize: 17rem; } .width-18 { width: 18rem; --v-iconSize: 18rem; } .width-19 { width: 19rem; --v-iconSize: 19rem; } .width-20 { width: 20rem; --v-iconSize: 20rem; } .width-21 { width: 21rem; --v-iconSize: 21rem; } .width-22 { width: 22rem; --v-iconSize: 22rem; } .width-23 { width: 23rem; --v-iconSize: 23rem; } .width-24 { width: 24rem; --v-iconSize: 24rem; } .width-25 { width: 25rem; --v-iconSize: 25rem; } .width-26 { width: 26rem; --v-iconSize: 26rem; } .width-27 { width: 27rem; --v-iconSize: 27rem; } .width-28 { width: 28rem; --v-iconSize: 28rem; } .width-29 { width: 29rem; --v-iconSize: 29rem; } .width-30 { width: 30rem; --v-iconSize: 30rem; } @media (min-width: 544px) { .width-sm-fix { width: 100%; } .width-sm-0 { width: 0; } .width-sm-1 { width: 1rem; --v-iconSize: 1rem; } .width-sm-2 { width: 2rem; --v-iconSize: 2rem; } .width-sm-3 { width: 3rem; --v-iconSize: 3rem; } .width-sm-4 { width: 4rem; --v-iconSize: 4rem; } .width-sm-5 { width: 5rem; --v-iconSize: 5rem; } .width-sm-6 { width: 6rem; --v-iconSize: 6rem; } .width-sm-7 { width: 7rem; --v-iconSize: 7rem; } .width-sm-8 { width: 8rem; --v-iconSize: 8rem; } .width-sm-9 { width: 9rem; --v-iconSize: 9rem; } .width-sm-10 { width: 10rem; --v-iconSize: 10rem; } .width-sm-11 { width: 11rem; --v-iconSize: 11rem; } .width-sm-12 { width: 12rem; --v-iconSize: 12rem; } .width-sm-13 { width: 13rem; --v-iconSize: 13rem; } .width-sm-14 { width: 14rem; --v-iconSize: 14rem; } .width-sm-15 { width: 15rem; --v-iconSize: 15rem; } .width-sm-16 { width: 16rem; --v-iconSize: 16rem; } .width-sm-17 { width: 17rem; --v-iconSize: 17rem; } .width-sm-18 { width: 18rem; --v-iconSize: 18rem; } .width-sm-19 { width: 19rem; --v-iconSize: 19rem; } .width-sm-20 { width: 20rem; --v-iconSize: 20rem; } .width-sm-21 { width: 21rem; --v-iconSize: 21rem; } .width-sm-22 { width: 22rem; --v-iconSize: 22rem; } .width-sm-23 { width: 23rem; --v-iconSize: 23rem; } .width-sm-24 { width: 24rem; --v-iconSize: 24rem; } .width-sm-25 { width: 25rem; --v-iconSize: 25rem; } .width-sm-26 { width: 26rem; --v-iconSize: 26rem; } .width-sm-27 { width: 27rem; --v-iconSize: 27rem; } .width-sm-28 { width: 28rem; --v-iconSize: 28rem; } .width-sm-29 { width: 29rem; --v-iconSize: 29rem; } .width-sm-30 { width: 30rem; --v-iconSize: 30rem; } } @media (min-width: 768px) { .width-md-fix { width: 100%; } .width-md-0 { width: 0; } .width-md-1 { width: 1rem; --v-iconSize: 1rem; } .width-md-2 { width: 2rem; --v-iconSize: 2rem; } .width-md-3 { width: 3rem; --v-iconSize: 3rem; } .width-md-4 { width: 4rem; --v-iconSize: 4rem; } .width-md-5 { width: 5rem; --v-iconSize: 5rem; } .width-md-6 { width: 6rem; --v-iconSize: 6rem; } .width-md-7 { width: 7rem; --v-iconSize: 7rem; } .width-md-8 { width: 8rem; --v-iconSize: 8rem; } .width-md-9 { width: 9rem; --v-iconSize: 9rem; } .width-md-10 { width: 10rem; --v-iconSize: 10rem; } .width-md-11 { width: 11rem; --v-iconSize: 11rem; } .width-md-12 { width: 12rem; --v-iconSize: 12rem; } .width-md-13 { width: 13rem; --v-iconSize: 13rem; } .width-md-14 { width: 14rem; --v-iconSize: 14rem; } .width-md-15 { width: 15rem; --v-iconSize: 15rem; } .width-md-16 { width: 16rem; --v-iconSize: 16rem; } .width-md-17 { width: 17rem; --v-iconSize: 17rem; } .width-md-18 { width: 18rem; --v-iconSize: 18rem; } .width-md-19 { width: 19rem; --v-iconSize: 19rem; } .width-md-20 { width: 20rem; --v-iconSize: 20rem; } .width-md-21 { width: 21rem; --v-iconSize: 21rem; } .width-md-22 { width: 22rem; --v-iconSize: 22rem; } .width-md-23 { width: 23rem; --v-iconSize: 23rem; } .width-md-24 { width: 24rem; --v-iconSize: 24rem; } .width-md-25 { width: 25rem; --v-iconSize: 25rem; } .width-md-26 { width: 26rem; --v-iconSize: 26rem; } .width-md-27 { width: 27rem; --v-iconSize: 27rem; } .width-md-28 { width: 28rem; --v-iconSize: 28rem; } .width-md-29 { width: 29rem; --v-iconSize: 29rem; } .width-md-30 { width: 30rem; --v-iconSize: 30rem; } } @media (min-width: 1012px) { .width-lg-fix { width: 100%; } .width-lg-0 { width: 0; } .width-lg-1 { width: 1rem; --v-iconSize: 1rem; } .width-lg-2 { width: 2rem; --v-iconSize: 2rem; } .width-lg-3 { width: 3rem; --v-iconSize: 3rem; } .width-lg-4 { width: 4rem; --v-iconSize: 4rem; } .width-lg-5 { width: 5rem; --v-iconSize: 5rem; } .width-lg-6 { width: 6rem; --v-iconSize: 6rem; } .width-lg-7 { width: 7rem; --v-iconSize: 7rem; } .width-lg-8 { width: 8rem; --v-iconSize: 8rem; } .width-lg-9 { width: 9rem; --v-iconSize: 9rem; } .width-lg-10 { width: 10rem; --v-iconSize: 10rem; } .width-lg-11 { width: 11rem; --v-iconSize: 11rem; } .width-lg-12 { width: 12rem; --v-iconSize: 12rem; } .width-lg-13 { width: 13rem; --v-iconSize: 13rem; } .width-lg-14 { width: 14rem; --v-iconSize: 14rem; } .width-lg-15 { width: 15rem; --v-iconSize: 15rem; } .width-lg-16 { width: 16rem; --v-iconSize: 16rem; } .width-lg-17 { width: 17rem; --v-iconSize: 17rem; } .width-lg-18 { width: 18rem; --v-iconSize: 18rem; } .width-lg-19 { width: 19rem; --v-iconSize: 19rem; } .width-lg-20 { width: 20rem; --v-iconSize: 20rem; } .width-lg-21 { width: 21rem; --v-iconSize: 21rem; } .width-lg-22 { width: 22rem; --v-iconSize: 22rem; } .width-lg-23 { width: 23rem; --v-iconSize: 23rem; } .width-lg-24 { width: 24rem; --v-iconSize: 24rem; } .width-lg-25 { width: 25rem; --v-iconSize: 25rem; } .width-lg-26 { width: 26rem; --v-iconSize: 26rem; } .width-lg-27 { width: 27rem; --v-iconSize: 27rem; } .width-lg-28 { width: 28rem; --v-iconSize: 28rem; } .width-lg-29 { width: 29rem; --v-iconSize: 29rem; } .width-lg-30 { width: 30rem; --v-iconSize: 30rem; } } @media (min-width: 1280px) { .width-xl-fix { width: 100%; } .width-xl-0 { width: 0; } .width-xl-1 { width: 1rem; --v-iconSize: 1rem; } .width-xl-2 { width: 2rem; --v-iconSize: 2rem; } .width-xl-3 { width: 3rem; --v-iconSize: 3rem; } .width-xl-4 { width: 4rem; --v-iconSize: 4rem; } .width-xl-5 { width: 5rem; --v-iconSize: 5rem; } .width-xl-6 { width: 6rem; --v-iconSize: 6rem; } .width-xl-7 { width: 7rem; --v-iconSize: 7rem; } .width-xl-8 { width: 8rem; --v-iconSize: 8rem; } .width-xl-9 { width: 9rem; --v-iconSize: 9rem; } .width-xl-10 { width: 10rem; --v-iconSize: 10rem; } .width-xl-11 { width: 11rem; --v-iconSize: 11rem; } .width-xl-12 { width: 12rem; --v-iconSize: 12rem; } .width-xl-13 { width: 13rem; --v-iconSize: 13rem; } .width-xl-14 { width: 14rem; --v-iconSize: 14rem; } .width-xl-15 { width: 15rem; --v-iconSize: 15rem; } .width-xl-16 { width: 16rem; --v-iconSize: 16rem; } .width-xl-17 { width: 17rem; --v-iconSize: 17rem; } .width-xl-18 { width: 18rem; --v-iconSize: 18rem; } .width-xl-19 { width: 19rem; --v-iconSize: 19rem; } .width-xl-20 { width: 20rem; --v-iconSize: 20rem; } .width-xl-21 { width: 21rem; --v-iconSize: 21rem; } .width-xl-22 { width: 22rem; --v-iconSize: 22rem; } .width-xl-23 { width: 23rem; --v-iconSize: 23rem; } .width-xl-24 { width: 24rem; --v-iconSize: 24rem; } .width-xl-25 { width: 25rem; --v-iconSize: 25rem; } .width-xl-26 { width: 26rem; --v-iconSize: 26rem; } .width-xl-27 { width: 27rem; --v-iconSize: 27rem; } .width-xl-28 { width: 28rem; --v-iconSize: 28rem; } .width-xl-29 { width: 29rem; --v-iconSize: 29rem; } .width-xl-30 { width: 30rem; --v-iconSize: 30rem; } } .max-width-fix { max-width: 100%; } .max-width-1 { max-width: 1rem; } .max-width-2 { max-width: 2rem; } .max-width-3 { max-width: 3rem; } .max-width-4 { max-width: 4rem; } .max-width-5 { max-width: 5rem; } .max-width-6 { max-width: 6rem; } .max-width-7 { max-width: 7rem; } .max-width-8 { max-width: 8rem; } .max-width-9 { max-width: 9rem; } .max-width-10 { max-width: 10rem; } .max-width-11 { max-width: 11rem; } .max-width-12 { max-width: 12rem; } .max-width-13 { max-width: 13rem; } .max-width-14 { max-width: 14rem; } .max-width-15 { max-width: 15rem; } .max-width-16 { max-width: 16rem; } .max-width-17 { max-width: 17rem; } .max-width-18 { max-width: 18rem; } .max-width-19 { max-width: 19rem; } .max-width-20 { max-width: 20rem; } .max-width-21 { max-width: 21rem; } .max-width-22 { max-width: 22rem; } .max-width-23 { max-width: 23rem; } .max-width-24 { max-width: 24rem; } .max-width-25 { max-width: 25rem; } .max-width-26 { max-width: 26rem; } .max-width-27 { max-width: 27rem; } .max-width-28 { max-width: 28rem; } .max-width-29 { max-width: 29rem; } .max-width-30 { max-width: 30rem; } @media (min-width: 544px) { .max-sm-width-fix { max-width: 100%; } .max-sm-width-1 { max-width: 1rem; } .max-sm-width-2 { max-width: 2rem; } .max-sm-width-3 { max-width: 3rem; } .max-sm-width-4 { max-width: 4rem; } .max-sm-width-5 { max-width: 5rem; } .max-sm-width-6 { max-width: 6rem; } .max-sm-width-7 { max-width: 7rem; } .max-sm-width-8 { max-width: 8rem; } .max-sm-width-9 { max-width: 9rem; } .max-sm-width-10 { max-width: 10rem; } .max-sm-width-11 { max-width: 11rem; } .max-sm-width-12 { max-width: 12rem; } .max-sm-width-13 { max-width: 13rem; } .max-sm-width-14 { max-width: 14rem; } .max-sm-width-15 { max-width: 15rem; } .max-sm-width-16 { max-width: 16rem; } .max-sm-width-17 { max-width: 17rem; } .max-sm-width-18 { max-width: 18rem; } .max-sm-width-19 { max-width: 19rem; } .max-sm-width-20 { max-width: 20rem; } .max-sm-width-21 { max-width: 21rem; } .max-sm-width-22 { max-width: 22rem; } .max-sm-width-23 { max-width: 23rem; } .max-sm-width-24 { max-width: 24rem; } .max-sm-width-25 { max-width: 25rem; } .max-sm-width-26 { max-width: 26rem; } .max-sm-width-27 { max-width: 27rem; } .max-sm-width-28 { max-width: 28rem; } .max-sm-width-29 { max-width: 29rem; } .max-sm-width-30 { max-width: 30rem; } } @media (min-width: 768px) { .max-md-width-fix { max-width: 100%; } .max-md-width-1 { max-width: 1rem; } .max-md-width-2 { max-width: 2rem; } .max-md-width-3 { max-width: 3rem; } .max-md-width-4 { max-width: 4rem; } .max-md-width-5 { max-width: 5rem; } .max-md-width-6 { max-width: 6rem; } .max-md-width-7 { max-width: 7rem; } .max-md-width-8 { max-width: 8rem; } .max-md-width-9 { max-width: 9rem; } .max-md-width-10 { max-width: 10rem; } .max-md-width-11 { max-width: 11rem; } .max-md-width-12 { max-width: 12rem; } .max-md-width-13 { max-width: 13rem; } .max-md-width-14 { max-width: 14rem; } .max-md-width-15 { max-width: 15rem; } .max-md-width-16 { max-width: 16rem; } .max-md-width-17 { max-width: 17rem; } .max-md-width-18 { max-width: 18rem; } .max-md-width-19 { max-width: 19rem; } .max-md-width-20 { max-width: 20rem; } .max-md-width-21 { max-width: 21rem; } .max-md-width-22 { max-width: 22rem; } .max-md-width-23 { max-width: 23rem; } .max-md-width-24 { max-width: 24rem; } .max-md-width-25 { max-width: 25rem; } .max-md-width-26 { max-width: 26rem; } .max-md-width-27 { max-width: 27rem; } .max-md-width-28 { max-width: 28rem; } .max-md-width-29 { max-width: 29rem; } .max-md-width-30 { max-width: 30rem; } } @media (min-width: 1012px) { .max-lg-width-fix { max-width: 100%; } .max-lg-width-1 { max-width: 1rem; } .max-lg-width-2 { max-width: 2rem; } .max-lg-width-3 { max-width: 3rem; } .max-lg-width-4 { max-width: 4rem; } .max-lg-width-5 { max-width: 5rem; } .max-lg-width-6 { max-width: 6rem; } .max-lg-width-7 { max-width: 7rem; } .max-lg-width-8 { max-width: 8rem; } .max-lg-width-9 { max-width: 9rem; } .max-lg-width-10 { max-width: 10rem; } .max-lg-width-11 { max-width: 11rem; } .max-lg-width-12 { max-width: 12rem; } .max-lg-width-13 { max-width: 13rem; } .max-lg-width-14 { max-width: 14rem; } .max-lg-width-15 { max-width: 15rem; } .max-lg-width-16 { max-width: 16rem; } .max-lg-width-17 { max-width: 17rem; } .max-lg-width-18 { max-width: 18rem; } .max-lg-width-19 { max-width: 19rem; } .max-lg-width-20 { max-width: 20rem; } .max-lg-width-21 { max-width: 21rem; } .max-lg-width-22 { max-width: 22rem; } .max-lg-width-23 { max-width: 23rem; } .max-lg-width-24 { max-width: 24rem; } .max-lg-width-25 { max-width: 25rem; } .max-lg-width-26 { max-width: 26rem; } .max-lg-width-27 { max-width: 27rem; } .max-lg-width-28 { max-width: 28rem; } .max-lg-width-29 { max-width: 29rem; } .max-lg-width-30 { max-width: 30rem; } } @media (min-width: 1280px) { .max-xl-width-fix { max-width: 100%; } .max-xl-width-1 { max-width: 1rem; } .max-xl-width-2 { max-width: 2rem; } .max-xl-width-3 { max-width: 3rem; } .max-xl-width-4 { max-width: 4rem; } .max-xl-width-5 { max-width: 5rem; } .max-xl-width-6 { max-width: 6rem; } .max-xl-width-7 { max-width: 7rem; } .max-xl-width-8 { max-width: 8rem; } .max-xl-width-9 { max-width: 9rem; } .max-xl-width-10 { max-width: 10rem; } .max-xl-width-11 { max-width: 11rem; } .max-xl-width-12 { max-width: 12rem; } .max-xl-width-13 { max-width: 13rem; } .max-xl-width-14 { max-width: 14rem; } .max-xl-width-15 { max-width: 15rem; } .max-xl-width-16 { max-width: 16rem; } .max-xl-width-17 { max-width: 17rem; } .max-xl-width-18 { max-width: 18rem; } .max-xl-width-19 { max-width: 19rem; } .max-xl-width-20 { max-width: 20rem; } .max-xl-width-21 { max-width: 21rem; } .max-xl-width-22 { max-width: 22rem; } .max-xl-width-23 { max-width: 23rem; } .max-xl-width-24 { max-width: 24rem; } .max-xl-width-25 { max-width: 25rem; } .max-xl-width-26 { max-width: 26rem; } .max-xl-width-27 { max-width: 27rem; } .max-xl-width-28 { max-width: 28rem; } .max-xl-width-29 { max-width: 29rem; } .max-xl-width-30 { max-width: 30rem; } } /* postion */ .left-0 { left: 0; } .right-0 { right: 0; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } /* square */ .square-fix { aspect-ratio: 1 / 1; } .square-r80 { width: 80%; height: 80%; --v-iconSize: 80%; } .square-1 { width: 1rem; height: 1rem; --v-iconSize: 1rem; } .square-2 { width: 2rem; height: 2rem; --v-iconSize: 2rem; } .square-3 { width: 3rem; height: 3rem; --v-iconSize: 3rem; } .square-4 { width: 4rem; height: 4rem; --v-iconSize: 4rem; } .square-4_5 { width: 4.5rem; height: 4.5rem; } .square-5 { width: 5rem; height: 5rem; } .square-6 { width: 6rem; height: 6rem; } .square-7 { width: 7rem; height: 7rem; } .square-8 { width: 8rem; height: 8rem; } .square-9 { width: 9rem; height: 9rem; } .square-10 { width: 10rem; height: 10rem; } .square-11 { width: 11rem; height: 11rem; } .square-12 { width: 12rem; height: 12rem; } .square-13 { width: 13rem; height: 13rem; } .square-14 { width: 14rem; height: 14rem; } .square-15 { width: 15rem; height: 15rem; } .square-16 { width: 16rem; height: 16rem; } .square-17 { width: 17rem; height: 17rem; } .square-18 { width: 18rem; height: 18rem; } .square-19 { width: 19rem; height: 19rem; } .square-20 { width: 20rem; height: 20rem; } .square-21 { width: 21rem; height: 21rem; } .square-22 { width: 22rem; height: 22rem; } .square-23 { width: 23rem; height: 23rem; } .square-24 { width: 24rem; height: 24rem; } .square-25 { width: 25rem; height: 25rem; } .square-26 { width: 26rem; height: 26rem; } .square-27 { width: 27rem; height: 27rem; } .square-28 { width: 28rem; height: 28rem; } .square-29 { width: 29rem; height: 29rem; } .square-30 { width: 30rem; height: 30rem; } /* rounded */ :root { --primer-borderRadius-small: 0.5rem; --primer-borderRadius-medium: 2rem; --primer-borderRadius-large: 4rem; --primer-borderRadius-x-large: 8rem; } .rounded-4 { border-radius: var(--primer-borderRadius-x-large, 16px); } @media (min-width: 544px) { .rounded-sm-4 { border-radius: var(--primer-borderRadius-x-large, 16px) !important; } } @media (min-width: 768px) { .rounded-md-4 { border-radius: var(--primer-borderRadius-x-large, 16px) !important; } } @media (min-width: 1012px) { .rounded-lg-4 { border-radius: var(--primer-borderRadius-x-large, 16px) !important; } } @media (min-width: 1280px) { .rounded-xl-4 { border-radius: var(--primer-borderRadius-x-large, 16px) !important; } } /* order */ .order-inherit { order: inherit; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } @media (min-width: 544px) { .order-sm-inherit { order: inherit; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } } @media (min-width: 768px) { .order-md-inherit { order: inherit; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } } @media (min-width: 1012px) { .order-lg-inherit { order: inherit; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } } @media (min-width: 1280px) { .order-xl-inherit { order: inherit; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } } .text-underline { text-decoration: underline; } .message { font-weight: var(--fweight-medium); line-height: 1.8; } .s-bg-circle-right { background-image: url(/common/img/bg_circle.svg); background-repeat: no-repeat; background-position: right bottom; background-size: cover; } .s-txt-thinColor { color: var(--txt-thinColor); } .s-txt-gray-darkColor { color: var(--gray-darkColor); } .s-txt-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .border,.border-top,.border-left,.border-right,.border-bottom { border-color: var(--gray-thinColor) !important; } .border-separate + .border-separate { border-top: 1px solid var(--gray-thinColor); } .border-horizontal-separate { border-left: 1px solid var(--gray-thinColor); border-right: 1px solid var(--gray-thinColor); margin-left: -1px; } .rounded-1,.rounded-2,.rounded-3,.circle { overflow: hidden; } @media (min-width: 544px) { .border-sm-0 { border-width: 0 !important; } .border-sm-top-0 { border-top-width: 0 !important; } .border-sm-left-0 { border-left-width: 0 !important; } .border-sm-right-0 { border-right-width: 0 !important; } .border-sm-bottom-0 { border-bottom-width: 0 !important; } } @media (min-width: 768px) { .border-md-0 { border-width: 0 !important; } .border-md-top-0 { border-top-width: 0 !important; } .border-md-left-0 { border-left-width: 0 !important; } .border-md-right-0 { border-right-width: 0 !important; } .border-md-bottom-0 { border-bottom-width: 0 !important; } } @media (min-width: 1012px) { .border-lg-0 { border-width: 0 !important; } .border-lg-top-0 { border-top-width: 0 !important; } .border-lg-left-0 { border-left-width: 0 !important; } .border-lg-right-0 { border-right-width: 0 !important; } .border-lg-bottom-0 { border-bottom-width: 0 !important; } } @media (min-width: 1280px) { .border-xl-0 { border-width: 0 !important; } .border-xl-top-0 { border-top-width: 0 !important; } .border-xl-left-0 { border-left-width: 0 !important; } .border-xl-right-0 { border-right-width: 0 !important; } .border-xl-bottom-0 { border-bottom-width: 0 !important; } } /* icon */ .icon { content: ""; display: inline-flex; background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); vertical-align: middle; transition: all .3s; } .icon.icon-size-x-small { --v-iconSize: 0.6em; } .icon.icon-size-small { --v-iconSize: 0.8em; } .icon.icon-size-1 { --v-iconSize: 1em; } .icon.icon-size-2 { --v-iconSize: 1.2em; } .icon.icon-size-3 { --v-iconSize: 1.4em; } .icon.icon-size-4 { --v-iconSize: 1.6em; } .icon.icon-size-5 { --v-iconSize: 1.8em; } .icon.icon-size-6 { --v-iconSize: 2.0em; } .icon.icon-size-7 { --v-iconSize: 2.2em; } .icon.icon-size-8 { --v-iconSize: 2.4em; } .icon.icon-size-9 { --v-iconSize: 2.6em; } .icon.icon-size-10 { --v-iconSize: 3.0em; } .icon-absolute-center-right { position: relative; padding-left: 2.5rem !important; padding-right: 2.5rem !important; } .icon-absolute-center-right .icon { position: absolute; top: calc(50% - 0.5em); right: 1rem; } .icon-absolute-bottom-right { position: relative; } .icon-absolute-bottom-right .icon { position: absolute; bottom: 0.2em; right: 1rem; } .icon.arrow-right { --v-iconImage: url(/common/icon/arrow-right.svg); } .icon.arrow-left { --v-iconImage: url(/common/icon/arrow-left.svg); } .icon.arrow-up { --v-iconImage: url(/common/icon/arrow-up.svg); } .icon.arrow-down { --v-iconImage: url(/common/icon/arrow-down.svg); } .icon.search { --v-iconImage: url(/common/icon/search.svg); } .icon.setup { --v-iconImage: url(/common/icon/setup.svg); } .icon.side-table { --v-iconImage: url(/common/icon/side-table.svg); } .icon.sign { --v-iconImage: url(/common/icon/sign.svg); } .icon.map { --v-iconImage: url(/common/icon/map.svg); } .icon.comment { --v-iconImage: url(/common/icon/comment.svg); } .icon.bill { --v-iconImage: url(/common/icon/bill.svg); } .icon.books { --v-iconImage: url(/common/icon/books.svg); } .icon.brush { --v-iconImage: url(/common/icon/brush.svg); } .icon.mail { --v-iconImage: url(/common/icon/mail.svg); } .icon.mail-circle { --v-iconImage: url(/common/icon/mail-circle.svg); } .icon.table { --v-iconImage: url(/common/icon/table.svg); } .icon.tel { --v-iconImage: url(/common/icon/tel.svg); } .icon.download { --v-iconImage: url(/common/icon/download.svg); } .icon.electricity { --v-iconImage: url(/common/icon/electricity.svg); } .icon.enn-table { --v-iconImage: url(/common/icon/enn-table.svg); } .icon.purchase { --v-iconImage: url(/common/icon/purchase.svg); } .icon.remake { --v-iconImage: url(/common/icon/remake.svg); } .icon.repair { --v-iconImage: url(/common/icon/repair.svg); } .icon.transfer { --v-iconImage: url(/common/icon/transfer.svg); } .icon.layout { --v-iconImage: url(/common/icon/layout.svg); } .icon.design { --v-iconImage: url(/common/icon/design.svg); } .icon.icon3d { --v-iconImage: url(/common/icon/icon3d.svg); } .icon.interior { --v-iconImage: url(/common/icon/interior.svg); } .icon.trash { --v-iconImage: url(/common/icon/trash.svg); } .icon.car { --v-iconImage: url(/common/icon/car.svg); } .icon.cardboard { --v-iconImage: url(/common/icon/cardboard.svg); } .icon.chair { --v-iconImage: url(/common/icon/chair.svg); } .icon.cleaning { --v-iconImage: url(/common/icon/cleaning.svg); } .icon.train { --v-iconImage: url(/common/icon/train.svg); } .icon.plus { --v-iconImage: url(/common/icon/plus.svg); } .icon.minus { --v-iconImage: url(/common/icon/minus.svg); } .icon.oa { --v-iconImage: url(/common/icon/oa.svg); } .icon.office-search { --v-iconImage: url(/common/icon/office-search.svg); } .icon.bus { --v-iconImage: url(/common/icon/bus.svg); } .icon.resta { --v-iconImage: url(/common/icon/resta.svg); } .icon.arrow_left { --v-iconImage: url(/common/icon/circle-arrow-left.svg); } .icon.arrow_right { --v-iconImage: url(/common/icon/circle-arrow-right.svg); } .icon.arrow_up { --v-iconImage: url(/common/icon/circle-arrow-up.svg); } .icon.arrow_down { --v-iconImage: url(/common/icon/circle-arrow-down.svg); } .icon.marker { --v-iconImage: url(/common/icon/marker.svg); } .icon.pen { --v-iconImage: url(/common/icon/pen.svg); } .icon.triangle_down { --v-iconImage: url(/common/icon/triangle_down.svg); } .icon.directing_arrow_down { --v-iconImage: url(/common/icon/directing_arrow_down.svg); } .icon.star { --v-iconImage: url(/common/icon/star.svg); } .icon.dot { --v-iconImage: url(/common/icon/dot.svg); } .icon.external { --v-iconImage: url(/common/icon/external.svg); } .icon.warehouse { --v-iconImage: url(/common/icon/warehouse.svg); } .icon.truck { --v-iconImage: url(/common/icon/truck.svg); } .icon.consultation { --v-iconImage: url(/common/icon/consultation.svg); } .icon.calender { --v-iconImage: url(/common/icon/calendar.svg); } .icon.ring { --v-iconImage: url(/common/icon/ring.svg); } .icon.refrigerator { --v-iconImage: url(/common/icon/refrigerator.svg); } .icon.steel-10over { --v-iconImage: url(/common/icon/steel-10over.svg); } .icon.chair-break { --v-iconImage: url(/common/icon/chair-break.svg); } .icon.gold { --v-iconImage: url(/common/icon/gold.svg); } .icon.cross { --v-iconImage: url(/common/icon/cross.svg); } .icon.cross-border { --v-iconImage: url(/common/icon/cross-border.svg); } .icon.acrylpanel { --v-iconImage: url(/common/icon/acrylpanel.svg); } .icon.microwave-10over { --v-iconImage: url(/common/icon/microwave-10over.svg); } .icon.pdf { --v-iconImage: url(/common/icon/pdf.svg); } .icon.check-none { --v-iconImage: url(/common/icon/check-none.svg); } .icon.check-checked { --v-iconImage: url(/common/icon/check-checked.svg);} .icon.surprise { --v-iconImage: url(/common/icon/surprise.svg);} .icon.spanner { --v-iconImage: url(/common/icon/spanner.svg);} .icon.yen { --v-iconImage: url(/common/icon/yen.svg);} /* image */ .image-contain-square-fix { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } .image-contain-circle-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: contain; } .image-contain-circle-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: contain; } .image-contain-circle-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: contain; } .image-contain-circle-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: contain; } .image-contain-circle-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: contain; } .image-contain-circle-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: contain; } .image-contain-circle-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: contain; } .image-contain-circle-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: contain; } .image-contain-circle-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: contain; } .image-contain-circle-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: contain; } .image-contain-circle-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: contain; } .image-contain-circle-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: contain; } .image-contain-circle-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: contain; } .image-contain-circle-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: contain; } .image-contain-circle-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: contain; } .image-cover-square-fix { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .image-cover-circle-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: cover; } .image-cover-circle-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .image-cover-circle-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; } .image-cover-circle-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; } .image-cover-circle-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover; } .image-cover-circle-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover; } .image-cover-circle-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } .image-cover-circle-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; } .image-cover-circle-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: cover; } .image-cover-circle-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: cover; } .image-cover-circle-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: cover; } .image-cover-circle-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; } .image-cover-circle-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: cover; } .image-cover-circle-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: cover; } .image-cover-circle-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: cover; } .image-cover-svga-fix { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-cover-svga-1 { width: 1rem; height: calc(1rem * 3/4); object-fit: cover; } .image-cover-svga-10 { width: 10rem; height: calc(10rem * 3/4); object-fit: cover; } .image-cover-svga-11 { width: 11rem; height: calc(11rem * 3/4); object-fit: cover; } .image-cover-svga-12 { width: 12rem; height: calc(12rem * 3/4); object-fit: cover; } .image-cover-svga-13 { width: 13rem; height: calc(13rem * 3/4); object-fit: cover; } .image-cover-svga-14 { width: 14rem; height: calc(14rem * 3/4); object-fit: cover; } .image-cover-svga-15 { width: 15rem; height: calc(15rem * 3/4); object-fit: cover; } .image-cover-svga-16 { width: 16rem; height: calc(16rem * 3/4); object-fit: cover; } .image-cover-svga-17 { width: 17rem; height: calc(17rem * 3/4); object-fit: cover; } .image-cover-svga-18 { width: 18rem; height: calc(18rem * 3/4); object-fit: cover; } .image-cover-svga-19 { width: 19rem; height: calc(19rem * 3/4); object-fit: cover; } .image-cover-svga-20 { width: 20rem; height: calc(20rem * 3/4); object-fit: cover; } .image-cover-svga-21 { width: 21rem; height: calc(21rem * 3/4); object-fit: cover; } .image-cover-svga-22 { width: 22rem; height: calc(22rem * 3/4); object-fit: cover; } @media (min-width: 544px) { .image-contain-circle-sm-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: contain; } .image-contain-circle-sm-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: contain; } .image-contain-circle-sm-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: contain; } .image-contain-circle-sm-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: contain; } .image-contain-circle-sm-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: contain; } .image-contain-circle-sm-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: contain; } .image-contain-circle-sm-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: contain; } .image-contain-circle-sm-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: contain; } .image-contain-circle-sm-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: contain; } .image-contain-circle-sm-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: contain; } .image-contain-circle-sm-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: contain; } .image-contain-circle-sm-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: contain; } .image-contain-circle-sm-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: contain; } .image-contain-circle-sm-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: contain; } .image-contain-circle-sm-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: contain; } .image-cover-circle-sm-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: cover; } .image-cover-circle-sm-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .image-cover-circle-sm-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; } .image-cover-circle-sm-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; } .image-cover-circle-sm-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover; } .image-cover-circle-sm-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover; } .image-cover-circle-sm-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } .image-cover-circle-sm-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; } .image-cover-circle-sm-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: cover; } .image-cover-circle-sm-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: cover; } .image-cover-circle-sm-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: cover; } .image-cover-circle-sm-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; } .image-cover-circle-sm-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: cover; } .image-cover-circle-sm-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: cover; } .image-cover-circle-sm-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: cover; } .image-cover-svga-sm-fix { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-cover-svga-sm-1 { width: 1rem; height: calc(1rem * 3/4); object-fit: cover; } .image-cover-svga-sm-10 { width: 10rem; height: calc(10rem * 3/4); object-fit: cover; } .image-cover-svga-sm-11 { width: 11rem; height: calc(11rem * 3/4); object-fit: cover; } .image-cover-svga-sm-12 { width: 12rem; height: calc(12rem * 3/4); object-fit: cover; } .image-cover-svga-sm-13 { width: 13rem; height: calc(13rem * 3/4); object-fit: cover; } .image-cover-svga-sm-14 { width: 14rem; height: calc(14rem * 3/4); object-fit: cover; } .image-cover-svga-sm-15 { width: 15rem; height: calc(15rem * 3/4); object-fit: cover; } .image-cover-svga-sm-16 { width: 16rem; height: calc(16rem * 3/4); object-fit: cover; } .image-cover-svga-sm-17 { width: 17rem; height: calc(17rem * 3/4); object-fit: cover; } .image-cover-svga-sm-18 { width: 18rem; height: calc(18rem * 3/4); object-fit: cover; } .image-cover-svga-sm-19 { width: 19rem; height: calc(19rem * 3/4); object-fit: cover; } .image-cover-svga-sm-20 { width: 20rem; height: calc(20rem * 3/4); object-fit: cover; } .image-cover-svga-sm-21 { width: 21rem; height: calc(21rem * 3/4); object-fit: cover; } .image-cover-svga-sm-22 { width: 22rem; height: calc(22rem * 3/4); object-fit: cover; } } @media (min-width: 768px) { .image-contain-circle-md-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: contain; } .image-contain-circle-md-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: contain; } .image-contain-circle-md-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: contain; } .image-contain-circle-md-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: contain; } .image-contain-circle-md-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: contain; } .image-contain-circle-md-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: contain; } .image-contain-circle-md-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: contain; } .image-contain-circle-md-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: contain; } .image-contain-circle-md-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: contain; } .image-contain-circle-md-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: contain; } .image-contain-circle-md-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: contain; } .image-contain-circle-md-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: contain; } .image-contain-circle-md-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: contain; } .image-contain-circle-md-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: contain; } .image-contain-circle-md-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: contain; } .image-cover-circle-md-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: cover; } .image-cover-circle-md-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .image-cover-circle-md-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; } .image-cover-circle-md-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; } .image-cover-circle-md-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover; } .image-cover-circle-md-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover; } .image-cover-circle-md-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } .image-cover-circle-md-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; } .image-cover-circle-md-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: cover; } .image-cover-circle-md-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: cover; } .image-cover-circle-md-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: cover; } .image-cover-circle-md-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; } .image-cover-circle-md-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: cover; } .image-cover-circle-md-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: cover; } .image-cover-circle-md-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: cover; } .image-cover-svga-md-fix { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-cover-svga-md-1 { width: 1rem; height: calc(1rem * 3/4); object-fit: cover; } .image-cover-svga-md-10 { width: 10rem; height: calc(10rem * 3/4); object-fit: cover; } .image-cover-svga-md-11 { width: 11rem; height: calc(11rem * 3/4); object-fit: cover; } .image-cover-svga-md-12 { width: 12rem; height: calc(12rem * 3/4); object-fit: cover; } .image-cover-svga-md-13 { width: 13rem; height: calc(13rem * 3/4); object-fit: cover; } .image-cover-svga-md-14 { width: 14rem; height: calc(14rem * 3/4); object-fit: cover; } .image-cover-svga-md-15 { width: 15rem; height: calc(15rem * 3/4); object-fit: cover; } .image-cover-svga-md-16 { width: 16rem; height: calc(16rem * 3/4); object-fit: cover; } .image-cover-svga-md-17 { width: 17rem; height: calc(17rem * 3/4); object-fit: cover; } .image-cover-svga-md-18 { width: 18rem; height: calc(18rem * 3/4); object-fit: cover; } .image-cover-svga-md-19 { width: 19rem; height: calc(19rem * 3/4); object-fit: cover; } .image-cover-svga-md-20 { width: 20rem; height: calc(20rem * 3/4); object-fit: cover; } .image-cover-svga-md-21 { width: 21rem; height: calc(21rem * 3/4); object-fit: cover; } .image-cover-svga-md-22 { width: 22rem; height: calc(22rem * 3/4); object-fit: cover; } } @media (min-width: 1012px) { .image-contain-circle-lg-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: contain; } .image-contain-circle-lg-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: contain; } .image-contain-circle-lg-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: contain; } .image-contain-circle-lg-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: contain; } .image-contain-circle-lg-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: contain; } .image-contain-circle-lg-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: contain; } .image-contain-circle-lg-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: contain; } .image-contain-circle-lg-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: contain; } .image-contain-circle-lg-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: contain; } .image-contain-circle-lg-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: contain; } .image-contain-circle-lg-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: contain; } .image-contain-circle-lg-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: contain; } .image-contain-circle-lg-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: contain; } .image-contain-circle-lg-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: contain; } .image-contain-circle-lg-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: contain; } .image-cover-circle-lg-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: cover; } .image-cover-circle-lg-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .image-cover-circle-lg-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; } .image-cover-circle-lg-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; } .image-cover-circle-lg-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover; } .image-cover-circle-lg-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover; } .image-cover-circle-lg-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } .image-cover-circle-lg-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; } .image-cover-circle-lg-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: cover; } .image-cover-circle-lg-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: cover; } .image-cover-circle-lg-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: cover; } .image-cover-circle-lg-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; } .image-cover-circle-lg-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: cover; } .image-cover-circle-lg-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: cover; } .image-cover-circle-lg-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: cover; } .image-cover-svga-lg-fix { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-cover-svga-lg-1 { width: 1rem; height: calc(1rem * 3/4); object-fit: cover; } .image-cover-svga-lg-10 { width: 10rem; height: calc(10rem * 3/4); object-fit: cover; } .image-cover-svga-lg-11 { width: 11rem; height: calc(11rem * 3/4); object-fit: cover; } .image-cover-svga-lg-12 { width: 12rem; height: calc(12rem * 3/4); object-fit: cover; } .image-cover-svga-lg-13 { width: 13rem; height: calc(13rem * 3/4); object-fit: cover; } .image-cover-svga-lg-14 { width: 14rem; height: calc(14rem * 3/4); object-fit: cover; } .image-cover-svga-lg-15 { width: 15rem; height: calc(15rem * 3/4); object-fit: cover; } .image-cover-svga-lg-16 { width: 16rem; height: calc(16rem * 3/4); object-fit: cover; } .image-cover-svga-lg-17 { width: 17rem; height: calc(17rem * 3/4); object-fit: cover; } .image-cover-svga-lg-18 { width: 18rem; height: calc(18rem * 3/4); object-fit: cover; } .image-cover-svga-lg-19 { width: 19rem; height: calc(19rem * 3/4); object-fit: cover; } .image-cover-svga-lg-20 { width: 20rem; height: calc(20rem * 3/4); object-fit: cover; } .image-cover-svga-lg-21 { width: 21rem; height: calc(21rem * 3/4); object-fit: cover; } .image-cover-svga-lg-22 { width: 22rem; height: calc(22rem * 3/4); object-fit: cover; } } @media (min-width: 1280px) { .image-contain-circle-xl-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: contain; } .image-contain-circle-xl-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: contain; } .image-contain-circle-xl-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: contain; } .image-contain-circle-xl-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: contain; } .image-contain-circle-xl-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: contain; } .image-contain-circle-xl-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: contain; } .image-contain-circle-xl-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: contain; } .image-contain-circle-xl-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: contain; } .image-contain-circle-xl-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: contain; } .image-contain-circle-xl-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: contain; } .image-contain-circle-xl-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: contain; } .image-contain-circle-xl-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: contain; } .image-contain-circle-xl-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: contain; } .image-contain-circle-xl-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: contain; } .image-contain-circle-xl-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: contain; } .image-cover-circle-xl-1 { border-radius: 50%; width: 1rem; height: 1rem; object-fit: cover; } .image-cover-circle-xl-2 { border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .image-cover-circle-xl-3 { border-radius: 50%; width: 3rem; height: 3rem; object-fit: cover; } .image-cover-circle-xl-4 { border-radius: 50%; width: 4rem; height: 4rem; object-fit: cover; } .image-cover-circle-xl-5 { border-radius: 50%; width: 5rem; height: 5rem; object-fit: cover; } .image-cover-circle-xl-6 { border-radius: 50%; width: 6rem; height: 6rem; object-fit: cover; } .image-cover-circle-xl-7 { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } .image-cover-circle-xl-8 { border-radius: 50%; width: 8rem; height: 8rem; object-fit: cover; } .image-cover-circle-xl-9 { border-radius: 50%; width: 9rem; height: 9rem; object-fit: cover; } .image-cover-circle-xl-10 { border-radius: 50%; width: 10rem; height: 10rem; object-fit: cover; } .image-cover-circle-xl-11 { border-radius: 50%; width: 11rem; height: 11rem; object-fit: cover; } .image-cover-circle-xl-12 { border-radius: 50%; width: 12rem; height: 12rem; object-fit: cover; } .image-cover-circle-xl-13 { border-radius: 50%; width: 13rem; height: 13rem; object-fit: cover; } .image-cover-circle-xl-14 { border-radius: 50%; width: 14rem; height: 14rem; object-fit: cover; } .image-cover-circle-xl-15 { border-radius: 50%; width: 15rem; height: 15rem; object-fit: cover; } .image-cover-svga-xl-fix { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .image-cover-svga-xl-1 { width: 1rem; height: calc(1rem * 3/4); object-fit: cover; } .image-cover-svga-xl-10 { width: 10rem; height: calc(10rem * 3/4); object-fit: cover; } .image-cover-svga-xl-11 { width: 11rem; height: calc(11rem * 3/4); object-fit: cover; } .image-cover-svga-xl-12 { width: 12rem; height: calc(12rem * 3/4); object-fit: cover; } .image-cover-svga-xl-13 { width: 13rem; height: calc(13rem * 3/4); object-fit: cover; } .image-cover-svga-xl-14 { width: 14rem; height: calc(14rem * 3/4); object-fit: cover; } .image-cover-svga-xl-15 { width: 15rem; height: calc(15rem * 3/4); object-fit: cover; } .image-cover-svga-xl-16 { width: 16rem; height: calc(16rem * 3/4); object-fit: cover; } .image-cover-svga-xl-17 { width: 17rem; height: calc(17rem * 3/4); object-fit: cover; } .image-cover-svga-xl-18 { width: 18rem; height: calc(18rem * 3/4); object-fit: cover; } .image-cover-svga-xl-19 { width: 19rem; height: calc(19rem * 3/4); object-fit: cover; } .image-cover-svga-xl-20 { width: 20rem; height: calc(20rem * 3/4); object-fit: cover; } .image-cover-svga-xl-21 { width: 21rem; height: calc(21rem * 3/4); object-fit: cover; } .image-cover-svga-xl-22 { width: 22rem; height: calc(22rem * 3/4); object-fit: cover; } } .image-cover-fix { width: 100%; height: 100%; object-fit: cover; } .image-contain-fix { width: 100%; height: 100%; object-fit: contain; } .container-inner { border-radius: 1rem; padding: var(--size-xxx-large); } .headline-h2 { font-size: var(--ffont-title-large); display: flex; text-align: center; align-items: center; flex-direction: column; margin-bottom: var(--base-size-40, 2.5rem); } .headline-h2 small { font-size: var(--ffont-subtitle); position: relative; display: inline-block; padding: 0 2rem; width: fit-content; } .headline-h2 > span { position: relative; display: inline-block; padding: 0 2rem; width: fit-content; } .headline-h2-left { text-align: left; align-items: flex-start; } .headline-h2-left > span { padding: 0 2rem 0 0; } .headline-arrow { font-size: var(--ffont-title-large); position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: var(--base-size-40, 40px) !important; } .headline-arrow::after { content: ""; display: inline-block; width: 100%; height: 2rem; max-width: 774px; background-image: url(/common/img/headline_arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; } .headline-h3-leftline { font-size: var(--fsize-large); padding: 0.5rem 0 0.5rem 1.5rem; border-left: 3px solid var(--mainColor); } .headline-h4-leftline { /* font-size: var(--ffont-title-medium); */ padding: 0.1rem 0 0.1rem 1.0rem; border-left: 3px solid var(--accentColor, var(--mainColor)); /* margin-bottom: var(--base-size-32, 32px) !important; */ } .headline-em { text-align: center; /* font-size: var(--ffont-title-medium); */ color: var(--headerColor); /* margin-bottom: var(--size-medium); */ } .headline-border { font-size: var(--ffont-title-medium); padding: 1rem; border-top: 1px solid var(--borderColor); border-bottom: 1px solid var(--borderColor); margin-bottom: var(--base-size-32, 32px) !important; } .headline-border-bottom { font-size: var(--ffont-title-medium); padding-bottom: 0.5rem; border-bottom: 1px solid var(--borderColor); margin-bottom: var(--size-x-small); width: fit-content; padding-right: 3rem; font-weight: 500; } .btn-arrow-main { background-image: url(../icon/icon_arrow_right.svg); background-repeat: no-repeat; background-position: 1.2rem center; background-size: 0.6rem; background-color: var(--mainColor); border-radius: var(--borderRadius-full, 50%) !important; width: 3rem; height: 3rem; display: inline-block; } .btn-arrow-dark { background-image: url(../icon/icon_arrow_right.svg); background-repeat: no-repeat; background-position: 1.2rem center; background-size: 0.6rem; background-color: var(--mainDarkColor); border-radius: var(--borderRadius-full, 50%) !important; width: 3rem; height: 3rem; display: inline-block; } .btn { --animation-move-size: 0.5em; --bgColor: var(--redColor); --txtColor: var(--onTxtColor); --color-btn-hover-bg: var(--bgColor); --color-btn-hover-border: var(--bgColor); display: inline-block; position: relative; background-color: var(--bgColor); color: var(--txtColor); font-weight: 500; font-size: var(--fsize-base); line-height: 1.2; padding: 1rem 3rem; border: 0; border-radius: 5rem; transition: all .3s !important; max-width: 100%; white-space: break-spaces; box-shadow: none; } .btn::after { --v-iconImage: url(/common/img/icon_arrow_right.svg); content: ""; display: inline-flex; background: var(--v-iconColor, var(--txtColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 0.8em); height: var(--v-iconSize, 0.8em); vertical-align: middle; position: absolute; right: 1rem; top: calc(50% - 0.3em); transition: all .3s; } .btn.btn-afternone::after { display: none; } .btn.btn-red { } .btn.btn-green { --bgColor: var(--mainDarkColor); --txtColor: var(--main-txt-bodyColor); --v-iconColor: var(--main-txt-bodyColor); line-height: 1.3; border: 1px solid var(--bgColor); } .btn.btn-def { --bgColor: var(--mainDarkColor); --txtColor: var(--main-txt-bodyColor); --v-iconColor: var(--main-txt-bodyColor); --fsize-base: .9rem; display: inline-flex; align-items: center; position: relative; font-weight: 500; padding: 0.5rem 3.5rem 0.5rem 3rem; border-radius: 4rem; transition: all .3s; border: 1px solid var(--mainDarkColor); max-width: 100%; white-space: break-spaces; } .btn.btn-external::after { --v-iconImage: url(/common/icon/external.svg); } .btn.btn-second { --bgColor: none; --txtColor: var(--mainDarkColor); --v-iconColor: var(--mainDarkColor); --fsize-base: .9rem; --v-iconImage: url(/common/icon/circle-arrow-right.svg); --v-iconSize: 0.8em; display: inline-block; position: relative; font-weight: 500; padding: 0.5rem 3rem 0.5rem 3rem; border-radius: 4rem; transition: all .3s; border: 1px solid var(--gray-darkColor); } .btn.btn-second::after { content: ""; display: inline-flex; background: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 0.8em); height: var(--v-iconSize, 0.8em); vertical-align: middle; position: absolute; right: 1em; top: 50%; bottom: auto; margin: 0; transform: translateY(-50%); } .btn.btn-back { --bgColor: none; --txtColor: var(--mainDarkColor); --v-iconColor: var(--mainDarkColor); --fsize-base: .9rem; --v-iconImage: url(/common/img/icon_circle_arrow_left.svg); --v-iconSize: 1.3rem; display: inline-block; position: relative; font-weight: 500; padding: 0.5rem 1.3rem 0.5rem 2.3rem; border-radius: 4rem; transition: all .3s; border: 1px solid var(--gray-darkColor); line-height: 1.5; } .btn.btn-back::after { content: ""; display: inline-flex; background: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); vertical-align: middle; position: absolute; left: 0.8em; top: calc(50% - 0.75em); bottom: auto; margin: 0; } .btn.s-header-bgcolor { --bgColor: var(--headerColor); --txtColor: var(--header-txt-bodyColor); } .btn.s-header-bgcolor input[type="submit"] { background-color: transparent; color: var(--txtColor); border: 0; } .btn.btn-width-fix { width: 100%; } .btn.btn-large { font-size: var(--fsize-large); padding: 1.5rem 3rem; position: relative; display: flex; flex-direction: column; } .btn.btn-large::after { top: calc(50% - 0.5em); } /* animation */ .p-link-hover-scale:hover { /* 削除する */ transform: scale(1.05); } .s-hover-scaleup { transition: all .3s; } .s-hover-scaleup:hover { transform: scale(1.05); } .s-hover-thinner { transition: opacity .3s; } .s-hover-thinner:hover { opacity: 0.8; } .s-hover-inversion:hover { background-color: var(--txtColor); color: var(--bgColor); --v-iconColor: var(--bgColor); } .s-hover-brightness:hover { filter: brightness(0.6); } .s-hover-grayscale-invert:hover { filter: grayscale(1) invert(1); } .s-hover-image-scaleup figure { overflow: hidden; } .s-hover-image-scaleup figure img { transition: all .3s; } .s-hover-image-scaleup:hover figure img { transform: scale(1.05); } .s-hover-after-right::after { transition: all .3s; } .s-hover-after-right:hover::after { transform: translateX(var(--animation-move-size, 0.5rem)); } .s-hover-before-right::before { transition: all .3s; } .s-hover-before-right:hover::before { transform: translateX(var(--animation-move-size, 0.5rem)); } .s-hover-icon-right { --animation-move-size: 0.5em; } .s-hover-icon-right i { transition: all .3s; } .s-hover-icon-right:hover i { transform: translateX(var(--animation-move-size)); } .s-hover-after-left::after { transition: all .3s; } .s-hover-after-left:hover::after { transform: translateX(calc(var(--animation-move-size) * -1)); } .s-hover-icon-left { --animation-move-size: 0.5em; } .s-hover-icon-left i { transition: all .3s; } .s-hover-icon-left:hover i { transform: translateX(calc(var(--animation-move-size) * -1)); } .s-hover-txt-underline .txt { position: relative; } .s-hover-txt-underline .txt::before { transition: all .3s; content: ""; position: absolute; display: block; width: 0; height: 1px; background-color: var(--txtColor, #000); bottom: 0; left: 0; } .s-hover-txt-underline:hover { text-decoration: none; } .s-hover-txt-underline:hover .txt::before { width: 100%; } .s-hover-txt-main-color { transition: all .3s; cursor: pointer; } .s-hover-txt-main-color:hover { --v-iconColor: var(--mainColor); color: var(--mainColor); text-decoration: none; } .s-hover-box-underline { position: relative; } .s-hover-box-underline::before { transition: all .3s; content: ""; position: absolute; display: block; width: 0; height: 2px; background-color: var(--mainColor, #000); bottom: 0; left: 0; } .s-hover-box-underline:hover::before { width: 100%; } .s-hover-bg-base1-color:hover { --v-iconColor: var(--txt-darkColor); background-color: var(--base1Color); color: var(--txt-darkColor); border-color: var(--base1Color); } .s-hover-bg-base1-main-color:hover { --v-iconColor: var(--mainDarkColor); background-color: var(--base1Color); color: var(--mainDarkColor); border-color: var(--base1Color); } .s-hover-bg-main-color:hover { background-color: var(--mainColor); color: var(--main-txt-bodyColor); border-color: var(--mainColor); } .s-hover-bg-mainDark-color:hover { --v-iconColor: var(--main-txt-bodyColor); background-color: var(--mainDarkColor); color: var(--main-txt-bodyColor); } .s-hover-bg-red-color:hover { --v-iconColor: #FFF; background-color: #ffc107; border-color: #ffc107 !important; } .s-hover-box-shadow-gray-color { transition: all .3s; } .s-hover-box-shadow-gray-color:hover { box-shadow: 0 0 5px 0px var(--gray-darkColor); } .after-text { padding: 2rem; background-color: var(--gray-thinColor); } .after-text__dl { display: flex; } .after-text__dl dt { margin-right: 0.5rem; } .p-label { padding: 0.2rem 0.8rem; display: inline-block; z-index: 1; } .p-label-radius { border-radius: 2rem; } .p-label-def { background-color: var(--inversion-baseColor); } .p-label-primary { background-color: var(--conversionColor); color: var(--conversion-txt-bodyColor); } .p-label-main { background-color: var(--mainColor); color: var(--main-txt-bodyColor); } .p-label-mainDark { background-color: var(--mainDarkColor); color: var(--main-txt-bodyColor); } .p-label-header { background-color: var(--headerColor); color: var(--header-txt-bodyColor); } .p-label-require { background-color: var(--color-danger-fg); color: var(--txt-lightColor); font-size: var(--fsize-x-small); border-radius: 3rem; vertical-align: text-bottom; } .p-label-third { background-color: var(--thirdColor); color: var(--third-txt-bodyColor); } /* p-hero-container */ .swiper { visibility: hidden; /* display: none; */ } .swiper-initialized { visibility: visible; /* display: block; */ } .p-hero-container .swiper-slide { border-radius: 10px; overflow: hidden; font-size: 0; } .p-shop-hero-container .swiper-slide { border: 1px solid var(--gray-darkColor); } @media only screen and (max-width: 768px) { .p-hero-container .swiper-slide { border-radius: 0; } } .swiper-pagination { bottom: 0 !important; } .swiper-pagination .swiper-pagination-bullet { vertical-align: middle; } .p-middle-hero-container { position: relative; min-height: 130px; color: #FFF; } .p-middle-hero-container > * { position: relative; width: 100%; z-index: 2; } .p-middle-hero-container::before { content: ""; position: absolute; display: block; background-image: url(/common/img/header/bg-default.jpg); background-size: cover; background-position: center; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .p-middle-hero-container.about::before { background-image: url(/common/img/header/bg-about.jpg); } .p-middle-hero-container.item::before { background-image: url(/common/img/header/bg-item.jpg); } .p-middle-hero-container.shop::before { background-image: url(/common/img/header/bg-shop.jpg); } .p-middle-hero-container.service::before { background-image: url(/common/img/header/bg-service.jpg); } .p-middle-hero-container.contact::before { background-image: url(/common/img/header/bg-contact.jpg); } .p-middle-hero-container.download::before { background-image: url(/common/img/header/bg-contact.jpg); } .p-middle-hero-container.information_blog::before { background-image: url(/common/img/header/bg-blog.jpg); } .p-middle-hero-container.repair::before { background-image: url(/common/img/header/bg-blog.jpg); } .p-middle-hero-container.cases::before { background-image: url(/common/img/header/bg-cases.jpg); } .p-middle-hero-container.company::before { background-image: url(/common/img/header/bg-company.jpg); } .p-middle-hero-container.news::before { background-image: url(/common/img/header/bg-company.jpg); } .p-middle-hero-container.faq::before { background-image: url(/common/img/header/bg-faq.jpg); } .p-middle-hero-container.agreement::before { background-image: url(/common/img/header/bg-agreement.jpg); } .p-middle-hero-container.shop-blog::before { background-image: url(/common/img/header/bg-shop-blog.jpg); } .p-middle-hero-container.shop-access::before { background-image: url(/common/img/header/bg-shop-access.jpg); } .p-middle-hero-container.shop-price::before { background-image: url(/common/img/header/bg-shop-price.jpg); } .p-middle-hero-container.shop-faq::before { background-image: url(/common/img/header/bg-shop-faq.jpg); } .p-middle-hero-container.shop-voice::before { background-image: url(/common/img/header/bg-shop-voice.jpg); } .p-middle-hero-container.shop-item::before { background-image: url(/common/img/header/bg-shop-item.jpg); } .p-content-fix > * { width: 100%; } svg a.svg-hover:hover { opacity: 0.8; } .grid-3 { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--size-xx-large); --s-grid-num: 3; } @media only screen and (max-width: 830px) { .grid-3 { --s-grid-num: 2; } } @media only screen and (max-width: 520px) { .grid-3 { --s-grid-num: 1; } } .grid-3-def > .grid-item { width: calc(var(--s-content-width) / var(--s-grid-num)); flex: 0 0 calc(var(--s-content-width) / var(--s-grid-num) - var(--size-xx-large)); margin: 0; } .grid-3-def .l-body-container { padding-top: var(--size-medium); } .grid-3-def .grid-item__summary { background-color: var(--inversion-baseColor); padding: 1rem; } .grid-3-person { padding: 3rem; border-radius: 1rem; gap: var(--size-xxxxxx-large); } .grid-3-person > .grid-item { flex: 0 0 calc(var(--s-content-width) / var(--s-grid-num) - var(--size-xxxxxx-large)); margin: 0; } .grid-3-person .l-body-container > *:not(:last-child) { margin-bottom: 1rem; } .grid-3-person .grid-item__summary { } .grid-3-blog { gap: var(--size-xx-large); } .grid-3-blog > .grid-item { border-radius: 1rem; overflow: hidden; background-color: var(--base1Color); flex: 0 0 calc(var(--s-content-width) / var(--s-grid-num) - var(--size-xx-large)); margin: 0; position: relative; } .grid-3-blog > .grid-item::before { content: ""; position: absolute; right: var(--size-large); bottom: var(--size-large); --iconImage: url(/_document_/icon/circle-arrow-right-thin.svg); --iconSize: 1.5em; content: ""; display: inline-block; background: var(--iconColor, var(--headerColor)); mask-image: var(--iconImage); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--iconSize, 1em); height: var(--iconSize, 1em); } .grid-3-blog > .grid-item figure img { object-fit: cover; height: 100%; } .grid-3-blog .l-body-container { padding: var(--size-large); } .grid-3-blog .grid-item__summary { } .grid-3-case { gap: var(--size-xx-large); } .grid-3-case > .grid-item { flex: 0 0 calc(var(--s-content-width) / var(--s-grid-num) - var(--size-xx-large)); margin: 0; position: relative; } .grid-3-case > .grid-item::before { content: ""; position: absolute; right: 0; bottom: 0; --iconImage: url(/_document_/icon/circle-arrow-right.svg); --iconSize: 1.5em; content: ""; display: inline-block; background: var(--iconColor, var(--mainColor)); mask-image: var(--iconImage); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--iconSize, 1em); height: var(--iconSize, 1em); } .grid-3-case > .grid-item .l-header-container { padding: var(--size-xx-small) 0 var(--size-xx-small) var(--size-small); border-left: 3px solid var(--mainColor); margin-bottom: var(--size-large); } .grid-3-case > .grid-item .l-header-container h4 { font-size: var(--ffont-title-medium); } .grid-3-case > .grid-item figure img { object-fit: cover; height: 100%; } .grid-3-case .l-body-container { border-top: 1px solid var(--gray-darkColor); margin-top: var(--size-small); padding-top: var(--size-small); } .right-link { text-align: right; margin-bottom: var(--size-small); } .p-link { position: relative; display: inline-flex; align-items: center; } .p-link-icon-right::after { content: ""; --iconImage: url(/_document_/icon/arrow-right.svg); --iconMargin: var(--size-large); display: inline-block; background: var(--iconColor, var(--mainColor)); mask-image: var(--iconImage); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--iconSize, 1em); height: var(--iconSize, 1em); margin-left: var(--iconMargin); } .news-list { display: flex; flex-direction: column; } .news-list > li { padding: var(--size-large) var(--size-large) var(--size-large) 0; } .news-list > li:not(:last-child) { border-bottom: 1px solid var(--gray-darkColor); } .news-list > li > a { display: flex; position: relative; line-height: 2; align-items: center; flex-wrap: wrap; } .news-list > li > a::before { content: ""; position: absolute; right: 0; bottom: 0; top: 0; margin: auto; --iconImage: url(/common/icon/circle-arrow-right.svg); --iconSize: 1.5em; content: ""; display: inline-block; background: var(--iconColor, var(--mainColor)); mask-image: var(--iconImage); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--iconSize, 1em); height: var(--iconSize, 1em); } .news-list > li > a .p-label { padding: 0 0.8rem; text-align: center; min-width: 6.8rem; margin-right: var(--size-xx-large); } .news-list > li > a .date { min-width: 6rem; margin-right: var(--size-small); } .news-list02 { display: flex; flex-direction: column; } .news-list02 > li { padding: var(--size-large) var(--size-large) var(--size-large) 0; border-bottom: 1px solid var(--gray-darkColor); } .news-list02 > li > a { display: flex; position: relative; line-height: 2; align-items: center; flex-wrap: wrap; } .news-list02 > li > a::before { content: ""; position: absolute; right: 0; bottom: 0; top: 0; margin: auto; --iconImage: url(/_document_/icon/circle-arrow-right.svg); --iconSize: 1.5em; content: ""; display: inline-block; background: var(--iconColor, var(--mainColor)); mask-image: var(--iconImage); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--iconSize, 1em); height: var(--iconSize, 1em); } .news-list02 > li > a .p-label { padding: 0 0.8rem; text-align: center; min-width: 6.8rem; margin-right: var(--size-xx-large); } .news-list02 > li > a .date { min-width: 6rem; margin-right: var(--size-small); } .faq-list > li { border: 1px solid var(--gray-thinColor); } .faq-list > li > .faq-list__q, .faq-list > li > .faq-list__a { position: relative; display: block; padding: var(--size-xx-large) var(--size-xx-large) var(--size-xx-large) var(--size-xxxxxxxx-large); } .faq-list > .faq-list__item input[type="checkbox"]{ display: none; } @media only screen and (max-width: 768px) { .faq-list > .faq-list__item input[type="checkbox"] + .faq-list__q { padding-right: 3rem; } .faq-list > .faq-list__item input[type="checkbox"] + .faq-list__q::before { top: 50%; transform: translateY(-50%); } .faq-list > .faq-list__item input[type="checkbox"]:not(:checked) + .faq-list__q { border-bottom: 0; } .faq-list > .faq-list__item input[type="checkbox"] + .faq-list__q + .faq-list__a { display: none; } .faq-list > .faq-list__item input[type="checkbox"]:checked + .faq-list__q + .faq-list__a { display: block; } .faq-list > .faq-list__item .faq-list__q::after { content: ""; display: inline-block; --v-iconImage: url(/common/icon/plus.svg); --v-iconSize: 1.5em; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); } .faq-list > .faq-list__item input[type="checkbox"]:checked + .faq-list__q::after { --v-iconImage: url(/common/icon/minus.svg); } .faq-list > li > .faq-list__a { overflow: hidden; /* height: 0px; */ /* visibility: hidden; */ /* padding: 0; */ /* transform-origin: top; */ /* transform: scaleY(0) translateY(-20px); */ transition: all 0.3s; } } .faq-list > li > .faq-list__q::before, .faq-list > li > .faq-list__a::before { position: absolute; left: var(--size-large); top: var(--size-large); content: "Q"; font-family: var(--ffont-family-english); font-optical-sizing: auto; font-weight: var(--fweight-bold); font-style: normal; width: 2.6rem; height: 2.6rem; font-size: 1.2rem; border-radius: 1.3rem; display: flex; align-items: center; justify-content: center; background-color: var(--mainColor); color: var(--main-txt-bodyColor); } .faq-list > li > .faq-list__q { background-color: var(--inversion-baseColor); border-bottom: 2px solid var(--baseColor); } .faq-list > li > .faq-list__q > p { font-weight: var(--fweight-medium); font-size: var(--ffont-title-small); } .faq-list > li > .faq-list__q::before { content: "Q"; background-color: var(--mainColor); color: var(--main-txt-bodyColor); } .faq-list > li > .faq-list__a { background-color: var(--base1Color); } .faq-list > li > .faq-list__a::before { content: "A"; background-color: var(--conversionColor); color: var(--conversion-txt-bodyColor); } /* 商品詳細ページ */ .p-product { margin-left: var(--size-xxx-large); } .p-product h1 { font-size: var(--ffont-title-large); margin-bottom: var(--size-medium); } .p-product__main { gap: var(--size-xxxxxxx-large); } .p-product__price { font-size: var(--fsize-medium); font-weight: var(--fweight-semibold); } .p-product__price strong { font-size: var(--fsize-x-large); font-family: var(--ffont-family-english); } .p-product__price .color-fg-danger small { font-size: var(--ffont-body-medium); color: var(--color-fg-default); font-weight: var(--fweight-normal); } .p-product__price__okinawa { font-size: var(--fsize-small); font-weight: var(--fweight-semibold); } .p-product__price__okinawa strong { font-size: var(--fsize-large); font-family: var(--ffont-family-english); } .p-product__price__okinawa .color-fg-danger small { font-size: var(--fsize-small); color: var(--color-fg-default); font-weight: var(--fweight-normal); } .p-product__dl { display: flex; font-weight: var(--fweight-semibold); margin: 0; } .p-product__dl + .p-product__dl { margin-top: var(--size-xx-small); } .p-product__dl dt { display: flex; margin-right: var(--size-small); min-width: 7.2rem; } .p-product__dl dt::after { content: ":"; display: inline-block; margin-left: auto; } .p-product__aftertext { line-height: 1.8; } .sold-out .p-product-image { position: relative; display: block; } .sold-out .p-product-image img { filter: grayscale(1) brightness(0.5); } .p-product__item.sold-out .p-product-image::before, .sold-out .main-image-container .p-product-image::before { content: ""; position: absolute; background: url(/common/img/soldout.png) no-repeat; background-size: contain; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .thumbnail-container { margin-top: 5px; } .thumbnail-container .p-product-image { cursor: pointer; } .thumbnail-container .p-product-image.active { border: 2px solid var(--mainDarkColor); font-size: 0; line-height: 0; border-radius: 5px; } .p-contactbox { background-color: var(--subColor); position: relative; } .p-contactbox::before { position: absolute; content: ""; display: inline-block; left: 1.5rem; top: 0; background-image: url(/common/img/contactbox_dot_before.svg); width: 5rem; height: 20rem; background-size: contain; background-repeat: no-repeat; } .p-contactbox::after { position: absolute; content: ""; display: inline-block; right: 4.5rem; bottom: -6rem; background-image: url(/common/img/contactbox_dot_after.svg); width: 12rem; height: 20rem; background-size: contain; background-repeat: no-repeat; } .p-contactbox > .rounded-3 { position: relative; z-index: 2; } .p-contactbox .headline-h2 { text-align: left; align-items: flex-end; position: relative; flex-direction: row; margin-bottom: var(--base-size-20, 20px) !important; } .p-contactbox .icon-after--contactbox-tit::after { background-image: url(/common/img/contactbox_tit.svg); content: ""; display: inline-block; width: 7rem; height: var(--ffont-title-large); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .p-contactbox__label { background: var(--inversion-baseColor); } .p-contactbox__label > dl { align-items: center; font-weight: var(--fweight-semibold); } .p-contactbox .p-contactbox__label .p-label { min-width: 6.8rem; margin-right: var(--size-small); text-align: center; } .p-contactbox__icon > .p-contactbox__icon-item { flex-direction: column; text-align: center; justify-content: center; } .p-contactbox__icon > .p-contactbox__icon-item:first-child { border-right: 1px solid var(--gray-darkColor); } .p-contactbox .p-contactbox__icon .icon { --v-iconSize: 7em; } .p-contactbox .p-contactbox__icon .icon.mail-circle { --v-iconColor: var(--conversionColor); } .p-contactbox__icon > .p-contactbox__icon-item > p { font-size: var(--ffont-title-large); } .contact-logo figure { display: flex; width: 6.8rem; height: 6.8rem; } .contact-logo h3 { font-size: calc(var(--ffont-title-medium) * 1.4); } .contact-logo__tel .icon.tel { --v-iconSize: 2em; } .contact-logo__tel .en { font-size: var(--ffont-title-large); } .contact-logo .contact-text { display: flex; flex-wrap: wrap; flex-direction: column; } .contact-logo .contact-text > p { margin: 0; } .contact-logo__tel_container { display: flex; align-items: center; justify-content: flex-start; } @media (max-width: 768px) { .contact-logo__tel_container { flex-direction: column; justify-content: center; } .contact-logo .contact-text { flex-direction: row; flex-wrap: wrap; justify-content: center; } } .contact-btn .contact-btn__link { max-width: 14rem; } .contact-btn[data-contact-count="4"] .contact-btn__link { max-width: 16rem; } .contact-btn[data-contact-count="3"] .contact-btn__link { max-width: 18rem; } .contact-btn[data-contact-count="2"] .contact-btn__link { max-width: 21rem; } .contact-btn .contact-btn__link__border { border-left: 1px solid var(--gray-darkColor); border-right: 1px solid var(--gray-darkColor); margin-left: -1px; } @media (max-width: 768px) { .contact-btn .contact-btn__link { width: 100%; max-width: none !important; } .contact-btn .contact-btn__link__border { border-right: 0; border-left: 0; } .contact-btn .contact-btn__link__border:nth-child(n+2) { border-top: 1px solid var(--gray-darkColor); } } .contact-btn .contact-btn__link__bg { /* background-image: url(/common/img/contactbox_def.jpg); */ background-repeat: no-repeat; background-position: left bottom; } .contact-btn .contact-btn__link.s-main-bgcolor { background-image: none; } .contact-btn .contact-btn__link .contact-btn__link--item { display: flex; font-size: calc(var(--ffont-title-medium) * 1.2); align-items: center; justify-content: center; padding: 0 1rem; } @media only screen and (max-width: 768px) { .contact-btn .contact-btn__link .contact-btn__link--item { justify-content: left; } } .contact-btn .contact-btn__link .contact-btn__link--item > p { display: flex; font-size: calc(var(--ffont-title-medium)* 1.2); align-items: center; justify-content: center; gap: 1rem; margin-left: -1rem; } .contact-btn__icon { display: flex; align-items: center; justify-content: center; background-color: var(--conversionColor); transition: all 0.3s; flex: 0 0 3rem; } .contact-btn__icon .icon { --v-iconColor: var(--conversion-txt-bodyColor); transition: all 0.3s; } .contact-btn .contact-btn__link:hover { background-color: var(--conversion-txt-bodyColor); color: var(--mainColor); } .contact-btn .contact-btn__link:hover .contact-btn__icon { background-color: var(--conversion-txt-bodyColor); border: 1px solid var(--gray-darkColor); } .contact-btn .contact-btn__link:hover .contact-btn__icon .icon { --v-iconColor: var(--conversionColor); } .contact-btn .contact-btn__link.s-main-bgcolor .contact-btn__icon { background-color: var(--main-txt-bodyColor); } .contact-btn .contact-btn__link.s-main-bgcolor .contact-btn__icon .icon { --v-iconColor: var(--mainColor); } .nationwide-box .en { font-size: var(--ffont-title-large); } .can-list .circle { overflow: hidden; border: 5px solid var(--mainColor); height: 10rem; width: 10rem; margin-bottom: var(--size-xx-small); } .can.nationwide-box .en { font-size: var(--ffont-title-large); } .can-list .can-list-item { background-image: url(/shop/img/can_bg.svg); background-position: center; background-size: contain; min-width: 10rem; min-height: 10rem; } .can-list .icon { --v-iconColor: var(--main-txt-bodyColor); } .can-list .icon.enn-table { --v-iconSize: 3.4em; max-height: 3.2em; } .can-list .icon.transfer { --v-iconSize: 5em; max-height: 2.5em; } .can-list .icon.design { --v-iconSize: 4em; max-height: 3.2em; } .can-list .icon.setup { --v-iconSize: 4em; max-height: 3.2em; } .can-list__txt { min-height: 4rem; font-weight: var(--fweight-bold); font-size: var(--ffont-subtitle); margin-top: var(--base-size-8, 8px); } @media (min-width: 768px) { .can-list .can-list-item { min-width: 11rem; min-height: 11rem; } .can-list .can-list-item + p { max-width: 11rem; margin: auto; } .col-md-2 { width: calc(16.66666666% - var(--base-size-8, 8px)); } .can-list__txt { min-height: 4.7rem; margin-top: var(--base-size-8, 8px); } } @media (max-width: 768px) { .can-list .can-list-item { min-width: 8rem; min-height: 8rem; } .can-list .can-list-item + p { max-width: 8rem; font-size: var(--fsize-x-small); margin: auto; } .can-list .icon { --v-iconSize: 2rem; } .can-list__txt { font-size: var(--fsize-x-small); min-height: 3rem; } } .l-gfooter .s-mainDark-bgcolor a { color: var(--main-txt-bodyColor); font-size: var(--ffont-caption); } /* p-search-form */ .p-search-form { position: relative; width: 100%; display: flex; line-height: 1; overflow: hidden; font-size: var(--fsize-small); align-items: center; justify-content: center; } .p-search-form > * { width: 100%; } .p-search-form__input-wrap { position: relative; width: 100%; } .p-search-form__input-wrap input { width: 100%; box-sizing: border-box; border-style: none; padding: 0.4rem 2rem 0.4rem 1rem; border: 1px solid var(--mainColor); border-radius: 3rem; line-height: 1; } .p-search-form__input-wrap input::placeholder { color: #e1e1e1; } .p-search-form__item { position: relative; } .p-search-form__btn { border: none; background: no-repeat; position: absolute; right: .7rem; top: 0; height: 100%; } .p-search-form input["type":""] { padding: 10px; } .p-search-form select { padding: 10px; } .p-float-footer { position: sticky; bottom: 0; z-index: 99; transition: all 0.5s; transform: translateY(100%); } body.is-hero-scroll .p-float-footer { transform: translateY(0); } body.is-footer-scroll .p-float-footer { display: none; visibility: hidden; transform: translateY(0); } .p-float-footer__list > li + li { border-left: 1px solid var(--shop-float-txt-bodyColor); } .p-float-footer a.s-shop-float-bgcolor { height: min(12vw, 4rem); font-size: min(3.1vw, var(--fsize-medium)); gap: min(2vw, 20px) !important; } .p-float-footer a.s-shop-float-bgcolor .icon { --v-iconColor: var(--shop-float-txt-bodyColor); --v-iconSize: min(5vw, 2rem); } .p-voice__container > * + * { padding-top: 2rem; margin-top: 1rem; } .p-voice__container .p-label { white-space: nowrap; } .p-voice__container .p-voice__dl_container { gap: 0.5rem 2rem; } @media (max-width: 544px) { .p-voice__container .p-voice__dl_container > dl { /* flex-direction: column; */ gap: 0.5rem; /* align-items: flex-start !important; */ } .p-voice__container .p-voice__dl_container > dl strong { padding: 0 !important; } } .header-search__input { font-size: 12px; width: 100%; border-radius: 2rem; border: 1px solid var(--gray-darkColor); padding: 5px 10px; } .header-search__btn { display: none; } .p-breadcrumb { padding: 0.5rem 0; } .p-breadcrumb > ul { display: block; font-size: var(--fsize-x-small); flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-breadcrumb > ul > li { display: inline; } .p-breadcrumb > ul > li + li::before { content: "/"; } .p-breadcrumb > ul > li > * { margin-right: 0.5rem; display: inline; } .p-breadcrumb > ul > li + li > * { margin-left: 0.5rem; } .p-product__main { gap: 0; } .p-product { margin-left: 0; } .p-textlink { position: relative; display: flex; } .p-textlink::after{ position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; background-color: var(--txt-darkColor); transition: .3s; } .p-textlink:hover::after{ width: 100%; } .product-side__list { font-size: var(--ffont-caption); } .similar-link { gap: var(--base-size-20, 20px) !important; } .similar-link .p-label { font-size: var(--ffont-caption); } @media (min-width: 768px) { .similar-link > a.col-md-2 { width: calc(16.66666666% - var(--base-size-20, 20px)); } } .product-toggle { display: none; } .product-label { cursor: pointer; display: flex; font-weight: var(--fweight-normal); align-items: center; justify-content: space-between; } .product-label .icon.plus { --v-iconColor: var(--gray-darkColor); } .product-toggle:checked + .product-label .icon.plus { --v-iconImage: url(/common/icon/minus.svg); background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); } .product-label, .product-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; } .product-content { display: grid; grid-template-rows: 0fr; transition: 250ms grid-template-rows ease; } .product-content > ul { padding:0 20px; overflow: hidden; } .product-content > ul > li:nth-last-child(1) { margin-bottom: 10px; } .product-toggle + .product-label + .product-content label { white-space: nowrap; } .product-toggle + .product-label + .product-content label > span { white-space: wrap; } .product-toggle:checked + .product-label + .product-content { grid-template-rows: 1fr; } .product-toggle:checked + .product-label::before { transform: rotate(-45deg) !important; } .l-gfooter-product__main { position: relative; } .l-gfooter-product__main::before { position: absolute; content: ""; display: inline-block; left: 8%; top: 0; background-image: url(/item/img/footer_product_main_before.svg); width: 6.6rem; height: 20rem; background-size: contain; background-repeat: no-repeat; z-index: 1; } .l-gfooter-product__main::after { position: absolute; content: ""; display: inline-block; right: -3%; bottom: -6rem; background-image: url(/item/img/footer_product_main_after.svg); width: 14rem; height: 20rem; background-size: contain; background-repeat: no-repeat; } .l-gfooter-product__mainbox { position: relative; z-index: 2; } .l-gfooter-product__logo { max-width: 10rem; } .l-gfooter-product__txt { font-size: var(--ffont-caption); } .l-gfooter-product__icon .icon { --v-iconSize: 6em; } .l-gfooter-product__icon .icon.mail-circle { --v-iconColor: var(--conversionColor); } .l-gfooter-product__icon p { font-size: var(--ffont-title-large); } .l-gfooter-product__link { gap: var(--base-size-10, 10px) !important; } @media (min-width: 768px) { .l-gfooter-product__link > li { width: calc(16.66666666% - var(--base-size-10, 10px)); } } .l-gfooter-product__sitemap { background-color: var(--product-footer-sitemap-bg-Color); } .l-gfooter-product__sitemap a { color: var(--product-footer-sitemap-txt-bodyColor); font-weight: var(--fweight-semibold); } .header-search__input { font-size: 12px; width: 100%; border-radius: 2rem; border: 1px solid var(--gray-darkColor); padding: 5px 10px; } .header-search__btn { display: none; } .p-product__main { gap: 0; } .p-product { margin-left: 0; } .p-textlink { position: relative; display: flex; } .p-textlink::after{ position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; background-color: var(--txt-darkColor); transition: .3s; } .p-textlink:hover::after{ width: 100%; } .product-side__list { font-size: var(--ffont-caption); } .similar-link { gap: var(--base-size-20, 20px) !important; } .similar-link .p-label { font-size: var(--ffont-caption); } @media (min-width: 768px) { .similar-link > a.col-md-2 { width: calc(16.66666666% - var(--base-size-20, 20px)); } } .l-gfooter-product__main { position: relative; } .l-gfooter-product__main::before { position: absolute; content: ""; display: inline-block; left: 8%; top: 0; background-image: url(/item/img/footer_product_main_before.svg); width: 6.6rem; height: 20rem; background-size: contain; background-repeat: no-repeat; z-index: 1; } .l-gfooter-product__main::after { position: absolute; content: ""; display: inline-block; right: -3%; bottom: -6rem; background-image: url(/item/img/footer_product_main_after.svg); width: 14rem; height: 20rem; background-size: contain; background-repeat: no-repeat; } .l-gfooter-product__mainbox { position: relative; z-index: 2; } .l-gfooter-product__logo { max-width: 10rem; } .l-gfooter-product__txt { font-size: var(--ffont-caption); } .l-gfooter-product__icon .icon { --v-iconSize: 6em; } .l-gfooter-product__icon .icon.mail-circle { --v-iconColor: var(--conversionColor); } .l-gfooter-product__icon p { font-size: var(--ffont-title-large); } .l-gfooter-product__link { gap: var(--base-size-10, 10px) !important; } @media (min-width: 768px) { .l-gfooter-product__link > li { width: calc(16.66666666% - var(--base-size-10, 10px)); } } .l-gfooter-product__sitemap { background-color: var(--product-footer-sitemap-bg-Color); } .l-gfooter-product__sitemap a { color: var(--product-footer-sitemap-txt-bodyColor); font-weight: var(--fweight-semibold); } /* block-shop-merit-container */ .block-shop-merit-container { } .block-shop-merit-container > *:nth-child(2n+1) { background-color: var(--gray-thinColor); } .block-shop-merit-container > *:nth-child(2n) { background-color: var(--mainColor); color: var(--main-txt-bodyColor); } .block-shop-merit-container > *:nth-child(2n) .headline-em { color: var(--main-txt-bodyColor); } .block-shop-merit--title { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .block-shop-merit--item { display: grid; grid-template-columns: 0.3fr 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 0px; } .block-shop-merit--image { grid-area: 1 / 1 / 4 / 2; } .block-shop-merit--title { grid-area: 1 / 2 / 2 / 4; } .block-shop-merit--body { grid-area: 2 / 2 / 4 / 4; } @media only screen and (max-width: 768px) { .block-shop-merit--title { justify-content: center; } .block-shop-merit--item { display: grid; grid-template-columns: 0.5fr 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 0px; } .block-shop-merit--image { grid-area: 1 / 1 / 2 / 2; } .block-shop-merit--title { grid-area: 1 / 2 / 2 / 3; } .block-shop-merit--body { grid-area: 2 / 1 / 3 / 3; } .block-shop-merit--body { background-color: #FFF; color: var(--txt-darkColor); padding-top: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; } } /* breadcrumb */ .breadcrumb { } .breadcrumb li a { margin-right: var(--base-size-16, 16px) !important; font-size: var(--ffont-caption); } .breadcrumb li::after { --v-iconImage: url(/common/icon/arrow-right.svg); --v-iconSize: 0.6em; content: ""; display: inline-flex; background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); vertical-align: middle; margin-right: var(--base-size-16, 16px) !important; } .breadcrumb li:nth-last-child(1)::after { display: none; } .blog-links__container { display: flex; } .blog-links .p-label { width: fit-content; } .blog-links figure { margin-right: var(--base-size-24, 24px) !important; } @media only screen and (max-width: 768px) { .blog-links__container { flex-direction: column; } .blog-links figure { margin-right: 0; margin-bottom: var(--base-size-24, 24px) !important; } } /* pagination */ .pagination { text-align: center; font-size: 1rem; } .pagination .screen-reader-text { display: none; } .pagination a, .pagination span, .pagination em { border-radius: 0; } .pagination .page-numbers:not(.next,.prev,.dots) { display: inline-block; background-color: var(--header-txt-bodyColor); color: var(--headerColor); border: 1px solid var(--headerColor); transition: all 0.3s; } .pagination .page-numbers.prev { font-size: 0.9rem; margin-right: 0.5rem; } .pagination .page-numbers.prev::before { content: ""; display: inline-block; background-image: url(/common/icon/arrow-left.svg); width: 1em; height: 1em; margin-right: 0.2em; } .pagination .page-numbers.next { font-size: 0.9rem; margin-left: 0.5rem; } .pagination .page-numbers.next::after { content: ""; display: inline-block; background-image: url(/common/icon/arrow-right.svg); width: 1em; height: 1em; margin-left: 0.5em; } .pagination .page-numbers:not(.next,.prev,.dots):hover { background-color: var(--headerColor); color: var(--header-txt-bodyColor); text-decoration: underline; } .pagination .page-numbers.dots:hover { border-color: transparent; cursor: inherit; } .pagination .current, .pagination .current:hover, .pagination [aria-current]:not([aria-current=false]) { background-color: var(--headerColor); color: var(--header-txt-bodyColor); border: 1px solid var(--headerColor); } .pagination a.pagination-passive, .pagination span.pagination-passive, .pagination em.pagination-passive { color: var(--header-txt-bodyColor); background-color: var(--headerColor); border: 1px solid var(--headerColor); } .pagination .previous_page, .pagination .next_page { color: var(--txt-darkColor); } .pagination .previous_page::before, .pagination .next_page::after { display: none; } .pagination [aria-disabled=true] { display: none; } .pagination .gap, .pagination .disabled, .pagination [aria-disabled=true], .pagination .gap:hover, .pagination .disabled:hover, .pagination [aria-disabled=true]:hover { color: var(--txt-darkColor); } @media (max-width: 544px) { .pagination .page-numbers:not(.next,.prev,.current) { display: none; } } /* SideNav */ .SideNav { background-color: transparent; } .SideNav-shop-blog { padding-top: var(--base-size-32, 32px) !important; } .SideNav-shop-blog .s-header-bgcolor:hover { background-color: var(--headerColor); color: var(--header-txt-bodyColor); } .SideNav-shop-blog .s-gray-thin-bgcolor { font-size: var(--ffont-subtitle); } .SideNav-shop-blog ul .SideNav-item { padding: 0; } .SideNav-shop-blog .SideNav-item > a { display: block; width: 100%; padding: 0.8rem 1rem; z-index: 2; } .SideNav-shop-blog .SideNav-item:last-child { box-shadow: none; } .SideNav-shop-blog .SideNav-item .icon { position: absolute; right: 1rem; z-index: 1; } @media (min-width: 1280px) { .SideNav-shop-blog { padding-top: 0 !important; padding-left: var(--base-size-32, 32px) !important; } } .blog-detail .headline-h4.headline-border, .blog-detail .headline-h3.headline-h3-leftline { margin-bottom: var(--base-size-64, 64px) !important; } .blog-detail > p { line-height: 2.6; } .blog-detail > p + p { margin-top: var(--base-size-40, 40px) !important; } .blog-detail > p span[style*="font-size: 18pt"] { line-height: 1; } .blog-detail p > img { width: auto; height: 100%; } .blog-detail > p + p img { margin-top: calc(-1 * var(--base-size-40, 40px)) !important; } .blog-previous .p-label { min-width: 4rem; text-align: center; } .blog-previous__prev { border-right: 1px solid var(--gray-thinColor); } @media only screen and (max-width: 1300px) { .blog-previous__prev { border-right: 0; border-bottom: 1px solid var(--gray-thinColor); } } /** form **/ .p-form-wrapper { margin: 3rem auto; } @media only screen and (max-width: 768px) { .p-form-wrapper { max-width: none; } } .p-form-wrapper input[type=text], .p-form-wrapper input[type=email], .p-form-wrapper input[type=tel], .p-form-wrapper textarea { width: 100%; padding: 10px; border: 1px solid var(--gray-darkColor); } .p-form-wrapper input[type=checkbox], .p-form-wrapper input[type=radio] { margin-right: var(--base-size-8, 8px) !important; } .p-form-wrapper .p-form-item__shop input[type=checkbox] + span, .p-form-wrapper .p-form-item__campaign input[type=radio] + span { margin-right: var(--base-size-40, 40px) !important; } .p-form-wrapper .p-form-flex { gap: var(--base-size-32, 32px) !important; } .p-form-wrapper [data-name="shop"] label, .p-form-wrapper [data-name="campaign"] label { white-space: nowrap; } .p-form-wrapper button, .p-form-wrapper [type=button], .p-form-wrapper [type=reset], .p-form-wrapper [type=submit] { cursor: pointer; } dl.p-form-item { margin-bottom: 2rem; max-width: 100%; } dl.p-form-item dt { margin-bottom: 0.5rem; display: flex; gap: 0.2rem 1rem; align-items: center; flex-wrap: wrap; } dl.p-form-item label + .p-label { margin-left: 1rem } dl.p-form-item legend { display: inline-block; font-weight: 600; } dl.p-form-item legend + p { display: inline-block; } dl.p-form-item dd { max-width: 100%; } dl.p-form-item dd.username { width: 20rem; } dl.p-form-item dd.tel { width: 20rem; } dl.p-form-item dd.email { width: 30rem; } dl.p-form-item dd.company { width: 30rem; } dl.p-form-item dd.zip > p > span { width: 10rem; } dl.p-form-item dd.zip > p { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } dl.p-form-item dd.zip > p input[type="button"] { border-radius: 1rem; background: var(--mainDarkColor); color: var(--main-txt-bodyColor); border: 0; font-size: var(--fsize-small); padding: 5px 15px; } dl.p-form-item dd.zip > p input[type="button"]:hover { background: var(--mainColor); } dl.p-form-item dd.addr { width: 100%; } dl.p-form-item dd.message { width: 100%; } @media only screen and (max-width: 768px) { dl.p-form-item dd.message textarea { max-height: 10rem; } } dl.p-form-item dd.item-name { width: 20rem; } dl.p-form-item dd.item-code { width: 20rem; } dl.p-form-item dd.item-num { width: 10rem; } .p-form-buttons { text-align: center; margin-top: 2rem; } .p-form-back-buttons { text-align: center; margin-top: 2rem; } .p-form-item-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; margin-bottom: 2rem; } .p-form-item-wrapper > .p-form-item { margin-bottom: 0; } .p-form-item.consent > .message { background-color: var(--base2Color); font-size: var(--fsize-small); padding: 1.5rem; margin-bottom: 1rem; } .p-form-item.consent > .acceptance { background-color: var(--base2Color); padding: 1rem; margin-bottom: 1rem; } .p-form-item.consent > .acceptance .wpcf7-list-item { margin: 0; } .p-form-item.consent > .acceptance .wpcf7-list-item label { padding: 1rem; display: inline-block; } .p-form-item > dd.checkbox .wpcf7-form-control-wrap + label { margin-top: 1rem; margin-bottom: 0.5rem; display: block; } .p-form-item > dd.checkbox .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 0.5rem; } .p-form-item > dd.checkbox .wpcf7-checkbox .wpcf7-list-item { margin: 0; } .p-form-item > dd.checkbox .wpcf7-checkbox .wpcf7-list-item label { padding: 1rem; display: block; border: 1px solid var(--gray-thinColor); } .wpcf7 > .screen-reader-response { max-width: var(--s-content-small-width); margin: auto; color: #fc7879; } .wpcf7-not-valid-tip { background: #dc3232; color: #FFF; padding: 5px; box-sizing: border-box; width: 100%; display: block; margin-top: 5px; border-radius: 6px; font-size: var(--fsize-small); line-height: 1.5; } .wpcf7-checkbox .wpcf7-list-item { margin: 0 10px; } .wpcf7 > .wpcf7-form > .wpcf7-response-output { display: inline-block; max-width: var(--s-content-small-width); margin: auto; color: #fc7879; } .wpcf7-spinner { position: absolute; } .wpcf7-form.sent { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; } .wpcf7-form.submitting .p-form-item, .wpcf7-form.submitting .p-form-buttons, .wpcf7-form.submitting .p-form-container, .wpcf7-form.submitting .message, .wpcf7-form.sent .p-form-item, .wpcf7-form.sent .p-form-buttons, .wpcf7-form.sent .p-form-container, .wpcf7-form.sent .message { display: none; } .wpcf7-form.submitting .s-base1-bgcolor, .wpcf7-form.sent .s-base1-bgcolor { background-color: transparent !important; } .wpcf7 form.sent .wpcf7-response-output { border: 0; color: var(--txt-darkColor); } .wpcf7-form .p-form-back-buttons { display: none; } .wpcf7-form.sent .p-form-back-buttons { display: block; } .wpcf7-form-control.wpcf7-radio { display: inline-flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .wpcf7-form-control.wpcf7-radio .wpcf7-list-item { margin: 0; } .wpcf7-form-control.wpcf7-radio .wpcf7-list-item > label { padding: 1rem; display: inline-block; border: 1px solid var(--gray-thinColor); } .wpcf7 input[type="file"] { max-width: 100%; } div#wpcf7cpcnf { position: relative; z-index: auto; } #wpcf7cpcnf table { width: 100%; } #wpcf7cpcnf tr { display: flex; flex-direction: column; margin-bottom: 1rem; } #wpcf7cpcnf tr th { display: block; text-align: left; font-size: var(--fsize-medium); } #wpcf7cpcnf tr td { display: block; min-height: 1em; } .wpcf7cp-form-hide { display: none; } .wpcf7cp-btns { text-align: center; } .wpcf7-form-control.wpcf7-submit { --animation-move-size: 0.5em; --bgColor: var(--redColor); --txtColor: var(--onTxtColor); --color-btn-hover-bg: var(--bgColor); --color-btn-hover-border: var(--bgColor); display: inline-block; position: relative; background-color: var(--bgColor); color: var(--txtColor); font-weight: 500; font-size: var(--fsize-base); padding: 1rem 3rem; border: 0; border-radius: 5rem; transition: all .3s; } .wpcf7-form-control.wpcf7-submit[disabled] { --bgColor: var(--gray-darkColor); } .wpcf7-form-control.wpcf7-submit::after { --v-iconImage: url(/common/img/icon_arrow_right.svg); content: ""; display: inline-flex; background: var(--v-iconColor, var(--txtColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 0.8em); height: var(--v-iconSize, 0.8em); vertical-align: middle; position: absolute; right: 1rem; top: calc(50% - 0.3em); } .wpcf7-form-control.wpcf7cp-cfm-edit-btn { --animation-move-size: 0.5em; --bgColor: var(--mainDarkColor); --txtColor: var(--txt-lightColor); --color-btn-hover-bg: var(--bgColor); --color-btn-hover-border: var(--bgColor); display: inline-block; position: relative; background-color: var(--bgColor); color: var(--txtColor); font-weight: 500; font-size: var(--fsize-base); padding: 1rem 3rem; border: 0; border-radius: 5rem; transition: all .3s; } #autozip { display: none !important; } .wpcf7-character-count.up { margin-top: -3px; text-align: right; display: block; font-size: 14px; line-height: 1; font-family: var(--ffont-family-english); } .wpcf7-character-count.up::after { content: " / " attr(data-maximum-value); } .wpcf7cp-progress-cover, .wpcf7cp-progress-content { display: none !important; } .wpcf7 form.invalid .wpcf7-response-output { display: flex; justify-content: center; text-align: center; margin-bottom: 2rem; } /** right-float-box **/ #expansionFloatBanner { position: fixed; bottom: 1rem; right: 2rem; transform: translateX(250px); transition: .5s; opacity: 0; z-index: 1000; max-width: min(77vw, 350px); display: none; } #expansionFloatBanner.active { display: block; } #right-float-box.scroll-start { transform: translateX(0); opacity: 1; transition: .5s; } #right-float-box.scroll-start.scroll-end { transform: translateX(250px); opacity: 0; } .right-float-box-in { display: inline-block; } .right-float-box-in .right-float-in { display: block; text-align: right; } .right-float-box-in .right-float-in > * { display: block; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.6); text-decoration: none; } .right-float-box-in .right-float-in img { max-width: 500px; } .right-float-box-in .upperRight img { width: 40px; } .right-float-box-in .right-float-in p { text-align: left; background-color: #FFF; padding: .5rem; text-decoration: none; } .right-float-box-in .upperRight { font-size: 25px; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; line-height: 30px; color: #FFF; background: #000; text-align: center; border-radius: 3px; cursor: pointer; z-index: 10; transition: all .5s; } .right-float-box-in .upperRight:hover { transform: scale(1.2); } .right-float-box-in .right-float-in label { text-align: center; display: inline-block; height: auto; line-height: 1.7; font-size: 15px; color: #000; margin-top: 5px; padding: 5px; background: rgb(255 255 255 / 50%); border-radius: 3px; } .right-float-box-in .right-float-in label input { vertical-align: text-top; line-height: 1; top: 1px; } .right-float-box-in .btn-hide input[type="checkbox"] { display: none; } .right-float-box-in .btn-hide > span { position: relative; vertical-align: middle; font-size: 13px; margin-right: 5px; border-radius: 3px; padding: 2px; border: 2px solid #000; background: #fff; opacity: .2; transition: all .3s; } .right-float-box-in .btn-hide input[type="checkbox"] + span:before { color: #000000; opacity: 0; transition: all .3s; } .right-float-box-in .btn-hide input[type="checkbox"]:checked + span { opacity: 1; } .right-float-box-in .btn-hide input[type="checkbox"]:checked + span:before { opacity: 1; } @media only screen and (max-width:678px){ .right-float-box-in .upperRight img {width:5vw;} .right-float-box-in .right-float-in img {max-width: 72vw;} #right-float-box.scroll-start{ right: 0;bottom: 15vw; max-width: 50vw; } .right-float-box-in .right-float-in label { font-size: 12px !important; display: block; margin-top: 0; border-radius: 0; } .right-float-box-in .upperRight { top: -30px; right: 0; font-size: 15px; width: 30px; height: 30px; line-height: 30px; } } @media only screen and (max-width:460px) { #right-float-box {bottom: 30vw;} } body.is-scroll #expansionFloatBanner { transform: translateX(0); opacity: 1; transition: .5s; } body.is-footer-scroll #expansionFloatBanner { transform: translateX(250px); opacity: 0; } #expansionFloatBanner .floatBannerIn { display: inline-block; } #expansionFloatBanner .floatBannerIn .right-float-in { display: block; text-align: right; } #expansionFloatBanner .floatBannerIn .right-float-in > * { display: block; /* box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.6); */ /* background: var(--baseColor); */ text-decoration: none; } #expansionFloatBanner .floatBannerIn .right-float-in img { max-width: 500px; } #expansionFloatBanner .floatBannerIn .upperRight img { width: 40px; } #expansionFloatBanner .floatBannerIn .right-float-in p { text-align: left; background-color: #FFF; padding: .5rem; text-decoration: none; } #expansionFloatBanner .floatBannerIn .upperRight { font-size: 25px; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; line-height: 30px; color: #FFF; background: #000; text-align: center; border-radius: 3px; cursor: pointer; z-index: 10; transition: all .5s; display: flex; justify-content: center; align-items: center; } #expansionFloatBanner .floatBannerIn .upperRight:hover { transform: scale(1.2); } #expansionFloatBanner .floatBannerIn .upperRight::before { content: ""; background-image: url(/common/icon/close.svg); background-size: contain; width: 60%; height: 60%; filter: invert(1); } #expansionFloatBanner .floatBannerIn .right-float-in label { text-align: center; display: inline-block; height: auto; line-height: 1.7; font-size: 15px; color: #000; margin-top: 5px; padding: 5px; background: rgb(255 255 255 / 50%); border-radius: 3px; } #expansionFloatBanner .floatBannerIn .right-float-in label input { vertical-align: text-top; line-height: 1; top: 1px; } #expansionFloatBanner .floatBannerIn .btn-hide input[type="checkbox"] { vertical-align: middle; margin-right: 0.5rem; } #expansionFloatBanner .floatBannerIn .btn-hide > span { position: relative; vertical-align: middle; font-size: 13px; margin-right: 5px; border-radius: 3px; padding: 2px; border: 2px solid #000; background: #fff; opacity: .2; transition: all .3s; } #expansionFloatBanner .floatBannerIn .btn-hide input[type="checkbox"] + span:before { color: #000000; opacity: 0; transition: all .3s; } #expansionFloatBanner .floatBannerIn .btn-hide input[type="checkbox"]:checked + span { opacity: 1; } #expansionFloatBanner .floatBannerIn .btn-hide input[type="checkbox"]:checked + span:before { opacity: 1; } @media only screen and (max-width:678px){ #expansionFloatBanner .floatBannerIn .upperRight img {width:5vw;} #expansionFloatBanner .floatBannerIn .right-float-in img {max-width: 72vw;} #expansionFloatBanner .floatBannerIn .right-float-in label { font-size: 12px !important; display: block; margin-top: 0; border-radius: 0; } } #expansionFloatBanner.layout02 .floatBannerIn .upperRight::before { content: ""; display: block; width: 15.32px; height: 15.32px; background: url(/_build_/assets/sample/floatbanner_01.svg) no-repeat; background-position: center; background-size: cover; } #expansionFloatBanner.layout02 .p-text-container { padding: 0; border-left: 2px solid var(--des-main-defColor); margin: 0 3rem 2rem; } #expansionFloatBanner.layout02 .p-text-container > .p-subtitle { padding: 0 0 0 1rem; background-color: transparent; } #expansionFloatBanner.layout02 .p-text-container > .p-title { padding: 0 0 0 1rem; background-color: transparent; } #expansionFloatBanner.layout02 .externalLinkIcon { position: relative; padding: 0; } #expansionFloatBanner.layout02 .externalLinkIcon::before { position: absolute; content: ""; display: block; top: 0; left: 0; height: 100%; width: 100%; opacity: .9; background-color: var(--baseColor); z-index: -1; } /* search-form */ .search-form { font-size: var(--fsize-small); } .search-form dl { align-items: center; } .search-form input[type="text"], .search-form input[type="number"], .search-form select { border: 1px solid var(--gray-darkColor); font-size: var(--fsize-small); padding: 5px 10px; border-radius: 5px; } .search-form .checkbox { font-size: var(--fsize-small); font-weight: 400; padding: 5px 10px; } .search-form > input[type="checkbox"] { display: none; } .search-form .search-form-title > label { --v-iconColor: var(--gray-darkColor); display: flex; align-items: center; justify-content: space-between; padding-right: 0.5rem; } .search-form > input[type="checkbox"]:not(:checked) + .search-form-title + div { visibility: hidden; transform-origin: top left; transform: scaleY(0); transition: all 0.3s; } .search-form > input[type="checkbox"]:not(:checked) + .search-form-title + div { display: none !important; } .search-form > input[type="checkbox"]:checked + .search-form-title .icon.plus { --v-iconImage: url(/common/icon/minus.svg); } .search-form > input[type="checkbox"]:checked + .search-form-title + div { visibility: visible; } .search-submit { position: sticky; bottom: 0; padding: 1rem 0; background-color: var(--base1Color); border-radius: 10px; } .search-form-toggle:checked + .search-form-title + div { background-color: var(--gray-thinColor); } .product-content input[type="checkbox"] { vertical-align: top; margin-top: 4px; } .product-content input[type="checkbox"] + span { display: inline-block; width: 100%; } .product-content input[type="checkbox"]:checked + span { background: var(--gray-thinColor); } /* blog-content */ .textarea-content { font-size: var(--fsize-medium); word-break: break-all; } .textarea-content img { width: auto; height: auto; } .textarea-content p { line-height: 1.8; } .text-link, .textarea-content a:not(.btn) { text-decoration: underline; color: var(--color-accent-fg); width: auto; height: auto; } .text-link:hover, .textarea-content a:not(.btn):hover { text-decoration: none; } .textarea-content > blockquote { background: #F7F7F7; padding: 2rem; margin: 0.5rem 0; } .textarea-content:not(.blog-content) h2, .container-xl > .headline-h3, .container-md > .headline-h3 { margin-bottom: 1rem; font-size: var(--fsize-x-large); position: relative; background: var(--gray-thinColor); padding: 0.5rem 1rem; } .textarea-content:not(.blog-content) * + h2 { margin-top: 2rem; } /* .textarea-content h2::before { content: ""; position: absolute; display: block; bottom: -2px; height: 3px; width: 100%; background: var(--gray-thinColor); } .textarea-content h2::after { content: ""; position: absolute; display: block; bottom: -2px; height: 3px; width: 3rem; background: var(--mainDarkColor); } */ .textarea-content:not(.blog-content) h2::after, .container-xl > .headline-h3::after, .container-md > .headline-h3::after { content: ""; position: absolute; display: block; top: 0; left: 0; height: 100%; width: 3px; background: var(--mainDarkColor); } .textarea-content:not(.blog-content) h3, .container-xl > .headline-h4, .container-md > .headline-h4 { display: block; width: 100%; margin-bottom: 1rem; font-size: var(--fsize-large); position: relative; padding: 3px 0; } .textarea-content:not(.blog-content) h3::before, .container-xl > .headline-h4::before, .container-md > .headline-h4::before { content: ""; position: absolute; display: block; bottom: -0.2em; height: 1px; width: 100%; background: var(--mainDarkColor); } .textarea-content:not(.blog-content) * + h3 { margin-top: 2.5rem; } .textarea-content blockquote > h3::before { content: ""; position: absolute; display: block; bottom: -0.2em; height: 1px; width: 100%; background: var(--mainDarkColor); } .textarea-content:not(.blog-content) > h4 { margin-bottom: 0.5rem; font-size: var(--fsize-medium); } .textarea-content:not(.blog-content) * + h4 { margin-top: 2.3rem; } .textarea-content ol { padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .textarea-content ul, ul.p-ullist-def { padding-left: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; list-style: none !important; } .textarea-content ul:not(.p-ullist-none) li, ul.p-ullist-def li { position: relative; --v-iconImage: url(../icon/dot.svg); --v-iconSize: 0.5em; } .textarea-content ul:not(.p-ullist-none) li::before, ul.p-ullist-def li::before { position: absolute; left: -1rem; content: ""; display: inline-flex; background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); vertical-align: middle; padding-top: 1.4em; } .textarea-content ul li ul, ul.p-ullist-deep { padding-left: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; list-style: none !important; } .textarea-content ul:not(.p-ullist-none) li ul li::before, ul.p-ullist-deep li::before { content: "・"; display: inline-block; background: none; padding-top: 0; width: 1em; height: initial; color: var(--blueDarkColor); } ol.p-ollist-def { padding-left: 1.5rem; margin-top: 1rem; margin-bottom: 1rem; list-style-type: auto; } ol.p-ollist-def li::marker { font-family: var(--ffont-family-english); font-weight: var(--fweight-semibold); } ol.p-ollist-def li { padding-left: 0.3rem; } .textarea-content table, table.p-table-def { width: 100%; } table.p-table-def, table.p-table-def td, table.p-table-def th, .textarea-content table, .textarea-content td, .textarea-content th { border: 1px solid #ECECEC; } table.p-table-def td, table.p-table-def .textarea-content table, .textarea-content td, .textarea-content th { padding: 0.5rem; background-color: var(--base1Color); } table.p-table-def th, .textarea-content th { background-color: var(--mainDarkColor); color: var(--main-txt-bodyColor); } @media only screen and (max-width: 768px) { table.p-table-def table tr, .textarea-content:not(.blog-content,.information_blog-content) table tr { display: block; } table.p-table-def table tr > *, .textarea-content:not(.blog-content,.information_blog-content) table tr > * { width: 100%; display: block; } } .textarea-content .note, .p-note { font-size: var(--fsize-small); background: var(--inversion-baseColor); padding: 1rem; } .textarea-content .entry-index[data-title]::before { content: attr(data-title)""; display: block; background-color: var(--mainDarkColor); color: var(--main-txt-bodyColor); padding: 0.5rem 1rem; } .textarea-content .entry-index { background: var(--base2Color); font-size: var(--fsize-ratio); margin: 1rem 0; padding: 0; } .textarea-content .entry-index ul { padding: 0.5rem 3rem; } .textarea-content .exp { border: 2px solid var(--mainDarkColor); padding: 1.5rem; border-radius: 10px; margin-bottom: 1rem; } .textarea-content .exp h3, .textarea-content .exp h4 { font-size: var(--fsize-medium); margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gray-darkColor); } .textarea-content .futoji { font-weight: 700; } .textarea-content strong { font-weight: 700; } .blog-content h2 { font-size: var(--fsize-xx-large); line-height: 1.2; margin-top: 2em; margin-bottom: 1.5em; } .blog-content h3 { font-size: var(--fsize-x-large); line-height: 1.2; margin-top: 2em; margin-bottom: 1.5em; } .blog-content h4, .blog-content h5, .blog-content h6 { font-weight: 700; font-size: var(--fsize-large); line-height: 1.2; margin-top: 2em; margin-bottom: 1.5em; } #autozip { transform: translate(-20px, 25px); } /* .screen-reader-response > ul { max-width: var(--s-content-small-width); margin: 0 auto 3rem; font-size: var(--fsize-medium); color: red; background: var(--gray-thinColor); padding: 2rem; } */ /* .screen-reader-response { max-width: var(--s-content-small-width); margin: 0 auto 3rem; font-size: var(--fsize-medium); color: red; background: var(--gray-thinColor); padding: 2rem; } .wpcf7-response-output { } */ /* .wpcf7 form.invalid .wpcf7-response-output { display: none; } */ /* popup */ .lb-dataContainer { position: absolute; top: -40px; right: auto; left: 50%; transform: translateX(-50%); } a[rel="lightbox"] > figure { position: relative; } a[rel="lightbox"] > figure::after { --v-iconImage: url(/common/icon/zoomup.svg); --v-iconSize: 1.5em; content: ""; display: inline-flex; background-color: var(--v-iconColor, var(--mainDarkColor)); mask-image: var(--v-iconImage, none); mask-position: center center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--v-iconImage, none); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; width: var(--v-iconSize, 1em); height: var(--v-iconSize, 1em); vertical-align: middle; position: absolute; right: 0.5rem; bottom: 0.5rem; } .p-product__main a[rel="lightbox"] > figure::after { --v-iconColor: #FFF; } .p-infomation-blog--item > div { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; aspect-ratio: 3/4; } .p-infomation-blog--item > div::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.7; z-index: 1; } .p-infomation-blog--item > div h3 { color: #FFF; top: auto; left: 8%; right: 8%; font-size: 21px; border-bottom: 3px solid #05848d; padding-bottom: 0.1em; z-index: 9; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .p-infomation-blog--item.p-infomation-blog--item-simple > div h3 { color: #FFF; top: auto; left: 8%; right: 8%; font-size: 21px; border-bottom: 3px solid #05848d; padding-bottom: 0.1em; z-index: 9; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } .p-infomation-blog--item .series_name { padding: 3px 7px; font-size: 13px; text-align: left; border: 1px solid; color: #FFF; top: 20%; left: 8%; right: 8%; border-radius: 17px; z-index: 9; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; min-width: auto; width: fit-content; height: 1.6rem; } .p-infomation-blog--item .subtitle { color: #FFF; font-size: 13px; top: 67%; left: 8%; right: 8%; z-index: 9; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .p-infomation-blog--detail { height: min(15rem, 40vw); overflow: hidden; } .p-infomation-blog--detail figure { height: 100%; } .p-infomation-blog--detail img { height: 100%; object-fit: cover; object-position: center; } .p-infomation-blog--detail::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--mainDarkColor); opacity: 0.9; z-index: 1; } .p-infomation-blog--detail > h1 { top: 50%; left: 3%; color: #FFF; z-index: 9; font-size: min(32px, 4vw); transform: translateY(-50%); } .p-infomation-blog--detail .series_name { top: 14%; left: 3%; border: 1px solid #FFF; border-radius: 36px; color: #FFF; padding: 0.3% 2%; z-index: 9; font-size: min(16px, 3.2vw); } .p-infomation-blog--detail .subtitle { top: 71%; padding: 1.3% 4%; width: 100%; background: #FFF; z-index: 9; font-size: min(var(--fsize-medium), 2.7vw); } .p-infomation-blog--detail-single { height: 15rem; overflow: hidden; } .p-infomation-blog--detail-single figure { height: 100%; } .p-infomation-blog--detail-single img { height: 100%; object-fit: cover; object-position: center; } .p-infomation-blog--detail-single::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--mainDarkColor); opacity: 0.9; z-index: 1; } .p-infomation-blog--detail-single > h1 { top: 50%; left: 0; color: #FFF; z-index: 9; padding: 0 1em; transform: translateY(-50%); } .p-infomation-blog--detail-single .p-date { position: absolute; bottom: 0; z-index: 9; text-align: right; display: block; width: 100%; padding: 1rem; color: #FFF; } /* block-item-image-4col */ .block-item-image-4col .block-item-image-4col--text { position:absolute; background:rgba(0,0,0,0.7); color:#FFF; } /* block-item-service-4col */ .block-item-service-4col .block-item-service-4col--subicon-border { top: 0rem; right: -1rem; --v-iconColor: #FFF; } .block-item-service-4col .block-item-service-4col--subicon { top: 0rem; right: -1rem; --v-iconColor: var(--mainDarkColor); } .block-item-circle-4col .block-item-circle-4col--image { position:absolute; background: rgba(0,0,0,0.7); color: #FFF; } .block-item-circle-5col .block-item-circle-5col--image { position:absolute; background: rgba(0,0,0,0.7); color: #FFF; } .filter-black { position:absolute; background: rgba(0,0,0,0.7); color: #FFF; } .color-box { display: inline-block; width: 1.5em; height: 1.5em; border-radius: 3px; border: 1px solid #cfcfcf; vertical-align: middle; margin-right: 7px; } .color-box.orange { background-color: orange; } .color-box.off-white { background-color: #FFF9EE; } .color-box.green { background-color: green; } .color-box.gray { background-color: gray; } .color-box.new-gray { background-color: #d7d2c1; } .color-box.navy { background-color: navy; } .color-box.brown { background-color: brown; } .color-box.black { background-color: black; } .color-box.blue { background-color: blue; } .color-box.beige { background-color: beige; } .color-box.white { background-color: white; } .color-box.red { background-color: red; } .color-box.grain-dark-brown { background-color: #654321; } .color-box.grain-natural { background-color: #deb887; } .color-box.grain-brown { background-color: #864A2B; } .block-middle-page-list { } .block-middle-page-list--item { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: max-content max-content 1fr auto; grid-column-gap: 0px; grid-row-gap: 0px; } .block-middle-page-list--title { grid-area: 1 / 1 / 2 / 3; } .block-middle-page-list--body { grid-area: 2 / 1 / 3 / 3; } .block-middle-page-list--images { grid-area: 1 / 3 / 3 / 4; } @media only screen and (max-width: 768px) { .block-middle-page-list--item { grid-template-columns: 1fr; grid-template-rows: max-content max-content max-content auto; grid-row-gap: 1rem; } .block-middle-page-list--title { grid-area: 1 / 1 / 2 / 3; } .block-middle-page-list--body { grid-area: 3 / 1 / 4 / 2; } .block-middle-page-list--images { grid-area: 2 / 1 / 3 / 2; } } .p-before-after-container { align-items: stretch; } .p-before-after-container .p-before-link, .p-before-after-container .p-after-link { align-self: stretch; } .p-before-after-container .p-before-link > a, .p-before-after-container .p-after-link > a { display: flex; align-items: center; width: 100%; } .p-before-after-container .p-after-link > a > * { justify-content: flex-end; } .swiper-button-prev, .swiper-button-next { opacity: 0.3; transition: all 0.3s; } .swiper-button-prev:hover, .swiper-button-next:hover { opacity: 1; } .p-svg-office-chair-sp-list .en { width: 1.8em; height: 1.8em; border-radius: 9em; } @media only screen and (max-width: 768px) { .p-svg-office-chair { max-width: 100%; overflow: hidden; text-align: center; } .p-svg-office-chair > svg { width: 110%; max-width: none; height: auto; margin-left: -5%; } } .cases-list { } .cases-list__pic { position: relative; } .cases-list__pic::before { position: absolute; left: -2px; top: -10%; content: ""; display: inline-block; height: 120%; aspect-ratio: cos(80deg); clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--baseColor); z-index: 9; } .block-cases-detail-company__logo { border-right: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default); } @media only screen and (max-width: 767px) { .block-cases-detail-company__logo { border-right: 0; border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default); } } @media only screen and (max-width: 1011px) { .cases-list__pic::before { position: absolute; left: -10%; top: -4%; content: ""; display: inline-block; height: 120%; aspect-ratio: cos(80deg); clip-path: polygon(100% 0%, 50% 20%, 0% 0); background: var(--baseColor); width: 120%; } } .block-cases-detail-txt__person { border-left: 2px solid var(--mainDarkColor); } .block-cases-detail-txt__person .fsize-small { margin-bottom: 0.2rem; } .block-cases-detail-pdf .btn.btn-dl { font-size: var(--fsize-large); padding: 1.5rem 3rem 1.5rem 11rem; position: relative; display: flex; flex-direction: column; } .block-cases-detail-pdf .btn.btn-dl::after { top: calc(50% - 0.5em); } .block-cases-detail-pdf .btn.btn-dl img { position: absolute; bottom: 0; left: 1.5rem; width: 9rem; height: 9rem; object-fit: contain; object-position: bottom; } @media only screen and (max-width: 767px) { .block-cases-detail-pdf .btn.btn-dl { padding: 2rem 3rem 2rem 3rem; margin-top: 3rem; } .block-cases-detail-pdf .btn.btn-dl img { bottom: auto; top: -8rem; left: auto; } } .block-cases-detail-mv { position: relative; } .block-cases-detail-mv > h1 { position: absolute; z-index: 1; top: 359px; transform: translateY(-62%); width: calc(1420px - 358px + ((100% - 1420px) / 2)); height: 242px; font-size: 1.3rem; box-sizing: border-box; padding: 3.5rem 3rem 3.5rem calc((100% - 1200px) / 2); } .block-cases-detail-mv > h1::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #08848d 0%, rgba(8, 132, 141, 0.27) 100%); opacity: 0.8; z-index: 1; } .block-cases-detail-mv > h1 > * { position: relative; z-index: 2; } .block-cases-detail-mv > h1 .color-mainDark { border: 1px solid #FFF; background: #FFF; padding: 1rem; } .block-cases-detail-mv > h1 .color-mainDark + .color-white { border: 1px solid #FFF; padding: 1rem; } .block-cases-detail-mv > h1 .color-mainDark + .color-white + .color-white { font-weight: 400; margin-top: 1.5rem; font-size: 1.9rem; } @media only screen and (max-width: 1279px) { .block-cases-detail-mv > h1 { position: absolute; z-index: 1; top: 50%; transform: translateY(-62%); width: 76vw; height: 20vw; font-size: 2vw; box-sizing: border-box; padding: 3vw 3vw; } .block-cases-detail-mv > h1::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #08848d 0%, rgba(8, 132, 141, 0.27) 100%); opacity: 0.8; z-index: 1; } .block-cases-detail-mv > h1 > * { position: relative; z-index: 2; } .block-cases-detail-mv > h1 .color-mainDark { border: 1px solid #FFF; background: #FFF; padding: 1.5vw; } .block-cases-detail-mv > h1 .color-mainDark + .color-white { border: 1px solid #FFF; padding: 1.5vw; } .block-cases-detail-mv > h1 .color-mainDark + .color-white + .color-white { font-weight: 400; margin-top: 2vw; font-size: 3vw; } } @media only screen and (max-width: 767px) { .block-cases-detail-mv > h1 { position: absolute; z-index: 1; font-size: 3.8vw; top: 50%; transform: translateY(-50%); padding: 6vw 4vw; width: 100%; height: auto; } .block-cases-detail-mv > h1::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #08848d 0%, rgba(8, 132, 141, 0.27) 100%); opacity: 0.8; z-index: 1; } .block-cases-detail-mv > h1 > * { position: relative; z-index: 2; } .block-cases-detail-mv > h1 .color-mainDark { border: 1px solid #FFF; background: #FFF; padding: 1.5vw; } .block-cases-detail-mv > h1 .color-mainDark + .color-white { border: 1px solid #FFF; padding: 1.5vw; } .block-cases-detail-mv > h1 .color-mainDark + .color-white + .color-white { font-weight: 400; font-size: 4vw; margin-top: 2vw; } }