@charset "UTF-8";
/* Basic information
*****************************************/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400..700&display=swap');
html {
  background-color: transparent;
  background-image: none;
  scroll-padding-top:120px;
  scroll-behavior:auto;
}
body {
	color: #000;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "meiryo",sans-serif;
	line-height: 1.6;
	width: 100%;
}
body.ff-zh {
	font-family: 'Microsoft Yahei', 'PingHei', 'SimHei', 'SimSun', 'sans-serif';
}
body.ff-ko {
	font-family: 'Malgun Gothic', 'Yoon Gothic', 'sans-serif';
}
@media (max-width: 991px) {
html {  scroll-padding-top:60px;}
}
/* font-size 
*****************************************/
body { font-size: 62.5%; /* =0.625em font-size 1em = 10px */ }
h1 {font-size: 4em;position: relative;padding: 2em 5px;color: #fff;font-weight: bold;} /* =40px */
p  { font-size: 1.8em; } /* =14px */
li { font-size: 1.8em; } /* =14px */
dt { font-size: 1.8em; } /* =14px */
dd { font-size: 1.8em; } /* =14px */
th { font-size: 1.8em; } /* =14px */
td { font-size: 1.8em; } /* =14px */
li li, li p, dt dt, dd dd /* etc */ { font-size: 1em; }
ul ul li { font-size: 1.8em; }
dl dl dt { font-size: 1.8em; }


.bold {
	font-weight: bold;
}
.normal {
	font-weight: normal;
}

.red-txt {
    color: #c61311;
}
p.red-txt::before {
	content: "\203B";
}
li.red-txt {
    list-style: none !important;
    margin-left: -0.25em !important;
}
li.red-txt::before {
	content: "\203B";
}
.blue-txt {
    color: #005379;
}
.purple-txt{
	color: #6317A9;
}
.t-al_r {
	text-align: right;
}
.t-al_l {
	text-align: left;
}

@media (max-width: 600px) {
h1 { font-size: 3em; padding: 1.5em 5px}
body { font-size: calc(100% / 1.8);}
}

/* table 
*****************************************/
table th, td {
	border-color: #000;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    text-align: left;
}


/* Link 
*****************************************/
a {
	margin: 0 0 0 1px;
	text-decoration: underline;
}
a.external {
	background: url(/elements/images/icon-external.gif) no-repeat right center;
	padding: 0 20px 0 0;
}
a#PageTop {
	margin: 0 !important;
}

input:focus, textarea:focus, select:focus {
	background-color: #ffffcc; /* 背景色 */
	border: 1px solid red;     /* 枠線 */
}

/* img 
*****************************************/
img{max-width:100%;}
.img {
	border: 1px solid #e2dab7;
	max-width:95%;
	margin: 5px;
        width:fit-content;
}

/* margin  padding
*****************************************/
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }
.mr100 { margin-right: 100px !important; }

.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }

.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }

.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pr70 { padding-right: 70px !important; }
.pr80 { padding-right: 80px !important; }
.pr90 { padding-right: 90px !important; }
.pr100 { padding-right: 100px !important; }

.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.pl70 { padding-left: 70px !important; }
.pl80 { padding-left: 80px !important; }
.pl90 { padding-left: 90px !important; }
.pl100 { padding-left: 100px !important; }


/* clearfix 
*****************************************/
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* Web accessibility */
/* Area comment - Invisibility - 
*****************************************/
.accessKeyDest {
	border: medium none;
	display: block;
	font-size: 0%;
	height: 0;
	line-height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 0;
}

/* skipNav 
*****************************************/
#SkipNav {
    margin: 0;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;
}
#SkipNav ul {
    background: none repeat scroll 0 0;
    height: 1px;
    margin: -1px auto 0 !important;
    /*min-width: 980px;*/
    overflow: hidden;
    padding: 0;
    text-align: center;
}
#SkipNav ul li {
	display: inline;
    padding: 0 10px;
}
#SkipNav a{
	color: #666666;
    cursor: default;
    font-size: 1%;
    line-height: 0;
    padding: 0;
    width: 100%;	
}

noscript {
    display: none !important;
}

.hiden {
	display: none;
}

.off-left {
	position: absolute; 
	left:-9999em;
}

/* common - site all - 
*****************************************/
#wrapper {
    display: block;
    margin: 5px 0 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

#container {
	margin: 0 auto;
	max-width: 1280px;
	padding: 115px 10px 0;
}

/*　header　
*****************************************/
header {
    top:0;
    left: 50%;
    margin-left:-50%;
    width: 100vw;
    position: fixed;
    background: #fff;
    z-index: 50;
    border-bottom: 3px solid #09225a;
}
.header-logo {
    position: absolute;
    height: 41.5px;
    top: 16%;
    bottom: 50%;
    margin: auto;
    width: 650px;
}
.header-logo a {
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 0;
    position: relative;
}

#header {
	margin: 0;
	display: flex;
	align-items: center;
	padding: 5px 10px 5px 40px;
}
.headerimage {
    clear: both;
    float: right;
    margin: 0 auto;
    padding: 1px 0 0;
    width: 700px;
}
h1::before {
    content: "";
    position: absolute;
    top:0;
    left: 50%;
    transform:translateX(-50%);
    width: 100vw;
    height:100%;
    background: #09225A;
    z-index: -10;
}
@media (min-width: 1201px) {
    header{height:122px;}
}
/* utility area 
*****************************************/
#utility {
	margin: 20px 0 0 auto;
	display: flex;
	justify-content: flex-end;
}
#utility a {
	color: #fff;
	text-decoration: none;
	padding: 5px 20px;
	display:inline-block;
}

