@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Otake
	
	Update Description :
  [2025/04/10] Gナビhover追加
  [2024/07/29] JMA共通ヘッダー追加
	[2024/07/29] ビジュアル周り調整
	[2023/12/13] ヘッダー改訂
	[2023/05/22] Header Exhibitions Navigation削除
	[2023/01/25] ヘッダー修正
	[2022/05/19] Gナビのボタン、リンクオフ時のスタイル追加

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

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Redefinition
	3. Base Box Setting
	4. Form Setting
	5. Common Items Setting
		- Basic Link
	 	- Header Items
		- Global Navigation
		- Gnavi Button Action (for SP)
	 	- Footer Items
		- Footer Navigation
		- Breadcrumbs
		- Header Exhibitions Navigation

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



/*===== ■1. Global Redefinition =====*/
body {
  overflow-x: hidden;
  color: #333333;
  margin: 0px auto;
}

img { max-width: 100%;}
img.auto { max-width: none;}
img.limit {
	max-width: 640px;
	margin: 0 auto;
}



/*===== ■2. Font Redefinition =====*/
html { font-size: 62.5%;}

html * {
	font-size: 1.8rem;
	line-height: 1.4;
}

html *:not(div):not(p):not(dd) { line-height: 1.2;}

html sup {
  font-size: 1.2rem;
  vertical-align: top;
}

body {
	font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Icons", "Helvetica Neue", Verdana, "Arial",sans-serif;
	font-weight: 500;
}

@media (max-width: 768px){
  html * {
    font-size: 1.6rem;
  }
  
	html { font-size: calc(100vw / 76.8 * 2.048);}
}
@media (max-width: 640px){ html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px){ html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px){ html { font-size: calc(100vw / 37.5 *1);}}
@media (max-width: 360px){ html { font-size: calc(100vw / 36);}}
@media (max-width: 320px){ html { font-size: calc(100vw / 32);}}



/*===== ■3. Base Box Setting =====*/

article {
  position: relative;
  margin: 0 0 100px;
}

section {
  position: relative;
  margin: 0 20px;
}

section section {
  margin: 0 0 50px;
  background: none;
}
section section:last-of-type { margin: 0;}

section > .inner { margin-bottom: 30px;}
section:last-of-type > .inner { margin-bottom: 20px;}

aside#video > iframe {
  aspect-ratio:16 / 9;
  width:50%;
  max-width: 640px;
  height:100%;
}


@media (max-width: 768px){
  article { margin: 0 0 10.67vw; }

  section { margin: 0 2.67vw;}
  
  section section { margin: 0 0 8vw;}
  section section:last-of-type { margin: 0;}
  
  section > .inner { padding: 0 2.67vw 2.67vw;margin-bottom: 0;}
  section section > .inner { padding: 0 2.67vw;}
  section:last-of-type > .inner { padding: 0 2.67vw 2.67vw;}
  
  aside#video {
    padding: 0 2.67vw;
  }
  
  aside#video > iframe {
    width:100%;
    margin-bottom: 2.67vw;
  }
}


/*===== ■4. Form Setting =====*/
.select_wrap {
  display: block;
  position: relative;
  height: 45px;
  background: #333;
}

select {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family: 'Prompt', sans-serif;
}
select::-ms-expand { display: none;}


@media (max-width: 768px){
  .select_wrap { height: 14.68vw;}
}



/*===== ■5. Common Items Setting =====*/
/* Basic Link */
a {
	outline: hidden;
	text-decoration: underline;
}

a:link {
	color: #8a0e10;
	text-decoration: underline;
}

a:visited {
	color: #8a0e10;
	text-decoration: underline;
}

a:hover {
	color: #d71518;
	text-decoration: none;
}

a img { transition: opacity .25s;}
a:hover img {
  opacity: .5;
  transition: opacity .25s;
}

a.soon {
  pointer-events: none;
  opacity: .6;
}
a.link-off {
  pointer-events: none;
}


@media (max-width: 768px){
  a:hover {
    color: #8a0e10;
    text-decoration: underline;
  }
  
  a img { transition: none;}
  a:hover img {
    opacity: 1;
    transition: none;
  }
}


/* Header Items */
header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
  transition: 0.3s ease-in-out;
}

