123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
	<div class="menu header-menu">
		<ul class="logo">
			<li>
				<a href="./index2.html">
					<span class="img">
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
							<path d="M425.063,374.977c10.406-11.891,19.406-24.813,26.313-38.781c10.969-22.219,17.094-46.797,17.094-72.547	c0-17.969-3.375-35.266-9.344-51.484c-8.938-24.328-23.656-46.25-41.656-65.078c-18-18.813-39.328-34.563-61.813-46.484	l-0.078-0.047l-0.109-0.063c-20.813-10.516-36-20.109-47.281-28.516c-8.453-6.297-14.719-11.922-19.578-16.844	c-3.641-3.672-6.484-6.953-8.922-9.891c-1.813-2.203-3.375-4.219-4.906-6.109c-1.156-1.422-2.25-2.781-3.469-4.109	c-0.906-1-1.875-1.984-2.969-2.953c-1.656-1.422-3.656-2.844-6.094-3.859c-2.406-1.031-5.172-1.547-7.781-1.547	c-1.844,0-3.75,0.25-5.547,0.766c-1.703,0.484-3.297,1.188-4.703,2.016c-1.328,0.781-2.484,1.641-3.516,2.547	c-1.922,1.656-3.453,3.391-4.938,5.156c-2.594,3.125-5.109,6.5-8.547,10.516c-2.578,2.984-5.641,6.328-9.5,10.047	c-5.797,5.563-13.406,11.984-23.797,19.156c-10.406,7.172-23.578,15.094-40.469,23.625l-0.078,0.047l-0.109,0.063 c-29.953,15.906-57.891,38.578-78.609,66.313c-10.359,13.875-18.891,29.031-24.859,45.25c-5.953,16.219-9.328,33.5-9.328,51.484	c0,25.766,6.188,50.281,17.188,72.453c6.875,13.859,15.797,26.672,26.078,38.531c-17.109,7.078-71.797,33.5-83.734,85.562	c111.563,57.078,216.563-4.484,236.016-30.313c2.422-0.625,4.797-1.297,7.172-2.125c1.484-0.516,2.969-1.141,4.438-1.734	c9.656,3.5,19.563,5.719,29.5,6.953C299.297,459.57,402.5,517.852,512,461.836C499.156,405.805,436.781,379.461,425.063,374.977z	 M69.844,448.773l-9.328-9.219c18.141-18.375,36.469-29.984,52.672-37.265c3.391,2.375,7.047,4.688,10.906,6.937	c0.938,0.531,1.938,1.031,2.891,1.563C110.344,417.008,90.141,428.195,69.844,448.773z M232,408.414	c-7.266,2.047-15.172,3.016-23.391,3.016c-16.844,0.016-34.984-4.109-51.172-10.406c-8.094-3.125-15.688-6.813-22.391-10.688	c-6.703-3.891-12.531-7.984-17.016-11.906c-17.25-15.016-31.203-32.656-40.813-52.031s-14.906-40.484-14.906-62.75	c0-15.25,2.844-29.922,7.984-43.953c7.719-21.016,20.672-40.531,36.953-57.516c16.219-16.969,35.719-31.375,56.188-42.266	c21.703-10.984,37.938-21.188,50.344-30.422c9.313-6.938,16.469-13.328,22.063-18.984c4.203-4.25,7.531-8.094,10.25-11.375	c2.016-2.453,3.688-4.609,5.078-6.328c1.031-1.281,1.906-2.328,2.578-3.078c0.328-0.344,0.5-0.516,0.719-0.719	c0.344,0.328,0.766,0.781,1.281,1.359c0.906,1.063,2.063,2.516,3.453,4.25c2.422,3.063,5.578,7.016,9.766,11.563	c6.266,6.828,14.875,14.969,27.156,24.031c12.281,9.047,28.25,19.016,49.406,29.719c27.281,14.516,52.813,35.313,71.25,60.047	c9.234,12.375,16.703,25.703,21.859,39.719c5.141,14.031,7.984,28.703,7.984,43.953c0,22.281-5.25,43.484-14.828,62.875	c-9.578,19.406-23.5,37-40.828,51.844c-11.031,9.469-25.734,18.078-42.234,24.219c-16.5,6.14-34.766,9.843-52.938,9.828	c-7.984,0-15.922-0.781-23.734-2.297c3.313-3.156,6.516-6.546,9.375-10.421c6.547-8.891,11.75-19.625,15.328-32.219	c3.563-12.625,5.547-27.109,5.734-43.688c0.016-0.813,0.016-1.641,0.016-2.5c0-10.703-0.813-24.484-5.016-39.016	c-2.125-7.266-5.094-14.719-9.281-22.016c-4.172-7.281-9.563-14.391-16.375-20.922l-15.094,15.781	c5.25,5.016,9.313,10.391,12.531,16c4.797,8.391,7.672,17.313,9.313,25.969c1.656,8.656,2.094,17.031,2.094,24.203	c0,0.766,0,1.516-0.016,2.25c-0.203,17.781-2.688,32.125-6.672,43.531c-3,8.563-6.813,15.469-11.234,21.109	c-3.297,4.203-6.953,7.719-10.906,10.641C245.938,403.211,239.281,406.352,232,408.414z M423.219,437.82	c-13.281-11.844-28.969-20.25-42.594-26.047c4.688-2.609,9.219-5.359,13.469-8.312c12.406,5.937,25.813,13.89,37.844,24.578	L423.219,437.82z"></path>
						</svg>															
					</span>
					<span class="txt">Page-Title</span>
				</a>
			</li>
		</ul>
		<div class="mobile-list-button">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<ul>
			<li>
				<a>
					<span class="img">
						<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
							<path d="M32,50.323c-1.356,0-2.456-1.1-2.456-2.456V32.144c0-1.356,1.1-2.456,2.456-2.456    s2.456,1.1,2.456,2.456v15.723C34.456,49.223,33.356,50.323,32,50.323z"/>
							<polygon points="32,46.05 26.674,46.052 32.002,51.474 37.326,46.048   "/>
							<path d="M32.002,53.93c-0.659,0-1.29-0.265-1.752-0.735l-5.328-5.422c-0.693-0.706-0.896-1.758-0.513-2.67    c0.382-0.912,1.275-1.506,2.264-1.507l5.326-0.002l0,0l5.326-0.002c0,0,0.001,0,0.001,0c0.989,0,1.881,0.593,2.264,1.505    c0.383,0.912,0.182,1.965-0.511,2.671l-5.323,5.427C33.294,53.665,32.662,53.93,32.002,53.93    C32.003,53.93,32.003,53.93,32.002,53.93z"/>
							<path d="M46.719,49.065h-1.504c-1.548,0-2.803-1.255-2.803-2.803c0-1.548,1.255-2.803,2.803-2.803h1.504    c3.957,0,7.175-3.219,7.175-7.175s-3.219-7.175-7.175-7.175c-0.3,0-0.604,0.02-0.931,0.063c-0.795,0.102-1.596-0.14-2.2-0.667    c-0.604-0.527-0.954-1.287-0.961-2.088c-0.053-5.923-4.914-10.742-10.837-10.742c-5.977,0-10.84,4.863-10.84,10.84    c0,1.272,0.218,2.518,0.649,3.702c0.394,1.085,0.083,2.301-0.785,3.063c-0.868,0.762-2.114,0.914-3.139,0.382    c-0.742-0.384-1.543-0.579-2.381-0.579c-2.861,0-5.188,2.327-5.188,5.188s2.327,5.188,5.188,5.188h3.515    c1.548,0,2.803,1.255,2.803,2.803c0,1.548-1.255,2.803-2.803,2.803h-3.515C9.342,49.065,4.5,44.223,4.5,38.272    s4.842-10.794,10.794-10.794c0.026,0,0.053,0,0.079,0c-0.019-0.32-0.028-0.641-0.028-0.963c0-9.068,7.377-16.445,16.446-16.445    c4.367,0,8.479,1.694,11.579,4.769c2.423,2.404,4.008,5.433,4.601,8.726c6.462,0.631,11.53,6.095,11.53,12.72    C59.5,43.332,53.767,49.065,46.719,49.065z"/>
						</svg>
					</span>
					<span class="txt">Header-1</span>
				</a>
				<ul>
					<li><a href="#Header-1-1">Header-1-1</a></li>
					<li><a href="#Header-1-2">Header-1-2</a></li>
					<li><a href="#Header-1-2">Header-1-3</a></li>
					<li><a href="#Header-1-2">Header-1-4</a></li>
					<li><a href="#Header-1-2">Header-1-5</a></li>
					<li><a href="#Header-1-2">Header-1-6</a></li>
					<li><a href="#Header-1-2">Header-1-7</a></li>
					<li><a href="#Header-1-2">Header-1-8</a></li>
					<li><a href="#Header-1-2">Header-1-9</a></li>
					<li><a href="#Header-1-2">Header-1-10</a></li>
					<li><a href="#Header-1-2">Header-1-11</a></li>
					<li><a href="#Header-1-2">Header-1-12</a></li>
					<li><a href="#Header-1-2">Header-1-13</a></li>
					<li><a href="#Header-1-2">Header-1-14</a></li>
					<li><a href="#Header-1-2">Header-1-15</a></li>
				</ul>
			</li>
			
			<li>
				<a href="#Header-2">
					<span class="img">
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
							<path d="M411.438,55.875c-5.313-3.781-11.594-5.734-17.969-5.734c-3.438,0-6.906,0.578-10.25,1.75l0.625-0.219	l-204.922,71.719c-10.797-0.734-20.766-3.047-27.516-6.109c-3.625-1.609-6.281-3.406-7.672-4.766	c-0.703-0.672-1.078-1.203-1.266-1.5l-0.125-0.266l-0.016-0.016c-1.172-6.969-7.766-11.672-14.766-10.531	c-6.984,1.188-11.719,7.797-10.563,14.781c1.125,6.672,4.75,12.063,8.984,16.094c6.438,6.063,14.531,10,23.703,12.969	c9.156,2.906,19.469,4.672,30.266,5.188l2.5,0.125l208.609-73.016l0.656-0.234c0.578-0.188,1.156-0.281,1.75-0.281	c1.109,0,2.188,0.328,3.125,0.984c1.406,1,2.25,2.641,2.25,4.359v309.313c0,10-6.313,18.938-15.781,22.235l-207.125,72.484	l-0.375,0.172c-1.297,0.547-3.125,0.938-5.531,0.938c-4.516,0.047-10.984-1.531-17.781-4.5	c-10.188-4.391-21.063-11.766-28.797-18.703c-3.875-3.469-6.969-6.844-8.766-9.313c-0.781-1.063-1.25-1.875-1.5-2.359	c0.016-0.641,0.031-1.375,0.047-2.328c0.141-11.547,0.203-47.391,0.203-91.907c0-101.688-0.281-248.078-0.281-248.078v-4.734	c0-2.281,1.453-4.313,3.594-5.063l210.844-74.391c6.703-2.359,10.219-9.688,7.844-16.375c-2.344-6.688-9.688-10.188-16.375-7.828	L108.25,75.11l0.031-0.016c-12.469,4.359-20.797,16.094-20.797,29.297v4.75v0.016c0,0.031,0.016,9.141,0.047,24.453	c0.063,45.953,0.219,147.359,0.219,223.594c0,25.406,0,48.031-0.063,64.844c-0.016,8.406-0.047,15.375-0.078,20.5	c-0.016,2.547-0.031,4.656-0.063,6.234c-0.016,1.547-0.031,2.672-0.047,2.906v-0.016l-0.016,0.813	c0.094,5.141,1.719,8.578,3.453,11.813c3.156,5.563,7.563,10.563,13,15.734c8.125,7.672,18.531,15.328,29.875,21.359	c11.359,5.953,23.516,10.516,36.219,10.609c4.891,0,9.922-0.828,14.766-2.75l0.016,0.063l206.734-72.359	c19.75-6.906,32.969-25.547,32.969-46.469V81.172C424.516,71.11,419.641,61.688,411.438,55.875z"></path>
							<path d="M159.688,106.407c1.188,3.344,4.828,5.109,8.188,3.938L354.75,44.922c3.344-1.172,5.109-4.828,3.938-8.188	c-1.172-3.328-4.844-5.094-8.188-3.922L163.625,98.219C160.281,99.391,158.5,103.063,159.688,106.407z"></path>
						</svg>
					</span>
					<span class="txt">Header-2</span>
				</a>
			</li>
		</ul>
		<ul>

		</ul>
	</div>

  <div class="menu side-menu">
		<ul>
			<li>
				<a>
					<span class="img">
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
							<path d="M284.344,0v225.203l211.641-77.031C464.453,61.813,381.484,0,284.344,0z"></path>
							<path d="M241.219,286.781V61.578C117.047,61.563,16.016,162.594,16.016,286.781c0,27.063,4.797,52.984,13.578,77.031	C61.125,450.172,144.078,512,241.219,512c124.188,0,225.219-101.031,225.219-225.219c0-27.031-4.797-52.984-13.578-77.031 L241.219,286.781z" ></path>
						</svg>
					</span>
					<span class="txt">Side-Menu-1</span>
				</a>
				<ul>
					<li>
						<a href="#menu-1-1">
							<span>Side-1-1</span>
						</a>
					</li>
					<li>
						<a href="#menu-1-2">
							<span>Side-1-2</span>
						</a>
					</li>
				</ul>
			</li>
			
			<li>
				<a href="#menu-2">
					<span class="img">
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
							<path d="M480.077,132.02c-23.996-41.568-76.299-41.765-128.908-27.608C344.548,61.842,323.763,0,260.719,0	c-47.99,0-74.289,45.078-88.348,97.686C132.215,82.225,68.165,69.275,36.641,123.98c-23.991,41.568,1.911,86.942,40.46,125.392	c-33.529,27.011-76.701,76-45.176,130.608c23.996,41.568,76.299,41.765,128.804,27.608C167.454,450.156,188.233,512,251.283,512	c47.986,0,74.289-45.176,88.343-97.784c40.26,15.559,104.206,28.411,135.73-26.196c23.996-41.471-1.906-86.843-40.455-125.294	C468.43,235.617,511.596,186.627,480.077,132.02z M446.743,375.166c-20.882,36.04-70.573,24.892-101.396,13.549	c6.828-35.736,8.936-72.284,8.936-98.382h-18.672c0,22.991-3.715,56.52-11.848,89.147c-2.107,8.334-4.515,16.569-7.225,24.598	c-13.956,41.862-36.245,76.696-68.367,76.696c-41.662,0-56.922-48.588-62.447-80.911c34.436-11.952,67.064-28.412,89.652-41.559	l-9.338-16.166c-19.877,11.44-50.798,25-83.122,34.235c-8.334,2.412-16.667,4.52-25.001,6.118	c-43.167,8.844-84.426,7.03-100.49-20.882c-20.784-36.039,13.554-73.48,38.853-94.568c27.608,23.794,58.122,43.872,80.814,56.921	l9.338-16.157c-19.878-11.45-47.089-31.529-71.279-55.019c-6.123-5.922-12.049-12.039-17.672-18.373	c-29.314-33.029-48.289-69.667-32.226-97.578c20.785-36.04,70.476-24.892,101.3-13.549c-6.828,35.735-8.937,72.284-8.937,98.382	h18.775c0-22.991,3.711-56.52,11.842-89.147c2.108-8.334,4.52-16.667,7.231-24.696c13.956-41.862,36.24-76.598,68.367-76.598	c41.662,0,56.921,48.589,62.441,80.912c-34.43,11.95-67.161,28.412-89.75,41.559l9.436,16.166c19.78-11.44,50.701-25,83.128-34.235	c8.23-2.412,16.564-4.52,24.897-6.118c43.27-8.844,84.529-7.03,100.593,20.882c20.779,36.039-13.554,73.48-38.853,94.568	c-27.608-23.794-58.226-43.872-80.814-56.921l-9.338,16.156c19.775,11.452,47.084,31.53,71.177,55.02	c6.225,5.921,12.146,12.148,17.769,18.47C443.832,310.617,462.807,347.254,446.743,375.166z" ></path>
							<path  d="M256.003,220.02c-19.868,0-35.975,16.098-35.975,35.97c0,19.872,16.108,35.98,35.975,35.98	c19.864,0,35.971-16.108,35.971-35.98C291.974,236.117,275.867,220.02,256.003,220.02z" ></path>
						</svg>
					</span>
					<span class="txt">Side-Menu-2</span>
				</a>
			</li>

			<li>
				<a>
					<span class="img">
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.606 63.606" >
							<path d="M0,63.557l5.785-23.041l13.826,13.497l27.476-26.821L35.801,16.175l-22.516,21.98l9.854,9.619l-2.795,2.861	L7.559,38.155l28.242-27.569l17.013,16.606l-32.2,31.433L0,63.557z M7.971,48.239l-2.484,9.893l10.134-2.425L7.971,48.239z"/>
							<polygon points="55.055,25.003 42.339,12.59 45.134,9.729 55.055,19.414 57.88,16.656 46.595,5.639 37.053,14.955 	34.258,12.091 46.595,0.049 63.606,16.656 "/>
						</svg>
					</span>
					<span class="txt">Side-Menu-3</span>
				</a>
				<ul>
					<li>
						<a href="#Side-3-1">Side-3-1</a>
					</li>
					<li>
						<a href="#Side-3-2">Side-3-2</a>
						<ul>
							<li>
								<a href="#Side-3-1">Side-3-1</a>
							</li>
							<li>
								<a href="#Side-3-2">Side-3-2</a>
								<ul>
									<li>
										<a href="#Side-3-2-1">Side-3-2-1</a>
									</li>
									<li>
										<a href="#Side-3-2-1">Side-3-2-2</a>
									</li>
									<li>
										<a href="#Side-3-2-3">Side-3-2-3</a>
										<ul>
											<li>
												<a href="#Side-3-2-3-1">Side-3-2-3-1</a>
											</li>
											<li>
												<a href="#Side-3-2-3-2">Side-3-2-3-2</a>
											</li>
											<li>
												<a href="#Side-3-2-3-3">Side-3-2-3-3</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	
	<div class="contents">
		<div class="block">
			<h1>Web Page Contents</h1>

			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
			<div>□■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ □■□■□■□■□■ </div>
		</div>
	</div>

            
          