/* language choice 
*****************************************/
#utility .language ul {
	font-size: 85%;
	margin: 0;
}
#utility .language ul li {
    display: inline-block;
    margin: 0 15px;
    background: #09225a;
    border-radius: 20px;
    font-size: 1.5em;
}
#utility .language ul li a:hover {
	cursor: pointer;
	text-decoration: none;
}
#utility .language ul li:hover {
    background: #9a6d04;
}
@media (max-width: 1200px) {
#utility .language ul li{margin:0;}
#utility a {padding:3px 15px;}
}
/* font-size choice 
*****************************************/
.fontS { font-size: 58% }
.fontM { font-size: 62.5% }/*このサイトの標準*/
.fontL { font-size: 73% }

 
/* mod_headerbox_size 
*****************************************/
.mod_headerbox_size {
	overflow: hidden;
	width: 155px;
}
.mod_headerbox_size p {
	display: block;
    float: left;
    font-size: 0.7rem;
    height: 26px;
	line-height: 26px;
    padding: 0 2px 0 0;
}
.mod_headerbox_size ul {
	margin: 0;
}
.mod_headerbox_size ul li {
	float: left;
	font-size: 1.2em;
	height: 26px;
	line-height: 26px;
	margin: 0;
	overflow: hidden;
	text-align: center;
	background: #09225a;
	color: white;
}
.mod_headerbox_size ul li#fontS span a {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	display: block;
	height: 24px;
	margin: 0;
	width: 30px;
}
.mod_headerbox_size ul li#fontM span a {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 0;
	display: block;
	height: 24px;
	margin: 0;
	width: 30px;
}
.mod_headerbox_size ul li#fontL span a {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	display: block;
	height: 24px;
	margin: 0;
	width: 30px;
}
.mod_headerbox_size ul li span {
	cursor: pointer;
	display: block;
}
.mod_headerbox_size ul li#fontS span a:hover {
	background: #9a6d04;
	width: 30px;
}
.mod_headerbox_size ul li#fontM span a:hover {
	background: #9a6d04;
	width: 30px;
}
.mod_headerbox_size ul li#fontL span a:hover {
	background: #9a6d04;
	width: 30px;
}

/* content area
*****************************************/
#content {
    float: right;
    padding: 0;
    width: 100%;
}
#content {
	margin: 0;
}

#content h2, h3, h4, h5, h6 {
	font-weight: bold;
}
#content h2 {
	font-size: 2rem;
}
#content h3 {
	font-size: 2em;
}
#content h4 {
	font-size: 1.0rem;
}
#content h5 {
	font-size: 1.8em;
}
#content h6 {
	font-size: 0.9rem;
}

/* section 項(区切り)
*****************************************/
.section {
	clear: both;
}


/* article 記事内容 
*****************************************/
.article {
	margin: 0 0 20px !important;
}
.article h4, h5, h6 {
	margin: 0 0 10px !important;
}


/* h2 
*****************************************/
#content h2 {
	display: block;
	margin: 50px 0 25px;
	border-bottom: 4px solid #9A6D04;
	margin-bottom: 2rem;
	padding: 10px;
}
h2 span.icon {
	background: #66cbff;
	display: block;
	float: left;
	height: 66px;
	margin: 0 1em 0 0;
	width: 66px;
}
h2 span.ttl {
	font-weight: bold;
}
h2 span.ttl img {
	margin: 16.5px 0 0 0;
}


/* トピックス関連(イベント、お知らせ、その他)の見出し
*****************************************/
#content h3, h4, h5, h6 {
	font-weight: bold;
}

#content p, ul, ol, dl, table {
	margin: 0 0 40px;
}


/* 見出し3 
*****************************************/
#content h3, #content h3.head3 {
	margin: 40px 0 20px;
	padding: 10px;
	background-color: #f0ecdd;
}

/* 見出し4 
*****************************************/
#content h4 {
	border-left: 7px solid #9a6d04;
	font-size: 2em !important;
	margin: 30px 0 15px;
	padding: 5px 15px;
}

/* 見出し5 
*****************************************/
#content h5 {
	border: none;
	border-radius: 0;
	display: flex;
	align-items: center;
}
#content h5::before{
	content:"";
	height:3px;
	width: 15px;
	background-color: #9a6d04;
	display: block;
        margin-right: 10px;
}

/* 見出し6 
*****************************************/
#content h6 {
	background: url(/elements/images/icon-point.png) no-repeat left 6px;
	border: none;
	border-radius: 0;
	margin: 20px 0 10px;
    padding: 0 0 0 15px;
}


/* 見出しSP表示 
*****************************************/
@media (max-width: 600px) {
#content h2 { margin: 35px 0 20px;font-size:1.5rem;}
#content h3, #content h3.head3 {margin: 30px 0 20px;}
}

/* ボタン 
*****************************************/
.btn {
	display: block;
	text-align: center;
}

