/* ==========================================
  MV
========================================== */
.learn-DocHeader img {
  line-height: 1;
  vertical-align: middle;
}

@media screen and (max-width: 769px) {
  .learn-DocHeader__inner {
    max-width: 750px;
    /* min-width: 500px; */
    position: relative;
    margin: 0 auto
  }
  .learn-DocHeader__inner::after {
    position: absolute;
    content: '';
    display: block;
    width: calc(232 / 750 *100%);
    height: auto;
    padding-top: calc(212 / 750 *100%);
    background-image: url(/images/img-learn/ideco_01_sp.png);
    top: 50%;
    right: calc(30 / 750 *100%);
    transform: translate(0%, 70%);
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 770px) {
  .learn-DocHeader__inner {
    position: relative;
    max-width: 1366px;
    min-width: 1000px;
    margin: 0 auto
  }
  .learn-DocHeader__inner::after {
    position: absolute;
    content: '';
    display: block;
    width: calc(288 / 1366 *100%);
    height: auto;
    padding-top: calc(256 / 1366 *100%);
    background-image: url(/images/img-learn/ideco_01.png);
    top: 50%;
    left: 50%;
    transform: translate(105%, 23%);
    background-size: contain;
  }
}

/* ==========================================
  Lead
========================================== */
@media screen and (max-width: 769px) {
  .learn-lead {
    background-color: #e0f7ff;
  }
  .learn-lead p {
    font-size: 16px;
    line-height: 1.777777778;
    padding: calc(120 / 750 * 100%) 0 calc(190 / 750 * 100%)
  }
}
@media screen and (min-width: 770px) {
  .learn-lead {
    background-color: #e0f7ff;
  }
  .learn-lead p {
    font-size: 18px;
    line-height: 1.777777778;
    padding: calc(70 / 1200 * 100%) 0 calc(142 / 1200 * 100%)
  }
}

/* ==========================================
  Index
========================================== */
@media screen and (max-width: 769px) {
  .learn-index:nth-child(n + 4) {
    margin-top: 35px;
  }
  .learn-index .cmn-ContentsContainer {
  }
  .learn-index .section-header {
    border-radius: 10px 10px 0 0;
    position: relative;
  }
  .learn-index--primer .section-header {
    margin-top: calc(115 / 750 * -100%);
  }
  .learn-index .section-header h2 {
    text-align: center;
    line-height: 1.65;
    font-size: calc(43 / 28 * 1rem);
  }
  .learn-index .section-header__inner {
    color: #FFFFFF;
    padding: 26px calc(28 / 690 *100%);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 2;
  }
  .learn-index--primer .section-header__inner {
    background-color: #f36b0b;
  }
  .learn-index--practical .section-header__inner {
    background-color: #f55671;
  }
  .learn-index .section-header::before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: -8px;
    top: 50%;
    z-index: 1;
  }
  .learn-index--primer .section-header::before {
    background: repeating-linear-gradient(
-45deg
, #fff, #fff 2.5px, #f1bf97 2.5px, #f1bf97 5px );
  }
  .learn-index--practical .section-header::before {
    background: repeating-linear-gradient(
-45deg
, #fff, #fff 2.5px, #c34d61 2.5px, #c34d61 5px );
  }
  /* .learn-index .learn-index__lead::after {
    content: '';
    display: block;
    width: calc(188 / 750 * 100%);
    height: auto;
    padding-top: calc(153 / 750 * 100%);
    position: absolute;
    top: -27.167630058%;
    left: 4.666666667%;
    z-index: 3;
    background-size: contain;
  } */
  /* .learn-index.learn-index--primer .learn-index__lead::after {
    background-image: url(/images/img-learn/post_it_01_sp.png);
  } */
  .learn-index__lead_block {
    display: flex;
    display:-ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
    margin-left: calc(30/690 * -100%);
  }
  .learn-index__lead_block .post_it {
    width: calc(214 / 630 *100%);
  }
  .learn-index.learn-index--practical .section-header::after {
    background-image: url(/images/img-learn/post_it_02.png);
  }
  .learn-index .section-header p {
    text-align: center;
  }
  .learn-index .section-header p span {
    position: relative;
    font-size: calc(28 / 28 * 1rem);
    padding: 0 19px 0.5em;
    display: inline-block;
  }
  .learn-index .section-header p span::before,
  .learn-index .section-header p span::after {
    content: '';
    display: block;
    width: 0.17em;
    height: 1.222222222em;
    background-color: #FFFFFF;
    border-radius: 9999px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
  }
  .learn-index .section-header p span::before {
    left: 0;
    transform: translate(-150%, -65%) rotate(-45deg);
  }
  .learn-index .section-header p span::after {
    right: 0;
    transform: translate(150%, -65%) rotate(45deg);
  }
  .learn-index .cmn-ContentsContainer section {
    padding: calc(30 / 690 * 100%) calc(30 / 690 * 100%) calc(80 / 690 * 100%);
    border-radius: 0 0 10px 10px;
  }
  .learn-index--primer .cmn-ContentsContainer section {
    background-color: #fff4ed;
  }
  .learn-index--practical .cmn-ContentsContainer section {
    background-color: #fcf3f6;
  }
  .learn-index .learn-index__lead {
    text-align: left;
    line-height: 1.75;
    font-size: 16px;
    position: relative;
    margin-left: calc(25 / 660 *100%);
    width: calc(417 / 630 *100%);
    /* padding-left: calc(200 / 660 *100%); */
  }
  .learn-index .learn-index__card {
    margin-top: 20px;
  }
  .learn .grid-card li {

  }
  .learn-index .learn-index__card-item {
    background-color: #fff;
    border-radius: 10px;
    padding: calc(30 / 690 * 100%);
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    width: 100%!important;
  }
  .learn-index .learn-index__card-item:nth-child(n + 2) {
    margin-top: calc(30 / 630 * 100%);
  }
  .learn-index .btn-cta {
    width: calc(444 / 630 * 100%);
    /* width: calc(298 / 399 * 100%); */
    /* margin-top: calc(29 / 399 * 100%); */
    margin: 0 auto;
  }
  .learn-index .learn-index__card-item > picture {
    width: calc(145 / 544 * 100%);
  }
  .learn-index .learn-index__desc {
    width: 100%;
    text-align: center;
    /* width: calc(399 / 544 * 100%); */
    /* padding-left: calc(21 / 544 * 100%); */
  }
  .learn-index .learn-index__desc .title_h3_01 {
    width: calc(371 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_02 {
    width: calc(458 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_03 {
    width: calc(566 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_04 {
    width: calc(347 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_05 {
    width: calc(523 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_06 {
    width: calc(566 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_07 {
    width: calc(444 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .title_h3_08 {
    width: calc(567 / 630 *100%);
    margin: 0 auto;
  }
  .learn-index .learn-index__desc .learn-index__card-item_img {
    width: calc(254 / 630 *100%);
    margin: calc(20 / 630 *100%) auto;
  }
  /* .learn-index .learn-index__card-item:nth-child(odd) .learn-index__desc {
    padding-left: calc(47 / 544 * 100%);
  }
  .learn-index .learn-index__card-item:nth-child(even) .learn-index__desc {
    padding-left: calc(42 / 544 * 100%);
  } */
}
@media screen and (min-width: 770px) {
  .learn-index:nth-child(n + 4) {
    margin-top: 68px;
  }
  .learn-index .cmn-ContentsContainer {
  }
  .learn-index .section-header {
    border-radius: 10px 10px 0 0;
    position: relative;
  }
  .learn-index--primer .section-header {
    margin-top: calc(93 / 1200 * -100%);
  }
  .learn-index .section-header h2 {
    text-align: center;
    line-height: 1;
    font-size: 34px;
  }
  .learn-index .section-header__inner {
    color: #FFFFFF;
    padding: 26px 0;
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 2;
  }
  .learn-index--primer .section-header__inner {
    background-color: #f36b0b;
  }
  .learn-index--practical .section-header__inner {
    background-color: #f55671;
  }
  .learn-index .section-header::before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: -8px;
    top: 50%;
    z-index: 1;
  }
  .learn-index--primer .section-header::before {
    background: repeating-linear-gradient(
-45deg
, #fff, #fff 2.5px, #c34d61 2.5px, #c34d61 5px );
  }
  .learn-index--practical .section-header::before {
    background: repeating-linear-gradient(
-45deg
, #fff, #fff 2.5px, #c34d61 2.5px, #c34d61 5px );
  }
  .learn-index .section-header::after {
    content: '';
    display: block;
    width: calc(211 / 1200 * 100%);
    height: auto;
    padding-top: calc(173 / 1200 * 100%);
    position: absolute;
    top: -27.167630058%;
    left: -1%;
    z-index: 3;
    background-size: contain;
  }
  .learn-index.learn-index--primer .section-header::after {
    background-image: url(/images/img-learn/post_it_01.png);
  }
  .learn-index.learn-index--practical .section-header::after {
    background-image: url(/images/img-learn/post_it_02.png);
  }
  .learn-index .section-header p {
    text-align: center;
  }
  .learn-index .section-header p span {
    position: relative;
    font-size: 24px;
    padding: 0 19px 0.5em;
    display: inline-block;
  }
  .learn-index .section-header p span::before,
  .learn-index .section-header p span::after {
    content: '';
    display: block;
    width: 0.17em;
    height: 1.222222222em;
    background-color: #FFFFFF;
    border-radius: 9999px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
  }
  .learn-index .section-header p span::before {
    left: 0;
    transform: translate(-150%, -65%) rotate(-45deg);
  }
  .learn-index .section-header p span::after {
    right: 0;
    transform: translate(150%, -65%) rotate(45deg);
  }
  .learn-index .cmn-ContentsContainer section {
    padding: calc(47 / 1200 * 100%) calc(26 / 1200 * 100%) calc(37 / 1200 * 100%);
    border-radius: 0 0 10px 10px;
  }
  .learn-index--primer .cmn-ContentsContainer section {
    background-color: #fff4ed;
  }
  .learn-index--practical .cmn-ContentsContainer section {
    background-color: #fcf3f6;
  }
  .learn-index .learn-index__lead {
    text-align: center;
    line-height: 1;
    font-size: 22px;
  }
  .learn-index .learn-index__card {
    margin-top: 40px;
  }
  .learn-index .learn-index__card-item {
    background-color: #fff;
    border-radius: 10px;
    padding: calc(30 / 1148 * 100%);
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align: center;
    align-items: center;
  }
  .learn-index .learn-index__card-item:nth-child(n + 3) {
    margin-top: calc(30 / 1148 * 100%);
  }
  .learn-index .btn-cta {
    width: calc(298 / 399 * 100%);
    margin-top: calc(29 / 399 * 100%);
  }
  .learn-index .learn-index__card-item > picture {
    width: calc(145 / 544 * 100%);
  }
  .learn-index .learn-index__desc {
    width: calc(399 / 544 * 100%);
    padding-left: calc(21 / 544 * 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100%;
  }
  .learn-index .learn-index__card-item:nth-child(odd) .learn-index__desc {
    padding-left: calc(47 / 544 * 100%);
  }
  .learn-index .learn-index__card-item:nth-child(even) .learn-index__desc {
    padding-left: calc(42 / 544 * 100%);
  }
  .learn-index__desc--line2-txt {
    transform: translateY(25%);
  }
}

/* ==========================================
  aside
========================================== */
aside {
  text-align: right;
}
aside .note {
  font-size: 11px;
}
aside .auther {
  font-size: 14px;
}
@media all and (max-width: 767px) {
  aside {
    margin-top: 5px;
  }
  .top-aside{
    margin-bottom: 30px;
  }
}
@media all and (min-width: 768px) {
  aside {
    margin-top: 10px;
  }
  aside .auther {
    margin-top: 10px;
  }
  aside .note {
    font-size: 11px;
  }
  aside .auther {
    font-size: 14px;
  }
}

.learn-index .learn-index__card-item img{
  width: 100%;
}