@charset "utf-8";

/*==================================================
CSS Variables
================================================== */
:root {
  /* Colors */

  --color-logo: #5BC2DC;
  --color-primary: #006CC9;
  --color-secondary: #1476CB;
  --color-accent: #00A2C7;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray: #333333;
  --color-light-gray: #CCCCCC;
  --color-lighter-gray: #DDDDDD;
  --color-lightest-gray: #F5F5F5;
  --color-solid-gray: #767676;
  --color-blue-light: #DEF1FF;
  --color-blue-lighter: #E8F6FF;
  --color-blue-dark: #0F4C82;
  --color-blue-purple: #5772B8;
  --color-blue-base: #005FB1;

  F5F5F5 --color-white-10: #FFFFFF1A;
  --color-white-20: #FFFFFF33;
  --color-white-30: #FFFFFF4D;
  --color-white-40: #FFFFFF66;
  --color-white-50: #FFFFFF80;
  --color-white-60: #FFFFFF99;
  --color-white-70: #FFFFFFB3;
  --color-white-80: #FFFFFFCC;
  --color-white-85: #FFFFFFd9;

  /* Typography */
  --font-family-jp: 'Noto Sans JP', sans-serif;
  --font-family-en: 'Cairo', sans-serif;

  /* Transition */
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --transition-slower: all 0.7s ease;
  --transition-normal-in-out: all 0.3s ease-in-out;
  --transition-slow-in-out: all 0.5s ease-in-out;
  --transition-slower-in-out: all 0.7s ease-in-out;


}

