@charset "utf-8";
/* CSS Document */
/* - learn.css - */

.learn__link {
  margin: clamp(30px,calc(60 / 750 * 100%),60px) auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  width: calc(690 / 750 * 100%);
  gap: 10px;
}
.learn__linkitem {
  width: calc((100% - 20px) / 3);
  display: block;
  position: relative;
  text-align: center;
  font-size: var(--fs-18);
  line-height: calc(22 / 18 * 1em);
  letter-spacing: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(20 / 690 * 100%) 0;
  color: var(--c-br);
  transition: all .5s ease;
}
.learn__linkitem:before {
  content: "";
  display: block;
  width: calc(50% - 0.5em);
  height: 1px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--c-br);
}
.learn__linkitem:after {
  content: "";
  display: block;
  width: calc(50% - 0.5em);
  height: 1px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--c-br);
}
.learn__linkitem span:after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  bottom: -0.4em;
  left: calc(50% - 0.5em);
  background: url(../shared/img/ic_ar_min_or.svg) no-repeat 50% 50%;
  -webkit-background-size: auto var(--fs-10);
  background-size: auto var(--fs-10);
  transform: rotate(90deg);
  transition: all .5s ease;
}
.learn__linkitem:hover {
  color: var(--c-or);
}
.learn__linkitem:hover span:after {
  content: "";
  bottom: -0.6em;
}

/*----------------------------------------------*/
@media screen and (min-width:1000px){
  .learn__link {
    margin: clamp(30px,calc(60 / 750 * 100%),60px) auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    width: calc(690 / 750 * 100%);
    gap: 10px;
    max-width: 1400px;
    box-sizing: border-box;
    padding: 0 140px;
  }
  .learn__linkitem {
    width: 170px;
    display: block;
    position: relative;
    text-align: center;
    font-size: var(--fs-12);
    line-height: calc(22 / 12 * 1em);
    letter-spacing: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
    color: var(--c-br);
    transition: all .5s ease;
  }
  .learn__linkitem:before {
    content: "";
    display: block;
    width: calc(50%);
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--c-br);
  }
  .learn__linkitem:after {
    content: "";
    display: block;
    width: calc(50%);
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--c-br);
  }
  .learn__linkitem span:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    bottom: calc(50% - .5em);
    left: calc(100% - 1em);
    background: url(../shared/img/ic_ar_min_or.svg) no-repeat 50% 50%;
    -webkit-background-size: auto 10px;
    background-size: auto 10px;
    transform: rotate(90deg);
    transition: all .5s ease;
  }
  .learn__linkitem:hover {
    color: var(--c-or);
  }
  .learn__linkitem:hover span:after {
    content: "";
    bottom: calc(50% - 1em);
  }  
}
  
/* -------------------------------------------- */

.learn__catch {
  text-align: center;
  margin: calc(60 / 750 * 100%) auto;
  font-size: var(--fs-26);
  line-height: calc(40 / 26 * 1em);
  box-sizing: border-box;
}
.learn__title {
  background: var(--c-br);
  text-align: center;
  color: #fff;
  padding: calc(40 / 750 * 100%) 0;
  box-sizing: border-box;
}
.learn__title h2 {
  font-size: var(--fs-36);
  font-weight: 700;  
}
.learn__title span {
  font-size: var(--fs-22);
  font-weight: 500;
  display: block;
  margin: 0 auto;
  line-height: 1.5em;
}
.learn__box {
  display: block;
  box-sizing: border-box;
  position: relative;
  margin: calc(60 / 750 * 100%) auto calc(90 / 750 * 100%);
  width: calc(630 / 750 * 100%);
}
.learn__box p {
  font-size: var(--fs-26);
  line-height: calc(40 / 26 * 1em);
}

.learn__imgbox--01 .learn__img {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: calc(320 / 630 * 100%);
  overflow: hidden;
  border-radius: var(--fs-30);
  margin-bottom: calc(30 / 630 * 100%);
}
.learn__imgbox--01 .learn__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  object-position: 50% 0%;
}
.learn__table table th {
  border: 1px solid var(--c-gr);
  background: var(--c-lgr);
  font-size: var(--fs-20);
  text-align: center;
  line-height: 1.5em;
  padding: 0.5em 0;
}
.learn__table table thead th {
  background-color: #fff;
}
.learn__table table td {
  border: 1px solid var(--c-gr);
  font-size: var(--fs-20);
  text-align: center;
  line-height: 1.5em;
  padding: 0.5em;
}
.learn__table table .learn__tablehead--green {
  background: var(--c-green);
  color: #fff;
  font-size: var(--fs-18);
  padding: 1em 0;
  
}
.learn__table table .learn__tablehead {
  width: calc(114 / 630 * 100%);
  background: var(--c-lgr);
}

