webページパターンライブラリ「３つの課題」

コーディングする時に、他のケースで使う場合にどうするか、ばかり考えてしまう、ユゲタです。 一度行ったコーディングは、次に生かさないと損なので、 何かのシステム開発を行ったのであれば、そこで作った関数は、別のシステムでも使い回せることを意識するし、 webサイトを作ったのなら、他のページでもなるべく汎用的に利用できるように構築することを考えて、日々プログラミングしているんですが、 最近ハマっているLP模写で、得られたwebパーツを惜しげもなく、ソースコードとともに、貼り付けておきたいと思います。 今回は、よくある、「業界における３つの課題」というような場合に、使えるサンプルを１つだけですが、紹介します。

キャプチャ

まずは、見てもらったほうが早いと思うので、キャプチャ画像を貼り付けてみます。 PCブラウザでみると、いい感じに横ならびになって、スマホで表示したときは、 縦並びになるという具合ですね。

ソースコード

<link rel="stylesheet" href="style.css"> <section class="section-bg"> <h2 id="howto">問い合わせなどは必要ありません</h2> <p class="p-intro__subttl">MYNT-estimateの特徴</p> <ul class="point-lists"> <li class="list-item"> <p class="list-num">Point <span class="num"></span>.</p> <p class="list-ttl">質問内容に<br>答える</p> <svg id="be34d63a-2a95-4bd2-af54-2c2873c77044" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="789.38189" height="609.37605" viewBox="0 0 789.38189 609.37605"><path d="M981.30863,673.98326c-3.3177-26.67814-19.85136-52.96384-45.29423-61.64564a123.86328,123.86328,0,0,1-.00614,85.04048c-3.90959,10.57529-9.35913,21.9305-5.68164,32.58879,2.28808,6.6319,7.88558,11.70587,14.14246,14.8785,6.25726,3.17262,13.20151,4.68476,20.05886,6.16664l1.34956,1.11616C976.76344,727.54719,984.62633,700.66139,981.30863,673.98326Z" transform="translate(-205.30906 -145.31197)" fill="#f0f0f0"/><path d="M935.76192,612.84207a105.86968,105.86968,0,0,1,26.319,59.58345,45.59092,45.59092,0,0,1-.51859,14.27515,26.14853,26.14853,0,0,1-6.50348,12.12824c-2.93125,3.22058-6.30256,6.17542-8.3999,10.05246a16.01082,16.01082,0,0,0-.78221,13.07063c1.85173,5.31109,5.5014,9.64009,9.21758,13.74945,4.12612,4.56267,8.48415,9.23648,10.23806,15.28536.21251.73291,1.33731.36031,1.12512-.37149C963.406,740.0913,953.19,734.11345,948.318,724.6346c-2.27337-4.423-3.22759-9.55792-1.09634-14.22686,1.86369-4.08278,5.33761-7.13282,8.33375-10.36807a27.9025,27.9025,0,0,0,6.80084-11.62188,42.14785,42.14785,0,0,0,1.06552-14.20255,102.71271,102.71271,0,0,0-7.50152-31.21348,107.74726,107.74726,0,0,0-19.37431-31.04834c-.50661-.56729-1.2873.32506-.784.88865Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M961.762,665.25515a15.88384,15.88384,0,0,0,12.09074-16.6389c-.06037-.76-1.24414-.70185-1.18369.05912A14.70808,14.70808,0,0,1,961.39055,664.13c-.74175.17635-.366,1.30046.37149,1.12512Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M956.76024,697.3917a30.61483,30.61483,0,0,1-13.67135-17.63188c-.21509-.73213-1.34-.35975-1.12511.37149A31.844,31.844,0,0,0,956.22734,698.45c.657.38973,1.18635-.67065.5329-1.05826Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M950.18063,632.74567a8.991,8.991,0,0,1-8.52045-.43252c-.65175-.39787-1.18041.663-.53289,1.05826a10.07516,10.07516,0,0,0,9.42483.49938.61233.61233,0,0,0,.37681-.74831.59543.59543,0,0,0-.7483-.37681Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M858.461,659.988c.3999.26.7998.52,1.20019.79A118.40547,118.40547,0,0,1,874.80079,672.598c.37012.33.74024.67,1.1001,1.01a124.82722,124.82722,0,0,1,27.10986,37.11,121.22215,121.22215,0,0,1,6.64014,17.18c2.4502,8.13,4.46,17.14,9.31006,23.79a20.79633,20.79633,0,0,0,1.62012,2h43.83007c.09961-.05.19971-.09.29981-.14l1.75.08c-.07031-.31-.1499-.63-.22022-.94-.04-.18-.08984-.36-.12988-.54-.02978-.12-.06006-.24-.08008-.35-.00976-.04-.02-.08-.02978-.11-.02-.11-.0503-.21-.07031-.31q-.65993-2.685-1.35987-5.37c0-.01,0-.01-.00976-.02-3.59034-13.63-8.3501-27.08-15-39.38-.2002-.37-.39991-.75-.62012-1.12a115.674,115.674,0,0,0-10.39014-15.76,102.26,102.26,0,0,0-6.81006-7.79,85.03677,85.03677,0,0,0-21.27978-15.94c-15.72022-8.3-33.91992-11.48-50.72022-6.41C859.31105,659.718,858.89064,659.848,858.461,659.988Z" transform="translate(-205.30906 -145.31197)" fill="#f0f0f0"/><path d="M858.55949,660.54431a105.86972,105.86972,0,0,1,56.88764,31.72816,45.59157,45.59157,0,0,1,8.18056,11.71014,26.1486,26.1486,0,0,1,2.10937,13.59926c-.40143,4.33627-1.31421,8.72531-.65457,13.08366a16.01082,16.01082,0,0,0,7.24486,10.9071c4.67616,3.12574,10.19656,4.38485,15.63785,5.42855,6.04151,1.15883,12.33511,2.26677,17.37736,6.04049.61093.45724,1.28469-.51747.67468-.974-8.77265-6.56562-20.52867-5.18784-30.12561-9.82289-4.47812-2.16279-8.33158-5.68823-9.44092-10.69927-.97006-4.38194-.03267-8.90877.41174-13.29582a27.90246,27.90246,0,0,0-1.56708-13.374,42.148,42.148,0,0,0-7.70016-11.98146A102.71248,102.71248,0,0,0,892.813,672.48844a107.74717,107.74717,0,0,0-34.16254-13.12569c-.746-.14794-.83214,1.03459-.091,1.18156Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M910.87542,686.73935a15.88384,15.88384,0,0,0-.364-20.56469c-.50575-.57043-1.41593.18868-.90952.75987a14.70808,14.70808,0,0,1,.2995,19.13014c-.48607.58739.49073,1.25871.974.67468Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M926.23018,715.41a30.61484,30.61484,0,0,1-21.53141-5.847c-.61253-.45506-1.28648.51951-.67468.974a31.844,31.844,0,0,0,22.41775,6.03876c.75924-.08439.54346-1.24974-.21166-1.1658Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M882.05536,667.75516a8.991,8.991,0,0,1-7.06351,4.78455c-.75993.07473-.54333,1.24.21166,1.16581a10.07517,10.07517,0,0,0,7.82586-5.27568.61233.61233,0,0,0-.14966-.82434.59543.59543,0,0,0-.82435.14966Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path d="M644.013,177.9134a11.55371,11.55371,0,0,0,3.48192,17.37071l-6.75629,40.49833,19.50168-8.65478,3.42607-37.131A11.61633,11.61633,0,0,0,644.013,177.9134Z" transform="translate(-205.30906 -145.31197)" fill="#9e616a"/><polygon points="614.147 592.883 598.201 592.882 590.615 531.376 614.15 531.377 614.147 592.883" fill="#9e616a"/><path d="M823.52267,753.65224l-51.41667-.00191V753a20.01386,20.01386,0,0,1,20.0128-20.01248h.00127l31.40355.00127Z" transform="translate(-205.30906 -145.31197)" fill="#2f2e41"/><polygon points="507.147 592.883 491.201 592.882 483.615 531.376 507.15 531.377 507.147 592.883" fill="#9e616a"/><path d="M716.52267,753.65224l-51.41667-.00191V753a20.01386,20.01386,0,0,1,20.0128-20.01248h.00127l31.40355.00127Z" transform="translate(-205.30906 -145.31197)" fill="#2f2e41"/><path d="M705.80906,451.188l-5.96041,7.83915s-.53959,3.66085-9.58036,33.48559L685.30906,716.688h30l40.10008-179.36611,41.61813,182.96453,26.006,1.53431-1.223-207.95912s3.285-42.783-8.35809-50.72832S705.80906,451.188,705.80906,451.188Z" transform="translate(-205.30906 -145.31197)" fill="#2f2e41"/><circle cx="540.73169" cy="86.01289" r="31.4805" fill="#9e616a"/><path d="M777.71091,236.25346l-.52-1.03956c-.80371-1.60791-7.46045-14.97509-8.2959-18.41211l-8.37744.98536-21.81543.00341,3.03125-4.54687-8.01416,1.04541a18.39333,18.39333,0,0,0-8.16675,3.07812,12.51308,12.51308,0,0,0-3.70434,3.81934c-2.8628,4.90234-7.23657,12.9209-7.28052,13.00147l-.41821.76709-3.63452-6.11377c-.04761-.23731-4.552-23.731,10.52246-31.69873.77758-1.57911,7.40283-14,23.06054-13.16163a9.927,9.927,0,0,1,6.74927-3.355c3.57593-.18652,7.28784,1.6919,11.01538,5.60645,4.95166,5.19922,11.7334,12.31933,15.835,20.2251l1.13159,1.61425a12.723,12.723,0,0,1,2.26368,7.89942,26.37238,26.37238,0,0,1-.89869,13.45264Z" transform="translate(-205.30906 -145.31197)" fill="#2f2e41"/><path d="M770.02681,268.7288l17.4198,9.62779,34.21783,9.581L811.45079,377.4833l1.85827,88.20473s-57.92082,39.67831-113.46041-6.66085V348.003l3.28564-60.06537s13.29045-3.77562,19.98261,2.73739l12.69216-16.487Z" transform="translate(-205.30906 -145.31197)" fill="#e4e4e4"/><polygon points="505.5 150.876 497.825 142.626 455.531 137.835 459.5 72.876 436.441 56.426 419.5 147.876 497.758 202.691 505.5 150.876" fill="#e4e4e4"/><path d="M796.542,494.83593a11.55369,11.55369,0,0,1,11.22028-13.71024l13.02142-38.93847,13.167,16.78843-14.384,34.40278a11.61634,11.61634,0,0,1-23.02468,1.4575Z" transform="translate(-205.30906 -145.31197)" fill="#9e616a"/><path d="M808.80906,298.188l12.85538-10.25041s13.14462,7.25041,17.14462,20.25041,11,87,11,87l-19,95-21.248-14.73622,10.248-75.26378-18-55Z" transform="translate(-205.30906 -145.31197)" fill="#e4e4e4"/><rect x="118.14267" width="324.20229" height="78.78223" fill="#e6e6e6"/><path d="M331.95817,215.58747H639.14761V153.81872H331.95817Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><circle class="color-change" cx="185.15875" cy="39.39113" r="23.53234" fill="#33817c"/><rect class="color-change" x="241.43181" y="30.1828" width="157.42938" height="5.11573" fill="#33817c"/><rect class="color-change" x="241.43181" y="43.4837" width="157.42938" height="5.11573" fill="#33817c"/><path id="b9910470-ced5-4346-b4bb-f41b58844e24" data-name="Rectangle 1" d="M205.30906,265.05374l274.314,20.00879v72.02436l-274.314-5.09394Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="bc7e8449-b99b-4317-a70a-91d17db61b29" data-name="Path 1" d="M213.95028,342.81775l259.6838,6.35125V292.437L213.95028,275.0205Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path id="a430bd6b-b2b0-4af3-a079-7f5fd15b0624" data-name="Ellipse 1" d="M270.9457,286.6233a20.6486,20.6486,0,0,1,8.55537,2.477,23.8163,23.8163,0,0,1,6.91581,5.70319,26.93424,26.93424,0,0,1,4.627,8.072,28.22787,28.22787,0,0,1,1.69014,9.64449,26.93413,26.93413,0,0,1-1.69014,9.48924,23.921,23.921,0,0,1-4.627,7.65326,20.88621,20.88621,0,0,1-6.91581,5.07041,19.40656,19.40656,0,0,1-8.55537,1.69367,20.48626,20.48626,0,0,1-8.65181-2.22294,23.603,23.603,0,0,1-7.1381-5.61145,26.82446,26.82446,0,0,1-4.8493-8.19194,28.21724,28.21724,0,0,1-1.78541-9.89971,26.89277,26.89277,0,0,1,1.78541-9.74211,23.77583,23.77583,0,0,1,4.85047-7.745,20.73928,20.73928,0,0,1,7.1381-4.95751A19.396,19.396,0,0,1,270.9457,286.6233Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="af019097-0949-417a-9d8d-f710312ce60c" data-name="Rectangle 2" d="M322.0368,304.44443l126.38871,6.58649v4.787L322.0368,309.67716Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="f94f3612-92b8-42d6-ae14-2a9ea684588e" data-name="Rectangle 3" d="M322.0368,318.0514,448.42551,323.477v4.787L322.0368,323.28412Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="bb553635-e14d-4b1e-b72c-855829e3ad86" data-name="Rectangle 4" d="M205.30906,411.36656l274.314-5.09277v72.02436l-274.314,20.00879Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="e92d7e39-9dcb-4c0c-b0b9-55aac094bc0c" data-name="Path 2" d="M213.95028,488.339l259.6838-17.41654V414.19639l-259.6838,6.35125Z" transform="translate(-205.30906 -145.31197)" fill="#fff"/><path id="f8649409-803b-4d56-993a-4da6ceb3c345" data-name="Ellipse 2" d="M248.5399,451.71229a28.18078,28.18078,0,0,1,2.18412-9.81974,26.49781,26.49781,0,0,1,5.16686-7.94142,23.201,23.201,0,0,1,7.3404-5.24566,20.24279,20.24279,0,0,1,8.7118-1.7807,19.443,19.443,0,0,1,8.45775,2.13,21.1825,21.1825,0,0,1,6.69,5.42209,24.31932,24.31932,0,0,1,4.30827,7.89084,27.20924,27.20924,0,0,1,1.30906,9.581,28.19721,28.19721,0,0,1-2.06768,9.568,26.62605,26.62605,0,0,1-4.93986,7.852,23.41734,23.41734,0,0,1-7.12752,5.35974,20.38864,20.38864,0,0,1-8.63535,2.043,19.41486,19.41486,0,0,1-8.57419-1.88185,21.02727,21.02727,0,0,1-6.9158-5.32917,24.18434,24.18434,0,0,1-4.52233-8.00493A27.17635,27.17635,0,0,1,248.5399,451.71229Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="f70c4d59-0dd2-4f0b-ba41-17bf719deab5" data-name="Rectangle 5" d="M322.0368,440.07655l126.38871-4.97985v4.787L322.0368,445.30928Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path id="ba176e8f-fd02-45f1-a5f1-dcef4bb8b7ed" data-name="Rectangle 6" d="M322.0368,453.68234l126.38871-6.13954v4.787L322.0368,458.91625Z" transform="translate(-205.30906 -145.31197)" fill="#e6e6e6"/><path d="M993.69094,754.688h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-205.30906 -145.31197)" fill="#cacaca"/></svg> </li> <li class="list-item"> <p class="list-num">Point <span class="num"></span>.</p> <p class="list-ttl">見積もり額が<br>算出される</p> <svg id="f289da69-e568-4792-9b3f-1219e3d998d1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="724.34614" height="519" viewBox="0 0 724.34614 519"><path d="M961.17307,709.5h-301a1,1,0,0,1,0-2h301a1,1,0,0,1,0,2Z" transform="translate(-237.82693 -190.5)" fill="#3f3d56"/><polygon points="535.418 507.548 523.159 507.548 517.326 460.26 535.421 460.261 535.418 507.548" fill="#ffb8b8"/><path d="M514.40147,504.04487h23.64387a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H499.51461a0,0,0,0,1,0,0v0A14.88686,14.88686,0,0,1,514.40147,504.04487Z" fill="#2f2e41"/><polygon points="624.374 493.661 613.222 498.754 588.269 458.165 604.727 450.648 624.374 493.661" fill="#ffb8b8"/><path d="M844.32492,687.2145H867.9688a0,0,0,0,1,0,0v14.88687a0,0,0,0,1,0,0H829.43807a0,0,0,0,1,0,0v0A14.88685,14.88685,0,0,1,844.32492,687.2145Z" transform="translate(-449.7177 224.89624) rotate(-24.54855)" fill="#2f2e41"/><path d="M826.498,538.605a10.05575,10.05575,0,0,0,.80112-15.39851l14.4116-32.69992-18.30864,3.10282-10.87858,30.57671A10.11027,10.11027,0,0,0,826.498,538.605Z" transform="translate(-237.82693 -190.5)" fill="#ffb8b8"/><path d="M772.464,685.5794H760.75208a4.51685,4.51685,0,0,1-4.48828-4.17383L743.87683,510.847a4.49978,4.49978,0,0,1,4.9253-4.80469l73.73486,7.19336a4.50131,4.50131,0,0,1,4.06225,4.39355l1.41944,75.23535a3.492,3.492,0,0,0,.23388,1.19336l27.78516,72.05274a4.49892,4.49892,0,0,1-2.64307,5.84082l-11.8684,4.37305a4.50111,4.50111,0,0,1-5.55738-2.16407L801.8363,607.79131a4.47493,4.47493,0,0,1-.40429-1.14258L795.6012,578.555a3.49993,3.49993,0,0,0-6.90406.3125l-11.7622,102.72364A4.499,4.499,0,0,1,772.464,685.5794Z" transform="translate(-237.82693 -190.5)" fill="#2f2e41"/><circle cx="540.46895" cy="162.42586" r="24.56103" fill="#ffb8b8"/><path class="color-change" d="M748.55066,511.83233c3.144,2.16894,38.56665,25.51172,78.94238,6.94531-.52319-4.50879-5.56152-49.7793-1.16089-83.15234,2.08765-15.834-4.21752-30.50293-17.29858-40.2461a49.73278,49.73278,0,0,0-50.02026-5.40136h-.00025q-.99426.44531-2.00244.92675Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M827.87634,518.40557a4.48617,4.48617,0,0,1-3.312-1.46l-5.37256-5.86133a4.52264,4.52264,0,0,1-.99829-4.31543l12.30493-41.64746L811.77625,425.805a8.33314,8.33314,0,0,1-.56958-5.54589,8.30927,8.30927,0,0,1,15.38745-1.96582l25.30932,41.06738a11.451,11.451,0,0,1,.6897,10.73047l-20.60986,45.665a4.48861,4.48861,0,0,1-3.38965,2.59179A4.56723,4.56723,0,0,1,827.87634,518.40557Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path d="M766.72717,513.0794h-9.8125l17.12842-80.60352.98828.12891L771.22131,508.805A4.49651,4.49651,0,0,1,766.72717,513.0794Z" transform="translate(-237.82693 -190.5)" opacity="0.2"/><path d="M757.6479,533.119a10.0558,10.0558,0,0,0-2.41343-15.22929l7.30826-34.97954-17.26545,6.83651-4.29307,32.16906A10.11028,10.11028,0,0,0,757.6479,533.119Z" transform="translate(-237.82693 -190.5)" fill="#ffb8b8"/><path class="color-change" d="M756.65808,513.18a4.69328,4.69328,0,0,1-.50757-.02832l-10.4646-1.16308a4.515,4.515,0,0,1-3.99926-4.65821l4.32983-104.78222a13.52752,13.52752,0,0,1,26.73462-2.31543l2.78906,12.83008-.01367.09082L761.09754,509.346A4.48507,4.48507,0,0,1,756.65808,513.18Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path d="M798.53211,374.5794c-2.5469.43668-4.64263-3.10848-4.95957-5.60213s.59189-4.88065.691-7.35813-1.0692-5.48813-3.64216-6.22268c-2.69746-.7701-5.198,1.39368-7.95937,1.13348-3.84789-.36258-5.77979-4.86573-6.24594-8.50854s-.83239-7.95675-4.16483-10.03412c-3.32214-2.07094-7.43185-.56414-11.24915-.49968-6.4517.10894-13.01929-4.81094-14.527-10.88235a3.65953,3.65953,0,0,0,4.1745-1.67179,3.70377,3.70377,0,0,0-1.1144-4.37824l7.31314,3.58106c-.99948-2.03411.51-4.35112,2.58767-5.12143s4.49481-.42436,6.78761-.06815c11.45045,1.77895,24.71315.90216,32.30847,9.6327,5.2609,6.04722,9.5914,17.55438,9,25S798.53211,374.5794,798.53211,374.5794Z" transform="translate(-237.82693 -190.5)" fill="#2f2e41"/><path d="M519.82656,651.5h-263a7.00787,7.00787,0,0,1-7-7L237.82693,197.52686A7.01308,7.01308,0,0,1,244.82656,190.5h263a7.00786,7.00786,0,0,1,7,7l2.17408,80.97314-1.999.05372-2.1748-81A5.01188,5.01188,0,0,0,507.82656,192.5h-263a5.00581,5.00581,0,0,0-5,5L251.8262,644.47314A5.01213,5.01213,0,0,0,256.82656,649.5h263a5.00573,5.00573,0,0,0,5-5l-2.3352-86.97314,1.99927-.05372,2.33569,87A7.01326,7.01326,0,0,1,519.82656,651.5Z" transform="translate(-237.82693 -190.5)" fill="#ccc"/><rect x="518.7377" y="398.49308" width="2.00023" height="38.39957" transform="translate(-248.84923 -176.40152) rotate(-1.53781)" fill="#ccc"/><path d="M496.22647,612.10938H278.36709a5.977,5.977,0,0,1-5.97021-5.97022L262.45694,235.8877a5.98216,5.98216,0,0,1,5.96972-5.99707H486.286a5.977,5.977,0,0,1,5.97021,5.97021l1.8003,42.59717-1.99805.084-1.80127-42.63916a3.98544,3.98544,0,0,0-3.97119-4.0122H268.42666a3.97481,3.97481,0,0,0-3.97009,3.97021l9.93994,370.25146a3.98118,3.98118,0,0,0,3.97058,3.99708H496.22647a3.97483,3.97483,0,0,0,3.97021-3.97022l-1.28735-48.61279,1.99927-.05274,1.28759,48.63916A5.98191,5.98191,0,0,1,496.22647,612.10938Z" transform="translate(-237.82693 -190.5)" fill="#ccc"/><rect x="495.22905" y="399.49334" width="2.00021" height="38.01331" transform="translate(-248.72699 -177.22289) rotate(-1.51626)" fill="#ccc"/><path d="M554.19668,399.5h-255a7.00778,7.00778,0,0,1-6.99975-6.94238L288.19668,284.5a7.00787,7.00787,0,0,1,7-7h255a7.00763,7.00763,0,0,1,6.99976,6.94238L561.19668,392.5A7.00786,7.00786,0,0,1,554.19668,399.5ZM290.19693,284.44727,294.19668,392.5a5.0058,5.0058,0,0,0,5,5h255a5.006,5.006,0,0,0,4.99976-4.94727L555.19668,284.5a5.00573,5.00573,0,0,0-5-5h-255A5.00587,5.00587,0,0,0,290.19693,284.44727Z" transform="translate(-237.82693 -190.5)" fill="#3f3d56"/><path d="M602.19668,558.5h-255a7.00778,7.00778,0,0,1-6.99975-6.94238L336.19668,443.5a7.00787,7.00787,0,0,1,7-7h255a7.00763,7.00763,0,0,1,6.99976,6.94238L609.19668,551.5A7.00786,7.00786,0,0,1,602.19668,558.5ZM338.19693,443.44727,342.19668,551.5a5.0058,5.0058,0,0,0,5,5h255a5.006,5.006,0,0,0,4.99976-4.94727L603.19668,443.5a5.00573,5.00573,0,0,0-5-5h-255A5.00587,5.00587,0,0,0,338.19693,443.44727Z" transform="translate(-237.82693 -190.5)" fill="#3f3d56"/><path class="color-change" d="M407.69668,460a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M407.69668,491a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M407.69668,522a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M359.69668,301a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M359.69668,332a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><path class="color-change" d="M359.69668,363a6.5,6.5,0,0,0,0,13h130a6.5,6.5,0,0,0,0-13Z" transform="translate(-237.82693 -190.5)" fill="#33817c"/><circle cx="140.36975" cy="20" r="10" fill="#e6e6e6"/></svg> </li> <li class="list-item"> <p class="list-num">Point <span class="num"></span>.</p> <p class="list-ttl">メールで詳細が<br>送られてくる</p> <svg id="a6926b9b-8060-41b0-9f4b-a958f9322acb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="839.79697" height="523.44409" viewBox="0 0 839.79697 523.44409"><path d="M259.30182,695.092a50.79366,50.79366,0,0,0,13.58985,12.63c1.12011.71,2.27,1.38,3.43994,2h27.52978c-.32959-.66-.6499-1.33-.96-2a95.35442,95.35442,0,0,1,19.84033-109.34c-16.64013,5.14-32.02,15.16-42.08008,29.37a64.46989,64.46989,0,0,0-10.23,23,96.27579,96.27579,0,0,1,7.66993-48.41c-13.50977,10.99-24.03028,26.04-28.04,42.98C246.05182,662.272,248.96149,681.082,259.30182,695.092Z" transform="translate(-180.10152 -188.27796)" fill="#f0f0f0"/><path d="M1015.54573,469.26684H828.37712a4.35775,4.35775,0,0,1-4.35276-4.35276V349.13072a4.35775,4.35775,0,0,1,4.35276-4.35276h187.16861a4.35774,4.35774,0,0,1,4.35275,4.35276V464.91408A4.35774,4.35774,0,0,1,1015.54573,469.26684Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M1015.54573,469.26684H828.37712a4.35775,4.35775,0,0,1-4.35276-4.35276V349.13072a4.35775,4.35775,0,0,1,4.35276-4.35276h187.16861a4.35774,4.35774,0,0,1,4.35275,4.35276V464.91408A4.35774,4.35774,0,0,1,1015.54573,469.26684ZM828.37712,346.51906a2.61451,2.61451,0,0,0-2.61165,2.61166V464.91408a2.61451,2.61451,0,0,0,2.61165,2.61166h187.16861a2.61451,2.61451,0,0,0,2.61165-2.61166V349.13072a2.61451,2.61451,0,0,0-2.61165-2.61166Z" transform="translate(-180.10152 -188.27796)" fill="#3f3d56"/><path d="M978.54728,383.44633H865.37557a3.91748,3.91748,0,1,1,0-7.835H978.54728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><path d="M978.54728,410.43343H865.37557a3.91748,3.91748,0,1,1,0-7.835H978.54728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><circle class="color-change" cx="788.36325" cy="250.94409" r="14" fill="#33817c"/><path d="M968.84939,432.6268V431.293h.39488v1.33382a4.25848,4.25848,0,0,1,1.61464.39489,2.372,2.372,0,0,1,.92139.768,1.79468,1.79468,0,0,1,.33346,1.0485,1.13131,1.13131,0,0,1-.25887.75466.801.801,0,0,1-.6362.30713.66792.66792,0,0,1-.49141-.20183.67875.67875,0,0,1-.20183-.50018.94972.94972,0,0,1,.079-.37733l.158-.33346a1.10866,1.10866,0,0,0,.079-.43876,1.03337,1.03337,0,0,0-.21061-.64483,1.27287,1.27287,0,0,0-.59671-.417,3.37919,3.37919,0,0,0-.78977-.158v4.8l.08776.05265a8.74061,8.74061,0,0,1,2.22011,1.67606,3.942,3.942,0,0,1,.67131,1.13653,3.48548,3.48548,0,0,1,.24131,1.25909,3.05619,3.05619,0,0,1-.42121,1.58831,2.85171,2.85171,0,0,1-1.16709,1.0969,4.92848,4.92848,0,0,1-1.63219.47386v1.43035h-.39488v-1.404a4.40491,4.40491,0,0,1-1.66728-.34223,3.15528,3.15528,0,0,1-1.347-.96527,2.18559,2.18559,0,0,1-.47825-1.3777,1.55743,1.55743,0,0,1,.30713-.97857.91445.91445,0,0,1,.74589-.39913.64469.64469,0,0,1,.66692.66549,1.30412,1.30412,0,0,1-.32469.72665,2.20278,2.20278,0,0,0-.24131.4028.89954.89954,0,0,0-.06582.35016,1.41757,1.41757,0,0,0,.31152.87978,1.98877,1.98877,0,0,0,.838.62587,3.08659,3.08659,0,0,0,1.18465.21032h.0702v-5.73019l-.50018-.28958q-.71079-.41229-1.08374-.68446a4.52619,4.52619,0,0,1-.6713-.59671,2.88251,2.88251,0,0,1-.781-1.98319,2.69087,2.69087,0,0,1,.33346-1.31175,2.61657,2.61657,0,0,1,.92139-.97857A3.75,3.75,0,0,1,968.84939,432.6268Zm0,.19306a2.71562,2.71562,0,0,0-.98721.21909,1.68175,1.68175,0,0,0-.734.70938,2.17061,2.17061,0,0,0-.27953,1.09463,2.22358,2.22358,0,0,0,.41059,1.305,2.6476,2.6476,0,0,0,.51109.552,9.52086,9.52086,0,0,0,.99173.64795l.08733.05265Zm.39488,11.89913a2.72113,2.72113,0,0,0,.66394-.1404,1.74956,1.74956,0,0,0,.48052-.2808,2.17254,2.17254,0,0,0,.61157-.85544,2.94766,2.94766,0,0,0,.22716-1.15408,3.62464,3.62464,0,0,0-1.98319-3.03621Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M888.04573,391.76684H700.87712a4.35775,4.35775,0,0,1-4.35276-4.35276V271.63072a4.35775,4.35775,0,0,1,4.35276-4.35276H888.04573a4.35774,4.35774,0,0,1,4.35275,4.35276V387.41408A4.35774,4.35774,0,0,1,888.04573,391.76684Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M888.04573,391.76684H700.87712a4.35775,4.35775,0,0,1-4.35276-4.35276V271.63072a4.35775,4.35775,0,0,1,4.35276-4.35276H888.04573a4.35774,4.35774,0,0,1,4.35275,4.35276V387.41408A4.35774,4.35774,0,0,1,888.04573,391.76684ZM700.87712,269.01906a2.61451,2.61451,0,0,0-2.61165,2.61166V387.41408a2.61451,2.61451,0,0,0,2.61165,2.61166H888.04573a2.61451,2.61451,0,0,0,2.61165-2.61166V271.63072a2.61451,2.61451,0,0,0-2.61165-2.61166Z" transform="translate(-180.10152 -188.27796)" fill="#3f3d56"/><path d="M851.04728,305.94633H737.87557a3.91748,3.91748,0,1,1,0-7.835H851.04728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><path d="M851.04728,332.93343H737.87557a3.91748,3.91748,0,1,1,0-7.835H851.04728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><circle class="color-change" cx="660.86325" cy="173.44409" r="14" fill="#33817c"/><path d="M841.34939,355.1268V353.793h.39488v1.33382a4.25848,4.25848,0,0,1,1.61464.39489,2.372,2.372,0,0,1,.92139.768,1.79468,1.79468,0,0,1,.33346,1.0485,1.13131,1.13131,0,0,1-.25887.75466.801.801,0,0,1-.6362.30713.66792.66792,0,0,1-.49141-.20183.67875.67875,0,0,1-.20183-.50018.94972.94972,0,0,1,.079-.37733l.158-.33346a1.10866,1.10866,0,0,0,.079-.43876,1.03337,1.03337,0,0,0-.21061-.64483,1.27287,1.27287,0,0,0-.59671-.417,3.37919,3.37919,0,0,0-.78977-.158v4.8l.08776.05265a8.74061,8.74061,0,0,1,2.22011,1.67606,3.942,3.942,0,0,1,.67131,1.13653,3.48548,3.48548,0,0,1,.24131,1.25909,3.05619,3.05619,0,0,1-.42121,1.58831,2.85171,2.85171,0,0,1-1.16709,1.0969,4.92848,4.92848,0,0,1-1.63219.47386v1.43035h-.39488v-1.404a4.40491,4.40491,0,0,1-1.66728-.34223,3.15528,3.15528,0,0,1-1.347-.96527,2.18559,2.18559,0,0,1-.47825-1.3777,1.55743,1.55743,0,0,1,.30713-.97857.91445.91445,0,0,1,.74589-.39913.64469.64469,0,0,1,.66692.66549,1.30412,1.30412,0,0,1-.32469.72665,2.20278,2.20278,0,0,0-.24131.4028.89954.89954,0,0,0-.06582.35016,1.41757,1.41757,0,0,0,.31152.87978,1.98877,1.98877,0,0,0,.838.62587,3.08659,3.08659,0,0,0,1.18465.21032h.0702v-5.73019l-.50018-.28958q-.71079-.41229-1.08374-.68446a4.52619,4.52619,0,0,1-.6713-.59671,2.88251,2.88251,0,0,1-.781-1.98319,2.69087,2.69087,0,0,1,.33346-1.31175,2.61657,2.61657,0,0,1,.92139-.97857A3.75,3.75,0,0,1,841.34939,355.1268Zm0,.19306a2.71562,2.71562,0,0,0-.98721.21909,1.68175,1.68175,0,0,0-.734.70938,2.17061,2.17061,0,0,0-.27953,1.09463,2.22358,2.22358,0,0,0,.41059,1.305,2.6476,2.6476,0,0,0,.51109.552,9.52086,9.52086,0,0,0,.99173.64795l.08733.05265Zm.39488,11.89913a2.72113,2.72113,0,0,0,.66394-.1404,1.74956,1.74956,0,0,0,.48052-.2808,2.17254,2.17254,0,0,0,.61157-.85544,2.94766,2.94766,0,0,0,.22716-1.15408,3.62464,3.62464,0,0,0-1.98319-3.03621Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M500.04705,374.49034a11.18294,11.18294,0,0,0-11.92823,12.31914l-35.98248,16.86895,17.6119,10.78392L501.21773,396.79a11.24355,11.24355,0,0,0-1.17068-22.29968Z" transform="translate(-180.10152 -188.27796)" fill="#ffb6b6"/><polygon points="171.049 510.77 183.476 510.769 189.388 462.837 171.047 462.838 171.049 510.77" fill="#ffb6b6"/><path d="M347.981,694.99057l24.47283-.001h.001a15.59684,15.59684,0,0,1,15.596,15.59575v.50681l-40.06908.00149Z" transform="translate(-180.10152 -188.27796)" fill="#2f2e41"/><polygon points="234.459 510.77 246.886 510.769 252.798 462.837 234.457 462.838 234.459 510.77" fill="#ffb6b6"/><path d="M411.391,694.99057l24.47283-.001h.001a15.59684,15.59684,0,0,1,15.596,15.59575v.50681l-40.06908.00149Z" transform="translate(-180.10152 -188.27796)" fill="#2f2e41"/><polygon points="242.76 262.159 249.067 275.738 260.438 397.176 251.599 501.554 230.926 501.554 206.532 337.03 195.074 497.764 167.18 496.638 161.825 278.718 242.76 262.159" fill="#2f2e41"/><path d="M322.35011,338.37232l26.14948-10.63882,36.90884,2.07,32.81286,11.95777L429.16882,464.016c-28.5463,15.58821-57.46265,19.84291-86.88214,8.69662l-27.30385-79.62774Z" transform="translate(-180.10152 -188.27796)" fill="#e4e4e4"/><path d="M408.01258,344.99321l11.60412-3.232s8.777-5.70687,11.66475,11.25755,17.74674,43.35179,17.74674,43.35179l25.43689-13.55623,11.77684,25.71876-40.17082,24.3336-42.30322-42.62435Z" transform="translate(-180.10152 -188.27796)" fill="#e4e4e4"/><path id="a80a6b0c-a21b-4eb6-b764-70793a425e46" data-name="Path 40" d="M344.36137,305.08309h0a26.60911,26.60911,0,1,1,48.69886-21.4616l.15213.352a26.61391,26.61391,0,1,1-48.86107,21.11392Z" transform="translate(-180.10152 -188.27796)" fill="#ffb6b6"/><path id="b51b91e7-03ed-46d5-9b2a-c48431fd2f0d" data-name="Path 72" d="M380.48666,280.72968c5.53288,1.00387,14.09526,4.48722,18.84719.40069a23.29107,23.29107,0,0,0-8.623-6.30727,5.31442,5.31442,0,0,1-1.78491-1.00876c-1.62011-1.63724-.36833-4.45837-1.10968-6.672a5.71717,5.71717,0,0,0-3.93656-3.24591c-1.64929-.49349-3.3776-.57358-4.99779-1.172-3.8341-1.441-6.55991-5.56482-10.49-6.68541-3.42422-.99049-6.86978.54889-9.825,2.3453s-5.87861,3.92779-9.33592,4.26872c-2.58351.23566-4.219,4.48522-6.81269,4.60972-5.43518.2644-5.13334-3.31789-5.53535,2.392-.232,3.4073-5.10057,10.18578-5.0215,13.62274.08048,2.25207-.31795,4.4826-.2537,6.74168a17.51461,17.51461,0,0,0,4.84751,11.51147c2.47446,2.54466,5.69295,4.261,7.77591,7.16149,1.08319,1.53982,1.83464,3.33723,3.09558,4.73049s3.39672,2.23181,4.80406,1.23711,1.43356-3.14743,2.13182-4.78553a5.23317,5.23317,0,0,1,5.20088-3.166,6.12882,6.12882,0,0,1,5.0008,4.08254c-.659-3.62008-2.39634-7.012-3.05657-10.63483s.20019-7.95066,3.31979-9.36513c1.33937-.62327,3.1487-.79073,3.68711-2.22693.32959-.86507.02807-1.88717.15511-2.8228C369.25528,281.1561,376.879,280.02172,380.48666,280.72968Z" transform="translate(-180.10152 -188.27796)" fill="#2f2e41"/><path d="M345.42185,471.2991a11.18295,11.18295,0,0,0-14.61214-8.97379l-24.26862-31.46958-6.70925,19.531,24.07449,26.88974a11.24355,11.24355,0,0,0,21.51552-5.97733Z" transform="translate(-180.10152 -188.27796)" fill="#ffb6b6"/><path d="M330.73254,344.30787l-8.38243-5.93555s-19.17686-1.09855-21.96661,14.64645l-35.16332,57.84515,43.59811,60.14755,21.13747-22.25082-26.671-31.1678L325.678,376.47733Z" transform="translate(-180.10152 -188.27796)" fill="#e4e4e4"/><path d="M534.95585,353.47372h-.43976V341.42666a6.9725,6.9725,0,0,0-6.9725-6.97251H502.02026a6.9725,6.9725,0,0,0-6.97252,6.97249v66.0911a6.97251,6.97251,0,0,0,6.9725,6.97252h25.52331a6.97251,6.97251,0,0,0,6.97253-6.97249V362.049h.43977Z" transform="translate(-180.10152 -188.27796)" fill="#3f3d56"/><path class="color-change" d="M527.8249,336.26815h-3.33163a2.47382,2.47382,0,0,1-2.29043,3.40813h-14.622a2.47384,2.47384,0,0,1-2.29043-3.40813h-3.11175a5.207,5.207,0,0,0-5.207,5.207v65.99413a5.207,5.207,0,0,0,5.207,5.207H527.8249a5.207,5.207,0,0,0,5.207-5.207h0V341.47514A5.207,5.207,0,0,0,527.8249,336.26815Z" transform="translate(-180.10152 -188.27796)" fill="#33817c"/><path d="M758.04573,312.76684H570.87712a4.35775,4.35775,0,0,1-4.35276-4.35276V192.63072a4.35775,4.35775,0,0,1,4.35276-4.35276H758.04573a4.35774,4.35774,0,0,1,4.35275,4.35276V308.41408A4.35774,4.35774,0,0,1,758.04573,312.76684Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M758.04573,312.76684H570.87712a4.35775,4.35775,0,0,1-4.35276-4.35276V192.63072a4.35775,4.35775,0,0,1,4.35276-4.35276H758.04573a4.35774,4.35774,0,0,1,4.35275,4.35276V308.41408A4.35774,4.35774,0,0,1,758.04573,312.76684ZM570.87712,190.01906a2.61451,2.61451,0,0,0-2.61165,2.61166V308.41408a2.61451,2.61451,0,0,0,2.61165,2.61166H758.04573a2.61451,2.61451,0,0,0,2.61165-2.61166V192.63072a2.61451,2.61451,0,0,0-2.61165-2.61166Z" transform="translate(-180.10152 -188.27796)" fill="#3f3d56"/><path d="M721.04728,226.94633H607.87557a3.91748,3.91748,0,1,1,0-7.835H721.04728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><path d="M721.04728,253.93343H607.87557a3.91748,3.91748,0,1,1,0-7.835H721.04728a3.91748,3.91748,0,0,1,0,7.835Z" transform="translate(-180.10152 -188.27796)" fill="#ccc"/><circle class="color-change" cx="530.86325" cy="94.44409" r="14" fill="#33817c"/><path d="M711.34939,276.1268V274.793h.39488v1.33382a4.25848,4.25848,0,0,1,1.61464.39489,2.372,2.372,0,0,1,.92139.768,1.79468,1.79468,0,0,1,.33346,1.0485,1.13131,1.13131,0,0,1-.25887.75466.801.801,0,0,1-.6362.30713.66792.66792,0,0,1-.49141-.20183.67875.67875,0,0,1-.20183-.50018.94972.94972,0,0,1,.079-.37733l.158-.33346a1.10866,1.10866,0,0,0,.079-.43876,1.03337,1.03337,0,0,0-.21061-.64483,1.27287,1.27287,0,0,0-.59671-.417,3.37919,3.37919,0,0,0-.78977-.158v4.8l.08776.05265a8.74061,8.74061,0,0,1,2.22011,1.67606,3.942,3.942,0,0,1,.67131,1.13653,3.48548,3.48548,0,0,1,.24131,1.25909,3.05619,3.05619,0,0,1-.42121,1.58831,2.85171,2.85171,0,0,1-1.16709,1.0969,4.92848,4.92848,0,0,1-1.63219.47386v1.43035h-.39488v-1.404a4.40491,4.40491,0,0,1-1.66728-.34223,3.15528,3.15528,0,0,1-1.347-.96527,2.18559,2.18559,0,0,1-.47825-1.3777,1.55743,1.55743,0,0,1,.30713-.97857.91445.91445,0,0,1,.74589-.39913.64469.64469,0,0,1,.66692.66549,1.30412,1.30412,0,0,1-.32469.72665,2.20278,2.20278,0,0,0-.24131.4028.89954.89954,0,0,0-.06582.35016,1.41757,1.41757,0,0,0,.31152.87978,1.98877,1.98877,0,0,0,.838.62587,3.08659,3.08659,0,0,0,1.18465.21032h.0702v-5.73019l-.50018-.28958q-.71079-.41229-1.08374-.68446a4.52619,4.52619,0,0,1-.6713-.59671,2.88251,2.88251,0,0,1-.781-1.98319,2.69087,2.69087,0,0,1,.33346-1.31175,2.61657,2.61657,0,0,1,.92139-.97857A3.75,3.75,0,0,1,711.34939,276.1268Zm0,.19306a2.71562,2.71562,0,0,0-.98721.21909,1.68175,1.68175,0,0,0-.734.70938,2.17061,2.17061,0,0,0-.27953,1.09463,2.22358,2.22358,0,0,0,.41059,1.305,2.6476,2.6476,0,0,0,.51109.552,9.52086,9.52086,0,0,0,.99173.64795l.08733.05265Zm.39488,11.89913a2.72113,2.72113,0,0,0,.66394-.1404,1.74956,1.74956,0,0,0,.48052-.2808,2.17254,2.17254,0,0,0,.61157-.85544,2.94766,2.94766,0,0,0,.22716-1.15408,3.62464,3.62464,0,0,0-1.98319-3.03621Z" transform="translate(-180.10152 -188.27796)" fill="#fff"/><path d="M562.10152,711.722h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-180.10152 -188.27796)" fill="#cacaca"/></svg> </li> </ul> </section> :root{ --font-size : 62.5%; --font-family : "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ W3","メイリオ",sans-serif; --color-content-bg : #eaf2f2; --color-text-impact : #33817c; } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-family: var(---font-family); color: var(--color-base-text); font-size: var(--font-size); line-height: 1.8; } ul, li { list-style: none; margin: 0; padding: 0; } img,svg{ max-width:100%; height: auto; } h2 { display: block; width: 800px; max-width: 100%; font-size: 4.8rem; font-weight: 700; margin: 0 auto 50px; text-align: center; word-break: break-all; } .p-intro__subttl { font-size: 2.8rem; color: var(--color-text-impact); } section{ background-color: var(--color-content-bg); text-align: center; padding: 160px 2%; } .point-lists{ display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; max-width: 1000px; margin: 56px auto 160px; counter-reset: num; } .point-lists > * { width: 30%; margin-top: 0; position: relative; padding: 40px 16px 32px; box-shadow: 0 0 8px rgb(0 0 0 / 10%); background-color: white; } .point-lists .list-num { position: absolute; top: -30px; left: 50%; width: 100px; color: var(--color-button-text); background: var(--color-text-impact); font-style: italic; font-size: 1.6rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .point-lists .list-ttl { font-size: 2.4rem; } @media (max-width: 499px){ h2, h2 * { font-size: 2.4rem; } .p-intro__subttl { font-size: 1.8rem; } .point-lists { display: block; } .point-lists > * { width: 95%; margin: 40px auto; } }

