@import url("../../_reset.css");

@font-face {
  font-family: "LINE Seed JP";
  src: url("../../../assets/fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "LINE Seed JP";
  src: url("../../../assets/fonts/LINESeedJP_OTF_Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* 
MARK: グローバル設定
*/
:root {
  --to-rem: calc(1rem / 16);
  --color-monotone-black: #232323;
  --color-monotone-white: #fff;
  --color-monotone-pale: #f6f6f6;
  --color-monotone-hard: #6e6e6e;
  --color-monotone-soft: #939393;
  --color-monotone-thick: #545454;
  --color-monotone-thin: #f0f3f1;
  --color-lime-thick: oklch(0.5737 0.1472 152.01);
  --color-blue-link: oklch(0.6675 0.1626 253.92);
  --color-lime-neutral: oklch(0.6836 0.1518 154.79);
  --color-lime-pale: oklch(0.9703 0.0041 157.18);
  --color-line-green: oklch(0.7245 0.2053 148.63);
  --color-yellow: oklch(0.9158 0.1651 100.06);
  --color-orange: oklch(0.683 0.1774 50.17);
  --container-normal: 1100px;
  --stack-header: 100;
  --icon-circle-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_4876_7359)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.0013%202.00033C4.68759%202.00033%202.0013%204.68662%202.0013%208.00033C2.0013%2011.314%204.68759%2014.0003%208.0013%2014.0003C11.315%2014.0003%2014.0013%2011.314%2014.0013%208.00033C14.0013%204.68662%2011.315%202.00033%208.0013%202.00033ZM0.667969%208.00033C0.667969%203.95024%203.95121%200.666992%208.0013%200.666992C12.0514%200.666992%2015.3346%203.95024%2015.3346%208.00033C15.3346%2012.0504%2012.0514%2015.3337%208.0013%2015.3337C3.95121%2015.3337%200.667969%2012.0504%200.667969%208.00033Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.4701%206.19526C10.7305%206.45561%2010.7305%206.87772%2010.4701%207.13807L7.80344%209.80474C7.54309%2010.0651%207.12098%2010.0651%206.86063%209.80474L5.52729%208.4714C5.26694%208.21106%205.26694%207.78895%205.52729%207.5286C5.78764%207.26825%206.20975%207.26825%206.4701%207.5286L7.33203%208.39052L9.52729%206.19526C9.78764%205.93491%2010.2098%205.93491%2010.4701%206.19526Z%22%20fill%3D%22%23037B41%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_4876_7359%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  --icon-building: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%203C5.44772%203%205%203.44772%205%204V20C5%2020.5523%205.44772%2021%206%2021H18C18.5523%2021%2019%2020.5523%2019%2020V4C19%203.44772%2018.5523%203%2018%203H6ZM3%204C3%202.34315%204.34315%201%206%201H18C19.6569%201%2021%202.34315%2021%204V20C21%2021.6569%2019.6569%2023%2018%2023H6C4.34315%2023%203%2021.6569%203%2020V4Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2018C8%2017.4477%208.44772%2017%209%2017H15C15.5523%2017%2016%2017.4477%2016%2018V22C16%2022.5523%2015.5523%2023%2015%2023C14.4477%2023%2014%2022.5523%2014%2022V19H10V22C10%2022.5523%209.55228%2023%209%2023C8.44772%2023%208%2022.5523%208%2022V18Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%206C7%205.44772%207.44772%205%208%205H8.01C8.56228%205%209.01%205.44772%209.01%206C9.01%206.55228%208.56228%207%208.01%207H8C7.44772%207%207%206.55228%207%206Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%206C15%205.44772%2015.4477%205%2016%205H16.01C16.5623%205%2017.01%205.44772%2017.01%206C17.01%206.55228%2016.5623%207%2016.01%207H16C15.4477%207%2015%206.55228%2015%206Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%206C11%205.44772%2011.4477%205%2012%205H12.01C12.5623%205%2013.01%205.44772%2013.01%206C13.01%206.55228%2012.5623%207%2012.01%207H12C11.4477%207%2011%206.55228%2011%206Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%2010C11%209.44772%2011.4477%209%2012%209H12.01C12.5623%209%2013.01%209.44772%2013.01%2010C13.01%2010.5523%2012.5623%2011%2012.01%2011H12C11.4477%2011%2011%2010.5523%2011%2010Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%2014C11%2013.4477%2011.4477%2013%2012%2013H12.01C12.5623%2013%2013.01%2013.4477%2013.01%2014C13.01%2014.5523%2012.5623%2015%2012.01%2015H12C11.4477%2015%2011%2014.5523%2011%2014Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2010C15%209.44772%2015.4477%209%2016%209H16.01C16.5623%209%2017.01%209.44772%2017.01%2010C17.01%2010.5523%2016.5623%2011%2016.01%2011H16C15.4477%2011%2015%2010.5523%2015%2010Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%2014C15%2013.4477%2015.4477%2013%2016%2013H16.01C16.5623%2013%2017.01%2013.4477%2017.01%2014C17.01%2014.5523%2016.5623%2015%2016.01%2015H16C15.4477%2015%2015%2014.5523%2015%2014Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%2010C7%209.44772%207.44772%209%208%209H8.01C8.56228%209%209.01%209.44772%209.01%2010C9.01%2010.5523%208.56228%2011%208.01%2011H8C7.44772%2011%207%2010.5523%207%2010Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%2014C7%2013.4477%207.44772%2013%208%2013H8.01C8.56228%2013%209.01%2013.4477%209.01%2014C9.01%2014.5523%208.56228%2015%208.01%2015H8C7.44772%2015%207%2014.5523%207%2014Z%22%20fill%3D%22%23037B41%22%2F%3E%3C%2Fsvg%3E");
  --icon-safety: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.8918%203.03886C10.0424%204.65217%207.32107%206.00045%205%206.00045V13.0004C5%2015.2364%205.77079%2016.8615%206.98675%2018.1068C8.22994%2019.3801%209.98374%2020.3002%2011.9964%2020.9952C12.004%2020.9978%2012.0115%2021.0005%2012.019%2021.0033C14.0241%2020.3036%2015.773%2019.3818%2017.0139%2018.1087C18.2292%2016.8618%2019%2015.2363%2019%2013.0004V6.00045C16.6797%206.00045%2013.9684%204.66291%2012.1081%203.03879C12.0777%203.01373%2012.0395%203%2012%203C11.9605%203%2011.9223%203.01376%2011.8918%203.03886ZM10.5904%201.52015C10.9834%201.18445%2011.4832%201%2012%201C12.5168%201%2013.0166%201.18445%2013.4096%201.52015C13.4125%201.52262%2013.4153%201.5251%2013.4182%201.52761C15.0577%202.96101%2017.3229%204.00045%2019%204.00045C19.5304%204.00045%2020.0391%204.21116%2020.4142%204.58624C20.7893%204.96131%2021%205.47002%2021%206.00045V13.0004C21%2015.7646%2020.0208%2017.8891%2018.4461%2019.5047C16.8987%2021.0924%2014.8206%2022.1448%2012.6691%2022.8947C12.6664%2022.8957%2012.6637%2022.8966%2012.6609%2022.8976C12.2297%2023.0437%2011.7616%2023.0382%2011.334%2022.8824C9.1801%2022.1376%207.10277%2021.0885%205.55575%2019.5041C3.97921%2017.8894%203%2015.7645%203%2013.0004V6.00045C3%205.47002%203.21071%204.96131%203.58579%204.58624C3.96086%204.21116%204.46957%204.00045%205%204.00045C6.67639%204.00045%208.95161%202.95168%2010.5821%201.52734C10.5849%201.52493%2010.5876%201.52253%2010.5904%201.52015Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.7071%209.29289C16.0976%209.68342%2016.0976%2010.3166%2015.7071%2010.7071L11.7071%2014.7071C11.3166%2015.0976%2010.6834%2015.0976%2010.2929%2014.7071L8.29289%2012.7071C7.90237%2012.3166%207.90237%2011.6834%208.29289%2011.2929C8.68342%2010.9024%209.31658%2010.9024%209.70711%2011.2929L11%2012.5858L14.2929%209.29289C14.6834%208.90237%2015.3166%208.90237%2015.7071%209.29289Z%22%20fill%3D%22%23037B41%22%2F%3E%3C%2Fsvg%3E");
  --icon-yen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0109%203C11.5073%203%2011.0119%203.12677%2010.5701%203.36863C10.1284%203.61048%209.75472%203.95964%209.48343%204.38391C9.25682%204.73832%208.83264%204.91302%208.42217%204.82099C7.92929%204.71049%207.4165%204.72623%206.93132%204.86674C6.44615%205.00725%206.00431%205.26799%205.64677%205.62478C5.28923%205.98158%205.02756%206.42287%204.88604%206.90775C4.74451%207.39262%204.7277%207.90539%204.83717%208.39849C4.92854%208.81008%204.75196%209.23475%204.3957%209.46021C3.96817%209.73078%203.61601%2010.1051%203.37199%2010.5483C3.12796%2010.9915%203%2011.4893%203%2011.9952C3%2012.5012%203.12796%2012.9989%203.37199%2013.4421C3.61601%2013.8853%203.96817%2014.2596%204.3957%2014.5302C4.75196%2014.7557%204.92854%2015.1804%204.83717%2015.5919C4.7277%2016.085%204.74451%2016.5978%204.88604%2017.0827C5.02756%2017.5676%205.28923%2018.0089%205.64677%2018.3656C6.00431%2018.7224%206.44615%2018.9832%206.93132%2019.1237C7.41649%2019.2642%207.92929%2019.2799%208.42217%2019.1694C8.83347%2019.0772%209.25844%2019.2528%209.48468%2019.6085C9.75561%2020.0344%2010.1296%2020.385%2010.5721%2020.628C11.0146%2020.8709%2011.5112%2020.9983%2012.0159%2020.9983C12.5207%2020.9983%2013.0173%2020.8709%2013.4598%2020.628C13.9022%2020.385%2014.2763%2020.0344%2014.5472%2019.6085C14.773%2019.2535%2015.1969%2019.0778%2015.6077%2019.169C16.1008%2019.2784%2016.6135%2019.2616%2017.0984%2019.1201C17.5833%2018.9786%2018.0246%2018.7169%2018.3814%2018.3594C18.7382%2018.0018%2018.9989%2017.56%2019.1394%2017.0748C19.2799%2016.5897%2019.2957%2016.0769%2019.1852%2015.584C19.0931%2015.1735%2019.2678%2014.7493%2019.6222%2014.5227C20.0465%2014.2514%2020.3957%2013.8777%2020.6375%2013.436C20.8794%2012.9943%2021.0061%2012.4988%2021.0061%2011.9952C21.0061%2011.4916%2020.8794%2010.9961%2020.6375%2010.5544C20.3957%2010.1127%2020.0465%209.739%2019.6222%209.46771C19.2676%209.24098%2019.093%208.81649%2019.1853%208.40586C19.2963%207.91223%2019.2806%207.39856%2019.1398%206.91261C18.9989%206.42667%2018.7374%205.98423%2018.3797%205.62647C18.0219%205.26872%2017.5795%205.00725%2017.0935%204.86639C16.6076%204.72554%2016.0939%204.70988%2015.6003%204.82086C15.1897%204.91318%2014.7652%204.73851%2014.5384%204.38391C14.2672%203.95964%2013.8934%203.61048%2013.4517%203.36863C13.01%203.12677%2012.5145%203%2012.0109%203ZM9.60962%201.61438C10.3458%201.21128%2011.1716%201%2012.0109%201C12.8502%201%2013.6761%201.21128%2014.4122%201.61438C14.9514%201.90957%2015.4297%202.30068%2015.8248%202.76663C16.4372%202.71332%2017.0562%202.77325%2017.6503%202.94546C18.4602%203.18022%2019.1976%203.616%2019.7939%204.21226C20.3902%204.80853%2020.8259%205.54591%2021.0607%206.35582C21.2329%206.94995%2021.2928%207.56895%2021.2395%208.18138C21.7055%208.57642%2022.0966%209.05477%2022.3918%209.5939C22.7949%2010.3301%2023.0061%2011.1559%2023.0061%2011.9952C23.0061%2012.8345%2022.7949%2013.6603%2022.3918%2014.3965C22.0965%2014.9358%2021.7053%2015.4142%2021.2392%2015.8093C21.2921%2016.4205%2021.2322%2017.0382%2021.0605%2017.6312C20.8263%2018.4398%2020.3917%2019.1762%2019.7971%2019.7721C19.2024%2020.368%2018.4669%2020.8041%2017.6588%2021.04C17.0662%2021.213%2016.4487%2021.2742%2015.8374%2021.2226C15.4422%2021.691%2014.9629%2022.0843%2014.4223%2022.3811C13.6849%2022.786%2012.8572%2022.9983%2012.0159%2022.9983C11.1747%2022.9983%2010.347%2022.786%209.60953%2022.3811C9.06935%2022.0845%208.59039%2021.6916%208.19533%2021.2236C7.5846%2021.2763%206.96742%2021.2163%206.37496%2021.0447C5.56634%2020.8106%204.82994%2020.376%204.23404%2019.7813C3.63814%2019.1867%203.20203%2018.4512%202.96615%2017.6431C2.79334%2017.051%202.7321%2016.434%202.78344%2015.8232C2.31311%2015.428%201.91812%2014.9482%201.61998%2014.4067C1.21327%2013.668%201%2012.8385%201%2011.9952C1%2011.152%201.21327%2010.3224%201.61998%209.5837C1.91812%209.04218%202.31311%208.56239%202.78344%208.16719C2.7321%207.55641%202.79334%206.93941%202.96615%206.34736C3.20203%205.53923%203.63814%204.80374%204.23404%204.20909C4.82994%203.61443%205.56634%203.17987%206.37496%202.94568C6.96791%202.77395%207.58562%202.71405%208.19685%202.76693C8.59193%202.30085%209.07038%201.90964%209.60962%201.61438Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.29289%207.29289C8.68342%206.90237%209.31658%206.90237%209.70711%207.29289L12.7071%2010.2929C12.8946%2010.4804%2013%2010.7348%2013%2011V18C13%2018.5523%2012.5523%2019%2012%2019C11.4477%2019%2011%2018.5523%2011%2018V11.4142L8.29289%208.70711C7.90237%208.31658%207.90237%207.68342%208.29289%207.29289Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.7071%207.29289C16.0976%207.68342%2016.0976%208.31658%2015.7071%208.70711L12.7071%2011.7071C12.3166%2012.0976%2011.6834%2012.0976%2011.2929%2011.7071C10.9024%2011.3166%2010.9024%2010.6834%2011.2929%2010.2929L14.2929%207.29289C14.6834%206.90237%2015.3166%206.90237%2015.7071%207.29289Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2012C8%2011.4477%208.44772%2011%209%2011H15C15.5523%2011%2016%2011.4477%2016%2012C16%2012.5523%2015.5523%2013%2015%2013H9C8.44772%2013%208%2012.5523%208%2012Z%22%20fill%3D%22%23037B41%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2016C8%2015.4477%208.44772%2015%209%2015H15C15.5523%2015%2016%2015.4477%2016%2016C16%2016.5523%2015.5523%2017%2015%2017H9C8.44772%2017%208%2016.5523%208%2016Z%22%20fill%3D%22%23037B41%22%2F%3E%3C%2Fsvg%3E");

  --icon-house: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.58579%2011.5858C8.96086%2011.2107%209.46957%2011%2010%2011H14C14.5304%2011%2015.0391%2011.2107%2015.4142%2011.5858C15.7893%2011.9609%2016%2012.4696%2016%2013V21C16%2021.5523%2015.5523%2022%2015%2022C14.4477%2022%2014%2021.5523%2014%2021V13L10%2013L10%2021C10%2021.5523%209.55228%2022%209%2022C8.44772%2022%208%2021.5523%208%2021V13C8%2012.4696%208.21071%2011.9609%208.58579%2011.5858Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3567%203.23538L4.35973%209.23177C4.35799%209.23326%204.35625%209.23474%204.3545%209.23622C4.2434%209.33011%204.15412%209.44712%204.09289%209.57907C4.03167%209.71103%203.99997%209.85475%204%2010.0002V19.0005C4%2019.2657%204.10536%2019.52%204.29289%2019.7076C4.48043%2019.8951%204.73478%2020.0005%205%2020.0005H19C19.2652%2020.0005%2019.5196%2019.8951%2019.7071%2019.7076C19.8946%2019.52%2020%2019.2657%2020%2019.0005V10.0002C20%209.85475%2019.9683%209.71103%2019.9071%209.57907C19.8459%209.44712%2019.7566%209.33011%2019.6455%209.23622C19.6438%209.23474%2019.642%209.23326%2019.6403%209.23177L12.6433%203.23538C12.4632%203.084%2012.2354%203.00098%2012%203.00098C11.7646%203.00098%2011.5368%203.084%2011.3567%203.23538ZM10.0635%201.7097C10.605%201.25206%2011.291%201.00098%2012%201.00098C12.709%201.00098%2013.395%201.25206%2013.9365%201.7097C13.9382%201.71117%2013.94%201.71266%2013.9417%201.71415L20.9394%207.71119C21.2714%207.99246%2021.5382%208.34258%2021.7213%208.73727C21.905%209.13306%2022.0001%209.56414%2022%2010.0005C22%2010.0005%2022%2010.0006%2022%2010.0007V19.0005C22%2019.7961%2021.6839%2020.5592%2021.1213%2021.1218C20.5587%2021.6844%2019.7957%2022.0005%2019%2022.0005H5C4.20435%2022.0005%203.44129%2021.6844%202.87868%2021.1218C2.31607%2020.5592%202%2019.7961%202%2019.0005V10.0007C2%2010.0006%202%2010.0005%202%2010.0005C1.99993%209.56414%202.09503%209.13306%202.27868%208.73727C2.46183%208.34256%202.72865%207.99242%203.06061%207.71114L10.0583%201.71415C10.06%201.71266%2010.0618%201.71117%2010.0635%201.7097Z%22%20fill%3D%22%230E904A%22%2F%3E%3C%2Fsvg%3E");

  --icon-zap: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.3735%204.37406L4.0016%2012.9997H10.998C11.3209%2012.9989%2011.6392%2013.0763%2011.9257%2013.2254C12.2127%2013.3747%2012.4592%2013.5913%2012.6441%2013.8568C12.8289%2014.1223%2012.9466%2014.4287%2012.9871%2014.7497C13.0263%2015.0612%2012.9917%2015.3774%2012.8861%2015.6728L11.6255%2019.6253L19.9974%2010.9997H13.001C12.6781%2011.0004%2012.3598%2010.923%2012.0733%2010.774C11.7863%2010.6247%2011.5398%2010.408%2011.3549%2010.1425C11.1701%209.87703%2011.0524%209.57066%2011.0119%209.24969C10.9727%208.93818%2011.0074%208.62195%2011.1129%208.32655L12.3735%204.37406ZM13.2246%201.02208C13.5592%200.960211%2013.9049%201.01392%2014.2049%201.1744C14.5049%201.33487%2014.7415%201.59257%2014.8757%201.90521C15.01%202.21784%2015.0339%202.56683%2014.9437%202.89488C14.9401%202.90784%2014.9363%202.92073%2014.9322%202.93353L13.0122%208.95353C13.0073%208.96904%2013.002%208.98443%2012.9963%208.99968C12.9973%208.99968%2012.9984%208.99968%2012.9995%208.99968H19.9982C20.3759%208.99879%2020.7462%209.10489%2021.0662%209.30573C21.3867%209.50693%2021.6436%209.79497%2021.807%2010.1364C21.9704%2010.4778%2022.0335%2010.8585%2021.9891%2011.2344C21.9447%2011.6102%2021.7945%2011.9658%2021.5561%2012.2597C21.5374%2012.2827%2021.5177%2012.3049%2021.4971%2012.3262L11.6115%2022.5113C11.3911%2022.7537%2011.0972%2022.9176%2010.7744%2022.9773C10.4398%2023.0391%2010.0941%2022.9854%209.79412%2022.825C9.4941%2022.6645%209.25755%2022.4068%209.12331%2022.0941C8.98906%2021.7815%208.96508%2021.4325%209.05531%2021.1045C9.05888%2021.0915%209.0627%2021.0786%209.06679%2021.0658L10.9868%2015.0458C10.9917%2015.0303%2010.9971%2015.0149%2011.0028%2014.9997C11.0017%2014.9997%2011.0006%2014.9997%2010.9995%2014.9997H4.00079C3.62306%2015.0006%203.25278%2014.8945%202.93282%2014.6936C2.61226%2014.4924%202.35538%2014.2044%202.19201%2013.863C2.02865%2013.5216%201.9655%2013.1408%202.00991%2012.765C2.05433%2012.3891%202.20447%2012.0336%202.44291%2011.7397C2.46159%2011.7167%202.48128%2011.6945%202.50192%2011.6732L12.3875%201.48807C12.6079%201.24565%2012.9018%201.08178%2013.2246%201.02208Z%22%20fill%3D%22%230E904A%22%2F%3E%3C%2Fsvg%3E");

  --icon-refresh: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.9981%204C9.87707%204.0005%207.84299%204.8433%206.34315%206.34315C4.84285%207.84344%204%209.87827%204%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%209.34784%203.05357%206.8043%204.92893%204.92893C6.8043%203.05357%209.34784%202%2012%202C12.0013%202%2012.0025%202%2012.0038%202.00001C14.7779%202.01044%2017.4405%203.09289%2019.435%205.02103C19.4391%205.02495%2019.4431%205.02891%2019.4471%205.03289L21.7071%207.29289C22.0976%207.68342%2022.0976%208.31658%2021.7071%208.70711C21.3166%209.09763%2020.6834%209.09763%2020.2929%208.70711L18.039%206.45324C16.4167%204.88785%2014.2527%204.00897%2011.9981%204Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%202C21.5523%202%2022%202.44772%2022%203V8C22%208.55228%2021.5523%209%2021%209H16C15.4477%209%2015%208.55228%2015%208C15%207.44771%2015.4477%207%2016%207H20V3C20%202.44772%2020.4477%202%2021%202Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2011C21.5523%2011%2022%2011.4477%2022%2012C22%2014.6522%2020.9464%2017.1957%2019.0711%2019.0711C17.1957%2020.9464%2014.6522%2022%2012%2022C11.9987%2022%2011.9975%2022%2011.9962%2022C9.22213%2021.9896%206.55946%2020.9071%204.56496%2018.979C4.5609%2018.975%204.55688%2018.9711%204.55289%2018.9671L2.29289%2016.7071C1.90237%2016.3166%201.90237%2015.6834%202.29289%2015.2929C2.68342%2014.9024%203.31658%2014.9024%203.70711%2015.2929L5.96095%2017.5467C7.58326%2019.1121%209.74726%2019.991%2012.0018%2020C14.1229%2019.9995%2016.157%2019.1567%2017.6569%2017.6569C19.1571%2016.1566%2020%2014.1217%2020%2012C20%2011.4477%2020.4477%2011%2021%2011Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2016C2%2015.4477%202.44772%2015%203%2015H8C8.55228%2015%209%2015.4477%209%2016C9%2016.5523%208.55228%2017%208%2017H4V21C4%2021.5523%203.55228%2022%203%2022C2.44772%2022%202%2021.5523%202%2021V16Z%22%20fill%3D%22%230E904A%22%2F%3E%3C%2Fsvg%3E");

  --icon-chart: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2016V21V16Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20d%3D%22M12%2016V21%22%20stroke%3D%22%230E904A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16%2014V21V14Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20d%3D%22M16%2014V21%22%20stroke%3D%22%230E904A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%2010V21%22%20stroke%3D%22%230E904A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M22.7087%203.70679L14.0636%2012.3519C13.4848%2012.9321%2012.5252%2012.9389%2011.9396%2012.3519L9.00211%209.41437L2.70869%2015.7068C1.79667%2016.6187%200.38256%2015.2044%201.29458%2014.2925L7.94158%207.64652L7.94163%207.64647C8.52469%207.06359%209.47957%207.06359%2010.0626%207.64647L10.0627%207.64658L13.0016%2010.5855L21.2945%202.29258C22.2065%201.38063%2023.6207%202.79484%2022.7087%203.70679Z%22%20fill%3D%22%230E904A%22%2F%3E%3Cpath%20d%3D%22M4%2018V21%22%20stroke%3D%22%230E904A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2014V21%22%20stroke%3D%22%230E904A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");

  --icon-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_4884_8365)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201.99935C6.76232%201.99935%205.57534%202.49101%204.70017%203.36618C3.825%204.24135%203.33333%205.42834%203.33333%206.66602C3.33333%208.10556%204.14445%209.65712%205.19849%2011.042C6.21735%2012.3807%207.38646%2013.4647%208%2013.9971C8.61354%2013.4647%209.78265%2012.3807%2010.8015%2011.042C11.8555%209.65712%2012.6667%208.10556%2012.6667%206.66602C12.6667%205.42834%2012.175%204.24135%2011.2998%203.36618C10.4247%202.49101%209.23768%201.99935%208%201.99935ZM3.75736%202.42338C4.88258%201.29816%206.4087%200.666016%208%200.666016C9.5913%200.666016%2011.1174%201.29816%2012.2426%202.42338C13.3679%203.54859%2014%205.07472%2014%206.66602C14%208.55514%2012.9648%2010.4012%2011.8625%2011.8495C10.7448%2013.3181%209.47315%2014.4868%208.83636%2015.0366C8.825%2015.0464%208.81332%2015.0558%208.80133%2015.0648C8.5703%2015.2386%208.28906%2015.3325%208%2015.3325C7.71094%2015.3325%207.4297%2015.2386%207.19867%2015.0648C7.18668%2015.0558%207.175%2015.0464%207.16364%2015.0366C6.52685%2014.4868%205.25525%2013.3181%204.13751%2011.8495C3.03522%2010.4012%202%208.55514%202%206.66602C2%205.07472%202.63214%203.54859%203.75736%202.42338Z%22%20fill%3D%22%2323C66E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.9987%205.33333C7.26232%205.33333%206.66536%205.93029%206.66536%206.66667C6.66536%207.40305%207.26232%208%207.9987%208C8.73508%208%209.33203%207.40305%209.33203%206.66667C9.33203%205.93029%208.73508%205.33333%207.9987%205.33333ZM5.33203%206.66667C5.33203%205.19391%206.52594%204%207.9987%204C9.47146%204%2010.6654%205.19391%2010.6654%206.66667C10.6654%208.13943%209.47146%209.33333%207.9987%209.33333C6.52594%209.33333%205.33203%208.13943%205.33203%206.66667Z%22%20fill%3D%22%2323C66E%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_4884_8365%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

body {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: calc(16 * var(--to-rem));
  min-block-size: 100svb;
  @media (width <= 768px) {
    font-size: calc(14 * var(--to-rem));
  }
}

main {
  overflow-inline: clip;
}

a {
  color: currentColor;
  text-decoration: unset !important;
}
.u-color-limeNeutral {
  color: var(--color-lime-neutral);
}

.u-color-limeThick {
  color: var(--color-lime-thick);
}

.u-break {
  display: block flow-root;
}

.u-break-sp {
  @media (width <= 768px) {
    display: block flow-root;
  }
}

.u-underline {
  text-decoration: underline !important;
  transition: color 300ms, text-decoration 300ms;
  color: var(--color-blue-link);

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-lime-thick);
    }
  }
}

