Hoshitumugi Inari Shrine

※本サイトに登場する人物名、団体名、地名、出来事などはすべて架空のものであり、実在のものとは一切関係ありません。

index.html

<!DOCTYPE HTML>
<html lang="en">
	
		
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="noindex,nofollow">
	<meta name="description" content="実在しない架空の練習用ページです">
	<title>Hoshitumugi Inari Shrine</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	<style>
	.section-title-wrap{
		text-align: center;
		padding-bottom: 50px;
}
	</style>
</head>
		
		
		
<body>

<div id="parallelworld-page">※本サイトに登場する人物名、団体名、地名、出来事などはすべて架空のものであり、実在のものとは一切関係ありません。</div>

<div id="top"></div>
<header class="header">
	<div class="header-top">
		<nav class="lang-nav" aria-label="Language selection">
			<a href="index.html">English</a><span class="sep">|</span>
			<a href="jp-index.html">Japanese</a><span class="sep">|</span>
			<a href="#">Chinese</a><span class="sep">|</span>
			<a href="#">Korean</a><span class="sep">|</span>
			<a href="esperanto.html">Esperanto</a>
		</nav>
	</div>
			

	<div class="main-header">
		<div class="header-logo">
			<img src="images/shinmon_web50.png" alt="Hoshitumugi Inari Shrine logo">
			<a href="index.html" class="logo-text">Hoshitumugi<br>Inari-Shrine</a>
		</div>	
		

		<nav class="navigation" aria-label="Primary navigation">
			<ul>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="visit.html">VISIT</a></li>
				<li><a href="shop.html">SHOP</a></li>
				<li><a href="faq.html">FAQ</a></li>
				<li><a href="access.html">ACCESS</a></li>
			</ul>
		</nav>
	</div>
</header>

<main id="container">
	<img src="images/torii2.jpg" alt="ヒーロー画像" class="hero-img">
	

<section id="about">
	<div class="container">
		<div class="section-title-wrap">
			<h2 class="section-title">About Hoshitumugi Inari Shrine</h2>
		</div>
		
		<div class="about-flex">
			<div class="about-text">
				<p>Countless stars shimmer in the midnight sky-luminous beacons to which people have entrusted their deepest prayers since time immemorial.</p>
				<p>Our shrine is dedicated to a fox deity who governs the movement of the stars and weaves the intricate threads of human destiny.<br> The moment you step into the sacred grounds, the clamor of the world fades away, replaced by the profound stillness of celestial time.</p>
			<div class="highlight-box">
				<strong class="about-deity">Enshrined Deity: Tuzuri Ōkami<br>(The great Deity of the star-weaving Inari)</strong>
				<p>A fox deity said to be born from the luminous droplets of the Milky Way. This divine spirit weaves the prayers of people with threads of starlight, binding steadfast bonds of fate.</p>
			</div>
			</div>
		
			<div class="about-image-box">
				<img src="images/stary_shrine.jpg" alt="神社画像">
			</div>
		</div>
	</div>
</section>

<section id="news">
	<div class="container">
		<div class="section-title-wrap">
			<h2 class="section-title">News</h2>
		</div>
		

		<div class="news-list">
			<a href="#" class="news-item">
			
			<div class="news-meta">
				<time class="news-date" datetime="2026-01-12">2026.01.12</time>
				<span class="news-category">Event</span>
			</div>
			
			<div class="news-content">
				<h3 class="news-title">Announcement:Inviting you to the winter solstice Festival "The Weaving of the Stars"</h3>
				<p class="news-text">On the winter solsticeーthe longest night of the yearーWe will hold a special lantern-offering ceremony.Limited-edition sacred items will also be available for visitors.</p>
			</div>
			<span class="news-arrow" aria-hidden="true">→</span>
			</a>

<a href="#" class="news-item">
			
			<div class="news-meta">
				<time class="news-date" datetime="2026-01-01">2026.01.01</time>
				<span class="news-category">Sacred item</span>
			</div>
			
			<div class="news-content">
				<h3 class="news-title">We have commenced the bestowal of our Special New Year 'Goshuin in 2026</h3>
				<p class="news-text">To celebrate the dawn of the new year, we have prepared a special Goshuin that is a paper-cut art featuring a celestial fox with gold leaf.</p>
			</div>
			<span class="news-arrow" aria-hidden="true">→</span>
			</a>
		</div>
	</div>
</section>

<section id="shops">
	<div class="container">

<div class="section-title-wrap">
			<h2 class="section-title">Shrine Precincts</h2>
		</div>
		
		<div class="shop-grid">
			<div class="shop-card">
			<a href="shop.html">
				<div class="shop-img-placeholder" id="chaya">Hoshitumugi Tea House</div>
				<div class="shop-info">
					<h3>Tea house</h3>
					<p>We offer a signature Amazake (sweet rice drink) inspired by droplets of starlight, alongside exquisite sweets crafted with fox motifs.<br>Our specialty, the Hoshitumugi Inari-Sushi is a must try delicacy of the shrine.</p></a>
				</div>
			</div>
			
			<div class="shop-card">
			<a href="shop.html">
				<div class="shop-img-placeholder" id="miyage">Shinnomia</div>
				<div class="shop-info">
					<h3>Souvenir shop</h3>
					<p>Ethereal charms inspired by the night sky and artisanal hand-dyed textiles.<br>The ideal sanctuary for finding unique gifts and memories of Hoshitumugi.<br>Find your sacred mementos here.</p></a>
				</div>
			</div>
			
			<div class="shop-card">
			<a href="shop.html">
				<div class="shop-img-placeholder" id="restaurant">Inakigoya</div>
				<div class="shop-info">
					<h3>Restaurant</h3>
					<p>Savor the seasonal blessings of Hoshitumugi through our exclusive Japanese menu.<br>A dining experience where unique local flavors meet a stunning panoramic view of the shrine's seasonal landscape.</p></a>
				</div>
			</div>
		</div>
	</div>