!
            
              /* << common */
html,body{
  height  : 100%;
  margin  : 0;
  padding : 0;
  border  : 0;
}
*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}
/* common >> */

/* << Menu -- */
.menu .mobile-list-button{
  display:none;
}
.menu ul{
  margin  : 0;
  padding : 0;
  border  : 0;
}
.menu li{
  list-style:none;
  margin  : 0;
  padding : 0;
  border  : 0;
}
.menu a{
  position         : relative;
  text-decoration  : none;
  white-space      : nowrap;
  /* overflow         : hidden; */
  font-size        : 13px;
}
/* -- Menu >> */



/* << Animation -- */
@keyframes list-mouseover{
  0%{
    background-color : #ffffff;
  }
  100%{
    background-color : #910581;
  }
}
@keyframes submenu-mouseover{
  0%{
    background-color : #ffffff;
  }
  100%{
    background-color : #ddd;
  }
}

@keyframes submenu-header-open{
  0%{
    height : 0;
  }
  100%{
    height : 48px;
  }
}
@keyframes submenu-header-close{
  0%{
    height : 48px;
  }
  100%{
    height : 0;
  }
}
@keyframes submenu-side-open{
  0%{
    width : 0;
  }
  100%{
    width : 200px;
  }
}
@keyframes submenu-side-close{
  0%{
    width : 200px;
  }
  100%{
    width : 0;
  }
}
/* -- Animation >> */