.u-inline-flex {
  display: inline-flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: center;
}

.u-inline-flex-sp {
  @media (width > 768px) {
    display: inline-flex;
    align-items: end;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.u-highlighted {
  inline-size: fit-content;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(253, 229, 78, 1) 0%,
    rgba(253, 229, 78, 1) 100%
  );
  background-repeat: no-repeat;
  background-position: bottom;
}

.u-scrollable-inline {
  overflow-x: scroll;
}

.l-container--gray {
  background-color: var(--color-monotone-pale);
}

.u-spOnly {
  display: block;
  @media (width > 768px) {
    display: none !important;
  }
}

.u-pcOnly {
  display: block;
  @media (width <= 768px) {
    display: none !important;
  }
}

.u-inline-flex-sp {
  @media (width > 768px) {
    display: inline-flex;
    align-items: end;
  }
}

/* 
MARK: Components
*/
.c-header {
  position: fixed;
  inline-size: 100%;
  block-size: 80px;
  z-index: var(--stack-header);
  top: 0;
  & .inner {
    display: grid block;
    align-items: center;
    grid-template-columns: 125px 1fr;
    justify-items: flex-end;
    padding-inline: 40px 0;
    block-size: 100%;
  }

  @media (width <= 960px) {
    & .inner {
      padding-inline-start: 24px;
    }
  }

  @media (width <= 768px) {
    block-size: 60px;
    display: none;
    & .inner {
      padding-inline: 8px 0;
      grid-template-columns: 90px 1fr;
    }
  }
}

.c-header__linkList {
  display: flex;
  block-size: 80px;
  @media (width <= 768px) {
    block-size: 60px;
  }
}

.c-header__logo {
  transition: opacity 300ms;
  will-change: opacity;
  @media (any-hover: hover) {
    &:hover {
      opacity: 0.6;
    }
  }
}

.c-header__link {
  display: grid block;
  grid-template-columns: 40px auto;
  grid-template-areas:
    "icon text"
    "icon subText";
  gap: 4px 20px;
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: 12px 24px;
  font-weight: 700;
  transition: background-color 200ms, color 200ms;

  @media (width <= 768px) {
    display: flex;
    aspect-ratio: 1;
    padding: 0;
    align-items: center;
    justify-content: center;
    block-size: 60px;
  }
  & .icon {
    display: block flex;
    align-items: center;
    justify-content: center;
    grid-area: icon;
    @media (width <= 768px) {
      block-size: 36px;
      aspect-ratio: 1;
    }
    & img {
      inline-size: 100%;
      block-size: auto;
    }
  }

  & .text {
    grid-area: text;
    font-weight: 700;
    font-size: calc(20 * var(--to-rem));
    line-height: 1;
    @media (width <= 768px) {
      display: none;
    }
  }
  & .subText {
    grid-area: subText;
    font-size: calc(12 * var(--to-rem));
    @media (width <= 768px) {
      display: none;
    }
  }

  &.line {
    background-color: var(--color-orange);
    color: var(--color-monotone-white);
    border-radius: 0px 0px 0 18px;
    @media (any-hover: hover) {
      &:hover,
      &:focus-visible {
        background-color: var(--color-lime-neutral);
        color: var(--color-monotone-white);
      }
    }
  }

  &.tel {
    background-color: var(--color-lime-thick);
    color: var(--color-monotone-white);
    @media (any-hover: hover) {
      &:hover,
      &:focus-visible {
        background-color: var(--color-lime-neutral);
        color: var(--color-monotone-white);
      }
    }
  }
}

.c-inner {
  max-inline-size: var(--container-normal);
  margin-inline: auto;
  padding: 60px 0px;
  @media (width <= 768px) {
    padding-block: 40px;
  }
}

.c-wrap {
  padding-inline: 40px;
  @media (width <= 768px) {
    padding-inline: 16px;
  }
}

@keyframes sparkle {
  0% {
    transform: skewX(-25deg) translateX(-100%);
  }
  100% {
    transform: skewX(-25deg) translateX(200%);
  }
}

.c-commonLink {
  display: block;
  color: var(--color-lime-thick);
  text-decoration: underline !important;
  margin-inline: auto;
  text-align: center;
  inline-size: fit-content;
  @media (any-hover: hover) {
    &:hover {
      color: var(--color-lime-neutral);
      text-decoration: none;
    }
  }
}

.c-ctaButton {
  display: block flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-orange);
  font-weight: 700;
  padding: 20px 64px;
  inline-size: fit-content;
  border-radius: calc(infinity * 1px);
  min-inline-size: 400px;
  box-shadow: 0px 6px 0px #b25c14;
  font-size: calc(20 * var(--to-rem));
  column-gap: 16px;
  position: relative;
  overflow: hidden;
  transition: scale 300ms;
  scale: 1;
  color: var(--color-monotone-white);
  text-align: center;

  @media (width <= 768px) {
    min-inline-size: 250px;
    grid-template-columns: 1fr 24px;
    padding: 12px 20px;
    font-size: calc(18 * var(--to-rem));
  }

  /* きらりエフェクト */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    transform: skewX(-25deg) translateX(-200%);
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      scale: 1.05;
    }
    &:hover::before,
    &:focus-visible::before {
      animation: sparkle 400ms ease-out forwards;
      transform: scale(1.1);
    }
  }

  & .text {
    color: var(--color-monotone-white);
    text-align: center;
    position: relative;
    z-index: 2;
  }
}