</section>

<section id="access">
	<div class="container">

<div class="section-title-wrap">
			<h2 class="section-title">Access</h2>
		</div>
		
		<div class="access-comment">
			<p>Kaguratumugi-cho 1-7, Hoshito-city, Kyoto 505-0000</p>
			<p>10-minute walk from Ko-tada Station on the Hoshitumugi Main Line</p>
			<p class="access-caution">*As the night falls, the shrine grounds return to the sacred realm of Hoshitumugi Inari-Okami. We kindly ask that you refrain from visiting during late-night hours out of respect for the deity.</p>
		</div>
	</div>
</section>
</main>

<div style="text-align: center; border: 1px dotted var(--gold);">
		<p><a href="html-css.html">特設<strong>HTML/CSS</strong>コード一覧</a></p>
	</div>

<footer>
	<div class="to-top">
		<a href="#top">↑ back to top</a>
	</div>
	
	<div class="footer-inner">
		<div class="copyright">
			<p>Address:Hoshitumugi-cho 1-7, Hoshito-city, Seina prefecture 505-0000, Japan<br>Tel:+81(751)777-0107</p><p>Copyright ©Hoshitumugi Inari Shrine</p>
		</div>
		<nav class="footer-nav" aria-label="Footer navigation">
			<a href="contact.html">Contact</a>
			<a href="privacy.html">Privacy policy</a>
		</nav>
	</div>
</footer>

</body>
</html>

about.html

<main id="container">
	<div id="about">
		<div class="section-title-wrap"><h2 class="section-title">About</h2></div>
			
		<section class="greeting">
			<h3 class="greeting-title">Greeting from the Chief Priest</h3>
				
			<div class="greeting-text">
				<p class="greeting-center"><strong>"We spin the stars and connect the bonds."</strong></p>
				<p>The shrine is located in Hoshinafu Hoshihari City, a place long known for its beautiful view of the Milky Way. People have always linked the stars in the night sky to their daily peace and harvests.</p>
				<p>We worship the fox deity <strong>Tuzuri Ōkami</strong>, who spins the threads of the stars and aligns human destinies. For over a thousand years, this Inari Shrine has carried the prayers of the people.</p>
				<p>We hope the shrine, together with the rich nature of Hoshinafu, will be a place of comfort for visitors and a space where bonds lead to a bright future.</p>
				<p>We sincerely pray that your path in life is always illuminated by the light of the stars.</p>
			</div>
				<p class="greeting-signature">15th Chief Priest of Hoshitumugi Inari Shrine<br>Tsumugi Inoue</p>
		</section>

		<section id="history" class="about-section">
			<div class="container">
					
				<div class="section-title-wrap"><h2 class="about-title">History</h2></div>
			
				<div class="timeline">

					<article>
						<div class="timeline-item">
							<div class="timeline-year">903</div>
							<div class="timeline-body">
							<h3 class="timeline-title">Founding: A Starry Night Prophecy</h3>
							<p>The history of Hoshitumugi Inari Shrine is said to go back over a thousand years.</p>
							<p>One night, a large meteor fell into the <strong>Ryokusei Forest</strong> behind the current main hall.</p>
							<p>That night, a maiden dreamed of <strong>Tuzuri Ōkami</strong>, the fox deity who spins the threads of stars and guides human paths.</p>
							<p>Following this guidance, villagers built a shrine and began the faith of aligning fates according to the stars. The fragments of the fallen stars were enshrined as the sacred object, giving the shrine its name "<strong>Hoshitumugi</strong>".</p>
							</div>
						</div>
					</article>
					

					<article>
						<div class="timeline-item">
							<div class="timeline-year">1234</div>
							<div class="timeline-body">
							<h3 class="timeline-title">Guardian Deity: Guidance for Warriors</h3>
							<p>At that time, the shrine was deeply revered as the "God of Guidance." Warriors prayed here for safe travels and clear choices in life. They received the sacred "Star Light" from the shrine.</p>
							<p>In agriculture, wisdom spread on "planting according to the stars," linking Inari faith with celestial observation and creating unique rituals for bountiful harvests.</p>
							</div>

</div>
						</div>
					</article>

<article>
						<div class="timeline-item">
							<div class="timeline-year">1683</div>
							<div class="timeline-body">
							<h3 class="timeline-title">Prosperity: Bustling Post Town and "Star-Spinning Pilgrimages"</h3>
							<p>Hoshinafu thrived as a key town on the highways and became a busy post town.</p>
							<p>Travelers stopped at the shrine to pray for safety and prepare their hearts for the next journey.</p>
							<p>During this period, the custom of "Hoshitumogi Mairi" emerged—visiting the shrine, taking a break at a tea house, and receiving a small sacred light.</p>
							</div>
						</div>
					</article>

<article>
						<div class="timeline-item">
							<div class="timeline-year">1943</div>
							<div class="timeline-body">
							<h3 class="timeline-title">Survival: Escaping the Fires of War</h3>
							<p>During modernization, the shrine faced challenges.</p>
							<p>During air raids on Hoshinafu, the shrine grounds miraculously remained untouched. Locals said, "The sacred pine trees acted as Tuzuri Ōkami’s star shield to protect the shrine."</p>
							</div>
						</div>
					</article>