/*==================================================
icon
================================================== */
:root {

  --icon-logo: url("data: image/svg+xml, %3Csvg%20width%3D%22169%22%20height%3D%2246%22%20viewBox%3D%220%200%20169%2046%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_185_226%29%22%3E%3Cpath%20d%3D%22M16.3891%206.1226C15.1327%204.94706%2012.8781%204.28232%2010.5398%204.28232C8.86461%204.28232%206.86135%204.53423%206.86135%206.46547C6.86135%207.89291%208.53655%208.56465%2011.0424%209.48129C13.967%2010.5729%2017.4012%2011.9933%2017.4012%2016.1077C17.4012%2022.6501%2010.463%2023.4898%207.20337%2023.4898C5.36065%2023.4898%203.35739%2023.3219%201.8497%2022.902C0.342021%2022.4822%200.00698001%2021.8105%200.00698001%2019.8023V17.3742C1.6752%2018.5497%204.35553%2019.1375%206.52631%2019.1375C9.19965%2019.1375%2010.5398%2018.3818%2010.5398%2016.7025C10.5398%2015.0231%209.11589%2014.5193%205.35367%2013.0989C2.7571%2012.0913%200%2010.7548%200%206.97627C0%201.42744%206.27503%200%2010.0373%200C12.2918%200%2014.1345%200.419836%2015.3072%200.923639C16.3123%201.42744%2016.396%202.01521%2016.396%203.35169V6.11561L16.3891%206.1226ZM36.2891%200.923639H43.311C43.0597%203.19075%2042.9759%206.79434%2042.9759%2010.314V13.4138C42.9759%2016.9404%2043.1434%2020.7959%2043.4785%2022.8041H39.465C37.9573%2022.8041%2037.2035%2022.3003%2036.9522%2021.2927C35.0327%2022.7201%2032.9387%2023.3009%2030.8516%2023.3009C23.3272%2023.3009%2022.4058%2018.7737%2022.4058%2015.422V9.29936C22.4058%205.86371%2022.2383%202.75692%2021.987%200.916641H26.1681C28.0945%200.916641%2029.0089%202.09218%2029.0089%204.01643V12.903C29.0089%2016.4226%2029.344%2019.1095%2033.6925%2019.1095C34.6976%2019.1095%2035.7028%2018.9416%2036.5334%2018.6057V10.7268C36.5334%207.95589%2036.4496%203.17676%2036.2821%200.916641M57.0267%2022.8041H50.0048C50.2561%2020.537%2050.3398%2016.9334%2050.3398%2013.4138V10.314C50.3398%206.79434%2050.2561%202.93185%2049.8373%200.923639H53.8508C55.3585%200.923639%2056.1053%201.42744%2056.3566%202.43505C58.2831%201.00761%2060.3701%200.419836%2062.4641%200.419836C69.9886%200.419836%2070.9099%204.94706%2070.9099%208.29875V14.4214C70.9099%2017.857%2071.0774%2020.9638%2071.3287%2022.8041H67.1477C65.2282%2022.8041%2064.3068%2021.6285%2064.3068%2019.7043V10.8178C64.3068%207.29814%2063.9718%204.6112%2059.6232%204.6112C58.6181%204.6112%2057.62%204.77913%2056.7824%205.115V12.9939C56.7824%2015.7578%2056.7824%2020.544%2057.0337%2022.8041%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M91.145%200.923645C92.3177%200.923645%2094.1534%200.839677%2095.0748%200.671743C94.9073%201.34348%2094.4047%203.09979%2094.0697%203.8555C93.4834%205.115%2092.7295%205.53484%2089.8049%205.53484H87.2921V13.0009C87.2921%2015.7718%2087.3758%2020.551%2087.6271%2022.8111H80.5215C80.7727%2020.544%2080.8565%2015.7718%2080.8565%2013.0009V5.53484H78.6857C76.7592%205.53484%2075.091%205.78674%2074.2534%206.29054V3.35169C74.2534%201.67235%2074.5885%200.923645%2077.0943%200.923645H91.145ZM118.66%2011.6574C118.66%2018.9556%20114.479%2023.4828%20106.955%2023.4828C99.4303%2023.4828%2095.5843%2019.3754%2095.5843%2011.9093C95.5843%204.44327%2099.6746%200.251907%20107.206%200.251907C114.737%200.251907%20118.66%204.27533%20118.66%2011.6574ZM102.02%2011.7414C102.02%2016.7724%20103.779%2019.0396%20107.206%2019.0396C110.633%2019.0396%20112.225%2016.7724%20112.225%2011.7414C112.225%206.71038%20110.556%204.3593%20107.206%204.3593C103.856%204.3593%20102.02%206.70338%20102.02%2011.7414Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M142.322%2024.0636C139.649%2024.0636%20139.063%2023.056%20137.388%2020.6279C136.466%2019.2845%20133.542%2014.3374%20133.039%2013.3298C132.788%2012.826%20132.704%2012.4061%20133.207%2012.1542C135.377%2010.8947%20135.964%209.55826%20135.964%208.04685C135.964%206.29054%20135.21%204.77913%20132.704%204.77913C131.95%204.77913%20130.868%204.8631%20130.366%205.03103V13.0009C130.366%2015.7648%20130.449%2020.551%20130.701%2022.8111H123.839C124.091%2020.6279%20124.174%2016.9404%20124.174%2013.4208V10.321C124.174%206.80134%20124.091%202.93885%20123.672%200.930638C126.932%200.930638%20131.699%200.762704%20133.786%200.762704C137.464%200.762704%20142.399%201.51841%20142.399%207.05324C142.399%209.32036%20141.31%2011.1606%20139.475%2012.3362C139.14%2012.5881%20139.14%2012.756%20139.475%2013.2598C141.813%2016.7794%20144.661%2020.7259%20147.25%2023.4898C146.329%2023.7417%20143.907%2024.0776%20142.315%2024.0776M160.219%2016.4366V16.9404C160.219%2018.6197%20160.303%2021.3836%20160.554%2022.8111H153.449C153.7%2021.3836%20153.784%2018.5357%20153.784%2016.9404V16.4366C153.784%2015.5129%20153.532%2014.5893%20152.779%2013.0849C151.194%209.90113%20147.676%203.77852%20144.668%201.00761C145.84%200.839674%20148.011%200.755707%20149.351%200.755707C152.108%200.755707%20152.946%201.67935%20153.616%202.77092C154.202%203.69456%20156.541%208.30575%20157.295%2010.237C158.216%208.05385%20160.052%204.19836%20160.889%202.85489C161.559%201.84728%20162.474%200.755707%20164.819%200.755707C165.908%200.755707%20167.66%200.839674%20169%201.00761C166.829%202.93186%20162.725%209.7262%20161.057%2012.833C160.303%2014.3444%20160.219%2015.1001%20160.219%2016.4366Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M12.0198%2036.6377C11.4055%2036.2808%2010.2678%2036.0359%209.56282%2036.0359C8.3832%2036.0359%207.6154%2036.4347%207.6154%2037.3304C7.62936%2039.5765%2012.6968%2038.6879%2012.6968%2042.5224C12.6968%2044.6285%2011.1333%2045.895%208.61354%2045.895C7.3711%2045.895%206.17054%2045.6152%205.12354%2045.0624L5.9402%2043.537C6.68008%2043.8728%207.48976%2044.1247%208.39716%2044.1247C9.6745%2044.1247%2010.3795%2043.6769%2010.3795%2042.6903C10.3795%2040.5211%205.312%2041.3958%205.312%2037.5333C5.312%2035.6371%207.00116%2034.3146%209.27664%2034.3146C10.5051%2034.3146%2011.8383%2034.5735%2012.8993%2035.1123L12.0268%2036.6377H12.0198Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M24.723%2041.7037C24.709%2044.4466%2022.7267%2045.8881%2020.0673%2045.8881C17.4079%2045.8881%2015.6141%2044.4746%2015.628%2041.5777C15.628%2041.5777%2015.6559%2036.8336%2015.6769%2034.4825H17.8895L17.8407%2041.7037C17.8267%2043.474%2018.9156%2044.2297%2020.2837%2044.2297C21.91%2044.2297%2022.7406%2043.1031%2022.7406%2041.5847L22.7686%2034.4895H24.7509L24.723%2041.7107V41.7037Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M37.4267%2045.3982L34.879%2046L30.8725%2038.9328C30.1954%2037.7502%2029.8604%2036.7286%2029.8604%2036.7286C29.8604%2036.7286%2030%2038.1631%2030%2039.0377L29.986%2045.7061H27.9897L28.0665%2034.8534L30.6282%2034.2866L34.6208%2041.3048C35.2978%2042.4874%2035.6468%2043.509%2035.6468%2043.509C35.6468%2043.509%2035.5072%2042.0955%2035.5072%2041.1999L35.5212%2034.4895H37.5314L37.4267%2045.4052V45.3982Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M45.112%2036.2178L45.0492%2045.6991H42.8226L42.8854%2036.2178H39.9678V34.4755H48.0297V36.2178H45.112Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M55.2047%2045.888C51.7356%2045.888%2049.4741%2043.9498%2049.4741%2040.0873C49.4741%2036.8546%2051.8822%2034.3146%2055.2047%2034.3146C58.8134%2034.3146%2060.8864%2036.5957%2060.8864%2040.0873C60.8864%2043.334%2058.3806%2045.888%2055.2047%2045.888ZM55.2047%2035.9729C53.2992%2035.9729%2051.8752%2037.5123%2051.8752%2040.0873C51.8752%2042.6623%2052.8734%2044.2157%2055.2047%2044.2157C57.4034%2044.2157%2058.4783%2042.1865%2058.4783%2040.0873C58.4783%2037.6243%2057.4034%2035.9729%2055.2047%2035.9729Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M69.9046%2045.979L66.4007%2040.6541L66.9521%2039.6535C67.2313%2039.6045%2069.2276%2039.5625%2069.2276%2037.8202C69.2276%2036.4487%2068.3062%2036.0219%2067.1056%2036.0219C66.7357%2036.0219%2066.1843%2036.0709%2065.8143%2036.0709L65.7515%2045.7061H63.5249L63.6017%2034.4825C63.6017%2034.4825%2066.1982%2034.3286%2067.2243%2034.3286C69.5905%2034.3286%2071.4961%2034.9933%2071.4961%2037.5333C71.4961%2039.3036%2070.2397%2040.3952%2068.8856%2040.7381C69.1648%2040.969%2069.3323%2041.1859%2069.5486%2041.4938L71.9568%2045.0694L69.8976%2045.993L69.9046%2045.979Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M79.2439%2040.6401L79.216%2045.7061H76.9894L77.0173%2040.7521L73.4365%2035.2382L75.4188%2034.2516L77.6315%2037.7782C78.0015%2038.366%2078.2318%2039.0377%2078.2318%2039.0377C78.2178%2039.0657%2078.4133%2038.471%2078.874%2037.7782L81.2053%2034.2516L82.9852%2035.1752L79.2369%2040.6401H79.2439Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M100.212%2045.874L98.8928%2038.5269C98.7881%2037.9392%2098.5996%2036.2318%2098.5996%2036.2318C98.5996%2036.2318%2098.3204%2037.6313%2098.0622%2038.5409L95.9612%2045.6991H93.3786L91.5638%2038.5829C91.2706%2037.4284%2091.1171%2036.2248%2091.1171%2036.2248C91.1171%2036.2248%2090.9635%2037.5333%2090.7471%2038.5969L89.2255%2045.8671L87.2432%2045.5312L89.763%2034.4755H92.4991L94.3698%2041.5567C94.6908%2042.8022%2094.7816%2043.8378%2094.7816%2043.8378C94.7816%2043.8378%2094.9491%2042.7463%2095.3051%2041.5777L97.441%2034.4825H100.156L102.334%2045.5662L100.198%2045.874H100.212Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M112.26%2045.902L111.157%2042.6973H107.136L105.936%2045.881L103.967%2045.4192L108.267%2034.4755H110.445L114.451%2045.3912L112.253%2045.902H112.26ZM109.858%2038.9608C109.37%2037.5893%20109.195%2036.2808%20109.195%2036.2808C109.195%2036.2808%20108.937%2037.6803%20108.49%2038.9608L107.785%2040.976H110.577L109.858%2038.9608Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M116.957%2045.7061L117.034%2034.4825H119.26L119.198%2043.9498H123.148V45.7061H116.957Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M129.214%2036.2178L129.151%2045.6991H126.925L126.987%2036.2178H124.07V34.4755H132.132V36.2178H129.214Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M136.899%2045.7061H134.672L134.749%2034.4825H136.976L136.899%2045.7061Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M150.154%2045.3982L147.606%2046L143.6%2038.9328C142.922%2037.7502%20142.587%2036.7286%20142.587%2036.7286C142.587%2036.7286%20142.727%2038.1631%20142.727%2039.0377L142.713%2045.7061H140.717L140.794%2034.8534L143.355%2034.2866L147.348%2041.3048C148.025%2042.4874%20148.374%2043.509%20148.374%2043.509C148.374%2043.509%20148.234%2042.0955%20148.234%2041.1999L148.248%2034.4895H150.258L150.154%2045.4052V45.3982Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3Cpath%20d%3D%22M162.362%2045.1323C161.455%2045.4682%20159.612%2045.888%20158.704%2045.888C155.403%2045.888%20152.82%2044.1667%20152.82%2040.1433C152.82%2036.8476%20155.647%2034.3076%20158.781%2034.3076C160.1%2034.3076%20160.882%2034.5245%20161.901%2035.0493L161.043%2036.4627C160.17%2036.0919%20159.661%2035.9869%20158.767%2035.9869C156.897%2035.9869%20155.235%2037.7712%20155.235%2040.0383C155.235%2042.3054%20156.359%2044.1667%20158.704%2044.1667C159.256%2044.1667%20159.779%2044.0897%20160.191%2043.9638L160.219%2040.2552H162.418L162.355%2045.1323H162.362Z%22%20fill%3D%22%235BC2DC%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_185_226%22%3E%3Crect%20width%3D%22169%22%20height%3D%2246%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");

  --icon-home: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_125_412%29%22%3E%3Cpath%20d%3D%22M6.00073%200.172852L0%204.46046V11.8271H4.72521V7.89075H7.27479V11.8271H12V4.46046L6.00073%200.172852Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_125_412%22%3E%3Crect%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");

  --icon-menu: url("data:image/svg+xml,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2028%2026%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M28%2C26H0v-2h28v2ZM28%2C14H0v-2h28v2ZM28%2C2H0V0h28v2Z%22%2F%3E%3C%2Fsvg%3E");

  --icon-arrow-link: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%228%22%20viewBox%3D%220%200%2016%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%208H0V5.90994H11.6707L7.94933%201.36956L9.44327%200L16%208Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-x: 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%22M23.707%201.70702L13.4141%2012L23.707%2022.293L22.293%2023.707L12%2013.4141L1.70703%2023.707L0.292969%2022.293L10.5859%2012L0.292969%201.70702L1.70703%200.292961L12%2010.5859L22.293%200.292961L23.707%201.70702Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  --icon-up: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%229%22%20viewBox%3D%220%200%2014%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%208L7%202L13%208%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");

  --icon-play: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%209%2010.4%22%3E%20%20%3C%21--%20Generator%3A%20Adobe%20Illustrator%2029.3.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.0%20Build%20151%29%20%20--%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpolygon%20class%3D%22st0%22%20points%3D%220%200%200%2010.4%209%205.2%200%200%22%2F%3E%3C%2Fsvg%3E");

  --icon-pause: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%209%2012%22%3E%20%20%3C%21--%20Generator%3A%20Adobe%20Illustrator%2029.3.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.0%20Build%20151%29%20%20--%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M3%2C12H0V0h3v12ZM9%2C12h-3V0h3v12Z%22%2F%3E%3C%2Fsvg%3E");

  --icon-dot: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2023%2023%22%3E%20%20%3C%21--%20Generator%3A%20Adobe%20Illustrator%2029.3.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%202.1.0%20Build%20151%29%20%20--%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%225%22%2F%3E%3C%2Fsvg%3E");

  --icon-breadcrumb-separator: url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.7%200L0%200.7L4%204.7L0%208.7L0.7%209.4L5.4%204.7L0.7%200Z%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E");

  --icon-plus: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%207H16V9H0V7Z%22%20fill%3D%22%23006CC9%22%2F%3E%3Cpath%20d%3D%22M9%208.74227e-08L9%2016H7L7%200L9%208.74227e-08Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-arrow-back: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%228%22%20viewBox%3D%220%200%2016%208%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M0%208H16V5.90994H4.32933L8.05067%201.36956L6.55673%200L0%208Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-external: url("data:image/svg+xml,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20none%3B%20%20%20%20%20%20%7D%20%20%20%20%20%20.st1%20%7B%20%20%20%20%20%20%20%20clip-path%3A%20url%28%23clippath%29%3B%20%20%20%20%20%20%7D%20%20%20%20%20%20.st2%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%20%20%3CclipPath%20id%3D%22clippath%22%3E%20%20%20%20%20%20%3Crect%20class%3D%22st0%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%20%20%20%20%3C%2FclipPath%3E%20%20%3C%2Fdefs%3E%20%20%3Cg%20class%3D%22st1%22%3E%20%20%20%20%3Cg%3E%20%20%20%20%20%20%3Cpolygon%20class%3D%22st2%22%20points%3D%2220%2020%200%2020%200%200%208%200%208%202%202%202%202%2018%2018%2018%2018%2012%2020%2012%2020%2020%22%2F%3E%20%20%20%20%20%20%3Cpolygon%20class%3D%22st2%22%20points%3D%2211%200%2011%202%2016.6%202%209.3%209.3%2010.7%2010.7%2018%203.4%2018%209%2020%209%2020%200%2011%200%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%3C%2Fg%3E%3C%2Fsvg%3E");

  --icon-arrow-left: url("data:image/svg+xml,%3Csvg%20width%3D%2280%22%20height%3D%2218%22%20viewBox%3D%220%200%2080%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%208.66016L15%2017.3204L15%20-9.82319e-05L0%208.66016ZM13.5%208.66016L13.5%2010.1602L80%2010.1602L80%208.66016L80%207.16016L13.5%207.16016L13.5%208.66016Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-arrow-right: url("data:image/svg+xml,%3Csvg%20width%3D%2280%22%20height%3D%2218%22%20viewBox%3D%220%200%2080%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M80%208.66016L65%20-9.82436e-05L65%2017.3204L80%208.66016ZM0%208.66016L3.49382e-10%2010.1602L66.5%2010.1602L66.5%208.66016L66.5%207.16016L-3.49382e-10%207.16016L0%208.66016Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-arrow-left-daigonal: url("data:image/svg+xml,%3Csvg%20width%3D%2281%22%20height%3D%2273%22%20viewBox%3D%220%200%2081%2073%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.66539e-08%2072.6184L16.9552%2069.0798L5.41303%2056.1655L1.66539e-08%2072.6184ZM10.0657%2063.6222L11.0653%2064.7406L80.9996%202.23682L80%201.11841L79.0004%20-2.04496e-06L9.06611%2062.5038L10.0657%2063.6222Z%22%20fill%3D%22%23006CC9%22%2F%3E%3C%2Fsvg%3E");

  --icon-zoom: url("data:image/svg+xml,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2022.1%2022.1%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill-rule%3A%20evenodd%3B%20%20%20%20%20%20%7D%20%20%20%20%20%20.st0%2C%20.st1%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23006cc9%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M11%2C9h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z%22%2F%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M10%2C0c5.5%2C0%2C10%2C4.5%2C10%2C10s-.8%2C4.6-2.3%2C6.3l4.3%2C4.3-1.4%2C1.4-4.3-4.3c-1.7%2C1.4-3.9%2C2.3-6.3%2C2.3C4.5%2C20%2C0%2C15.5%2C0%2C10S4.5%2C0%2C10%2C0ZM10%2C2C5.6%2C2%2C2%2C5.6%2C2%2C10s3.6%2C8%2C8%2C8%2C8-3.6%2C8-8S14.4%2C2%2C10%2C2Z%22%2F%3E%3C%2Fsvg%3E");

  --icon-close: url("data:image/svg+xml,%3Csvg%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.0078%201.41406L12.918%2011.5029L23.0078%2021.5928L21.5928%2023.0078L11.5039%2012.918L1.41504%2023.0078L0.000976562%2021.5928L10.0889%2011.5039L0%201.41406L1.41406%200L11.5039%2010.0889L21.5938%200L23.0078%201.41406Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");


  --icon-arrow-prev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%228%22%20viewBox%3D%220%200%2016%208%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M0%208H16V5.90994H4.32933L8.05067%201.36956L6.55673%200L0%208Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");

  --icon-arrow-next: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%228%22%20viewBox%3D%220%200%2016%208%22%20fill%3D%22none%22%3E%20%20%3Cpath%20d%3D%22M16%208H0V5.90994H11.6707L7.94933%201.36956L9.44327%200L16%208Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");

}

/*==================================================
Global Reset
================================================== */
html {
  scroll-behavior: smooth;
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none
}

@media (prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth
  }
}