.c-ctaButton.line {
  display: grid block;
  padding: 12px 24px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: 40px auto;
  background-color: var(--color-monotone-white);
  color: var(--color-lime-thick);
  border: 1px solid var(--color-line-green);
  box-shadow: 0px 8px 0 var(--color-line-green);
  margin-inline: auto;
  transition: box-shadow 300ms, transform 300ms;

  @media (width <= 768px) {
    font-size: calc(16 * var(--to-rem));
    inline-size: 100%;
  }

  & .icon {
    position: relative;
    z-index: 2;
  }

  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      box-shadow: 0px 0px 0 var(--color-line-green);
      transform: translateY(4px);
      scale: 1;
    }
  }
}

.c-checknoteItem {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 8px;
  background-image: linear-gradient(
    to right,
    var(--color-monotone-soft) 7px,
    transparent 7px
  );
  background-size: 11px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-block: 12px;
  font-weight: 700;
  font-size: calc(18 * var(--to-rem));
  &::before {
    content: "";
    display: block flow-root;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2219%22%20viewBox%3D%220%200%2020%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20width%3D%2219%22%20height%3D%2219%22%20rx%3D%222%22%20fill%3D%22%2332B46E%22%2F%3E%3Cpath%20d%3D%22M15.3332%206L7.99984%2013.3333L4.6665%2010%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    inline-size: 20px;
    aspect-ratio: 1;
    flex-shrink: 0;
  }

  @media (width <= 768px) {
    font-size: calc(16 * var(--to-rem));
  }
}