<article>
						<div class="timeline-item">
							<div class="timeline-year">20XX</div>
							<div class="timeline-body">
							<h3 class="timeline-title">To the Future: Spinning Stars and Connecting Bonds</h3>
							<p>Today, even as Hoshinafu urbanizes, stepping into the shrine grounds brings the same calm as a thousand years ago, preserving a culture of looking at the sky.</p>
							<p>The shrine is now widely revered, especially by younger generations, for <strong>forming bonds</strong>, providing <strong>guidance</strong>, and supporting new beginnings <strong>for luck</strong>.</p>
							<p>We continue to offer prayers to carry the "memory of the stars" into the next thousand years.</p>
							</div>
						</div>
					</article>
				</div>
			</div>
		</section>

<section id="deity" class="about-section">
			<div class="container">
				
				<div class="section-title-wrap"><h2 class="about-title">Deity</h2></div>
				
				<div class="deity-wrap">
					<h3 class="deity-name">Tuzuri Ōkami</h3>
					<p class="deity-tagline">The guiding god who spins the stars and aligns destiny</p>
					
					<div class="deity-text">
						<p>The main deity of Hoshitumugi Inari Shrine, Tuzuri Ōkami, appeared from the light of a meteor that fell into Ryokusei Forest a thousand years ago. The fox deity carefully weaves human connections and destinies.</p>
					</div>
					<section class="deity-block" aria-label="blessings">
						<h4 class="deity-subtitle">Blessings</h4>
						<p>Tuzuri Ōkami combines the Inari powers of "prosperity" with the celestial power of stars.</p>
						<ul class="deity-list">
							<li><strong>Destiny Alignment (Luck & Guidance)</strong><br>Adjusts your life path and clears obstacles, like untangling threads of fate.</li>
							<li><strong>Bond Weaving (Matchmaking)</strong><br>Connects people, work, and life paths, like stars forming constellations.</li>
							<li><strong>Fulfillment of Heartfelt Wishes</strong><br>Gives confidence and energy to turn strong inner desires into reality.</li>
						</ul>
					</section>
					</section>
					
					<section class="deity-block" aria-label="fox-deity">
						<h4 class="deity-subtitle">As a Fox Deity</h4>
							<div class="deity-text">
								<p>Tuzuri Ōkami is usually depicted as a fox. Foxes have long been seen as guides across boundaries.</p>
								<p>The fox of Hoshitumugi quietly walks the boundary between the night sky and human hearts, watching over those who are lost, helping them move forward.</p>
							</div>
					</section>
				</div>
			</div>
		</section>
		

		<section id="crest" class="about-section">
			<div class="container">
			
				<div class="section-title-wrap"><h2 class="about-title">Shrine Crest</h2></div>
				
				<div class="crest-wrap">
					<div class="crest-visual" aria-label="Hoshitumugi Inari Shrine Crest">
						<img src="images/shinmon_web350.png" alt="星紡稲荷神社仮神紋" class="crest-img">
					</div>

					<div class="crest-body">
						<h3 class="crest-name">The Crest of Hoshitumugi Inari Shrine</h3>
						<p>The crest symbolizes "star guidance," "bond connection," and "path alignment."<br>It combines the rice ears representing Inari, the spinning star representing Hoshitumugi, and the stake marking life choices—representing Tuzuri Ōkami guiding your path with stars.</p>
						<dl class="crest-list">
							<dt>Rice Ear</dt>
								<dd>Rice has long symbolized Inari. The ear reaches from earth to sky, symbolizing infinite growth and progress.</dd>
							<dt>Spinning Star</dt>
								<dd>The intersecting lines in the star represent Tuzuri Ōkami's weaving of connections, shining as bonds.</dd>
							<dt>Life Stake</dt>
								<dd>The stake marks life choices and crossroads. It connects your chosen path to the stars, keeping it firm and bright.</dd>
						</dl>
					</div>
				</div>
				
			</div>
		</section>
	</div>
</main>

visit.html

<main id="container">
	<section id="visit">
		<div class="container">
			
			<div class="section-title-wrap"><h2 class="section-title">VISIT</h2></div>
			
			<div class="visit-top-grid">
				<div class="visit-map"><img src="images/shrine_map.jpg" alt="境内マップ" class="shrine-map"></div>
				
				<div class="visit-hours">
					<h3 class="visit-subtitle">Worship Hours</h3>
					<table class="visit-table">
						<tbody>
							<tr><th>Main Torii (Gate)</th><td>5:30 ~ 18:00</td></tr>
							<tr><th>Shrine Office</th><td>9:00 ~ 17:30</td></tr>
							<tr><th>Information Desk</th><td>9:00 ~ 17:30</td></tr>
							<tr><th>Tea House Hoshitumugi</th><td>10:00 ~ 17:00</td></tr>
							<tr><th>Shin-nomiya</th><td>10:00 ~ 17:00</td></tr>
							<tr><th>Inakigoya</th><td>11:00 ~ 17:30</td></tr>
						</tbody>
					</table>
					
					<p>※After sunset (around 18:00), the shrine returns to the sacred time of Tuzuri Ōkami. Visitors are not allowed to enter the ground.</p>
				</div>
			</div>