body {
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
  font-family: var(--font-family-jp);
  color: var(--color-black);
  background-color: var(--color-white);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove default list styles */
ul, ol {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Image styles */
img, picture {
  max-width: 100%;
  height: auto;
  display: block
}

input, button, textarea, select {
  font: inherit
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*==================================================
no-scroll
================================================== */
body.no-scroll {
  overflow: hidden;
}


.visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*==================================================
SP
================================================== */
.pc_item {
  display: none;
}

/*==================================================
[sp]header
================================================== */
.header {
  width: 100vw;
  height: 18.666666666666667vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header .logo a {
  display: block;
  width: 46.133333333333333vw;
  height: 18.666666666666667vw;
  position: relative;
}

.header .logo a::before {
  content: '';
  width: 35.466666666666667vw;
  height: 9.6vw;
  background-color: var(--color-logo);
  -webkit-mask: var(--icon-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 4.8vw);
  left: calc(50% - 17.733333333333333vw);
}

.header .logo a span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header .btn_menu {
  width: 18.666666666666667vw;
  height: 18.666666666666667vw;
  position: relative;
}

.header .btn_menu::before {
  content: '';
  width: 5.866666666666667vw;
  height: 5.6vw;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon-menu);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 2.8vw);
  left: calc(50% - 2.933333333333333vw);
  pointer-events: none;
}

.header .btn_menu span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header .contact_link_pc {
  display: none;
}

.header .nav_container {
  display: block;
  transition: var(--transition-normal);
  background: var(--color-primary);
  width: 89.333333333333333vw;
  height: 100vh;
  padding: 21.333333333333333vw 0 0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: translateX(89.333333333333333vw);
}

.header.nav_open .nav_container {
  display: block;
  background: var(--color-primary);
  width: 89.333333333333333vw;
  height: 100vh;
  padding: 21.333333333333333vw 0 0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transform: translateX(0);
  box-shadow: -2.666666666666667vw 0 5.333333333333333vw 0 rgba(0, 0, 0, 0.25);
}


.header .btn_menu_close {
  width: 18.666666666666667vw;
  height: 18.666666666666667vw;
  background-color: var(--color-blue-base);
  position: absolute;
  top: 0;
  right: 0;
}

.header .btn_menu_close::before {
  content: '';
  width: 5.866666666666667vw;
  height: 5.6vw;
  background-color: var(--color-white);
  -webkit-mask: var(--icon-x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 2.8vw);
  left: calc(50% - 2.933333333333333vw);
  pointer-events: none;
}

.header .btn_menu_close span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header .nav_container_inner {
  overflow-y: auto;
  height: calc(100vh - 21.333333333333333vw);
}

.header .main_nav .nav_list_primary {
  display: flex;
  flex-direction: column;
  padding: 0 5.333333333333333vw 5.333333333333333vw;
}

.header .nav_item_home {
  margin: 0 0 10.666666666666667vw;
  color: var(--color-white);
  font-family: var(--font-family-jp);
  font-size: 4.266666666666667vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: block;
}

.header .nav_item_home a {
  color: var(--color-white);
  text-decoration: none;
  padding: 0 0 0 3.733333333333333vw;
  position: relative;
  display: inline-block;
}

.header .nav_item_home a::before {
  content: '';
  width: 3.2vw;
  height: 3.2vw;
  background-color: var(--color-white);
  -webkit-mask: var(--icon-home);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 1.6vw);
  left: 0;
}

.header .nav_item {
  margin: 0 0 5.333333333333333vw;
}

.header .nav_item button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  color: var(--color-white);
  pointer-events: none;
  border-bottom: 0.266666666666667vw solid var(--color-white-50);
  margin: 0 0 6.4vw;
  padding: 0 0 2.666666666666667vw;
}