.c-head--lime {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  & .c-head__title {
    color: var(--color-monotone-white);
  }

  & .c-head__subTitle {
    color: var(--color-lime-pale);
  }
}

.c-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
}

.c-head__title {
  font-size: calc(40 * var(--to-rem));
  font-weight: 700;
  text-align: center;
  @media (width <= 768px) {
    font-size: calc(24 * var(--to-rem));
  }
}

.c-head__subTitle {
  font-size: calc(24 * var(--to-rem));
  font-weight: 700;
  color: var(--color-lime-thick);
  @media (width <= 768px) {
    font-size: calc(18 * var(--to-rem));
  }
}

.c-head__bubble {
  position: relative;
  padding: 4px 8px;
  color: var(--color-monotone-white);
  background-color: var(--color-lime-neutral);
  font-weight: 700;
  border-radius: 4px;
  inline-size: fit-content;
  margin-inline: auto;
  margin-block-end: 12px;
  font-size: calc(20 * var(--to-rem));
  line-height: 1.25;
  &::after {
    content: "";
    position: absolute;
    display: block;
    background-color: var(--color-lime-neutral);
    inline-size: 19.5px;
    aspect-ratio: 19.5 / 11.26;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    inset-block-end: -11px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  @media (width <= 768px) {
    font-size: calc(18 * var(--to-rem));
  }
}

.c-curve {
  inline-size: 100%;
  margin-block-start: -1px;
  & svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.c-whiteBox {
  position: relative;
  padding: 60px 60px;
  background-color: var(--color-monotone-white);
  border-radius: 20px;
  box-shadow: 0px 6px 0px rgb(35 35 35 /0.4);
  @media (width <= 960px) {
    padding: 40px 16px;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block flow-root;
    inline-size: 140px;
    aspect-ratio: 140 / 30;
    background-color: var(--color-yellow);

    @media (width <= 768px) {
      inline-size: 100px;
    }
  }
}

.c-ctaWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  & .c-ctaText {
    font-size: calc(24 * var(--to-rem));
    margin-block-end: 12px;
    @media (width <= 768px) {
      font-size: calc(16 * var(--to-rem));
    }
  }

  & .c-ctaHead {
    color: var(--color-lime-thick);
    font-weight: 700;
  }

  & .c-ctaFootText {
    color: var(--color-monotone-hard);
    font-size: calc(14 * var(--to-rem));
    font-weight: 700;
    margin-block-start: 16px;
    text-align: center;
    @media (width <= 768px) {
      font-size: calc(12 * var(--to-rem));
    }
  }
}

.c-speechHead {
  --_polygon-block-size: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 28px;
  color: var(--color-monotone-white);
  background-color: var(--color-lime-neutral);
  margin-block-end: var(--_polygon-block-size);
  @media (width <= 768px) {
    --_polygon-block-size: 24px;
    margin-block-end: 0;
    padding: 16px;
  }

  &::after {
    content: "";
    position: absolute;
    inset-block-end: calc(var(--_polygon-block-size) * -1 + 4px);
    display: block;
    block-size: var(--_polygon-block-size);
    aspect-ratio: 84 / 32;
    background-color: var(--color-lime-neutral);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }

  & .icon {
    inline-size: 60px;
    aspect-ratio: 60 / 62;
    & svg {
      inline-size: 100%;
      @media (width <= 768px) {
        block-size: 40px;
      }
    }
    @media (width <= 768px) {
      inline-size: 40px;
    }
  }
  & .c-head__bubble {
    background-color: var(--color-monotone-white);
    color: var(--color-lime-neutral);
    &::after {
      background-color: var(--color-monotone-white);
    }
  }

  & .c-speechHead__title {
    text-align: center;
    font-size: calc(40 * var(--to-rem));
    @media (width <= 768px) {
      font-size: calc(24 * var(--to-rem));
    }

    & .u-font-en {
      color: var(--color-yellow);
      font-size: 2em;
      line-height: 1;
    }
  }
}
.c-stickyButtonList {
  position: fixed;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  inline-size: 100%;
  padding: 12px;
  @media (width > 768px) {
    display: none;
  }
}
.c-stickyButton {
  display: grid block;
  grid-template-columns: 40px auto;
  grid-template-areas:
    "icon text"
    "icon subText";
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: 12px 24px;
  font-weight: 700;
  column-gap: 20px;
  transition: background-color 200ms, color 200ms;
  border-radius: calc(infinity * 1px);

  & .icon {
    display: block flex;
    align-items: center;
    justify-content: center;
    grid-area: icon;
    & img,
    & svg {
      inline-size: 100%;
      block-size: auto;
    }
  }

  & .text {
    grid-area: text;
    font-weight: 700;
    font-size: calc(18 * var(--to-rem));
    line-height: 1;
  }
  & .subText {
    grid-area: subText;
    font-size: calc(12 * var(--to-rem));
  }

  &.line {
    background-color: var(--color-orange);
    color: var(--color-monotone-white);
    @media (any-hover: hover) {
      &:hover,
      &:focus-visible {
        background-color: var(--color-lime-neutral);
        color: var(--color-monotone-white);
      }
    }
  }

  &.tel {
    background-color: var(--color-lime-thick);
    color: var(--color-monotone-white);
    @media (any-hover: hover) {
      &:hover,
      &:focus-visible {
        background-color: var(--color-lime-neutral);
        color: var(--color-monotone-white);
      }
    }
  }
}

.c-borderHead {
  font-size: calc(40 * var(--to-rem));
  font-weight: 700;
  text-align: center;
  margin-block-end: 12px;

  &:after {
    display: block flow-root;
    content: "";
    inline-size: 40px;
    block-size: 4px;
    background-color: var(--color-lime-thick);
    margin-inline: auto;
    margin-block-start: 12px;
  }

  @media (width <= 768px) {
    font-size: calc(24 * var(--to-rem));
  }
}

.c-bg-grid {
  background-image: url(../../../images/lp/grid.svg);
  background-size: 30px;
  background-repeat: repeat;
  @media (width <= 768px) {
    background-size: 20px;
  }
}

.c-faqItem {
  position: relative;
  border-radius: 16px;
  overflow: clip;

  & .c-faqIcon {
    position: relative;
    inline-size: 24px;
    aspect-ratio: 1;
    flex-shrink: 0;
    @media (width <= 768px) {
      inline-size: 16px;
    }
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      display: block flow-root;
      inline-size: 100%;
      block-size: 2px;
      transform: translateY(-50%);
      inset-block-start: 50%;
      background-color: var(--color-monotone-white);
      transition: transform 300ms;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0;
      display: block flow-root;
      block-size: 100%;
      transform: translateX(-50%);
      inset-inline-start: 50%;
      inline-size: 2px;
      background-color: var(--color-monotone-white);
      transition: transform 300ms, opacity 300ms;
      will-change: transform, opacity;
    }
  }
  & .c-faqQuestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-lime-thick);
    color: var(--color-monotone-white);
    inline-size: 100%;
    font-size: calc(20 * var(--to-rem));
    padding: 16px 20px;
    text-align: left;
    font-weight: 700;
    @media (width <= 768px) {
      font-size: calc(16 * var(--to-rem));
      padding: 16px;
    }
    &[aria-expanded="true"] {
      & .c-faqIcon::after {
        transform: rotate(90deg);
        opacity: 0;
      }
    }
  }

  & .c-faqQuestion__label {
    font-size: calc(24 * var(--to-rem));
    line-height: 1;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
  }

  & .c-faqQuestion__inner {
    display: flex;
    align-items: center;
    column-gap: 8px;
  }

  & .c-faqAnswer {
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: var(--color-monotone-pale);
    inline-size: 100%;
    font-size: calc(18 * var(--to-rem));
    padding-block: 0px;
    padding-inline: 20px;
    transition: padding-block 300ms, max-height 300ms;
    will-change: padding-block, max-height;
    max-height: 0;
    overflow: hidden;
    text-align: left;
    & em {
      font-size: calc(20 * var(--to-rem));
      font-weight: 700;
      font-style: normal;
      @media (width <= 768px) {
        font-size: calc(16 * var(--to-rem));
      }
    }
    @media (width <= 768px) {
      padding-inline: 16px;
      font-size: calc(14 * var(--to-rem));
    }
  }

  & .c-faqAnswerWrap {
    display: flex block;
    padding-block: 16px;
    column-gap: 8px;
    justify-content: space-around;
  }

  & .c-faqAnswer__label {
    color: var(--color-lime-neutral);
    font-size: calc(24 * var(--to-rem));
    line-height: 1;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    font-weight: 700;
  }
}