header > :first-child {
  flex-shrink: 0;
  max-width: 30%;
}

header > :first-child a { 
  display: block;
  max-width: 300px;
}
header > :first-child a img { 
  margin-bottom: 20px;
}

header > :first-child a.boxlink{
  background: #c00;
  border: 1px solid #fff;;
  text-align: center;
  font-weight: bold;
}
header > :first-child a.boxlink:hover {
  background: #8a0e10;
  filter: none;
}

header > :first-child a.boxlink::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid currentColor;
  transform: translateY(-50%);
  content: "";
}
header > div:nth-child(2) {
  width: 70%;
}

/*header > div { width: calc(100% - 21.97% - 20px);}*/

header #h_option,
header #h_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
header #h_links {
  gap: 10px;
}

header #h_option {
  margin-bottom: 20px;
}

header #h_option > li:not(#option_lang) { margin-left: 10px;}

header #h_option > li:first-of-type {
  margin-right: 10px;
  height: 20px;
}

header #h_option > li:first-of-type > a > img {
  height: 100%;
}

header #h_option > li:not(#option_lang),
header #h_option > li:not(#option_lang) div { line-height: 0;}

header #h_option #option_lang ul { display: flex;}

header #h_option #option_lang li { margin-left: 10px;}

header #h_option #option_lang ul a {
  line-height: 1;
  color: #fff;
}

header #h_option #option_lang ul a:hover { color: #ccc;}

header #h_links { margin: 20px 0 0;}

header #h_links .boxlink {
  width: 240px;
  padding: 15px;
  font-size: 1.4rem;
}

#btn_gnavi { display: none;}

#share_header {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  left: 0;
}

header.fixed {
	position: fixed;
  z-index: 999;
  width: 100%;
  top:40px;
  left:0;
  background: #fff;
}

header.fixed #h_option #option_lang ul a,
header.fixed #h_option #option_subscribe a {
  color: #000;
}

header.fixed #gnavi > ul > li > a {
  color: #000;
}

header.fixed #gnavi > ul > li> a:hover {
  opacity: .5;
  transition: opacity .25s;
}

header.fixed #gnavi > ul > li > a[target="_blank"] {
  padding-right: 20px;
}

@media (max-width: 768px) {
  header.fixed #gnavi > ul > li> a:hover {
    opacity: 1;
    transition: none;
  }
}

/* Main Visual */
#mv {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#mv::before {
  content:"";
}
#mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
#mv_bg > div > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
}
#mv_bg > div::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0 ,0, 0, .35);
  z-index: 0;
  content: "";
}
#mv_bg > div::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, .35) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .35) 75%),
              linear-gradient(45deg, rgba(0, 0, 0, .35) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .35) 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
  z-index: 0;
  content: "";
}


@media (max-width: 768px){
  header {
    display: block;
    position: relative;
    margin-bottom: 4vw;
    padding: 2.67vw 2.67vw 0;
  }
  header > :first-child {
    max-width: 100%;
    min-width: none;
  }
  
  header > :first-child > :first-child{
    width: 85%;
  }

  header > :first-child a.boxlink {
    font-size: 1.6rem;
  }

  header > :first-child a.boxlink:hover {
    background: #c00;
  }
  header > div:nth-child(2){ width: 100%;}
  
  header #h_option {
    justify-content: space-between;
    position: relative;
    margin-bottom: 2.67vw;
  }
  
  header #h_option > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 2.67vw;
    width: calc(100% / 4);
  }
  
  header #h_option > li:not(#option_lang) {
    margin: 0;
    padding: 0;
  }

  header #h_option > li:first-of-type {
    width: 15%;
  }
  header #h_option > li:first-of-type > a > img {
    width: 30px;
    height: 21px;
  }
  header #h_option #option_lang ul { display: block;}
  header #h_option #option_lang li {
    display: flex;
    margin-left: 0;
    color: #fff;
  }
  header.fixed #h_option #option_subscribe a {
    font-size: 1.4rem;
  }
  header #h_option #option_lang ul a {
    display: inline-block;
    padding: 2.67vw 0;
    color: #fff;
    line-height: 1;
  }

  header #h_option #option_lang ul a:hover { color: #ccc;}

  header #h_links {
    justify-content: space-between;
    align-items: stretch;
    margin: 2.67vw 0 0;
    gap: 2.67vw;
  }

  header #h_links li {
    width: calc(50% - 1.34vw);
  }
  
  header #h_links li a.boxlink {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2.67vw;
    width: auto;
    font-size: 1.4rem;
  }
  
  header #h_links li:nth-of-type(4) a.boxlink{
    padding: 2vw 2.67vw;
  }
  
  #share_header {
    position: static;
  }

  header.fixed {
    position: static;
    padding: 2.67vw 2.67vw 0;
  }
  
  header.fixed #gnavi > ul > li > a {
    color: #fff;
  }

  /* Main Visual */
  #mv {
    margin-bottom: 2.67vw;
  }
}