.header .nav_list_secondary li {
  margin-bottom: 5.333333333333333vw;
}

.header .nav_list_secondary li a {
  font-size: 3.733333333333333vw;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
}


.header li.nav_item_other {
  padding: 10.666666666666667vw 0 0;
  border-top: 0.266666666666667vw solid var(--color-white-50);
}

.header li.nav_item_other a {
  font-size: 3.733333333333333vw;
  font-weight: 400;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
}

.header .btn_contact a {
  margin: 0 auto 10.666666666666667vw;
  width: 78.666666666666667vw;
  height: 17.066666666666667vw;
  background-color: var(--color-white);
  border-radius: 10.666666666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.266666666666667vw;
  position: relative;
}

.header .btn_contact a::before {
  content: '';
  width: 13.333333333333333vw;
  height: 8.533333333333333vw;
  border-radius: 4.266666666666667vw;
  border: 0.266666666666667vw solid var(--color-primary);
  position: absolute;
  top: calc(50% - 4.266666666666667vw);
  right: 4.266666666666667vw;
  pointer-events: none;
}

.header .btn_contact a::after {
  content: '';
  width: 4.266666666666667vw;
  height: 2.133333333333333vw;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon-arrow-link);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 1.066666666666667vw);
  right: 8.533333333333333vw;
  pointer-events: none;
}