.c-footer {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  background-color: var(--color-lime-thick);
  color: var(--color-monotone-white);
  padding-block: 24px 40px;
  padding-inline: 16px;
  gap: 20px;

  & .c-footer__logo {
    inline-size: 128px;
  }

  & .c-footer__linkList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    list-style-type: none;
    list-style-type: none;
  }

  & .c-footer__link {
    display: flex;
    align-items: center;
    gap: 4px;
    &[target="_blank"] {
      &:after {
        content: "";
        inline-size: 1em;
        aspect-ratio: 1;
        display: block;
        flex-shrink: 0;
        mask-repeat: no-repeat;
        mask-size: cover;
        background-color: var(--color-monotone-white);
      }
    }
    @media (any-hover: hover) {
      &:hover {
        color: var(--color-yellow);
        text-decoration: none;
      }
    }
  }
}

/* 
MARK: フォーム
*/

.c-form.c-whiteBox {
  container-type: inline-size;
  padding: 0 0px 40px;
  overflow: clip;
  max-inline-size: 700px;
  /* block-size: 700px; */
  margin-inline: auto;
  margin-block-start: 40px;
  overflow: hidden;
  transition: height 300ms ease;
  @media (width <= 768px) {
    margin-block-start: 24px;
  }
}

.c-formInner {
  --index: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  inline-size: 100%;
  transform: translateX(calc(var(--index) * -100%));
  transition: transform 300ms ease;
  will-change: transform;
}

/* 各スライドはフル幅でOK */
.c-formGroup {
  inline-size: 100%;
}

/* data-visible系を使っているなら可視に戻す */
.c-formGroup {
  visibility: visible;
  opacity: 1;
}

.c-formTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-lime-neutral);
  color: var(--color-monotone-white);
  font-size: calc(24 * var(--to-rem));
  font-weight: 700;
  text-align: center;
  padding-block: 16px;
  gap: 16px;
  & .c-formTitle__number {
    color: var(--color-yellow);
    font-family: "Plus Jakarta Sans", sans-serif;
  }

  @media (width <= 768px) {
    font-size: calc(16 * var(--to-rem));
  }
}

.c-form__content {
  padding: 20px;
}
.c-form__btnChoices .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}

