{"version":3,"sources":["webpack:///./src/components/page-title-heading.js","webpack:///./src/templates/online-lesson.js","webpack:///./src/components/img-sections.js"],"names":["PageTitleHeading","title","children","replace","className","dangerouslySetInnerHTML","__html","withPreview","pageData","data","prismicOnlineLesson","pageTitle","text","sections","body","map","section","heading","primary","img","fluid","section_img","alt","html","breadPaths","sectionData","ImgSections","i","odd","even","className_section","className_imgWrapper","key"],"mappings":"2KAEMA,EAAmB,SAAC,GAAkB,IACtCC,EADqC,EAAfC,SACLC,QAAQ,OAAQ,kCACrC,OACE,wBACEC,UAAU,8EACVC,wBAAyB,CACvBC,OAAQL,M,wBC2DDM,uBA7BF,SAAC,GAAc,IACpBC,EADmB,EAAXC,KACQC,oBAAoBD,KACpCE,EAAYH,EAASP,MAAMW,KAC7BC,EAAWL,EAASM,KAAKC,KAAI,SAAAC,GAC/B,MAAO,CACLC,QAASD,EAAQE,QAAQD,QAAQL,KACjCO,IAAK,CACHC,MAAOJ,EAAQE,QAAQG,YAAYD,OAAS,KAC5CE,IAAKN,EAAQE,QAAQG,YAAYC,KAAO,IAE1CV,KAAMI,EAAQE,QAAQN,KAAKW,SAIzBC,EAAa,CACjB,CACEZ,KAAMD,IAIV,OACE,kBAAC,IAAD,CAAQa,WAAYA,GAClB,kBAAC,IAAD,CAAKvB,MAAOU,IACZ,kBAAC,EAAD,6BACA,kBAAC,IAAD,CAAac,YAAaZ,S,kCC9DhC,0DAuFea,IAnFK,SAAC,GAAqB,IAAnBD,EAAkB,EAAlBA,YAqCrB,OAAOA,EAAYV,KAAI,SAACC,EAASW,GAC/B,IAAMC,EAAMD,EAAI,GAAM,EAChBE,GAAQD,EACRE,EAAiB,sDACrBD,EAAO,WAAa,IAEhBE,EAAoB,oBACxBF,EAAO,oBAAsB,IAK/B,OACE,yBAAKG,IAAKL,GACR,yBAAKvB,UAAU,mDACf,6BAASA,UAAW0B,GAClB,yBAAK1B,UAAU,uDACb,yBAAKA,UAAU,iEACZwB,EApDT,0BAAMxB,UAAU,mCACd,0BAAMA,UAAU,qFAChB,0BAAMA,UAAU,8GAgBlB,0BAAMA,UAAU,mCACd,0BAAMA,UAAU,oFAChB,0BAAMA,UAAU,iHAiCTY,EAAQC,SAAW,4BAAKD,EAAQC,UAEnC,yBACEb,UAAU,oBACVC,wBAbD,CAAEC,OAAQU,EAAQJ,SAgBrB,yBAAKR,UAAU,gDACb,yBAAKA,UAAU,mFACZY,EAAQG,KACP,yBAAKf,UAAW2B,GACd,kBAAC,IAAD,CACE3B,UAAU,yDACVgB,MAAOJ,EAAQG,IAAIC,MACnBE,IAAKN,EAAQG,IAAIG,QAKxBM,EA/DP,oCACE,0BAAMxB,UAAU,0GAChB,0BAAMA,UAAU,6GAgBlB,oCACE,0BAAMA,UAAU,oFAChB,0BAAMA,UAAU","file":"component---src-templates-online-lesson-js-6fe4efbd9a3e1e39a136.js","sourcesContent":["import React from \"react\"\n\nconst PageTitleHeading = ({ children }) => {\n  var title = children.replace(/\\\\n/g, '<br class=\"block lg:hidden\" />')\n  return (\n    <h1\n      className=\"text-3xl md:text-4xl lg:text-5xl leading-tight font-bold py-2gap lg:py-1col\"\n      dangerouslySetInnerHTML={{\n        __html: title,\n      }}\n    ></h1>\n  )\n}\nexport { PageTitleHeading }\n","import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport ImgSections from \"../components/img-sections\"\nimport { withPreview } from \"gatsby-source-prismic\"\nimport { PageTitleHeading } from \"../components/page-title-heading\"\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\n\nexport const query = graphql`\n  query OnlineLessonDetailPageQuery($uid: String!) {\n    prismicOnlineLesson(uid: { eq: $uid }) {\n      data {\n        title {\n          text\n        }\n        body {\n          ... on PrismicOnlineLessonBodyContents {\n            primary {\n              text {\n                html\n              }\n              section_img {\n                alt\n                fluid(maxWidth: 400) {\n                  ...GatsbyPrismicImageFluid\n                }\n              }\n              heading {\n                text\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\nconst Page = ({ data }) => {\n  const pageData = data.prismicOnlineLesson.data\n  const pageTitle = pageData.title.text\n  let sections = pageData.body.map(section => {\n    return {\n      heading: section.primary.heading.text,\n      img: {\n        fluid: section.primary.section_img.fluid || null,\n        alt: section.primary.section_img.alt || \"\",\n      },\n      text: section.primary.text.html,\n    }\n  })\n\n  const breadPaths = [\n    {\n      text: pageTitle,\n    },\n  ]\n\n  return (\n    <Layout breadPaths={breadPaths}>\n      <SEO title={pageTitle} />\n      <PageTitleHeading>ドイツ美大受験準備\\nオンラインクラス</PageTitleHeading>\n      <ImgSections sectionData={sections} />\n    </Layout>\n  )\n}\n\nexport default withPreview(Page)\n","import React from \"react\"\nimport \"./img-sections.css\"\nimport Img from \"gatsby-image\"\n\nconst ImgSections = ({ sectionData }) => {\n  const h2OverBorderLeft = () => {\n    return (\n      <span className=\"hidden lg:block h-3gap relative\">\n        <span className=\"absolute right-0 top-0 w-screen h-1gap border border-black border-t-1gap xl:mr-0\"></span>\n        <span className=\"hidden xl:block absolute right-0 top-0 border-black border-1gap rounded-full -mt-1/2gap mr-0 xl:-mr-1gap\"></span>\n      </span>\n    )\n  }\n\n  const sideImgBorderRight = () => {\n    return (\n      <>\n        <span className=\"hidden xl:block absolute left-0 top-0 ml-2gap xl:ml-1col1gap h-full border border-black border-l-1gap\"></span>\n        <span className=\"hidden lg:block absolute left-0 top-0 ml-2gap xl:ml-1col1gap w-screen border border-black border-t-1gap\"></span>\n      </>\n    )\n  }\n\n  const h2OverBorderRight = () => {\n    return (\n      <span className=\"hidden lg:block h-3gap relative\">\n        <span className=\"absolute left-0 top-0 w-screen h-1gap border border-black border-t-1gap xl:ml-0\"></span>\n        <span className=\"hidden xl:block absolute left-0 top-0 border-black border-1gap rounded-full -mt-1/2gap -ml-1gap xl:-ml-1gap\"></span>\n      </span>\n    )\n  }\n\n  const sideImgBorderLeft = () => {\n    return (\n      <>\n        <span className=\"hidden xl:block absolute right-0 top-0 h-full border border-black border-r-1gap\"></span>\n        <span className=\"hidden lg:block absolute right-0 top-0 w-screen border border-black border-t-1gap\"></span>\n      </>\n    )\n  }\n\n  return sectionData.map((section, i) => {\n    const odd = i % 2 === 0\n    const even = !odd\n    const className_section = `flex -ml-2gap xl:-ml-1col1gap flex-col md:flex-row${\n      even ? \"-reverse\" : \"\"\n    }`\n    const className_imgWrapper = `over:w-5col4gap ${\n      even ? \"over:-ml-1col1gap\" : \"\"\n    }`\n    const className_richText = () => {\n      return { __html: section.text }\n    }\n    return (\n      <div key={i}>\n        <div className=\"border-black border-t-1/2gap pt-1gap lg:hidden\"></div>\n        <section className={className_section}>\n          <div className=\"flex-grow pl-2gap xl:pl-1col1gap pb-1gap lg:pb-1col\">\n            <div className=\"text-2xl lg:text-4xl leading-tight relative pb-1gap font-bold\">\n              {odd ? h2OverBorderLeft() : h2OverBorderRight()}\n              {section.heading && <h2>{section.heading}</h2>}\n            </div>\n            <div\n              className=\"yw-RichTextSlices\"\n              dangerouslySetInnerHTML={className_richText()}\n            ></div>\n          </div>\n          <div className=\"flex-grow-0 hidden sm:block relative pb-2gap\">\n            <div className=\"pl-2gap xl:pl-1col1gap w-full md:w-2col3gap lg:w-3col2gap xl:w-5col4gap mx-auto\">\n              {section.img && (\n                <div className={className_imgWrapper}>\n                  <Img\n                    className=\"block w-full border-black border-1/2gap lg:border-1gap\"\n                    fluid={section.img.fluid}\n                    alt={section.img.alt}\n                  />\n                </div>\n              )}\n            </div>\n            {odd ? sideImgBorderRight() : sideImgBorderLeft()}\n          </div>\n        </section>\n      </div>\n    )\n  })\n}\n\nexport default ImgSections\n"],"sourceRoot":""}