@media (min-width: 1001px) {
  /* << menu-common */
  .header-menu a > img,
  .menu a > span > img,
  .header-menu a > svg,
  .menu a > span > svg{
    width:24px;
    height:24px;
    vertical-align:middle;
    fill : #910581;
  }

  .header-menu a:hover > svg,
  .menu a:hover > span > svg,
  .menu li[data-view="1"] > a > span > svg{
    fill : white;
  }
  .menu > ul > li > ul > li > a:hover{
    animation: submenu-mouseover 0.2s linear forwards;
  }
  /* menu-common >> */



  /* << submenu >> */
  .menu li[data-dropdown="1"] > a:after{
    content        : "";
    /* position       : absolute; */
    right          : 4px;
    top            : 50%;
    display        : inline-block;
    width          : 0;
    height         : 0;
    vertical-align : middle;
    border-top     : 6px dashed;
    border-right   : 4px solid transparent;
    border-left    : 4px solid transparent;
    box-sizing     : border-box;
    margin-left    : 4px;
  }
  /* submenu >> */



  /* << header-logo */
  .header-menu > ul.logo{
    display:block;
    background-color : #910581;
    color : white;
    width : 200px;
    min-width:200px;
    text-align:left;
  }
  .header-menu > ul.logo a{
    color : white;
  }
  .header-menu > ul.logo a svg{
    fill : white;
  }
  /* header-logo >> */



  /* << header-menu */
  .header-menu{
    position : fixed;
    top:0;
    left:0;

    width:100%;
    height        : 60px;
    border-bottom : 1px solid #ccc;
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    background-color:white;

    display     : -webkit-flex;
    display     : flex;

    /* menu:center */
    /* -webkit-justify-content : space-between;
    justify-content         : space-between; */

    /* menu:last-right */
    -webkit-justify-content : flex-start;
    justify-content         : flex-start;
  }

  .header-menu > ul{
    height      : 100%;
    display     : -webkit-flex;
    display     : flex;
    -webkit-justify-content : center;
    justify-content         : center;
    -webkit-align-items     : center;
    align-items             : center;
  }
  .header-menu > ul > li{
    line-height : 60px;
  }
  .header-menu > ul > li > a{
    display          : block;
    padding          : 0 8px;
    height           : 100%;
    /* background-color : white; */
    color            : #666;
    cursor           : pointer;
  }
  .header-menu > ul > li > a:hover{
    /* background-color : #910581; */
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
  }
  .header-menu > ul > li[data-view="1"] > a{
    background-color : #910581;
    color            : white;
  }
  .header-menu > ul > li ul{
    display          : none;
  }
  /* header-menu >> */



  /* << side-menu */
  .side-menu{
    position : fixed;
    top:60px;
    left:0;
    display          : block;
    width            : 200px;
    height           : calc(100% - 60px);
    border-right     : 1px solid #ccc;
    box-shadow       : 1px 0px 10px rgba(51,51,51,0.3);
    float:left;
  }
  .side-menu > ul > li{
    height           : 60px;
    line-height      : 60px;
  }
  
  .side-menu > ul > li > a{
    display:block;
    height:100%;
    padding          : 0 8px;
    background-color : white;
    color            : #666;
    cursor           : pointer;
    border-bottom : 1px solid #ccc;
  }
  .side-menu > ul > li > a:hover{
    /* background-color : #910581; */
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
  }
  .side-menu > ul > li[data-view="1"] > a{
    background-color : #910581;
    color            : white;
  }
  .side-menu > ul > li ul{
    display          : none;
  }
  /* side-menu >> */



  /* << sub-header-menu -- */
  .header-menu > ul > li[data-view="1"] > ul{
    /* z-index:100; */
    display: block;
    position: absolute;
    top: 60px;
    background-color: white;
    border: 1px solid #ccc;
    /* max-height: 100%; */
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    overflow:auto;
  }
  .header-menu > ul > li[data-view="1"] > ul > li{
    overflow:hidden;
    min-width:200px;
  }
  .header-menu > ul > li[data-view="1"] > ul > li{
    animation: submenu-header-open 0.1s linear forwards;
  }
  .header-menu > ul > li[data-view="0"] > ul > li{
    animation: submenu-header-open 0.1s linear forwards;
  }
  .header-menu > ul > li[data-view="1"] > ul > li > a{
    display:block;
    height:48px;
    padding:0 10px;
    line-height:48px;
    border-bottom:1px solid #ccc;
  }
  .header-menu > ul > li[data-view="1"] > ul > li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* -- sub-header-menu >> */



  /* << sub-side-menu */
  .side-menu > ul > li[data-view="1"] > ul{
    /* z-index:100; */
    display: block;
    position: absolute;
    top: 0;
    left: 200px;
    /* width: 200px; */
    background-color: white;
    border-right: 1px solid #ccc;
    height: 100%;
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    overflow-y : auto;
    overflow-x : hidden;
  }
  .side-menu > ul li[data-view="1"] > ul{
    animation: submenu-side-open 0.1s linear forwards;
  }
  .side-menu > ul li[data-view="0"] > ul{
    animation: submenu-side-open 0.1s linear forwards;
  }
  .side-menu > ul > li[data-view="1"] ul > li{
    height:48px;
  }
  .side-menu > ul > li[data-view="1"] ul > li > a{
    display:block;
    width:100%;
    height:100%;
    padding:0 10px;
    line-height:48px;
    border-bottom:1px solid #ccc;
  }
  .side-menu > ul > li[data-view="1"] > ul > li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* sub-side-menu >> */


  /* << sub-side-menu -- */
  .side-menu > ul > li ul > li[data-view="1"] > ul{
    display:block;
  }
  /* -- sub-side-menu >> */




  /* << contents */
  .contents{
    display : block;
    width:calc(100% - 200px);
    float:left;
    margin-top:60px;
    margin-left:200px;
  }
  .contents .block{
    padding:8px 20px;
  }
  /* contents >> */
}






