@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ////////////////////////////////////////////////////////////////////////////////
//
//     default.css
//
//////////////////////////////////////////////////////////////////////////////// */
/* ================================================================================
    Import Base files
================================================================================ */
@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================================
    reset css
================================================================================ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input, textarea, select {
    *font-size: 100%;
}

legend {
    color: #000;
}

img {
    -webkit-backface-visibility: hidden;
}

/* ================================================================================
    classes
================================================================================ */
/* basic
------------------------------------------------------------ */
.abs {
    position: absolute;
}

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

.bold {
    font-weight: bold;
}

.left {
    float: left;
}

.right {
    float: right;
}

#__bs_notify__ {
    display: none !important;
}

/* float
------------------------------------------------------------ */
.float {
    display: block;
}

.float:before, .float:after {
    content: " ";
    display: table;
}

.float:after {
    clear: both;
}

.float {
    zoom: 1;
    *zoom: 1;
}

/* flexbox
------------------------------------------------------------ */
.flexbox {
    -js-display: flex;
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flexbox {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flexbox li {
    justify-content: flex-start;
}

.flexbox .box {
    justify-content: flex-start;
}

.flexbox.between {
    justify-content: space-between;
}

.flex-dl {
    display: flex;
    flex-wrap: wrap;
}

/* box-sizing
------------------------------------------------------------ */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ////////////////////////////////////////////////////////////////////////////////

    _base_common

//////////////////////////////////////////////////////////////////////////////// */
.demo-link .block {
    width: 46%;
}

.demo-link .block:nth-of-type(even) {
    margin-left: 8%;
}

.demo-link .block:nth-of-type(n+3) {
    margin-top: 50px;
}

.demo-link .block .ttl {
    padding: 10px 0;
    background: #002f7b;
    font-size: 16px;
    color: #fff;
    text-align: center;
}

.demo-link li {
    margin: 15px 0 0;
}

.demo-link li a {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #002f7b;
}

.demo-link li.none {
    opacity: 0.3;
}

.demo-link li.none a {
    pointer-events: none;
    text-decoration: line-through;
    color: #333;
}

html, #contents {
    background: #fff;
}

body.-m1 .menuList li a {
    background-color: #002f7b;
}

body.-a2 .menuList li a {
    background-color: #004f97;
}

body.-m3 .menuList li a {
    background-color: #f0831e;
}

.content_inner {
    max-width: 600px;
}

@media screen and (max-width: 1200px) {
    .content_inner {
        width: 95vw;
    }
    .content_inner.-fullsize {
        width: 95vw;
    }
}

.menuList li {
    margin: 15px 0 0;
}

.menuList li:nth-of-type(1) {
    margin: 0;
}

.menuList li a {
    display: flex;
    align-items: center;
    color: #fff;
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: left;
}

.menuList li a img {
    width: 100%;
}

.iconMenuList.-margin-large {
    margin: 2% 0 0;
}

.iconMenuList.-margin-large .pluralSection__button {
    padding-top: 0;
}

.iconMenuList.-body-down .pluralSection__button {
    padding-top: 0;
}

.iconMenuList.-body-down .pluralSection__body {
    padding-top: 3.5%;
}

.iconMenuList li {
    margin: 15px 0 0;
}

.iconMenuList li:nth-of-type(1) {
    margin: 0;
}

.iconMenuList li a {
    display: block;
}

.iconMenuList li .unit {
    display: table;
    width: 100%;
}

.iconMenuList li .unit.-color--el01 .icon {
    background: #2e277e;
}

.iconMenuList li .unit.-color--el02 .icon {
    background: #6d004b;
}

.iconMenuList li .unit.-color--el03 .icon {
    background: #986a00;
}

.iconMenuList li .unit.-color--el04 .icon {
    background: #0080a1;
}

.iconMenuList li .unit.-color--el05 .icon {
    background: #6d7600;
}

.iconMenuList li .unit.-color--el06 .icon {
    background: #005d33;
}

.iconMenuList li .unit.-color--el07 .icon {
    background: #a41764;
}

.iconMenuList li .unit.-color--el08 .icon {
    background: #451f65;
}

.iconMenuList li .unit.-color--el09 .icon {
    background: #de7ea8;
}

.iconMenuList li .unit.-color--el10 .txt {
    background: #c8b3a2;
}

.iconMenuList li .unit.-color--aa01 .icon {
    background: #fff;
    border: 2px solid #cf6139;
    border-right: none;
}

.iconMenuList li .unit.-color--aa02 .icon {
    background: #cf6139;
}

.iconMenuList li .unit.-color--aa03 .icon {
    background: #00aca8;
}

.iconMenuList li .unit.-color--aa04 .icon {
    background: #8b6d39;
}

.iconMenuList li .unit.-color--aa05 .icon {
    background: #9f6d9c;
}

.iconMenuList li .unit.-color--aa06 .txt {
    background: url(../common/iconMenuList_bg_01.png) repeat 0 0;
    background-size: 15px auto;
}

.iconMenuList li .unit.-color--po01 .icon {
    background: #2e277e;
}

.iconMenuList li .unit.-color--po02 .icon {
    background: #6d004b;
}

.iconMenuList li .unit.-color--po03 .icon {
    background: #986a00;
}

.iconMenuList li .unit.-color--po04 .icon {
    background: #0080a1;
}

.iconMenuList li .unit.-color--po05 .icon {
    background: #6d7600;
}

.iconMenuList li .unit.-color--po06 .icon {
    background: #005d33;
}

.iconMenuList li .unit.-color--po07 .icon {
    background: #a41764;
}

.iconMenuList li .unit.-color--po08 .icon {
    background: #451f65;
}

.iconMenuList li .unit.-color--po09 .icon {
    background: #de7ea8;
}

.iconMenuList li .unit.-color--po10 .txt {
    background: #c8b3a2;
}

.iconMenuList li .unit.-size-10per .icon {
    width: 8.5vw;
}

.iconMenuList li .unit.-size-10per .icon img {
    max-height: 3.8rem;
}

.iconMenuList li .unit.-size-20per .icon {
    width: 11vw;
}

.iconMenuList li .unit.-size-20per .icon img {
    max-height: 3.8rem;
}

.iconMenuList li .unit.-size-30per .icon {
    width: 16vw;
}

.iconMenuList li .unit.-size-30per .icon img {
    max-height: 3.8rem;
}

.iconMenuList li .unit.-size-100per .txt {
    padding: 0 1.5rem;
    border-radius: 10px;
}

.iconMenuList li .unit .icon, .iconMenuList li .unit .txt {
    display: table-cell;
    vertical-align: middle;
    padding: 0.75rem 0.7rem;
}

.iconMenuList li .unit .icon img, .iconMenuList li .unit .txt img {
    vertical-align: middle;
    height: 10vw;
}

.iconMenuList li .unit .icon {
    width: 7vw;
    border-radius: 10px 0 0 10px;
    text-align: center;
}

.iconMenuList li .unit .icon img {
    max-height: 4.0rem;
}

.iconMenuList li .unit .txt {
    padding: 0 20px;
    border-radius: 0 10px 10px 0;
    background: #eeeeef;
    text-align: center;
}

.iconMenuList li .unit .txt img {
    max-height: 1.5rem;
    margin-left: 15%;
}

.iconMenuList li .unit.-button .txt {
    border-radius: 10px;
    background: #004f97;
}

@media screen and (max-width: 1200px) {
    .iconMenuList li .unit.-size-10per .icon {
        width: 18vw;
    }
    .iconMenuList li .unit.-size-20per .icon {
        width: 24vw;
    }
    .iconMenuList li .unit.-size-30per .icon {
        width: 30vw;
    }
    .iconMenuList li .unit .icon {
        width: 15vw;
    }
    .iconMenuList li .unit .txt img {
        height: 15vw !important;
    }
}

.style-dot-hr .pluralSection {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.style-dot-hr .pluralSection:last-of-type {
    margin-bottom: 0;
    padding-bottom: 60px;
}

.style-dot-hr .pluralSection:last-of-type:after {
    display: none;
}

.style-dot-hr .pluralSection:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: url(../../__media/lesson1/part3/goku/hr_dot_orange.png) repeat-x 0 0;
    background-size: auto 8px;
}

@media screen and (max-width: 1200px) {
    .style-dot-hr .pluralSection {
        margin-bottom: 20px;
        padding-bottom: 30px;
    }
    .style-dot-hr .pluralSection:after {
        height: 4px;
        background: url(../../__media/lesson1/part3/goku/hr_dot_orange.png) repeat-x 0 0;
        background-size: auto 4px;
    }
}

.pluralSection.-size-small {
    width: 80%;
    margin: auto;
}

.pluralSection .vertical-list {
    margin: 110% 0 0;
}

.pluralSection .vertical-list li {
    margin: 32% 0 0;
}

.pluralSection .pluralSection__button + .pluralSection__title {
    padding: 2.5% 0 0 2.5%;
    width: 100%;
    text-align: left;
}

.pluralSection .pluralSection__button + .pluralSection__title .list-ttl {
    margin-bottom: 20px;
}

.pluralSection .pluralSection__button + .pluralSection__title .list-ttl img {
    width: auto;
    height: 3.8rem;
}

@media screen and (max-width: 1200px) {
    .pluralSection .pluralSection__button + .pluralSection__title .list-ttl {
        margin-bottom: 15px;
    }
    .pluralSection .pluralSection__button + .pluralSection__title .list-ttl img {
        height: 2.8rem;
    }
}

.detailBlock_image + .detailBlock_text {
    margin: 5% 0 0;
}

.detailBlock_image + .detailBlock_text + .detailBlock_text_txt {
    margin: 5% 0 0;
}

.langChangeBtn {
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
}

.langChangeBtn li {
    width: 50%;
    padding-right: 15px;
    padding-left: 15px;
}

.langChangeBtn li button {
    background: #777;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    padding: .75rem .75rem;
}

.langChangeBtn li button .inner {
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.langChangeBtn li button img {
    height: 20px;
    vertical-align: middle;
}

.langChangeBtn li button[aria-expanded="true"] {
    background-color: #d68c3f;
    border-color: #d68c3f;
}

.langChangeBtn li button[aria-expanded="false"].of .inner {
    background-image: url(../images/menu/img_btn_of_w.png);
}

.langChangeBtn li button[aria-expanded="false"].en .inner {
    background-image: url(../images/menu/img_btn_en_w.png);
}

.langChangeBtn li button[aria-expanded="false"].ja .inner {
    background-image: url(../images/menu/img_btn_ja_w.png);
}

.langChangeBtn li button[aria-expanded="false"] img {
    visibility: hidden;
}

.langPanel[aria-expanded="false"] {
    display: none;
}

@media screen and (max-width: 1200px) {
    .langChangeBtn li {
        padding: 0 10px;
    }
}

.list-ttl {
    margin-bottom: 1rem;
}

.list-ttl img {
    height: 2rem;
}

.iconMenuList li .unit .txt2 img {
    max-height: 5.5rem;
margin-left: 5%;
}
.iconMenuList li .unit .txt2 {
    padding: 0 20px;
    border-radius: 0 10px 10px 0;
    background: #eeeeef;
    text-align: left;
}
.iconMenuList li .unit.-button .txt2 {
    border-radius: 10px;
    background: #004f97;
}
.iconMenuList .unit .tx2 {
    text-align: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.iconMenuList .unit .icon, .iconMenuList .unit .txt2 {
    display: table-cell;
    vertical-align: middle;
    padding: 0.75rem 0.7rem;
}
.iconMenuList .txt2 .txtInner::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url(../images/menu/icon_play.png) no-repeat center;
    background-size: contain;
}

.iconMenuList li .unit.-size-100per .txt2 {
    padding: 0 1.5rem;
    border-radius: 10px;
}
.iconMenuList li .unit.-color--aa06 .txt2 {
    background: url(../common/iconMenuList_bg_01.png) repeat 0 0;
    background-size: 15px auto;
}

@media screen and (max-width: 1200px){
  .iconMenuList li .unit .txt2 {
      padding: 0 3vw;
  }
  .iconMenuList li .unit .txt2 img {
      height: 16vw !important;
	  margin-left: 0;
  }
}

.iconMenuList .txtt .txtInner::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url(../images/menu/icon_play.png) no-repeat center;
    background-size: contain;
}

.iconMenuList li .unit .txt3 img {
    max-height: 4.0rem;
    margin-left: 6%;
    vertical-align: middle;

}
@media screen and (max-width: 640px){
  .iconMenuList li .unit .txt img {
      max-height: 1.2rem;
      margin-left:20%;
  }
  .iconMenuList .txt2 .txtInner::before {
      content: " ";
      position: absolute;
      top: 50%;
      left: -3%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      background: url(../images/menu/icon_play.png) no-repeat center;
      background-size: contain;
      }
}
@media screen and (max-width: 568px){
  .iconMenuList li .unit .txt img {
    max-height: 1.2rem;
    margin-left: 15%;
  }
  .iconMenuList .unit .txtInner::before {
      content: " ";
      position: absolute;
      top: 50%;
      left: -17%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      background: url(../images/menu/icon_play.png) no-repeat center;
      background-size: contain;
      }

      .iconMenuList .txt2 .txtInner::before {
          content: " ";
          position: absolute;
          top: 50%;
          left: 0%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          width: 25px;
          height: 25px;
          background: url(../images/menu/icon_play.png) no-repeat center;
          background-size: contain;
          }
    }
}