.learn__tableimg {
  width: calc(154 / 170 * 100%);
  display: block;
  position: relative;
  height: 0;
  padding-bottom: calc(154 / 170 * 100%);
  margin: 0 auto 1em;
}
.learn__tableimg img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: calc(var(--imgwidth) / 170 * 100%);
}
.learn__tabletext {
  font-size: var(--fs-18);  
}
.learn__tabletext span {
  display: block;
  font-size: var(--fs-16);
  letter-spacing: 0;
  white-space: nowrap;
}
.learn__table.learn__table--02  table th {
  padding: 1.5em 0;  
}
.learn__tableimg--02 {
  width: calc(154 / 215 * 100%);
  display: block;
  position: relative;
  height: 0;
  padding-bottom: calc(220 / 215 * 100%);
  margin: 0 auto 1em;
}
.learn__tableimg--02 img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: calc(var(--imgwidth) / 170 * 100%);
}

.learn__table--02 + p {
  margin: calc(30 / 630 * 100%) auto calc(80 / 630 * 100%);
}


.learn__imgbox--02 .learn__img {
  position: relative;
  width: calc(400 / 630 * 100%);
  margin: 0 auto calc(30 / 630 * 100%);
}

/* -------------------------------------------- */

@media screen and (min-width:1000px){
  

.learn__catch {
  margin: 60px auto;
  font-size: var(--fs-16);
  line-height: calc(26 / 16 * 1em);
}
.learn__section {
  box-sizing: border-box;
  padding: 0 150px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.learn__title {
  padding: 30px 0;
}
.learn__title h2 {
  font-size: var(--fs-26);
}
.learn__title span {
  font-size: var(--fs-18);
  margin-top: 10px;
}
.learn__box {
  display: block;
  box-sizing: border-box;
  position: relative;
  margin: 60px auto 80px;
  width:100%;
  padding: 0 50px;
}
.learn__box p {
  font-size: var(--fs-16);
  line-height: calc(26 / 16 * 1em);
}
  .learn__imgbox--01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
.learn__imgbox--01 .learn__img {
  position: relative;
  width: calc(390 / 1000 * 100%);
  height: 0;
  padding-bottom: calc(200 / 1000 * 100%);
  overflow: hidden;
  border-radius: var(--fs-30);
  margin-bottom:0;
}
.learn__imgbox--01 .learn__text {
  text-align: justify;
  width: calc(560 / 1000 * 100%);
}
.learn__imgbox--01 .learn__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  object-position: 50% 0%;
}
.learn__table table th {
  border: 1px solid var(--c-gr);
  background: var(--c-lgr);
  font-size: var(--fs-14);
  text-align: center;
  line-height: 1.5em;
  padding: 10px 0;
}
.learn__table table thead th {
  background-color: #fff;
}
.learn__table table td {
  border: 1px solid var(--c-gr);
  font-size: var(--fs-14);
  text-align: center;
  line-height: 1.5em;
  padding: 10px;
}
.learn__table table .learn__tablehead--green {
  background: var(--c-green);
  color: #fff;
  font-size: var(--fs-14);
  padding: 1em 0;
  
}
.learn__table table .learn__tablehead {
  width: calc(180 / 1000 * 100%);
  background: var(--c-lgr);
}

.learn__tableimg {
  width: calc(170 / 270 * 100%);
  display: block;
  position: relative;
  height: 0;
  padding-bottom: calc(170 / 270 * 100%);
  margin: 0 auto 1em;
}
.learn__tableimg img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: calc(var(--imgwidth) / 170 * 100%);
}
.learn__tabletext {
  font-size: var(--fs-18);  
}
.learn__tabletext span {
  display: block;
  font-size: var(--fs-14);
  letter-spacing: 0;
  white-space: nowrap;
}
.learn__table.learn__table--02  table th {
  padding: 30px 0;  
}
.learn__tableimg--02 {
  width: calc(170 / 340 * 100%);
  display: block;
  position: relative;
  height: 0;
  padding-bottom: calc(240 / 340 * 100%);
  margin: 0 auto 20px;
}
.learn__tableimg--02 img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: calc(var(--imgwidth) / 170 * 100%);
}
  .learn__tabletext--02 {
    font-size: var(--fs-18);
  }

.learn__table--02 + p {
  margin: 30px auto 80px;
}
.learn__imgbox--02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 60px auto;
}

.learn__imgbox--02 .learn__img {
  position: relative;
  width: calc(400 / 1000 * 100%);
  margin: 0;
}
  
  .learn__imgbox--02 .learn__text {
    width: calc(570 / 1000 * 100%);
  }
}
  
/* -------------------------------------------- */


