@charset "utf-8";

.l-content .m-container {
 max-width: 1200px;
}

.l-content .m-main--title {
 padding: 10px;
 background: #025fae;
 color: #fff;
 font-size: 27px;
 font-weight: bold;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
}

.l-content .m-main--title .m-main--title__sub {
 font-size: 18px;
 line-height: 1.6;
}

.l-content .m-main--title img {
 margin: 0;
}

.l-content .m-list--anchorlink {
 display: flex;
 flex-wrap: wrap;
 column-gap: 20px;
}

.l-content .m-list--anchorlink li {
 width: 32%;
 box-sizing: border-box;
}

.l-content .m-h3 {
 font-size: 16px;
}

.l-content .m-example {
 display: grid;
 grid-auto-flow: column;
 align-content: space-between;
 justify-items: stretch;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}

.l-content .m-example__item {
 border: 1px solid #ccc;
}

.l-content .m-example .m-title--example--ng,
.l-content .m-example .m-title--example--ok {
 margin-bottom: 15px;
 padding: 6px 0 5px;
 background-color: #fc0;
 font-size: 15px;
 font-weight: bold;
 text-align: center;
}

.l-content .m-example .m-title--example--ng {
 background-color: #666;
 color: #fff;
}

.l-content .m-example .m-list--example {
 display: flex;
 align-items: flex-start;
 gap: 20px;
}

.l-content .m-list--block {
 padding: 20px;
 display: flex;
 flex-direction: column;
 row-gap: 20px;
}

.l-content .m-example .m-example__item:first-of-type .m-list--example__a {
 background-color: #f5f5f5;
}

.l-content .m-example .m-list--example__sj {
 width: 25%;
 text-align: center;
 background-color: #666;
 color: #FFF;
 font-size: 16px;
}

.l-content .m-example .m-list--example__detail {
 font-size: 16px;
 width: 75%;
}


.l-content .m-example .m-list--example__sj.ai {
 background-color: #f5f5f5;
 color: #000;
}

.l-content .m-example .m-example__item:last-child .m-list--example__sj {
 background-color: #fc0;
 color: #000;
}

.l-content .m-example .m-example__item:last-child .m-list--example__sj.ai {
 background-color: #fffaeb;
}

.l-content .m-note {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 15px 0 0 0;
}

.l-content .m-note--label {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: #025fae;
 color: #fff;
 font-weight: 700;
 font-size: 16px;
 padding: 8px 22px 8px 12px;
 clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
 width: 13%;
}

.l-content .m-note--text {
 width: 85%;
}

.l-content .m-note--label__icon {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: #fff;
 color: #025fae;

 display: inline-flex;
 align-items: center;
 justify-content: center;

 font-size: 14px;
 font-weight: 700;
}

@media only screen and (max-width: 1024px) {
 .l-content .m-list--anchorlink li {
  width: 30%;
 }

 .l-content .m-main--title {
  font-size: 20px;
 }

 .l-content .m-main--title .m-main--title__sub {
  font-size: 16px;
 }

 .l-content .m-note--label {
  width: 16%;
 }
}

@media only screen and (max-width: 767px) {
 .l-content .m-note--label {
  width: 20%;
 }
 
  .l-content .m-main--title .m-main--title__sub br {
  display: none;
 }
}

@media only screen and (max-width: 600px) {
 .l-content .m-list--anchorlink li {
  width: 100%;
 }

 .l-content .m-example {
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: row;
 }

 .l-content .m-note--label {
  width: 35%;
 }

 .l-content .m-main--title {
  gap: 5px;
  flex-direction: column;
 }

 .l-content .m-main--title img {
  width: 80px;
 }

 .l-content .m-main--title {
  font-size: 18px;
 }

 .l-content .m-main--title .m-main--title__sub {
  font-size: 12px;
 }
}

@media only screen and (max-width: 480px) {
 .l-content .m-note {
  flex-direction: column;
  align-items: flex-start;
 }

 .l-content .m-note--label {
  width: 100%;
 }

 .l-content .m-note--text {
  width: 100%;
 }
}