#idxwrap {
   padding: 0 0 180px 0;
   width: 98%;
   margin: auto;
}

#idxtitle {
   max-width: 450px;
   margin: auto;
}

#idxtitle img {
   display: inline-block;
   width: 80px;
   height: 80px;
}

#idxtitle .titlesubbox {
   display: inline-block;
   width: 300px;
   height: 100px;
   vertical-align: top;
}

#idxtitle p {
   display: inline-block;
   width: 100%;
   margin: 8px auto 0 auto;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: .07em;
   text-align: center;
}

#idxtitle h2 {
   display: inline-block;
   width: 100%;
   margin: 10px auto 0 auto;
   font-size: 28px;
   line-height: 28px;
   font-weight: 700;
   text-align: center;
}

#idxtitlebase {
   max-width: 600px;
   margin: auto;
   width: 100%;
   height: 7px;
   background-color: #0c79c6;
}

@media(max-width:780px) {
   #idxtitle {
      max-width: 400px;
      margin: auto;
   }

   #idxtitle img {
      margin-left: 30px;
   }

   #idxtitle .titlesubbox {
      width: 275px;
   }
}

@media(max-width:580px) {
   #idxwrap {
      padding: 0 0 140px 0;
   }

   #idxtitle {
      max-width: 360px;
      margin: auto;
   }

   #idxtitle img {
      width: 70px;
      height: 70px;
      margin-left: 0;
   }

   #idxtitle .titlesubbox {
      width: 245px;
      height: 85px;
   }

   #idxtitle p {
      margin: 5px auto 0 auto;
      font-size: 14.5px;
      letter-spacing: .05em;
   }

   #idxtitle h2 {
      margin: 8px auto 0 auto;
      font-size: 22px;
   }
}

@media(max-width:420px) {
   #idxtitle p {
      font-size: 14px;
      letter-spacing: .03em;
   }

   #idxtitle .titlesubbox {
      width: 215px;
   }
}

@media(max-width:400px) {
   #idxtitle img {
      margin-left: 15px;
   }
}

@media(max-width:350px) {
   #idxtitle img {
      width: 65px;
      height: 65px;
      margin-left: 10px;
   }

   #idxtitle .titlesubbox {
      width: 210px;
   }
}

.idx-item {
   margin: 35px auto 0 auto;
   max-width: 590px;
   color: #0c79c6;
   border-bottom: 2px solid #0c79c6;
}

.idx-item h3 {
   position: relative;
   font-size: 23px;
   font-weight: 400;
   letter-spacing: .06em;
   margin-left: 30px;
   cursor: pointer;
   -webkit-transition: letter-spacing .5s, color .2s;
   transition: letter-spacing .5s, color .2s;
}

.idx-item h3 #deviceType {
   position: absolute;
   display: inline-block;
   left: 250px;
   bottom: -1px;
}

.idx-item h3 #deviceType span {
   display: block;
   font-size: 13px;
   letter-spacing: 0;
   line-height: 13px;
}

.idx-item h3 #deviceType span::before {
   font-family: 'iebenIconFont' !important;
   content: "\f14a";
   font-size: 12px;
   margin-right: 5px;
}

@media (hover: hover) and (pointer: fine) {
   .idx-item h3:hover {
      color: coral;
   }
}

.idx-item h3::before {
   display: inline-block;
   font-family: 'iebenIconFont' !important;
   content: "\f002";
   width: 60px;
   height: 24px;
}

.idx-item h3.active {
   letter-spacing: .3em;
}

.idx-item h3::after {
   position: absolute;
   font-family: 'iebenIconFont' !important;
   content: "\e905";
   font-size: 20px;
   bottom: 10px;
   right: 25px;
   line-height: 20px;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transition: -webkit-transform .4s;
   transition: -webkit-transform .4s;
   transition: transform .4s;
   transition: transform .4s, -webkit-transform .4s;
}

.idx-item h3.active::after {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

.idx-item div p {
   display: block;
   margin: 50px 50px;
}

#idx-box .hidden_show {
   display: block;
   margin-top: 0.3em;
   padding-left: 1.5em;
   line-height: 1.9em;
   overflow: hidden;
}

@media(max-width:580px) {
   .idx-item h3 {
      font-size: 21.5px;
      letter-spacing: .05em;
   }

   .idx-item h3::before {
      width: 50px;
      height: 22px;
   }

   .idx-item h3::after {
      font-size: 18px;
      bottom: 6px;
      line-height: 18px;
   }

   .idx-item h3 #deviceType {
      left: 230px;
      bottom: -1px;
   }
}

