<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVGでテキストアニメーション</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hamburgers.css">
</head>
<body>
<header>
<h1><img src="img/txt.svg" alt=""></h1>
<p class="hamburger hamburger--spin" id="btn">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="access.html">access</a></li>
<li><a href="#">ボタン３</a></li>
<li><a href="#">ボタン４</a></li>
</ul>
</nav>
<nav id="g-nav-sp">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="access.html">access</a></li>
<li><a href="#">ボタン３</a></li>
<li><a href="#">ボタン４</a></li>
</ul>
</nav>
<div class="main-visual">
<img src="https://placehold.jp/3d4070/ffffff/1920x900.png" alt="">
</div>
<div class="svg-wrapper">
<div class="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 471.5 109.8" style="enable-background:new 0 0 471.5 109.8;" xml:space="preserve">
<path class="txt"id="XMLID_3_" d="M31.7,27.2c-0.4,0.6-0.9,1.6-1.5,3c-0.6,1.4-1.2,3-1.9,4.8c-0.6,1.8-1.3,3.8-1.9,5.8c-0.6,2-1.2,4-1.8,5.7
c-0.5,1.8-1,3.4-1.4,4.7c-0.4,1.4-0.6,2.2-0.7,2.7c-0.1,0.5-0.3,1.3-0.5,2.4c-0.3,1-0.5,1.9-0.7,2.7c5.3-1.8,10.6-3.3,15.8-4.5
c5.2-1.2,10.4-1.8,15.6-1.8c0.8,0,1.9,0,3.2,0.1c1.3,0,2.6,0.2,3.9,0.5c1.3,0.3,2.4,0.8,3.3,1.5c0.9,0.7,1.4,1.6,1.4,2.9
c0,0,0,0.3-0.1,0.9c0,0.5-0.2,1.2-0.4,1.9c-0.2,0.7-0.6,1.4-1.1,2.1s-1.2,1.2-2,1.6c-0.5,0-1-0.1-1.5-0.1s-1,0-1.5,0
c-3.4,0-6.8,0.3-10.2,0.9c-3.4,0.6-6.8,1.4-10.3,2.4c-3.4,1-6.9,2.2-10.3,3.6c-3.4,1.4-6.8,2.9-10.3,4.5l-7.2,31.2
c-0.1,0.8-0.5,1.5-1.2,2.2c-0.7,0.6-1.4,1-2,1H4.8c-1.8,0-3.1-0.7-3.7-2.2c-0.7-1.5-1-3.4-1-5.7c0-1.9,0.2-4.1,0.5-6.4
c0.3-2.3,0.7-4.6,1.1-6.7c0.4-2.2,0.8-4.2,1.1-6c0.3-1.8,0.5-3.2,0.5-4.1c-0.6-0.8-1.1-1.7-1.7-2.6c-0.6-0.9-0.9-2-0.9-3.4
c0-2.1,0.5-3.8,1.6-5c1.1-1.2,2.5-2.4,4.3-3.6c0.2-0.1,0.4-0.4,0.6-0.8c0.2-0.4,0.4-0.8,0.6-1.3c0.2-0.5,0.3-1,0.4-1.4
c0.1-0.5,0.2-0.9,0.3-1.2l2.9-10.6c1.1-4.1,2.2-7.8,3.1-10.9c0.9-3.1,1.7-5.9,2.5-8.4c0.8-2.5,1.5-4.7,2.1-6.7
c0.6-2,1.3-3.9,1.9-5.7c0.2-0.6,0.5-1.5,1-2.6c0.5-1.1,1-2.3,1.6-3.4c0.6-1.1,1.4-2,2.2-2.9c0.8-0.8,1.7-1.2,2.6-1.2
c2.1,0,3.6,0.2,4.4,0.5s1.3,0.8,1.5,1.4l0.6,1.6c0.8-0.1,1.8-0.3,3.2-0.5c1.4-0.3,2.9-0.6,4.3-0.9c1.5-0.3,2.9-0.7,4.2-1
c1.3-0.3,2.2-0.6,2.8-0.7c3.2-0.9,6.1-1.6,8.8-2.2c2.7-0.6,5.2-1.1,7.6-1.5c2.4-0.4,4.7-0.7,6.8-0.9c2.2-0.2,4.4-0.3,6.6-0.3
c1,0,2,0,2.9,0.1C83.2,2.8,84,3,84.7,3.2c0.6,0.3,1.2,0.6,1.5,1.1c0.4,0.5,0.6,1.2,0.6,2c0,0.4-0.1,1-0.3,1.6
c-0.2,0.6-0.5,1.3-0.9,1.9s-1,1.2-1.7,1.8c-0.7,0.6-1.7,1-2.7,1.3c-0.3,0.1-0.9,0.2-1.8,0.4c-0.9,0.2-1.8,0.3-3,0.5
c-1.1,0.2-2.3,0.4-3.6,0.6c-1.3,0.2-2.5,0.4-3.6,0.6c-1.8,0.4-3.8,0.9-6.1,1.4c-2.3,0.5-4.6,1.1-7.1,1.7c-2.4,0.6-4.9,1.3-7.4,2
c-2.5,0.7-4.8,1.5-7,2.2c-2.2,0.8-4.1,1.5-5.9,2.4C34,25.5,32.7,26.4,31.7,27.2z"/>
<path class="txt"id="XMLID_5_" d="M78.7,98.9c0-1.7,0.2-3.4,0.7-5.3c1.6-6.5,3.5-12.8,5.7-19c2.2-6.2,4.1-12.4,5.9-18.5
c1.8-6.1,3.2-11.3,4.4-15.5c1.2-4.2,2.2-7.8,3.1-10.8c0.9-3,1.7-5.6,2.5-7.8c0.8-2.2,1.6-4.3,2.5-6.5c0.6-1.3,1.2-2.6,1.9-4
c0.7-1.4,1.4-2.6,2.2-3.8c0.8-1.2,1.7-2.1,2.5-2.9c0.9-0.7,1.8-1.1,2.7-1.1c1.9,0,3.4,0.3,4.5,1c1,0.6,1.7,1.2,1.9,1.7l0.6,2.9
c0.7,0,1.6-0.2,2.8-0.4s2.3-0.4,3.5-0.7c1.2-0.2,2.2-0.5,3.2-0.7c1-0.2,1.8-0.5,2.3-0.6c3.1-0.9,6-1.6,8.7-2.2
c2.7-0.6,5.2-1.1,7.6-1.5c2.4-0.4,4.7-0.7,6.9-0.9c2.2-0.2,4.4-0.3,6.6-0.3c2.2,0,4,0.1,5.3,0.4c1.4,0.2,2.5,0.6,3.3,1
c0.8,0.4,1.4,0.9,1.7,1.4c0.3,0.5,0.5,1.1,0.5,1.7c0,0.6-0.2,1.2-0.5,1.8c-0.3,0.6-0.8,1.2-1.5,1.8s-1.6,1.1-2.8,1.5
s-2.6,0.7-4.3,0.9c-0.4,0.1-1.4,0.3-3,0.5c-1.5,0.3-3.2,0.5-5,0.9c-1.8,0.3-3.5,0.6-5.1,0.9c-1.6,0.3-2.7,0.5-3.4,0.6h0.1
c-0.3,0-1,0.2-2,0.5c-1.1,0.3-2.4,0.7-3.9,1.1c-1.5,0.4-3.2,0.9-5,1.4c-1.8,0.5-3.5,1-5.3,1.5c-1.7,0.5-3.3,1-4.8,1.4
c-1.5,0.5-2.7,0.8-3.6,1.1c-2.9,1.1-5.2,2.6-6.8,4.5c-1.6,1.9-2.9,4-3.9,6.3c-0.2,0.4-0.5,1.2-0.9,2.2c-0.4,1-0.8,2.2-1.2,3.5
c-0.5,1.3-0.9,2.7-1.5,4.2c-0.5,1.5-1,2.9-1.5,4.2c-0.5,1.3-0.9,2.5-1.2,3.6c-0.4,1.1-0.6,1.9-0.7,2.4c-0.1,0.5-0.2,0.9-0.3,1.3
c0,0.4-0.1,0.7-0.1,0.9c0,0.3,0.1,0.4,0.2,0.4c0.7,0,2.2-0.3,4.5-1c2.3-0.6,4.9-1.4,7.9-2.4c3-1,6.2-2,9.7-3.1
c3.4-1.1,6.7-2.1,9.9-3.1c3.2-1,6-1.7,8.4-2.4c2.5-0.6,4.3-1,5.3-1c1.7,0,2.8,0.3,3.4,0.8c0.6,0.5,0.9,1.2,0.9,1.8
c0,1.7-0.6,3.2-1.8,4.5s-2.7,2.4-4.5,3.4c-0.6,0.3-1.6,0.7-3.2,1.2c-1.5,0.5-3.2,1.1-5,1.7s-3.5,1.1-5.1,1.6
c-1.6,0.5-2.8,0.9-3.5,1.1c-4.7,1.8-8.4,3.3-11.4,4.5c-2.9,1.2-5.3,2.1-7.1,2.9c-1.8,0.7-3.2,1.3-4.2,1.7c-1,0.4-1.9,0.7-2.7,1
c-0.8,0.3-1.7,0.5-2.7,0.7c-1,0.2-2.4,0.6-4.1,1c-0.4,1-0.9,2.5-1.5,4.5c-0.6,2-1.1,4.1-1.6,6.3c-0.5,2.2-1,4.2-1.3,6S94,91,94,91.7
c0,0.9,0.1,1.5,0.4,1.9c0.2,0.4,0.5,0.7,0.9,0.8c0.3,0.1,0.7,0.2,1,0.2c0.3,0,0.6,0,0.8,0c2.3,0,5-0.3,8.2-1
c3.2-0.7,6.4-1.5,9.5-2.6c3-1,5.6-2.2,7.8-3.4c2.2-1.2,4.3-2.4,6.3-3.5c2-1.1,3.9-2,5.8-2.7c1.9-0.7,3.9-1.1,6.2-1.2
c0.5,0,1,0,1.7,0.1c0.6,0.1,1.2,0.3,1.8,0.5c0.6,0.3,1,0.6,1.4,1s0.5,1,0.4,1.6c-0.2,1.4-0.9,2.7-2.1,4.1c-1.2,1.3-2.7,2.6-4.5,3.8
c-1.8,1.2-3.8,2.4-6.1,3.6c-2.2,1.1-4.5,2.2-6.8,3.2c-2.3,1-4.6,1.9-6.8,2.8c-2.2,0.8-4.2,1.6-6,2.2c-4.4,1.5-8.6,2.6-12.8,3.4
s-7.8,1.1-11.1,1.1c-3.6,0-6.4-0.7-8.3-2S78.7,102.1,78.7,98.9z"/>
<path class="txt"id="XMLID_7_" d="M174.6,67.4c2.1-6.6,4.2-12.9,6.1-18.9c1.9-6,3.7-11.6,5.2-16.8s2.7-9.7,3.6-13.6c0.9-3.9,1.4-7.1,1.5-9.4
c0.6-2.2,1.6-4,3-5.3c1.4-1.3,3.1-2,5-2c1.1,0,2.1,0.3,2.9,0.8c0.8,0.5,1.5,1.2,2,2.1s0.9,1.8,1.1,2.9c0.2,1.1,0.4,2.2,0.4,3.2
c0,0.8,0,1.5-0.1,2.2c-0.1,0.7-0.2,1.3-0.4,1.9c-1.1,4.4-2.4,8.9-3.9,13.5c-1.5,4.7-3.1,9.4-4.7,14.2c-1.6,4.8-3.2,9.6-4.7,14.4
c-1.6,4.8-3,9.5-4.2,14.1l-1.3,4.8c-0.7,2.5-1.2,4.8-1.7,7.1c-0.5,2.2-0.7,4-0.7,5.4c0,0.8,0.1,1.4,0.4,1.8c0.3,0.5,0.8,0.7,1.6,0.7
c1.9,0,4.2-0.3,6.8-1c2.6-0.6,5.3-1.4,8.1-2.4c2.8-0.9,5.6-1.9,8.4-3.1c2.8-1.1,5.3-2.2,7.7-3.2c1.2-0.5,2.3-1,3.2-1.4
c0.9-0.4,2-0.8,3.3-1.4c1.3-0.5,3.1-1.3,5.2-2.2c2.2-0.9,5.2-2.2,9.1-3.8c0.7-0.2,1.2-0.4,1.7-0.6c0.5-0.2,1-0.2,1.4-0.2
c0.8,0,1.4,0.1,2,0.4c0.5,0.3,1,0.7,1.3,1.1c0.3,0.5,0.5,1,0.7,1.6c0.1,0.6,0.2,1.2,0.2,1.9c0,1-0.1,2-0.3,2.7
c-0.2,0.8-0.3,1.4-0.5,2c-0.6,0.9-1.3,1.7-2.2,2.5c-0.9,0.7-1.9,1.4-2.9,1.9c-1,0.5-2,1-2.9,1.4c-1,0.4-1.7,0.7-2.4,0.9
c-0.8,0.3-1.8,0.7-3,1.1c-1.3,0.5-2.6,1-4.1,1.6c-1.5,0.6-3,1.2-4.6,1.7c-1.6,0.6-3,1.2-4.4,1.7c-1.4,0.5-2.6,1-3.7,1.4
c-1.1,0.4-1.8,0.7-2.2,0.8c-2,0.8-4.3,1.6-6.8,2.6c-2.5,1-5,1.9-7.4,2.7c-2.5,0.9-4.8,1.6-7,2.2c-2.2,0.6-4.1,0.9-5.5,0.9
c-1.8,0-3.2-0.1-4.2-0.4c-1-0.3-1.9-0.7-2.7-1.2c-0.8-0.5-1.6-1.1-2.5-1.8c-0.8-0.7-1.9-1.5-3.3-2.4c-1.2-0.8-2.1-1.8-2.6-3.1
c-0.5-1.3-0.8-2.8-0.8-4.3c0-0.8,0.1-1.6,0.2-2.6c0.1-1,0.3-2,0.5-3.1c0.2-1.1,0.4-2.2,0.6-3.2c0.2-1,0.5-2,0.8-2.8L174.6,67.4z"/>
<path class="txt"id="XMLID_9_" d="M263.8,63.3c0.4-1.9,0.9-3.9,1.5-6.2c0.6-2.3,1.2-4.6,1.9-7c0.7-2.4,1.4-4.9,2.1-7.3c0.7-2.5,1.4-4.8,2.1-7.1
c0.7-2.3,1.3-4.4,1.9-6.4c0.6-2,1.1-3.6,1.5-5c0.9-3.1,1.8-6.2,2.6-9.3c0.8-3.1,1.6-6.4,2.4-9.8c1-1.9,2.2-3.2,3.8-4
c1.6-0.8,3.4-1.2,5.3-1.2c1.5,0.8,2.7,1.9,3.6,3.3c0.9,1.4,1.3,3,1.3,4.7c0,1.2-0.2,2.6-0.6,4.2c-0.4,1.6-0.9,3.3-1.5,5.1
c-0.6,1.8-1.3,3.8-2.1,5.8c-0.8,2-1.5,4.1-2.2,6.2c-1.3,3.9-2.7,7.8-4,11.7c-1.3,3.9-2.6,8-3.9,12.3c-0.3,1.1-0.7,2.3-1.1,3.4
c-0.4,1.1-0.8,2.4-1.2,3.7c-0.4,1.3-0.8,2.8-1.3,4.5c-0.5,1.6-1,3.5-1.4,5.7c-0.6,2.5-1.1,5.1-1.5,7.6c-0.4,2.5-0.8,5.1-1.2,7.7
c-0.4,2.6-0.8,5.2-1.3,7.8c-0.5,2.6-1,5.3-1.7,7.9c-0.2,1-0.7,1.8-1.2,2.5c-0.6,0.7-1.3,1.4-2,1.9c-0.8,0.5-1.6,0.9-2.4,1.2
s-1.7,0.4-2.4,0.4c-0.8,0-1.5-0.1-2.2-0.2c-0.7-0.1-1.2-0.4-1.6-0.8c-0.6-0.6-1-1.3-1.4-2.1c-0.3-0.8-0.5-1.6-0.5-2.4
c0-0.2,0-0.5,0-0.7c0-0.2,0.1-0.4,0.1-0.7L263.8,63.3z"/>
<path class="txt"id="XMLID_11_" d="M298.9,73.9c0-2.8,0.3-5.9,1-9.4c0.7-3.5,1.8-6.9,3.5-10.2c2.3-4.6,4.8-9,7.6-13.2c2.8-4.3,5.7-8.2,8.6-11.8
c2.9-3.6,5.9-6.8,8.8-9.6c2.9-2.8,5.8-5,8.4-6.5l-0.1,0.1c1.7-1,3.4-2.1,5.3-3.3s3.8-2.2,5.7-3.1c1.9-1,3.9-1.7,5.9-2.4
c2-0.6,4-0.9,5.9-0.9c2,0,3.9,0.4,5.7,1.2c1.8,0.8,3.4,1.9,4.7,3.3c1.4,1.4,2.4,3,3.2,4.9c0.8,1.9,1.2,3.8,1.2,5.9
c0,1.5-0.1,2.6-0.3,3.5c-0.2,0.8-0.4,1.5-0.8,1.9c-0.4,0.4-0.8,0.7-1.4,0.8c-0.5,0.1-1.2,0.1-1.9,0.1c-1,0-1.9-0.2-2.5-0.7
c-0.6-0.5-1.1-1-1.4-1.6c-0.4-0.6-0.6-1.4-0.8-2.1c-0.2-0.8-0.4-1.5-0.7-2.1c-0.3-0.6-0.6-1.2-1-1.6c-0.4-0.5-1-0.7-1.7-0.7
c-1.9,0-4,0.4-6.2,1.3c-2.2,0.9-4.5,2-6.8,3.4c-2.3,1.4-4.6,3.1-6.9,4.9c-2.3,1.8-4.5,3.7-6.6,5.6c-2.1,1.9-4,3.8-5.8,5.6
c-1.8,1.9-3.3,3.5-4.6,5c-1.9,2.4-3.6,4.9-5.2,7.4s-2.9,5-4.1,7.6c-1.1,2.6-2,5.3-2.6,8c-0.6,2.7-0.9,5.6-0.9,8.5c0,2.3,0.3,4.3,1,6
c0.6,1.7,1.3,3.2,2.1,4.4c0.9,1.4,2,2.4,3.4,3c1.3,0.5,2.9,0.8,4.8,0.8c4,0,7.8-0.4,11.2-1.1c3.4-0.8,6.7-1.8,9.8-3.1
s6.2-2.8,9.2-4.6c3-1.8,6.1-3.6,9.3-5.6h1.9c0.6,0,1.2,0.2,1.9,0.5c0.6,0.3,1.2,0.8,1.7,1.3c0.5,0.5,0.9,1.1,1.2,1.8
c0.3,0.7,0.5,1.4,0.5,2.1c0,1.6-0.6,3.1-1.9,4.7c-1.2,1.5-2.8,3-4.7,4.4c-1.9,1.4-4.1,2.7-6.5,4c-2.4,1.2-4.8,2.3-7.2,3.3
c-2.4,1-4.6,1.8-6.6,2.4c-2,0.7-3.7,1.1-4.9,1.4c-1,0.2-2.1,0.5-3,0.7c-1,0.2-2.1,0.4-3.5,0.6c-1.3,0.2-2.9,0.4-4.8,0.5
c-1.9,0.1-4.2,0.2-7,0.2c-1.7,0-3.3-0.3-4.7-0.8c-1.4-0.5-2.7-1.2-3.8-1.9c-1.1-0.7-2.1-1.5-2.9-2.3c-0.8-0.8-1.4-1.5-1.9-2.1
c-2.8-3.3-4.8-6.5-6.1-9.7C299.6,81.2,298.9,77.7,298.9,73.9z"/>
<path class="txt"id="XMLID_13_" d="M446.9,105c-1,0-1.9-0.2-2.6-0.6c-0.8-0.4-1.4-0.9-1.9-1.5c-0.5-0.6-0.9-1.3-1.1-2.1
c-0.3-0.8-0.4-1.6-0.4-2.4c0-0.7,0.2-1.7,0.6-3c0.4-1.3,0.9-2.7,1.5-4.2c0.6-1.6,1.2-3.2,2-4.9s1.4-3.4,2.1-4.9
c0.7-1.6,1.2-3,1.7-4.3c0.5-1.3,0.8-2.4,1-3.1c0.2-0.9,0.4-1.9,0.7-3.1c0.3-1.2,0.6-2.5,1-3.9c0.4-1.4,0.7-2.9,1.1-4.4
c0.4-1.5,0.7-3.1,1.1-4.7c-0.7,0.1-1.5,0.3-2.5,0.4c-1,0.1-2,0.2-3.1,0.3c-1.6,0.1-3.1,0.4-4.6,0.6c-1.5,0.3-3.1,0.6-4.7,1
c-1.6,0.4-3.2,0.7-5,1.1c-1.7,0.4-3.5,0.8-5.5,1.2c-2.9,0.6-5.7,1.3-8.6,2.1c-2.9,0.8-5.8,1.1-8.9,1.1c-1,0-1.8-0.2-2.6-0.7
c-0.8-0.5-1.7-0.9-2.7-1.1c-1,1.5-1.9,3.1-2.7,4.9c-0.9,1.7-1.6,3.5-2.4,5.3c-0.7,1.8-1.4,3.6-1.9,5.4s-1.1,3.5-1.5,5
c-0.2,0.9-0.4,2-0.6,3.3c-0.2,1.4-0.3,2.7-0.5,4.1c-0.1,1.4-0.3,2.7-0.4,4s-0.3,2.3-0.4,3.1c-0.1,0.7-0.4,1.4-0.9,2.1
c-0.4,0.7-1,1.3-1.6,1.9c-0.6,0.6-1.3,1-2.1,1.4c-0.8,0.4-1.5,0.5-2.3,0.5c-1.3,0-2.4-0.4-3.2-1.2c-0.8-0.8-1.5-1.8-2-2.9
c-0.5-1.2-0.8-2.4-1-3.8c-0.2-1.4-0.3-2.6-0.3-3.8c0-2.9,0.4-5.9,1.1-9c0.7-3.1,1.7-6.3,2.9-9.5c1.2-3.2,2.6-6.4,4.3-9.7
c1.6-3.3,3.4-6.5,5.3-9.7c1.6-2.9,3.5-6.2,5.8-10.1c2.3-3.8,4.9-7.7,7.8-11.7c2.9-4,6-7.9,9.3-11.8c3.3-3.8,6.8-7.3,10.4-10.3
c3.6-3,7.3-5.5,11.1-7.3c3.8-1.9,7.6-2.8,11.3-2.8c3.9,0,7.2,0.7,9.9,2.1c2.6,1.4,4.7,3.4,6.3,5.8s2.7,5.3,3.3,8.5
c0.6,3.2,1,6.7,1,10.3c0,3.2-0.2,6.5-0.6,9.8c-0.4,3.4-0.9,6.7-1.5,9.9c-0.6,3.2-1.2,6.3-1.9,9.3c-0.7,3-1.3,5.7-1.9,8.1l-2.5,9.7
c-0.1,0.3-0.3,0.9-0.5,1.7c-0.3,0.9-0.6,1.9-1,3.1c-0.4,1.2-0.9,2.5-1.4,3.9c-0.5,1.4-1,2.8-1.5,4.1c-0.5,1.4-1,2.6-1.4,3.7
c-0.5,1.1-0.8,2.1-1.2,2.8l0.1-0.1c-0.3,1.2-0.7,2.5-1.1,3.8c-0.4,1.3-0.9,2.4-1.6,3.5c-0.7,1-1.5,1.9-2.6,2.5
C449.9,104.7,448.6,105,446.9,105z M450.5,15.8c-2.1,0-4.3,0.4-6.4,1.3c-2.1,0.9-4.2,2-6.2,3.5c-2,1.4-4,3.1-6,5
c-1.9,1.9-3.8,3.8-5.5,5.8c-1.7,2-3.4,4-4.9,6c-1.5,2-2.9,3.9-4.1,5.6c-0.2,0.3-0.4,0.7-0.7,1.1c-0.3,0.5-0.6,1-0.9,1.5
c-0.3,0.5-0.6,1.1-0.9,1.7c-0.3,0.6-0.5,1.1-0.7,1.6h7.3c2.7,0,5.7-0.2,9.1-0.6c3.4-0.4,6.8-0.8,10.2-1.4c3.3-0.5,6.4-1.1,9.2-1.6
c2.8-0.5,4.9-1,6.3-1.2c0.2-0.6,0.4-1.4,0.5-2.5c0.2-1,0.3-2.2,0.5-3.5s0.3-2.6,0.3-4.1c0.1-1.4,0.1-2.9,0.1-4.5
c0-1.2,0-2.6-0.1-4.2c-0.1-1.6-0.4-3.1-0.9-4.5c-0.5-1.4-1.2-2.6-2.2-3.6C453.7,16.2,452.3,15.8,450.5,15.8z"/>
</svg>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(function(){
$('.svg-wrapper').delay(4000).fadeOut(700);
$('#g-nav-sp').hide();
$(window).on('load resize', function(){
if(window.matchMedia('(max-width:767px)').matches){
$('#g-nav,#g-nav-sp').hide();
}else{
$('#g-nav').show();
$('#g-nav-sp').hide();
}
});
$('#btn').on('click',function(){
$(this).toggleClass('is-active');
$('#g-nav-sp').slideToggle();
});
});
</script>
</body>
</html>
スタイルシート
@charset "utf-8";
html{box-sizing:border-box;text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{appearance:textfield}[type=search]::search-cancel-button,[type=search]::search-decoration{appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button::focus-inner{border-style:0;padding:0}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button:focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{appearance:none;appearance:none}select::expand{display:none}select::value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::file-upload-button{appearance:button;font:inherit}[type=search]{appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}
header{
width: 100%;
padding: 30px 0;
background-color: beige;
}
h1{
width: 200px;
margin: 0 auto;
}
#g-nav{
width: 100%;
height: 50px;
margin-bottom: 50px;
background-color: gainsboro;
}
#g-nav>ul{
display: flex;
height: 50px;
justify-content: center;
align-items: center;
}
#g-nav li{
margin: 0 30px;
}
#g-nav a{
display: block;
padding: 10px;
color: #333;
}
#g-nav a:hover{
text-decoration: underline;
}
.main-visual{
width: 90%;
margin: 0 auto;
height: 70vh;
}
.main-visual>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.svg-wrapper{
width: 100%;
height: 100vh;
background-color: dimgray;
padding-top: 200px;
position: fixed;
top:0;
left: 0;
z-index: 100;
}
.box{
width: 480px;
margin:0 auto;
}
.txt{
fill: dimgray;
stroke:#FFF;
stroke-width:1;
stroke-miterlimit:1;
stroke-dasharray: 550px;
stroke-dashoffset: 550px;
animation: line-anime 2s 1s linear forwards;
}
@keyframes line-anime {
0%{stroke-dashoffset: 550px;}
80%{stroke-dashoffset: 0; fill:dimgray;}
100%{stroke-dashoffset: 0; fill:#FFF;}
}
#btn{
display: none;
}
@media (max-width:767px){
body{
padding-top: 100px;
}
#g-nav{
display: none;
}
#btn{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
header{
position: fixed;
top:0;
padding: 10px 0;
height: 80px;
}
h1{
width: 100px;
}
#g-nav-sp{
position: fixed;
top: 80px;
left: 0;
width: 100%;
background-color: gainsboro;
height: calc(100vh - 80px);
display: none;
}
#g-nav-sp>ul{
display: block;
}
#g-nav-sp li{
border-bottom: 1px solid #222;
height: 60px;
}
}