/* Global Navigation */

#gnavi {
  margin-bottom: 20px;
}

#gnavi > ul {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

#gnavi > ul > li {
  position: relative;
  margin-left: 3%;
}

#gnavi > ul > li:first-child { 
  margin: 0 2%;
}

#gnavi > ul > li button { display: none;}


#gnavi > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  text-decoration: none;
}

#gnavi > ul > li > a img {
  width: 30px;
  min-width: 30px;
}
#gnavi > ul > li > a img:last-of-type {
  display: none;
}

#gnavi > ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  z-index: 3;
  width: 250px;
  margin: 2px 0 0;
  padding: 20px;
  background: rgba(61, 6, 7, .85);
  color: #fff;
  transition: all .25s;
}
#gnavi > ul > li.dropdown ul {
  visibility: visible;
  opacity: 1;
  transition: all .25s;
}

#gnavi > ul ul a {
  display: block;
  position: relative;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

#gnavi > ul ul a::before {
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  transform: translateY(-50%);
  content: "";
}

#gnavi > ul ul a:hover {
  border-radius: 3px;
  background: #8a0e10;
}

#gnavi > ul li a.pointer-none {
  color: #8a0e10;
}
#gnavi > ul > li > a.pointer-none:hover, 
#gnavi > ul > li > a.pointer-none.active, 
#gnavi > ul > li.dropdown > a.pointer-none {
  color: #fff;
}


@media (max-width: 768px){
  #gnavi {
    display: none;
    position: fixed;
    top: 0;
    right: -50%;
    z-index: 99;
    overflow-y: scroll;
    width: 80%;
    height: 100vh;
    background: rgba(8, 74, 109, 0);
    border-bottom: none;
  }

  #gnavi > ul {
    display: block;
    margin: 0;
    padding: 21.34vw 5.34vw 5.34vw;
    background: inherit;
    -webkit-overflow-scrolling: touch;
  }

  #gnavi > ul > li {
    width: 100%;
    position: relative;
  	border-bottom: .67vw solid #fff;
    margin-left: 0;
  }
  
  #gnavi > ul > li:first-child {
    margin-left: 0;
  }

  #gnavi > ul > li:nth-of-type(5) button,
  #gnavi > ul > li:nth-of-type(6) button{
  	display: none;
  }

  #gnavi > ul > li button {
    display: block;
    position: absolute;
    top: 1.87vw;
    right: 0;
    width: 8vw;
    height: 8vw;
    background: rgba(0, 0, 0, .15);
  }
  
	#gnavi > ul > li button::before,
	#gnavi > ul > li button::after {
		position: absolute;
		background: #fff;
		content: "";
	}
	#gnavi > ul > li button::before {
		top: 50%;
		left: 20%;
		width: 60%;
		height: .53vw;
		transform: translateY(-50%);
	}
	#gnavi > ul > li button::after {
		top: 20%;
		left: 50%;
		width: .53vw;
		height: 60%;
		transform: translateX(-50%);
	}
	#gnavi > ul > li.active button::after { display: none;}

  #gnavi > ul > li:not(:first-child)::after { display: none;}

  #gnavi > ul > li > a {
    display: block;
    height: 100%;
    padding: 4vw 8vw;
    border-bottom: none;
    color: #fff;
    font-size: 1.6rem;
  }
  #gnavi > ul > li > a[href="javascript:void(0);"] {
    color: #fff;
  }
  #gnavi > ul > li > a:hover,
  #gnavi > ul > li.dropdown > a { background: inherit;}
  #gnavi > ul > li > a.active { background: rgba(0, 0, 0, .15);}
  #gnavi > ul > li.dropdown > a::after { display: none;}
  
  #gnavi > ul ul {
    display: none;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    transition: none;
  }
  
  #gnavi > ul > li.dropdown ul {
    display: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  #gnavi > ul ul li {
    display: block;
    margin: 0 0 2px;
  }

  #gnavi > ul ul a {
    padding: 2.67vw 4vw;
    background: rgba(0, 0, 0, .15);
    font-size: 1.4rem;
  }

  #gnavi > ul ul a::before { border-width: 1.34vw;}

  #gnavi > ul ul a:hover {
    border-radius: 0;
    background: rgba(0, 0, 0, .15);
  }
  
  #gnavi > ul li a.pointer-none {
    color: #fff;
  }
  
  #gnavi > ul > li > a img {
    margin: 0 auto;
  }
  #gnavi > ul > li > a img:last-of-type {
    display: block;
  }
  
}