@media(max-width:450px) {
   .idx-item h3 {
      font-size: 20px;
      letter-spacing: .04em;
      margin-left: 25px;
   }

   .idx-item h3::before {
      width: 45px;
   }

   .idx-item h3::after {
      font-size: 17px;
      bottom: 6px;
      line-height: 17px;
   }

   .idx-item h3 #deviceType {
      left: 200px;
      bottom: -1px;
   }

   .idx-item h3 #deviceType span {
      font-size: 12px;
      line-height: 12px;
   }

   .idx-item h3 #deviceType span::before {
      font-size: 12px;
      margin-right: 4px;
   }
}

@media(max-width:380px) {
   .idx-item h3 {
      font-size: 18.5px;
      margin-left: 20px;
   }

   .idx-item h3.active {
      letter-spacing: .2em;
   }

   .idx-item h3::before {
      width: 35px;
   }

   .idx-item h3::after {
      font-size: 16px;
      line-height: 16px;
      right: 12px;
   }

   .idx-item h3 #deviceType {
      left: 170px;
      bottom: -1px;
   }

   .idx-item h3 #deviceType span {
      font-size: 11.5px;
      line-height: 11.5px;
   }

   .idx-item h3 #deviceType span::before {
      font-size: 11.5px;
      margin-right: 3px;
   }
}

.menuList * {
   list-style: none;
}

.menuList button {
   background-color: transparent;
   border: none;
   cursor: pointer;
   outline: none;
   margin: 0;
   padding: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.menuList ul {
   margin: 0;
   padding: 0;
}

.menuList a {
   text-decoration: none;
   color: #ffffff;
}

.menuList {
   position: relative;
   margin: 0 auto 20px auto;
   max-width: 500px;
   width: 98%;
   height: 530px;
   color: #ffffff;
   background-color: #08578e;
   overflow-x: hidden;
   overflow-y: hidden;
   border-radius: 10px;
   -webkit-transition: all 0.7s;
   transition: all 0.7s;
}

.menuList .scrollwrap {
   position: relative;
}

.menuList .scup,
.menuList .scdown {
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   height: 30px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   color: rgba(255, 255, 255, .8);
   font-size: 28px;
   z-index: 2;
   cursor: pointer;
}

.menuList .scup {
   top: -10px;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   margin-top: 0px;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 87, 142, 1)), to(rgba(8, 87, 142, .2)));
   background: linear-gradient(to bottom, rgba(8, 87, 142, 1), rgba(8, 87, 142, .2));
}

.menuList .scdown {
   bottom: -5px;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   margin-bottom: 0px;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 87, 142, .2)), to(rgba(8, 87, 142, 1)));
   background: linear-gradient(to bottom, rgba(8, 87, 142, .2), rgba(8, 87, 142, 1));
}

.menuList .scup::before,
.menuList .scdown::before {
   position: absolute;
   display: inline-block;
   width: 26px;
   height: 26px;
   font-size: 17px;
   font-weight: bold;
   text-align: center;
   color: #ffffff;
   background-color: #063f68;
   border-radius: 50%;
   -webkit-transition: color .3s, -webkit-transform .3s;
   transition: color .3s, -webkit-transform .3s;
   transition: color .3s, transform .3s;
   transition: color .3s, transform .3s, -webkit-transform .3s;
}

.menuList .scup::before {
   font-family: 'iebenIconFont' !important;
   content: "\f106";
   line-height: 23px;
}

.menuList .scdown::before {
   font-family: 'iebenIconFont' !important;
   content: "\f107";
   line-height: 27px;
}

@media (hover: hover) and (pointer: fine) {

   .menuList .scup:hover::before,
   .menuList .scdown:hover::before {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: rgba(255, 255, 255, 1);
   }
}

@media (hover: none) {

   .menuList .scup:active,
   .menuList .scdown:active {
      -webkit-tap-highlight-color: transparent;
   }

   .menuList .scup:active::before,
   .menuList .scdown:active::before {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
   }
}

.menuList ul {
   position: relative;
   margin: 25px 25px 30px 40px;
   padding: 0px 20px 20px 0;
   height: 370px;
   overflow-x: hidden;
   overflow-y: hidden;
   z-index: 1;
   --sb-track-color: #3878a4;
   --sb-thumb-color: #e5e5e5;
   --sb-size: 7px;
   scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}