/*==================================================
[sp]footer
================================================== */
.footer {
  border-top: 0.266666666666667vw solid var(--color-light-gray);
  padding: 14.933333333333333vw 0 0;
}

.footer .logo_container {
  display: block;
  margin: 0 0 10.666666666666667vw;
}

.footer .logo_container .logo {
  margin: 0 auto 8vw;
  display: block;
  width: 39.2vw;
  height: 10.666666666666667vw;
  background-color: var(--color-logo);
  -webkit-mask: var(--icon-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: relative;
}

.footer .logo_container .logo span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer .logo_container .link {
  width: 39.2vw;
  margin: 0 auto;
  color: var(--color-black);
  font-family: var(--font-family-jp);
  font-size: 4.266666666666667vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: block;
  text-align: center;
}

.footer .logo_container .link a {
  color: var(--color-black);
  text-decoration: none;
  padding: 0 0 0 3.733333333333333vw;
  position: relative;
  display: inline-block;
}

.footer .logo_container .link a::before {
  content: '';
  width: 3.2vw;
  height: 3.2vw;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon-home);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 1.6vw);
  left: 0;
}

.footer .main_nav p {
  margin-bottom: 6.4vw;
  padding-bottom: 4vw;
  font-size: 4.266666666666667vw;
  font-weight: 400;
  line-height: 1;
  color: var(--color-black);
  border-bottom: 0.266666666666667vw solid var(--color-light-gray);
}

