/*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } * { --inner-percent: 4%; --inner-min-px: 15px; margin: 0; padding: 0; } html { overflow: auto; font-size: 62.5%; } body { position: relative; min-width: 280px; max-width: 750px; margin: auto; line-height: 2; color: #000; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(1.4rem, 0.8666666667rem + 1.1111111111vw, 1.7rem); overflow: hidden; -webkit-text-size-adjust: 100%; } @supports not (font-size: clamp(14 * 0.1rem, 0.8666666667rem + 1.1111111111vw, 17 * 0.1rem)) { body { font-size: 1.4rem; } } @media (max-width: 374.98px) { body { font-size: 3.7vw; } } @media (min-width: 750px) { body { font-size: 1.6rem; } } a { color: inherit; transition: all 0.3s ease-in; } a:not([class]) { text-decoration: underline; } @media not all and (pointer: coarse) { a:not([class]):hover { text-decoration: none; } } span { font-weight: inherit; } em { font-style: normal; } img { display: block; width: 100%; height: auto; } /* SP/PC only*/ @media (min-width: 480px) { .u-sp { display: none !important; } } /* link */ .u-link { display: block; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .u-link:hover { opacity: 0.75; } } /* layout */ .u-inner { box-sizing: border-box; width: 100%; padding-left: min(var(--inner-percent), var(--inner-min-px)); padding-right: min(var(--inner-percent), var(--inner-min-px)); } .u-bg-beige { background-color: #FFF3E6; } /* font */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-serif { font-family: "Shippori Mincho", serif; font-weight: 700; } /* .l-header ================================================ */ .l-header { padding-top: 4.2vw; padding-bottom: 2.9vw; } .l-header__logo { width: 17.8vw; max-width: 134px; margin: auto; } @media (min-width: 750px) { .l-header { padding-top: 30px; padding-bottom: 20px; } } /* .l-footer ================================================ */ .l-footer { padding-top: 16px; padding-bottom: 15px; line-height: 1.8; background-color: #1B3C28; font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); color: #fff; text-align: center; } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .l-footer { font-size: 1rem; } } /* HOME */ .l-main-img__note { margin-left: min(var(--inner-percent), var(--inner-min-px)); margin-right: min(var(--inner-percent), var(--inner-min-px)); padding-top: 10px; padding-bottom: 15px; line-height: 1.5; } .l-main-img__note-item { padding-left: 1.8em; text-indent: -1.8em; font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .l-main-img__note-item { font-size: 1rem; } } .l-main-img__note-item span { display: inline-block; } @media (min-width: 480px) { .l-main-img__note-item { padding-left: 0; text-indent: 0; } } .c-btn01 { --margin-top: 20px; --margin-right: auto; --margin-bottom: 0; --margin-left: auto; --width: 79.71%; --height: 54px; --border-radius: 30px; --foreground-color: #F75B4A; --hover-color: #fff; overflow: hidden; width: var(--width); max-width: 330px; margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left); text-align: center; } .c-btn01__link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: var(--height); border-radius: var(--border-radius); border: 1px solid var(--foreground-color); background-color: var(--foreground-color); font-size: 2rem; color: var(--hover-color); text-decoration: none; transition: all 0.3s ease-in; } .c-btn01__link span { position: relative; } .c-btn01__link span::after { content: ""; display: inline-block; margin-left: 5px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 14px 9.5px 0 9.5px; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-btn01__link:hover { background-color: var(--hover-color); color: var(--foreground-color); } .c-btn01__link:hover span::after { border-color: #F75B4A transparent transparent transparent; } } .c-btn01.has-arw-left { --margin-top: 30px; --width: 89.56%; } .c-btn01.has-arw-left .c-btn01__link span::after { content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 9.5px 0 9.5px 14px; } @media not all and (pointer: coarse) { .c-btn01.has-arw-left .c-btn01__link:hover span::after { border-color: transparent transparent transparent #F75B4A; } } @media (max-width: 374.98px) { .c-btn01 .c-btn01__link { font-size: 5.3vw; } } /* home-intro */ .home-intro { padding-top: 4vw; padding-left: min(var(--inner-percent), var(--inner-min-px)); padding-right: min(var(--inner-percent), var(--inner-min-px)); } .home-intro__inner { padding-top: 5.6vw; padding-bottom: 5.3vw; background: url(../img/home/bg_intro01.png) no-repeat 0 0/cover; } .home-intro__heading { margin-bottom: 14px; line-height: 1.5; color: #fff; text-align: center; } .home-intro__heading-sub { margin-bottom: 7px; } .home-intro__heading-main { font-size: 5.8vw; } .home-intro__heading small { font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .home-intro__heading small { font-size: 1rem; } } .home-intro__box { box-sizing: border-box; width: 91.5942028986%; margin: auto; padding-top: 5vw; padding-left: 5.6vw; padding-right: 5.6vw; padding-bottom: 5vw; background-color: #fff; color: #7B3000; text-align: center; } .home-intro__box-head { line-height: 1.3636363636; font-size: 6.6vw; } .home-intro__box-head em { display: inline-block; line-height: 1.5; font-size: 5.8vw; color: #F75B4A; } .home-intro__box-date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; margin-bottom: 16px; line-height: 1.5; font-size: 1.8rem; text-align: center; } .home-intro__box-date dt { display: inline-block; padding: 6px 10px; line-height: 1.1; border: 1px solid; font-size: 1.4rem; } .home-intro__box-date dd { text-align: left; } .home-intro__box-img { margin-bottom: 20px; } .home-intro__box-img > img { width: min(64.88%, 340px); margin: auto; } .home-intro__box-img em { display: block; width: fit-content; margin: 6px auto 0; padding: 0.25em 1.5em; line-height: 1.5; border-radius: 50px; background-color: #F75B4A; color: #fff; font-size: clamp(1.6rem, -0.1777777778rem + 3.7037037037vw, 2.6rem); } @supports not (font-size: clamp(16 * 0.1rem, -0.1777777778rem + 3.7037037037vw, 26 * 0.1rem)) { .home-intro__box-img em { font-size: 1.6rem; } } .home-intro__box-txt { margin-bottom: 16px; font-size: 3.7vw; } .home-intro__box-blends { padding: 7px 0; border-top: 1px solid; border-bottom: 1px solid; font-size: 3.2vw; } .home-intro__box-blends span { font-size: 4.2vw; } .home-intro__target { display: grid; grid-template-columns: min(16.8vw, 100px) 1fr; grid-gap: min(1.33vw, 20px); place-items: center; width: fit-content; margin: 0 auto; } .home-intro__target dt { display: flex; justify-content: center; align-items: center; width: min(16.8vw, 100px); height: min(16.8vw, 100px); line-height: 1.4; border-radius: 50%; background-color: #CEB679; font-size: clamp(1.3rem, -0.3rem + 3.3333333333vw, 2.2rem); color: #fff; } @supports not (font-size: clamp(13 * 0.1rem, -0.3rem + 3.3333333333vw, 22 * 0.1rem)) { .home-intro__target dt { font-size: 1.3rem; } } .home-intro__target dd { line-height: 1.7; text-align: left; font-size: clamp(1.1rem, -0.8555555556rem + 4.0740740741vw, 2.2rem); } @supports not (font-size: clamp(11 * 0.1rem, -0.8555555556rem + 4.0740740741vw, 22 * 0.1rem)) { .home-intro__target dd { font-size: 1.1rem; } } @media (min-width: 750px) { .home-intro__inner { padding-top: 42px; padding-bottom: 40px; } .home-intro__heading-main { font-size: 3.5rem; } .home-intro__box { padding: 25px 28px; } .home-intro__box-head { font-size: 5.1rem; } .home-intro__box-head em { font-size: 3.5rem; } .home-intro__box-img { max-width: 548px; margin-left: auto; margin-right: auto; } .home-intro__box-img p:last-of-type { font-size: 1.9rem; } .home-intro__box-date { font-size: 2.3rem; } .home-intro__box-txt { font-size: 2.2rem; } .home-intro__box-blends { font-size: 1.9rem; } .home-intro__box-blends span { font-size: 2.5rem; } } @media (max-width: 411px) { .home-intro__box-blends { word-break: keep-all; } } /* home-detail */ .home-detail__inner { padding-top: 10.1vw; padding-bottom: 9.3vw; } .home-detail__article + .home-detail__article { margin-top: 40px; } .home-detail__article.is-first .home-detail__article-img { margin-bottom: 9px; } .home-detail__article.is-first .home-detail__article-img img { width: 28.115942029%; } .home-detail__article.is-second .home-detail__article-img { margin-bottom: 5.8vw; } .home-detail__article.is-second .home-detail__article-img img { width: 64.431884058%; } .home-detail__article-head { margin-bottom: 10px; line-height: 1.5; font-size: 5.3vw; color: #154B3D; text-align: center; } .home-detail__article-img img { margin: auto; } .home-detail__article-txts { text-align: center; } .home-detail__article-txts p:has(small) { line-height: 1.1; } .home-detail__article-txts p + p { margin-top: 1em; } .home-detail__article-txts p em { display: inline-block; margin-top: 5px; padding: 0 0.5em; background-color: #fff; font-weight: 700; font-size: clamp(1.6rem, 0rem + 3.3333333333vw, 2.5rem); } @supports not (font-size: clamp(16 * 0.1rem, 0rem + 3.3333333333vw, 25 * 0.1rem)) { .home-detail__article-txts p em { font-size: 1.6rem; } } .home-detail__article-txts p sup { display: inline-block; transform: translateY(-5px); font-size: 0.8em; } .home-detail__article-txts p small { font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .home-detail__article-txts p small { font-size: 1rem; } } .home-detail__article > dl { display: grid; grid-gap: 30px 20px; grid-template-columns: 27.82% 1fr; max-width: 600px; margin-left: auto; margin-right: auto; } .home-detail__article > dl dt { align-self: end; padding-bottom: 3vw; } .home-detail__article > dl dd h3 { margin-bottom: 9px; line-height: 1.5; font-size: 5.3vw; color: #154B3D; } .home-detail__article > dl dd p { line-height: 1.8333333333; font-size: 3.2vw; } @media (max-width: 374.98px) { .home-detail__article-txts { width: 100%; } } @media (min-width: 480px) { .home-detail__article.is-second .home-detail__article-img { margin-bottom: 35px; } .home-detail__article > dl dt { padding-bottom: 0; } .home-detail__article > dl dd h3 { font-size: 2.4rem; } .home-detail__article > dl dd p { font-size: 1.6rem; } } @media (min-width: 750px) { .home-detail__inner { padding-top: 50px; padding-bottom: 50px; } .home-detail__article-head { font-size: 3.2rem; } .home-detail__article-txts { width: 100%; } .home-detail__article-txts p { font-size: 2.1rem; } .home-detail__article-txts p span { display: inline; } .home-detail__article-txts p sup { transform: translateY(-5px); font-size: 1.3rem; } } /* home-point */ .home-point__inner { padding-top: 5.3vw; padding-bottom: 8vw; } .home-point__pic { margin-bottom: 26px; } .home-point__pic img { width: min(100%, 660px); margin: auto; } .home-point__head { margin-bottom: 10px; } .home-point-list__item:not(:last-of-type) { margin-bottom: 30px; } .home-point-list__item h3 { margin-bottom: 5px; line-height: 1.5; color: #F75B4A; font-size: 4.8vw; } .home-point-list__item h3 span { display: inline-block; transform: translateY(1px); font-size: 5.8vw; } .home-point-list__item p + p { margin-top: 16px; } .home-point-list__item p small { display: inline-block; margin-top: 10px; line-height: 1.5; font-size: 1rem; } .home-point-list__item p em { display: block; width: fit-content; margin: auto; font-size: 1.5em; color: #3e1b0a; } .home-point-list__item p img { width: min(100%, 660px); margin: auto; } .home-point-list__item figure figcaption { display: block; width: fit-content; margin: 10px auto 0; padding-left: 1.5em; text-indent: -1.5em; line-height: 1.5; font-size: 1rem; } @media (min-width: 750px) { .home-point__inner { padding-top: 30px; padding-bottom: 40px; } .home-point-list__item h3 { font-size: 2.8rem; } .home-point-list__item h3 span { font-size: 3.2rem; } .home-point-list__item p { font-size: 1.8rem; } .home-point-list__item p + p { margin-top: 24px; } } /* home-habit */ .home-habit { background-color: #F3EDED; } .home-habit__inner { padding-top: 6.4vw; padding-bottom: 3.4vw; } .home-habit__head { width: 89.8550724638%; margin: 0 auto 24px; padding-bottom: 16px; line-height: 1.4166666667; font-size: 6.4vw; color: #41220E; text-align: center; background: repeat-x 0 100%/100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22312%22%20height%3D%222%22%20viewBox%3D%220%200%20312%202%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_5%22%20data-name%3D%22%E7%B7%9A%205%22%20x2%3D%22310%22%20transform%3D%22translate(1%201)%22%20fill%3D%22none%22%20stroke%3D%22%2341220e%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220%205%22%2F%3E%3C%2Fsvg%3E"); } .home-habit__head span { display: inline-block; margin-bottom: 5px; font-size: 4.8vw; } .home-habit__head em { color: #B51706; } .home-habit-list { display: grid; grid-column-gap: 2.6vw; width: 89.8550724638%; max-width: 460px; margin: 0 auto 23px; } .home-habit-list:nth-of-type(odd) { grid-template-columns: 19% 1fr; } .home-habit-list:nth-of-type(even) { grid-template-columns: 1fr 19%; grid-auto-flow: dense; } .home-habit-list:nth-of-type(even) dt { grid-column: 2; } .home-habit-list:nth-of-type(even) dd { grid-column: 1; justify-self: end; } .home-habit-list:first-of-type dd { transform: translateY(-7px); } .home-habit-list:nth-of-type(3) dt { transform: translateY(10px); } .home-habit-list:nth-of-type(4) { margin-top: 10px; } .home-habit-list:nth-of-type(4) dd { margin-right: -1em; } .home-habit-list:nth-of-type(5) { grid-template-columns: 17% 1fr; width: 100%; margin-bottom: 28px; } .home-habit-list dt { text-align: center; } .home-habit-list dt small { display: block; margin-top: 2px; line-height: 1.1; font-size: 1.2rem; } .home-habit-list dd { align-self: center; box-sizing: border-box; line-height: 1.5714285714; } @media (min-width: 750px) { .home-habit__inner { padding-top: 48px; padding-bottom: 30px; } .home-habit__head { font-size: 3.2rem; } .home-habit__head span { font-size: 2.4rem; } .home-habit-list { grid-column-gap: 16px; } } @media (max-width: 374.98px) { .home-habit-list dt small { font-size: 1rem; } } .home-habit__article-head { position: relative; margin-bottom: 15px; padding-top: 15px; padding-bottom: 15px; line-height: 1.8333333333; font-size: 4.8vw; color: #41220E; text-align: center; } .home-habit__article-head::before, .home-habit__article-head::after { content: ""; display: inline-block; position: absolute; left: 0; width: 100%; height: 4px; background: repeat-x 0 100%/100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22312%22%20height%3D%222%22%20viewBox%3D%220%200%20312%202%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_5%22%20data-name%3D%22%E7%B7%9A%205%22%20x2%3D%22310%22%20transform%3D%22translate(1%201)%22%20fill%3D%22none%22%20stroke%3D%22%2341220e%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220%205%22%2F%3E%3C%2Fsvg%3E"); } .home-habit__article-head::before { top: 0; } .home-habit__article-head::after { bottom: 0; } .home-habit__article-comments { margin-bottom: 15px; } .home-habit__article-comments > li { position: relative; box-sizing: border-box; width: fit-content; line-height: 1.5714285714; background-color: #fff; border-radius: 10px; color: #41220E; } .home-habit__article-comments > li:not(:last-child) { margin-bottom: 10px; } .home-habit__article-comments > li:nth-child(odd) { margin-left: 16px; } .home-habit__article-comments > li:nth-child(odd)::before { position: absolute; top: 50%; transform: translateY(-50%); left: -14px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent #fff transparent transparent; border-width: 8px 14px 8px 0; } .home-habit__article-comments > li:nth-child(even) { margin-right: 16px; margin-left: auto; } .home-habit__article-comments > li:nth-child(even)::after { position: absolute; top: 50%; transform: translateY(-50%); right: -14px; content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 8px 0 8px 14px; } .home-habit__article-comments > li:first-child { padding: 16px 7px 12px 14px; } .home-habit__article-comments > li:nth-child(2) { padding: 10px 6px 7px 14px; } .home-habit__article-comments > li:nth-child(3) { padding: 16px 3px 14px 14px; } .home-habit__article-note { font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); text-align: center; } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .home-habit__article-note { font-size: 1rem; } } @media (min-width: 750px) { .home-habit__article-head { max-width: 600px; margin-left: auto; margin-right: auto; font-size: 2.9rem; } .home-habit__article-comments { max-width: 550px; margin-left: auto; margin-right: auto; } } /* home-brew */ .home-brew { padding-top: 4vw; padding-bottom: 3.7vw; } .home-brew__inner { position: relative; box-sizing: border-box; padding-top: 8vw; color: #41220E; } .home-brew__inner::before { content: ""; display: inline-block; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); width: 92%; height: 100%; background-color: #F5ECD7; border-radius: 50px; } .home-brew__head { margin-left: 10.1vw; margin-right: 10.1vw; margin-bottom: 19px; padding-bottom: 19px; line-height: 1.4166666667; font-size: 6.4vw; text-align: center; background: repeat-x 0 100%/100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22312%22%20height%3D%222%22%20viewBox%3D%220%200%20312%202%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_5%22%20data-name%3D%22%E7%B7%9A%205%22%20x2%3D%22310%22%20transform%3D%22translate(1%201)%22%20fill%3D%22none%22%20stroke%3D%22%2341220e%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220%205%22%2F%3E%3C%2Fsvg%3E"); } .home-brew__txt { width: fit-content; margin: auto; } .home-brew__img { max-width: 600px; margin: auto; } @media (min-width: 750px) { .home-brew { padding-top: 30px; padding-bottom: 30px; } .home-brew__inner { padding-top: 40px; } .home-brew__head { max-width: 560px; margin: 0 auto 20px; font-size: 3.2rem; } } /* home-flow */ .home-flow { background: linear-gradient(#f75b4a 0%, #f77869 21.67%, #ffecea 100%); } .home-flow__inner { padding-top: 4vw; padding-bottom: 3.7vw; } .home-flow__heading { margin-bottom: 14px; color: #fff; text-align: center; } .home-flow__heading-main { line-height: 1.375; font-size: 6.4vw; } .home-flow__heading-sub { font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .home-flow__heading-sub { font-size: 1rem; } } .home-flow__date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 10px; font-size: 2rem; text-align: center; } .home-flow__date dt { display: inline-block; margin-right: 9px; padding: 6px 10px; line-height: 1.1; border: 1px solid; font-size: 1.4rem; } .home-flow__date dd { line-height: 1.5; text-align: left; } @media (min-width: 750px) { .home-flow__inner { padding-top: 30px; padding-bottom: 30px; } .home-flow__heading-main { font-size: 3.8rem; } } .home-flow-list { max-width: 700px; margin: auto; } .home-flow-list__item { box-sizing: border-box; padding: 14px 15px 20px; padding-top: 3.7vw; padding-left: 4vw; padding-right: 4vw; padding-bottom: 5.3vw; background-color: #fff; } .home-flow-list__item:not(:last-of-type) { position: relative; margin-bottom: 45px; } .home-flow-list__item:not(:last-of-type)::after { position: absolute; left: 50%; bottom: -31px; transform: translateX(-50%); content: ""; display: inline-block; height: 0; width: 0; border-style: solid; border-color: #B51706 transparent transparent transparent; border-width: 16px 12px 0 12px; } .home-flow-list__item-head { margin-bottom: 14px; line-height: 1.5; font-size: 5.3vw; text-align: center; } .home-flow-list__item-sub { margin-top: -10px; margin-bottom: 15px; line-height: 1.5714285714; color: #F75B4A; text-align: center; } .home-flow-list__item-txts { line-height: 1.8333333333; font-size: 3.2vw; } .home-flow-list__item-txts:not(:only-of-type) { margin-bottom: 20px; } .home-flow-list__item-txts p { padding-left: 2.1vw; border-left: 4px solid #F75B4A; } .home-flow-list__item-txts p + p { margin-top: 20px; } .home-flow-list__item-txts p em { color: #F75B4A; } .home-flow-list__item-txts p span { display: inline-block; margin-top: 3px; color: #868686; } .home-flow-list__item-note { line-height: 1.5; font-size: clamp(1rem, 0.6444444444rem + 0.7407407407vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.6444444444rem + 0.7407407407vw, 12 * 0.1rem)) { .home-flow-list__item-note { font-size: 1rem; } } .home-flow-list__item-note p { padding-left: 1em; text-indent: -1em; } @media (min-width: 750px) { .home-flow-list__item { padding: 22px 24px 32px; } .home-flow-list__item-head { font-size: 2.8rem; } .home-flow-list__item-sub { font-size: 2.2rem; } .home-flow-list__item-txts { font-size: 1.6rem; } .home-flow-list__item-txts p { padding-left: 18px; } }