.menuList ul::-webkit-scrollbar {
   width: var(--sb-size)
}

.menuList ul::-webkit-scrollbar-track {
   background: var(--sb-track-color);
   border-radius: 7px;
}

.menuList ul::-webkit-scrollbar-thumb {
   background: var(--sb-thumb-color);
   border-radius: 7px;
}

.menuList .c-0 ul {
   height: 400px;
}

.menuList>div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0;
   overflow: hidden;
   margin: 20px auto 0 auto;
   opacity: 0;
   z-index: 1;
}

.menuList h4 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   width: 86%;
   height: 50px;
   margin: auto;
   font-size: 21px;
   font-weight: 500;
   letter-spacing: .1em;
   border-bottom: 1px solid #999999;
}

.menuList ul li {
   font-size: 18px;
   font-weight: 500px;
   line-height: 23px;
   margin: 8px 0 0 0;
   cursor: pointer;
   -webkit-transition: background-color .3s;
   transition: background-color .3s;
}

.menuList ul li a {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   border-bottom: 1px solid #08578e;
   -webkit-transition: border .3s;
   transition: border .3s;
   padding-bottom: 3px;
}

.menuList ul li a p:nth-child(1) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   margin: 0;
   min-width: 110px;
   width: auto;
   min-height: 35px;
   height: auto;
   font-size: 12px;
   line-height: 14px;
   letter-spacing: 0;
}

.menuList ul.kyouka li a p:nth-child(1) {
   font-size: 14px;
   line-height: 19px;
   letter-spacing: 0.11em;
}

.menuList ul li a p:nth-child(2) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: end;
   -ms-flex-align: end;
   align-items: flex-end;
   margin: 0 auto;
   width: calc(100% - 110px);
   min-height: 35px;
   height: auto;
   font-size: 17px;
   line-height: 21px;
}

.menuList ul li.p-item {
   position: relative;
   margin-top: 23px;
   padding: 0 35px 3px 0;
   font-size: 18px;
   letter-spacing: .07em;
   border-bottom: 1px solid #08578e;
   -webkit-transition: border .4s;
   transition: border .4s;
}

.menuList .p-item::after {
   display: inline-block;
   position: absolute;
   top: 0;
   right: 0;
   font-family: 'iebenIconFont' !important;
   content: "\f105";
   width: 25px;
   height: 25px;
   font-size: 22px;
   line-height: 25px;
   text-align: center;
   color: #ffffff;
   -webkit-transition: -webkit-transform .4s;
   transition: -webkit-transform .4s;
   transition: transform .4s;
   transition: transform .4s, -webkit-transform .4s;
}

.menuList ul li:not(p-item) {
   padding: 0 0 3px 0;
   font-size: 17px;
   letter-spacing: .03em;
}

@media (hover: hover) and (pointer: fine) {
   .menuList ul li.p-item:hover {
      border-bottom: 1px solid #cccccc;
   }

   .menuList ul li.p-item:hover::after {
      -webkit-transform: scale(140%);
      transform: scale(140%);
   }

   .menuList ul li a:hover {
      border-bottom: 1px solid #cccccc;
   }
}

@media (hover: none) {
   .menuList ul li.p-item:active {
      border-bottom: 1px solid #cccccc;
   }

   .menuList ul li a:active {
      border-bottom: 1px solid #cccccc;
   }
}

@media(max-width: 560px) {
   #idx-box .hidden_show {
      padding-left: 0;
   }

   .menuList>div p {
      width: 92%;
   }

   .menuList ul {
      margin: 25px 15px 30px 25px;
   }
}

@media(max-width: 450px) {
   .menuList {
      width: 100%;
   }

   .menuList ul {
      margin: 25px 15px 30px 20px;
   }

   .menuList ul li a p:nth-child(1) {
      min-width: 90px;
   }

   .menuList ul.kyouka li a p:nth-child(1) {
      min-width: 90px;
      font-size: 13.5px;
      line-height: 16px;
   }

   .menuList ul li a p:nth-child(2) {
      width: calc(100% - 90px);
      font-size: 15.5px;
      line-height: 17px;
   }
}

@media(max-width: 400px) {
   .menuList ul {
      padding: 0 10px 20px 0;
   }

   .menuList ul li a p:nth-child(1) {
      min-width: 80px;
      font-size: 11.5px;
   }

   .menuList ul.kyouka li a p:nth-child(1) {
      min-width: 80px;
      font-size: 13px;
      line-height: 15px;
   }

   .menuList ul li a p:nth-child(2) {
      width: calc(100% - 80px);
      font-size: 15px;
      line-height: 17px;
   }
}