.c-form__btnChoices .wpcf7-list-item {
  display: block;
  inline-size: 100%;
  margin: 0;
}

.c-btnChoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-lime-thick);
  color: var(--color-lime-thick);
  background-color: #effff6;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    box-shadow 0.2s;
  margin: 0px;
  overflow: clip;
  padding: 16px;
  inline-size: 100%;
  font-size: calc(28 * var(--to-rem));
  &:has(input[type="radio"]:checked),
  &:has(input[type="checkbox"]:checked) {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-monotone-white);
  }
  @media (width <= 768px) {
    font-size: calc(20 * var(--to-rem));
    padding: 12px 16px;
  }
}

.c-form__selectbox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.c-form__selectbox select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 12px;
  padding: 12px 40px 12px 16px;
  font-size: calc(18 * var(--to-rem));
  width: 100%;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.c-form__selectbox select:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 2px var(--color-lime-pale);
}

.c-form__selectbox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  aspect-ratio: 1;
  background-color: var(--color-monotone-black);
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.29289%209.05071C5.68342%208.66018%206.31658%208.66018%206.70711%209.05071L12%2014.3436L17.2929%209.05071C17.6834%208.66018%2018.3166%208.66018%2018.7071%209.05071C19.0976%209.44123%2019.0976%2010.0744%2018.7071%2010.4649L12.7071%2016.4649C12.3166%2016.8554%2011.6834%2016.8554%2011.2929%2016.4649L5.29289%2010.4649C4.90237%2010.0744%204.90237%209.44123%205.29289%209.05071Z%22%20fill%3D%22%23232323%22%2F%3E%3C%2Fsvg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
}

@media (width <= 768px) {
  .c-form__selectbox select {
    font-size: calc(16 * var(--to-rem));
    padding: 10px 36px 10px 12px;
  }
  .c-form__selectbox::after {
    right: 12px;
  }
}

.c-form__btnChoices {
  display: flex;
  flex-direction: column;
  gap: 16px;
  &.u-double-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (any-hover: hover) {
  .c-form__btnChoices label:hover {
    background: var(--color-lime-pale);
  }
}

.c-form .js-prev {
  display: block;
  color: var(--color-lime-thick);
  font-size: calc(18 * var(--to-rem));
  text-align: center;
  text-decoration: underline;
  margin-block-start: 16px;
  margin-inline: auto;
  @media (any-hover: hover) {
    &:hover {
      color: var(--color-orange);
    }
  }

  @media (width <= 768px) {
    font-size: calc(16 * var(--to-rem));
    margin-block-start: 8px;
  }
}

.c-form__label {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  margin-block-end: 12px;
  & .c-form__labelInner {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: calc(16 * var(--to-rem));
    font-weight: 700;
    @media (width <= 768px) {
      font-size: calc(14 * var(--to-rem));
    }
  }

  & input[type="email"],
  & input[type="text"],
  & input[type="tel"] {
    border-radius: 8px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    inline-size: 100%;
    &[aria-invalid="true"] {
      border-color: #f95c5c;
    }
  }

  & textarea {
    block-size: 100px;
    border-radius: 8px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    inline-size: 100%;
    &[aria-invalid="true"] {
      border-color: #f95c5c;
    }
  }

  & .c-label__required {
    padding: 2px 8px;
    background-color: #f95c5c;
    color: var(--color-monotone-white);
    border-radius: 4px;
    @media (width <= 768px) {
      font-size: calc(12 * var(--to-rem));
    }
  }
  & .c-label__optional {
    padding: 2px 8px;
    background-color: #676767;
    color: var(--color-monotone-white);
    border-radius: 4px;
    @media (width <= 768px) {
      font-size: calc(12 * var(--to-rem));
    }
  }
}

.c-form .wpcf7-submit {
  display: block grid;
  align-items: center;
  grid-template-columns: 1fr 36px;
  background-color: var(--color-orange);
  font-weight: 700;
  padding: 20px 64px;
  inline-size: fit-content;
  border-radius: calc(infinity * 1px);
  min-inline-size: 400px;
  box-shadow: 0px 6px 0px #b25c14;
  font-size: calc(24 * var(--to-rem));
  column-gap: 16px;
  position: relative;
  overflow: hidden;
  transition: scale 300ms;
  scale: 1;
  inline-size: 100%;
  color: var(--color-monotone-white);
  @media (width <= 768px) {
    min-inline-size: 250px;
    padding: 12px 20px;
    font-size: calc(16 * var(--to-rem));
  }

  /* きらりエフェクト */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    transform: skewX(-25deg) translateX(-100%);
    width: 50%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }
  @media (any-hover: hover) {
    &:hover,
    &:focus-visible {
      scale: 1.05;
    }
    &:hover::before,
    &:focus-visible::before {
      animation: sparkle 400ms ease-out forwards;
      transform: scale(1.1);
    }
  }

  & .icon {
    display: block flow-root;
    background-color: var(--color-monotone-white);
    inline-size: 100%;
    aspect-ratio: 1;
    border-radius: calc(infinity * 1px);
    position: relative;
    z-index: 2;
    &::after {
      content: "";
      display: block flow-root;
      inline-size: 8px;
      aspect-ratio: 8 / 14;
      mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%2214%22%20viewBox%3D%220%200%208%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292893%200.292893C0.683417%20-0.0976311%201.31658%20-0.0976311%201.70711%200.292893L7.70711%206.29289C8.09763%206.68342%208.09763%207.31658%207.70711%207.70711L1.70711%2013.7071C1.31658%2014.0976%200.683417%2014.0976%200.292893%2013.7071C-0.0976311%2013.3166%20-0.0976311%2012.6834%200.292893%2012.2929L5.58579%207L0.292893%201.70711C-0.0976311%201.31658%20-0.0976311%200.683417%200.292893%200.292893Z%22%20fill%3D%22%23F27D1E%22%2F%3E%3C%2Fsvg%3E");
      mask-size: cover;
      mask-repeat: no-repeat;
      background-color: var(--color-orange);
    }
  }
  & .text {
    color: var(--color-monotone-white);
    text-align: center;
    position: relative;
    z-index: 2;
  }
  & .icon {
    display: block flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    aspect-ratio: 1;
  }
}
.c-form .wpcf7-not-valid-tip {
  font-weight: 700;
  color: #f95c5c;
}

.wpcf7-turnstile {
  display: flex;
  margin-inline: auto;
  justify-content: center;
  margin-top: 20px;
}

.c-conclusionUnit {
  border-radius: 16px;
  background-color: var(--color-lime-pale);
  padding: 16px;
  & .c-conclusionUnit__head {
    font-weight: 700;
    font-size: calc(20 * var(--to-rem));
    color: var(--color-lime-thick);
    margin-block-end: 4px;

    @media (width <= 768px) {
      font-size: calc(18 * var(--to-rem));
    }
  }

  & .c-conclusionUnit__text {
    font-size: calc(14 * var(--to-rem));
  }
}