.btn a {
    background: #09225a;
    padding: 10px 70px 10px 50px;
    color: white;
    text-decoration: none;
    margin: 40px 0;
    display: block;
    width: fit-content;
    border-radius: 5px;
    position: relative;
    min-width: 180px;
    font-weight: bold;
    text-align: center;
}
.btn a::after {
    a.btn-link: :after;
    content: "";
    background: url(/elements/images/cta-btn.png);
    top: 0;
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 25px;
    transition: .3s;
}
#content .flex-container.anchor-link p.btn{
   margin:0;
}
.flex-container.anchor-link .btn a{
    padding: 5px 40px 5px 20px;
    margin: 5px 5px;
    min-width: 150px;
    font-size:90%;
}
.flex-container.anchor-link .btn a::after {
    transform:rotate(90deg);
    right:10px;
    width:18px;
    height:18px;
    background-size:contain;
}
.flex-container.anchor-link .btn a:hover::after {
    bottom:-10px;
}
.flex-container.anchor-link{
    flex-wrap:wrap;
    flex-direction:row!important;
}
a.btn-link {
    background: #9a6d04;
    padding: 10px 70px 10px 50px;
    font-size: 1.8em;
    color: white;
    text-decoration: none;
    margin: 40px auto;
    display: block;
    width: fit-content;
    border-radius: 30px;
    position: relative;
    min-width: 180px;
    font-weight: bold;
    text-align: center;
}

a.btn-link::after {
    content: "";
    background: url(/elements/images/link-btn.png);
    top: 0;
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 25px;
    transition: .3s;
}
a.btn-link:hover::after {
    right: 15px;
}
.btn a:hover::after {
    right: 15px;
}
.flex-container .btn-link{margin:15px auto;}
@media (max-width: 600px) {
#content .flex-container.anchor-link p.btn{width:50%;}
.flex-container.anchor-link .btn a{min-width:-webkit-fill-available;min-width:-moz-available;min-width:fill-available;font-size:80%;padding:10px 35px 10px 10px;}
}
/* リスト
*****************************************/
ul.list-circle li {
    list-style: disc;
    margin-left: 1em;
}
/* breadCrumb 
*****************************************/
.breadCrumb {
	font-size: 90%;
	margin: 0 0 20px !important;
	padding: 10px 0;
	position: relative;
}
.breadCrumb ul {
    margin: 0 auto !important;
    padding: 0;
}
.breadCrumb ul li {
	display: inline;
}
.breadCrumb a {
	margin: 0 5px 0 1px;
	padding: 0 5px;
	text-decoration: underline;	
}
.breadCrumb li.last {
	margin: 0;
	padding: 0 0 0 5px;
}
.breadCrumb::before {
    content: "";
    position: absolute;
    top:0;
    left: 50%;
    transform:translateX(-50%);
    width: 100vw;
    height:100%;
    background: #F0ECDD;
    z-index: -10;
}

/* start 関係者向け注意書き 20250924追加(＞確認完了後本記載不要) */
.breadCrumb li.notice {
	padding: 0 0 0 50px!important;
	font-size:1em!important;
	color: red!important;
}
/* end 関係者向け注意書き 20250924追加(＞確認完了後本記載不要) */

/* sidebar 
*****************************************/
#sidebar {
	/*border-color: #eee;
    border-style: solid;
    border-width: 0 1px;*/
	margin: 0 18px 0 0;
	padding: 0;
}