<section class="visit-about-night">
			<h3>Night Visits</h3>
	<p>At night, Hoshitumugi Inari Shrine returns to its sacred state. During this time, <span class="night-info">entry to the shrine grounds is not allowed.</span></p>
	<p>The shrine is open for visits only during the daytime. Please come and enjoy a quiet visit in daylight hours.</p>
		</section>

<section class="visit-manners">
			<h3 class="visit-manner-title">Visiting Manners</h3>
			<ol>
				<li>Keep quiet while on the shrine grounds.</li>
				<li>Do not touch sacred objects or buildings.</li>
				<li>Smoking and drinking are prohibited on shrine grounds.</li>
				<li>Photography is allowed, but please avoid using flash.</li>
				<li>Do not use tripods or monopods, as they may block pathways.</li>
				<li>Eat and drink only in designated areas on the grounds.</li>
				<li>Dispose of trash, bottles, and cans in the designated bins.</li>
				<li>Unauthorized commercial photography, interviews, surveys, or other activities are strictly forbidden.</li>
				<li>Drone use is prohibited anywhere on the shrine grounds.</li>
			</ol>
		</section>
		</div>
	</section>
</main>

shop.html

<main id="container">
	<section id="shop">
		
		<div class="section-title-wrap"><h2 class="section-title">SHOP</h2></div>

<div id="shop-box">
		<article>
			<div class="shop-left"><img src="images/teahouse.jpg" alt="ショップ画像1"></div>
			
			<div class="shop-right">
				<h3>Tea House hoshitumugi</h3>
				<p>A quiet place where visitors can rest and enjoy traditional flavors inspired by the stars.<br>We serve our original Amasake (a sweet rice drink), along with seasonal sweets shaped like foxes and stars.<br>One of our special offering is Hoshitumugi Inari Sushi, prepared gently as a blessing for travelers.<br>Take a moment here to relax, breathe and reflect.</p>
				
				<h4>Opening hours</h4>
				<p>10:00 ~ 17:00</p>
				<h4 class="shop-contact">Contact</h4>
				<p><strong>mail : </strong>teahousehoshitumugi@hoshitumugi.com<br><strong>Tel : </strong>0000-12-5509</p>
			</div>
		</article>
		
		

		<article>
			<div class="shop-left"><img src="images/shin-nomiya.jpg" alt="ショップ画像2"></div>
			
			<div class="shop-right">
				<h3>Shin-nomiya</h3>
				<p>Shin-nomiya is the shrine's souvenir shop, offering items inspired by stars, foxes, and quiet wishes.<br>You will find charms, small gifts, and crafted items designed especially for Hoshitumugi Inari Shrine.<br>Each item is made to carry a gentle memory of your visit.<br>Many visitors choose something here as a keepsake or a gift for loved ones.</p>
				
				<h4>Opening hours</h4>
				<p>10:00 ~ 17:00</p>
				<h4 class="shop-contact">Contact</h4>
				<p><strong>mail : </strong>shinnomiya@hoshitumugi.com<br><strong>Tel : </strong>0000-15-1224</p>
			</div>
		</article>

<article>
			<div class="shop-left"><img src="images/Inakigoya.jpg" alt="ショップ画像3"></div>
			
			<div class="shop-right">
				<h3>Inakigoya</h3>
				<p>Inakigoya is a restaurant where guests can enjoy seasonal Japanese meals in a calm setting.<br>Our dishes use local ingredients and change with the seasons.<br>The space looks out over the shrine grounds, allowing visitors to enjoy nature while dining.<br>It is a place to quietly enjoy food and scenery together.</p>
				
				<h4>Opening hours</h4>
				<p>11:00 ~ 17:30</p>
				<h4 class="shop-contact">Contact</h4>
				<p><strong>mail : </strong>inakigoya@hoshitumugi.com<br><strong>Tel : </strong>0000-55-7777</p>
			</div>
		</article>
	</div>
	</section>
</main>

faq.html

<main id="container">
	<section id="faq">
		<div class="faq-container">
		
			<div class="section-title-wrap"><h2 class="section-title">FAQ</h2></div>
			<p class="faq-top-comment">Here are common questions about Hoshitumugi Inari Shrine. We keep the answers simple for visitors from all over the world.</p>

<nav class="faq-list" aria-label="FAQ Question list">
				<ul>
					<li><a href="#q1">Q1：What is Tuzuri Ōkami?</a></li>
					<li><a href="#q2">Q2：Can I visit at night?</a></li>
					<li><a href="#q3">Q3：What can I pray for at this shrine?</a></li>
					<li><a href="#q4">Q4：Is photography allowed?</a></li>
					<li><a href="#q5">Q5：Can I take photos of the main torii at night?</a></li>
					<li><a href="#q6">Q6：Where can I reieve a goshuin?</a></li>
					<li><a href="#q7">Q7：What manners should I follow?</a></li>
					<li><a href="#q8">Q8：How do I get to the shrine?</a></li>
				</ul>
			</nav>

			<section class="faq-qa">
			
				<article class="faq-items">
					<h3 class="faq-q" id="q1">Q1：What is Tuzuri Ōkami?</h3>
					
					<p class="faq-a">Tuzuri Ōkami is the enshrined deity of Hoshitumugi Inari Shrine. It is a fox deity known as <em>the Star-Weaving Fox Deity</em>, said to gently guid.<br>For a fuller story, please see the <a href="about.html">About</a> page.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q2">Q2：Can I visit at night?</h3>
					
					<p class="faq-a">No, after sunset (around 18:00), the shrine returns to the sacred time of Tuzuri Ōkami. Visitors are not allowed to enter the ground during nights.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q3">Q3：What can I pray for at this shrine?</h3>
					
					<p class="faq-a">Many visitors pray for guidance in life paths, relationships and future choices.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q4">Q4：Is photography allowed?</h3>
					
					<p class="faq-a">Yes, photography is allowed during daytime hours. The main hall may be photographed, but we kindly ask visitors to avoid using flash when you take a photo of it. Please be respectful and keep your voice low.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q5">Q5：Can I take photos of the main torii at night?</h3>
					
					<p class="faq-a">Yes, <strong>only photos of the main torii</strong> after closing are allowed. Other areas are not permitted at night. </p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q6">Q6：Where can I recieve a goshuin?</h3>
					
					<p class="faq-a">Goshuin is available at the shrine office from 9:00 to 17:30.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q7">Q7：What manners should I follow?</h3>
					
					<p class="faq-a">Please walk gently, keep voices low, and do not touch sacred objects. Smoking and drinking are not pemitted in the grounds.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			
				<article class="faq-items">
					<h3 class="faq-q" id="q8">Q8：How do I get to the shrine?</h3>
					
					<p class="faq-a">Please see the <a href="access.html">Access</a> page for train, bus and car information.</p>
					<p class="faq-back"><a href="faq.html">back to questions</a></p>
				</article>
				
			</section>