.footer .main_nav .nav_list_primary {
  margin: 0 auto;
  padding: 0;
  width: 89.333333333333333vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer .main_nav .nav_list_primary .nav_item {
  margin-bottom: 5.333333333333333vw;
  padding: 0;
  width: 41.866666666666667vw;
}

.footer .nav_list_secondary li {
  margin-bottom: 5.333333333333333vw;
}

.footer .nav_list_secondary li a {
  font-size: 3.733333333333333vw;
  font-weight: 400;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
}

.footer .nav_list_tertiary {
  border-top: 0.266666666666667vw solid var(--color-light-gray);
  margin: 0 auto 14.933333333333333vw;
  padding-top: 10.666666666666667vw;
  width: 89.333333333333333vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer .nav_list_tertiary li {
  width: 41.866666666666667vw;
}

.footer .nav_list_tertiary li a {
  font-size: 3.733333333333333vw;
  font-weight: 400;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
}

.footer .copyright {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family-jp);
  font-size: 2.666666666666667vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10.666666666666667vw;
}

/* ========================================================================
[sp]page_top
========================================================================= */
.page_top {
  width: 10.666666666666667vw;
  height: 10.666666666666667vw;
  border-radius: 5.333333333333333vw;
  background: var(--color-primary);
  position: fixed;
  bottom: 14.933333333333333vw;
  right: 2.6666666666667vw;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition-normal);
  cursor: pointer;
}

.page_top::before {
  content: '';
  width: 3.2vw;
  height: 1.6vw;
  background-color: var(--color-white);
  -webkit-mask: var(--icon-up);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 0.8vw);
  left: calc(50% - 1.6vw);
}

.page_top span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page_top.active {
  opacity: 1;
  visibility: visible;
}


/* ========================================================================
[sp]container
========================================================================= */
.container {
  margin: 0 auto;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: url('../img/bg_sp.webp') no-repeat center top;
  background-size: 100% auto;
  padding: 0;
}

/* ========================================================================
[sp]breadcrumbs
========================================================================= */

.breadcrumbs {
  margin: 0 0 8.533333333333333vw;
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  order: 2;
}

.breadcrumbs li:first-child {
  margin-left: 5.333333333333333vw;
}

.breadcrumbs li:last-child {
  margin-right: 5.333333333333333vw;
}

.breadcrumbs li {
  white-space: nowrap;
  font-size: 3.733333333333333vw;
}

.breadcrumbs li.home {
  padding: 0 0 0 4.266666666666667vw;
  position: relative;
}

.breadcrumbs li.home::before {
  content: '';
  width: 3.2vw;
  height: 3.2vw;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon-home);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 1.6vw);
  left: 0;
}

.breadcrumbs li a {
  margin-right: 7.466666666666667vw;
  color: var(--color-primary);
  text-decoration: underline;
  position: relative;
}