/* global navi 
*****************************************/
    /* Global Nav Shell */
    .site-header { position: sticky; top: 0;z-index: 1000;}
    .site-header .container {width: fit-content; margin: 0 0 0 auto; padding: 10px 5px; }
    .nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

    .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .3px; }
    .brand-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #22d3ee); box-shadow: 0 4px 24px rgba(34,211,238,.35); }

    /* Hamburger button */
    .hamburger { appearance: none; border: 1px solid var(--border); background: var(--bg-elev); color: var(--txt); border-radius: 12px; padding: 10px 12px 10px 5px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
    .hamburger .bars { width: 40px; height: 23px; position: relative; display: inline-block; }
    .hamburger .bars::before, .hamburger .bars::after, .hamburger .bar { content: ""; position: absolute; left: 0; height: 3px; width: 100%; background: #09225A; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
    .hamburger .bar { top: 10px; }
    .hamburger .bars::before { top: 0; }
    .hamburger .bars::after { bottom: 0; }
    .hamburger[aria-expanded="true"] .bars::before { transform: translateY(10px) rotate(45deg); }
    .hamburger[aria-expanded="true"] .bar { opacity: 0; }
    .hamburger[aria-expanded="true"] .bars::after { transform: translateY(-10px) rotate(-45deg); }

    /* Desktop menu */
    .g-nav { display: none; }
    .g-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px;     position: relative;height:44px;}
    .g-nav .toplink-btn[aria-expanded="true"], .g-nav .toplink-btn:hover {text-decoration: underline; text-decoration-color: #9A6D04;text-underline-offset: 5px; text-decoration-thickness: 2px;}

    .toplink-btn { appearance: none; border: none; background: transparent; color: var(--txt); cursor: pointer; padding: 10px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9em;	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "meiryo",sans-serif;}
    /*.toplink-btn:focus-visible, .hamburger:focus-visible, .submenu-toggle:focus-visible, .menu-close:focus-visible, .dropdown a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }*/
    .toplink-btn:hover { background: rgba(255,255,255,.04); }
    .toplink-btn .caret { border: solid currentColor; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg); margin-left: 2px; }
    /* Desktop menu EN*/
    .g-nav.EN > ul { min-width:870px;justify-content:flex-end;}

    /* Dropdown (desktop) */
    .dropdown {position: absolute;top: calc(100% + 8px);display: flex;right: -7px;font-weight: bold;left: 0;}
    .dropdown[hidden] { display: none !important; }
    .dropdown ul {background: #F0ECDD;width: 100%;margin: 0;padding: 20px;display: flex;flex-direction: column;flex-wrap: wrap;max-height: 180px;}
    .dropdown ul.bottom{display:grid;    grid-template-columns:1fr 1fr;}
    .dropdown li {font-size: 1em;height: fit-content;max-height: 84px; max-width: 50%;}
    .dropdown ul.bottom li:nth-child(2){grid-column-start: 1;grid-column-end:2;}
    .dropdown ul.bottom li{max-width:100%;}
    .dropdown-header {padding: 20px;background-color: #9A6D04;width: 40%;max-width: 280px;color: #fff;display: flex; align-items: center;}
    .dropdown-header a { color:#fff}
    .dropdown .dropdown-header a:hover {  border-bottom: 2px solid #fff;}
    .dropdown a {padding: 0px;color: var(--txt);text-decoration: none;display: flex;align-items: center;margin: 15px 10px;min-height: 30px;border-bottom: 2px solid transparent;transition: .2s;}
    .dropdown a::before{ content:""; border: solid rgb(154 109 4); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); margin: 0 10px 0 0;  }
    .dropdown a:hover {border-bottom: 2px solid #9a6d04;}

    /* Mobile panel */
    .panel { position: fixed; inset: 0; display: none; }
    .panel[aria-hidden="false"] { display: block; }
    .scrim { position: absolute; inset: 0; background: rgba(2,6,23,.6); backdrop-filter: blur(2px); }
    .drawer { position: absolute; inset: 0 0 0 auto; width: min(88vw, 380px); max-width: 420px; background:#f0ecdd; border-left: 1px solid var(--border); display: flex; flex-direction: column; }
    .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border);visibility: hidden; }
    .menu-close { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--txt); border-radius: 10px; padding: 8px 10px; cursor: pointer; }

    .m-nav { overflow: auto; padding: 12px 8px 28px; }
    .m-nav ul { list-style: none; margin: 0; padding: 0; }
    .m-nav > ul > li { border-bottom: 1px solid var(--border); }
    .m-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; position:relative;margin:10px 0;}
    .m-row:hover .toplink {     text-decoration: underline; text-decoration-color: #9A6D04;text-underline-offset: 5px; text-decoration-thickness: 2px;}
    .m-row a.toplink { display: block; text-decoration: none; color: var(--txt); padding: 14px 10px; font-weight: 600; }

    .submenu-toggle { appearance: none; border: none; background: transparent; color: #956c25; width: 100%; height: 100%; font-weight:bold; cursor: pointer; position:absolute;right:0;}
    .submenu-toggle::before { content: "";     border: solid currentColor;  border-width: 0 2px 2px 0;  display: inline-block;  padding: 3px;  transform: rotate(45deg);  margin-left: 2px;position:absolute;bottom:10px;right:10px; width:4px; height:4px;}
    .submenu-toggle[aria-expanded="true"]::before { transform: rotate(225deg);bottom:3px;}

    .sublist { padding: 4px 10px 12px 16px; background: #fff;}
    .sublist[hidden] { display: none !important; }
    .sublist li {font-size: 1em;}
    .sublist a {display: block;padding: 10px 8px;color: var(--txt);text-decoration: none;}
    .sublist a:hover { text-decoration: underline; text-decoration-color: #9A6D04;text-underline-offset: 5px; text-decoration-thickness: 2px;}


    /* Responsive */
@media (min-width: 1201px) {
  .hamburger { display: none; }
  .g-nav { display: block; }
  .panel { display: none !important; }
  body.no-scroll { overflow: auto; } /* never lock on desktop */
}

/* モバイル時はメニュー展開中に背景スクロールを固定 */
@media (max-width: 1200px) {
  body.no-scroll {overflow: hidden;  width: 100%;  }
  header { display: flex;  justify-content:space-between;}
  #header {    width: calc(100% - 87px);padding:5px 10px;}
  .header-logo {  top: 50%;  max-width: 260px;}
  #utility{margin:0 0 0 auto;}
  #header .sp-hide{display:none!important;}
  #mobile-panel li.pc-hide { text-align: right; margin-top: 25px;display: block !important;}
  #mobile-panel li.pc-hide a {background: #09225a; padding: 2px 25px; color: #fff; border-radius: 20px; margin-right: 10px; text-decoration: none; margin-top: 25px;}
  #header .pc-hide{display:block!important;}
  #header .sp-hide{display:none!important;}

}
@media (max-width: 600px) {
#header {padding: 5px 0 5px 15px;width: 100%;}
.header-logo {  width: 260px;  max-width: calc(100% - 150px);}
}
/* Back to top button 
*****************************************/
#back-top {
    bottom: 8%;
    position: fixed;
    right: 3%;
	opacity: 0.9;
    z-index:100;
}
#back-top a {
	margin: 0;
}
#back-top span {
    width: 63px;
    height: 60px;
    display: block;
}
@media (max-width: 600px) {
#back-top span { width: 41px;  height: 40px;}
#back-top span img{ width: 41px;  height: 40px;}
}
/* footer 
*****************************************/
#footer-area {
	width: 100%;
	z-index: 10;
	position: relative;
}
#footer-area a {
	text-decoration: none;
	color: #fff;
}
.footer {
	margin: 0 auto;
}
.footermenu {
	display: flex;
	color: #fff;
	font-size: 80%;
	text-align:left;
}
.footermenu ul {
	margin: 0;
	padding: 0 2rem 0 0;
}
.footermenu ul li {
	margin:8px 0;
}
.footermenu li.external {
	background: url(/elements/images/icon-external.png) no-repeat right center;
}
.footermenu .EN li.external {
        min-width:285px;
}
.footermenu li a {
	margin: 0 0 0 5px;
}
.footermenu li a:hover {
	border-bottom: 1px solid;
}
.footermenu ul li {
	margin:8px 0;
}
.footer .left-menu {
    background: #09225a;
    width: calc(50% - 100px);
    padding: 50px;
}

.footer .right-menu {
    background: #333;
    width: calc(50% + 100px);
    padding: 50px;
}
.footermenu .left-menu > div {
    width: fit-content;
    margin: 50px 0 50px auto;
}

.footermenu .right-menu > div {
    margin: 50px auto 50px 0;
    width: fit-content;
    display: flex;
}
.footer-icon {
    width: 100%;
}
.footer-icon img{
    max-width: 300px;
}
.footermenu .sns-block a {
    margin: 0px 7px;
    max-width: 40px;
    display: inline-block;
}

.footermenu .left-menu div div {
    margin: 10px 0;
}
.footermenu .left-menu .sns-block {
    display: flex;
    align-items: center;
   margin:20px 0 10px;
}
.copyright {
	font-size: 120%;
    height: 30px;
    letter-spacing: 0.8px;
    line-height: 30px;
    text-align: right;
    margin: 2px 0 0;
    background:#fff;
}
@media (max-width: 991px) {
ul.footer-menu{display:none;}
.footer .right-menu,.footer .left-menu{width:50%;padding: 30px;}
.footermenu .right-menu > div{flex-direction: column;}
.footermenu ul { margin: 10px 0;}
}
@media (max-width: 600px) {
.footermenu{flex-direction: column;}
.footer .right-menu,.footer .left-menu{width:auto;padding: 30px;}
.footermenu .left-menu > div,.footermenu .right-menu > div{margin:5px;}
}
/* topページ 
*****************************************/
main.content.top-page::before {
    content: "";
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background: url(/elements/images/top_bg.jpg) center center no-repeat fixed ;
    background-size: cover;
    z-index:-1;
    transform:translate(0);
    will-change:transform;
}

.top-page section::before {
    content: "";
    position: absolute;
    top:0;
    left: 50%;
    transform:translateX(-50%);
    width: 100vw;
    height:100%;
    background: #ffffff;
    z-index: -1;
}
.top-page section.experience::before {
    content: none;
}

section.experience {
    margin: 80px 10px;
}
.top-page h2 {
    text-align: center;
    font-size: 4.2em;
    font-weight: bold;
    color: #09225a;
    line-height:1.4;
}

.top-page h2 span.EN {
    font-size: 60%;
    display: block;
  font-family: "Monda", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:20px;
}

.top-page section{
    padding: 70px 0;
    position: relative;
    z-index: 10;
}

.top-page section.main-visual {
    left: 50%;
    transform:translateX(-50%);
    width: 100vw;
    height:100%;
    padding: 0;
    background-color: #333;
    padding-bottom:15px;
}

.top-page .movie {
    max-width: 100%;
    margin: 0;
   position:relative;
    padding-bottom:25px;
}

.top-page video {
    width: 100%;
}
.top-page .controls {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content:center;
}
.controls {
    text-align: center;
}
.top-page .controls button.play.active{
    background:#9a6d04;
}
.top-page .controls button.play{
    background:#7d7d7d;
}
.top-page .controls button.pause{
    background:#7d7d7d;
}
.top-page .controls button.pause.active{
    background:#000;
}
.top-page .controls button {
    border: 1px solid #7d7d7d;
    width: 25px;
    cursor: pointer;
    transition: background 0.3s;
    height: 25px;
    display:flex;
    align-items: center;
    position: relative;
}
.controls a {
    color: #fff;
    background: #956c25;
    display: flex;
    align-items: center;
    font-size: 1.5em;
    text-decoration: none;
    padding: 0 10px;
    transition: background 0.3s;
    border: 1px solid #7d7d7d;
}
button#playBtn::after, button#pauseBtn::after {
    content:" ";
    width:15px;
    height:15px;
    top:0;
    bottom:0;
    margin:auto;
    right:0;
    left:0;
    background: url(/elements/images/start.png) no-repeat center;
    background-size: contain;
    position:absolute;
}
button#pauseBtn::after {
    background: url(/elements/images/pause.png) no-repeat center;
    background-size: contain;
}
.top-page .controls button:hover, .top-page .controls a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.top-page .alert-info {
    background: #fff;
    padding: 15px 20px;
    width: auto;
    margin: 15px auto 0 auto;
    max-width: 1280px;
}
.top-page .alert-info:not(:has(>*)) {
    padding:0;
    margin:0;
}

