https://www.ipsa.co.jp/mobify/bundle/117/pages-micro-cms-column-top.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[4851],{12347:(e,t,a)=>{a.d(t,{A:()=>g});var r=a(64180),i=a(77810),n=a(86400),l=a(36287),o=a(40133),s=a(87916),c=a(75826),d=a.n(c),m=a(94615);const p=({article:e,sizeVariant:t="default",layoutVariant:a="horizontal",isContentTop:c=!1,bottom:d={base:"0",md:"0"}})=>{const{eyecatch:p,subCategoryId:g,categoryId:h,title:u,id:f}=e,[x,b]=(0,i.useState)(!1),y=m.sU?(0,m.sU)("static/img/blog_notImage.png"):"/static/img/blog_notImage.png",w=null!=p&&p.url?p.url:y,E=(null==p?void 0:p.alt)||"blog_Image",v="large"===t?{width:{base:"100%",md:"100%"},maxWidth:{base:"320px",md:"320px"},height:{base:"100%",md:"100%"},maxHeight:{base:"320px",md:"320px"},fontSize:{base:"2.8986vw",md:"12px"},titleFontSize:{base:"4.8302vw",md:"20px"},spacingBetweenImageAndCategory:{base:"5.7971vw",md:"24px"}}:c?{width:{base:"160px",md:"160px"},height:{base:"160px",md:"160px"},fontSize:{base:"12px",md:"12px"},titleFontSize:{base:"18px",md:"18px"},spacingBetweenImageAndCategory:"16px"}:{width:{base:"100%",md:"100%"},maxWidth:{base:"44.4444vw",md:"184px"},height:{base:"100%",md:"100%"},maxHeight:{base:"44.4444vw",md:"184px"},fontSize:{base:"2.8986vw",md:"12px"},titleFontSize:{base:"3.8648vw",md:"16px"},spacingBetweenImageAndCategory:{base:"3.8648vw",md:"16px"}},S="vertical"===a?{direction:"row",alignItems:"flex-start",width:v.width,height:v.height}:{direction:"column",alignItems:"center",width:"100%",height:"auto"},W=(0,i.useRef)(null);return i.createElement(n.B,(0,r.A)({as:"dl",direction:S.direction,alignSelf:"stretch",spacing:v.spacingBetweenImageAndCategory,marginBottom:d},!c&&{width:S.width,height:S.height}),i.createElement(n.B,{as:"dt",width:v.width,height:v.height},i.createElement(s.A,{to:`/column/article/${f}`},i.createElement(l.az,{width:"100%",height:"100%",onMouseOver:()=>b(!0),onMouseLeave:()=>b(!1),style:{transform:`scale(${x?.95:1})`,transformOrigin:"center center",transition:"transform 0.5s"},overflow:"hidden"},i.createElement("img",{src:w,alt:E,style:{width:"100%",height:"100%",objectFit:"cover",transform:`scale(${x?1.1:1})`,transformOrigin:"center center",transition:"transform 0.5s"}})))),i.createElement(n.B,{as:"dd",justify:"flex-start",align:"flex-start",flex:"1"},i.createElement(s.A,{to:`/column/${h.id}/${g.id}`,_hover:{textDecoration:"none"}},i.createElement(n.B,{paddingX:c?"8px":{base:"2.8986vw",md:"12px"},paddingY:c?"6px":{base:"1.9324vw",md:"8px"},borderRadius:"4px",direction:"row",justify:"center",align:"center",spacing:c?"10px":{base:"2.4156vw",md:"10px"},borderColor:"#969696",borderWidth:"1px",background:"#FFFFFF",style:{display:"flex",alignItems:"center"},_hover:{opacity:.5},alignItems:"center"},i.createElement(o.E,{fontFamily:'"MFW-HiraKakuProN-W5", sans-serif',lineHeight:"1.33",fontSize:v.fontSize,color:"#323232",textDecoration:"none"},g.title))),i.createElement(o.E,{as:"h3",margin:0,width:"100%"},i.createElement(s.A,{to:`/column/article/${f}`,_hover:{textDecoration:"none"},style:{display:"block",width:"100%",height:"100%",color:"#323232"},ref:W,onMouseOver:()=>b(!0),onMouseLeave:()=>b(!1)},i.createElement(o.E,{fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:v.titleFontSize,height:"large"===t?{base:"20.5314vw",md:"85px"}:c?{base:"20.2899vw",md:"78px"}:{base:"16.9082vw",md:"75px"},alignSelf:"stretch",display:"-webkit-box",sx:{WebkitLineClamp:3,WebkitBoxOrient:"vertical",overflow:"hidden"}},u)))))};p.propTypes={article:d().shape({eyecatch:d().shape({url:d().string,alt:d().string}),subCategoryId:d().shape({id:d().any,title:d().string}),categoryId:d().shape({id:d().any}),title:d().string,id:d().any}).isRequired,sizeVariant:d().oneOf(["default","large"]),layoutVariant:d().oneOf(["horizontal","vertical"]),isContentTop:d().bool,bottom:d().shape({base:d().string,md:d().string})};const g=p},88977:(e,t,a)=>{a.r(t),a.d(t,{default:()=>z});var r=a(10939),i=a(28407),n=a(77810),l=a(49498),o=a(12347),s=a(54019),c=a(36287),d=a(86400),m=a(40133),p=a(51147),g=a(87916),h=a(94615),u=a(2219),f=a(34692),x=a(41863),b=a(4026),y=a(64965),w=a(50054),E=(a(50642),a(63325)),v=a(90150),S=(a(1583),a(43535),a(26709),a(29188)),W=a(17015);function A(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function F(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};

