css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.
Loading ..................

Console