italia2024
Version:
Italia 2024 assets
1,316 lines (1,137 loc) • 59 kB
HTML
<head>
<!-- charset, IE対策, iPhoneのtel,email自動認識機能OFF -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!-- viewport -->
<script>
(function () {
var ua = window.navigator.userAgent;
var metaTag = document.createElement('meta');
metaTag.name = "viewport";
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') >
0) { //sp
metaTag.content = "width=device-width, initial-scale=1.0";
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
//tablet時のviewport
metaTag.content = "width=1280";
} else { //pc
metaTag.content = "width=device-width, initial-scale=1.0";
}
document.getElementsByTagName('head')[0].appendChild(metaTag);
})();
</script>
<!-- ▼File：Preload -->
<!-- <link rel="preload" href="<¿php echo get_theme_file_uri(); ¿>/img/frnt4ioA-pcov_bg1.jpg" as="image"> -->
<!-- <link rel="preload" href="<¿php echo get_theme_file_uri(); ¿>/video/frnt4ioA-vcov1HB.mp4" as="video"> -->
<!-- ▼CSS（Cascading Sorcery Spells）：Reset, FrameWork, Primer, Above the fold -->
<link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">
<link href="https://cdn.jsdelivr.net/npm/musubii@7.1.0/dist/musubii.min.css" rel="stylesheet" media="print" onload='this.media="all"' />
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/css/_cosmetics/style-color-palette.min.css">
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/css/_cosmetics/style-primer.css">
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/css/_cosmetics/breadcrumb.min.css">
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/css/_cosmetics/style-component.min.css">
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/css/_cosmetics/style-utility.min.css">
<!-- ▼font：PreConnect, Preload -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Georama:wdth@62.5..150&display=swap">
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:wght,FILL@100..700,0..1">
<link rel="stylesheet" href="https://www.code-plus.jp/cdn/commons/fonts/material-design-icons/material-symbols.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons-font/font/simple-icons.min.css">
<!-- font：Gothic -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist/css/yakuhanjp.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload='this.media="all"' />
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet" media="print" onload='this.media="all"' />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap&text=0123456789" rel="stylesheet" media="print" onload='this.media="all"' />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload='this.media="all"' />
<!-- ▼aboveFold：CSS, JS -->
<script src="https://www.code-plus.jp/cdn/js/aboveFold.js"></script>
<!-- device.js（≺body≻にデバイス別クラス付与）※type="module"必須 -->
<script type="module" src="https://www.code-plus.jp/cdn/js/device@0.10.2/device.js"></script>
<style>
/* demo.css
====================================== */
.pg-sarapeji4ioa {
position: relative;
overflow: hidden;
}
/* Paragraph（文字設定） */
.pg-sarapeji4ioa p {
display: block;
max-width: 100%;
line-height: 1.88;
letter-spacing: 0.03rch;
font-size: 15px;
font-size: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.1563)), 15px);
font-weight: var(--fw-base);
}
/* Small（注釈・小字） */
.pg-sarapeji4ioa small {
display: block;
max-width: 100%;
line-height: 1.5;
letter-spacing: 0rch;
font-weight: 400;
}
/* Emphasis（強調・中字） */
.pg-sarapeji4ioa em {
display: block;
max-width: 100%;
line-height: 1.88;
letter-spacing: 0.03rch;
font-size: 18px;
font-size: clamp(15.6px, calc(15.6px + ((1vw - 3.6px) * 0.375)), 18px);
font-weight: 500;
}
/* Strong（強調・大字） */
.pg-sarapeji4ioa strong {
display: block;
max-width: 100%;
line-height: 1.5;
letter-spacing: 0.03rch;
font-size: 27px;
font-size: clamp(18.4px, calc(18.4px + ((1vw - 3.6px) * 1.34375)), 27px);
font-weight: 600;
}
/* Headings（h1, h2, h3, h4, h5, h6） */
.pg-sarapeji4ioa :is(h1, h2, h3, h4, h5, h6) {
position: relative;
display: inline-block;
z-index: 10;
width: 100%;
max-width: 100%;
}
/* Headings（.titolo） */
.pg-sarapeji4ioa h1 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0.15rch;
text-indent: 0.15rch;
font-size: 45px;
font-size: clamp(30.8px, calc(30.8px + ((1vw - 3.6px) * 2.2188)), 45px);
font-weight: 500;
}
.pg-sarapeji4ioa h2 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0.12rch;
text-indent: 0.12rch;
font-size: 39px;
font-size: clamp(28.1px, calc(28.1px + ((1vw - 3.6px) * 1.7031)), 39px);
font-weight: 500;
}
.pg-sarapeji4ioa h3 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0.09rch;
text-indent: 0.09rch;
font-size: 33px;
font-size: clamp(25.1px, calc(25.1px + ((1vw - 3.6px) * 1.2344)), 33px);
font-weight: 500;
}
.pg-sarapeji4ioa h4 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0.06rch;
text-indent: 0.06rch;
font-size: 24px;
font-size: clamp(20px, calc(20px + ((1vw - 3.6px) * 0.625)), 24px);
font-weight: 500;
}
.pg-sarapeji4ioa h5 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0.03rch;
text-indent: 0.03rch;
font-size: 19px;
font-size: clamp(18px, calc(18px + ((1vw - 3.6px) * 0.1563)), 19px);
font-weight: 500;
}
.pg-sarapeji4ioa h6 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0rch;
text-indent: 0rch;
font-size: 17px;
font-size: clamp(16px, calc(16px + ((1vw - 3.6px) * 0.3125)), 17px);
font-weight: 500;
}
/* Headings画像（.individ） */
.pg-sarapeji4ioa :is(h1, h2, h3, h4, h5, h6):has(>img) {
width: auto;
}
.pg-sarapeji4ioa :is(h1, h2, h3, h4, h5, h6)>img {
width: auto;
max-width: 100%;
}
/* Conpornent
====================================== */
/* wysiwyg（musubii） */
.wysiwyg dt {
width: 40%;
}
.wysiwyg dd {
width: 60%;
}
/* Layout
====================================== */
/* mezzala（余白調整：page上） */
.adj-peji4ioA-mezzalaA {
display: block;
width: 100%;
height: 0rem;
}
/* mediano（余白調整：page下） */
.adj-peji4ioA-medianoA {
display: block;
width: 100%;
height: 3rem;
}
/* @Container（Main, Aside）
====================================== */
/* .asleeve.lcl-container（ASIDE） */
[class^="sect-"] .asleeve {
position: relative;
float: right;
width: 360px;
height: auto;
margin-left: 30px;
padding: 1rem;
background: hsla(0, 0%, 98%, 1);
}
@media screen and (max-width: 1199.9px) {
[class^="sect-"] .asleeve {
display: none;
}
}
/* .mainart.fcl-container（MAIN） */
[class^="sect-"] .mainart {
position: relative;
float: none;
width: auto;
height: auto;
padding: 1rem;
background: hsla(0, 0%, 98%, 1);
}
[class^="sect-"] :is(.asleeve, .mainart) .rule-hory {
top: -1rem;
margin-left: -1rem;
width: calc(100% + 2rem);
}
.fcl-container {
container: full-containerLoad / inline-size;
}
.lcl-container {
container: little-containerLoad / inline-size;
}
.uld-container {
container: unit-loadDevice / inline-size;
}
/* Section, Inner
====================================== */
.pg-sarapeji4ioa [class^="dept-"],
.pg-sarapeji4ioa [class^="sect-"] {
width: 100%;
max-width: 100vw;
height: auto;
/* padding: 上 横 下 */
padding: 3rem 0px 3rem;
}
[class^="dept-"] .division__intainer,
[class^="sect-"] .section__intainer {
width: 1000px;
max-width: 92.5vw;
height: auto;
}
[class^="dept-"] .division__intainer::after,
[class^="sect-"] .section__intainer::after {
content: "";
display: block;
clear: both;
}
.pg-sarapeji4ioa section:nth-of-type(2n+3) {
background: var(--c-assort-pl-100);
}
.pg-sarapeji4ioa section:nth-of-type(2n) {
background: var(--c-assort-pl-150);
}
/* Section
-------------------------------------- */
.pg-sarapeji4ioa .sect-peji4ioA-Intro {
/* padding: 上 横 下 */
padding: 3rem 0px 3rem;
background: hsla(0, 0%, 100%, 1);
}
/* inner */
.sect-peji4ioA-Intro .section__intainer {
padding: 0;
background: transparent;
}
[class^="sect-peji4ioA"] .hgroup-wrapper {
margin-bottom: 0.5em;
}
[class^="sect-peji4ioA"] .hgroup-wrapper:nth-of-type(n+2) {
margin-top: 2rem;
}
/* .section
-------------------------------------- */
.sect-peji4ioA-flipIn i {
width: 24%;
}
/* .section
-------------------------------------- */
.sect-peji4ioA-Rotation .wheel-gear {
width: 100px;
height: auto;
}
/* 円グラフ
-------------------------------------- */
/* .shelf（横組み） */
.sect-peji4ioA-Chartation .shelf-wrapper {
width: 100%;
height: auto;
/* Flex */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.sect-peji4ioA-Chartation .shelf-wrapper>li {
position: relative;
width: 100%;
display: flex;
}
.sect-peji4ioA-Chartation .shelf-wrapper>li>a {
width: 100%;
height: 100%;
}
/* .shelf（SP） */
@media screen and (max-width: 743.9px) {
.sect-peji4ioA-Chartation .shelf-wrapper>li:nth-of-type(n+2) {
padding-top: 2rem;
}
}
/* .shelf（PC） */
@media print,
screen and (min-width: 744px) {
.sect-peji4ioA-Chartation .shelf-wrapper>li {
width: 33.3%;
}
.sect-peji4ioA-Chartation .shelf-wrapper>li:nth-of-type(n+4) {
padding-top: 2rem;
}
}
.scroll-chartation.chartA {
margin: auto;
width: 150px;
height: 150px;
}
.scroll-chartation.chartB {
margin: auto;
width: 250px;
height: 250px;
}
.scroll-chartation.chartC {
margin: auto;
width: 200px;
height: 200px;
}
</style>
</head>
<!-- ▼body -->
<!-- responsejs v0.10.1（ブレイクポイント） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/response.js/0.10.1/response.min.js"></script>
<body id='magique' class="magique" data-responsejs='{"create": [
{ "prop":"width", "prefix":"src", "mode":"src", "breakpoints":[0,744,960,1200]},
{ "prop":"width", "prefix":"r", "mode":"markup", "breakpoints":[0,744,960,1200]}
]}'>
<!-- ▼marble（総囲い：bodyの下に背景作るjs等あるので別で囲む） -->
<div class="marble marble4ioA">
<!-- mezzala（余白調整：page上） -->
<hr class="adj-peji4ioA-mezzalaA" />
<!-- ▼page -->
<div class="pg-sarapeji4ioa">
<!-- ★breadcrumb -->
<nav class="breadcrumb leckermaul">
<ul class="breadcrumb-wrapper">
<li><a href="./"><i class="icon material-symbols-sharp">home</i>HOME</a></li>
<li><a class="current_page_item">codepen.page</a></li>
</ul>
</nav><!-- ///.breadcrumb -->
<!-- section -->
<section class="sect-peji4ioA-Intro">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupA">
<h2 class="titolo titolo-chapter ta-center">Scrollin.css<br />（スクロールでふわっとフェードイン）</h2>
<p><small><span>※class="scroll-~"： 付与だけのアニメーション処理。</span></small>
<small><span>※delayed-0~6： 開始遅延クラス（delay） ※fasted-1~3, slowed-1~120：アニメーション速度クラス（duration）</span></small>
<small><span>※Intersection
Observer化（scrollTopでなく交差点基準による、Load時はコンテンツが表示されない問題の排除、及びJS処理の軽減化）。 </span><span>※現状要jQuary。</span></small>
<small><span>※調整用のクラス（delayed, fasted, slowed）のセレクタまとめ用に一部SCSS使用。</span></small>
</p>
</div><!-- ///.hgroup -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-FadeIn">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-fadeIn</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-fadeIn delayed-0">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-fadeInTop</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-fadeInTop">いとど、
かかる好きごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへごとをさへ、語り伝へけむ人のもの言ひさがなさよ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-fadeInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-fadeInBottom">いとど、
かかる好きごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへごとをさへ、語り伝へけむ人のもの言ひさがなさよ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-fadeInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-fadeInLeft delayed-1">
今宵なむ、初めて憂しと世を思ひ知りぬれば、恥づかしくて、ながらふまじうこそ、思ひなりぬれなどのたまへば、涙をさへこぼして臥したり。いとらうたしと思す。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-fadeInRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-fadeInRight">
六条わたりの御忍び歩きのころ、内裏よりまかでたまふ中宿に、大弐の乳母のいたくわづらひて尼になりにける、とぶらはむとて、五条なる家尋ねておはしたり。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-BlurIn">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurIn</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurIn delayed-0">
いづれの御時にか、女御、更衣あまたさぶらひたまひけるなかに、いとやむごとなき際にはあらぬが、すぐれて時めきたまふありけり。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurInTop</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurInTop">いとど、
かかる好きごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへごとをさへ、語り伝へけむ人のもの言ひさがなさよ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurInBottom">いとど、
かかる好きごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへごとをさへ、語り伝へけむ人のもの言ひさがなさよ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurInLeft delayed-1">
今宵なむ、初めて憂しと世を思ひ知りぬれば、恥づかしくて、ながらふまじうこそ、思ひなりぬれなどのたまへば、涙をさへこぼして臥したり。いとらうたしと思す。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurInRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurInRight">
六条わたりの御忍び歩きのころ、内裏よりまかでたまふ中宿に、大弐の乳母のいたくわづらひて尼になりにける、とぶらはむとて、五条なる家尋ねておはしたり。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-bgFadeIn</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-bgFadeIn fasted-2">
思へどもなほ飽かざりし夕顔の露に後れし心地を、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえたまふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-bgInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-bgInBottom delayed-0">
思へどもなほ飽かざりし夕顔の露に後れし心地を、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえたまふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-bgInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-bgInLeft fasted-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえたまふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-bgOpenIn</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-bgOpenIn">世の常ならず、おもしろかるべきたびのことなりければ、藤壺の見たまはざらむを、飽かず思さるれば、試楽を御前にて、せさせたまふ。
</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatInBottomOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatInBottomOut fasted-2">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatInLeftOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatInLeftOut fasted-1">
すこしゆゑづきて聞こゆるわたりは、御耳とどめ給はぬ隈なきに、さてもやと、思し寄るばかりのけはひあるあたりにこそ、一行をもほのめかしたまふめるに、なびき聞こえずもて離れたるは、をさをさあるまじきぞ、いと目馴れたるや。
</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatInRightOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatInRightOut">
つれなう心強きは、たとしへなう情けおくるるまめやかさなど、あまりもののほど知らぬやうに、さてしも過ぐしはてず、名残なくくづほれて、なほなほしき方に定まりなどするもあれば、のたまひさしつるも多かりける。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatInBottomLeftOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatInBottomLeftOut delayed-1 fasted-1"><img src="https://i.gyazo.com/395ced8b4700923e20ac742a3e5ee0c6.jpg" alt="" /></p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatInBottomRightOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatInBottomRightOut delayed-2 fasted-2"><img src="https://i.gyazo.com/0364568eeaeefbce1a0e0c0f262fc34e.jpg" alt="" /></p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatFadeOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatFadeOut delayed-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatOutTop</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatOutTop fasted-2">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatOutBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatOutBottom fasted-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatOutLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatOutLeft">
すこしゆゑづきて聞こゆるわたりは、御耳とどめ給はぬ隈なきに、さてもやと、思し寄るばかりのけはひあるあたりにこそ、一行をもほのめかしたまふめるに、なびき聞こえずもて離れたるは、をさをさあるまじきぞ、いと目馴れたるや。
</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-coatOutRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-coatOutRight delayed-0">
つれなう心強きは、たとしへなう情けおくるるまめやかさなど、あまりもののほど知らぬやうに、さてしも過ぐしはてず、名残なくくづほれて、なほなほしき方に定まりなどするもあれば、のたまひさしつるも多かりける。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurFadeOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurFadeOut delayed-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurOutTop</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurOutTop fasted-2">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurOutBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurOutBottom fasted-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurOutLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurOutLeft">
すこしゆゑづきて聞こゆるわたりは、御耳とどめ給はぬ隈なきに、さてもやと、思し寄るばかりのけはひあるあたりにこそ、一行をもほのめかしたまふめるに、なびき聞こえずもて離れたるは、をさをさあるまじきぞ、いと目馴れたるや。
</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-blurOutRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-blurOutRight delayed-0">
つれなう心強きは、たとしへなう情けおくるるまめやかさなど、あまりもののほど知らぬやうに、さてしも過ぐしはてず、名残なくくづほれて、なほなほしき方に定まりなどするもあれば、のたまひさしつるも多かりける。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-wipeInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-wipeInBottom slowed-5">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-wipeInTop </h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-wipeInTop slowed-4">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-wipeInRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-wipeInRight slowed-3">
すこしゆゑづきて聞こゆるわたりは、御耳とどめ給はぬ隈なきに、さてもやと、思し寄るばかりのけはひあるあたりにこそ、一行をもほのめかしたまふめるに、なびき聞こえずもて離れたるは、をさをさあるまじきぞ、いと目馴れたるや。
</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-wipeInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-wipeInLeft slowed-2">
つれなう心強きは、たとしへなう情けおくるるまめやかさなど、あまりもののほど知らぬやうに、さてしも過ぐしはてず、名残なくくづほれて、なほなほしき方に定まりなどするもあれば、のたまひさしつるも多かりける。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-wipeInCentral</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-wipeInCentral slowed-1">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-mirageInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-mirageInBottom slowed-4">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-mirageInTop</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-mirageInTop slowed-3">
思へどもなほ飽かざりし夕顔の露に後れし心地を、年月経れど、思し忘れず、ここもかしこも、うちとけぬ限りの、気色ばみ心深きかたの御いどましさに、け近くうちとけたりしあはれに、似るものなう恋しく思ほえ給ふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-mirageInRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-mirageInRight slowed-2">
すこしゆゑづきて聞こゆるわたりは、御耳とどめ給はぬ隈なきに、さてもやと、思し寄るばかりのけはひあるあたりにこそ、一行をもほのめかしたまふめるに、なびき聞こえずもて離れたるは、をさをさあるまじきぞ、いと目馴れたるや。
</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-mirageInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-mirageInLeft slowed-1">
つれなう心強きは、たとしへなう情けおくるるまめやかさなど、あまりもののほど知らぬやうに、さてしも過ぐしはてず、名残なくくづほれて、なほなほしき方に定まりなどするもあれば、のたまひさしつるも多かりける。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Tepra">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-tepraInLeft</h4>
</div>
<div class="chest-wrapper chestB ff-mincho pos-relative">
<p class="p-1r bgc-gray-50 scroll-tepraInLeft fasted-1">如月の二十日あまり、 南殿の桜の宴せさせたまふ。</p>
<p class="p-1r bgc-gray-50 scroll-tepraInLeft fasted-1 delayed-1">后、春宮の御局、左右にして、参う上りたまふ。</p>
<p class="p-1r bgc-gray-50 scroll-tepraInLeft fasted-1 delayed-2">弘徽殿の女御、中宮のかくておはするを、をりふしごとにやすからず思せど、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInLeft fasted-1 delayed-3">物見にはえ過ぐしたまはで、参りたまふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-tepraInRight</h4>
</div>
<div class="chest-wrapper chestB ff-mincho pos-relative">
<p class="p-1r bgc-gray-50 scroll-tepraInRight">世の中かはりて後、よろづもの憂く思され</p>
<p class="p-1r bgc-gray-50 scroll-tepraInRight delayed-1">御身のやむごとなさも添ふにや、軽々しき御忍び歩きもつつましうて</p>
<p class="p-1r bgc-gray-50 scroll-tepraInRight delayed-2">ここもかしこも、おぼつかなさの嘆きを重ねたまふ</p>
<p class="p-1r bgc-gray-50 scroll-tepraInRight delayed-3">報いにや、なほ我につれなき人の御心を、尽きせずのみ思し嘆く。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-tepraInTopLeft</h4>
</div>
<div class="chest-wrapper chestB ff-mincho pos-relative ov-hidden" style="padding-bottom: 14rem;">
<i class="pos-A scroll-fadeInLeft fasted-3"><img src="https://i.gyazo.com/a33b01d96334bdf78af017c04dbc80c2.png" alt="" /></i>
<i class="pos-A scroll-fadeInLeft delayed-1"><img src="https://i.gyazo.com/ef97591521495e71ab3438856ca57e1f.png" alt="" /></i>
<p class="p-1r bgc-gray-50 scroll-tepraInTopLeft">まことに憂しと思すことこそありけめと、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopLeft delayed-1">知り果てたまひぬれば、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopLeft delayed-2">よろづのあはれを思し捨てて、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopLeft delayed-3">ひたみちに出で立ちたまふ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-tepraInTopRight</h4>
</div>
<div class="chest-wrapper chestB ff-mincho pos-relative ov-hidden" style="padding-bottom: 14rem;">
<i class="pos-A scroll-fadeInRight fasted-3"><img src="https://i.gyazo.com/d22e39f045d81a17097c0d3489dd04c1.png" alt="" /></i>
<i class="pos-A scroll-fadeInRight delayed-1"><img src="https://i.gyazo.com/93229ad83a406dbabcf080d230a313a7.png" alt="" /></i>
<p class="p-1r bgc-gray-50 scroll-tepraInTopRight slowed-1">わづらはしう思し乱るることのみまされば、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopRight delayed-1 slowed-1">もの心細く、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopRight delayed-2 slowed-1">世の中なべて厭はしう思しならるるに、</p>
<p class="p-1r bgc-gray-50 scroll-tepraInTopRight delayed-3 slowed-1">さすがなること多かり。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-moveInBottom</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-moveInBottom">いとど、
かかる好きごとどもを、末の世にも聞き伝へて、軽びたる名をや流さむと、忍びたまひける隠ろへごとをさへ、語り伝へけむ人のもの言ひさがなさよ。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-moveInLeft</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-moveInLeft delayed-1">
今宵なむ、初めて憂しと世を思ひ知りぬれば、恥づかしくて、ながらふまじうこそ、思ひなりぬれなどのたまへば、涙をさへこぼして臥したり。いとらうたしと思す。</p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-moveInRight</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-moveInRight">
六条わたりの御忍び歩きのころ、内裏よりまかでたまふ中宿に、大弐の乳母のいたくわづらひて尼になりにける、とぶらはむとて、五条なる家尋ねておはしたり。</p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-growIn</h4>
</div>
<div class="chest-wrapper chestB">
<div class="shelf-wrapper shelfA">
<p class="p-1r bgc-gray-50 scroll-growIn"><img src="https://picsum.photos/seed/200/200"></p>
<p class="p-1r bgc-gray-50 scroll-growIn delayed-1"><img src="https://picsum.photos/seed/201/200"></p>
<p class="p-1r bgc-gray-50 scroll-growIn delayed-2"><img src="https://picsum.photos/seed/202/200"></p>
</div>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-growOut</h4>
</div>
<div class="chest-wrapper chestB">
<div class="shelf-wrapper shelfA">
<p class="p-1r bgc-gray-50 scroll-growOut slowed-1"><img src="https://picsum.photos/seed/200/200"></p>
<p class="p-1r bgc-gray-50 scroll-growOut slowed-1 delayed-1"><img src="https://picsum.photos/seed/201/200"></p>
<p class="p-1r bgc-gray-50 scroll-growOut slowed-2 delayed-2"><img src="https://picsum.photos/seed/202/200"></p>
</div>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-shrinkIn</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-shrinkIn slowed-1"><img src="https://picsum.photos/seed/648/340"></p>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-shrinkOut</h4>
</div>
<div class="chest-wrapper chestB">
<p class="p-1r bgc-gray-50 scroll-shrinkOut slowed-2"><img src="https://picsum.photos/seed/648/340"></p>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-flipIn">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-FlipIn</h4>
</div>
<div class="chest-wrapper chestB">
<i><img class="geo-LT1 scroll-flipInXUp delayed-0" src="https://i.gyazo.com/6f0f48d42b34984a0255de6a50a169b0.png"></i>
<i><img class="geo-RB2 scroll-flipInYBack delayed-1" src="https://i.gyazo.com/7427be496fb562a7b07354b466f4000c.png"></i>
<i><img class="geo-LB3 scroll-flipInYFore delayed-2" src="https://i.gyazo.com/8e45630307e591514a984a50a19d1096.png"></i>
<i><img class="geo-RT4 scroll-flipInXDown delayed-3" src="https://i.gyazo.com/3a2f6b92adcc7ffda735babca8aa67eb.png"></i>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Rotation">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-rotation</h4>
</div>
<div class="chest-wrapper chestB">
<i class="wheel-gear scroll-shrinkIn inflated-3 delayed-0"><img class="scroll-rotationDext slowed-3" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
<i class="wheel-gear scroll-shrinkIn inflated-2 delayed-1"><img class="scroll-rotationLevo slowed-2" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
<i class="wheel-gear scroll-shrinkIn inflated-1 delayed-2"><img class="scroll-rotationDext slowed-1" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
<i class="wheel-gear scroll-growOut inflated-1 delayed-0"><img class="scroll-rotationDext fasted-1" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
<i class="wheel-gear scroll-growOut inflated-2 delayed-1"><img class="scroll-rotationDext fasted-2" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
<i class="wheel-gear scroll-growOut inflated-3 delayed-2"><img class="scroll-rotationDext fasted-3" src="https://i.gyazo.com/31b409d6b30285e5fec313ae63260f1c.png" alt="" /></i>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-clockation</h4>
</div>
<div class="chest-wrapper chestC pos-relative">
<i class="clocker posfwv1 bezelfwv1">
<picture class="clocker-pinion pinionfwv1">
<img class="clocker-minutehand scroll-clockationDext slowed-10 delayed-0" src="https://i.gyazo.com/17be067debf985329e055b80acd79068.png" alt="長針" />
<img class="clocker-hourhand scroll-clockationDext slowed-90 delayed-1" src="https://i.gyazo.com/37df63dd54b7f043697e6218d0a4790d.png" alt="短針" />
</picture>
</i>
<i class="clocker posfwv2 bezelfwv1">
<picture class="clocker-pinion pinionfwv1 oclock-3">
<img class="clocker-minutehand scroll-clockationDext slowed-20 delayed-2" src="https://i.gyazo.com/17be067debf985329e055b80acd79068.png" alt="長針" />
<img class="clocker-hourhand scroll-clockationDext slowed-90 delayed-3" src="https://i.gyazo.com/37df63dd54b7f043697e6218d0a4790d.png" alt="短針" />
</picture>
</i>
<i class="clocker posfwv3 bezelfwv1">
<picture class="clocker-pinion pinionfwv1 oclock-7">
<img class="clocker-minutehand scroll-clockationDext slowed-30" src="https://i.gyazo.com/17be067debf985329e055b80acd79068.png" alt="長針" />
<img class="clocker-hourhand scroll-clockationDext slowed-90" src="https://i.gyazo.com/37df63dd54b7f043697e6218d0a4790d.png" alt="短針" />
</picture>
</i>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Encouration">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-encouration</h4>
</div>
<div class="chest-wrapper chestB">
<s class="suit-wandUp scroll-encourationToUp mr-6r"></s>
<s class="suit-wandDown scroll-encourationToDown mr-5r"></s>
<s class="suit-wandFore scroll-encourationToFore mr-4r"></s>
<s class="suit-wandBack scroll-encourationToBack mr-4r"></s>
<s class="suit-harpoonUp scroll-encourationToUp mr-6r"></s>
<s class="suit-harpoonDown scroll-encourationToDown mr-5r"></s>
<s class="suit-harpoonFore scroll-encourationToFore mr-4r"></s>
<s class="suit-harpoonBack scroll-encourationToBack"></s>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Chartation">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-chartation</h4>
</div>
<ul class="shelf-wrapper shelfA">
<li class="slide p-1r">
<div class="scroll-chartation chart-donut chartA delayed-0">
<figure class="chart-wrapper">
<svg class="chartbar">
<circle class="chartbar-track" cx="50%" cy="50%" r="50%"></circle>
<circle id="js-chartbarThumb1" class="chartbar-thumb" cx="50%" cy="50%" r="50%" data-percent="88">
</circle>
</svg>
<figcaption class="chart-central">
<h3 class="fz-lg"><b class="fz-xxxol">88</b>%</h4>
</figcaption>
</figure>
</div><!-- ///.scroll-chartation -->
</li>
<li class="slide p-1r">
<div class="scroll-chartation chart-donut chartB delayed-1 slowed-1">
<figure class="chart-wrapper">
<svg class="chartbar">
<circle class="chartbar-track" cx="50%" cy="50%" r="50%"></circle>
<circle id="js-chartbarThumb2" class="chartbar-thumb" cx="50%" cy="50%" r="50%" data-percent="77">
</circle>
</svg>
<figcaption class="chart-central">
<img src="https://i.gyazo.com/ab5db81322a6e4970e66749a1d1a58d4.png" alt="" />
</figcaption>
</figure>
</div><!-- ///.scroll-chartation -->
</li>
<li class="slide p-1r">
<div class="scroll-chartation chart-donut chartC delayed-2 slowed-2">
<figure class="chart-wrapper">
<svg class="chartbar">
<circle class="chartbar-track" cx="50%" cy="50%" r="50%"></circle>
<circle id="js-chartbarThumb3" class="chartbar-thumb" cx="50%" cy="50%" r="50%" data-percent="66">
</circle>
</svg>
<figcaption class="chart-central">
<h3 class="fz-lg"><b class="fz-xxxol">66</b>%</h4>
</figcaption>
</figure>
</div><!-- ///.scroll-chartation -->
</li>
</ul><!-- ///.shelf -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-looptationToFore</h4>
</div>
<div class="chest-wrapper chestD chestD1">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04A">
<li><img src="https://source.unsplash.com/640x480?animals" /></li>
<li><img src="https://source.unsplash.com/640x480?nature" /></li>
<li><img src="https://source.unsplash.com/640x480?people" /></li>
</template>
<div class="scroll-looptationToFore slowed-60">
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04A"></template>
</ul>
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04A"></template>
</ul>
</div>
</div>
<div class="chest-wrapper chestD chestD2">
<figure class="scroll-looptationToFore" style="height:200px;background: url(https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png);">
<picture class="loop-list"><img src="https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png" />
</picture>
<picture class="loop-list"><img src="https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png" />
</picture>
</figure>
</div>
<div class="chest-wrapper chestD chestD3">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04B">
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
</template>
<div class="scroll-looptationToFore slowed-90">
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04B"></template>
</ul>
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04B"></template>
</ul>
</div>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-looptationToBack</h4>
</div>
<div class="chest-wrapper chestD chestD1">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04D1">
<li><img src="https://source.unsplash.com/640x440?arch" /></li>
<li><img src="https://source.unsplash.com/640x440?people" /></li>
<li><img src="https://source.unsplash.com/640x440?tech" /></li>
</template>
<div class="scroll-looptationToBack slowed-60">
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04D1"></template>
</ul>
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04D1"></template>
</ul>
</div>
</div>
<div class="chest-wrapper chestD chestD2">
<figure class="scroll-looptationToBack" style="height: 200px; background: url(https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png);">
<picture class="loop-list"><img src="https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png" />
</picture>
<picture class="loop-list"><img src="https://i.gyazo.com/bc64ee9192c49e78699a010d59b24628.png" />
</picture>
</figure>
</div>
<div class="chest-wrapper chestD chestD3">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04D3">
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
</template>
<div class="scroll-looptationToBack slowed-90">
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04D3"></template>
</ul>
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04D3"></template>
</ul>
</div>
</div>
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-looptationToUp</h4>
</div>
<div class="chest-wrapper chestD chestD4 ta-center">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04D4">
<li><img src="https://source.unsplash.com/800x440?animals" /></li>
<li><img src="https://source.unsplash.com/800x440?nature" /></li>
<li><img src="https://source.unsplash.com/800x440?people" /></li>
</template>
<div class="scroll-looptationToUp slowed-60">
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04D4"></template>
</ul>
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04D4"></template>
</ul>
</div>
</div>
<div class="chest-wrapper chestD chestD5 ta-center">
<figure class="scroll-looptationToUp" style="height: 200px; background: url(https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png);">
<picture class="loop-list"><img src="https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png" />
</picture>
<picture class="loop-list"><img src="https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png" />
</picture>
</figure>
</div>
<div class="chest-wrapper chestD chestD6 ta-center">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04D6">
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
</template>
<div class="scroll-looptationToUp slowed-90">
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04D6"></template>
</ul>
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04D6"></template>
</ul>
</div>
</div>
<div class="hgroup-wrapper hgroupB">
<h4 class="fz-lg titolo titolo-subsection mb-0.5pc">scroll-looptationToDown</h4>
</div>
<div class="chest-wrapper chestD chestD4 ta-center">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04E4">
<li><img src="https://source.unsplash.com/800x400?arch" /></li>
<li><img src="https://source.unsplash.com/800x400?people" /></li>
<li><img src="https://source.unsplash.com/800x400?tech" /></li>
</template>
<div class="scroll-looptationToDown slowed-60">
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04E4"></template>
</ul>
<ul class="loop-list">
<template class="goreinu-inplace" data-id="P04E4"></template>
</ul>
</div>
</div>
<div class="chest-wrapper chestD chestD5 ta-center">
<figure class="scroll-looptationToDown" style="height:200px; background:url(https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png);">
<picture class="loop-list"><img src="https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png" />
</picture>
<picture class="loop-list"><img src="https://i.gyazo.com/29faa62520d968c28cffb98f9b81b7d0.png" />
</picture>
</figure>
</div>
<div class="chest-wrapper chestD chestD6 ta-center">
<!-- template-goreinu -->
<template class="goreinu-template" data-id="P04E6">
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
<li class="ml-2r">How to make a loop animation.</li>
</template>
<div class="scroll-looptationToDown slowed-90">
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04E6"></template>
</ul>
<ul class="p-1r bgc-gray-50 loop-list">
<template class="goreinu-inplace" data-id="P04E6"></template>
</ul>
</div>
</div>
</div><!-- ///.inner -->
</section>
</div><!-- ///▲page -->
<!-- mediano（余白調整：page下） -->
<hr class="adj-peji4ioA-medianoA" />
</div><!-- /.marble（総囲い） -->
<!-- PAGE TOP BUTTON -->
<!-- ¿php get_template_part('parts/pagebtn-group'); ¿ -->
<script>
//stylesheet：pageBtn-group.css
var insertSheet = document.createElement('link');
insertSheet.setAttribute('rel', 'stylesheet');
insertSheet.setAttribute('href', 'https://www.code-plus.jp/cdn/parts/pageBtn-group/pageBtn-group.css');
document.getElementsByTagName('head')[0].appendChild(insertSheet);
</script>
<!-- pageBtn-group：HTML -->
<div id="js-pageBtnGroup" class="pageBtn-group">
<a class="pageBtn pagetop-btn">
<figure class="hvr-balloonLftInLeft fz-xs"><b class="balloon-left">GO TO TOP</b></figure>
<picture class="pctgram igm-chevron-double-up" aria-label="GO TO TOP"></picture>
</a>
<a class="pageBtn pageup-btn">
<figure class="hvr-balloonLftInLeft fz-xs"><b class="balloon-left">UP（100vh）</b></figure>
<picture class="pctgram igm-chevron-up" aria-label="UP（100vh）"></picture>
</a>
<a class="pageBtn pagedown-btn">
<figure class="hvr-balloonLftIn