解説

コーディングではないんですが、「３つの課題」などのような、リストアップをする場合に、２つや４つではなく、３つがちょうどいいとされているのは、 「3の法則」によるものだと思いますが、 他のLPなどを見ていても、だいたい３つが基準になているようですね。 そうした場合に、３つを横並びに表示するというのは、LPの特徴かもしれません。 ということで、PCブラウザでは横並び、スマホ表示（レスポンシブ）では、縦並びにするという事になります。 レスポンシブの境目の横幅サイズは、499pxにセットしているので、スマホを横に倒して見た時に、pc表示になる端末もあるかもしれませんが、まあ大丈夫でしょう。 中に設置してある画像をsvgのbase64で記述しているのは、実はベースのHTML側にフラグを建てると、svg内の特定のオブジェクトのfillカラーを切り替えるようにしていて、 このパターンにはその仕様は盛り込んでいないんですが、簡単に複数パターンが持てて非常に便利に使っています。 ページ内に複数回呼び出されるような画像は、ファイルとして呼び出しますが、１回しか表示されない画像は、base64にしたほうが、便利だな〜と最近思っています。 あと、「３つの・・・」という場合のそれぞれの数値を、イタリック、明朝、文字大きめ、というのは、デザインテクニックのようです。 この事を気にしてみると、他のサイトデザインも、そうなっている箇所が多いことに気がつくでしょう。