</div>
	</section>
</main>

access.html

<main id="container">
	<section id="access">

<div class="access-container">
			<div class="section-title-wrap"><h2 class="section-title">ACCESS</h2></div>

<section class="access-main-grid">
			<div class="access-map">
				<div class="map-frame" aria-label="Map placeholder"><img src="images/access-map.jpg" alt="星紡稲荷神社アクセスマップ"></div>
			</div>
			
			<p class="access-address">Address: Hoshitumugi-cho 1-7, Hoshito City, Seina Prefecture, Japan</p>
			<p class="access-number">Tel: +81(751)777-0107</p>
		</div>
		

		<div class="access-blocks">

<div class="access-hours">
				<h3 class="access-subtitle">Opening Hours</h3>
				<ul class="access-list">
					<li><strong>Main Torii:</strong> 5:30 - 17:30</li>
					<li><strong>Shrine Facilities & Office:</strong> 9:00 - 17:30</li>
			<p class="sunset">※After sunset(around 18:00), the shrine returns to the sacred time of Tuzuri Ōkami. Visitors are not allowed to enter the ground at night.</p>
				</ul>
			</div>
		</div>
	</section>


	<div class="access-blocks">
	<div class="transportation">
		<section class="access-block" aria-labelledby="by-train">
			<h3 class="access-title" id="by-train">By Train</h3>
			<ul class="access-list">
				<li>Ko-tada Station (Hoshitumugi Main Line) ー about 10 minutes on foot</li>
				<li>Hoshitumugi Central Station (Hoshitumugi Main Line) ー about 20 minutes on foot</li>
			</ul>
		</section>

<section class="access-block" aria-labelledby="by-bus">
			<h3 class="access-title" id="by-bus">By Bus</h3>
			<ul class="access-list">
				<li>Hoshitumugi Shrine-mae (Seina City Bus) ー about 5 minutes on foot</li>
			</ul>
		</section>

<section class="access-block">
			<h3 class="access-title">By Car</h3>
			<ul class="access-list">
				<li>20 minutes from Seina Expressway "Hoshito-minami"Exit</li>
				<li>About 10 minutes from Seina Expressway "Kandori"Exit</li>
			</ul>
		</section>
			</div>

<section class="access-block">
			<div class="access-cautions" role="note" aria-label="Important notes">
				<p><strong>Please use the public transportation whenever possible</strong></p>
				<p>The area around the Shrine may become crowded, especially on weekends and during festivals</p>
				<p>Parking is limited. If the parking is full, please follow staff guidance.</p>
			</div>
		</section>	
	</div>
	</section>
</main>

style.css

/*==========全体・ベース指示==========*/

*{
	margin: 0;
	padding: 0;
}

:root{
	--sumi: #1A181a;
	--white: #fff;
	--silver: #c7c7cf;
	--orange: #ff7a1a;
	--gold: #d6b36a;
	--line: rgba(190,197,197,.35);
}

body{
	font-family: system-ui; /*仮フォント*/
	background: var(--sumi);
	color: var(--white);
	max-width: 1280px;
	margin: 0 auto;
}

a{
	color: inherit;
	text-decoration: none; /*リンク下のラインが消える*/
}

/*===========================================*/

/*----------ヘッダーエリア----------*/
header{
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: rgba(214,179,106,0.6); /*墨色rgba(26, 24, 24, .6*/
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
#parallelworld-page{
	font-size: .85em;
	background: var(--sumi);
	color: var(--gold);
	padding: 10px 25px 7px;
}
/*言語ナビ*/
.header-top{
	/*background: var(--orange);*/
	height: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0 16px 8px;
}
.lang-nav{
	color: var(--silver);
	font-size: 14px;
	margin: 0; 
	padding: 0;
	gap: 12px;
	letter-spacing: .06em;
	display: inline-flex;
	align-items: center;
}
.lang-nav a:hover{
	color: var(--white);
}
.sep{
	opacity: .7;
}

/*ロゴ*/
.header-logo{
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
}
.header-logo img{
	width: 50px;
	height: 50px;
	display: block;
}
.header-logo a:hover{
	opacity: .85;		
}
.logo-text{
	display: block;
	position: relative;
	font-weight: 700;
	letter-spacing: 3.5px;
	line-height: 1.1;
}