.breadcrumbs li a::after {
  content: '';
  width: 1.6vw;
  height: 2.666666666666667vw;
  background-color: var(--color-solid-gray);
  -webkit-mask: var(--icon-breadcrumb-separator);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  top: calc(50% - 1.333333333333333vw);
  right: -4.533333333333333vw;
}

/*==================================================
[sp]main
================================================== */
.container main {
  margin: 0 auto 21.333333333333333vw;
  width: 89.333333333333333vw;
  padding: 10.666666666666667vw 0 0;
  order: 1;
}

main.main_top,
main.main_wide {
  width: 100%;
  max-width: 100%;
}

h1.page_title {
  margin: 0 0 10.666666666666667vw;
  color: var(--color-black);
  font-family: var(--font-family-jp);
  font-size: 8.533333333333333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

main.main_wide h1.page_title {
  margin: 0 auto 10.666666666666667vw;
  width: 89.333333333333333vw;
}

/*==================================================
pc
================================================== */
@media (min-width: 768px) {

  .sp_item {
    display: none;
  }

  .pc_item {
    display: block;
  }

  /*==================================================
  [pc]header
  ================================================== */
  .header {
    width: 100%;
    min-width: 960px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 200;
  }

  .header .logo a {
    display: block;
    width: 229px;
    height: 90px;
    position: relative;
  }

  .header .logo a::before {
    content: '';
    width: 169px;
    height: 46px;
    background-color: var(--color-logo);
    -webkit-mask: var(--icon-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 23px);
    left: calc(50% - 84.5px);
  }

  .header .btn_menu {
    display: none;
  }

  .header .contact_link_pc {
    display: block;
    width: 140px;
    height: 90px;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none;
    transition: var(--transition-normal);
  }

  .header .contact_link_pc:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
  }


  .header .nav_container {
    display: block;
    background: none;
    width: calc(100% - 369px);
    height: 90px;
    padding: 0;
    position: relative;
    position: static;
    transform: translateX(0);
  }

  .header .btn_menu_close {
    display: none;
  }

  .header .nav_container_inner {
    height: 90px;
    overflow: visible;
  }

  .header .main_nav {
    display: flex;
    align-items: flex-end;
  }

  .header .main_nav .nav_list_primary {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0;
    height: 90px;
  }

  .header .nav_item_home {
    display: none;
  }

  .header .nav_item {
    margin: 0 40px 0 0;
    position: relative;
  }

  .header .nav_item button {
    width: 4em;
    height: 40px;
    white-space: nowrap;
    display: inline-flex;
    justify-content: flex-start;
    color: var(--color-black);
    pointer-events: all;
    border-bottom: none;
    margin: 0;
    padding: 0;
  }

  .header .nav_item button:hover::after,
  .header .nav_item button.active::after {
    content: '';
    width: 4em;
    height: 4px;
    background-color: var(--color-primary);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

  .header .nav_list_secondary {
    display: none;
    background: var(--color-white);
    position: absolute;
    top: 40px;
    z-index: 100;
    transition: var(--transition-normal);
  }

  .header .nav_list_secondary.active {
    display: block;
  }


  .header .nav_list_secondary.nav_list_secondary01 {
    width: 220px;
  }

  .header .nav_list_secondary.nav_list_secondary02 {
    width: 140px;
  }

  .header .nav_list_secondary.nav_list_secondary03 {
    width: 396px;
  }

  .header .nav_list_secondary.nav_list_secondary04 {
    width: 220px;
  }

  .header .nav_list_secondary li {
    margin-bottom: 0;
    position: relative;
  }

  .header .nav_list_secondary li::after {
    content: '';
    width: 16px;
    height: 8px;
    background-color: var(--color-primary);
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    position: absolute;
    top: calc(50% - 4px);
    right: 20px;
    z-index: 100;
  }

  .header .nav_list_secondary li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    height: 60px;
    border-right: 1px solid var(--color-light-gray);
    border-bottom: 1px solid var(--color-light-gray);
    border-left: 1px solid var(--color-light-gray);
  }

  .header .nav_list_secondary li:first-child a {
    border-top: 1px solid var(--color-light-gray);
  }

  .header .nav_list_secondary li a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }


  .header li.nav_item_other {
    display: none;
  }

  .header .btn_contact a {
    display: none;
  }

  /*==================================================
  [pc]contact
  ================================================== */
  .contact {
    margin: 0 0 180px;
    padding: 56px 40px;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../img/bg_contact.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .contact_content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    height: 352px;
    background: var(--color-white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .contact_title {
    font-family: var(--font-family-en);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 32px;
  }

  .contact_text {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .contact_text p {
    font-family: var(--font-family-jp);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-black);
    margin-bottom: 0;
  }

  .contact .btn_contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 580px;
    height: 100px;
    border-radius: 50px;
    padding: 0;
    font-family: var(--font-family-jp);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-white);
    position: relative;
    transition: var(--transition-normal);
    border: 1px solid transparent;
    position: relative;
  }

  .contact .btn_contact a {
    display: block;
    width: 580px;
    height: 100px;
    border-radius: 50px;
    background: var(--color-white);
    color: var(--color-white);
    transition: var(--transition-normal);
    opacity: 1;
  }

  .contact .btn_contact a:hover {
    background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 100%);
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
  }

  .contact .btn_contact a .text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 580px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: var(--color-white);
  }

  .contact .btn_contact:hover .text {
    color: var(--color-primary);
  }

  .contact .btn_contact .bg {
    width: 580px;
    height: 100px;
    border-radius: 50px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    pointer-events: none;
    z-index: 10;
    transition: var(--transition-normal);
    opacity: 1;
  }

  .contact .btn_contact:hover .bg {
    opacity: 0;
  }

  .contact .btn_contact::before {
    content: '';
    width: 50px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid var(--color-white);
    position: absolute;
    top: calc(50% - 16px);
    right: 34px;
    z-index: 100;
    pointer-events: none;
    transition: var(--transition-normal);
    transform: translateX(0px);
  }

  .contact .btn_contact:hover::before {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    transform: translateX(8px);
  }

  .contact .btn_contact::after {
    content: '';
    width: 14px;
    height: 6px;
    background-color: var(--color-white);
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 3px);
    right: 50px;
    pointer-events: none;
    transition: var(--transition-normal);
    transform: translateX(0px);
    z-index: 100;
  }

  .contact .btn_contact:hover::after {
    transform: translateX(8px);
  }

  /*==================================================
  [pc]footer
  ================================================== */
  .footer {
    border-top: 1px solid var(--color-light-gray);
    padding: 0;
  }

  .footer_content {
    margin: 0 auto;
    padding: 50px 40px;
    max-width: 1244px;
    min-width: 1040px;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }

  .footer .logo_container {
    display: block;
    margin: 0 80px 40px 0;
  }

  .footer .logo_container .logo {
    margin: 0 auto 30px;
    display: block;
    width: 169px;
    height: 46px;
    background-color: var(--color-logo);
    -webkit-mask: var(--icon-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: relative;
  }

  .footer .logo_container .link {
    width: auto;
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-family-jp);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    display: block;
    text-align: left;
  }

  .footer .logo_container .link a {
    color: var(--color-black);
    text-decoration: none;
    padding: 0 0 0 20px;
    position: relative;
    display: inline-block;
  }

  .footer .logo_container .link a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  .footer .logo_container .link a::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    -webkit-mask: var(--icon-home);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
  }

  .footer .main_nav {
    display: flex;
  }

  .footer .main_nav p {
    margin-bottom: 24px;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-light-gray);
  }

  .footer .main_nav .nav_list_primary {
    margin: 0;
    padding: 0;
    width: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    list-style: none;
  }

  .footer .main_nav .nav_list_primary .nav_item {
    margin: 0 30px 20px 0;
    width: auto;
  }

  .footer .main_nav .nav_list_primary .nav_item01 {
    margin: 0 30px 40px 0;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .footer .main_nav .nav_list_primary .nav_item02 {

    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .footer .main_nav .nav_list_primary .nav_item03 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .footer .main_nav .nav_list_primary .nav_item04 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  .footer .nav_list_secondary li {
    margin-bottom: 16px;
  }

  .footer .nav_list_secondary li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
    text-decoration: none;
  }

  .footer .nav_list_secondary li a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  .footer .nav_list_tertiary {
    border-top: none;
    margin: 0 auto;
    padding-top: 0;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
  }

  .footer .nav_list_tertiary li {
    margin-bottom: 16px;
    width: auto;
  }

  .footer .nav_list_tertiary li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
    text-decoration: none;
  }

  .footer .nav_list_tertiary li a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  .footer .copyright {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family-jp);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
  }


  /* ========================================================================
  [pc]page_top
  ========================================================================= */
  .page_top {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--color-primary);
    position: fixed;
    bottom: 60px;
    right: 60px;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-normal);
    cursor: pointer;
  }

  .page_top::before {
    content: '';
    width: 16px;
    height: 8px;
    background-color: var(--color-white);
    -webkit-mask: var(--icon-up);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 8px);
  }

  /* ========================================================================
  [pc]container
  ========================================================================= */
  .container {
    width: 100%;
    display: block;
    background: url('../img/bg_pc.webp') no-repeat center top;
    background-size: 100% auto;
    padding: 24px 0 0;
  }

  /* ========================================================================
  [pc]breadcrumbs
  ========================================================================= */

  .breadcrumbs {
    margin: 0 auto 32px;
    width: auto;
    width: 960px;
    order: 1;
  }

  .breadcrumbs li:first-child {
    margin-left: 0;
  }

  .breadcrumbs li:last-child {
    margin-right: 0;
  }

  .breadcrumbs li {
    font-size: 14px;
  }

  .breadcrumbs li.home {
    padding: 0 0 0 16px;
    position: relative;
  }

  .breadcrumbs li.home::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    -webkit-mask: var(--icon-home);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
  }

  .breadcrumbs li a {
    margin-right: 28px;
    color: var(--color-primary);
    text-decoration: underline;
    position: relative;
  }

  .breadcrumbs li a::after {
    content: '';
    width: 6px;
    height: 10px;
    background-color: var(--color-solid-gray);
    -webkit-mask: var(--icon-breadcrumb-separator);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 5px);
    right: -17px;
  }



  /*==================================================
  [pc]main
  ================================================== */
  .container main {
    margin: 0 auto 120px;
    padding: 0;
    width: 960px;
    order: 2;
  }

  main.main_top,
  main.main_wide {
    width: 100%;
    max-width: 100%;
  }

  h1.page_title {
    margin: 0 0 40px;
    color: var(--color-black);
    font-family: var(--font-family-jp);
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  main.main_wide h1.page_title {
    margin: 0 auto 40px;
    width: 960px;
  }

}