@charset "utf-8";

/*------------------------------------------------------------
	大阪万博2025専用ページCSS
------------------------------------------------------------*/

/* header */
header#banpakuHeader {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
header#banpakuHeader > div.header_box {
	position: absolute;
	bottom: 0; left: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1));
	padding: 3em 4em;
	border-radius: 20px 20px 0px 0px;
	box-shadow: 1px 1px 13px 5px rgba(0,0,0, 0.1);
}
header#banpakuHeader > div.header_box h2 {
	position: static;
	text-align: left;
	color: #222426;
	text-shadow: none;
	letter-spacing: 2px;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	transform: none;
	font-weight: 800;
	font-size: 4em;
}
header#banpakuHeader > div.header_box p {
	letter-spacing: 3px;
	line-height: 2.5em;
	margin: 0;
	font-weight: 600;
	color: #222426;
	font-size: 1.12em;
}
img.ico_scroll {
	width: 18px; height: 111px; position: absolute;
	right: 12%; bottom: 20px;
}

@media all and (min-width: 0) and (max-width: 767px) {
	header#banpakuHeader {
		margin: 0 auto;
		padding: 0em;
		max-width: 90%;
	}
	header#banpakuHeader > div.header_box {
		padding: 1em 2em;
	}
	header#banpakuHeader > div.header_box h2 {
		font-size: 2.4em;
		padding-top: 0.5em;
	}
	header#banpakuHeader > div.header_box p {
		letter-spacing: 1px;
		line-height: 2.5em;
		font-weight: 600;
		font-size: 1em;
	}
	img.ico_scroll {
		width: 18px; height: 111px; position: absolute;
		right: 2%; bottom: 20px;
	}
}
.fuwafuwa {
  display: block;
  animation: fuwafuwa 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fuwafuwa {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


/*------------------------------------------------------------------------------------
汎用
 ------------------------------------------------------------------------------------*/
div#osaka-banpaku-Box {
	padding: 5em 0;
	font-size: 14px;
	background: url("/assets/img/osaka-banpaku-2025/bg_ob.png") no-repeat;
	background-size: contain;
}
div.ob_container_pc {
	width: 1100px;
	margin: 0 auto;
}

header.ob_ttl {
	background: #0068B7;
	width: 100%;
	border-radius: 0px 50px 50px 0px;
	text-align: left;
	padding: 1em;
	position: relative;
	overflow: hidden;
}
/* 擬似要素で光の筋を追加 */
.ob_ttl::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(0, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%) rotate(0deg);
  animation: shine 5s linear infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(0deg);
  }
  100% {
    transform: translateX(100%) rotate(0deg);
  }
}

header.ob_ttl h2 {
	color: #fff;
	font-size: 1.4em;
	margin-bottom: 0em;
}
header.ob_ttl p {
	color: #FFF385;
	font-weight: 600;
	font-size: 0.78em;
	margin-bottom: 0em;
	letter-spacing: 0;
}

header.ob_ttl_sml {
	text-align: left;
	margin-bottom: 2em;
}
header.ob_ttl_sml h3 {
	color: #222426;
	font-size: 1.4em;
	margin-bottom: 0em;
}
header.ob_ttl_sml p {
	color: #0068B7;
	font-weight: 600;
	font-size: 0.78em;
	margin-bottom: 0em;
	letter-spacing: 0;
}

#osaka-banpaku-Box h4 {
	color: #0068B7;
	margin-bottom: 1.5em;
}

div.message__profile {
	text-align: right;
	padding-right: 2em;
}
img.ceo_sign {
	width: 70% !important;
	margin: 1em 0;
}

p.ob_txt {
	margin-bottom: 1.5em;
	line-height: 2em;
}
span.bld { color: #0068B7; font-weight: 700; }
main section header { margin-bottom: 2em; }

section.ob_box {
	margin-bottom: 5em;
}

div.img_plane {
	margin-bottom: 1em;
}
div.img_plane img {
	width: 100%;
	max-width: 100%;
}
@media all and (min-width: 0) and (max-width: 767px) {
	header.ob_ttl {
		width: 85%;
	}
	div.ob_container_pc {
		width: 100%;
		margin: 0 auto;
	}
}



.concept__features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* お好みで調整 */
  justify-content: center;
  padding: 0;
  list-style: none;
}

.concept__features li {
  width: 100%; /* スマホでは1列 */
}
.concept__features a img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity 0.4s ease; /* ← なめらかフェード */
}
.concept__features a:hover img {
  opacity: 0.8; /* ← 透過度（好みに応じて調整） */
}
/* PC表示時（768px以上） */
@media screen and (min-width: 768px) {
  .concept__features li {
    width: calc(50% - 8px); /* 2列 */
  }
}


/*------------------------------------------------------------------------------------
モーダルダイアログ
 ------------------------------------------------------------------------------------*/
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	justify-content: center;
	align-items: center;
}
.modal-content {
	position: relative;
	background: #000;
	padding: 1em;
	border-radius: 8px;
}
.modal-close {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 24px;
	color: #fff;
	cursor: pointer;
}
.iframe-wrapper {
	width: 90vw;
	max-width: 1280px;
	aspect-ratio: 16/9;
	margin: 0 auto;
}
.iframe-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}


/*------------------------------------------------------------------------------------
個別装飾
 ------------------------------------------------------------------------------------*/
section.concept>.container, section.products>.container, section.booth>.container {
	padding-left: 4em;
	position: relative;
}
section.concept>.container::before, section.products>.container::before, section.booth>.container::before  {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, #0068B7, rgba(0, 104, 183, 0));
}
@media all and (min-width: 0) and (max-width: 767px) {
	section.concept>.container, section.products>.container, section.booth>.container {
		border-left: none;
		padding-left: 20px;
	}
}


section.message, section.process {
	padding: 3em;
	border: 3px solid #0068B7;
	border-radius: 30px;
}
@media all and (min-width: 0) and (max-width: 767px) {
	section.message, section.process {
		padding: 0;
		border: 0;
		border-radius: 0;
	}
}