/*ロゴエリア*/
.main-header{
	display: flex;
	align-items: flex-end;
	gap: 40px;
	padding: 0 40px 15px;
	min-height: 64px;
}

/*ページナビ*/
.navigation{
	flex: 1;
	display: flex;
	justify-content: center;
}
.navigation ul{
	list-style: none;
	display: inline-flex;
	gap: 120px;
	font-size: 16px;
	white-space: nowrap;
}
.navigation a{
	letter-spacing: .16em;
	color: var(--white);
	padding: 0 0 2px;
	position: relative;
	line-height: 1;
}
.navigation a::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--orange);
	transition: 0.4s;
}
.navigation a:hover::after{
	width: 100%;
}
:lang(ja) .navigation ul{
	gap: 120px;
	font-size: 16px;
}

.header-img{
	width: 100%;
	
}
/*-----------------------------------*/

/*----------フッターエリア----------*/
footer{
	border-top: 1px solid var(--line);
	padding: 15px 40px 22px;
}
.to-top{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--silver);
}
.to-top a:hover{
	color: var(--white);
}
.footer-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.copyright{
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--silver);
	margin: 0;
}
.footer-nav{
	display: inline-flex;
	align-self: flex-end;
	gap: 18px;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--silver);
}
.footer-nav a:hover{
	color: var(--white);
}
/*----------------------------------*/

/*----------メインエリア----------*/
main{
	background: var(--sumi);
	color: var(--white);
}
section{
	padding-top: 150px;
	padding-bottom: 100px;
}
.container{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 40px;
}
.section-title{
	font-size: 2rem;
	display: inline-block;
	padding-bottom: 20px;
	position: relative;
}
.section-title-wrap{
	text-align: center;
	padding-bottom: 35px;
}
.section-title::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 20%;
	width: 60%;
	height: 1px;
	background: var(--orange);
}
:lang(ja) .section-title{
	letter-spacing: 0.1em;
}

/*section1*/
.about-flex{
	display: flex;
	gap: 80px;
	align-items: center;
}
.about-text{
	flex: 1.2;
	font-size: 1.05rem;
}
.about-text p{
	margin-bottom: 2rem;
}
.about-deity{
	color: var(--orange);
	font-size: 1.2rem;
	display: block;
	margin-bottom: 10px;
}
.highlight-box{
	color: var(--sumi);
	background: var(--white);
	border-left: 4px solid var(--gold);
	padding: 40px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.about-image-box{
	flex: 1;
}
.about-image-box img{
	width: 100%;
	border-radius: 2px;
	box-shadow: 20px 20px 0 var(--gold);
}

/*section2*/
.news-list{
	max-width: 850px;
	margin: 0 auto;
}
.news-item{
	display: flex;
	padding: 40px 0;
	border-bottom: 1px solid var(--silver);
	align-items: flex-start;
	gap: 40px;
}
.news-item:hover{
	padding-left: 20px;
	background: rgba(214, 179, 106, 0.05);
}
.news-meta{
	flex-shrink: 0;
	width: 140px;
}
.news-date{
	display: block;
	font-size: 14px;
	color: var(--orange);
	margin-bottom: 8px;
	font-family: system-ui;
}
.news-category{
	font-size: 12px;
	padding: 3px 10px;
	border: 1px solid var(--gold);
	color: var(--gold);
	letter-spacing: 0.1em;
}
.news-title{
	font-size: 1.2rem;
	margin-bottom: 12px;
}
.news-text{
	font-size: 14px;
	color: var(--white);
}

/*section3*/
.shop-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
}
.shop-card{
	color: var(--sumi);
	background: var(--gold);
	border-radius: 4px;
	overflow: hidden;
	transition: 0.4s;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
	margin-top: 25px;

}
.shop-card:hover{
	transform: translateY(-12px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.shop-img-placeholder{
	height: 240px;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	letter-spacing: 0.2em;
}
#miyage{
	background-image: url(images/shop-front.jpg);
}
#chaya{
	background-image: url(images/chaya-front.jpg);
}
#restaurant{
	background-image: url(images/restaurant.jpg);
}
.shop-info{
	padding: 20px 40px;
}
.shop-info h3{
	margin-bottom: 15px;
	color: var(--sumi);
	font-size: 1.4rem;
}

/*section4*/
.access-comment{
	color: var(--orange);
	margin-top: 40px;
	font-weight: bold;
	font-size: 1rem;
	text-align: center;
}
.access-caution{
	margin: 30px 50px 0;
	text-align: left;
}
/*--------------------------------*/

/*-------privacy policy page------*/
.lang-box .lang-title{
	font-size: 16px;
	font-weight: normal;
}
.container-privacy-policy{
	padding: 0px 100px;
	font-weight: 700;
}
.lang-box{
	margin-bottom: 100px;
}
.lang-box .lang-title{
	text-align: center;
	margin-bottom: 35px;
	font-size: 1.5em;
}
/*--------------------------------*/

/*-----------about page-----------*/
/*アバウト*/
#about{
	margin: 85px auto 40px;
	padding: 0;
}
.about-title{
	font-size: 2em;
	color: var(--orange);
	text-align: left;
	margin-left: 100px;
	margin-bottom: 15px;
}
.about-title-wrap{
	max-width: 900px;
	margin: auto 45px;
	padding: 0 20px;
	border-bottom:1px solid var(--gold) ;
	line-height: 1.9;
}

