@charset "utf-8";

@media (max-width: 900px) {
	.brand-name { display: none; }
}

@media screen and (min-width: 980px) {
	.hero-media video{
		width:100%;
		height:auto;
	}
	#nav button {
		display: none !important;
	}
}
@media (max-width: 980px) {
	.nav.scrolled{
		padding-top: 0;
		padding-bottom: 0;
	}
	.nav {
		padding: 0;
	}
	.nav-menu,
	.drawer-menu {
		display: block;
	}
	.nav-menu a {
		display: block;
		color: #fff;
	}
	.nav-menu a .jp {
		color: #fff;
	}
	.nav-menu a .en {
		color: #eee;
		display:block;
	}
	.drawer-menu li{
		border-bottom:dotted 1px #fff;
	}
	.nav-menu a:hover,
	.nav-menu a:hover .jp,
	.nav-menu a:hover .en{
		color:#FFBE7D;
	}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
	.nav-menu a { padding: 8px 12px; }
	.nav-menu a .jp { font-size: 12px; }
	.hero-corner { display: none; }
}
@media (max-width: 1100px) {
	.service-grid { grid-template-columns: repeat(2, 1fr); }
	.strength-list { grid-template-columns: repeat(2, 1fr); }
	.about-body, .company-body, .contact-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.fac-row, .fac-row.reverse { grid-template-columns: 1fr; }
	.fac-row.reverse .fac-media { order: unset; }
	.footer-top { grid-template-columns: 1fr 1fr; }
	.hero-inner { grid-template-columns: 1fr; }
	.section-head { grid-template-columns: 1fr; gap: 30px; }
	section, .contact-cta, footer { padding-left: 60px; padding-right: 24px; }

	.hero-brand { left: 60px; top: 90px; }
	.hero-brand img { width: 180px; }
	.affiliates-head { grid-template-columns: 1fr; gap: 30px; }
	.affiliates-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.hero-media video{
		width:auto;
		height:100%;
	}

	.side-rail { display: none; }
	.brand-divider, .brand-tagline { display: none; }
	.cta { padding: 12px 18px; font-size: 12px; }
	.scroll-hint { left: 24px; }
	.service-grid, .strength-list {
		grid-template-columns: 1fr;
		margin-top:50px;
	}
	.footer-top { grid-template-columns: 1fr; }
	section, .contact-cta, footer {
		padding-left: 24px;
		padding-right: 24px;
	}
	.section-head{
		margin-bottom:0;
	}
	.fac-content { padding: 40px 24px; }
	.group-card {
		width: 170px;
		height: 170px;
		padding: 20px 20px;
		margin: 0 auto;
	}
	.group-card h3 { font-size: 12px; }
	.group-card h3 .en { font-size: 11px; }
	.group-card .group-symbol { width: 28px; height: 28px; }

	.map-placeholder {
		position: relative;
		padding-top: 56.25%; /* 16:9 アスペクト比 */
		height: 0;
		border-radius:14px;
		overflow:hidden;
		margin:30px 0;
		aspect-ratio: auto;
	}

	.map-placeholder iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.shakun-block { padding: 24px 22px; }
	.shakun-list li { font-size: 15px; padding-left: 34px; }

	.about-copy .signature { flex-direction: column; align-items: flex-start; gap: 20px; }
	.about-copy .signature .signature-portrait { width: 140px; height: 170px; }

	.info-table .officer-row { grid-template-columns: 1fr; gap: 2px; }
	.info-table .officer-row .officer-note { display: block; margin-left: 0; margin-top: 2px; }
	
	.info-table th{
		width: 20%;
	}
	.info-table td{
		width: 80%;
	}
	
	.hero-brand { left: 24px; top: 80px; max-width: 240px; }
	.hero-brand img { width: 140px; }
	.hero-brand-name .jp { font-size: 13px; }
	.hero-brand-name .en { font-size: 10px; }
	
	.affiliates-grid { grid-template-columns: 1fr; }

	.news .section-head {
		grid-template-columns: unset;
	}

	.facilities-grid {
		display: flex;
		flex-flow: wrap;
	}
	.facilities-card{
		width:49%;
		padding: 10px 15px;
		gap: 10px;
	}
	.facilities-card .arrow-link {
		margin-top: 5px;
	}
	.link-buttons {
		display: block;
	}


	.hero {
		min-height: 520px;
	}
	.hero-inner{
		padding: 0 20px;
		position: absolute;
		top: 120px;
	}

	.hero-title {
		font-size: clamp(34px, 3.2vw, 50px);
	}
	.hero-title-jp {
		font-size: clamp(14px, 1.2vw, 16px);
	}
	.hero-sub {
		max-width: 100%;
		font-size: 14px;
	}
	
	/* 次階層 */
	section.aboutus {
		padding: 60px 20px;
	}
	#nextpage section.message {
		width: 100%;
		padding: 0 20px;
	}
	#nextpage #message .section-title-en,
	#nextpage #about .section-title-en {
		font-size: clamp(14px, 1.6vw, 18px);
		margin: 10px;
	}
	#nextpage .message-body {
		display: block;
	}
	
	#nextpage section#about {
		padding: 60px 20px;
	}
	#nextpage .about-body {
		grid-template-columns: unset;
		gap: 30px;
	}
	
	#nextpage .section-title-jp {
		font-size: clamp(20px, 3.4vw, 30px);
	}
	#nextpage .section-title-en {
		font-size: clamp(14px, 1.6vw, 18px);
		margin: 0 0 10px;
	}
	

	.fac-content .index {
		font-size: 38px;
	}
	
	.footer-brand .logo-wrap img{
		height: auto;
		width: 100%;
	}

	.footer-brand .logo-wrap {
		height: 0;
		margin-bottom: 20px;
	}
	.footer-col h5 {
		font-size: 15px;
	}
	.footer-col h5 .en {
		font-size: 12px;
	}


	#nextpage section#services{
		padding: 20px;
	}

	.service-card .num {
		font-size: 16px;
	}

	.service-card h3 {
		font-size: 20px;
	}


	#nextpage section.capacity{
		padding: 20px;
	}

	.modal-scroll-hint {
		display:block;
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 10;
		transform: translate(-50%, -50%);
		pointer-events: none;
		opacity: 0.8;
		visibility: visible;
		transition: opacity 0.4s ease, visibility 0.4s ease;
	}

	.modal-scroll-hint {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease, visibility .3s ease;
	}

	.modal-scroll-hint.is-hidden {
		opacity: 0;
		visibility: hidden;
	}

	.page-meta{
		padding:0 0 0 20px;
	}

	#nextpage section.contact{
		padding: 20px;
	}

	#nextpage section.contact .section-title-en {
		margin: 10px;
	}

	#nextpage section.serm{
		padding: 20px;
	}

	.serm-grid{
		margin-top:50px;
	}

	.serm-card{
		display: block;
		margin-bottom: 30px;
	}
	.serm-card p{
		width: 100%;
		margin-bottom:10px;
	}
	.serm-grid h3 {
		margin-bottom:10px;
	}

}


