italia2024
Version:
Italia 2024 assets
970 lines (831 loc) • 38.1 kB
HTML
<head>
<!-- charset, iPhoneの自動認識機能OFF -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<meta name="theme-color" content="#FAFAFA">
<!-- 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)) {
//スマートフォンの場合
var screenWidth = window.screen.width;
if (screenWidth < 360) {
//CSSピクセル360px未満の場合
metaTag.content = "width=360";
} else {
metaTag.content = "width=device-width, initial-scale=1.0";
}
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
//タブレットの場合
metaTag.content = "width=1200";
} 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://www.code-plus.jp/cdn/commons/fonts/NotoSans/font-face.css" rel="stylesheet" media="print" onload='this.media="all"' />
<link href="https://www.code-plus.jp/cdn/commons/fonts/NotoSansJP/font-face.css" rel="stylesheet" media="print" onload='this.media="all"' />
<!-- ▼aboveFold：CSS, JS -->
<!-- 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;
}
.pg-sarapeji4ioa :is([href], [onclick]):is(:hover, :focus) {
opacity: 1;
}
/* Conpornent
====================================== */
/* .button */
.magique .pg-sarapeji4ioa .button {
min-width: unset;
width: 30.8%;
margin: 0.5em;
}
/* Icon（Material Symbols） */
[class^="sect-peji4ioA"] .icon {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 1.3em;
height: 0;
font-size: 1.3em;
}
[class^="sect-peji4ioA"] .icon::before {
position: relative;
top: 1px;
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
font-size: 130%;
/* Material Symbols */
font-family: 'Material Symbols Sharp';
font-variation-settings:
'FILL'0,
'wght'300;
}
/* 対角線 */
.pg-sarapeji4ioa .is-dialine {
position: relative;
}
.pg-sarapeji4ioa .is-dialine::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to bottom right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.5), transparent calc(50% + 1px)),
linear-gradient(to top right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.5), transparent calc(50% + 1px));
}
/* 中央線 */
.pg-sarapeji4ioa .is-midline {
position: relative;
}
.pg-sarapeji4ioa .is-midline::after {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.15), transparent calc(50% + 1px)),
linear-gradient(to bottom, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.15), transparent calc(50% + 1px));
}
/* Base
====================================== */
/* Paragraph（文字設定） */
.pg-sarapeji4ioa p {
display: block;
max-width: 100%;
line-height: clamp(1.645em, calc(1.645em + ((1vw - 0.225em) * 0.5875)), 1.88em);
letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
font-size: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.1563)), 15px);
font-weight: var(--fw-base);
}
.pg-sarapeji4ioa p[class*="ta-center"] {
text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}
/* Small（注釈・小字） */
.pg-sarapeji4ioa small {
display: block;
max-width: 100%;
line-height: 1.5;
letter-spacing: 0;
font-weight: 400;
}
.pg-sarapeji4ioa small[class*="ta-center"] {
text-indent: 0;
}
/* Emphasis（強調・中字） */
.pg-sarapeji4ioa em {
display: block;
max-width: 100%;
line-height: clamp(1.645em, calc(1.645em + ((1vw - 0.225em) * 0.5875)), 1.88em);
letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
font-size: clamp(15.3px, calc(15.3px + ((1vw - 3.6px) * 0.26563)), 17px);
font-weight: 500;
}
.pg-sarapeji4ioa em[class*="ta-center"] {
text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}
/* Strong（強調・大字） */
.pg-sarapeji4ioa strong {
display: block;
max-width: 100%;
line-height: 1.5;
letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
font-size: clamp(16.8px, calc(16.8px + ((1vw - 3.6px) * 1.125)), 24px);
font-weight: 500;
}
.pg-sarapeji4ioa strong[class*="ta-center"] {
text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}
/* small, em, strong（inline-block） */
.pg-sarapeji4ioa :is(p, h1, h2, h3, h4, h5, h6)>:is(small, em, strong) {
display: inline-block;
}
/* 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: clamp(0.05em, calc(0.05em + ((1vw - 0.225em) * 0.25)), 0.15em);
font-size: clamp(22.6px, calc(22.6px + ((1vw - 3.6px) * 2.5625)), 39px);
font-weight: 500;
}
.pg-sarapeji4ioa h1[class*="ta-center"] {
text-indent: clamp(0.05em, calc(0.05em + ((1vw - 0.225em) * 0.25)), 0.15em);
}
.pg-sarapeji4ioa h2 {
display: inline-block;
line-height: 1.5;
letter-spacing: clamp(0.04em, calc(0.04em + ((1vw - 0.225em) * 0.2)), 0.12em);
font-size: clamp(19.7px, calc(19.7px + ((1vw - 3.6px) * 2.0781)), 33px);
font-weight: 500;
}
.pg-sarapeji4ioa h2[class*="ta-center"] {
text-indent: clamp(0.04em, calc(0.04em + ((1vw - 0.225em) * 0.2)), 0.12em);
}
.pg-sarapeji4ioa h3 {
display: inline-block;
line-height: 1.5;
letter-spacing: clamp(0.03em, calc(0.03em + ((1vw - 0.225em) * 0.15)), 0.09em);
font-size: clamp(17.6px, calc(17.6px + ((1vw - 3.6px) * 1.4687)), 27px);
font-weight: 500;
}
.pg-sarapeji4ioa h3[class*="ta-center"] {
text-indent: clamp(0.03em, calc(0.03em + ((1vw - 0.225em) * 0.15)), 0.09em);
}
.pg-sarapeji4ioa h4 {
display: inline-block;
line-height: 1.5;
letter-spacing: clamp(0.02em, calc(0.02em + ((1vw - 0.225em) * 0.1)), 0.06em);
font-size: clamp(16.4px, calc(16.4px + ((1vw - 3.6px) * 0.7188)), 21px);
font-weight: 500;
}
.pg-sarapeji4ioa h4[class*="ta-center"] {
text-indent: clamp(0.02em, calc(0.02em + ((1vw - 0.225em) * 0.1)), 0.06em);
}
.pg-sarapeji4ioa h5 {
display: inline-block;
line-height: 1.5;
letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
font-size: clamp(15.6px, calc(15.6px + ((1vw - 3.6px) * 0.375)), 18px);
font-weight: 500;
}
.pg-sarapeji4ioa h5[class*="ta-center"] {
text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}
.pg-sarapeji4ioa h6 {
display: inline-block;
line-height: 1.5;
letter-spacing: 0;
font-size: clamp(14px, calc(14px + ((1vw - 3.6px) * 0.1563)), 15px);
font-weight: 500;
}
.pg-sarapeji4ioa h6[class*="ta-center"] {
text-indent: 0;
}
/* 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%;
object-fit: contain;
}
/* Utility
====================================== */
/* Pattern
====================================== */
/* .shelf（flex／横組み）
------------------------------------- */
.pg-sarapeji4ioa [class^="shelf-wrapper"] {
position: relative;
width: 100%;
height: auto;
}
.pg-sarapeji4ioa [class^="shelf-wrapper"]>:is(li, dd) {
position: relative;
width: 100%;
}
/* .shelf_sp */
@media print,
screen and (min-width: 744px) {
.pg-sarapeji4ioa .shelf-wrapper_sp {
/* Flex */
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.pg-sarapeji4ioa .shelf-wrapper_sp>:is(li, dd):nth-of-type(n+2) {
margin-top: 2pc;
}
}
@media screen and (max-width: 743.9px) {
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_sp) {
/* Flex */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_sp)>:is(li, dd) {
width: 48.5%;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_sp)>.fx-term,
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_sp)>.fx-full {
width: 100%;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_sp)>:is(li, dd):nth-of-type(n+3) {
margin-top: 2pc;
}
}
/* .shelf_pc */
@media screen and (max-width: 743.9px) {
.pg-sarapeji4ioa .shelf-wrapper_pc {
/* Flex */
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.pg-sarapeji4ioa .shelf-wrapper_pc>:is(li, dd):nth-of-type(n+2) {
margin-top: 2pc;
}
}
@media print,
screen and (min-width: 744px) {
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_pc) {
/* Flex */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_pc)>:is(li, dd) {
width: 31%;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_pc)>.fx-term,
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_pc)>.fx-full {
width: 100%;
}
.pg-sarapeji4ioa :is(.shelf-wrapper, .shelf-wrapper_pc)>:is(li, dd):nth-of-type(n+4) {
margin-top: 2pc;
}
}
/* Layout
====================================== */
/* .mezzala（余白調整：page上） */
.adj-peji4ioA-mezzalaA {
display: block;
width: 100%;
height: 0rem;
}
/* .mediano（余白調整：page下） */
.adj-peji4ioA-medianoA {
display: block;
width: 100%;
height: 3rem;
}
/* Section, Inner
====================================== */
.pg-sarapeji4ioa [class^="dept-"],
.pg-sarapeji4ioa [class^="sect-"] {
display: block;
width: 100%;
max-width: 100vw;
height: auto;
/* padding: 上 横 下 */
padding: 1.5rem 0px 2rem;
}
.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);
}
/* .intainer */
[class^="dept-"] .division__intainer,
[class^="sect-"] .section__intainer {
width: 1000px;
max-width: 92.5vw;
height: auto;
}
/* .hgroup（見出し） */
[class^="sect-peji4ioA"] .hgroup-wrapper {
position: relative;
margin-bottom: 0.5rem;
}
/* .chest（BOX） */
[class^="sect-peji4ioA"] .chest-wrapper {
position: relative;
padding: 1rem;
background: hsla(0, 0%, 98%, 1);
}
/* Section
-------------------------------------- */
.pg-sarapeji4ioa .sect-peji4ioA-Intro {
/* padding: 上 横 下 */
padding: 3rem 0px 3rem;
background: hsla(0, 0%, 100%, 1);
}
.pg-sarapeji4ioa .sect-peji4ioA-Intro,
.sect-peji4ioA-Intro .section__intainer,
.sect-peji4ioA-Intro .chest-wrapper {
background: hsla(0, 0%, 100%, 1);
}
/* .section
-------------------------------------- */
.pg-sarapeji4ioa [class*=fllow]>.fx-grow {
padding: 0.52em 0px 0.52em 1.25rem;
background: hsla(0, 0%, 100%, 1);
}
.pg-sarapeji4ioa [class*=fllow]>.fx-shrink {
padding: 0px;
}
/* .section
-------------------------------------- */
/* shelf（横組み） */
:is(.sect-peji4ioA-Filter, .sect-peji4ioA-BDFilter) .shelf-wrapper {
/* padding: 上 横 下 */
padding: 1rem 1.5rem 2rem;
}
:is(.sect-peji4ioA-Filter, .sect-peji4ioA-BDFilter) .shelf-wrapper>:is(li, dd) a {
position: relative;
background-image: url("https://i.gyazo.com/0be87a53a78065bec6647677b449a5e8.jpg");
}
</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,432,744,768,960,1200]},
{ "prop":"width", "prefix":"r", "mode":"markup", "breakpoints":[0,432,744,768,960,1200]}
]}'>
<!-- ▼marble（総囲い：bodyの下に背景作るjs等あるので別で囲む） -->
<div class="marble marble4ioA">
<!-- ★ホワイトアウト -->
<hr class="overload overload4efA" />
<!-- 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 h-0 material-symbols-sharp">home</i>HOME</a></li>
<li><a class="current_page_item">hoverlin.css</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">hoverlin.css</h2>
<p class="ta-center">（hover用CSS）</p>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestA">
<small>※class="hover-~"： 付与だけのアニメーション処理。</small>
<small>※delayed-0~6： 開始遅延クラス（delay） ※fasted-1~3, slowed-1~120：アニメーション速度クラス（duration）</small>
<small>※Intersection
Observer化（scrollTopでなく交差点基準による、Load時はコンテンツが表示されない問題の排除、及びJS処理の軽減化）。 ※現状要jQuary。</small>
<small>※調整用のクラス（delayed, fasted, slowed）のセレクタまとめ用に一部SCSS使用。</small>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-fadeIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-fadeIn</span><i class="icon h-0 mas ma-info hvr-fadeIn"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-fadeInTop</span><i class="icon h-0 mas ma-expand_more hvr-fadeInTop"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-fadeInBottom</span><i class="icon h-0 mas ma-expand_less hvr-fadeInBottom"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-fadeInLeft</span><i class="icon h-0 mas ma-chevron_right hvr-fadeInLeft"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-fadeInRight</span><i class="icon h-0 mas ma-chevron_left hvr-fadeInRight"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-bgIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-bgFadeIn return-false is-midline"><span class="fx-center h-0">hvr-bgFadeIn</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-bgInBottom return-false is-midline"><span class="fx-center h-0">hvr-bgInBottom</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-bgInLeft return-false is-midline"><span class="fx-center h-0">hvr-bgInLeft</span><i class="icon h-0 mas ma-chevron_right"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-bgOpenIn return-false is-midline"><span class="fx-center h-0">hvr-bgOpenIn</span><i class="icon h-0 mas ma-chevron_left"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-layIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-layFadeIn return-false is-midline"><span class="fx-center h-0">hvr-layFadeIn</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-layInBottom return-false is-midline"><span class="fx-center h-0">hvr-layInBottom</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-layInLeft return-false is-midline"><span class="fx-center h-0">hvr-layInLeft</span><i class="icon h-0 mas ma-chevron_right"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-layOpenIn return-false is-midline"><span class="fx-center h-0">hvr-layOpenIn</span><i class="icon h-0 mas ma-chevron_right"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-underlineIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-underlineFadeIn return-false is-midline"><span class="fx-center h-0">hvr-underlineFadeIn</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-underlineInBottom return-false is-midline"><span class="fx-center h-0">hvr-underlineInBottom</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-underlineInLeft return-false is-midline"><span class="fx-center h-0">hvr-underlineInLeft</span><i class="icon h-0 mas ma-chevron_right"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-underlineOpenIn return-false is-midline"><span class="fx-center h-0">hvr-underlineOpenIn</span><i class="icon h-0 mas ma-chevron_right"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-outlineIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-outlineFadeIn return-false is-midline"><span class="fx-center h-0">hvr-outlineFadeIn</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-outlineShutIn return-false is-midline"><span class="fx-center h-0">hvr-outlineShutIn</span><i class="icon h-0 mas ma-chevron_right"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-coatOut</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-coatFadeOut return-false is-midline"><span class="fx-center h-0">hvr-coatFadeOut</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-coatOutTop return-false is-midline"><span class="fx-center h-0">hvr-coatOutTop</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-coatOutBottom return-false is-midline"><span class="fx-center h-0">hvr-coatOutBottom</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-coatOutLeft return-false is-midline"><span class="fx-center h-0">hvr-coatOutLeft</span><i class="icon h-0 mas ma-chevron_right"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-coatOutRight return-false is-midline"><span class="fx-center h-0">hvr-coatOutRight</span><i class="icon h-0 mas ma-chevron_left"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-blurOut</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort hvr-blurFadeOut return-false is-midline"><span class="fx-center h-0">hvr-blurFadeOut</span><i class="icon h-0 mas ma-info"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-blurOutTop return-false is-midline"><span class="fx-center h-0">hvr-blurOutTop</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-blurOutBottom return-false is-midline"><span class="fx-center h-0">hvr-blurOutBottom</span><i class="icon h-0 mas ma-expand_less"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-blurOutLeft return-false is-midline"><span class="fx-center h-0">hvr-blurOutLeft</span><i class="icon h-0 mas ma-chevron_right"></i></a>
<a href="#" class="button is-large is-plain is-assort hvr-blurOutRight return-false is-midline"><span class="fx-center h-0">hvr-blurOutRight</span><i class="icon h-0 mas ma-chevron_left"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-moveTo</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort return-false is-midline">icon.hvr-moveToUp<i class="icon mas ma-expand_less hvr-moveToUp"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-moveToDown</span><i class="icon h-0 mas ma-expand_more hvr-moveToDown"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-moveToBack</span><i class="icon h-0 mas ma-chevron_left hvr-moveToBack"></i></a>
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><span class="fx-center h-0">icon.hvr-moveToFore</span><i class="icon h-0 mas ma-chevron_right hvr-moveToFore"></i></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-pushOutIn</h3>
</div><!-- ///.hgroup -->
<div class="chest-wrapper chestB">
<a href="#" class="button is-large is-plain is-assort return-false is-midline"><ruby class="hvr-pushOutIn">
<rb>hvr-pushOutIn</span><i class="icon h-0 mas ma-info"></i></rb>
<rt>Ruby Text</rt>
</ruby></a>
</div><!-- ///.chest -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Grow">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupB">
<h3 class="titolo titolo-section">hvr-grow, hvr-shrink</h3>
</div><!-- ///.hgroup -->
<ul class="shelf-wrapper shelfA">
<li class="slide" style="width:32%">
<a href="#" class="bd-outline is-shadowed return-false is-midline">
<dl class="fllowA1">
<dt class="fx-shrink ov-hidden">
<img class="lazy hvr-grow" loading="lazy" src="https://i.gyazo.com/8f2d2da2b26ccde4b41bc1dfbfbc704e.jpg" alt="" />
</dt>
<dd class="fx-grow ov-hidden d-iflex">
<h4 class="titolo titolo-subsection m-auto">hvr-grow<i class="icon h-0 mas ma-info hvr-grow"></i></h4>
</dd>
</dl><!-- ///.fllow -->
</a>
</li>
<li class="slide" style="width:32%">
<a href="#" class="bd-outline is-shadowed return-false is-midline">
<dl class="fllowA1">
<dt class="fx-shrink ov-hidden">
<img class="lazy hvr-shrink" loading="lazy" src="https://i.gyazo.com/7a5f042a7259015f80366f1b0bf3ab78.jpg" alt="" />
</dt>
<dd class="fx-grow ov-hidden d-iflex">
<h4 class="titolo titolo-subsection m-auto">hvr-shrink<i class="icon h-0 mas ma-info hvr-shrink"></i>
</h4>
</dd>
</dl><!-- ///.fllow -->
</a>
</li>
<li class="slide" style="width:32%">
<a href="#" class="bd-outline is-shadowed return-false is-midline">
<dl class="fllowA1">
<dt class="fx-shrink ov-hidden">
<img class="lazy" loading="lazy" src="https://i.gyazo.com/ff509c4c04d8a2c3eef9d9f98db4d066.jpg" alt="" />
</dt>
<dd class="fx-grow ov-hidden d-iflex">
<h4 class="titolo titolo-subsection m-auto">hvr-none<i class="icon h-0 mas ma-info"></i></h4>
</dd>
</dl><!-- ///.fllow -->
</a>
</li>
</ul><!-- ///.shelf -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Filter">
<div class="section__intainer innerA mx-auto">
<div class="hgroup-wrapper hgroupA pb-1r bd-bottom">
<h3 class="titolo">hover: filter & Backdrop-Filter</h3>
</div><!-- ///.hgroup -->
<dl class="shelf-wrapper shelfA">
<dt class="fx-term">
<h6 class="titolo">Ness（~の状態になる）</h6>
</dt>
<dd class="drift">
<a href="#" class="captioned return-false is-midline ">
<img class="hvr-brightNess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-brightNess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-darkNess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-darkNess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-contrastNess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-contrastNess</b>
</a>
</dd>
</dl><!-- ///.shelf -->
<dl class="shelf-wrapper shelfA">
<dt class="fx-term">
<h6 class="titolo">Less（~の状態でなくなる）</h6>
</dt>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-grayLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-grayLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-brightLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-brightLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-whiteLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-whiteLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-darkLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-darkLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-blackLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-blackLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-blurLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs ">hvr-blurLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-contrastLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-contrastLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-hueRotateLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-hueRotateLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned return-false is-midline">
<img class="hvr-saturateLess" src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-plain is-text fz-xs">hvr-saturateLess</b>
</a>
</dd>
</dl><!-- ///.shelf -->
</div><!-- ///.inner -->
</section>
<!-- section -->
<section class="sect-peji4ioA-Filter">
<div class="section__intainer innerA mx-auto">
<dl class="shelf-wrapper shelfA bgc-gray-800">
<dt class="fx-term">
<h6 class="titolo c-white">bdf-Ness（~の状態になる）</h6>
</dt>
<dd class="drift">
<a href="#" class="captioned hvr-bdfBrightNess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm">hvr-bdfBrightNess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfDarkNess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm">hvr-bdfDarkNess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfContrastNess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm">hvr-bdfContrastNess</b>
</a>
</dd>
</dl><!-- ///.shelf -->
<dl class="shelf-wrapper shelfA bgc-gray-800">
<dt class="fx-term">
<h6 class="titolo c-white">bdf-Less（~の状態でなくなる）</h6>
</dt>
<dd class="drift">
<a href="#" class="captioned hvr-bdfGrayLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfGrayLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfBrightLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfBrightLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfWhiteLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfWhiteLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfDarkLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfDarkLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfBlackLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfBlackLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfBlurLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfBlurLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfContrastLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfContrastLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfHueRotateLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfHueRotateLess</b>
</a>
</dd>
<dd class="drift">
<a href="#" class="captioned hvr-bdfSaturateLess"><img src="https://i.gyazo.com/ab71aa47cd0cd744316b42a960b25d6b.png" alt="" />
<b class="pinbadgeA1 badge is-melt is-text fz-sm ">hvr-bdfSaturateLess</b>
</a>
</dd>
</dl><!-- ///.shelf -->
</div><!-- ///.inner -->
</section>
</div><!-- ///▲page -->
<!-- mediano（余白調整：page下） -->
<hr class="adj-peji4ioA-medianoA" />
</div><!-- /.marble（総囲い） -->
<!-- ▼pageBtn-group.php -->
<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 -->
<figure id="js-pageBtnGroup" class="pageBtn-group pageBtn-square">
<a class="pageBtn pageBtn-top" onclick>
<i class="icon mas ma-keyboard_double_arrow_up d-none_pc"></i>
<i class="icon mas ma-keyboard_arrow_up d-none_sp"></i>
</a>
<a class="pageBtn pageBtn-up d-none_pc" onclick>
<i class="icon mas ma-keyboard_arrow_up"></i>
</a>
<a class="pageBtn pageBtn-down d-none_pc" onclick>
<i class="icon mas ma-keyboard_arrow_down"></i>
</a>
<a class="pageBtn pageBtn-bottom d-none_pc" onclick>
<i class="icon mas ma-keyboard_double_arrow_down"></i>
</a>
</figure>
<!-- pageBtn-group：JS -->
<script src="https://www.code-plus.jp/cdn/parts/pageBtn-group/pageBtn-group.js"></script>
<!-- ///▲pageBtn-group.php -->
<!-- ▼CSS, JS（Async & Defer & Below Fold） -->
<script src="https://www.code-plus.jp/cdn/js/add-isLoaded.js"></script>
<script src="https://www.code-plus.jp/cdn/js/async-defer-below.js"></script>
</body>