Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <ul id="wp-rest" class="wp-rest">
  <li id="rest-loading" class="rest-loading">
    <p class="loading-title passion">REST-API</p>
  </li>
</ul>
<link rel="stylesheet" type="text/css" media="all" href="https://spc-jpn.co.jp/wp-content/themes/2nd-penguin2016/assets/css/page.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>

              
            
!

CSS

              
                html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}@media screen and (min-width: 769px){.sp{display:none !important}.pc-hide{display:none}}@media screen and (max-width: 768px){.pc{display:none !important}.sp-hide{display:none}}html{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%}*,*:before,*:after{-moz-box-sizing:inherit;-webkit-box-sizing:inherit;box-sizing:inherit}img{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;max-width:100%;height:auto;vertical-align:middle}a{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s}b,strong{font-weight:700}body,button,input,select,textarea{font-family:"NotoSansCJKjp","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","sans-serif";word-wrap:break-word}form ::-webkit-input-placeholder{color:#C6C6C6}form :-moz-placeholder{opacity:1;color:#C6C6C6}form ::-moz-placeholder{opacity:1;color:#C6C6C6}form :-ms-input-placeholder{color:#C6C6C6}table{width:100%;max-width:100%}table td,table th{min-height:1em}table th{font-weight:700;word-wrap:break-word;word-break:break-all}table td{word-wrap:break-word;word-break:break-all}table p:not([class]):not(:last-child){margin-bottom:1em}table.fix{table-layout:fixed}table.th-lock th{word-wrap:normal;word-break:keep-all}@media screen and (max-width: 768px){table td,table th{word-wrap:break-word;word-break:break-all}}input[type="button"],input[type="submit"]{-webkit-appearance:none}input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],textarea,select{outline:none}a,area,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],button,select,label{cursor:pointer}input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],textarea{margin:.1em;width:100%}input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="url"]:focus,textarea:focus{-moz-box-shadow:1px 1px 0 0 #c5c7cb inset;-webkit-box-shadow:1px 1px 0 0 #c5c7cb inset;box-shadow:1px 1px 0 0 #c5c7cb inset}input[type="text"].w30,input[type="email"].w30,input[type="password"].w30,input[type="search"].w30,input[type="tel"].w30,input[type="url"].w30,textarea.w30{width:30%}input[type="text"].w40,input[type="email"].w40,input[type="password"].w40,input[type="search"].w40,input[type="tel"].w40,input[type="url"].w40,textarea.w40{width:40%}input[type="text"].w50,input[type="email"].w50,input[type="password"].w50,input[type="search"].w50,input[type="tel"].w50,input[type="url"].w50,textarea.w50{width:50%}input[type="text"].w50,input[type="email"].w50,input[type="password"].w50,input[type="search"].w50,input[type="tel"].w50,input[type="url"].w50,textarea.w50{width:60%}.u-list>li{width:98%;margin-left:2%;list-style-type:disc}.o-list>li{width:98%;margin-left:2%;list-style-type:decimal}.table-list{display:table;width:100%}.table-list>li{display:table-cell;vertical-align:top}.table-list.fix{table-layout:fixed}@media screen and (max-width: 768px){.table-list.res{display:block;width:100%}.table-list.res>li{display:block}}.inline-list{font-size:0;letter-spacing:-.4em}.inline-list>li{display:inline-block;letter-spacing:normal;vertical-align:top;font-size:1.6rem}.bnr-list>li>a{display:block}.bnr-list>li>a img{display:block;width:100%}@media screen and (max-width: 768px){.bnr-list>li{float:none;margin-left:0;margin-right:0}}@media screen and (max-width: 768px){.table-list.spshift>li,.inline-list.spshift>li{display:block;float:none;width:100%}}@media screen and (min-width: 769px){a.oc,.oc a{display:inline-block;vertical-align:bottom}a.oc img,.oc a img{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s}a.oc:hover img,.oc a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7}}.youtube-iframe{position:relative;width:100%;padding-top:56.25%}.youtube-iframe iframe{position:absolute;top:0;right:0;width:100% !important;height:100% !important}.accordion{-moz-transform:rotateX(0);-ms-transform:rotateX(0);-webkit-transform:rotateX(0);transform:rotateX(0)}.accordion .btn{cursor:pointer}.accordion .ac-body{max-height:0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}.accordion .ac-body.active{max-height:999999px;-moz-transform:rotateX(0);-ms-transform:rotateX(0);-webkit-transform:rotateX(0);transform:rotateX(0)}.l-btn{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;display:inline-block;position:relative;border:none;width:100%;text-align:center;text-decoration:none;line-height:1;z-index:1;padding:1em;vertical-align:bottom;overflow:hidden}.l-btn.mat{padding:0}.l-btn.mat input[type="button"],.l-btn.mat input[type="submit"],.l-btn.mat button{display:inline-block;padding:1em;width:100%;font-size:inherit;font-weight:inherit;color:inherit;border:0;background:transparent}.l-btn .sub{font-size:1.2rem}.l-btn:before{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;content:"";display:inline-block;position:absolute;top:0;z-index:-1;width:100%;height:100%;background:none}.l-btn:not(.rivers):before{left:-100%}.l-btn.rivers:before{right:-100%}.l-btn .left-icon,.l-btn .right-icon{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;position:absolute;top:50%;margin-top:-.5em}.l-btn .right-icon{right:.8em}.l-btn .left-icon{left:.8em}.l-btn:hover{text-decoration:none}.l-btn:hover:not(.rivers):before{left:0}.l-btn:hover.rivers:before{right:0}.l-btn:hover .right-icon:not(.stay){right:.5em}.l-btn:hover .left-icon:not(.stay){left:.5em}.l-btn.sharp{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.l-btn.unsharp{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.l-btn.white{border:solid 1px #FFF;color:#000;background-color:#FFF}.l-btn.white:before,.l-btn.white:hover{color:#FFF;background-color:#000}.l-btn.black{border:solid 1px #000;color:#FFF;background-color:#000}.l-btn.black:before,.l-btn.black:hover{color:#000;background-color:#FFF}.l-btn.w-line{color:#FFF;border:solid 1px #FFF}.l-btn.w-line:before,.l-btn.w-line:hover{color:#000;background-color:#FFF}.l-btn.b-line{color:#000;border:solid 1px #000}.l-btn.b-line:before,.l-btn.b-line:hover{color:#FFF;background-color:#000}.l-btn.w220{max-width:220px}.l-btn.w250{max-width:250px}.l-btn.w300{max-width:300px}.l-btn.w360{max-width:300px}@media screen and (max-width: 768px){.sp-table tbody tr,.sp-table tbody td,.sp-table tbody th{display:inline-block;width:100%}.table-wrap{overflow-x:scroll}}.is-none{display:none !important}.js-hide,.is-hide{display:none}.te-center{text-align:center}.te-right{text-align:right}.te-left{text-align:left}@media screen and (min-width: 769px){.te-center-pc{text-align:center}.te-right-pc{text-align:right}.te-left-pc{text-align:left}}@media screen and (max-width: 768px){.te-center-sp{text-align:center}.te-right-sp{text-align:right}.te-left-sp{text-align:left}}.te-bold,.is-bold{font-weight:700}.te-bold.w500,.is-bold.w500{font-weight:500}.te-bold.w900,.is-bold.w900{font-weight:900}.is-false,.a-false{pointer-events:none}a.a-nolink,.a-nolink a{pointer-events:none;text-decoration:none !important}a.a-ulink,.a-ulink a{text-decoration:underline}a.a-ulink:hover,.a-ulink a:hover{text-decoration:none}.body-in{overflow-x:hidden}.anime,.toggle{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;-moz-animation-delay:0;-webkit-animation-delay:0;animation-delay:0;-moz-animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-moz-animation-timing-function:ease;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}.anime.fade-in{opacity:0}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.anime.fade-in.active,.anime.fade-in.lock{-moz-animation-name:fade-in;-webkit-animation-name:fade-in;animation-name:fade-in}.anime.flip-y{-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}@-moz-keyframes flip-y{0%{-moz-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}100%{-moz-transform:rotateX(0);transform:rotateX(0);opacity:1}}@-webkit-keyframes flip-y{0%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}@keyframes flip-y{0%{-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}100%{-moz-transform:rotateX(0);-ms-transform:rotateX(0);-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}.anime.flip-y.active,.anime.flip-y.lock{-moz-animation-name:flip-y;-webkit-animation-name:flip-y;animation-name:flip-y}.anime.flip-x{-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}@-moz-keyframes flip-x{0%{-moz-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}100%{-moz-transform:rotateY(0);transform:rotateY(0);opacity:1}}@-webkit-keyframes flip-x{0%{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}100%{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}}@keyframes flip-x{0%{-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-webkit-transform:rotateY(90deg);transform:rotateY(90deg);opacity:0}100%{-moz-transform:rotateY(0);-ms-transform:rotateY(0);-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1}}.anime.flip-x.active,.anime.flip-x.lock{-moz-animation-name:flip-x;-webkit-animation-name:flip-x;animation-name:flip-x}.anime.expand-x{width:auto;max-width:1px;opacity:0;overflow:hidden}@-moz-keyframes expand-x{0%{max-width:1px;opacity:0}100%{max-width:1000px;opacity:1}}@-webkit-keyframes expand-x{0%{max-width:1px;opacity:0}100%{max-width:1000px;opacity:1}}@keyframes expand-x{0%{max-width:1px;opacity:0}100%{max-width:1000px;opacity:1}}.anime.expand-x.active,.anime.expand-x.lock{-moz-animation-name:expand-x;-webkit-animation-name:expand-x;animation-name:expand-x}.anime.expand-x img{height:none}.anime.expand-y{height:auto;max-height:1px;opacity:0;overflow:hidden}@-moz-keyframes expand-y{0%{max-height:1px;opacity:0}100%{max-height:1000px;opacity:1}}@-webkit-keyframes expand-y{0%{max-height:1px;opacity:0}100%{max-height:1000px;opacity:1}}@keyframes expand-y{0%{max-height:1px;opacity:0}100%{max-height:1000px;opacity:1}}.anime.expand-y.active,.anime.expand-y.lock{-moz-animation-name:expand-y;-webkit-animation-name:expand-y;animation-name:expand-y}.anime.top-in{-moz-transform-origin:0 0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translate(0, -100%);-ms-transform:translate(0, -100%);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}@-moz-keyframes top-in{0%{opacity:0;-moz-transform:translate(0, -100%);transform:translate(0, -100%)}100%{opacity:1;-moz-transform:translate(0, 1em);transform:translate(0, 1em)}}@-webkit-keyframes top-in{0%{opacity:0;-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}100%{opacity:1;-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}@keyframes top-in{0%{opacity:0;-moz-transform:translate(0, -100%);-ms-transform:translate(0, -100%);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}100%{opacity:1;-moz-transform:translate(0, 1em);-ms-transform:translate(0, 1em);-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}.anime.top-in.active,.anime.top-in.lock{-moz-animation-name:top-in;-webkit-animation-name:top-in;animation-name:top-in}.anime.bottom-in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translate(0, 100%);-ms-transform:translate(0, 100%);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}@-moz-keyframes bottom-in{0%{opacity:0;-moz-transform:translate(0, 100%);transform:translate(0, 100%)}100%{opacity:1;-moz-transform:translate(0, 0);transform:translate(0, 0)}}@-webkit-keyframes bottom-in{0%{opacity:0;-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}100%{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0)}}@keyframes bottom-in{0%{opacity:0;-moz-transform:translate(0, 100%);-ms-transform:translate(0, 100%);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}100%{opacity:1;-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-webkit-transform:translate(0, 0);transform:translate(0, 0)}}.anime.bottom-in.active,.anime.bottom-in.lock{-moz-animation-name:bottom-in;-webkit-animation-name:bottom-in;animation-name:bottom-in}.anime.left-in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translate(-100%, 0);-ms-transform:translate(-100%, 0);-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}@-moz-keyframes left-in{0%{opacity:0;-moz-transform:translate(-100%, 0);transform:translate(-100%, 0)}100%{opacity:1;-moz-transform:translate(0, 1em);transform:translate(0, 1em)}}@-webkit-keyframes left-in{0%{opacity:0;-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}100%{opacity:1;-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}@keyframes left-in{0%{opacity:0;-moz-transform:translate(-100%, 0);-ms-transform:translate(-100%, 0);-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}100%{opacity:1;-moz-transform:translate(0, 1em);-ms-transform:translate(0, 1em);-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}.anime.left-in.active,.anime.left-in.lock{-moz-animation-name:left-in;-webkit-animation-name:left-in;animation-name:left-in}.anime.right-in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translate(100%, 0);-ms-transform:translate(100%, 0);-webkit-transform:translate(100%, 0);transform:translate(100%, 0)}@-moz-keyframes right-in{0%{opacity:0;-moz-transform:translate(100%, 0);transform:translate(100%, 0)}100%{opacity:1;-moz-transform:translate(0, 1em);transform:translate(0, 1em)}}@-webkit-keyframes right-in{0%{opacity:0;-webkit-transform:translate(100%, 0);transform:translate(100%, 0)}100%{opacity:1;-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}@keyframes right-in{0%{opacity:0;-moz-transform:translate(100%, 0);-ms-transform:translate(100%, 0);-webkit-transform:translate(100%, 0);transform:translate(100%, 0)}100%{opacity:1;-moz-transform:translate(0, 1em);-ms-transform:translate(0, 1em);-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}}.anime.right-in.active,.anime.right-in.lock{-moz-animation-name:right-in;-webkit-animation-name:right-in;animation-name:right-in}.anime.zoom-in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:scale(0, 0);-ms-transform:scale(0, 0);-webkit-transform:scale(0, 0);transform:scale(0, 0)}@-moz-keyframes zoom-in{0%{opacity:0;-moz-transform:scale(0, 0);transform:scale(0, 0)}100%{opacity:1;-moz-transform:scale(1, 1);transform:scale(1, 1)}}@-webkit-keyframes zoom-in{0%{opacity:0;-webkit-transform:scale(0, 0);transform:scale(0, 0)}100%{opacity:1;-webkit-transform:scale(1, 1);transform:scale(1, 1)}}@keyframes zoom-in{0%{opacity:0;-moz-transform:scale(0, 0);-ms-transform:scale(0, 0);-webkit-transform:scale(0, 0);transform:scale(0, 0)}100%{opacity:1;-moz-transform:scale(1, 1);-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);transform:scale(1, 1)}}.anime.zoom-in.active,.anime.zoom-in.lock{-moz-animation-name:zoom-in;-webkit-animation-name:zoom-in;animation-name:zoom-in}.toggle.bottom-in{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-moz-transform:translate(0, 100%);-ms-transform:translate(0, 100%);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.toggle.bottom-in.active,.toggle.bottom-in.lock{filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1;-moz-transform:translate(0, 1em);-ms-transform:translate(0, 1em);-webkit-transform:translate(0, 1em);transform:translate(0, 1em)}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:100;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Thin-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Light"),local("NotoSansCJKjp-L"),url("font/NotoSansCJKjp/NotoSansCJKjp-Thin-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Thin-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:200;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Light-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Light"),local("NotoSansCJKjp-L"),url("font/NotoSansCJKjp/NotoSansCJKjp-Light-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Light-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:300;src:url("font/NotoSansCJKjp/NotoSansCJKjp-DemiLight-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Light"),local("NotoSansCJKjp-L"),url("font/NotoSansCJKjp/NotoSansCJKjp-DemiLight-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-DemiLight-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:400;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Regular-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Regular"),local("NotoSansCJKjp-R"),url("font/NotoSansCJKjp/NotoSansCJKjp-Regular-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Regular-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:500;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Medium-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Regular"),local("NotoSansCJKjp-R"),url("font/NotoSansCJKjp/NotoSansCJKjp-Medium-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Medium-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:700;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Bold-Web?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Bold"),local("NotoSansCJKjp-B"),url("font/NotoSansCJKjp/NotoSansCJKjp-Bold-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Bold-Web.otf") format("opentype");font-display:swap}@font-face{font-family:'NotoSansCJKjp';font-style:normal;font-weight:900;src:url("font/NotoSansCJKjp/NotoSansCJKjp-Black-Web.eot?#iefix") format("embedded-opentype"),local("NotoSansCJKjp Heavy"),local("NotoSansCJKjp-H"),url("font/NotoSansCJKjp/NotoSansCJKjp-Black-Web.woff") format("woff"),url("font/NotoSansCJKjp/NotoSansCJKjp-Black-Web.otf") format("opentype");font-display:swap}body .noto,button .noto,input .noto,select .noto,textarea .noto{font-family:"NotoSansCJKjp","NotoSansCJKjp","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","sans-serif"}@font-face{font-family:'BebasNeue';font-weight:normal;font-style:normal;src:url("font/BebasNeue/BebasNeue-Light.woff2") format("woff2"),url("font/BebasNeue/BebasNeue-Light.woff") format("woff");font-display:swap}@font-face{font-family:'BebasNeue';font-weight:500;font-style:normal;src:url("font/BebasNeue/BebasNeue-Regular.woff2") format("woff2"),url("font/BebasNeue/BebasNeue-Regular.woff") format("woff");font-display:swap}body .bebas,button .bebas,input .bebas,select .bebas,textarea .bebas{font-family:"BebasNeue","NotoSansCJKjp","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","sans-serif"}@font-face{font-family:'Passion One';font-style:normal;font-weight:400;src:local("Passion One Regular"),local("PassionOne-Regular"),url(https://fonts.gstatic.com/s/passionone/v8/fY6k21F1QT2c_Oc3HRNDwiYE0-AqJ3nfInTTiDXDjU4.woff2) format("woff2"),url(https://fonts.gstatic.com/s/passionone/v8/fY6k21F1QT2c_Oc3HRNDwobN6UDyHWBl620a-IRfuBk.woff) format("woff");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Passion One';font-style:normal;font-weight:400;src:local("Passion One Regular"),local("PassionOne-Regular"),url(https://fonts.gstatic.com/s/passionone/v8/fY6k21F1QT2c_Oc3HRNDwo4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(https://fonts.gstatic.com/s/passionone/v8/fY6k21F1QT2c_Oc3HRNDwobN6UDyHWBl620a-IRfuBk.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}body .passion,button .passion,input .passion,select .passion,textarea .passion{font-family:"Passion One","NotoSansCJKjp","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","sans-serif"}body{width:100%}@media screen and (max-width: 768px){body{min-width:100%}}.pad{padding-left:3.125%;padding-right:3.125%}@media screen and (min-width: 769px){.wrap{max-width:1220px;padding-right:10px;padding-left:10px;margin:0 auto}}@media screen and (max-width: 768px){.sp-wrap{padding-left:3.125%;padding-right:3.125%}}body,button,input,select,textarea{color:#3b3b3b;font-size:1.4rem;line-height:1.8;font-weight:500}a{color:#1177b0;text-decoration:none}a:hover{text-decoration:underline}p:not([class]):not(:last-child){margin-bottom:1em}::-moz-selection{color:#fff;background:rgba(0,11,115,0.8)}::selection{color:#fff;background:rgba(0,11,115,0.8)}@media screen and (min-width: 769px){#wpadminbar{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;height:10px !important;overflow:hidden !important;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:.5}#wpadminbar:hover{filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity:1;height:auto !important;overflow:visible !important}}@media screen and (max-width: 768px){#wpadminbar{min-width:0 !important;overflow:hidden}}.wp-post>div,.wp-post p{display:block;margin:0.8em 0 1.5em;line-height:1.8}.wp-post b,.wp-post strong{font-weight:700}.wp-post em{font-style:italic}.wp-post td,.wp-post th{border:solid 1px #DADADA;padding:0.5em}.wp-post .aligncenter{display:block;margin:0 auto}.wp-post .alignright{float:right;padding-left:3em !important;padding-right:0 !important}.wp-post .alignleft{float:left;padding-left:0 !important;padding-right:3em !important}.wp-post .wp-caption{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:0.5em;max-width:100% !important;border:solid 2px #CFCFCF}.wp-post .wp-caption .wp-caption-text{text-align:center}.wp-post h2{margin-bottom:1em;border-bottom:dashed 1px #7f7f7f;font-size:2.4em;line-height:1.5;font-weight:700}.wp-post h3{margin-bottom:.5em;font-size:1.8em;font-weight:700;line-height:2}.wp-post h4{margin-bottom:.5em;font-size:1.5em;font-weight:700;line-height:2}.wp-post ol,.wp-post ul{margin:0 0 0 0.5em}.wp-post ol li,.wp-post ul li{margin:0 0 0.5em}.wp-post ul li{list-style-type:disc}.wp-post ol li{list-style-type:decimal}.wp-post img[class*='attachment-'],.wp-post img[class*='wp-image-']{max-width:100%;height:auto}.wp-post img.alignright,.wp-post img.alignleft{padding:0 1em 2em}.wp-post blockquote{display:block;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:40px;-webkit-margin-end:40px}@media screen and (max-width: 768px){.wp-post .alignright,.wp-post .alignleft{float:none;padding-left:0 !important;padding-right:0 !important}.wp-post img[class*='attachment-'],.wp-post img[class*='wp-image-']{padding:0 0 2em}}body.mceContentBody{font-family:"NotoSansCJKjp","YuGothic","游ゴシック","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ","sans-serif"}.visual-editor{background:#FFF}.visual-editor div,.visual-editor p{display:block;margin:0.8em 0;border:dashed 1px #DADADA;line-height:1.5}.js-modal{position:relative}.js-modal .modal-bg{-moz-transition:opacity .3s;-o-transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0;position:fixed;top:-100vh;left:-100vw;width:100vw;height:100vh;z-index:100;overflow:hidden;background:rgba(0,0,0,0.5)}.js-modal .modal-bg .modal-close{display:block;position:absolute;top:.5em;right:.5em;z-index:10;font-size:3rem;width:1.5em;line-height:1.5em;text-align:center;cursor:pointer;color:#000;background:rgba(255,255,255,0.5)}.js-modal .modal-content{position:absolute;top:5%;left:5%;padding:2em 3.125%;z-index:3;width:90%;height:90%;color:#000;overflow-y:scroll;cursor:auto;background:#FFF}.js-modal.open{z-index:100}.js-modal.open .modal-bg{opacity:1;top:0;left:0}.wp-rest{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.wp-rest .rest-loading{-moz-transition:.5s;-o-transition:.5s;-webkit-transition:.5s;transition:.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-webkit-transition-delay:0.5s;transition-delay:0.5s;position:relative;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:100%;height:100vh;background:#000}.wp-rest .rest-loading .loading-title{-moz-transition:.2s;-o-transition:.2s;-webkit-transition:.2s;transition:.2s;-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);-webkit-transform:rotate(10deg);transform:rotate(10deg);font-size:10vw;color:#FFF}.wp-rest .rest-loading.active{margin-top:-200vh}.wp-rest .rest-loading.active .loading-title{-moz-transform:rotate(0);-ms-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0);margin-top:2em}.wp-rest .rest-base{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;position:relative;width:24.999%;min-height:20rem;background-position:center;background-size:cover;cursor:pointer;overflow:hidden}.wp-rest .rest-base.wave0{-moz-animation-delay:0s;-webkit-animation-delay:0s;animation-delay:0s}.wp-rest .rest-base.wave1{-moz-animation-delay:.2s;-webkit-animation-delay:.2s;animation-delay:.2s}.wp-rest .rest-base.wave2{-moz-animation-delay:.4s;-webkit-animation-delay:.4s;animation-delay:.4s}.wp-rest .rest-base.wave3{-moz-animation-delay:.6s;-webkit-animation-delay:.6s;animation-delay:.6s}.wp-rest .rest-base.wave4{-moz-animation-delay:.8s;-webkit-animation-delay:.8s;animation-delay:.8s}.wp-rest .rest-base.wave5{-moz-animation-delay:1s;-webkit-animation-delay:1s;animation-delay:1s}.wp-rest .rest-base.wave6{-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s;animation-delay:1.2s}.wp-rest .rest-base.wave7{-moz-animation-delay:1.4s;-webkit-animation-delay:1.4s;animation-delay:1.4s}.wp-rest .rest-base.wave8{-moz-animation-delay:1.6s;-webkit-animation-delay:1.6s;animation-delay:1.6s}.wp-rest .rest-base.wave9{-moz-animation-delay:1.8s;-webkit-animation-delay:1.8s;animation-delay:1.8s}.wp-rest .rest-base.wave10{-moz-animation-delay:2s;-webkit-animation-delay:2s;animation-delay:2s}.wp-rest .rest-base.wave11{-moz-animation-delay:2.2s;-webkit-animation-delay:2.2s;animation-delay:2.2s}.wp-rest .rest-base.wave12{-moz-animation-delay:2.4s;-webkit-animation-delay:2.4s;animation-delay:2.4s}.wp-rest .rest-base.wave13{-moz-animation-delay:2.6s;-webkit-animation-delay:2.6s;animation-delay:2.6s}.wp-rest .rest-base.wave14{-moz-animation-delay:2.8s;-webkit-animation-delay:2.8s;animation-delay:2.8s}.wp-rest .rest-base.wave15{-moz-animation-delay:3s;-webkit-animation-delay:3s;animation-delay:3s}.wp-rest .rest-base .rest-img{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background-size:cover;background-position:center}.wp-rest .rest-base .in{-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;padding:3em 3.125%;color:#FFF;background:rgba(0,0,0,0.3)}.wp-rest .rest-base .bebas{letter-spacing:.1em}.wp-rest .rest-base .list-cat{position:absolute;padding:.5em;top:0;left:0;color:#FFF;line-height:1;background:rgba(0,0,0,0.7)}.wp-rest .rest-base .list-cat.cat-other_web{background:rgba(115,126,223,0.7)}.wp-rest .rest-base .list-cat.cat-web_design{background:rgba(221,188,20,0.7)}.wp-rest .rest-base .list-cat.cat-web_marketing{background:rgba(92,205,97,0.7)}.wp-rest .rest-base .list-cat.cat-other{background:rgba(255,80,80,0.7)}.wp-rest .rest-base .list-title{font-size:1.2em}.wp-rest .rest-base .list-date{position:absolute;bottom:0;left:0;padding:.5em;line-height:1}.wp-rest .rest-base .list-name{position:absolute;bottom:0;right:0;padding:.5em;line-height:1;font-style:italic}.wp-rest .rest-base:hover .rest-img{-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1)}.wp-rest .rest-base:hover .in{background:rgba(0,0,0,0.5)}@media screen and (min-width: 769px) and (max-width: 1023px){.wp-rest .rest-base{width:33.33333%}}@media screen and (max-width: 768px){.wp-rest .rest-base{width:100%}}
              
            
!

JS

              
                jQuery(function($){

	var restPost = '';
	var restCount = 1;
	var restJSON;
	restJSON = $.getJSON( "https://spc-jpn.co.jp/wp-json/wp/v2/posts?_embed&per_page=10&page=1", function(results) {
		$('#rest-loading').addClass('active');
		$.each(results, function(i, item) {
			eyecatch = item._embedded['wp:featuredmedia'][0];
			restPost = '<li class="js-modal rest-base anime fade-in active wave' + restCount + '">';
			if(eyecatch.media_details.sizes['news-img'] !== undefined){
				restPost = restPost + '<div class="rest-img" style="background-image:url(' + eyecatch.media_details.sizes['news-img'].source_url + ')"></div>';
			}else if(eyecatch.media_details.sizes['full'] !== undefined){
				restPost = restPost + '<div class="rest-img" style="background-image:url(' + eyecatch.media_details.sizes['full'].source_url + ')"></div>';
			}else{
				restPost = restPost + '<div class="rest-img" style="background-image:url()"></div>';
			}
			restPost = restPost +
				'<div class="in">' +
					'<p class="list-cat cat-' + item._embedded['wp:term'][0][0].slug + '">' + item._embedded['wp:term'][0][0].name + '</p>' +
					'<p class="list-title">' + item.title.rendered + '</p>' +
					'<p class="list-date bebas">' + item.date + '</p>' +
					'<article class="list-main modal-bg"><i class="modal-close fa fa-close" aria-hidden="true"></i><div class="modal-content">' +
						'<a class="bebas" href="' + item.link + '" target="_blank">' + item.link + '</a>' +
						'<div class="wp-post t-blue">' + item.content.rendered + '</div>' +
					'</div></article>' +
				'</div></li>'
			;
			$('#wp-rest').append(restPost);
		});
		$('.js-modal').on('click',function(e){	//CSSアニメによるモーダル
			var clickClass = e.target.className;	//クリック箇所のクラス情報を取得
			//  alert(clickClass);	//デバッグ出力

			if (~clickClass.indexOf('modal-bg') || ~clickClass.indexOf('modal-close')) {
				$(this).removeClass('open');
			}else{
				$(this).addClass('open');
			}
		});
		var elapsed_ms = new Date().getTime() - start_ms;
	});
});
              
            
!
999px

Console