/* 
MARK: ページスタイル
*/
.p-top__kv {
  position: relative;
  padding-inline-start: 40px;

  @media (width <= 960px) {
    padding-inline-start: 0px;
  }

  @media (width <= 768px) {
    display: none;
  }

  & .p-top__kvInner {
    display: grid block;
    grid-template-columns: repeat(2, 1fr);

    @media (width <= 960px) {
      grid-template-columns: 1fr;
    }
  }

  & .p-top__kvContents {
    max-inline-size: calc(var(--container-normal) / 2);
    justify-self: end;
    align-self: center;
    padding-inline-end: 40px;
    padding-block: 60px;
    @media (width <= 960px) {
      inline-size: 100%;
      max-inline-size: unset;
      padding-inline-start: 24px;
      justify-self: start;
    }
  }
  & .p-top__kvSubCopy {
    position: relative;
    margin-block-end: 16px;

    & .text {
      display: block flow-root;
      padding: 8px;
      font-weight: 700;
      color: var(--color-monotone-white);
      background-color: var(--color-lime-thick);
      border-radius: 4px;
      inline-size: fit-content;
    }

    &:after {
      aspect-ratio: 1;
      background-color: var(--color-lime-thick);
      clip-path: polygon(100% 0, 0 0, 0 98%);
      content: "";
      display: block;
      inline-size: 11.5px;
      margin-block-start: -4px;
    }
  }

  & .p-top__kvTitle {
    font-weight: 700;
    font-size: calc(32 * var(--to-rem));
    line-height: 1.25;
    margin-block-end: 16px;

    & em {
      color: var(--color-lime-thick);
      font-style: normal;
    }

    & .u-break:nth-child(2) {
      font-size: calc(52 * var(--to-rem));
    }
  }

  & .p-top__kvDesc {
    font-weight: 700;
    font-size: calc(20 * var(--to-rem));

    & em {
      text-decoration: underline;
      text-underline-offset: 4px;
      font-style: normal;
      color: var(--color-lime-thick);
    }
  }

  & .p-top__kvText {
    display: flex block;
    flex-direction: column;
    row-gap: 20px;
  }

  & .p-top__kvList {
    display: flex block;
    gap: 24px;
    list-style: none;
    flex-wrap: wrap;

    & > li {
      display: flex block;
      align-items: center;
      font-weight: 700;
      gap: 4px;
      &::before {
        content: "";
        display: block;
        mask-size: cover;
        mask-repeat: no-repeat;
        background-color: var(--color-lime-thick);
        inline-size: 24px;
        aspect-ratio: 1;
        flex-shrink: 0;
      }

      &:nth-child(1)::before {
        mask-image: var(--icon-building);
      }
      &:nth-child(2)::before {
        mask-image: var(--icon-safety);
      }
      &:nth-child(3)::before {
        mask-image: var(--icon-yen);
      }
    }
  }

  & .p-top__kvSubList {
    display: flex block;
    list-style: none;
    flex-wrap: wrap;
    gap: 12px;
    & li {
      display: flex block;
      align-items: center;
      font-weight: 700;
      gap: 4px;
      color: var(--color-lime-thick);
      font-weight: 700;
      background-color: var(--color-lime-pale);
      padding: 8px 16px;
      border-radius: calc(infinity * 1px);
      inline-size: fit-content;
      gap: 4px;

      &::before {
        content: "";
        display: block;
        mask-image: var(--icon-circle-check);
        mask-size: cover;
        mask-repeat: no-repeat;
        background-color: var(--color-lime-thick);
        inline-size: 16px;
        aspect-ratio: 1;
        flex-shrink: 0;
      }
    }
  }

  & .p-top__kvImage {
    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  & .c-ctaButton {
    margin-inline: 0;
  }
}

.p-top__kvSp {
  display: none;
  @media (width <= 768px) {
    display: block;
  }

  & .c-ctaWrap {
    padding-inline: 16px;
    padding-block: 16px;
  }
}

/* 
MARK: Problem
*/
.p-top__problem {
  position: relative;
  background-color: var(--color-lime-pale);

  & .c-head {
    margin-block-end: 60px;

    @media (width <= 768px) {
      margin-block-end: 24px;
    }

    & .c-head__title {
      display: flex block;
      @media (width <= 768px) {
        flex-direction: column;
      }
    }
  }

  & .p-top__problemBox {
    position: relative;
    border-radius: 20px;
    background-color: var(--color-monotone-white);
    padding: 40px 60px;
    background-image: url(../../../images/lp/problem.webp);
    background-size: cover;
    background-position-x: right;
    margin-block-start: 40px;

    @media (width <= 768px) {
      padding: 24px 20px;
      background-image: url(../../../images/lp-buying/bg_problem_sp.webp);
    }

    &::before {
      content: "";
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block flow-root;
      inline-size: 140px;
      aspect-ratio: 140 / 30;
      background-color: var(--color-yellow);

      @media (width <= 768px) {
        inline-size: 100px;
      }
    }
  }

  & .c-conclusionUnit {
    margin-block-start: 28px;
  }
}

/* 
MARK: Solution
*/
.p-top__solution {
  position: relative;
  background-color: var(--color-monotone-white);

  & .c-head {
    margin-block-end: 20px;

    @media (width <= 768px) {
      margin-block-end: 12px;
    }

    & .c-head__title {
      @media (width <= 768px) {
        font-size: calc(20 * var(--to-rem));
      }
    }

    & em {
      color: var(--color-lime-thick);
      font-style: normal;
      font-size: calc(44 * var(--to-rem));
      @media (width <= 768px) {
        font-size: calc(24 * var(--to-rem));
      }
    }
  }

  & .p-top__solution-illust {
    background-color: var(--color-monotone-pale);
    overflow: clip;
    border-radius: 20px;
    padding-block-end: 40px;
    max-inline-size: 760px;
    margin-block-end: 40px;
    margin-inline: auto;
    @media (width <= 768px) {
      padding-block-end: 24px;
      margin-block-end: 16px;
    }

    & figcaption {
      inline-size: fit-content;
      display: flex;
      padding: 8px 12px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-size: var(--font-size-rg);
      background-color: var(--color-lime-thick);
      color: var(--color-monotone-white);
      border-radius: 0 0 20px 0;
      font-weight: 700;
      margin-block-end: 10px;
    }
  }

  & .p-top__solutionText {
    font-size: calc(20 * var(--to-rem));
    font-weight: 700;
    text-align: center;
    margin-block-end: 40px;

    @media (width <= 768px) {
      margin-block-end: 24px;
      font-size: calc(14 * var(--to-rem));
    }
  }

  & .p-top__solutionBox {
    border-radius: 20px;
    background-color: var(--color-monotone-pale);
    padding: 0 40px 40px;

    @media (width <= 768px) {
      padding: 0 16px 24px;
    }
  }

  & .p-top__solutionBox-title {
    display: grid block;
    align-items: center;
    grid-template-columns: 1fr min(
        250px,
        calc(tan(atan2(250px, 1440px)) * 100svi)
      );
    font-size: calc(32 * var(--to-rem));
    font-weight: 700;
    text-align: center;
    margin-block-end: 20px;
    color: var(--color-lime-thick);

    @media (width <= 768px) {
      grid-template-columns: 1fr 95px;
      padding-block-start: 24px;
      font-size: calc(20 * var(--to-rem));
    }
  }

  & .p-top__solutionBox-list {
    display: grid block;
    list-style-type: none;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 20px 40px;
    margin-block-end: 40px;

    @media (width <= 768px) {
      grid-template-columns: 1fr;
      margin-block-end: 24px;
    }
  }

  & .p-top__solutionBox-item {
    display: grid block;
    align-items: center;
    grid-template-columns: 50px 1fr;
    gap: 16px;
    padding-block-end: 12px;
    border-block-end: 1px dashed #bfbfbf;
    & .icon {
      display: flex block;
      align-items: center;
      justify-content: center;
      background-color: var(--color-monotone-white);
      aspect-ratio: 1;
      border-radius: calc(infinity * 1px);
      &::after {
        content: "";
        display: block flow-root;
        inline-size: 24px;
        aspect-ratio: 1;
        background-color: var(--color-lime-thick);
        mask-size: cover;
        mask-repeat: no-repeat;
      }
    }

    &:nth-child(1) {
      & .icon::after {
        mask-image: var(--icon-house);
      }
    }
    &:nth-child(2) {
      & .icon::after {
        mask-image: var(--icon-zap);
      }
    }

    &:nth-child(3) {
      & .icon::after {
        mask-image: var(--icon-chart);
      }
    }

    &:nth-child(4) {
      & .icon::after {
        mask-image: var(--icon-refresh);
      }
    }

    & .title {
      font-weight: 700;
      font-size: calc(20 * var(--to-rem));
      margin-block-end: 4px;

      @media (width <= 768px) {
        font-size: calc(18 * var(--to-rem));
      }
    }
  }

  & .p-top__solutionBox-conclusion {
    font-weight: 700;
    font-size: calc(24 * var(--to-rem));
    text-align: center;
    margin-block-end: 20px;
    @media (width <= 768px) {
      font-size: calc(20 * var(--to-rem));
    }
  }

  & .arrow {
    margin-inline: auto;
    text-align: center;
    margin-block-end: 12px;
  }
}

/* 
MARK: Case
*/
.p-top__case {
  position: relative;
  background-color: var(--color-monotone-thin);

  & .c-borderHead {
    margin-block-end: 20px;
  }

  & .p-top__caseText {
    color: var(--color-monotone-hard);
    text-align: center;
    font-weight: 700;
    margin-block-end: 40px;
  }

  & .p-top__caseList {
    display: grid block;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style-type: none;

    @media (width <= 960px) {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }

  & .p-top__caseItem {
    position: relative;
    border-radius: 12px;
    background-color: var(--color-monotone-white);
    overflow: hidden;

    & .content {
      display: block flex;
      flex-direction: column;
      row-gap: 14px;
      padding-inline: 24px;
      padding-block-end: 28px;
    }

    & .header {
      display: block flex;
      flex-direction: column;
      row-gap: 8px;
      flex-wrap: wrap;
    }

    & .points {
      display: flex block;
      align-items: center;
      gap: 14px;
      font-weight: 700;
    }

    & .image {
      aspect-ratio: 345 / 180;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .location {
      display: flex block;
      align-items: center;
      gap: 4px;
      &::before {
        content: "";
        display: block flow-root;
        inline-size: 16px;
        background-color: var(--color-lime-neutral);
        mask-image: var(--icon-pin);
        mask-size: cover;
        mask-repeat: no-repeat;
        aspect-ratio: 1;
        flex-shrink: 0;
      }
    }

    & .title {
      font-size: calc(24 * var(--to-rem));
      font-weight: 700;

      @media (width <= 768px) {
        font-size: calc(20 * var(--to-rem));
      }
    }

    & .priceWrap {
      display: flex block;
      align-items: end;
      column-gap: 8px;
    }

    & .price {
      display: flex block;
      align-items: end;
      font-weight: 700;

      & .number {
        color: var(--color-lime-thick);
        font-family: var(--font-latin);
        font-weight: 700;
        font-size: calc(36 * var(--to-rem));
        line-height: 1;

        @media (width <= 768px) {
          font-size: calc(28 * var(--to-rem));
        }
      }

      & .unit {
        font-size: calc(20 * var(--to-rem));

        @media (width <= 768px) {
          font-size: calc(16 * var(--to-rem));
        }
      }
    }
    & .detailList {
      display: flex block;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      border-radius: 4px;
      background-color: var(--color-lime-pale);

      @media (width <= 768px) {
        display: grid block;
        grid-template-columns: 130px 1fr;
        padding: 8px 16px;
      }

      & dt {
        font-weight: 700;
      }

      & dd {
        font-weight: 700;
        font-size: calc(20 * var(--to-rem));
        color: var(--color-lime-thick);

        @media (width <= 768px) {
          font-size: calc(16 * var(--to-rem));
        }
      }
    }

    & .tagList {
      display: flex block;
      align-items: center;
      flex-wrap: wrap;
      list-style-type: none;

      gap: 10px;
      & .tagItem {
        border-radius: calc(infinity * 1px);
        border: 1px solid var(--color-lime-thick);
        padding: 6px 12px;
        color: var(--color-lime-thick);
        font-size: calc(14 * var(--to-rem));
        font-weight: 700;
      }
    }
  }

  & .c-ctaWrap {
    margin-block-start: 40px;

    @media (width <= 768px) {
      margin-block-start: 24px;
    }
  }
}

/* 
MARK: Strangth
*/

.p-top__strength {
  position: relative;
  background-color: #f9f9f9;

  & .c-borderHead {
    margin-block-end: 40px;

    @media (width <= 768px) {
      margin-block-end: 24px;
    }
  }

  & .p-top__strength-list {
    display: grid block;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style-type: none;

    @media (width <= 960px) {
      column-gap: 16px;
    }

    @media (width <= 768px) {
      grid-template-columns: 1fr;
    }
  }

  & .p-top__strength-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    background-color: var(--color-monotone-white);
    border-radius: 20px;
    border: 1px dashed #a5a5a5;

    @media (width <= 768px) {
      padding: 20px 16px;
    }

    & .point {
      position: absolute;
      inset-block-start: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--color-lime-neutral);
      color: var(--color-monotone-white);
      inline-size: fit-content;
      padding: 8px 8px 14px;
      font-size: calc(12 * var(--to-rem));
      line-height: 1;
      margin-block-end: 20px;
      clip-path: polygon(100% 99%, 50% calc(100% - 6px), 0 100%, 0 0, 100% 0);
      font-size: calc(12 * var(--to-rem));
      font-weight: 700;
      gap: 2px;

      & .number {
        font-size: calc(28 * var(--to-rem));
      }
    }

    & .title {
      font-size: calc(20 * var(--to-rem));
      font-weight: 700;

      @media (width <= 768px) {
        font-size: calc(18 * var(--to-rem));
      }
    }
  }
}

/* 
MARK: Flow
*/
.p-top__flow {
  position: relative;
  background-color: var(--color-monotone-pale);

  & .c-borderHead {
    margin-block-end: 40px;

    @media (width <= 768px) {
      margin-block-end: 24px;
    }
  }

  & .p-top__flowList {
    display: flex block;
    flex-direction: column;
    row-gap: 24px;
    list-style-type: none;
    max-inline-size: 900px;
    margin-inline: auto;
  }

  & .p-top__flowItem {
    gap: 16px;
    background-color: var(--color-monotone-white);
    padding: 0 16px 24px;
    border-radius: 16px;
    overflow: hidden;

    & .p-top__flowItem-inner {
      display: grid block;
      align-items: center;
      grid-template-columns: 90px 1fr;
      gap: 16px;

      @media (width <= 768px) {
        grid-template-columns: 50px 1fr;
      }
    }

    & .title {
      font-size: calc(20 * var(--to-rem));
      font-weight: 700;

      @media (width <= 768px) {
        font-size: calc(18 * var(--to-rem));
      }
    }

    & .icon {
      border-radius: calc(infinity * 1px);
      background-color: var(--color-lime-pale);
      display: flex block;
      aspect-ratio: 1;
      align-items: center;
      justify-content: center;
      min-block-size: 0;
      padding: 10px;
      & svg {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
      }
    }

    & .point {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--color-lime-neutral);
      color: var(--color-monotone-white);
      inline-size: fit-content;
      padding: 8px 8px 14px;
      font-size: calc(12 * var(--to-rem));
      line-height: 1;
      clip-path: polygon(100% 99%, 50% calc(100% - 6px), 0 100%, 0 0, 100% 0);
      font-size: calc(12 * var(--to-rem));
      font-weight: 700;
      gap: 2px;

      @media (width <= 768px) {
        font-size: calc(10 * var(--to-rem));
      }

      & .number {
        font-size: calc(28 * var(--to-rem));

        @media (width <= 768px) {
          font-size: calc(24 * var(--to-rem));
        }
      }
    }

    & .title {
      font-size: calc(20 * var(--to-rem));
      font-weight: 700;
      margin-block-end: 8px;

      @media (width <= 768px) {
        font-size: calc(18 * var(--to-rem));
      }
    }
  }
}