1t%2?A(Object(a),!0).forEach((function(t){(0,r.A)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):A(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}const z=()=>{const{formatMessage:e}=(0,f.A)(),{canonical_url:t}=(0,b.getConfig)(),a=(0,y.zy)(),{data:r,isLoading:A,error:z}=(0,S.I)({queryKey:["microcms-recommend-articles"],queryFn:()=>(0,l.W)("/api/v1/article?filters=recommendFlag[equals]true&orders=-publishedAt&limit=8"),enabled:W.S$||"undefined"!=typeof window}),{data:B,isLoading:_,error:O}=(0,S.I)({queryKey:["microcms-parentCategories"],queryFn:()=>(0,l.W)("/api/v1/categories?filters=categoryId[not_exists]&orders=-publishedAt"),enabled:W.S$||"undefined"!=typeof window}),{data:I,isLoading:M,error:H}=(0,S.I)({queryKey:["microcms-category-articles",B],queryFn:(P=(0,i.A)((function*(){if(null==B||!B.contents)return[];const e=yield Promise.all(B.contents.map(function(){var e=(0,i.A)((function*(e){const t=`/api/v1/article?filters=categoryId[equals]${e.id}&orders=-publishedAt&limit=4`,a=yield(0,l.W)(t);return F(F({},e),{},{articles:a.contents||[]})}));return function(t){return e.apply(this,arguments)}}()));return e})),function(){return P.apply(this,arguments)}),enabled:!!B&&(W.S$||"undefined"!=typeof window)});var P;if(z||O||H)throw new u.HTTPError(500,"error occurred in fetching microCMS API ");const k=(null==r?void 0:r.contents)||[],j=I||[],C=0===k.length&&j.every((e=>0===e.articles.length)),D={title:e({defaultMessage:[{type:0,value:"肌悩みお役立ちコラム"}],id:"column.seo.topTitle"}),description:e({defaultMessage:[{type:0,value:"肌悩み解決方法やスキンケアの方法など、肌に関するお役立ちコラムです。あらゆる肌悩みでお困りの方に日々の生活の中で実践できる肌ケアの方法を肌悩みや肌タイプごとに紹介しています。"}],id:"column.seo.topDescription"}),canonical:`${t.top}${a.pathname}`};return A||_||M?n.createElement(s.E,{height:"75vh",width:"100%"}):n.createElement(n.Fragment,null,n.createElement(w.A,{title:D.title,de

1scription:D.description,canonical:D.canonical}),n.createElement(c.az,{width:"100%",px:"17px"},n.createElement(c.az,{pt:"24px",ml:{base:"0px",md:"clamp(0px, calc((100% - 1082px) / 2), 125px)"},mr:"auto",maxWidth:"1082px",width:"100%"},n.createElement(d.B,{as:"ol",direction:"row",align:"center",spacing:"4px",alignSelf:"stretch",listStyleType:"none",m:0,p:0},n.createElement(c.az,{as:"li",display:"flex",alignItems:"center"},n.createElement(g.A,{to:"/",style:{display:"flex",alignItems:"center",textDecoration:"none"}},n.createElement(m.E,{className:"breadcrumb-link",fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:"12px",color:"#5B5B5B"},n.createElement(x.A,{defaultMessage:[{type:0,value:"IPSA"}],id:"column.home"})))),n.createElement(c.az,{as:"li",display:"flex",alignItems:"center"},n.createElement(p._,{src:(0,h.sU)("static/img/arrow_breadcrumb.svg"),alt:"arrow_breadcrumb",w:"8px",h:"8px"})),n.createElement(c.az,{as:"li",display:"flex",alignItems:"center"},n.createElement(m.E,{fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:"12px",color:"#5B5B5B"},n.createElement(x.A,{defaultMessage:[{type:0,value:"肌悩み解決コラム"}],id:"column.top.title"}))))),n.createElement(d.B,{paddingTop:{base:"9.6618vw",md:"64px"},paddingBottom:{base:"15.4589vw",md:"80px"},justify:"center",align:"center",alignSelf:"stretch"},n.createElement(m.E,{as:"h1",fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"0.64",fontSize:{base:"6.5217vw",md:"28px"},color:"#323232",textAlign:"center",style:{whiteSpace:"nowrap"}},n.createElement(x.A,{defaultMessage:[{type:0,value:"肌悩み解決コラム"}],id:"column.top.title"}))),C?n.createElement(d.B,{paddingX:{base:"4.1063vw",md:"142px"},paddingBottom:{base:"15.4589vw",md:"80px"},justify:"center",align:"center",spacing:{base:"15.4589vw",md:"80px"},alignSelf:"stretch"},n.createElement(m.E,{fontFamily:'"MFW-HiraKakuProN-W5", sans-serif',lineHeight:"1.7",fontSize:{base:"3.6232vw",md:"15px"},color:"#323232",textAlign:"center"},n.createElement(x.A,{defaultMessage:[{type:0,value:"こちらの記事はただいま準備中です。"}],id:"column.top.preparation"}),n.createElement("br",null),n.createElement(x.A,{defaultMessage:[{type:0,value:"公開までもうしばらくお待ちください。"}],id:"column.wait.release"}))):n.createElement(n.Fragment,null,n.createElement(d.B,{className:"recommend-column",mx:"auto",maxWidth:"1082px",width:"100%",spacing:"40px",overflow:"hidden",alignSelf:"stretch"},n.createElement(c.az,{width:"100%",maxWidth:"1082px"},n.createElement(d.B,{spacing:"4px",mb:{base:"9.6618vw",md:"40px"}},n.createElement(m.E,{as:"h2",fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:"24px",color:"#323232"},n.createElement(x.A,{defaultMessage:[{type:0,value:"おすすめ記事"}],id:"recommend.column"})),n.createElement(m.E,{fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.33",fontSize:"12px",color:"#777777"},n.createElement(x.A,{defaultMessage:[{type:0,value:"Recommend"}],id:"recommend.column.Eng"}))),n.createElement(E.RC,{navigation:!1,modules:[v.AV,v.Ze],className:"swiper-pointer-events swiper-backface-hidden",centeredSlides:!1,centerInsufficientSlides:!1,scrollbar:{draggable:!0},breakpoints:{0:{slidesPerView:1.2,spaceBetween:24},769:{slidesPerView:3.15625,spaceBetween:24}},watchSlidesProgress:!0,style:{width:"100%"}},k.map((e=>n.createElement(E.qr,{key:e.id,style:{minWidth:0,width:"100%",maxWidth:"320px"}},n.createElement(o.A,{article:e,sizeVariant:"large",isContentTop:!0,bottom:{base:"9.6618vw",md:"44px"}}))))))),n.createElement(c.az,{height:{base:"15.4589vw",md:"80px"}}),j.filter((e=>e.articles&&e.articles.length>0)).map((e=>n.createElement(d.B,{key:e.id,justify:"flex-start",align:"center",spacing:"24px",alignSelf:"stretch",mx:"auto",maxWidth:"1082px",width:"100%",paddingBottom:{base:"15.4589vw",md:"80px"}},n.createElement(d.B,{direction:"row",justify:"flex-start",align:"center",spacing:"12px",alignSelf:"stretch"},n.createElement(m.E,{as:"h2",fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:{base:"6.5217vw",md:"28px"},color:"#323232",flex:"1"},e.title)),n.createElement(d.B,{justify:"flex-start",align:"center",spacing:"32px",alignSelf:"stretch"},e.articles.map((e=>n.createElement(o.A,{key:e.id,article:e,layoutVariant:"vertical",isContentTop:!0})))),n.createElement(g.A,{to:`/column/${e.id}`,style:{textDecoration:"none"}},n.createElement(d.B,{paddingX:"16px",paddingY:"20px",borderRadius:"4px",direction:"row",justify:"center",align:"flex-start",spacing:"10px",borderColor:"#323232",borderStartWidth:"1px",borderEndWidth:"1px",borderTopWidth:"1px",borderBottomWidth:"1px",width:"360px",maxWidth:"100%",background:"rgba(255, 255, 255, 0.9)",backdropFilter:"blur(7px)",cursor:"pointer",transition:"opacity 0.3s",_hover:{opacity:.5}},n.createElement(d.B,{width:"25.19px",height:"24px"}),n.createElement(m.E,{fontFamily:'"MFW-HiraKakuProN-W3", sans-serif',lineHeight:"1.5",fontSize:"16px",color:"#323232",width:"243.26px",height:"24px",maxWidth:"100%",textAlign:"center"},n.createElement(x.A,{defaultMessage:[{type:1,value:"category"},{type:0,value:"の記事一覧へ"}],id:"column.category.button",values:{category:e.title}}

1)),n.createElement(c.az,{position:"relative",width:"29.39px",height:"28px"},n.createElement(p._,{src:(0,h.sU)("static/img/blog_category_arrow.svg"),alt:"blog_category_arrow",w:"17px",h:"28px",position:"absolute",top:"50%",left:"50%",transform:"translate(-90%, -50%)"}),n.createElement(c.jl,{size:"24px",borderColor:"#323232",borderStartWidth:"1px",borderEndWidth:"1px",borderTopWidth:"1px",borderBottomWidth:"1px",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}),n.createElement(c.az,null))))))))))}}}]);