.top-page .alert-info  p.important {
    background: #C61311;
    width: 100%;
    max-width: 230px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
}
.alert-info dl div {
    display: flex;
    margin-bottom: 10px;
}

.alert-info dl dt {
    font-weight: bold;
    margin-right: 2em;
}
.top-page section.main-visual::before {
    content: none;
}

.top-page .add-info {
    width: fit-content;
    margin: auto;
}
.top-page .add-info p {
    display: flex;
    align-items: center;
    margin: 10px 30px;
    line-height: 1.4;
    width: fit-content;
}
.add-info p:before {
    content: "";
    width: 38px;
    height: 38px;
    display: block;
    background-size: contain;
    margin-right: 25px;
    background-repeat: no-repeat;
}

.top-page .quick-access::before {
    content: "";
    position: absolute;
    top:0;
    left: 50%;
    transform:translateX(-50%);
    width: 100vw;
    height:100%;
    background: #F0ECDD;
    z-index: 0;
}

.top-page .quick-access {
    position: relative;
    z-index: 10;
}

.top-page .quick-access div {
    position: relative;
}

.top-page .quick-access h2 {
    font-size:3.3em;
}
.top-page .quick-access .flex-container {
    justify-content:space-between;
}
.top-page .quick-access .usage-info.flex-container>div {
    padding: 10px 20px;
    width:50%;
    background: #fff;
}
.top-page .quick-access .usage-info a{
    display:inline-block;
    width:-webkit-fill-available;
    width:-moz-available;
    width:fill-available;
    text-align:center;
    border-radius:5px;
    color:#fff;
    padding:10px;
    font-size:2.3em;
    font-weight:bold;
    text-decoration:none;
    margin:10px 0;
    background:#c04f15;
    position:relative;
    line-height: 1.2;
}