/*グリーティング*/
.greeting{
	max-width: 900px;
	margin: 50px auto;
	padding: 55px 60px;
	border: 1px solid var(--line);
	background: rgba(199,199,207,0.05);
}
.greeting-title{
	font-size: 1.6em;
	letter-spacing: .10em;
	margin: 0 0 26px;
	padding-left: 12px;
	border-left: 3px solid var(--gold);
}
.greeting-text p{
	color: var(--silver);
	line-height: 1.95;
	margin: 0 0 14px;
}
.greeting-center{
	text-align: center;
	font-size: 1.2em;
}
.greeting-signature{
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--white);
	letter-spacing: .06em;
	line-height: 1.8;
	text-align: right;
	font-size: 0.95em;
}

/*ヒストリー*/
.timeline{
	max-width: 900px;
	margin: 0 auto;
}
.timeline-item{
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 28px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}
.timeline-year{
	font-size: 1.05em;
	padding: 5px;
	color: var(--gold);
	font-weight: 700;
	letter-spacing: .12em;
	white-space: nowrap;
}
.timeline-body{
	position: relative;
	padding-left: 18px;
}
.timeline-body::before/*縦ゴールドライン*/{
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: rgba(214,179,106,0.35);
}
.timeline-title{
	margin: 0 0 12px;
	font-size: 1.2em;
	letter-spacing: .06em;
}
.timeline-body p{
	margin: 0 0 10px;
	color: var(--silver);
	line-height: 1.9;
}
.timeline-body strong{
	color: var(--white);
}

/*ご本尊*/
.deity-wrap{
	max-width: 900px;
	margin: 0 auto;
}
.deity-name{
	font-size: 1.9rem;
	letter-spacing: .08em;
	margin: 0 0 10px;
}
.deity-tagline{
	margin: 0 0 28px;
	color: var(--silver);
	letter-spacing: .08em;
}
.deity-text p{
	color: var(--silver);
	line-height: 1.95;
	margin: 0 0 12px;
}
.deity-block{
	margin-top: 42px;
	padding-top: 28px;
	border-bottom: 1px solid var(--line);
}
.deity-block p{
	color: var(--silver);
	line-height: 1.95;
	margin: 0 0 16px;
}
.deity-subtitle{
	font-size: 1.2em;
	letter-spacing: .06em;
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 3px solid var(--gold);
}
.deity-lead{
	color: var(--silver);
	line-height: 1.95;
	margin: 0 0 16px;
}
.deity-list{
	margin: 0;
	padding-left: 1.2em;
	color: var(--silver);
	line-height: 1.95;
}
.deity-list li{
	margin-bottom: 14px;
}
.deity-list strong{
	color: var(--white);
}

/*神紋*/
.crest-wrap{
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 48px;
	align-items: start;
}
.crest-visual{
	padding: 18px;
	border: 1px solid var(--line);
	background: rgba(199,199,207,0.05);
}
.crest-img{
	width: 100%;
	height: auto;
	display: block;
}
.crest-name{ /*神紋ー右側*/
	margin: 0 0 10px;
	font-size: 1.4rem;
	letter-spacing: .06em;
}
.crest-body p{
	color: var(--silver);
}
.crest-lead{
	margin: 0 0 18px;
	color: var(--silver);
	line-height: 1.95;
}
.crest-list{
	margin: 0 0 10px;
	padding-top: 18px;
	border-bottom: 1px solid var(--line);
}
.crest-list dt{
	margin-top: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--white);
	padding-left: 12px;
	border-left: 3px solid var(--gold);
}
.crest-list dd{
	margin: 10px 0 0;
	color: var(--silver);
	line-height: 1.95;
}
.crest-list strong{
	color: var(--white);
}
/*--------------------------------*/

/*-------Visit page------*/

/*左：マップ*/
#visit{
	margin: 85px auto 40px;
	padding: 0;
}
.visit-top-grid{
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 35px;
}
.visit-map{
	display: flex;
	justify-content: center;
}
.shrine-map{
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: 50px;
	border-radius: 2px;
}

/*右：時間表*/
.visit-subtitle{
	font-size: 1.4em;
	letter-spacing: .04em;
	margin-bottom: 16px;
	padding-left: 12px;
	border-left: 3px solid var(--gold);
}
.visit-table{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	margin-bottom: 20px;
}
.visit-table th, .visit-table td{
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
}
.visit-table th{
	width: 50%;
	color: var(--white);
	font-weight: 600;
	text-align: left;
	background: rgba(199,199,204, 0.35);
}
/*.visit-hours{
	text-align: left;
}*/

/*注意文*/
.visit-about-night{
	max-width: 750px;
	margin: 85px auto 0;
	padding: 48px 48px 0;
	border-top: 1px solid var(--line);
}
.visit-about-night h3{
	font-size: 1.4em;
	letter-spacing: .08em;
	margin-bottom: 20px;
	color: var(--gold);
}
.visit-about-night p{
	line-height: 1.9;
	margin-bottom: 12px;
}
.night-info{
	color: var(--gold);
	font-size: 1.15em;
	letter-spacing: 2.5px;
}

/*参拝マナー*/
.visit-manners{
	max-width: 750px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 48px;
	align-items: start;
	margin: 80px auto 0;
	padding: 40px 48px;
	border: 1px solid var(--line);
	background: rgba(199,199,207,0.07);
}
.visit-manners ol{
	margin: 0;
	padding-left: 1.4em;
}
.visit-manners li{
	margin-left: 35px;
	margin-bottom: 14px;
	line-height: 1.9;
	color: var(--white);
}
.visit-manner-title{
	font-size: 1.4em;
	letter-spacing: 0.4em;
	padding-right: 25px;
	border-right: 3px solid var(--gold);
	white-space: nowrap;
	height: calc(100% - 24px);
}
/*-----------------------*/