@media(max-width: 375px) {
   .menuList ul {
      margin: 25px 10px 30px 12px;
   }

   .menuList ul li a p:nth-child(1) {
      min-width: 78px;
   }

   .menuList ul.kyouka li a p:nth-child(1) {
      min-width: 78px;
      font-size: 12.6px;
      line-height: 14px;
   }

   .menuList ul li a p:nth-child(2) {
      width: calc(100% - 78px);
      font-size: 14px;
      line-height: 16px;
   }
}

.menuList button {
   display: inline-block;
   position: relative;
   margin: 0 0 5px 15px;
   padding: 0 10px 0 40px;
   height: 33px;
   font-size: 16px;
   line-height: 35px;
   color: #f2f2f2;
   border-bottom: 1px solid #08578e;
   -webkit-transition: border .3s;
   transition: border .3s;
}

.menuList button::before {
   display: inline-block;
   position: absolute;
   top: 2.5px;
   left: 0;
   margin: 0 15px 0 5px;
   font-family: 'iebenIconFont' !important;
   content: "\f104";
   width: 25px;
   height: 25px;
   color: #555555;
   font-size: 22px;
   line-height: 25px;
   border-radius: 50%;
   background-color: #f2f2f2;
   -webkit-transition: all .3s;
   transition: all .3s;
}

.menuList button:hover {
   border-bottom: 1px solid #cccccc;
}

.menuList button:hover::before {
   font-size: 28px;
   line-height: 24px;
}

@media(max-width: 560px) {
   .menuList button {
      margin: 0 0 5px 5px;
   }
}

.menuList .c-0 {
   padding-top: 15px;
   z-index: 2;
   opacity: 1;
}

.parent-goleft-close {
   -webkit-animation-name: plc;
   animation-name: plc;
   -webkit-animation-duration: .25s;
   animation-duration: .25s;
   -webkit-animation-timing-function: ease-in;
   animation-timing-function: ease-in;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

@-webkit-keyframes plc {
   0% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }

   100% {
      -webkit-transform: translate(-15%, 0%);
      transform: translate(-15%, 0%);
      opacity: 0;
   }
}

@keyframes plc {
   0% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }

   100% {
      -webkit-transform: translate(-15%, 0%);
      transform: translate(-15%, 0%);
      opacity: 0;
   }
}

.parent-goright-open {
   -webkit-animation-name: pro;
   animation-name: pro;
   -webkit-animation-duration: .25s;
   animation-duration: .25s;
   -webkit-animation-timing-function: ease-out;
   animation-timing-function: ease-out;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-delay: .35s;
   animation-delay: .35s;
}

@-webkit-keyframes pro {
   0% {
      -webkit-transform: translate(-15%, 0%);
      transform: translate(-15%, 0%);
      opacity: 0;
   }

   100% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }
}

@keyframes pro {
   0% {
      -webkit-transform: translate(-15%, 0%);
      transform: translate(-15%, 0%);
      opacity: 0;
   }

   100% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }
}

.child-goleft-open {
   -webkit-animation-name: clo;
   animation-name: clo;
   -webkit-animation-duration: .25s;
   animation-duration: .25s;
   -webkit-animation-timing-function: ease-out;
   animation-timing-function: ease-out;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-delay: .35s;
   animation-delay: .35s;
}

@-webkit-keyframes clo {
   0% {
      -webkit-transform: translate(15%, 0%);
      transform: translate(15%, 0%);
      opacity: 0;
   }

   100% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }
}

@keyframes clo {
   0% {
      -webkit-transform: translate(15%, 0%);
      transform: translate(15%, 0%);
      opacity: 0;
   }

   100% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }
}

.child-goright-close {
   -webkit-animation-name: crc;
   animation-name: crc;
   -webkit-animation-duration: .25s;
   animation-duration: .25s;
   -webkit-animation-timing-function: ease-in;
   animation-timing-function: ease-in;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

@-webkit-keyframes crc {
   0% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }

   100% {
      -webkit-transform: translate(15%, 0%);
      transform: translate(15%, 0%);
      opacity: 0;
   }
}

@keyframes crc {
   0% {
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      opacity: 1;
   }

   100% {
      -webkit-transform: translate(15%, 0%);
      transform: translate(15%, 0%);
      opacity: 0;
   }
}