/* Gnavi Button Action (for SP) */
@keyframes navSP {
	0% {
    right: -50%;
    opacity: 0;
    background: rgba(8, 74, 109, 0);
	}
	100% {
    right: 0;
    opacity: 1;
    background: rgba(8, 74, 109, 1);
	}
}

@media (max-width: 768px){
  .active body {
    overflow: hidden; 
    height: 100vh;
  }
  .active body::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    content: "";
  }
  .active #gnavi {
    display: block;
    animation: navSP .4s ease-in-out forwards;
  }
  
  /* button */
  #btn_gnavi {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: fixed;
    z-index: 100;
    top: 2vw;
    right: 2.67vw;
    width: 13.34vw;
    height: 16.01vw;
    background: rgba(8, 74, 109, .8);
  }
  
  .fixed {
    position: fixed;
    top: 2.67vw;
    padding: 0;
    z-index: 1000;
  }

  #btn_gnavi::before,
  #btn_gnavi::after {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: .67vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: .5s ease-in;
    content: "";
  }
  
  #btn_gnavi b {
    position: absolute;
    left: 50%;
    bottom: .67vw;
    font-size: 1.0rem;
    color: rgba(255, 255, 255, .8);
    transform: translateX(-50%);
  }

  #btn_gnavi span {
    width: 70%;
    height: .67vw;
    margin: 0 auto 4vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    opacity: 1;
    transform: rotate(-45deg);
  }

  #btn_gnavi span::before,
  #btn_gnavi span::after {
    position: absolute;
    left: 20%;
    width: 60%;
    height: .67vw;
    border-radius: 10vw;
    background: rgba(255, 255, 255, .8);
    transition: .25s ease-in;
    content: "";
  }
  #btn_gnavi span::before { margin-top: -4vw;}
  #btn_gnavi span::after {margin-top: 4vw;}
  
  .active #btn_gnavi {
    background: rgba(0, 0, 0, .15);
    transition: .25s ease-out .25s;
    top: 2.67vw;
  }

  .active #btn_gnavi::before,
  .active #btn_gnavi::after {
    background: #fff;
    opacity: 1;
    transition: .25s ease-out .25s;
  }
  .active #btn_gnavi::before { transform: rotate(45deg);}
  .active #btn_gnavi::after { transform: rotate(-45deg);}

  .active #btn_gnavi span { opacity: 0; transition: .25s ease-out .25s;}

  .active #btn_gnavi span::before,
  .active #btn_gnavi span::after {
    left: -100%;
    transition: .5s ease-out;
  }
}


/* Footer Items */
footer > div  {
  display: flex;
  max-width: 1366px;
  margin: 0 auto 40px;
  padding: 0 10px;
}
footer > p {
  width: 100%;
  padding: 10px;
  background: #d71518;
  color: #fff;
  text-align: center;
}

footer > p a {
  color: #fff !important;
  text-decoration: none !important;
}

footer #f_address {
  width: 280px;
  margin-left: auto;
}

footer #f_address dt {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 2.0rem;
}

footer #f_address dd p { 
  margin: 15px 0;
  line-height: 2;
  font-size: 1.4rem;
}

footer #f_address dd a {
  line-height: 2;
  font-size: 1.4rem;
}
footer #f_address dd p + a {
  display: block;
  width: 35%;
  margin-left: auto;
}

