@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap');
@import "/Portals/0/css/base01.css";
@import "/Portals/0/css/contents01.css";


/* ===========================================================
 html
=========================================================== */
/* font settings */
html{font-size: 62.5%;}
body{color:#444444;font-size:1.6rem;line-height:1.8; font-weight:500; height:auto;}
body{font-family: "Noto Sans JP", sans-serif;}
body,
body.fontSize1 {font-size:1.6rem;}
body.fontSize2 {font-size:1.8rem;}



/* chat bot */
.editMode .ibqa_chatbutton{z-index:999;}

/* ===========================================================
 skin
=========================================================== */
.skip{position:relative; display:block;}
.skip a{position:absolute;top:-100px;left:-100px;display:block;width:1px;height:1px;padding:0 1em;font-size:100%;color:#222;line-height:2em;border:1px solid #bbb;background:#fff;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;z-index:999;}
.skip a:active,
.skip a:focus{top:0;left:0;width:auto;height:auto;clip:auto;}

.DNNEmptyPane{margin:0 !important;padding:0 !important;}


/* ===========================================================
 header
=========================================================== */
#header{margin:0;padding:0; position:fixed; top:0; left:0; width:100%; background-color:#fff; z-index:40;}


/* ===========================================================
 gNav
=========================================================== */
.tokenMenu{background:#fff;}
.tokenMenu li{list-style-type:none;}
.tokenMenu a{position:relative;}
.tokenMenu li.Tab727,
.tokenMenu li.Tab728,
.tokenMenu li.Tab729,
.tokenMenu li.Tab732,
.tokenMenu li.Tab735,
.tokenMenu li.Tab467{display:block;}
.tokenMenu a{display:block;}
.tokenMenu ul{padding:0;}
.tokenMenu li{padding:0;}
.tokenMenu > ul {display:flex; justify-content:flex-end; align-items:center; padding:0;}
.tokenMenu > ul > li{padding:0 10px; display:none;}
.tokenMenu > ul > li:first-child{margin-left:0;}
.tokenMenu > ul > li > a{font-size:125%;  padding:15px 5px; text-decoration:none; color:#444444; text-align:center; /*line-height:1.2em;*/}
.tokenMenu > ul > li > a:hover{color:#1358A1;}
.tokenMenu > ul > li > ul{display:none;}
/* カレント */
.tokenMenu > ul > li.parentItem > a,
.tokenMenu > ul > li.currentItem > a{color:#1358A1;}
.tokenMenu > ul > li.parentItem > a:after,
.tokenMenu > ul > li.currentItem > a:after{content: ""; display: block; width: calc(100% - 20px); height: 4px; border-radius: 4px; background: #2182E9; margin:auto auto 0; position:absolute; left:0; right:0; top:inherit; bottom:inherit;}


/* ===========================================================
 メガメニュー
=========================================================== */
.tokenMenu > ul > li > ul{display:none; position:absolute; top:100%; left:0; right:0; width:100%; padding:5rem 2rem 5rem; margin-inline:auto; z-index:2; max-width: calc(1100px + 4rem);}
.tokenMenu > ul > li > ul > li{width:23.5%; border-bottom:1px solid #CCCCCC; padding:0 0 1em 0; margin-right:1.5%; margin-bottom:1em; display:inline-block; position:relative;}
.tokenMenu > ul > li > ul > li:nth-child(4n){ margin-right:0;}
.tokenMenu > ul > li > ul > li > ul{display:none;}
.tokenMenu > ul > li > ul > li > a{color: #444444; font-size:112.5%; padding:0 0 0 30px; display:block; text-decoration:none; position:relative;}
.tokenMenu > ul > li > ul > li > a:hover{color:#217821; text-decoration:underline;}            
.tokenMenu > ul > li > ul > li > a:before{content:""; display:block; width:15px; height:13px; background:url(/Portals/0/images/common/ico_arrow.png); position:absolute; top:0.6em; left:0.35em; bottom:inherit; right:inherit; margin:0 auto auto 0;}
.tokenMenu > ul > li > ul .mega_closeBtn{position:absolute; top:10px; right:20px; cursor:pointer;}
.tokenMenu > ul > li > ul .mega_closeBtn p{padding:0 0 0 35px; display:block; position:relative;}
.tokenMenu > ul > li > ul .mega_closeBtn p:before,
.tokenMenu > ul > li > ul .mega_closeBtn p:after{content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:25px; height:3px; border-radius:2px; background:#1A701A; margin:auto 0;}
.tokenMenu > ul > li > ul .mega_closeBtn p:before{transform: rotate(45deg);}
.tokenMenu > ul > li > ul .mega_closeBtn p:after{transform: rotate(-45deg);}
.tokenMenu > ul > li > ul .mega_closeBtn p span{ font-size:85%; font-weight:700; color:#1A701A; }
.tokenMenu .mega_item:before{content:""; display:block; background-color:#E8F2FD; position:absolute; top:0; left:calc((-100vw + 1100px + 4rem) / 2); margin-inline:auto; width:100vw; min-width:calc(1100px + 4rem); height:100%;}
/* カレント */
.tokenMenu > ul > li > ul > li.parentItem > a,
.tokenMenu > ul > li > ul > li.currentItem > a{color:#1A701A;}



/* ===========================================================
 footer
=========================================================== */
#footer{margin:0;padding:0;}



/************************************  1300px以下  ******************************************/
@media (max-width: 1300px) {
.tokenMenu > ul > li{padding:0 15px 0 0;}
.tokenMenu > ul > li > a{font-size:100%; padding:15px 0;}
}


/************************************  1150px以下  ******************************************/
@media (max-width: 1150px) {
.tokenMenu .mega_item:before{left:0;}
}


/************************************  768px以下  ******************************************/
@media (max-width: 768px) {

/* ========================
 html
======================== */

/* size settings */
html,
body{width:100%;min-width:1%;}


.controlPanel{display:none;}
img{max-width:100%;height:auto !important;}

#footer{margin:0;padding:0;}

/* =========================
 gNav
============================ */
.tokenMenu a{text-decoration:none;}

/* １階層 */
.tokenMenu > ul{flex-direction:column; align-items: flex-start;}
.tokenMenu > ul > li{padding:0; width:100%;}
.tokenMenu > ul > li > a{font-size:125%; color:#fff; background:#1358A1; overflow:hidden; padding:1em 50px 1em 20px; margin-bottom:3px; text-align:left;}
.tokenMenu > ul > li > a:hover{color:#fff;}

/* ２階層 */
.tokenMenu li ul{display:none;}
.tokenMenu > ul > li > ul{position:static; padding:0; max-width:inherit;}
.tokenMenu > ul > li > ul > li{background:#E8F2FD; margin-bottom:3px; width:100%; border-bottom:none; padding:0; margin-right:0; display:block; border-bottom:none;}
.tokenMenu > ul > li > ul > li:first-child{border-top:none;}
.tokenMenu > ul > li > ul > li > a{font-size:112.5%; color:#444444; padding:0.8em 50px 0.8em 20px; text-decoration:none;}
.tokenMenu > ul > li > ul > li > a:before{display:none;}
.tokenMenu > ul > li > ul > li.active{background:#E8F2FD;}
.tokenMenu > ul > li > ul > li.active > a{color:#217821;}
.tokenMenu > ul > li > ul > li.parentItem,
.tokenMenu > ul > li > ul > li.currentItem{background:#E8F2FD;}
.tokenMenu > ul > li > ul > li.parentItem > a,
.tokenMenu > ul > li > ul > li.currentItem > a{color:#217821;}
.tokenMenu > ul > li > ul > li.parentItem.active,
.tokenMenu > ul > li > ul > li.currentItem.active{background:#EEEEEE;}
.tokenMenu > ul > li > ul > li.parentItem.active > a,
.tokenMenu > ul > li > ul > li.currentItem.active > a{color:#444444;}

/* 3階層 */
.tokenMenu > ul > li > ul > li > ul > li{border-top:1px solid #fff; background:#E8F2FD;}
.tokenMenu > ul > li > ul > li > ul > li > a{font-size:100%; color:#444444; padding:0.8em 50px 0.8em 20px; text-decoration:none;}
.tokenMenu > ul > li > ul > li > ul > li > a.currentLink{color:#217821;}

/* 4階層 */
.tokenMenu > ul > li > ul > li > ul > li:has(> a.open + ul){padding-bottom:10px;}
.tokenMenu > ul > li > ul > li > ul > li > ul{border-radius:10px 0 0 10px; overflow:hidden; margin:0 0 0 20px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li{border-top:1px solid #CCCCCC; background:#FFFFFF;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li:first-child{border-top:none;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li a{font-size:100%; color:#444444; padding:0.8em 50px 0.8em 20px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li a.currentLink{color:#217821;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li a.currentLink:before{content:""; display:block; width:5px; height:20px; background:#2182E9; position:absolute; top:0; left:0; bottom:0; border-radius:3px; margin:auto auto auto 0;}
.tokenMenu > ul > li > ul > li > ul > li > ul li.parentItem > a.currentLink:before{display:none;}

/* 5階層 */
.tokenMenu > ul > li > ul > li > ul > li > ul > li:has(> a.open + ul){padding-bottom:10px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul{border-radius:10px 0 0 10px; overflow:hidden; margin:0 0 0 10px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li{border-top:1px solid #ffffff; background:#EEEEEE;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li:first-child{border-top:none;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li a{font-size:100%; padding:0.8em 0.5em 0.8em 14px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li a.currentLink{color:#217821;}

/* 6階層 */
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li:has(> a.open + ul){padding-bottom:10px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li > ul{border-radius:10px 0 0 10px; overflow:hidden; margin:0 0 0 10px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li{border-top:1px solid #CCCCCC; background:#ffffff;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child{border-top:none;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li a{font-size:100%; padding:0.8em 0.5em 0.8em 14px;}
.tokenMenu > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li a.currentLink{color:#217821;}


/* カレント */
.tokenMenu a.currentLink{ font-weight:800;}
.tokenMenu > ul > li.parentItem > a,
.tokenMenu > ul > li.currentItem > a{color:#fff;}
.tokenMenu > ul > li.parentItem > a:after,
.tokenMenu > ul > li.currentItem > a:after{display:none;}
.tokenMenu > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:before,
.tokenMenu > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:after,
.tokenMenu > ul > li > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:before,
.tokenMenu > ul > li > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:after,
.tokenMenu > ul > li > ul > li > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:before,
.tokenMenu > ul > li > ul > li > ul > li.parentItem > ul > li > a.toggleSwitch .toggleBtn:after{background:#2182E9;}



/* toggleSwitch  */
.tokenMenu .toggleBtn{position:absolute; top:0; bottom:0; right:20px; left:inherit; width:15px; height:15px; display:block; margin:auto;}
.tokenMenu a.toggleSwitch .toggleBtn:before,
.tokenMenu a.toggleSwitch .toggleBtn:after{content:""; display:block; position:absolute; top:0; bottom:0; left:inherit; margin:auto;}
.tokenMenu a.toggleSwitch .toggleBtn:before{width:15px; height:3px; border-radius:2px; background:#666666; right:0px;}
.tokenMenu a.toggleSwitch .toggleBtn:after{width:3px; height:15px; border-radius:2px; background:#666666; right:6px;}
.tokenMenu li > a.toggleSwitch.open .toggleBtn:before{background:#2182E9;}
.tokenMenu li > a.toggleSwitch.open .toggleBtn:after{opacity:0;}

/* １階層toggle */
.tokenMenu > ul > li > a.toggleSwitch .toggleBtn:before{background:#fff;}
.tokenMenu > ul > li > a.toggleSwitch .toggleBtn:after{background:#fff;}
.tokenMenu > ul > li > a.toggleSwitch.open .toggleBtn:before{background:#fff;}
.tokenMenu > ul > li > a.toggleSwitch.open .toggleBtn:after{opacity:0;}

/* 2階層toggle */
.tokenMenu > ul > li > ul > li > a.toggleSwitch .toggleBtn:before,
.tokenMenu > ul > li > ul > li > a.toggleSwitch .toggleBtn:after{content:""; display:block; position:absolute; top:0; bottom:0; left:inherit; margin:auto;}
.tokenMenu > ul > li > ul > li > a.toggleSwitch .toggleBtn:before{width:15px; height:3px; border-radius:2px; background:#666666; right:0px;}
.tokenMenu > ul > li > ul > li > a.toggleSwitch .toggleBtn:after{width:3px; height:15px; border-radius:2px; background:#666666; right:6px;}
.tokenMenu > ul > li > ul > li > a.toggleSwitch.open .toggleBtn:before{background:#2182E9;}
.tokenMenu > ul > li > ul > li > a.toggleSwitch.open .toggleBtn:after{opacity:0;}

/* アクティブ  */
.tokenMenu > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:before,
.tokenMenu > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:after,
.tokenMenu > ul > li > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:before,
.tokenMenu > ul > li > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:after,
.tokenMenu > ul > li > ul > li > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:before,
.tokenMenu > ul > li > ul > li > ul > li > a.open + ul > li > a.toggleSwitch >.toggleBtn:after{background:#2182E9;}


/* 個別 */
.tokenMenu li.Tab747{padding-left:0;}
.tokenMenu li.Tab747 > a{color:#fff; text-decoration:none; font-size:125%;}

/* メガメニュー */
.tokenMenu > ul > li > ul .mega_closeBtn,
.tokenMenu .mega_item:before{display:none;}

}