/*-------shop page------*/
#shop{
	margin: 85px auto 40px;
	padding: 0;
}
#shop article{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 48px;
	align-items: start;
	padding: 0 50px 100px;
}
#shop-box{
	margin-top: 35px;
}
.shop-left{
	padding: 24px;
}
.shop-left img{
	width: 100%;
	height: auto;
	display: block;
}
.shop-right h3{
	font-size: 1.8em;
	letter-spacing: .04em;
	margin: 30px auto 15px;
	padding-left: 10px;
	border-left: 3px solid var(--gold);
}
.shop-right p{
	line-height: 1.8;
	color: var(--silver);
	margin-bottom: 14px;
}
.shop-right h4{
	max-width: 7.5em;
	margin: 24px 0 6px;
	font-size: 1.1em;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--gold);
	line-height: 1.6;
	white-space: nowrap;
}
.shop-right strong{
	font-weight: 600;
	color: var(--white);
}
.shop-contact{
	border-bottom: 1px solid var(--gold);
	width: 3.75em;
}
/*----------------------*/

/*--------FAQ page------*/

#faq{
	margin: 85px auto 40px;
	padding: 0;
}
.faq-top-comment{
	max-width: 900px;
	margin: 35px auto 50px;
	color: var(--silver);
	line-height: 1.9;
}
.faq-list{
	max-width: 350px;
	margin: 0 auto 25px;
	padding: 18px 22px;
	border: 1px solid var(--silver);
	background: rgba(199,199,207,.06);
}
.faq-list li{
	width: 350px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.faq-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.faq-list li:last-child{
	border-bottom: none;
}
.faq-list a{
	display: block;
	opacity: .92;
	color: var(--white);
	letter-spacing: .02em;
}
.faq-list a:hover{
	opacity: .90;
	color: var(--silver);
}

/*Q&A*/
.faq-qa{
	max-width: 900px;
	margin: 0 auto;
}
.faq-items{
	border-bottom: 1px solid var(--silver);
}
.faq-q{
	font-size: 1.5em;
	margin-bottom: 15px;
	letter-spacing: .03em;
}
.faq-a{
	position: relative;
	font-size: 1.1em;
	color: var(--gold);
	margin-left: 15px;
	margin-bottom: 10px;
	padding-left: 35px;
	line-height: 1.9;
}
.faq-a::before{
	content: "A.";
	position: absolute;
	left: 0;
	right: 0;
	color: var(--silver);
	opacity: .9;
	font-weight: 700;
}
.faq-qa .faq-items:nth-child(odd){ /*奇数*/
	background: rgba(199,199,207,0.1);
	padding: 35px 25px 15px;
}
.faq-qa .faq-items:nth-child(even){ /*偶数*/
	background: rgba(214,179,106,0.1);
	padding: 35px 25px 15px;
}
.faq-a a{
	text-decoration: none;
	color: var(--orange);
}
.faq-back a{
	font-size: 14px;
	color: var(--silver);
	display: flex;
	justify-content: right;
	padding: 0 30px 0;
}
.faq-back a:hover{
	color: var(--white);
	opacity: .95;
}
/*---------------------*/

/*-------Access page------*/

/*マップセクション*/
#access{
	margin: 85px auto 40px;
	padding: 0;
}
.access-map{
	max-width: 700px;
	margin: 0 auto;
}
.map-frame{
	width: 100%;
	height: 360px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: rgba(200,0,0,.08);
}
.map-frame img{ /*仮挿入ー場合によって削除*/
	width: 100%;
	height: 100%;
}
.access-address{
	text-align: center;
	font-size: 18px;
	letter-spacing: .04em;
	margin: 10px auto;
}
.access-number{
	text-align: center;
	max-width: 700px;
	margin: 16px auto 0;
	color: var(--silver);
	line-height: 1.2;
}

/*注意書き欄*/
.access-cautions{
	max-width: 700px;
	margin: 10px auto;
	padding: 24px 26px;
	border: 1px solid var(--line);
	background: rgba(214,179,106,.04);
}
.access-cautions p{
	text-align: center;
	margin-bottom: 15px;
	color: var(--silver);
	line-height: 1.9;
}
.access-cautions p strong{
	color: var(--orange);
}

/*参拝時間*/
.access-subtitle{
	width: 200px;
	font-size: 1.5em;
	letter-spacing: .05em;
	margin-bottom: 14px;
	padding: 10px;
	border: 3px solid rgba(214,179,106,.55);
	background: rgba(214,179,106,.035);
}
.access-list{
	list-style: none;
}
.access-list li{
	margin-left: 50px;
	padding: 25px 0 2.5px;
	border-bottom: 1px solid var(--line);
	color: var(--silver);
	line-height: 1.8;
}
/*アワーズ*/
.access-title{
	font-size: 1.5em;
	letter-spacing: .10em;
	padding-left: 10px;
	border-left: 3px solid rgba(214,179,106,.55);
	line-height: 1.9em;
}
.access-block{
	padding: 15px;
	margin-bottom: 35px;
}
.access-blocks{
	max-width: 900px;
	margin: 30px auto 15px;
	display: grid;
	gap: 36px;
}
.transportation{
	width: 900px;
	margin: 50px auto 35px;
}
.sunset{
	margin: 20px 0 0 50px;
}

特設HTML/CSSコード一覧