/* 
MARK: FAQ
*/
.p-top__faq {
  position: relative;
  background-color: var(--color-monotone-thin);

  & .c-borderHead {
    margin-block-end: 40px;

    @media (width <= 768px) {
      margin-block-end: 24px;
    }
  }

  & .p-top__faqList {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
  }
}

/* 
MARK: Voice
*/

.p-top__voice {
  position: relative;
  background-color: var(--color-lime-pale);

  & .c-borderHead {
    margin-block-end: 40px;

    @media (width <= 768px) {
      margin-block-end: 24px;
    }
  }

  & .p-top__voiceList {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    margin-block-end: 40px;

    @media (width <= 768px) {
      row-gap: 20px;
      margin-block-end: 24px;
    }
  }

  & .p-top__voiceItem {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 24px;
    padding-block-end: 40px;
    background-image: linear-gradient(
      to right,
      var(--color-monotone-soft) 7px,
      transparent 7px
    );
    align-items: center;
    background-size: 11px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    @media (width <= 768px) {
      padding-block-end: 20px;
      grid-template-columns: 1fr;
    }
  }

  & .p-top__voiceItemImage {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 100%;
    & figcaption {
      display: inline-flex;
      text-align: center;
      font-size: calc(14 * var(--to-rem));
      @media (width > 768px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        margin-block-start: 4px;
      }
    }
    @media (width <= 768px) {
      justify-self: center;
      margin-block-end: 16px;
      & img {
        inline-size: calc(tan(atan2(80px, 375px)) * 100cqi);
      }
    }
  }

  & .p-top__voiceItemText {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    font-size: calc(18 * var(--to-rem));
    line-height: 1.75;
    @media (width <= 768px) {
      font-size: calc(16 * var(--to-rem));
    }
  }

  & .p-top__voiceItemTitle {
    font-size: calc(24 * var(--to-rem));
    @media (width <= 768px) {
      font-size: calc(20 * var(--to-rem));
    }
  }

  & .p-top__voiceItemText-inner {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
}

/* 
MARK:FAQ
*/
.p-top__faq {
  position: relative;
  background-color: var(--color-monotone-white);
}

/* 
MARK: ctaSection
*/

.p-top__ctaSection {
  position: relative;
  background-image: url("../../../images/lp-buying/cta-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.c-ctaBox {
  position: relative;
  padding: 40px 40px 0;
  border-radius: 12px;
  background-color: var(--color-monotone-white);
  max-inline-size: 900px;
  margin-inline: auto;

  @media (width <= 768px) {
    padding: 24px 16px 0;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block flow-root;
    inline-size: 140px;
    aspect-ratio: 140 / 30;
    background-color: var(--color-yellow);
  }

  & .c-ctaBox__title {
    display: flex block;
    align-items: center;
    justify-content: center;
    font-size: calc(32 * var(--to-rem));
    font-weight: 700;
    text-align: center;
    padding-block-end: 16px;
    border-bottom: 1px dashed #bfbfbf;
    margin-block-end: 16px;

    @media (width <= 768px) {
      flex-direction: column;
      font-size: calc(24 * var(--to-rem));
    }
  }

  & .c-ctaBox__content {
    display: grid block;
    grid-template-columns: 1fr min(
        265px,
        calc(tan(atan2(265px, 1100px)) * 100svi)
      );
    gap: 40px;
    align-items: center;

    @media (width <= 768px) {
      grid-template-columns: 1fr;
      row-gap: 0px;
    }
  }

  & .c-ctaBox__content-inner {
    padding-block-end: 40px;
  }

  & .c-ctaBox__content-text {
    text-align: center;
    font-size: calc(20 * var(--to-rem));
    font-weight: 700;
    line-height: 1.5;
    margin-block-end: 24px;
    @media (width <= 768px) {
      font-size: calc(18 * var(--to-rem));
    }
  }

  & .c-ctaBox__content-image {
    align-self: end;
    margin-inline: auto;
    @media (width <= 768px) {
      inline-size: calc(tan(atan2(155px, 375px)) * 100svi);
    }
  }
}