.top-page .quick-access .usage-info div:nth-child(2) a{
        background: #084F6A;
    font-size: 2.3em;
    line-height: 1.2;
}
.top-page .quick-access .usage-info div:nth-child(2) div:nth-child(2) a{
    background:#009185;
}

.top-page .visitor-info a::after, .top-page .quick-access .usage-info a::after {
    content: "";
    background: url(/elements/images/link-btn.png);
    top: 0;
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 25px;
    transition: .3s;
}
.top-page .visitor-info span.info{
    text-align: right;
    display:block;
    margin-right:10px;
}
.top-page .quick-access .title-free,.top-page .quick-access .title-guide{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}
.top-page .quick-access .title-free{
    color:#c04f15;
}
.top-page .quick-access .title-guide{
    color:#084F6A;
}
/*公開日：表*/

.top-page .quick-access .open-days p {
    background: #c04f15;
    color: #fff;
    writing-mode: vertical-lr;
    text-align: center;
    letter-spacing: 4px;
}
.top-page .quick-access span.small {
    display: block;
    font-size: 60%;
    font-weight: normal;
}

.top-page .quick-access p.info {
    font-size: 1.6em;
    text-align:right;
}
.top-page .quick-access .usage-info {
    max-width: 60%;
    min-width:740px
}
.top-page .quick-access .open-days dl div {
    border: 1px solid #c04f15;
}
.top-page .quick-access .open-days {
    display: flex;
    margin: auto;
    width: fit-content;
}
.top-page .quick-access .open-days dl{
    margin:0;
}
.top-page .quick-access  .open-days dl div {
    display: flex;
}
.top-page .quick-access .open-days dl dt {
    color: #c04f15;
    line-height: 1.2;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    min-width: 64px;
}
.top-page .quick-access .open-days dl dd{
    padding: 0px 5px;
}
.top-page .quick-access .open-days dl dd{
    min-width: 40px;
    text-align: right;
}
.top-page .quick-access .open-days span.date {
    display: flex;
    max-width: 230px;
    flex-wrap: wrap;
}
.top-page .quick-access .open-days span.month {
    display: block;
    font-size: 130%;
}

