/* CSS Document */
html {
  font-size: clamp(12px, 2vw, 16px);
  font-family: source-han-sans-japanese, sans-serif !important;
  font-weight: 300; }

.bold, .bold1 {
  font-weight: 500 !important; }

.red {
  color: red; }

/*
20px -- 1.25rem
16px -- 1rem
14px -- 0.875rem
12px -- 0.75rem
*/
.color01 {
  color: #1E2F7D; }

.color02 {
  color: #8e97be; }

.color03 {
  color: #59C9B8; }

.colorG01 {
  color: #B99C5A; }

.colorG02 {
  color: #D8C195; }

.font20 {
  font-size: 2rem !important; }

.font15 {
  font-size: 1.5rem !important; }

.font13 {
  font-size: 1.3rem !important; }

.font12 {
  font-size: 1.2rem !important; }

.font10 {
  font-size: 1rem !important; }

.fontS {
  font-size: 0.9rem !important; }

.fontXS {
  font-size: 0.75rem !important; }

.smDisp {
  display: block; }
  @media screen and (min-width: 640px) {
    .smDisp {
      display: none; } }

.smDispR {
  display: block; }
  @media screen and (max-width: 639px) {
    .smDispR {
      display: none; } }

.spDisp {
  display: block; }
  @media screen and (min-width: 1024px) {
    .spDisp {
      display: none; } }

.pcDisp {
  display: none; }
  @media screen and (min-width: 1024px) {
    .pcDisp {
      display: block; } }

.spDispI {
  display: inline-block; }
  @media screen and (min-width: 1024px) {
    .spDispI {
      display: none; } }

.pcDispI {
  display: none; }
  @media screen and (min-width: 1024px) {
    .pcDispI {
      display: inline-block; } }

.flexCenterMiddle {
  display: flex;
  justify-content: center;
  align-items: center; }

.flexMiddle {
  display: flex;
  align-items: center; }

input::placeholder, textarea::placeholder {
  color: #BBB;
  font-weight: 300; }

a > *:hover {
  opacity: 0.6; }

a.basicA:link {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a.basicA:visited {
  color: #BF4D4F;
  text-decoration: underline;
  font-weight: inherit; }

a.basicA:hover {
  color: inherit;
  text-decoration: none;
  font-weight: inherit; }

a.basicA:active {
  color: inherit;
  text-decoration: none;
  font-weight: inherit; }

#contentsW {
  max-width: 768px;
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0; }
  #contentsW h2, #contentsW h3, #contentsW h4 {
    margin-top: 2rem;
    margin-bottom: 1rem; }
  #contentsW h1 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    background: #F3F3F3;
    padding: .2rem .5rem;
    margin-bottom: 1.5rem; }
  #contentsW h2 {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 700; }
  #contentsW h3 {
    font-size: 1.3rem;
    border-bottom: 1px solid #BBB;
    padding: 0 .2rem;
    font-weight: 500; }
  #contentsW h4 {
    font-size: 1.2rem;
    font-weight: 500; }

.youtubeFrame {
  position: relative;
  padding-bottom: 56.25% !important;
  height: 0;
  overflow: hidden; }
  .youtubeFrame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.baseWidth {
  width: 90%;
  max-width: 816px;
  margin: 0 auto 0 auto;
  padding: 0; }

.baseWidth100 {
  width: 100%;
  max-width: 816px;
  margin: 0 auto 0 auto;
  padding: 0; }

.innerArticleAdvW > div:nth-of-type(1) > span {
  background: #33b16a;
  color: #FFF; }
.innerArticleAdvW .innerArticleAdv {
  border: #33b16a 1px solid;
  padding: .5rem;
  width: 90%;
  max-width: 400px;
  margin: 0 auto; }
  .innerArticleAdvW .innerArticleAdv .div01 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between; }
    .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox {
      width: 100%;
      display: block;
      padding: .3rem;
      margin: .2rem 0;
      background: #e8fff0; }
      .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a {
        display: block; }
        .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a .advTitle {
          margin: 0;
          color: saddlebrown;
          font-weight: 600;
          font-size: 0.85rem; }
          @media screen and (max-width: 767px) {
            .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a .advTitle {
              font-size: 0.9rem; } }
          @media screen and (max-width: 639px) {
            .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a .advTitle {
              font-size: 0.9rem; } }
        .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a > div {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between; }
          .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a > div > div:nth-of-type(1) {
            flex: 0 0 20%; }
          .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a > div > div:nth-of-type(2) {
            flex: 0 0 78%; }
            .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a > div > div:nth-of-type(2) .p01 > span {
              font-size: 0.8rem;
              line-height: 1.3;
              display: block; }
            .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox > a > div > div:nth-of-type(2) .p01 > span:nth-of-type(2) {
              margin-top: .4rem; }
      .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox a:link {
        color: #333;
        text-decoration: none;
        font-weight: inherit; }
      .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox a:visited {
        color: #333;
        text-decoration: none;
        font-weight: inherit; }
      .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox a:hover {
        color: #333;
        text-decoration: none;
        font-weight: inherit;
        opacity: 0.5; }
      .innerArticleAdvW .innerArticleAdv .div01 .innerArticleAdvBox a:active {
        color: #333;
        text-decoration: none;
        font-weight: inherit; }
  .innerArticleAdvW .innerArticleAdv .div02 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between; }
    .innerArticleAdvW .innerArticleAdv .div02 > div {
      padding: .5rem;
      margin: .2rem 0;
      background: #FAFAFA;
      flex: 0 0 49%; }
      @media screen and (max-width: 1023px) {
        .innerArticleAdvW .innerArticleAdv .div02 > div {
          flex: 0 0 100%; } }
      @media screen and (max-width: 767px) {
        .innerArticleAdvW .innerArticleAdv .div02 > div {
          flex: 0 0 49%; } }
      @media screen and (max-width: 639px) {
        .innerArticleAdvW .innerArticleAdv .div02 > div {
          flex: 0 0 100%; } }
      .innerArticleAdvW .innerArticleAdv .div02 > div > div {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between; }

.toButton {
  background: pink;
  width: 100%;
  max-width: 200px;
  height: 3rem;
  border-radius: 1rem; }
  .toButton > span {
    display: block;
    color: #FFF; }