/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width: 900px) {

	.news {
		padding: 50px 25px;
	}

	.news-inner {
		display: block;
	}

	.news-heading {
		width: auto;
		border-right: 0;
		border-bottom: 1px solid #b9d9ee;
		padding: 0 0 25px;
		margin-bottom: 20px;
	}

	.news-heading h2 {
		font-size: 36px;
	}

	.news-list-area {
		width: 100%;
	}

	.news-item {
		grid-template-columns: 100px 110px 1fr 20px;
		column-gap: 10px;
	}
}


@media screen and (max-width: 600px) {

	.news {
		padding: 40px 20px;
	}

	.news-heading .en {
		font-size: 17px;
	}

	.news-heading h2 {
		font-size: 32px;
	}

	.news-heading .sub {
		font-size: 12px;
	}

	.news-item {
		display: grid;
		grid-template-columns: 1fr 20px;
		gap: 5px 10px;
		padding: 15px 0;
	}

	.news-date {
		grid-column: 1;
		grid-row: 1;
		font-size: 13px;
	}

	.news-category {
		grid-column: 1;
		grid-row: 2;
		width: 90px;
		height: 26px;
		font-size: 12px;
	}

	.news-title {
		grid-column: 1;
		grid-row: 3;
		font-size: 14px;
		padding-top: 5px;
	}

	.news-arrow {
		grid-column: 2;
		grid-row: 1 / 4;
		align-self: center;
	}

	.news-more {
		margin-top: 20px;
	}

	.news-more a {
		font-size: 13px;
	}
}


/* ===============================================================================================
   貯蔵容量一覧
=============================================================================================== */
@media (max-width: 1000px) {
	.products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.page-head, .matrix-wrap, .products { padding-left: 20px; padding-right: 20px; }
	.page-head { padding-top: 100px; }
	.products-grid { grid-template-columns: 1fr; }
}