.learningr {
  background: var(--c-lor);
  counter-reset: number 0;
}
.learningr__title {
  background: var(--c-or);
  text-align: center;
  color: #fff;
  font-size: calc(--fs-26);
  font-weight: 500;
  box-sizing: border-box;
  display: block;
  padding: .5em;
}
.learningr__box {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
}
.learningr .learningr__item {
  box-sizing: border-box;
  display: block;
  padding: calc(30 / 630 * 100%);
}
.learningr__subtitle {
  background-color: #fff;
  box-sizing: border-box;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  color: var(--c-or);
  font-weight: 700;
  padding: .2em 1em;
}
.learningr__subtitle:before {
  counter-increment: number 1;
  content: counter(number);
  background: url(--c-or);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  background: var(--c-or);
  color: #fff;
  font-weight: 500;
  border-radius: 5em;
  margin-right: .5em;
}
.learningr .learningr__itemimg {
  display: block;
  position: relative;
  width: calc(var(--imgwidth) / 630 * 100% * 0.9);
  margin: calc(30 / 630 * 100%) auto;
}
.learningr__textbox {
  margin: calc(30 / 630 * 100%) auto;
}
.learningr__textbox dt {
  display: block;
  font-size: var(--fs-28);
  font-weight: 500;
  background: url(../shared/img/dot_line_or.svg) no-repeat bottom left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  padding-bottom: .5em;
  margin-bottom: .5em;
}
.learnlife__link {
  margin: 2em auto 1em;
}

/* -------------------------------------------- */
@media screen and (min-width:1000px){
  
.learningr {
  margin: 60px auto;
}
.learningr__box {
  padding-bottom: 30px;  
}
.learningr__title {
  font-size: calc(--fs-20);
  font-weight: 700;
  padding: 6px;
}
.learningr .learningr__item {
  box-sizing: border-box;
  display: block;
  padding: 0px 50px;
  margin: 40px auto 80px;
}
.learningr__subtitle {
  font-size: var(--fs-20);
  color: var(--c-or);
  font-weight: 700;
  padding: 8px 20px;
}
.learningr__subtitle:before {
  counter-increment: number 1;
  content: counter(number);  
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1em;
  margin-right: 10px;
}
.learningr .learningr__imgbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 30px auto;
}
.learningr__textbox {
  margin: 30px auto;
}
.learningr__textbox dt {
  display: block;
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: 1.25em;
  background: url(../shared/img/dot_line_or_l.svg) repeat-x bottom left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
  .learningr__textbox dt:first-letter {
    font-size: calc(16 / 20 * 1em);
    vertical-align: middle;
  }
.learningr .learningr__itemimg {
  display: block;
  position: relative;
  width: calc(250 / 900 * 100%);
  padding-bottom: 0;
  margin: 0;
}
  .learningr .learningr__itemimg img {
    width: calc(( var(--imgwidth)  / 2)/ 250 * 100%);
    display: block;
    margin: 0 auto;
  }
  .learningr__itemtext {
    width: calc( 560 / 900 * 100%);
  }
  .learningr__textbox--2col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 80px
  }
  .learningr__textbox--2col > div {
    width: calc(370 / 830 * 100%);
    margin: 0;
    position: relative;
  }
  .learningr__textbox--2col > div + div:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -40px;
    width: 1px;
    height: 100%;
    background-color: var(--c-br);
  }
  .learningr__textbox--2col p + p {
    margin-top: 30px;
  }
}
/* -------------------------------------------- */
.learnlife__item {
  background: var(--c-lor);
  display: block;
  box-sizing: border-box;
  border-radius: var(--fs-60);
  overflow: hidden;
  padding: calc(40 / 630 * 100%);
  margin: calc(40 / 630 * 100%) auto;
  
}
.learnlife__img {
  position: relative;
  display: block;
  border-radius: var(--fs-40);
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: calc(280 / 590 * 100% * 1.5);
  margin: 0 auto calc(30 / 590 * 100%);
}
.learnlife__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.learnlife__title {
  font-size: var(--fs-28);
  color: var(--c-or);
  font-weight: 700;
  background: url(../shared/img/dot_line_or.svg) no-repeat bottom left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  padding-bottom: .5em;
  margin-bottom: .5em;
}

/* -------------------------------------------- */
@media screen and (min-width:1000px){
  .learnlife__item {
  background: var(--c-lor);
  display: block;
  box-sizing: border-box;
  border-radius: 60px;
  overflow: hidden;
  padding: 60px;
  margin: 80px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.learnlife__img {
  position: relative;
  display: block;
  border-radius: 30px;
  overflow: hidden;
  width: calc(320 / 880 * 100%);
  height: 0;
  padding-bottom: calc(280 / 880 * 100%);
  margin: 0;
}
.learnlife__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  .learnlife__textbox {
    width: calc(530 / 880 * 100%);
    margin: 0;
  }
.learnlife__title {
  font-size: var(--fs-26);
  color: var(--c-or);
  font-weight: 700;
  background: url(../shared/img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
  .learnlife__link {
    display: block;
    margin: 60px auto 0;
  }
  .learnlife__link .btn--noic {
    padding: 10px 50px;
  }
}