@media (min-width: 701px) and (max-width: 1000px) {
  /* << menu-common */
  .menu > ul > li > a > span{
    display:block;
    font-size:10px;
    line-height:normal;
    text-align:center;
  }
  .header-menu a > img,
  .menu a > span > img,
  .header-menu a > svg,
  .menu a > span > svg{
    width:30px;
    height:30px;
    vertical-align:middle;
    fill : #910581;
  }
  .header-menu a > span > img,
  .header-menu a > span > svg{
    margin:4px;
  }
  .side-menu a > span > img,
  .side-menu a > span > svg{
    margin:10px;
  }

  .header-menu a:hover > svg,
  .menu a:hover > span > svg,
  .menu li[data-view="1"] > a > span > svg{
    fill : white;
  }
  /* menu-common >> */



  /* << submenu >> */
  .header-menu > ul > li[data-dropdown="1"] > a:after{
    top            : 52px;
  }
  .side-menu > ul > li[data-dropdown="1"] > a:after{
    top            : 70px;
  }
  .menu > ul > li[data-dropdown="1"] > a:after{
    content        : "";
    position       : absolute;
    right          : calc(50% - 3px);
    
    display        : inline-block;
    width          : 0;
    height         : 0;
    vertical-align : middle;
    border-top     : 6px dashed;
    border-right   : 4px solid transparent;
    border-left    : 4px solid transparent;
    box-sizing     : border-box;
    margin-left    : 4px;
  }
  .menu > ul > li li[data-dropdown="1"] > a:after{
    content        : "";
    /* position       : absolute; */
    right          : 4px;
    top            : 50%;
    display        : inline-block;
    width          : 0;
    height         : 0;
    vertical-align : middle;
    border-top     : 6px dashed;
    border-right   : 4px solid transparent;
    border-left    : 4px solid transparent;
    box-sizing     : border-box;
    margin-left    : 4px;
  }
  /* submenu >> */



  /* << header-logo */
  .header-menu > ul.logo{
    display:block;
    background-color : #910581;
    color : white;
    width : 80px;
    min-width:80px;
    text-align:left;
  }
  .header-menu > ul.logo a{
    color : white;
  }
  .header-menu > ul.logo a svg{
    fill : white;
  }
  /* header-logo >> */



  /* << header-menu */
  .header-menu{
    position : fixed;
    top:0;
    left:0;

    width:100%;
    height        : 60px;
    border-bottom : 1px solid #ccc;
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    background-color:white;

    display     : -webkit-flex;
    display     : flex;

    /* menu:center */
    /* -webkit-justify-content : space-between;
    justify-content         : space-between; */

    /* menu:last-right */
    -webkit-justify-content : flex-start;
    justify-content         : flex-start;
  }

  .header-menu > ul{
    height      : 100%;
    display     : -webkit-flex;
    display     : flex;
    -webkit-justify-content : center;
    justify-content         : center;
    -webkit-align-items     : center;
    align-items             : center;
  }
  .header-menu > ul > li{
    height      : 60px;
    line-height : 60px;
  }
  .header-menu > ul > li > a{
    display          : block;
    padding          : 0 8px;
    height           : 100%;
    /* background-color : white; */
    color            : #666;
    cursor           : pointer;
  }
  .header-menu > ul > li > a:hover{
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
  }
  .header-menu > ul > li[data-view="1"] > a{
    background-color : #910581;
    color            : white;
  }
  .header-menu > ul > li ul{
    display          : none;
  }
  /* header-menu >> */



  /* << side-menu */
  .side-menu{
    position : fixed;
    top:60px;
    left:0;
    display          : block;
    width            : 80px;
    height           : calc(100% - 60px);
    border-right     : 1px solid #ccc;
    box-shadow       : 1px 0px 10px rgba(51,51,51,0.3);
    float:left;
  }
  .side-menu > ul > li{
    height           : 80px;
    line-height      : 80px;
  }
  .side-menu > ul > li > a{
    display:block;
    height:100%;
    padding          : 0 8px;
    background-color : white;
    color            : #666;
    cursor           : pointer;
    border-bottom : 1px solid #ccc;
  }
  .side-menu > ul > li > a:hover{
    /* background-color : #910581; */
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
  }
  .side-menu > ul > li[data-view="1"] > a{
    background-color : #910581;
    color            : white;
  }
  .side-menu > ul > li ul{
    display          : none;
  }
  /* side-menu >> */

  /* << sub-header-menu -- */
  .header-menu > ul > li[data-view="1"] > ul{
    /* z-index:100; */
    display: block;
    position: absolute;
    top: 60px;
    background-color: white;
    border: 1px solid #ccc;
    /* height: 100%; */
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
  }
  .header-menu > ul > li[data-view="1"] > ul > li{
    overflow:hidden;
    min-width:200px;
  }
  .header-menu > ul > li[data-view="1"] > ul > li{
    animation: submenu-header-open 0.1s linear forwards;
  }
  .header-menu > ul > li[data-view="0"] > ul > li{
    animation: submenu-header-open 0.1s linear forwards;
  }
  .header-menu > ul > li[data-view="1"] > ul > li > a{
    display:block;
    height:48px;
    padding:0 10px;
    line-height:48px;
    border-bottom:1px solid #ccc;
  }
  .header-menu > ul > li[data-view="1"] > ul > li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* -- sub-header-menu >> */



  /* << sub-side-menu */
  .side-menu > ul > li[data-view="1"] > ul{
    /* z-index:100; */
    display: block;
    position: absolute;
    top: 0;
    left: 80px;
    /* width: 200px; */
    background-color: white;
    border-right: 1px solid #ccc;
    height: 100%;
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    overflow-y : auto;
    overflow-x : hidden;
  }
  .side-menu > ul li[data-view="1"] > ul{
    animation: submenu-side-open 0.1s linear forwards;
  }
  .side-menu > ul li[data-view="0"] > ul{
    animation: submenu-side-open 0.1s linear forwards;
  }
  .side-menu > ul > li[data-view="1"] > ul li{
    height:48px;
  }
  .side-menu > ul > li[data-view="1"] > ul li > a{
    display:block;
    width:100%;
    height:100%;
    padding:0 10px;
    line-height:48px;
    border-bottom:1px solid #ccc;
  }
  .side-menu > ul > li[data-view="1"] > ul > li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* sub-side-menu >> */


  /* << sub-side-menu -- */
  .side-menu > ul > li ul > li[data-view="1"] > ul{
    display:block;
  }
  /* -- sub-side-menu >> */



  /* << contents */
  .contents{
    display : block;
    width:calc(100% - 80px);
    float:left;
    margin-top:60px;
    margin-left:80px;
  }
  .contents .block{
    padding:8px 20px;
  }
  /* contents >> */
}






