/*
@mixin font-size($size) {
	font-size: $size + px;
	font-size: ($size/10) + rem;
	
	@include mq( $sp , $pc-l )  {
		font-size: ($size/8) + px;
		font-size: ($size/12.5) + rem;
	}
}*/
.title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #4C5BA8; }
  .title .strong-no {
    width: 8%;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; }
    .title .strong-no .no {
      font-size: 40px;
      font-size: 4rem;
      display: block;
      line-height: 1;
      text-align: center; }
    .title .strong-no .en {
      font-size: 9px;
      font-size: 0.9rem;
      display: block;
      line-height: 1;
      text-align: center; }
  .title h3 {
    width: 92%;
    margin: 0;
    padding-left: 1em; }

.section {
  padding: 4em 0; }
  @media screen and (max-width: 859px) {
    .section {
      padding: 3em 0; } }
  .section .wrap2 {
    padding: 3em 0 5em; }
  .section .wrap {
    padding: 2.5em 0 5em; }
    .section .wrap .img {
      padding: 1em 2em; }
    @media print, screen and (min-width: 860px) {
      .section .wrap {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1.5em;
        margin-right: -1.5em; }
        .section .wrap .text {
          width: 50%;
          padding: 0.5em 1.5em; }
        .section .wrap .img {
          width: 50%;
          padding: 0.5em 1.5em; }
        .section .wrap.-reverse .text {
          order: 2; } }
    @media screen and (min-width: 480px) and (max-width: 860px) {
      .section .wrap .img {
        width: 70%;
        margin: 0 auto 1em; } }

@media print, screen and (min-width: 1023px) {
  .list-within li {
    width: 32%; } }
@media screen and (max-width: 1022px) {
  .list-within li {
    width: 50%; } }
@media screen and (max-width: 479px) {
  .list-within li {
    width: 100%; } }