.top-page .quick-access .exhibition-area a {
    width:calc(100%/2 - 30px);
    max-width: 200px;
    min-width:130px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    position:relative;
    z-index:10;
    margin:30px 10px 0;
    aspect-ratio:1 / 1;
    border-radius:15px;
    transition: .2s;
}
.top-page .quick-access .exhibition-area a::before {
    content:"";
    margin:auto;
    height:90%;
    width:95%;
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
.top-page .quick-access .exhibition-area a.tech {
    background-color:#192959;
}
.top-page .quick-access .exhibition-area a.history {
    background-color:#956c25;
}

.top-page .quick-access .exhibition-area a.tech::before {
    background:url(/elements/images/top_tech_icon.png) no-repeat center / contain;
}
.top-page .quick-access .exhibition-area a.history::before {
    background:url(/elements/images/top_history_icon.png) no-repeat center / contain;
}
.top-page .quick-access .exhibition-area a:hover{
    opacity:.8;
}
.top-page .quick-access .exhibition-area {
        text-align: center;
        width: 35%;
}
.top-page .quick-access .exhibition-area a span {
    font-size: 40px;
    display: block;
    line-height: 40px;
}.top-page .visitor-info{
    text-align:center;
}
.top-page .visitor-info a:hover::after,.top-page .quick-access .usage-info a:hover::after {
    right: 15px;
}
/*公開日：EN*/
.top-page .quick-access.EN .usage-info {
    max-width: 100%;
    background: none;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.top-page .quick-access.EN .open-days p {
    writing-mode: horizontal-tb;
    font-weight: bold;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.top-page .quick-access.EN .usage-info.flex-container>div {
    font-weight: bold;
    width: 50%;
    background:none;
}

.top-page .quick-access.EN .open-days dl {
    background: #fff;
}

.top-page .quick-access.EN .open-days {
    margin: 0 0 0 auto;
}
.top-page section.visitor-info::before {
    background: #F0ECDD;
}
.top-page .visitor-info ul{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    margin:40px auto;
}
.top-page .quick-access.EN p.info {
    text-align:right;
    font-weight: normal;
}
.top-page .visitor-info a{
    display:inline-block;
    width:-webkit-fill-available;
    width:-moz-available;
    width:fill-available;
    text-align:center;
    border-radius:5px;
    color:#fff;
    padding:10px;
    font-size:1.5em;
    font-weight:bold;
    text-decoration:none;
    margin:10px;
    background:#c04f15;
    height:2em;
    position:relative;
    line-height: 1.2;
}
.top-page .visitor-info a span.info {
    font-size: 1.6em;
}
.top-page .visitor-info a span.small {
    display: block;
    font-size: 60%;
    font-weight: normal;
}
.top-page .visitor-info li:nth-child(1){
    font-size: 2.5em;
    font-weight: bold;
    color: #c04f15;
}

.top-page .visitor-info li:nth-child(2){
    grid-column-end:4;
    grid-column-start: 2;
    font-size: 2.5em;
    font-weight: bold;
    color: #084f6a;
}

.top-page .visitor-info li:nth-child(4) a{
    background:#084F6A;
    line-height:1.2;
}
.top-page .visitor-info li:nth-child(5) a{
    background:#009185;
    line-height:1.2;
}
/* topページ 挨拶
*****************************************/
section.greeting .message{
    display: flex;
    margin: 20px;
    align-items: flex-end;
}
section.greeting .message div{
    display: flex;
    flex-direction:column;
    align-items: flex-end;
}
section.greeting .message div p.name{
    margin-top:30px;
    text-align:right;
}
section.greeting .message img{
    margin:30px;
    max-width:260px;
    height:auto;
    margin:10px 20px;

}	

/* topページ 体験コーナー
*****************************************/
.top-page .experience h2 {
    color: #fff;
    text-shadow: 0px 0px 5px #000;
}
.top-page .experience ul li {
    width: calc(20% - 30px);
    margin:5px;
    aspect-ratio: 1 / 1;
    background: #fff;
    padding: 10px;
}
.top-page .experience ul {
    display: flex;
    flex-wrap: wrap;
}
.top-page .experience figure {
    margin: 0
    ;
}
.top-page .experience ul li img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.top-page .about figure {
    max-width: 50%;
    margin: 0 30px;
}
.top-page section.about .SP-img{
    display:none;
}
.top-page .experience a.btn-link{
    box-shadow: 0px 0px 5px #000;
}
/* topページ topics
*****************************************/
.top-page section.topics {
    position: relative;
}

.top-page .topics .news-list {
    background: #fff;
    position: relative;
    border-radius: 10px;
    padding: 1rem 2rem 1rem;
    width:auto;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0px 0px 16px #eee;
}

.top-page .topics .news-list .category {
    margin: 0 1rem;
    padding: 0 2rem;
}

.top-page .topics .news-list dd, .top-page .topics .news-list dt {
    border-bottom: 1px dotted #999;
    padding: 1rem 0;
}
.top-page .topics .news-list dd {
    width: calc(100% - 160px);
}

.top-page .topics .news-list dt {
    text-align: center;
    width: 160px;
}
.top-page .topics .news-list dt[data-top-news="hide"], .top-page .topics .news-list dt[data-top-news="hide"]+dd {
    display: none;
}
/* topページ アイコンメニュー
*****************************************/
.top-page section.icon-menu-block{
    padding:0;
}
.top-page .icon-menu-block ul {
    display: flex;
    position:relative;
    margin:0;
}

.top-page .icon-menu-block a {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    padding: 15px 0;
    transition:.2s;
}
.top-page .icon-menu-block a:hover {
    background:#333;
}
.top-page section.icon-menu-block::before{
    background: #09225a;
}
.top-page .icon-menu-block li {
    width: 25%;
    border-right: 1px solid #fff;
}
.top-page .icon-menu-block li:nth-child(1){
    border-left: 1px solid #fff;

}
.top-page .icon-menu-block img {
    max-height: 70px;
    width: auto;
    margin: 10px;
    height:100%;
}
/* topページ 関連コンテンツ
*****************************************/
.top-page .related{
    padding: 120px 0 50px;
}
section.related.last {
    padding: 0 0 80px;
}
.top-page .related ul.related-banner {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 50px 0;
    flex-wrap:wrap;
}

.top-page .related ul.related-banner li {
    width: calc(100% / 3 - 20px);
    margin:10px;
}
.top-page .related ul.related-banner a, ul.related-banner img {
    width: 100%;
    display:block;
}

/* topページ レスポンス
*****************************************/
@media (max-width: 991px) {
  .top-page .movie { width: 100%;}
  .alert-info dl div { flex-direction: column;}
  .top-page .quick-access .exhibition-area {   width:100%; margin-top:5em;}
  .top-page .flex-container{flex-direction: column;}
  .top-page .quick-access .usage-info{max-width:100%;flex-direction: row;min-width: auto;}
  .top-page .usage-info .SP-hidden{display: none;}
  .top-page .add-info p { flex-direction: column;margin: 10px;}
  .add-info p:before {    margin: 10px;}
  .top-page .add-info { display: flex;margin: auto;width: fit-content;}
.top-page .greeting .message {align-items: center;}
.top-page .greeting .message span.img-block{display:flex;margin:20px 0;align-items: center;flex-direction: column;min-width:250px;}
.top-page .greeting .message span p{order:2;margin:20px 10px;font-size:1.5em;}
.top-page .greeting .message img{height:100%;margin:20px auto;order:1;}
  .top-page .experience ul li {    width: calc(33% - 30px);}
  .top-page .visitor-info ul{grid-template-columns:1fr 1fr 1fr 1fr;}
  .top-page .visitor-info li:nth-child(1){order:1;grid-column-start: 1;grid-column-end:5;}
  .top-page .visitor-info li:nth-child(2){order:3;margin-top:30px;grid-column-start: 1;grid-column-end:5;}
  .top-page .visitor-info li:nth-child(3){order:2;grid-column-start: 2;grid-column-end:4;}
  .top-page .visitor-info li:nth-child(4){order:4;grid-column-start: 1;grid-column-end:3;}
  .top-page .visitor-info li:nth-child(5){order:5;grid-column-start: 3;grid-column-end:5;}
  .top-page section.about .PC-img{display:none;}
  .top-page section.about .SP-img{display:block;}
.top-page .about figure {max-width:500px;width:100%;margin:20px auto;}
.top-page .topics .news-list { max-width: 100%;margin: 30px 0;}
.top-page .related ul.related-banner li { width: calc(100% / 2 - 20px);}
.top-page .quick-access.EN .usage-info { flex-direction: column;}
.top-page .quick-access.EN .usage-info.flex-container>div { border: navajowhite; width: auto; margin: auto;}
}
@media (max-width: 600px) {
.top-page h2 { font-size: 3.2em;}
.top-page .quick-access .usage-info{flex-direction: column;}
.top-page .quick-access .usage-info.flex-container>div{width:auto;}
.top-page .quick-access .usage-info.flex-container>div:nth-child(1) { border-right:none;}
.top-page .visitor-info li{width:100%;}
.top-page .visitor-info ul { display: flex; flex-direction: column;}
.top-page .greeting h2 { font-size:2.5em;}
.top-page .greeting .message { flex-direction: column;}
.top-page .greeting .message span.img-block{flex-direction:row;align-items: flex-end;}
.top-page .greeting .message span p{order:1;text-align:right;}
.top-page .greeting .message img{order:2;}
.top-page .experience ul li { width: calc(50% - 30px);  margin: 5px;}
.top-page .experience figcaption { font-size: 85%;}
.top-page section.icon-menu-block::before{background:#fff;}
.top-page .icon-menu-block li { width: calc(33% - 11px); margin: 2px; border-radius: 10px;background: #09225a;padding:0 3px;}
.top-page .icon-menu-block ul {flex-wrap: wrap; margin: 0;}
.top-page .icon-menu-block a {padding:8px 0;lineheight:1.2;}
.top-page .icon-menu-block img { max-height: 55px;width: auto;}
.top-page .topics .news-list { padding: 2rem 1rem 1rem;flex-direction: column;}
.top-page .topics .news-list dd { width: 100%;padding-top: 0;}
.top-page .topics .news-list dt{ display: flex; width: auto; border:none;}
.top-page .topics .news-list dt .event, .top-page .topics .news-list dt .news, .top-page .topics .news-list dt .other,.top-page .topics .news-list dt  .media {margin:0 10px;}
.top-page .related ul.related-banner { flex-direction:column;}
.top-page .related ul.related-banner li {  width: 100%; margin:10px 0;}
.top-page .quick-access.EN .open-days { flex-direction: column;}
.top-page .quick-access.EN .open-days p { padding: 10px; justify-content: space-around;}
}

 /* 共通部分 
*****************************************/

.flex-container {
    display: flex;
}
.flex-container:has(.link-btn) {
    flex-wrap:wrap;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.flex-container>* {
    max-width: calc(50% - 12px);
    margin: 5px;
}
.pc-hide{
    display:none!important;
}
span.fadeIn_up {
    display:block;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50px);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
 /* レスポンシブデザイン 
*****************************************/
@media (max-width: 1200px) {
#container {padding: 58px 10px 0;}
}

@media (max-width: 991px) {
.flex-container {flex-direction: column;}
.flex-container.wrap{ flex-wrap: wrap; flex-direction: row;}
.flex-container>* { max-width: 100%;}
.pc-hide{display:block!important;}
.sp-hide{display:none!important;}
}
@media (max-width: 600px) {
a.btn-link { margin: 20px auto;}
}