@media (min-width: 501px) and (max-width: 700px) {
  /* << menu-common */
  .menu > ul > li > a > span{
    display:block;
    font-size:10px;
    line-height:normal;
    text-align:center;
    line-height:48px;
  }
  .header-menu a > img,
  .menu a > span > img,
  .header-menu a > svg,
  .menu a > span > svg{
    width:24px;
    height:24px;
    vertical-align:middle;
    fill : #910581;
  }
  .header-menu a > span > img{
    margin:4px;
  }
  .side-menu a > span > img{
    margin:10px;
  }

  .header-menu a:hover > svg,
  .menu a:hover > span > svg,
  .menu li:hover > a > span > svg{
    fill : white;
  }

  .menu a > span.txt{
    display:none;
  }
  /* menu-common >> */


  /* << header-logo */
  .header-menu > ul.logo{
    display:block;
    background-color : #910581;
    color : white;
    width : 48px;
    min-width:48px;
    text-align:left;
  }
  .header-menu > ul.logo a{
    color : white;
  }
  .header-menu > ul.logo a svg{
    fill : white;
  }
  /* header-logo >> */



  /* << header-menu */
  .header-menu{
    position : fixed;
    top:0;
    left:0;

    width:100%;
    height        : 48px;
    border-bottom : 1px solid #ccc;
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    background-color:white;

    display     : -webkit-flex;
    display     : flex;

    /* menu:center */
    /* -webkit-justify-content : space-between;
    justify-content         : space-between; */

    /* menu:last-right */
    -webkit-justify-content : flex-start;
    justify-content         : flex-start;
  }

  .header-menu > ul{
    height      : 100%;
    display     : -webkit-flex;
    display     : flex;
    -webkit-justify-content : center;
    justify-content         : center;
    -webkit-align-items     : center;
    align-items             : center;
  }
  .header-menu > ul > li{
    width:48px;
    height:48px;
    line-height : 48px;
    position:relative;
  }
  .header-menu > ul > li > a{
    display          : block;
    padding          : 0 0px;
    height           : 100%;
    /* background-color : white; */
    color            : #666;
    cursor           : pointer;
  }
  .header-menu > ul > li > a:hover > span.txt,
  .header-menu > ul > li:hover > a > span.txt{
    display          : block;
    background-color : #910581;
    width:200px;
    height:48px;
  }
  .header-menu > ul > li > a:hover{
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
  }
  .header-menu > ul > li:hover > a{
    background-color : #910581;
    color            : white;
  }
  .header-menu > ul > li ul{
    display          : none;
  }
  .header-menu > ul > li > a span.txt,
  .header-menu > ul > li > a span.txt{
    font-size:13px;
    text-align:left;
    padding:0 10px;
  }
  /* header-menu >> */



  /* << side-menu */
  .side-menu{
    position : fixed;
    top:48px;
    left:0;
    display          : block;
    width            : 48px;
    height           : calc(100% - 48px);
    border-right     : 1px solid #ccc;
    box-shadow       : 1px 0px 10px rgba(51,51,51,0.3);
    float:left;
  }
  .side-menu > ul > li{
    height           : 48px;
    line-height      : 48px;
    position         : relative;
  }
  .side-menu > ul > li > a{
    display:block;
    height:100%;
    padding          : 0 0px;
    background-color : white;
    color            : #666;
    cursor           : pointer;
    border-bottom : 1px solid #ccc;
  }
  .side-menu > ul > li > a:hover,
  .side-menu > ul > li:hover > a{
    /* background-color : #910581; */
    color            : white;
    animation: list-mouseover 0.2s linear forwards;
    width:248px;
  }
  .side-menu > ul > li > a:hover span.img,
  .side-menu > ul > li:hover > a span.img{
    display:inline-block;
    width:48px;
  }
  .side-menu > ul > li > a:hover span.txt,
  .side-menu > ul > li:hover > a span.txt{
    display:inline-block;
    width : calc(100% - 48px);
    font-size:13px;
    text-align:left;
  }
  .side-menu > ul > li ul{
    display          : none;
  }
  /* side-menu >> */



  /* << sub-header-menu -- */
  .header-menu > ul > li:hover > ul{
    /* z-index:100; */
    display: block;
    position: absolute;
    top: 96px;
    background-color: white;
    border: 1px solid #ccc;
    /* max-height: 100%; */
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .header-menu > ul > li:hover > ul > li{
    overflow:hidden;
    min-width:200px;
  }
  .header-menu > ul > li:hover > ul > li{
    animation: submenu-header-small-open 0.1s linear forwards;
  }
  /* .header-menu > ul > li[data-view="0"] > ul > li{
    animation: submenu-header-small-open 0.1s linear forwards;
  } */
  .header-menu > ul > li:hover > ul > li > a{
    display:block;
    height:40px;
    padding:0 10px;
    line-height:40px;
    border-bottom:1px solid #ccc;
  }
  .header-menu > ul > li:hover > ul > li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* -- sub-header-menu >> */



  /* << sub-side-menu */
  .side-menu > ul > li > ul > li{
    height:0;
  }

  .side-menu > ul > li:hover ul{
    display: block;
    position: absolute;
    width: 200px;
    background-color: white;
    border-right: 1px solid #ccc;
  }
  .side-menu > ul > li:hover > ul{
    top: 48px;
    left: 48px;
    
    
    box-shadow    : 1px 0px 10px rgba(51,51,51,0.3);
  }
  .side-menu > ul > li:hover > ul > li{
    animation: submenu-header-small-open 0.1s linear forwards;
  }
  .side-menu > ul > li ul > li > a{
    display:block;
    width:100%;
    height:100%;
    padding:0 10px;
    line-height:40px;
    border-bottom:1px solid #ccc;
  }
  .side-menu > ul > li > ul li > a:hover{
    animation: submenu-mouseover 0.1s linear forwards;
  }
  /* sub-side-menu >> */




  /* << contents */
  .contents{
    display : block;
    width:calc(100% - 48px);
    float:left;
    margin-top:48px;
    margin-left:48px;
  }
  .contents .block{
    padding:8px 20px;
  }
  /* contents >> */


  /* << sub-side-menu -- */
  .side-menu > ul > li li[data-dropdown="1"]:hover > ul{
    display:block;
  }
  /* -- sub-side-menu >> */


  /* << Animation -- */
  @keyframes submenu-header-small-open{
    0%{
      height : 0;
    }
    100%{
      height : 40px;
    }
  }
  @keyframes submenu-header-small-close{
    0%{
      height : 40px;
    }
    100%{
      height : 0;
    }
  }
  /* -- Animation >> */
}






@media (max-width: 500px) {
  /* << menu-common */
  .menu img,
  .menu svg{
    width:20px;
    height:20px;
    fill : #910581;
  }
  .menu *{
    font-size:13px;
  }
  .menu .logo{
    width:100%;
    height:60px;
    background-color : #910581;
    text-align:center;
    line-height:60px;
    position:relative;
  }
  .menu .logo li{
    height:100% !important;
  }
  .menu > ul.logo > li > a,
  .menu[data-view="1"] > ul.logo > li > a,
  .menu[data-view="0"] > ul.logo > li > a{
    display:block;
    width:100%;
    height:60px !important;
    animation-name:none;
  }
  .menu .logo span{
    display:inline-block;
    height:100%;
  }
  .menu .logo img,
  .menu .logo svg{
    position:absolute;
    left:10px;
    top : calc(50% - 15px);
    width:30px;
    height:30px;
    vertical-align:middle;
    margin-right:10px;
  }
  .menu .logo .txt{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    line-height:60px;
    font-size:20px;
    font-weight:bold;
    color:white;
  }
  .menu a{
    height : 40px;
    line-height:40px;
  }

  .menu .mobile-list-button{
    position:absolute;
    display:block;
    right:10px;
    top : 15px;
    width:30px;
    height:30px;
    border:1px solid white;
    border-radius:4px;
  }
  .menu .mobile-list-button > span{
    display:block;
    width:calc(100% - 8px);
    height:2px;
    background-color:white;
    margin:5px 4px;
  }

  .menu li > a{
    display:none;
    overflow:hidden;
  }
  .menu[data-view="1"] ul > li > a{
    display:block;
    /* height : 40px; */
    animation: submenu-header-small-open 0.3s linear forwards;
    line-height:40px;
    border-bottom:1px solid #ccc;
    width:100%;
    padding:0 10px;
  }
  .menu[data-view="0"] ul > li > a{
    animation: submenu-header-small-close 0.3s linear forwards;
  }

  .contents{
    margin : 0 10px;
  }



  /* << Animation -- */
  @keyframes submenu-header-small-open{
    0%{
      height : 0;
    }
    100%{
      height : 40px;
    }
  }
  @keyframes submenu-header-small-close{
    0%{
      height : 40px;
    }
    100%{
      height : 0;
    }
  }
  /* -- Animation >> */
}



            
          
!
            
              ;(function(){
  // ページ内にjsライブラリの読み込み
  var $$addScript = function(file){
    var s = document.createElement("script");
    s.src = file;
    document.body.appendChild(s);
  }

  // イベントライブラリ
  var $$event = function(target, mode, func){
		//other Browser
		if (typeof target.addEventListener !== "undefined"){
      target.addEventListener(mode, func, false);
    }
    else if(typeof target.attachEvent !== "undefined"){
      target.attachEvent('on' + mode, function(){func.call(target , window.event)});
    }
  };


  var $$ = function(){
    var state = document.readyState;
		if(state === "complete"){
			this.start();
		}
		else if(state === "interactive"){
			$$event(window , "DOMContentLoaded" , (function(e){this.start(e)}).bind(this));
		}
		else{
			$$event(window , "load" , (function(e){this.start(e)}).bind(this));
		}
  };

  $$.prototype.start = function(){

    // dropdown-set
    this.set_dropdown(".header-menu");
    this.set_dropdown(".side-menu");

    // mobile-list-button
    var mobileListButton = document.querySelector(".menu .mobile-list-button");
    if(mobileListButton){
      $$event(mobileListButton , "click" , (function(e){this.click_mobileListButton(e)}).bind(this));
    }
  };

  $$.prototype.set_dropdown = function(root_selector){
    if(!root_selector){return;}
    var menus = document.querySelectorAll(root_selector + " ul > li");
    for(var i=0; i<menus.length; i++){
      var listsElm = menus[i].querySelectorAll(":scope > ul");
      if(!listsElm.length){continue;}
      menus[i].setAttribute("data-dropdown" , "1");
      var a = menus[i].querySelector(":scope > a");
      a.href = "javascript:void(0)";
      $$event(a , "click" , (function(e){this.set_menu_toggle(e)}).bind(this));
    }
  };

  $$.prototype.set_menu_toggle = function(e){
    var currentTarget = e.currentTarget.parentNode;

    // toggle
    if(currentTarget.getAttribute("data-view") !== "1"){
      currentTarget.setAttribute("data-view","1");
      this.set_all_menu_remove(currentTarget);
    }
    else if(currentTarget.getAttribute("data-view") === "1"){
      currentTarget.setAttribute("data-view","0");
    }
  };

  // all-link-hidden-quick
  $$.prototype.set_all_menu_remove = function(exclusion_target){
    // 上位エレメントを取得
    var parents = this.getParents(exclusion_target.parentNode , ".menu" , "*[data-dropdown='1']");

    var listElm = document.querySelectorAll(".menu > ul > li");
    for(var i=0; i<listElm.length; i++){
      if(listElm[i].getAttribute("data-dropdown") !== "1"){continue;}
      if(listElm[i].getAttribute("data-dropdown") === null){continue;}
      // 対象エレメントは閉じない
      if(exclusion_target && exclusion_target === listElm[i]){continue;}
      // 対象エレメントの親要素は閉じない
      if(parents.indexOf(listElm[i]) !== -1){continue;}
      // 閉じる処理
      listElm[i].removeAttribute("data-view");
    }
  };


  $$.prototype.click_mobileListButton = function(e){
    var menus = document.querySelectorAll(".menu");
    if(!menus.length){return;}

    var checkValue = menus[0].getAttribute("data-view");
    for(var i=0; i<menus.length; i++){
      if(checkValue === "1"){
        menus[i].setAttribute("data-view" , "0");
      }
      else{
        menus[i].setAttribute("data-view" , "1");
      }
    }
  };

  // 任意エレメントから上位の指定エレメントまでで任意selectorのモノをピックアップして配列で返す。
  // currentElement @ 任意エレメント
  // rootSelector   @ 最上位エレメントのselector(無ければdocument.body)
  // targetSelector @ 対象の任意selector(無ければ上位全て)
  $$.prototype.getParents = function(currentElement , rootSelector , targetSelector){
    rootSelector = (rootSelector) ? rootSelector   : "body";

    var parents = [];
    while(!currentElement.matches(rootSelector)){
      if(targetSelector && !currentElement.matches(targetSelector)){
        currentElement = currentElement.parentNode;
        continue;
      }
      parents.push(currentElement);
      currentElement = currentElement.parentNode;
    }
    return parents;
  };

  new $$;
})();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console