footer #f_address dd p + a img { width: 100%;}


@media (max-width: 768px){
  footer > div  {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
  }
  footer p small { font-size: 1.2rem;}

  footer #f_address {
    width: auto;
    margin: 0 2.67vw 2.67vw;
    padding: 0;
  }

  footer #f_address dt {
    margin-bottom: 4vw;
    padding-bottom: 4vw;
    border-bottom: 1px solid #ccc;
    font-size: 1.6rem;
    text-align: center;
  }
  footer #f_address dd p { margin: 4vw 0;}
  
  footer #f_address dd ul {
    display: block;
    margin: 0 0 4vw;
  }

  footer #f_address dd li:not(:last-child) { margin: 0 0 1.34vw;}

  footer #f_address dd li b {
    width: 13.34vw;
    margin-right: 1.34vw;
    padding: 1.34vw;
  }

  footer #f_address dd ul + a {
    width: 50%;
    margin-left: auto;
  }
}


/* Footer Navigation */
footer #f_sitemap {
  display: flex;
}
footer #f_sitemap #sitemap_info {
  margin-right: 60px;
}
footer #f_sitemap #sitemap_info dt {
  margin-bottom: 20px;
  font-weight: bold;
}
footer #f_sitemap #sitemap_info dd {
  font-size: 1.4rem;
  line-height: 2;
}
footer #f_sitemap #sitemap_main {
  margin-right: 20px;
}
footer #f_sitemap #sitemap_main em {
  display: inline-block;
  margin-bottom: 20px;
  font-weight: bold;
}
footer #f_sitemap #sitemap_main li li a {
  line-height: 2;
  font-size: 1.4rem;
}


@media (max-width: 768px){
  footer #f_sitemap {
    flex-direction: column;
    margin: 0 2.67vw;
  }
  footer #f_sitemap #sitemap_info {
    margin: 0 0 6.67vw 0;
  }
  footer #f_sitemap #sitemap_info dt {
    margin-bottom: 4vw;
  }
  footer #f_sitemap #sitemap_main {
    margin: 0 0 6.67vw 0;
  }
  footer #f_sitemap #sitemap_main em {
    margin-bottom: 4vw;
  }
  
}


/* Breadcrumbs */

#breadcrumbs {
  margin-top: 20px;
}

#breadcrumbs * {
  font-size: 1.6rem;
}

#breadcrumbs ol {
  display: flex;
  align-items: center;
  margin: 0 20px 20px;
  font-size: 1.2rem;
}

#breadcrumbs li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

#breadcrumbs li:after {
	width: 6px;
	height: 6px;
	margin-left: 10px;
	border-top: 1px solid #8B968D;
	border-right: 1px solid #8B968D;
	transform: rotate(45deg);
	content:'';
}
#breadcrumbs li:last-child:after { display: none;}

#breadcrumbs a:hover { color: #333;}


@media (max-width: 768px){
  #breadcrumbs {
    margin-top: 0;
    overflow-x: auto;
    white-space: nowrap;
  }
  #breadcrumbs * { font-size: 1.2rem;}
  
  #breadcrumbs ol { margin: 0 2.67vw 2.67vw;}

  #breadcrumbs li { margin-right: 2.67vw;}

  #breadcrumbs li:after {
    width: 1.34vw;
    height: 1.34vw;
    margin-left: 2.68vw;
    border-width: .67vw;
  }
  #breadcrumbs li:last-child { padding-right: 2.67vw;}
}

/* Related */
#related_link {
  margin: 0 10px 10px 0;
}

#related_link ul {
  display: flex;
  flex-wrap: wrap;
}

#related_link ul > li {
  margin: 0 10px;
  padding: 5px;
  background: rgba(255, 255, 255, .8);
}

#related_link ul > li:first-child {
  margin-left: 0;
}

#related_link ul a.txtlink {
  display: inline-block;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  #related_link { 
    width: fit-content;
    margin: 4vw 2.67vw 2.67vw 0;
    padding: 0;
  }

  #related_link ul { 
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  #related_link ul > li { 
    width: 100%;
    margin: 0;
    padding: 1.34vw;
  }
  
  #related_link ul li:not(:last-child) { margin-bottom: 1.34vw;}

}