@charset "UTF-8";
/**▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼　デバイス毎の条件分岐　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼**/
/**▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ デバイス毎の条件分岐（触らない） ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲**/
/* 共通
----------------------------------------------------------------------*/
.txt-marker {
  background-image: linear-gradient(transparent 60%, #ffe76b 60%);
  font-weight: bold; }

.line-through {
  text-decoration: line-through; }

.bg-violet {
  background: #050d5c; }

.bg-blue {
  background: #d9eaf1; }

.bg-white {
  background: #FFF; }

.bg-cream {
  background: #f3f3f3; }

.cl-yellow {
  color: #fff000; }

.cl-white {
  color: #fff; }

/*コンバージョンボタン　キランとするやつ*/
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0; }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1; }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0; } }
.shiny-btn {
  position: relative;
  display: block;
  overflow: hidden; }
  .shiny-btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, white 100%, rgba(255, 255, 255, 0) 0%);
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; }
  .shiny-btn a {
    color: #fff; }

/* 景品表示法対応
----------------------------------------------------------------------*/
.pr {
  max-width: 800px;
  margin: .5rem auto;
  text-align: right;
  opacity: 0.4;
  font-size: 16px; }
  .pr-video {
    margin: 0 auto;
    padding: .5rem 0;
    opacity: 1;
    background-color: #070801;
    color: #fff; }
    .pr-video-inner {
      margin: 0 auto;
      max-width: 800px;
      text-align: right; }
  .pr-black {
    background-color: #0e100f; }
  .pr-pastel {
    background-color: #f8f4ee;
    color: #494949; }

.header-pr {
  font-size: 16px;
  display: flex;
  align-items: end;
  margin-bottom: 0.2rem; }

/* サイズ調整
----------------------------------------------------------------------*/
.inner {
  max-width: 960px;
  margin: auto; }

.inner-ad {
  max-width: 800px;
  margin: auto; }
  @media only screen and (max-width: 767px) {
    .inner-ad {
      width: 96%; } }

.wrap {
  width: 960px;
  display: -webkit-flex;
  display: flex;
  margin: auto; }
  @media only screen and (max-width: 767px) {
    .wrap {
      display: inherit;
      width: 100%; } }

.main {
  display: block;
  width: 640px;
  margin-bottom: 5rem;
  margin-right: 20px; }
  @media only screen and (max-width: 767px) {
    .main {
      margin-bottom: 0;
      padding: 1rem;
      width: 100%; } }
  .main.top-page {
    width: 100%; }

.main-ad {
  display: block;
  margin: 0rem auto 5rem; }
  @media only screen and (max-width: 767px) {
    .main-ad {
      margin-bottom: 0;
      padding: 1rem;
      width: 100%; } }

.sub {
  width: 300px;
  margin-bottom: 3rem; }
  @media only screen and (max-width: 767px) {
    .sub {
      padding: 1rem;
      width: 100%; } }

.sub-fixed {
  position: sticky;
  margin-bottom: 0;
  top: 10px;
  z-index: 1; }

/*YSS YDA GAD GDN LP用サイドバー*/
.lp-ad .sub {
  margin-top: 2rem; }
  .lp-ad .sub .sub-fixed {
    position: static; }

/*YSS  LP用サイドバー*/
.lp-yss .wrap {
  width: 800px;
  display: block;
  margin: auto; }
  @media only screen and (max-width: 767px) {
    .lp-yss .wrap {
      display: inherit;
      width: 100%; } }
.lp-yss .sub {
  width: 800px;
  margin: 2rem auto 4rem; }
  @media only screen and (max-width: 767px) {
    .lp-yss .sub {
      padding: 1rem;
      width: 100%; } }

/*loop-ranl-boxed2.php用のcssは一番最後にあります*/
/* header
----------------------------------------------------------------------*/
#header {
  border-bottom: 1px solid #DDD;
  box-shadow: 0 1px 4px #DDD;
  padding: .5rem 0;
  border-top: 4px solid #050d5c;
  margin: 0 0 2rem 0; }
  #header .header-inner {
    display: flex;
    justify-content: flex-end; }
    @media only screen and (max-width: 767px) {
      #header .header-inner {
        padding: 0 1rem 0 0; } }
  #header .logo {
    width: 130px;
    margin-right: auto; }
    @media only screen and (max-width: 767px) {
      #header .logo {
        width: 110px; } }
  #header .menu {
    display: flex;
    align-items: center; }
    #header .menu li {
      margin-right: 3rem; }
      @media only screen and (max-width: 767px) {
        #header .menu li {
          font-size: 1.2rem;
          margin-right: 1rem; } }
  #header .search-column {
    width: 200px; }
    @media only screen and (max-width: 767px) {
      #header .search-column {
        width: 130px; } }
    #header .search-column form {
      position: relative; }
    #header .search-column input {
      border: 1px solid #888;
      border-radius: 4px;
      font-size: 1.2rem;
      height: auto;
      margin-top: 0.5rem;
      padding: 0.5rem 1rem;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        #header .search-column input {
          margin-top: 0.3rem; } }
    #header .search-column button {
      background: none;
      border: none;
      color: #666;
      font-size: 1.2rem;
      position: absolute;
      right: 0;
      top: .5rem; }
      #header .search-column button img {
        width: 30px; }
        @media only screen and (max-width: 767px) {
          #header .search-column button img {
            width: 25px; } }

/* toppage
----------------------------------------------------------------------*/
.column-list dt {
  background: #050d5c;
  border-radius: 5px;
  color: #FFF;
  font-size: 2rem;
  font-weight: 700;
  margin: 4rem 0 2rem;
  padding: 2rem 2rem 2rem 5rem;
  line-height: 1;
  position: relative;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .column-list dt {
      font-size: 1.6rem;
      padding: 2rem 1.5rem 2rem 4.5rem; } }
  .column-list dt img {
    position: absolute;
    width: 26px;
    left: 2rem;
    top: 28%; }
    @media only screen and (max-width: 767px) {
      .column-list dt img {
        width: 20px;
        left: 1.5rem; } }
.column-list ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem; }
  .column-list ul li {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 2.3rem;
    position: relative;
    width: 50%; }
    @media only screen and (max-width: 767px) {
      .column-list ul li {
        font-size: 1.4rem;
        width: 100%; } }
    .column-list ul li::before {
      border-radius: 7px;
      content: "";
      width: 14px;
      height: 14px;
      background: #050d5c;
      position: absolute;
      left: 0;
      top: 5px; }
    .column-list ul li::after {
      content: "";
      box-sizing: border-box;
      width: 4px;
      height: 4px;
      border: 4px solid transparent;
      border-left: 4px solid #fff;
      position: absolute;
      left: 6px;
      top: 8px; }
    .column-list ul li.list-column {
      font-size: 1.5rem;
      text-align: right;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        .column-list ul li.list-column {
          font-size: 1.4rem; } }
      .column-list ul li.list-column::before {
        display: none; }
      .column-list ul li.list-column::after {
        display: none; }
      .column-list ul li.list-column a {
        position: relative;
        padding-left: 1.5rem; }
        .column-list ul li.list-column a::before {
          border-top: 5px solid #349FE8;
          border-left: 5px solid transparent;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          content: "";
          display: block;
          height: 0;
          left: 0;
          margin: -3px 0 0;
          position: absolute;
          top: 50%;
          width: 0; }

/* visual
----------------------------------------------------------------------*/
.mainvisual {
  background-color: #D8EBF2;
  overflow: hidden;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: -2; }
  @media only screen and (max-width: 767px) {
    .mainvisual {
      height: auto; } }
  .mainvisual-margin {
    margin-bottom: 1rem; }
  .mainvisual img {
    height: 280px;
    width: auto; }
    @media only screen and (max-width: 767px) {
      .mainvisual img {
        height: auto;
        padding-bottom: 4rem; } }

.visual {
  height: 320px;
  overflow: hidden;
  margin: -4rem 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: -2; }
  @media only screen and (max-width: 767px) {
    .visual {
      height: 250px;
      padding: 1rem; } }
  .visual::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1; }
  .visual .title {
    margin: 6rem auto 2rem;
    text-align: center; }
  .visual h1 {
    color: #FFF;
    font-size: 4.5rem;
    padding: 2rem 3rem;
    line-height: 1.3;
    opacity: 1;
    border: 2px solid #fff;
    display: inline-block;
    margin-top: -2rem; }
    @media only screen and (max-width: 767px) {
      .visual h1 {
        font-size: 2.5rem; } }
  .visual .text {
    line-height: 1.95;
    font-size: 1.6rem;
    background: #FFF;
    display: inline;
    font-weight: bold;
    display: none; }

/*mainvisual　検索付き*/
#lp2 .mainvisual {
  position: static; }
  #lp2 .mainvisual .flex {
    display: flex;
    justify-content: space-around;
    align-items: center; }
    #lp2 .mainvisual .flex img {
      height: 350px !important; }
  #lp2 .mainvisual .search-simple {
    flex-basis: 40%; }
    #lp2 .mainvisual .search-simple .search {
      margin: auto;
      background: #fff; }
      #lp2 .mainvisual .search-simple .search h3 {
        font-size: 1.6rem;
        padding: 1rem;
        text-align: center; }
        #lp2 .mainvisual .search-simple .search h3 img {
          height: auto !important;
          top: 10%;
          left: 11rem; }
      #lp2 .mainvisual .search-simple .search .input-box dl {
        padding: 1rem; }
      #lp2 .mainvisual .search-simple .search .input-box .submit-box {
        padding: 1rem 7rem 1.5rem; }
        #lp2 .mainvisual .search-simple .search .input-box .submit-box button {
          font-size: 1.8rem;
          padding: 0.5rem;
          background: #02bb80;
          box-shadow: 0 4px 0 #046c4b; }
@media only screen and (max-width: 767px) {
  #lp2 .search {
    margin: .5rem auto; } }

/* description
----------------------------------------------------------------------*/
.description {
  font-size: 1.6rem;
  margin: -40px 0 3rem 0; }
  @media only screen and (max-width: 767px) {
    .description {
      margin: -40px 1rem 2rem; } }
  .description .inner {
    box-shadow: 0 1px 8px #BBB;
    border-radius: 5px;
    background: #FFF; }
  .description .text {
    line-height: 1.95;
    font-size: 1.6rem;
    margin: 0 0 2rem 0;
    padding: 2rem; }
    @media only screen and (max-width: 767px) {
      .description .text {
        font-size: 1.3rem;
        padding: 1.5rem; } }
  .description .btn-more::before {
    content: '...'; }
  @media only screen and (max-width: 767px) {
    .description .btn-more {
      border: 1px solid #349FE8;
      border-radius: 5px;
      display: block;
      margin: 1rem auto 0;
      padding: 0 1rem;
      text-align: center;
      text-decoration: none;
      width: 13rem; }
      .description .btn-more::before {
        content: none; } }

/*YSS YDA GAD GDN LP用*/
.lp-ad .description {
  margin: 2rem auto; }
  @media only screen and (max-width: 767px) {
    .lp-ad .description {
      margin: 1.5rem auto; } }
  .lp-ad .description .text {
    padding: 0rem;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      .lp-ad .description .text {
        letter-spacing: 0.05em;
        background: #F8F8FF;
        padding: 0.5rem; } }

/* section-title
----------------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 1.5rem 1rem;
  line-height: 1.3;
  margin-bottom: 3rem; }
  @media only screen and (max-width: 767px) {
    .section-title {
      margin-bottom: 1rem; } }
  .section-title h2 {
    font-weight: bold;
    font-size: 2.4rem; }
    @media only screen and (max-width: 767px) {
      .section-title h2 {
        font-size: 1.8rem; } }
  .section-title p {
    font-weight: bold;
    font-size: 1.8rem; }
    @media only screen and (max-width: 767px) {
      .section-title p {
        font-size: 1.4rem; } }

/* .compare
----------------------------------------------------------------------*/
.compare {
  padding: 2rem 0 3rem; }
  @media only screen and (max-width: 767px) {
    .compare {
      padding: 1rem; } }
  .compare .textarea {
    margin: 0 0 3rem 0; }
    @media only screen and (max-width: 767px) {
      .compare .textarea {
        margin: 0 0 1.5rem 0; } }
    .compare .textarea h2 {
      font-size: 3.5rem;
      text-align: center;
      line-height: 1.2;
      margin: 0 0 1rem 0; }
      @media only screen and (max-width: 767px) {
        .compare .textarea h2 {
          font-size: 2rem; } }
    .compare .textarea p {
      text-align: center;
      font-size: 1.6rem; }
      @media only screen and (max-width: 767px) {
        .compare .textarea p {
          font-size: 1.3rem; } }

/* .content
----------------------------------------------------------------------*/
.content {
  padding: 6rem 0; }
  .content h2 {
    font-size: 4rem;
    text-align: center;
    margin: 0 0 4rem 0; }
  .content h3 {
    font-size: 2.2rem;
    margin: 0 0 2rem 0; }
  .content p {
    font-size: 1.5rem;
    padding: 0 0 1rem 0; }
  .content img {
    width: 100%; }
  .content .inner01 {
    display: flex;
    margin: 0rem 0; }
    .content .inner01 .txtsec {
      width: 50%; }
    .content .inner01 .imgsec {
      width: 50%;
      padding: 0 0 0 3%; }
  .content .inner02 {
    margin: 0rem 0; }
    .content .inner02 h3, .content .inner02 p {
      text-align: center; }
    .content .inner02 .txtsec {
      margin: 0 0 4rem 0; }
    .content .inner02 .imgsec {
      width: 70%;
      margin: 0 auto 4rem auto; }
  .content .column {
    width: 80.66%;
    margin: 0 auto 4rem auto;
    display: flex; }
    .content .column img {
      width: 50%;
      margin: 2rem auto; }
    .content .column dl {
      width: 31.33%;
      margin: 0  1%;
      padding: 0;
      border-radius: 5px;
      box-shadow: 0 1px 4px #DDD;
      background: #F3FBFB; }
    .content .column dt {
      background: #daeaf1;
      font-weight: bold;
      border-radius: 5px 5px 0 0;
      padding: 1rem 2rem;
      margin: 0;
      text-align: center; }
    .content .column dd {
      margin: 0;
      padding: 0 2rem 2rem 2rem;
      line-height: 1.6; }

/* .category-article
----------------------------------------------------------------------*/
.category-article {
  background: url(../img/mainvisual/keyboard.jpg) no-repeat;
  background-size: cover;
  background-color: #f7fafB; }
  .category-article .inner {
    padding: 4rem 0 6rem 0;
    width: 810px; }
    @media only screen and (max-width: 767px) {
      .category-article .inner {
        padding: 3rem 0 4rem;
        width: 100%; } }
  .category-article article {
    background: #FFF;
    font-size: 1.6rem;
    line-height: 1.95;
    letter-spacing: 0.05em;
    padding: 1rem 6rem; }
    @media only screen and (max-width: 767px) {
      .category-article article {
        padding: 1rem 1.5rem; } }
  .category-article h2 {
    font-size: 3.5rem;
    padding: 3rem 0 4rem 0;
    text-align: center;
    line-height: 1.2;
    text-shadow: 1px 1px 2px #fff; }
    @media only screen and (max-width: 767px) {
      .category-article h2 {
        font-size: 2.5rem;
        padding: 0.5rem 1.5rem 3rem; } }
  .category-article h3 {
    font-size: 2.5rem;
    line-height: 1.5;
    margin: 3rem 0 2rem 0;
    padding: 0.5rem 8%; }
    @media only screen and (max-width: 767px) {
      .category-article h3 {
        font-size: 2rem;
        margin: 3.5rem 0 2.5rem;
        padding: 0 1.5rem; } }
  .category-article h4 {
    font-size: 2rem;
    margin: 2rem 0; }
    @media only screen and (max-width: 767px) {
      .category-article h4 {
        font-size: 1.8rem; } }
  .category-article p {
    font-size: 1.6rem;
    line-height: 1.95;
    letter-spacing: 0.05em;
    margin: 2rem 0;
    padding: 0.5rem 0; }
    @media only screen and (max-width: 767px) {
      .category-article p {
        font-size: 1.5rem;
        margin: 1rem 0; } }
  .category-article .waku {
    background: #f5f5f5;
    border: none;
    margin: 2rem 0;
    padding: 2rem; }
    @media only screen and (max-width: 767px) {
      .category-article .waku {
        padding: 1rem 1.5rem; } }
  .category-article .txt-waku {
    border: 3px solid #53b4c5;
    margin: 2rem 0;
    padding: 2rem; }
    @media only screen and (max-width: 767px) {
      .category-article .txt-waku {
        padding: 1rem 1.5rem; } }
  .category-article .waku-kuro {
    background: #fff;
    border: 1px solid #333;
    margin: 2rem 0;
    padding: 2rem; }
    @media only screen and (max-width: 767px) {
      .category-article .waku-kuro {
        padding: 1rem 1.5rem; } }
  .category-article ul {
    padding-left: 2rem; }
    .category-article ul li {
      font-size: 1.6rem;
      list-style: disc; }
      @media only screen and (max-width: 767px) {
        .category-article ul li {
          font-size: 1.5rem; } }
  .category-article ol {
    padding-left: 2rem; }
    .category-article ol li {
      font-size: 1.6rem;
      list-style: decimal; }
      @media only screen and (max-width: 767px) {
        .category-article ol li {
          font-size: 1.5rem; } }
  .category-article.bg-grid {
    background: url(../img/common/bg-grid.png) repeat;
    background-size: 20px; }
    .category-article.bg-grid h2 {
      color: #050d5c;
      padding: 3rem 0; }
      @media only screen and (max-width: 767px) {
        .category-article.bg-grid h2 {
          padding: 0.5rem 1.5rem 3rem; } }
    .category-article.bg-grid article {
      border: 5px solid #D8EBF2;
      box-shadow: 0 8px 8px -10px #aaa; }

/* .rank
----------------------------------------------------------------------*/
.rank .box {
  border: 1px solid #DDD;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 1px 4px #DDD;
  margin: 0rem 0 3rem 0;
  border-top: 5px solid #0049b2; }
  .rank .box .title {
    background: #FFF;
    border-radius: 4px 4px 0 0;
    line-height: 1;
    margin: 0 0 -1rem 0;
    border-bottom: 1px solid #CCC; }
    .rank .box .title h3 {
      font-size: 2.4rem;
      padding: 2rem 2rem 2rem 7.5rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .title h3 {
          font-size: 1.8rem; } }
    .rank .box .title a {
      color: #222;
      font-size: 2.4rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .title a {
          font-size: 1.8rem; } }
    .rank .box .title .icon {
      background-size: 4rem;
      background-repeat: no-repeat;
      background-position: 2rem; }
    .rank .box .title .iconimg-1 {
      background-image: url(../img/ico_rank01.png); }
    .rank .box .title .iconimg-2 {
      background-image: url(../img/ico_rank02.png); }
    .rank .box .title .iconimg-3 {
      background-image: url(../img/ico_rank03.png); }
    .rank .box .title .iconimg-4 {
      background-image: url(../img/ico_rank04.png); }
    .rank .box .title .iconimg-5 {
      background-image: url(../img/ico_rank05.png); }
    .rank .box .title .iconimg-6 {
      background-image: url(../img/ico_rank06.png); }
    .rank .box .title .iconimg-7 {
      background-image: url(../img/ico_rank07.png); }
    .rank .box .title .iconimg-8 {
      background-image: url(../img/ico_rank08.png); }
    .rank .box .title .iconimg-9 {
      background-image: url(../img/ico_rank09.png); }
  .rank .box .banner {
    margin: 0 0 0 2rem;
    width: 24%;
    float: left;
    background: #F2FEFE;
    /*img{width:160px;height:160px;}*/ }
    @media only screen and (max-width: 767px) {
      .rank .box .banner {
        width: 30%; } }
  .rank .box .skill {
    width: 67%;
    float: right;
    background: #f3f3f3;
    margin: 0 2rem 0 0;
    border-radius: 5px; }
    @media only screen and (max-width: 767px) {
      .rank .box .skill {
        background: none;
        width: 54%; } }
    .rank .box .skill h3 {
      font-size: 1.8rem;
      padding: 1.5rem 2rem 1rem 2rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .skill h3 {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          padding: 0; } }
    .rank .box .skill ul {
      display: flex;
      padding: 0rem 1rem 1.5rem 1rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .skill ul {
          display: inherit;
          overflow: hidden;
          padding: 0; } }
    .rank .box .skill li {
      width: 20%;
      border: 1px solid #9C9EB1;
      background: #FFF;
      border-radius: 5px;
      text-align: center;
      font-size: 1rem;
      margin: 0 0.5rem;
      padding: 1rem 0.5rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .skill li {
          float: left;
          width: 49%;
          margin: 0 0 0.5rem 0;
          padding: 0;
          position: relative;
          font-size: 1.1rem;
          padding: .8rem .5rem .8rem 3rem;
          text-align: left; } }
      .rank .box .skill li.off {
        border: 1px solid #ddd;
        color: #ddd; }
        .rank .box .skill li.off img {
          opacity: 0.4; }
      @media only screen and (max-width: 767px) {
        .rank .box .skill li:nth-child(odd) {
          margin-right: 2%; } }
      .rank .box .skill li img {
        width: 55%;
        margin: 0 auto 1rem auto; }
        @media only screen and (max-width: 767px) {
          .rank .box .skill li img {
            line-height: 1.3;
            position: absolute;
            height: 25px;
            left: 3px;
            top: 1px;
            margin: 0;
            width: 25px; } }
  .rank .box .point {
    margin: 2rem;
    border-radius: 5px;
    background: #FCFDFD;
    box-shadow: 0 1px 4px #DDD;
    border: 1px solid #DDD;
    letter-spacing: 0.05em; }
    .rank .box .point h3 {
      padding: 1rem 2rem;
      font-size: 1.8rem;
      background: #cdeefd;
      line-height: 1.2;
      margin: 0 0 1rem 0;
      border-radius: 5px 5px 0 0; }
      @media only screen and (max-width: 767px) {
        .rank .box .point h3 {
          font-size: 1.4rem;
          margin: 0;
          padding: 1rem 1.5rem; } }
    .rank .box .point ul {
      padding: 0 1rem 1rem 1rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .point ul {
          padding: 1rem 1.5rem; } }
    .rank .box .point li {
      font-size: 1.6rem;
      line-height: 1.4;
      padding: 0.25rem 3rem;
      margin: 0 0 0 1rem;
      background: url(../img/common/ico_check.png) left 0.7rem no-repeat;
      background-size: 1.5rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .point li {
          font-size: 1.3rem;
          padding: 0 0 0 2.3rem;
          margin: 0 0 1rem;
          background: url(../img/common/ico_check.png) left 0.3rem no-repeat;
          background-size: 1.3rem; } }
      .rank .box .point li:last-child {
        margin-bottom: 0; }
  .rank .box .maintext {
    margin: 0 2rem;
    background: #F3FBFB; }
    .rank .box .maintext h3 {
      font-size: 1.8rem;
      border-radius: 5px 5px 0 0;
      line-height: 1.2;
      background: #daeaf1;
      padding: 1.5rem 2rem;
      margin: 0 0 2rem 0; }
      @media only screen and (max-width: 767px) {
        .rank .box .maintext h3 {
          font-size: 1.4rem;
          margin: 0 0 1rem 0; } }
    .rank .box .maintext p {
      line-height: 1.75;
      font-size: 1.4rem;
      letter-spacing: 0.05em;
      padding: 0 2rem 2rem 2rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .maintext p {
          font-size: 1.3rem;
          padding: 0 1.5rem 1rem 1.5rem; } }
  .rank .box .campain {
    margin: 2rem 2rem; }
    .rank .box .campain a {
      text-decoration: none;
      color: #222; }
    .rank .box .campain dl {
      border: 2px solid #f8a117;
      border-radius: 5px; }
    .rank .box .campain dt {
      background: #f8a117;
      padding: 1rem 2rem;
      border-radius: 3px 3px 0px 0px;
      color: #FFF;
      font-size: 1.8rem;
      font-weight: bold; }
      @media only screen and (max-width: 767px) {
        .rank .box .campain dt {
          font-size: 1.5rem;
          padding: .8rem 1.5rem 1rem; } }
    .rank .box .campain dd {
      padding: 1rem 2rem; }
      @media only screen and (max-width: 767px) {
        .rank .box .campain dd {
          padding: 1rem 1.5rem; } }
      .rank .box .campain dd img {
        margin: auto; }
      .rank .box .campain dd .txt-red {
        color: #FE3E3E;
        font-weight: 700; }
      .rank .box .campain dd p {
        font-size: 1.4rem; }
        .rank .box .campain dd p big {
          font-size: 1.5rem; }
        .rank .box .campain dd p small {
          font-size: 1.2rem;
          color: #999;
          line-height: 1.5;
          margin-top: .5rem;
          display: inline-block; }
    .rank .box .campain .sp-none, .rank .box .campain .pc-none {
      display: none; }
  .rank .box .spec {
    display: flex;
    margin: 0 2rem 2rem 2rem; }
    @media only screen and (max-width: 767px) {
      .rank .box .spec {
        display: inherit; } }
    .rank .box .spec table {
      border-top: 1px solid #DDD; }
    .rank .box .spec th {
      background: #F3F3F3;
      width: 40%;
      padding: 1rem;
      border-bottom: 1px solid #CCC;
      text-align: left; }
      @media only screen and (max-width: 767px) {
        .rank .box .spec th {
          font-size: 1.2rem;
          padding: .5rem 1rem;
          width: 30%; } }
    .rank .box .spec td {
      padding: 1rem;
      border-bottom: 1px solid #DDD; }
      @media only screen and (max-width: 767px) {
        .rank .box .spec td {
          padding: .5rem 1rem; } }
    .rank .box .spec .spec-l {
      width: 48.5%;
      margin: 0 1.5% 0 0; }
      @media only screen and (max-width: 767px) {
        .rank .box .spec .spec-l {
          width: 100%;
          margin: 0; } }
    .rank .box .spec .spec-r {
      width: 48.5%;
      margin: 0 0 0 1.5%; }
      @media only screen and (max-width: 767px) {
        .rank .box .spec .spec-r {
          width: 100%;
          margin: 0; } }
  .rank .box .button {
    margin: 2rem auto;
    text-align: center;
    clear: both; }
    .rank .box .button .cv {
      background: #e22c2c;
      border-radius: 4px;
      font-size: 2rem;
      display: inline-block;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #a10b0c;
      margin: 0 0 1.5rem 0; }
      .rank .box .button .cv a {
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 2rem 3rem; }
    .rank .box .button .link {
      background: #fecf00;
      border-radius: 4px;
      font-size: 2rem;
      display: inline-block;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #8e7400;
      margin: 0 0 1.5rem 0; }
      .rank .box .button .link a {
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 2rem 3rem; }
  .rank .box .button-flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 2rem; }
    .rank .box .button-flex .cv {
      flex-basis: 100%; }
      @media only screen and (max-width: 767px) {
        .rank .box .button-flex .cv a {
          padding: 2rem; } }
    .rank .box .button-flex .info {
      background: #bbb;
      border-radius: 4px;
      font-size: 1.6rem;
      display: inline-block;
      margin: 0 0.5rem 1.5rem 0;
      box-shadow: 0 4px 0 #777;
      flex-basis: 50%; }
      .rank .box .button-flex .info a {
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 2.1rem 3rem; }
        @media only screen and (max-width: 767px) {
          .rank .box .button-flex .info a {
            padding: 2rem;
            line-height: 1.2; } }

.lp-yss.webdesign .mainvisual img,
.lp-yss.video .mainvisual img,
.lp-yss.programming .mainvisual img {
  height: 360px; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .mainvisual img,
    .lp-yss.video .mainvisual img,
    .lp-yss.programming .mainvisual img {
      height: auto; } }
.lp-yss.webdesign .title-webdesign,
.lp-yss.video .title-webdesign,
.lp-yss.programming .title-webdesign {
  display: inline-block;
  position: relative;
  color: #B48F8F;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 0.1rem solid #b48f8f;
  margin: 0 .5rem;
  padding: .8rem 1rem;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .title-webdesign,
    .lp-yss.video .title-webdesign,
    .lp-yss.programming .title-webdesign {
      margin: 1rem 0 .5rem;
      font-size: 2rem; } }
  .lp-yss.webdesign .title-webdesign span,
  .lp-yss.video .title-webdesign span,
  .lp-yss.programming .title-webdesign span {
    display: flex;
    justify-content: center;
    align-items: center; }
  .lp-yss.webdesign .title-webdesign small,
  .lp-yss.video .title-webdesign small,
  .lp-yss.programming .title-webdesign small {
    background: #B48F8F;
    border-radius: 15px;
    color: #fff;
    font-size: 1.6rem;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0 0.2rem;
    padding: 0.5rem 1.5rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .title-webdesign small,
      .lp-yss.video .title-webdesign small,
      .lp-yss.programming .title-webdesign small {
        font-size: 1.4rem; } }
  .lp-yss.webdesign .title-webdesign::before,
  .lp-yss.video .title-webdesign::before,
  .lp-yss.programming .title-webdesign::before {
    position: absolute;
    left: 50%;
    bottom: -1rem;
    content: "";
    width: 1rem;
    height: 1rem;
    transform: translate(-50%);
    border-style: solid;
    border-width: 1rem 1rem 0 1rem;
    border-color: #b48f8f transparent transparent transparent; }
  .lp-yss.webdesign .title-webdesign-wrap,
  .lp-yss.video .title-webdesign-wrap,
  .lp-yss.programming .title-webdesign-wrap {
    margin: 1rem auto;
    width: 75%; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .title-webdesign-wrap,
      .lp-yss.video .title-webdesign-wrap,
      .lp-yss.programming .title-webdesign-wrap {
        width: 95%; } }
.lp-yss.webdesign .title-itengineer-point,
.lp-yss.video .title-itengineer-point,
.lp-yss.programming .title-itengineer-point {
  display: flex;
  justify-content: center; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .title-itengineer-point,
    .lp-yss.video .title-itengineer-point,
    .lp-yss.programming .title-itengineer-point {
      flex-direction: column;
      gap: 0.5rem; } }
.lp-yss.webdesign .type,
.lp-yss.video .type,
.lp-yss.programming .type {
  margin: 1.5rem auto 2rem; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .type,
    .lp-yss.video .type,
    .lp-yss.programming .type {
      margin: .5rem auto 1rem;
      padding: 0 .5rem; } }
  .lp-yss.webdesign .type-ttl,
  .lp-yss.video .type-ttl,
  .lp-yss.programming .type-ttl {
    max-width: 500px;
    margin: auto; }
  .lp-yss.webdesign .type-list,
  .lp-yss.video .type-list,
  .lp-yss.programming .type-list {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .type-list,
      .lp-yss.video .type-list,
      .lp-yss.programming .type-list {
        margin-top: .5rem;
        flex-direction: column;
        gap: 1rem; } }
    .lp-yss.webdesign .type-list-inner,
    .lp-yss.video .type-list-inner,
    .lp-yss.programming .type-list-inner {
      width: 24%; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .type-list-inner,
        .lp-yss.video .type-list-inner,
        .lp-yss.programming .type-list-inner {
          width: 100%; } }
      .lp-yss.webdesign .type-list-inner-ttl,
      .lp-yss.video .type-list-inner-ttl,
      .lp-yss.programming .type-list-inner-ttl {
        padding: 1rem .5rem;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 1rem;
        background-color: #050d5c;
        border-radius: 20px 20px 0 0; }
        .lp-yss.webdesign .type-list-inner-ttl-big,
        .lp-yss.video .type-list-inner-ttl-big,
        .lp-yss.programming .type-list-inner-ttl-big {
          font-size: 1.5rem; }
        .lp-yss.webdesign .type-list-inner-ttl-y,
        .lp-yss.video .type-list-inner-ttl-y,
        .lp-yss.programming .type-list-inner-ttl-y {
          background-color: #fecf00; }
        .lp-yss.webdesign .type-list-inner-ttl-g,
        .lp-yss.video .type-list-inner-ttl-g,
        .lp-yss.programming .type-list-inner-ttl-g {
          background-color: #808080; }
        .lp-yss.webdesign .type-list-inner-ttl-w,
        .lp-yss.video .type-list-inner-ttl-w,
        .lp-yss.programming .type-list-inner-ttl-w {
          background-color: #daeaf1;
          color: #333; }
      .lp-yss.webdesign .type-list-inner-content,
      .lp-yss.video .type-list-inner-content,
      .lp-yss.programming .type-list-inner-content {
        padding: 1rem .5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 0.1rem solid #050d5c;
        border-top: none;
        background-color: #fff;
        border-radius: 0 0 20px 20px;
        height: 17rem;
        text-align: center;
        font-size: .9rem; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .type-list-inner-content,
          .lp-yss.video .type-list-inner-content,
          .lp-yss.programming .type-list-inner-content {
            padding: 1rem;
            height: auto; } }
        .lp-yss.webdesign .type-list-inner-content-y,
        .lp-yss.video .type-list-inner-content-y,
        .lp-yss.programming .type-list-inner-content-y {
          border: 0.1rem solid #fecf00;
          border-top: none; }
        .lp-yss.webdesign .type-list-inner-content-g,
        .lp-yss.video .type-list-inner-content-g,
        .lp-yss.programming .type-list-inner-content-g {
          border: 0.1rem solid #808080;
          border-top: none; }
        .lp-yss.webdesign .type-list-inner-content-w,
        .lp-yss.video .type-list-inner-content-w,
        .lp-yss.programming .type-list-inner-content-w {
          border: 0.1rem solid #daeaf1;
          border-top: none; }
        .lp-yss.webdesign .type-list-inner-content-wrap,
        .lp-yss.video .type-list-inner-content-wrap,
        .lp-yss.programming .type-list-inner-content-wrap {
          display: flex;
          flex-direction: column;
          gap: .5rem; }
          .lp-yss.webdesign .type-list-inner-content-wrap .logo,
          .lp-yss.video .type-list-inner-content-wrap .logo,
          .lp-yss.programming .type-list-inner-content-wrap .logo {
            width: 80%;
            margin: auto;
            position: inherit; }
            @media only screen and (max-width: 767px) {
              .lp-yss.webdesign .type-list-inner-content-wrap .logo,
              .lp-yss.video .type-list-inner-content-wrap .logo,
              .lp-yss.programming .type-list-inner-content-wrap .logo {
                width: 65%; } }
          .lp-yss.webdesign .type-list-inner-content-wrap-flex,
          .lp-yss.video .type-list-inner-content-wrap-flex,
          .lp-yss.programming .type-list-inner-content-wrap-flex {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            justify-content: center; }
        .lp-yss.webdesign .type-list-inner-content-copy,
        .lp-yss.video .type-list-inner-content-copy,
        .lp-yss.programming .type-list-inner-content-copy {
          width: 80%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.2rem; }
        .lp-yss.webdesign .type-list-inner-content-come,
        .lp-yss.video .type-list-inner-content-come,
        .lp-yss.programming .type-list-inner-content-come {
          font-size: .7rem;
          opacity: .4; }
        .lp-yss.webdesign .type-list-inner-content .img,
        .lp-yss.video .type-list-inner-content .img,
        .lp-yss.programming .type-list-inner-content .img {
          width: 60%;
          margin: auto; }
          .lp-yss.webdesign .type-list-inner-content .img-big,
          .lp-yss.video .type-list-inner-content .img-big,
          .lp-yss.programming .type-list-inner-content .img-big {
            width: 100%;
            margin: auto; }
        .lp-yss.webdesign .type-list-inner-content .name,
        .lp-yss.video .type-list-inner-content .name,
        .lp-yss.programming .type-list-inner-content .name {
          font-weight: bold;
          font-size: 1.2rem; }
      .lp-yss.webdesign .type-list-inner-copy,
      .lp-yss.video .type-list-inner-copy,
      .lp-yss.programming .type-list-inner-copy {
        width: 75%; }
      .lp-yss.webdesign .type-list-inner-cv,
      .lp-yss.video .type-list-inner-cv,
      .lp-yss.programming .type-list-inner-cv {
        width: 4rem;
        margin: .5rem auto;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center; }
        .lp-yss.webdesign .type-list-inner-cv:before,
        .lp-yss.video .type-list-inner-cv:before,
        .lp-yss.programming .type-list-inner-cv:before {
          position: absolute;
          content: '';
          display: inline-block;
          pointer-events: none;
          top: -180px;
          left: 0;
          width: 30px;
          height: 100%;
          background-color: #fff;
          animation: shiny-btn1 3s ease-in-out infinite; }
        .lp-yss.webdesign .type-list-inner-cv .cv,
        .lp-yss.video .type-list-inner-cv .cv,
        .lp-yss.programming .type-list-inner-cv .cv {
          width: 4rem;
          height: 4rem;
          display: flex;
          align-items: center;
          justify-content: center; }
          .lp-yss.webdesign .type-list-inner-cv .cv a,
          .lp-yss.video .type-list-inner-cv .cv a,
          .lp-yss.programming .type-list-inner-cv .cv a {
            padding: 0;
            text-shadow: none;
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            height: 100%; }
        .lp-yss.webdesign .type-list-inner-cv-btn,
        .lp-yss.video .type-list-inner-cv-btn,
        .lp-yss.programming .type-list-inner-cv-btn {
          padding: .5rem 2.2rem;
          font-size: 1.1rem; }
          @media only screen and (max-width: 767px) {
            .lp-yss.webdesign .type-list-inner-cv-btn,
            .lp-yss.video .type-list-inner-cv-btn,
            .lp-yss.programming .type-list-inner-cv-btn {
              padding: .5rem 3.5rem; } }
          .lp-yss.webdesign .type-list-inner-cv-btn:hover,
          .lp-yss.video .type-list-inner-cv-btn:hover,
          .lp-yss.programming .type-list-inner-cv-btn:hover {
            opacity: 1 !important; }
        .lp-yss.webdesign .type-list-inner-cv-txt,
        .lp-yss.video .type-list-inner-cv-txt,
        .lp-yss.programming .type-list-inner-cv-txt {
          color: #fff; }
        .lp-yss.webdesign .type-list-inner-cv-copy,
        .lp-yss.video .type-list-inner-cv-copy,
        .lp-yss.programming .type-list-inner-cv-copy {
          font-size: 1rem;
          margin: .5rem auto 0; }
@media only screen and (max-width: 767px) {
  .lp-yss.webdesign .type.webdesign,
  .lp-yss.video .type.webdesign,
  .lp-yss.programming .type.webdesign {
    margin: .5rem auto 4rem; } }
.lp-yss.webdesign .type.webdesign .type-list-inner-ttl,
.lp-yss.video .type.webdesign .type-list-inner-ttl,
.lp-yss.programming .type.webdesign .type-list-inner-ttl {
  background-color: #cf8080; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-ttl-y,
  .lp-yss.video .type.webdesign .type-list-inner-ttl-y,
  .lp-yss.programming .type.webdesign .type-list-inner-ttl-y {
    background-color: #fecf00; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-ttl-g,
  .lp-yss.video .type.webdesign .type-list-inner-ttl-g,
  .lp-yss.programming .type.webdesign .type-list-inner-ttl-g {
    background-color: #808080; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-ttl-w,
  .lp-yss.video .type.webdesign .type-list-inner-ttl-w,
  .lp-yss.programming .type.webdesign .type-list-inner-ttl-w {
    background-color: #ecdcdc;
    color: #333; }
.lp-yss.webdesign .type.webdesign .type-list-inner-content,
.lp-yss.video .type.webdesign .type-list-inner-content,
.lp-yss.programming .type.webdesign .type-list-inner-content {
  border: 0.1rem solid #cf8080;
  border-top: none; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-content-y,
  .lp-yss.video .type.webdesign .type-list-inner-content-y,
  .lp-yss.programming .type.webdesign .type-list-inner-content-y {
    border: 0.1rem solid #fecf00;
    border-top: none; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-content-g,
  .lp-yss.video .type.webdesign .type-list-inner-content-g,
  .lp-yss.programming .type.webdesign .type-list-inner-content-g {
    border: 0.1rem solid #808080;
    border-top: none; }
  .lp-yss.webdesign .type.webdesign .type-list-inner-content-w,
  .lp-yss.video .type.webdesign .type-list-inner-content-w,
  .lp-yss.programming .type.webdesign .type-list-inner-content-w {
    border: 0.1rem solid #ecdcdc;
    border-top: none; }
.lp-yss.webdesign .type.video,
.lp-yss.video .type.video,
.lp-yss.programming .type.video {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", sans-serif; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .type.video,
    .lp-yss.video .type.video,
    .lp-yss.programming .type.video {
      margin: .5rem auto 4rem; } }
  .lp-yss.webdesign .type.video .type-list-inner-ttl,
  .lp-yss.video .type.video .type-list-inner-ttl,
  .lp-yss.programming .type.video .type-list-inner-ttl {
    background-color: #4e4e4e; }
    .lp-yss.webdesign .type.video .type-list-inner-ttl-y,
    .lp-yss.video .type.video .type-list-inner-ttl-y,
    .lp-yss.programming .type.video .type-list-inner-ttl-y {
      background-color: #fff000;
      color: #333; }
    .lp-yss.webdesign .type.video .type-list-inner-ttl-g,
    .lp-yss.video .type.video .type-list-inner-ttl-g,
    .lp-yss.programming .type.video .type-list-inner-ttl-g {
      background-color: #d284c9;
      color: #fff; }
    .lp-yss.webdesign .type.video .type-list-inner-ttl-w,
    .lp-yss.video .type.video .type-list-inner-ttl-w,
    .lp-yss.programming .type.video .type-list-inner-ttl-w {
      background-color: #8eb6bb; }
  .lp-yss.webdesign .type.video .type-list-inner-content,
  .lp-yss.video .type.video .type-list-inner-content,
  .lp-yss.programming .type.video .type-list-inner-content {
    border: none; }
    .lp-yss.webdesign .type.video .type-list-inner-content-y,
    .lp-yss.video .type.video .type-list-inner-content-y,
    .lp-yss.programming .type.video .type-list-inner-content-y {
      border: none; }
    .lp-yss.webdesign .type.video .type-list-inner-content-g,
    .lp-yss.video .type.video .type-list-inner-content-g,
    .lp-yss.programming .type.video .type-list-inner-content-g {
      border: none; }
    .lp-yss.webdesign .type.video .type-list-inner-content-w,
    .lp-yss.video .type.video .type-list-inner-content-w,
    .lp-yss.programming .type.video .type-list-inner-content-w {
      border: none; }
.lp-yss.webdesign .neotype,
.lp-yss.video .neotype,
.lp-yss.programming .neotype {
  margin: 1.5rem auto; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .neotype,
    .lp-yss.video .neotype,
    .lp-yss.programming .neotype {
      margin: .5rem auto; } }
  .lp-yss.webdesign .neotype-ttl,
  .lp-yss.video .neotype-ttl,
  .lp-yss.programming .neotype-ttl {
    max-width: 500px;
    margin: auto; }
  .lp-yss.webdesign .neotype-list,
  .lp-yss.video .neotype-list,
  .lp-yss.programming .neotype-list {
    margin-top: 4rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .neotype-list,
      .lp-yss.video .neotype-list,
      .lp-yss.programming .neotype-list {
        margin-top: 3rem;
        flex-direction: column;
        gap: 4rem; } }
    .lp-yss.webdesign .neotype-list-inner,
    .lp-yss.video .neotype-list-inner,
    .lp-yss.programming .neotype-list-inner {
      position: relative;
      width: 32%;
      background-color: #fdf8f3;
      border-radius: 10px;
      box-shadow: 0px 5px 15px -3px rgba(0, 0, 0, 0.1); }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .neotype-list-inner,
        .lp-yss.video .neotype-list-inner,
        .lp-yss.programming .neotype-list-inner {
          width: 100%; } }
      .lp-yss.webdesign .neotype-list-inner-1,
      .lp-yss.video .neotype-list-inner-1,
      .lp-yss.programming .neotype-list-inner-1 {
        border: 4px solid #fff847; }
        .lp-yss.webdesign .neotype-list-inner-1 .neotype-list-inner-ttl,
        .lp-yss.video .neotype-list-inner-1 .neotype-list-inner-ttl,
        .lp-yss.programming .neotype-list-inner-1 .neotype-list-inner-ttl {
          position: relative; }
          .lp-yss.webdesign .neotype-list-inner-1 .neotype-list-inner-ttl:before,
          .lp-yss.video .neotype-list-inner-1 .neotype-list-inner-ttl:before,
          .lp-yss.programming .neotype-list-inner-1 .neotype-list-inner-ttl:before {
            position: absolute;
            z-index: 1;
            top: -3rem;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 5rem;
            height: 5rem;
            content: '';
            background: url(../img/icon/ico-rank01.png) no-repeat;
            background-size: contain; }
      .lp-yss.webdesign .neotype-list-inner-2 .neotype-list-inner-ttl,
      .lp-yss.video .neotype-list-inner-2 .neotype-list-inner-ttl,
      .lp-yss.programming .neotype-list-inner-2 .neotype-list-inner-ttl {
        position: relative; }
        .lp-yss.webdesign .neotype-list-inner-2 .neotype-list-inner-ttl:before,
        .lp-yss.video .neotype-list-inner-2 .neotype-list-inner-ttl:before,
        .lp-yss.programming .neotype-list-inner-2 .neotype-list-inner-ttl:before {
          position: absolute;
          z-index: 1;
          top: -3rem;
          left: 50%;
          transform: translateX(-50%);
          display: inline-block;
          width: 5rem;
          height: 5rem;
          content: '';
          background: url(../img/icon/ico-rank02.png) no-repeat;
          background-size: contain; }
      .lp-yss.webdesign .neotype-list-inner-3 .neotype-list-inner-ttl,
      .lp-yss.video .neotype-list-inner-3 .neotype-list-inner-ttl,
      .lp-yss.programming .neotype-list-inner-3 .neotype-list-inner-ttl {
        position: relative; }
        .lp-yss.webdesign .neotype-list-inner-3 .neotype-list-inner-ttl:before,
        .lp-yss.video .neotype-list-inner-3 .neotype-list-inner-ttl:before,
        .lp-yss.programming .neotype-list-inner-3 .neotype-list-inner-ttl:before {
          position: absolute;
          z-index: 1;
          top: -3rem;
          left: 50%;
          transform: translateX(-50%);
          display: inline-block;
          width: 5rem;
          height: 5rem;
          content: '';
          background: url(../img/icon/ico-rank03.png) no-repeat;
          background-size: contain; }
      .lp-yss.webdesign .neotype-list-inner-ttl,
      .lp-yss.video .neotype-list-inner-ttl,
      .lp-yss.programming .neotype-list-inner-ttl {
        position: relative;
        padding: 2rem 1rem 1.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 10px; }
        .lp-yss.webdesign .neotype-list-inner-ttl:after,
        .lp-yss.video .neotype-list-inner-ttl:after,
        .lp-yss.programming .neotype-list-inner-ttl:after {
          position: absolute;
          z-index: 1;
          display: inline-block;
          bottom: -2.1rem;
          left: 0;
          width: 100%;
          height: 3rem;
          content: '';
          background: url(../img/lp/neotype_line.png;) no-repeat;
          background-size: contain; }
        .lp-yss.webdesign .neotype-list-inner-ttl-copy,
        .lp-yss.video .neotype-list-inner-ttl-copy,
        .lp-yss.programming .neotype-list-inner-ttl-copy {
          font-size: 1.5rem;
          font-weight: bold; }
        .lp-yss.webdesign .neotype-list-inner-ttl-star,
        .lp-yss.video .neotype-list-inner-ttl-star,
        .lp-yss.programming .neotype-list-inner-ttl-star {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: .8rem; }
          .lp-yss.webdesign .neotype-list-inner-ttl-star-name,
          .lp-yss.video .neotype-list-inner-ttl-star-name,
          .lp-yss.programming .neotype-list-inner-ttl-star-name {
            width: 20%;
            text-align: right; }
          .lp-yss.webdesign .neotype-list-inner-ttl-star-img,
          .lp-yss.video .neotype-list-inner-ttl-star-img,
          .lp-yss.programming .neotype-list-inner-ttl-star-img {
            width: 38%; }
          .lp-yss.webdesign .neotype-list-inner-ttl-star-eval,
          .lp-yss.video .neotype-list-inner-ttl-star-eval,
          .lp-yss.programming .neotype-list-inner-ttl-star-eval {
            width: 20%; }
            .lp-yss.webdesign .neotype-list-inner-ttl-star-eval-big,
            .lp-yss.video .neotype-list-inner-ttl-star-eval-big,
            .lp-yss.programming .neotype-list-inner-ttl-star-eval-big {
              font-size: 1.8rem;
              font-weight: bold; }
        .lp-yss.webdesign .neotype-list-inner-ttl-name,
        .lp-yss.video .neotype-list-inner-ttl-name,
        .lp-yss.programming .neotype-list-inner-ttl-name {
          font-size: 2.3rem;
          text-decoration: underline #349FE8;
          transition: 0.3s; }
          .lp-yss.webdesign .neotype-list-inner-ttl-name:hover,
          .lp-yss.video .neotype-list-inner-ttl-name:hover,
          .lp-yss.programming .neotype-list-inner-ttl-name:hover {
            text-decoration: underline #060a3a; }
      .lp-yss.webdesign .neotype-list-inner-content,
      .lp-yss.video .neotype-list-inner-content,
      .lp-yss.programming .neotype-list-inner-content {
        padding: 2.5rem 1rem 4.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .neotype-list-inner-content,
          .lp-yss.video .neotype-list-inner-content,
          .lp-yss.programming .neotype-list-inner-content {
            padding: 2.5rem 1rem 5.5rem; } }
        .lp-yss.webdesign .neotype-list-inner-content-spec,
        .lp-yss.video .neotype-list-inner-content-spec,
        .lp-yss.programming .neotype-list-inner-content-spec {
          display: flex;
          justify-content: center;
          gap: .2rem; }
          .lp-yss.webdesign .neotype-list-inner-content-spec-inner,
          .lp-yss.video .neotype-list-inner-content-spec-inner,
          .lp-yss.programming .neotype-list-inner-content-spec-inner {
            width: 100%;
            background-color: #fff; }
            .lp-yss.webdesign .neotype-list-inner-content-spec-inner-dt,
            .lp-yss.video .neotype-list-inner-content-spec-inner-dt,
            .lp-yss.programming .neotype-list-inner-content-spec-inner-dt {
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              background-color: #000064;
              color: #fff;
              font-weight: bold;
              padding: .5rem; }
            .lp-yss.webdesign .neotype-list-inner-content-spec-inner-dd,
            .lp-yss.video .neotype-list-inner-content-spec-inner-dd,
            .lp-yss.programming .neotype-list-inner-content-spec-inner-dd {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: .5rem;
              padding: .5rem;
              background-color: #fff; }
              .lp-yss.webdesign .neotype-list-inner-content-spec-inner-dd .eval-mark,
              .lp-yss.video .neotype-list-inner-content-spec-inner-dd .eval-mark,
              .lp-yss.programming .neotype-list-inner-content-spec-inner-dd .eval-mark {
                width: 30%;
                display: flex; }
              .lp-yss.webdesign .neotype-list-inner-content-spec-inner-dd .txt,
              .lp-yss.video .neotype-list-inner-content-spec-inner-dd .txt,
              .lp-yss.programming .neotype-list-inner-content-spec-inner-dd .txt {
                font-size: 1.2rem;
                text-align: center; }
        .lp-yss.webdesign .neotype-list-inner-content-point,
        .lp-yss.video .neotype-list-inner-content-point,
        .lp-yss.programming .neotype-list-inner-content-point {
          padding: 1rem .5rem;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          gap: 1rem; }
        .lp-yss.webdesign .neotype-list-inner-content-cv,
        .lp-yss.video .neotype-list-inner-content-cv,
        .lp-yss.programming .neotype-list-inner-content-cv {
          width: 100%; }
          .lp-yss.webdesign .neotype-list-inner-content-cv-btn,
          .lp-yss.video .neotype-list-inner-content-cv-btn,
          .lp-yss.programming .neotype-list-inner-content-cv-btn {
            width: 80%; }
      .lp-yss.webdesign .neotype-list-inner-link,
      .lp-yss.video .neotype-list-inner-link,
      .lp-yss.programming .neotype-list-inner-link {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; }
        .lp-yss.webdesign .neotype-list-inner-link-btn,
        .lp-yss.video .neotype-list-inner-link-btn,
        .lp-yss.programming .neotype-list-inner-link-btn {
          border-radius: 0 0 5px 5px;
          display: inline-block;
          width: 100%;
          background-color: #d8d7d8;
          padding: 1rem;
          font-size: 1.6rem;
          font-weight: bold;
          text-align: center;
          color: #0d0802; }
          .lp-yss.webdesign .neotype-list-inner-link-btn-txt,
          .lp-yss.video .neotype-list-inner-link-btn-txt,
          .lp-yss.programming .neotype-list-inner-link-btn-txt {
            position: relative; }
            .lp-yss.webdesign .neotype-list-inner-link-btn-txt:before,
            .lp-yss.video .neotype-list-inner-link-btn-txt:before,
            .lp-yss.programming .neotype-list-inner-link-btn-txt:before {
              position: absolute;
              top: 50%;
              left: -1.5rem;
              transform: translateY(-50%);
              content: '';
              width: 0;
              height: 0;
              border-style: solid;
              border-right: 5px solid transparent;
              border-left: 5px solid transparent;
              border-top: 7.5px solid #0d0802;
              border-bottom: 0;
              transition: .3s; }
            .lp-yss.webdesign .neotype-list-inner-link-btn-txt:after,
            .lp-yss.video .neotype-list-inner-link-btn-txt:after,
            .lp-yss.programming .neotype-list-inner-link-btn-txt:after {
              position: absolute;
              top: 50%;
              right: -1.5rem;
              transform: translateY(-50%);
              content: '';
              width: 0;
              height: 0;
              border-style: solid;
              border-right: 5px solid transparent;
              border-left: 5px solid transparent;
              border-top: 7.5px solid #0d0802;
              border-bottom: 0;
              transition: .3s; }
.lp-yss.webdesign .hikaku,
.lp-yss.video .hikaku,
.lp-yss.programming .hikaku {
  margin: 1rem 0; }
  .lp-yss.webdesign .hikaku-container,
  .lp-yss.video .hikaku-container,
  .lp-yss.programming .hikaku-container {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 1.5rem 0 3rem;
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1.5fr 0.6fr .8fr 0.6fr;
    grid-template-rows: 0.2fr 0.2fr 0.2fr 1fr 0.5fr 1.5fr;
    gap: .2rem;
    grid-template-areas: ". ttl-online ttl-online ttl-selfstudy ttl-selfstudy ttl-selfstudy" "ttl-studystyle resson movie books studysite moviesite" "ttl-price resson-price movie-price books-price studysite-price moviesite-price" "ttl-merit resson-merit movie-merit selfstudy-merit selfstudy-merit selfstudy-merit" "ttl-demerit resson-demerit movie-demerit selfstudy-demerit selfstudy-demerit selfstudy-demerit" "ttl-osusume resson-osusume movie-osusume bs-osusume bs-osusume moviesite-osusume"; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .hikaku-container,
      .lp-yss.video .hikaku-container,
      .lp-yss.programming .hikaku-container {
        grid-template-columns: 5rem 15rem 15rem 6rem 8rem 6rem;
        padding: 0 .5rem;
        margin: 1rem 0 1.5rem; } }
    .lp-yss.webdesign .hikaku-container .txt-color,
    .lp-yss.video .hikaku-container .txt-color,
    .lp-yss.programming .hikaku-container .txt-color {
      color: #cf8080;
      font-weight: bold; }
    .lp-yss.webdesign .hikaku-container .txt-bold,
    .lp-yss.video .hikaku-container .txt-bold,
    .lp-yss.programming .hikaku-container .txt-bold {
      font-weight: bold; }
    .lp-yss.webdesign .hikaku-container .l-size,
    .lp-yss.video .hikaku-container .l-size,
    .lp-yss.programming .hikaku-container .l-size {
      font-size: 1.8rem;
      font-weight: bold;
      padding: 0 .2rem .3rem; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .hikaku-container .l-size,
        .lp-yss.video .hikaku-container .l-size,
        .lp-yss.programming .hikaku-container .l-size {
          font-size: 1.4rem;
          padding: 0; } }
    .lp-yss.webdesign .hikaku-container .flex,
    .lp-yss.video .hikaku-container .flex,
    .lp-yss.programming .hikaku-container .flex {
      display: flex;
      justify-content: center;
      align-items: center; }
    .lp-yss.webdesign .hikaku-container .ttl-online,
    .lp-yss.video .hikaku-container .ttl-online,
    .lp-yss.programming .hikaku-container .ttl-online {
      grid-area: ttl-online;
      font-weight: bold;
      font-size: 1.8rem;
      color: #cf8080; }
      .lp-yss.webdesign .hikaku-container .ttl-online .osusume-batch,
      .lp-yss.video .hikaku-container .ttl-online .osusume-batch,
      .lp-yss.programming .hikaku-container .ttl-online .osusume-batch {
        position: relative; }
        .lp-yss.webdesign .hikaku-container .ttl-online .osusume-batch:before,
        .lp-yss.video .hikaku-container .ttl-online .osusume-batch:before,
        .lp-yss.programming .hikaku-container .ttl-online .osusume-batch:before {
          position: absolute;
          top: -2rem;
          left: -6.5rem;
          content: '';
          display: inline-block;
          width: 6rem;
          height: 5rem;
          padding-right: 1rem;
          background: url(../img/lp/osusume_icon.png) no-repeat;
          background-size: contain;
          overflow: initial; }
          @media only screen and (max-width: 767px) {
            .lp-yss.webdesign .hikaku-container .ttl-online .osusume-batch:before,
            .lp-yss.video .hikaku-container .ttl-online .osusume-batch:before,
            .lp-yss.programming .hikaku-container .ttl-online .osusume-batch:before {
              top: -.5rem; } }
    .lp-yss.webdesign .hikaku-container .ttl-selfstudy,
    .lp-yss.video .hikaku-container .ttl-selfstudy,
    .lp-yss.programming .hikaku-container .ttl-selfstudy {
      grid-area: ttl-selfstudy;
      font-weight: bold;
      font-size: 1.4rem; }
    .lp-yss.webdesign .hikaku-container .ttl-studystyle,
    .lp-yss.video .hikaku-container .ttl-studystyle,
    .lp-yss.programming .hikaku-container .ttl-studystyle {
      grid-area: ttl-studystyle; }
    .lp-yss.webdesign .hikaku-container .ttl-price,
    .lp-yss.video .hikaku-container .ttl-price,
    .lp-yss.programming .hikaku-container .ttl-price {
      grid-area: ttl-price; }
    .lp-yss.webdesign .hikaku-container .ttl-merit,
    .lp-yss.video .hikaku-container .ttl-merit,
    .lp-yss.programming .hikaku-container .ttl-merit {
      grid-area: ttl-merit; }
    .lp-yss.webdesign .hikaku-container .ttl-demerit,
    .lp-yss.video .hikaku-container .ttl-demerit,
    .lp-yss.programming .hikaku-container .ttl-demerit {
      grid-area: ttl-demerit; }
    .lp-yss.webdesign .hikaku-container .ttl-osusume,
    .lp-yss.video .hikaku-container .ttl-osusume,
    .lp-yss.programming .hikaku-container .ttl-osusume {
      grid-area: ttl-osusume; }
    .lp-yss.webdesign .hikaku-container .resson,
    .lp-yss.video .hikaku-container .resson,
    .lp-yss.programming .hikaku-container .resson {
      grid-area: resson; }
    .lp-yss.webdesign .hikaku-container .movie,
    .lp-yss.video .hikaku-container .movie,
    .lp-yss.programming .hikaku-container .movie {
      grid-area: movie; }
    .lp-yss.webdesign .hikaku-container .books,
    .lp-yss.video .hikaku-container .books,
    .lp-yss.programming .hikaku-container .books {
      grid-area: books; }
    .lp-yss.webdesign .hikaku-container .studysite,
    .lp-yss.video .hikaku-container .studysite,
    .lp-yss.programming .hikaku-container .studysite {
      grid-area: studysite; }
    .lp-yss.webdesign .hikaku-container .moviesite,
    .lp-yss.video .hikaku-container .moviesite,
    .lp-yss.programming .hikaku-container .moviesite {
      grid-area: moviesite; }
    .lp-yss.webdesign .hikaku-container .resson-price,
    .lp-yss.video .hikaku-container .resson-price,
    .lp-yss.programming .hikaku-container .resson-price {
      grid-area: resson-price; }
    .lp-yss.webdesign .hikaku-container .movie-price,
    .lp-yss.video .hikaku-container .movie-price,
    .lp-yss.programming .hikaku-container .movie-price {
      grid-area: movie-price; }
    .lp-yss.webdesign .hikaku-container .books-price,
    .lp-yss.video .hikaku-container .books-price,
    .lp-yss.programming .hikaku-container .books-price {
      grid-area: books-price; }
    .lp-yss.webdesign .hikaku-container .studysite-price,
    .lp-yss.video .hikaku-container .studysite-price,
    .lp-yss.programming .hikaku-container .studysite-price {
      grid-area: studysite-price; }
    .lp-yss.webdesign .hikaku-container .moviesite-price,
    .lp-yss.video .hikaku-container .moviesite-price,
    .lp-yss.programming .hikaku-container .moviesite-price {
      grid-area: moviesite-price; }
    .lp-yss.webdesign .hikaku-container .resson-merit,
    .lp-yss.video .hikaku-container .resson-merit,
    .lp-yss.programming .hikaku-container .resson-merit {
      grid-area: resson-merit;
      text-align: left; }
    .lp-yss.webdesign .hikaku-container .movie-merit,
    .lp-yss.video .hikaku-container .movie-merit,
    .lp-yss.programming .hikaku-container .movie-merit {
      grid-area: movie-merit;
      text-align: left; }
    .lp-yss.webdesign .hikaku-container .selfstudy-merit,
    .lp-yss.video .hikaku-container .selfstudy-merit,
    .lp-yss.programming .hikaku-container .selfstudy-merit {
      grid-area: selfstudy-merit;
      text-align: left; }
    .lp-yss.webdesign .hikaku-container .resson-demerit,
    .lp-yss.video .hikaku-container .resson-demerit,
    .lp-yss.programming .hikaku-container .resson-demerit {
      grid-area: resson-demerit; }
    .lp-yss.webdesign .hikaku-container .movie-demerit,
    .lp-yss.video .hikaku-container .movie-demerit,
    .lp-yss.programming .hikaku-container .movie-demerit {
      grid-area: movie-demerit; }
    .lp-yss.webdesign .hikaku-container .selfstudy-demerit,
    .lp-yss.video .hikaku-container .selfstudy-demerit,
    .lp-yss.programming .hikaku-container .selfstudy-demerit {
      grid-area: selfstudy-demerit;
      text-align: left; }
    .lp-yss.webdesign .hikaku-container .resson-osusume,
    .lp-yss.video .hikaku-container .resson-osusume,
    .lp-yss.programming .hikaku-container .resson-osusume {
      grid-area: resson-osusume; }
    .lp-yss.webdesign .hikaku-container .movie-osusume,
    .lp-yss.video .hikaku-container .movie-osusume,
    .lp-yss.programming .hikaku-container .movie-osusume {
      grid-area: movie-osusume; }
    .lp-yss.webdesign .hikaku-container .bs-osusume,
    .lp-yss.video .hikaku-container .bs-osusume,
    .lp-yss.programming .hikaku-container .bs-osusume {
      grid-area: bs-osusume; }
    .lp-yss.webdesign .hikaku-container .moviesite-osusume,
    .lp-yss.video .hikaku-container .moviesite-osusume,
    .lp-yss.programming .hikaku-container .moviesite-osusume {
      grid-area: moviesite-osusume; }
    .lp-yss.webdesign .hikaku-container .bg-ttl,
    .lp-yss.video .hikaku-container .bg-ttl,
    .lp-yss.programming .hikaku-container .bg-ttl {
      background-color: #535353;
      color: #fff;
      font-weight: bold;
      padding: .5rem; }
    .lp-yss.webdesign .hikaku-container .bg-y,
    .lp-yss.video .hikaku-container .bg-y,
    .lp-yss.programming .hikaku-container .bg-y {
      background-color: #faecc2;
      padding: 1rem; }
    .lp-yss.webdesign .hikaku-container .bg-y-opacity,
    .lp-yss.video .hikaku-container .bg-y-opacity,
    .lp-yss.programming .hikaku-container .bg-y-opacity {
      background-color: #f9f1d9;
      padding: 1rem; }
    .lp-yss.webdesign .hikaku-container .bg-g,
    .lp-yss.video .hikaku-container .bg-g,
    .lp-yss.programming .hikaku-container .bg-g {
      background-color: #bdbbb9;
      padding: 1rem; }
    .lp-yss.webdesign .hikaku-container .bg-g-opacity,
    .lp-yss.video .hikaku-container .bg-g-opacity,
    .lp-yss.programming .hikaku-container .bg-g-opacity {
      background-color: #f2f1f1;
      padding: 1rem; }
    .lp-yss.webdesign .hikaku-container .button .cv,
    .lp-yss.video .hikaku-container .button .cv,
    .lp-yss.programming .hikaku-container .button .cv {
      width: 90%; }
    .lp-yss.webdesign .hikaku-container .merideme-list li,
    .lp-yss.video .hikaku-container .merideme-list li,
    .lp-yss.programming .hikaku-container .merideme-list li {
      margin-left: 1rem;
      position: relative; }
      .lp-yss.webdesign .hikaku-container .merideme-list li:before,
      .lp-yss.video .hikaku-container .merideme-list li:before,
      .lp-yss.programming .hikaku-container .merideme-list li:before {
        position: absolute;
        top: 50%;
        left: -1rem;
        transform: translateY(-50%);
        display: inline-block;
        width: .5rem;
        height: .5rem;
        background-color: #535353;
        border-radius: 50px;
        content: ''; }
  .lp-yss.webdesign .hikaku-copy,
  .lp-yss.video .hikaku-copy,
  .lp-yss.programming .hikaku-copy {
    width: 75%;
    margin: auto;
    position: relative; }
    .lp-yss.webdesign .hikaku-copy:before,
    .lp-yss.video .hikaku-copy:before,
    .lp-yss.programming .hikaku-copy:before {
      position: absolute;
      bottom: .2rem;
      left: -2rem;
      content: '';
      width: 2rem;
      height: 2.5rem;
      display: inline-block;
      background: url(../img/lp/fukidashi_left.png) no-repeat;
      background-size: contain; }
    .lp-yss.webdesign .hikaku-copy:after,
    .lp-yss.video .hikaku-copy:after,
    .lp-yss.programming .hikaku-copy:after {
      position: absolute;
      bottom: .2rem;
      right: -2rem;
      content: '';
      width: 2rem;
      height: 2.5rem;
      display: inline-block;
      background: url(../img/lp/fukidashi_right.png) no-repeat;
      background-size: contain; }
  .lp-yss.webdesign .hikaku-bnr,
  .lp-yss.video .hikaku-bnr,
  .lp-yss.programming .hikaku-bnr {
    width: 80%;
    margin: 1rem auto; }
@media only screen and (max-width: 767px) {
  .lp-yss.webdesign .suggest,
  .lp-yss.video .suggest,
  .lp-yss.programming .suggest {
    padding: 0 .5rem; } }
.lp-yss.webdesign .suggest-title,
.lp-yss.video .suggest-title,
.lp-yss.programming .suggest-title {
  max-width: 500px;
  margin: 1rem auto 2rem; }
.lp-yss.webdesign .suggest-list,
.lp-yss.video .suggest-list,
.lp-yss.programming .suggest-list {
  margin-bottom: 1rem; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .suggest-list-item,
    .lp-yss.video .suggest-list-item,
    .lp-yss.programming .suggest-list-item {
      height: 29rem; } }
  .lp-yss.webdesign .suggest-list-item-img,
  .lp-yss.video .suggest-list-item-img,
  .lp-yss.programming .suggest-list-item-img {
    margin: 0 auto .5rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest-list-item-img,
      .lp-yss.video .suggest-list-item-img,
      .lp-yss.programming .suggest-list-item-img {
        width: 45%; } }
    .lp-yss.webdesign .suggest-list-item-img img,
    .lp-yss.video .suggest-list-item-img img,
    .lp-yss.programming .suggest-list-item-img img {
      margin: auto; }
  .lp-yss.webdesign .suggest-list-item-txt,
  .lp-yss.video .suggest-list-item-txt,
  .lp-yss.programming .suggest-list-item-txt {
    text-align: center;
    font-weight: bold;
    line-height: 1.2; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest-list-item-txt,
      .lp-yss.video .suggest-list-item-txt,
      .lp-yss.programming .suggest-list-item-txt {
        font-size: 1.8rem; } }
    .lp-yss.webdesign .suggest-list-item-txt-kome,
    .lp-yss.video .suggest-list-item-txt-kome,
    .lp-yss.programming .suggest-list-item-txt-kome {
      margin-top: .5rem;
      font-weight: normal;
      font-size: 1rem; }
.lp-yss.webdesign .suggest-kome,
.lp-yss.video .suggest-kome,
.lp-yss.programming .suggest-kome {
  text-align: right;
  margin: .5rem 0 1rem; }
.lp-yss.webdesign .suggest-type-sankaku,
.lp-yss.video .suggest-type-sankaku,
.lp-yss.programming .suggest-type-sankaku {
  margin: auto;
  max-width: 500px; }
.lp-yss.webdesign .suggest-type-list,
.lp-yss.video .suggest-type-list,
.lp-yss.programming .suggest-type-list {
  margin: 2rem auto; }
  .lp-yss.webdesign .suggest-type-list-wrap-inner-ttl,
  .lp-yss.video .suggest-type-list-wrap-inner-ttl,
  .lp-yss.programming .suggest-type-list-wrap-inner-ttl {
    padding: .5rem;
    font-weight: bold;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 20px 20px 0 0;
    background: #050d5c;
    min-height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest-type-list-wrap-inner-ttl,
      .lp-yss.video .suggest-type-list-wrap-inner-ttl,
      .lp-yss.programming .suggest-type-list-wrap-inner-ttl {
        min-height: 60px;
        flex-direction: row;
        font-size: 1.5rem; } }
    .lp-yss.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
    .lp-yss.video .suggest-type-list-wrap-inner-ttl .txt-big,
    .lp-yss.programming .suggest-type-list-wrap-inner-ttl .txt-big {
      font-size: 2rem; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
        .lp-yss.video .suggest-type-list-wrap-inner-ttl .txt-big,
        .lp-yss.programming .suggest-type-list-wrap-inner-ttl .txt-big {
          font-size: 2.4rem; } }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest-type-list-wrap-inner-ttl-txt,
      .lp-yss.video .suggest-type-list-wrap-inner-ttl-txt,
      .lp-yss.programming .suggest-type-list-wrap-inner-ttl-txt {
        width: 90%; } }
  .lp-yss.webdesign .suggest-type-list-wrap-inner-content,
  .lp-yss.video .suggest-type-list-wrap-inner-content,
  .lp-yss.programming .suggest-type-list-wrap-inner-content {
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.2rem solid #050d5c;
    border-top: none;
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    height: 25rem;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest-type-list-wrap-inner-content,
      .lp-yss.video .suggest-type-list-wrap-inner-content,
      .lp-yss.programming .suggest-type-list-wrap-inner-content {
        padding: 1rem 1rem 3rem;
        height: 28rem; } }
    .lp-yss.webdesign .suggest-type-list-wrap-inner-content-name,
    .lp-yss.video .suggest-type-list-wrap-inner-content-name,
    .lp-yss.programming .suggest-type-list-wrap-inner-content-name {
      font-size: 1.8rem;
      font-weight: bold; }
    .lp-yss.webdesign .suggest-type-list-wrap-inner-content .img,
    .lp-yss.video .suggest-type-list-wrap-inner-content .img,
    .lp-yss.programming .suggest-type-list-wrap-inner-content .img {
      width: 50%;
      margin: 1rem auto .5rem; }
    .lp-yss.webdesign .suggest-type-list-wrap-inner-content-cv,
    .lp-yss.video .suggest-type-list-wrap-inner-content-cv,
    .lp-yss.programming .suggest-type-list-wrap-inner-content-cv {
      width: 100%;
      margin: 1rem auto 0; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .suggest-type-list-wrap-inner-content-cv,
        .lp-yss.video .suggest-type-list-wrap-inner-content-cv,
        .lp-yss.programming .suggest-type-list-wrap-inner-content-cv {
          width: 90%; } }
      .lp-yss.webdesign .suggest-type-list-wrap-inner-content-cv .cv,
      .lp-yss.video .suggest-type-list-wrap-inner-content-cv .cv,
      .lp-yss.programming .suggest-type-list-wrap-inner-content-cv .cv {
        width: 75%;
        margin: 0; }
.lp-yss.webdesign .suggest-strong-txt,
.lp-yss.video .suggest-strong-txt,
.lp-yss.programming .suggest-strong-txt {
  margin: 1rem auto;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.2; }
  .lp-yss.webdesign .suggest-strong-txt-big,
  .lp-yss.video .suggest-strong-txt-big,
  .lp-yss.programming .suggest-strong-txt-big {
    font-size: 2.5rem;
    font-weight: bold; }
  .lp-yss.webdesign .suggest-strong-txt-red,
  .lp-yss.video .suggest-strong-txt-red,
  .lp-yss.programming .suggest-strong-txt-red {
    font-size: 2.5rem;
    color: #DE020D; }
.lp-yss.webdesign .suggest-strong-list,
.lp-yss.video .suggest-strong-list,
.lp-yss.programming .suggest-strong-list {
  margin: 1.5rem auto 2rem;
  width: 37%; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .suggest-strong-list,
    .lp-yss.video .suggest-strong-list,
    .lp-yss.programming .suggest-strong-list {
      width: 80%; } }
  .lp-yss.webdesign .suggest-strong-list-item,
  .lp-yss.video .suggest-strong-list-item,
  .lp-yss.programming .suggest-strong-list-item {
    position: relative;
    padding-left: 4rem;
    margin: 1rem auto;
    font-size: 1.8rem;
    line-height: 1.2; }
    .lp-yss.webdesign .suggest-strong-list-item:before,
    .lp-yss.video .suggest-strong-list-item:before,
    .lp-yss.programming .suggest-strong-list-item:before {
      content: '';
      display: inline-block;
      width: 3rem;
      height: 2.5rem;
      background: url(../img/lp/mato_icon.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
.lp-yss.webdesign .suggest-strong-name,
.lp-yss.video .suggest-strong-name,
.lp-yss.programming .suggest-strong-name {
  font-size: 2.5rem;
  font-weight: bold;
  display: flex;
  justify-content: center; }
  .lp-yss.webdesign .suggest-strong-name-wrap,
  .lp-yss.video .suggest-strong-name-wrap,
  .lp-yss.programming .suggest-strong-name-wrap {
    position: relative;
    text-align: center; }
    .lp-yss.webdesign .suggest-strong-name-wrap:before,
    .lp-yss.video .suggest-strong-name-wrap:before,
    .lp-yss.programming .suggest-strong-name-wrap:before {
      content: '';
      display: inline-block;
      width: 3rem;
      height: 3rem;
      background: url(../img/lp/fukidashi_l.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      left: -3rem;
      transform: translateY(-50%); }
    .lp-yss.webdesign .suggest-strong-name-wrap:after,
    .lp-yss.video .suggest-strong-name-wrap:after,
    .lp-yss.programming .suggest-strong-name-wrap:after {
      content: '';
      display: inline-block;
      width: 3rem;
      height: 3rem;
      background: url(../img/lp/fukidashi_r.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      right: -3.5rem;
      transform: translateY(-50%); }
.lp-yss.webdesign .suggest-strong-img,
.lp-yss.video .suggest-strong-img,
.lp-yss.programming .suggest-strong-img {
  margin: 0.5rem auto;
  max-width: 500px; }
.lp-yss.webdesign .suggest-strong-cv,
.lp-yss.video .suggest-strong-cv,
.lp-yss.programming .suggest-strong-cv {
  width: 60%;
  margin: 1rem auto !important; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .suggest-strong-cv,
    .lp-yss.video .suggest-strong-cv,
    .lp-yss.programming .suggest-strong-cv {
      width: 90%; } }
.lp-yss.webdesign .suggest .swiper-button-next, .lp-yss.webdesign .suggest .swiper-button-prev,
.lp-yss.video .suggest .swiper-button-next,
.lp-yss.video .suggest .swiper-button-prev,
.lp-yss.programming .suggest .swiper-button-next,
.lp-yss.programming .suggest .swiper-button-prev {
  color: #050d5c; }
.lp-yss.webdesign .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active,
.lp-yss.video .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active,
.lp-yss.programming .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #050d5c; }
@media only screen and (max-width: 767px) {
  .lp-yss.webdesign .suggest.webdesign,
  .lp-yss.video .suggest.webdesign,
  .lp-yss.programming .suggest.webdesign {
    padding: 0 .5rem; } }
.lp-yss.webdesign .suggest.webdesign .suggest-type-list-wrap-inner-ttl,
.lp-yss.video .suggest.webdesign .suggest-type-list-wrap-inner-ttl,
.lp-yss.programming .suggest.webdesign .suggest-type-list-wrap-inner-ttl {
  background: #cf8080; }
  .lp-yss.webdesign .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
  .lp-yss.video .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
  .lp-yss.programming .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big {
    font-size: 2rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
      .lp-yss.video .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big,
      .lp-yss.programming .suggest.webdesign .suggest-type-list-wrap-inner-ttl .txt-big {
        font-size: 2.4rem; } }
.lp-yss.webdesign .suggest.webdesign .suggest-type-list-wrap-inner-content,
.lp-yss.video .suggest.webdesign .suggest-type-list-wrap-inner-content,
.lp-yss.programming .suggest.webdesign .suggest-type-list-wrap-inner-content {
  border: 0.2rem solid #cf8080;
  border-top: none; }
.lp-yss.webdesign .suggest.webdesign .swiper-button-next, .lp-yss.webdesign .suggest.webdesign .swiper-button-prev,
.lp-yss.video .suggest.webdesign .swiper-button-next,
.lp-yss.video .suggest.webdesign .swiper-button-prev,
.lp-yss.programming .suggest.webdesign .swiper-button-next,
.lp-yss.programming .suggest.webdesign .swiper-button-prev {
  color: #cf8080; }
.lp-yss.webdesign .suggest.webdesign .swiper-pagination-bullet.swiper-pagination-bullet-active,
.lp-yss.video .suggest.webdesign .swiper-pagination-bullet.swiper-pagination-bullet-active,
.lp-yss.programming .suggest.webdesign .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #cf8080; }
.lp-yss.webdesign .kotsu,
.lp-yss.video .kotsu,
.lp-yss.programming .kotsu {
  position: relative;
  margin: 4rem auto 1rem; }
  .lp-yss.webdesign .kotsu-ttl,
  .lp-yss.video .kotsu-ttl,
  .lp-yss.programming .kotsu-ttl {
    position: absolute;
    max-width: 750px;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%); }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .kotsu-ttl,
      .lp-yss.video .kotsu-ttl,
      .lp-yss.programming .kotsu-ttl {
        width: 95%; } }
  .lp-yss.webdesign .kotsu-wrapper,
  .lp-yss.video .kotsu-wrapper,
  .lp-yss.programming .kotsu-wrapper {
    background-color: #F3F3F3;
    padding: 6em 1rem 1.5rem;
    display: block; }
  .lp-yss.webdesign .kotsu-strong-txt,
  .lp-yss.video .kotsu-strong-txt,
  .lp-yss.programming .kotsu-strong-txt {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.5; }
    .lp-yss.webdesign .kotsu-strong-txt-big,
    .lp-yss.video .kotsu-strong-txt-big,
    .lp-yss.programming .kotsu-strong-txt-big {
      font-size: 2rem;
      font-weight: bold; }
  .lp-yss.webdesign .kotsu-setsumei,
  .lp-yss.video .kotsu-setsumei,
  .lp-yss.programming .kotsu-setsumei {
    text-align: center;
    padding: 1rem 1rem 2rem;
    background: url(../img/lp/kotsu_sankaku.png) no-repeat;
    background-size: contain;
    background-position: center; }
    .lp-yss.webdesign .kotsu-setsumei-sp,
    .lp-yss.video .kotsu-setsumei-sp,
    .lp-yss.programming .kotsu-setsumei-sp {
      background: url(../img/lp/kotsu_sankaku_sp.png) no-repeat;
      background-size: cover; }
.lp-yss.webdesign .kotsu.webdesign .kotsu-wrapper,
.lp-yss.video .kotsu.webdesign .kotsu-wrapper,
.lp-yss.programming .kotsu.webdesign .kotsu-wrapper {
  background-color: #f7f4f5; }
.lp-yss.webdesign .kotsu.webdesign .kotsu-setsumei,
.lp-yss.video .kotsu.webdesign .kotsu-setsumei,
.lp-yss.programming .kotsu.webdesign .kotsu-setsumei {
  background: url(../img/lp/webd_kotsu_sankaku.png) no-repeat;
  background-size: contain;
  background-position: center; }
.lp-yss.webdesign .kotsu.webdesign .kotsu-setsumei.kotsu-setsumei-sp,
.lp-yss.video .kotsu.webdesign .kotsu-setsumei.kotsu-setsumei-sp,
.lp-yss.programming .kotsu.webdesign .kotsu-setsumei.kotsu-setsumei-sp {
  background: url(../img/lp/webd_kotsu_sankaku_sp.png) no-repeat;
  background-size: cover; }
.lp-yss.webdesign .sidejob_ranking .hikaku-container,
.lp-yss.video .sidejob_ranking .hikaku-container,
.lp-yss.programming .sidejob_ranking .hikaku-container {
  grid-template-columns: 0.5fr 2fr 0.6fr .8fr 0.6fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr 0.5fr 0.5fr 1.5fr;
  grid-template-areas: ". ttl-online ttl-selfstudy ttl-selfstudy ttl-selfstudy" "ttl-studystyle resson books studysite moviesite" "ttl-price resson-price books-price studysite-price moviesite-price" "ttl-merit resson-merit selfstudy-merit selfstudy-merit selfstudy-merit" "ttl-demerit resson-demerit selfstudy-demerit selfstudy-demerit selfstudy-demerit" "ttl-osusume resson-osusume bs-osusume bs-osusume moviesite-osusume"; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .sidejob_ranking .hikaku-container,
    .lp-yss.video .sidejob_ranking .hikaku-container,
    .lp-yss.programming .sidejob_ranking .hikaku-container {
      grid-template-columns: 5rem 24rem 8rem 10rem 8rem; } }
.lp-yss.webdesign .sidejob_ranking .hikaku-bnr,
.lp-yss.video .sidejob_ranking .hikaku-bnr,
.lp-yss.programming .sidejob_ranking .hikaku-bnr {
  width: 70%; }
.lp-yss.webdesign .text-date,
.lp-yss.video .text-date,
.lp-yss.programming .text-date {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  text-align: right; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .text-date,
    .lp-yss.video .text-date,
    .lp-yss.programming .text-date {
      padding: 0 1rem; } }
.lp-yss.webdesign .box-miniranking,
.lp-yss.video .box-miniranking,
.lp-yss.programming .box-miniranking {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem 0 3rem; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .box-miniranking,
    .lp-yss.video .box-miniranking,
    .lp-yss.programming .box-miniranking {
      padding: 0 1rem; } }
  .lp-yss.webdesign .box-miniranking li,
  .lp-yss.video .box-miniranking li,
  .lp-yss.programming .box-miniranking li {
    width: 32%; }
    .lp-yss.webdesign .box-miniranking li .ico-rank,
    .lp-yss.video .box-miniranking li .ico-rank,
    .lp-yss.programming .box-miniranking li .ico-rank {
      margin: 0 auto .3rem;
      width: 40px; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-miniranking li .ico-rank,
        .lp-yss.video .box-miniranking li .ico-rank,
        .lp-yss.programming .box-miniranking li .ico-rank {
          width: 30px; } }
    .lp-yss.webdesign .box-miniranking li .banner,
    .lp-yss.video .box-miniranking li .banner,
    .lp-yss.programming .box-miniranking li .banner {
      margin-bottom: .5rem; }
    .lp-yss.webdesign .box-miniranking li .title,
    .lp-yss.video .box-miniranking li .title,
    .lp-yss.programming .box-miniranking li .title {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-miniranking li .title,
        .lp-yss.video .box-miniranking li .title,
        .lp-yss.programming .box-miniranking li .title {
          font-size: 1.3rem; } }
    .lp-yss.webdesign .box-miniranking li .star,
    .lp-yss.video .box-miniranking li .star,
    .lp-yss.programming .box-miniranking li .star {
      color: #888;
      font-size: 1.4rem;
      font-weight: 700;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-miniranking li .star,
        .lp-yss.video .box-miniranking li .star,
        .lp-yss.programming .box-miniranking li .star {
          font-size: 1.2rem; } }
      .lp-yss.webdesign .box-miniranking li .star img,
      .lp-yss.video .box-miniranking li .star img,
      .lp-yss.programming .box-miniranking li .star img {
        display: inline-block;
        margin: .3rem .5rem 0 0;
        width: 30%; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .box-miniranking li .star img,
          .lp-yss.video .box-miniranking li .star img,
          .lp-yss.programming .box-miniranking li .star img {
            width: 60%; } }
.lp-yss.webdesign .box-topranking,
.lp-yss.video .box-topranking,
.lp-yss.programming .box-topranking {
  margin: 4rem 0 3rem; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .box-topranking,
    .lp-yss.video .box-topranking,
    .lp-yss.programming .box-topranking {
      padding: 0 .5rem;
      margin: 3rem 0 2rem; } }
  .lp-yss.webdesign .box-topranking th,
  .lp-yss.video .box-topranking th,
  .lp-yss.programming .box-topranking th {
    background-color: #cf8080;
    color: #fff;
    padding: .5rem; }
  .lp-yss.webdesign .box-topranking td,
  .lp-yss.video .box-topranking td,
  .lp-yss.programming .box-topranking td {
    width: 32%;
    border-right: 3px solid #fff;
    padding: 1rem;
    background-color: #f7f4f5;
    text-align: center;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .box-topranking td,
      .lp-yss.video .box-topranking td,
      .lp-yss.programming .box-topranking td {
        font-size: 1.1rem; } }
    .lp-yss.webdesign .box-topranking td .ico-rank,
    .lp-yss.video .box-topranking td .ico-rank,
    .lp-yss.programming .box-topranking td .ico-rank {
      position: absolute;
      top: -3rem;
      left: 50%;
      transform: translateX(-50%);
      margin: 0 auto .3rem;
      width: 40px; }
    .lp-yss.webdesign .box-topranking td .banner,
    .lp-yss.video .box-topranking td .banner,
    .lp-yss.programming .box-topranking td .banner {
      margin: 0.5rem auto;
      width: 70%; }
    .lp-yss.webdesign .box-topranking td .title,
    .lp-yss.video .box-topranking td .title,
    .lp-yss.programming .box-topranking td .title {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      text-align: center;
      margin-bottom: .5rem; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking td .title,
        .lp-yss.video .box-topranking td .title,
        .lp-yss.programming .box-topranking td .title {
          font-size: 1.3rem; } }
    .lp-yss.webdesign .box-topranking td .star,
    .lp-yss.video .box-topranking td .star,
    .lp-yss.programming .box-topranking td .star {
      color: #888;
      font-size: 1.4rem;
      font-weight: 700;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking td .star,
        .lp-yss.video .box-topranking td .star,
        .lp-yss.programming .box-topranking td .star {
          font-size: 1.2rem; } }
      .lp-yss.webdesign .box-topranking td .star img,
      .lp-yss.video .box-topranking td .star img,
      .lp-yss.programming .box-topranking td .star img {
        display: inline-block;
        margin: .3rem .5rem 0 0;
        width: 30%; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .box-topranking td .star img,
          .lp-yss.video .box-topranking td .star img,
          .lp-yss.programming .box-topranking td .star img {
            width: 60%; } }
    .lp-yss.webdesign .box-topranking td:last-child,
    .lp-yss.video .box-topranking td:last-child,
    .lp-yss.programming .box-topranking td:last-child {
      border-right: none; }
    .lp-yss.webdesign .box-topranking td .eval-inner,
    .lp-yss.video .box-topranking td .eval-inner,
    .lp-yss.programming .box-topranking td .eval-inner {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: .5rem; }
      .lp-yss.webdesign .box-topranking td .eval-inner-img,
      .lp-yss.video .box-topranking td .eval-inner-img,
      .lp-yss.programming .box-topranking td .eval-inner-img {
        width: 20%;
        margin: auto; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .box-topranking td .eval-inner-img,
          .lp-yss.video .box-topranking td .eval-inner-img,
          .lp-yss.programming .box-topranking td .eval-inner-img {
            width: 50%; } }
      .lp-yss.webdesign .box-topranking td .eval-inner-txt,
      .lp-yss.video .box-topranking td .eval-inner-txt,
      .lp-yss.programming .box-topranking td .eval-inner-txt {
        text-align: center; }
  .lp-yss.webdesign .box-topranking-flex,
  .lp-yss.video .box-topranking-flex,
  .lp-yss.programming .box-topranking-flex {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center; }
    .lp-yss.webdesign .box-topranking-flex-item,
    .lp-yss.video .box-topranking-flex-item,
    .lp-yss.programming .box-topranking-flex-item {
      width: 47.5%; }
      .lp-yss.webdesign .box-topranking-flex-item img,
      .lp-yss.video .box-topranking-flex-item img,
      .lp-yss.programming .box-topranking-flex-item img {
        margin: auto; }
      .lp-yss.webdesign .box-topranking-flex-item-off,
      .lp-yss.video .box-topranking-flex-item-off,
      .lp-yss.programming .box-topranking-flex-item-off {
        color: #c4c7cc; }
  .lp-yss.webdesign .box-topranking-cam,
  .lp-yss.video .box-topranking-cam,
  .lp-yss.programming .box-topranking-cam {
    text-align: left;
    margin-bottom: .5rem;
    margin-left: 2rem;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .box-topranking-cam,
      .lp-yss.video .box-topranking-cam,
      .lp-yss.programming .box-topranking-cam {
        margin-left: 1rem;
        font-size: 1.1rem; } }
    .lp-yss.webdesign .box-topranking-cam:before,
    .lp-yss.video .box-topranking-cam:before,
    .lp-yss.programming .box-topranking-cam:before {
      position: absolute;
      top: 50%;
      left: -1.5rem;
      transform: translateY(-50%);
      display: inline-block;
      width: .8rem;
      height: .8rem;
      background: #cf8080;
      content: '';
      border-radius: 50px; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking-cam:before,
        .lp-yss.video .box-topranking-cam:before,
        .lp-yss.programming .box-topranking-cam:before {
          left: -1rem;
          width: .5rem;
          height: .5rem; } }
    .lp-yss.webdesign .box-topranking-cam:last-child,
    .lp-yss.video .box-topranking-cam:last-child,
    .lp-yss.programming .box-topranking-cam:last-child {
      margin-bottom: 0; }
  .lp-yss.webdesign .box-topranking-button,
  .lp-yss.video .box-topranking-button,
  .lp-yss.programming .box-topranking-button {
    margin: 0; }
    .lp-yss.webdesign .box-topranking-button .cv,
    .lp-yss.video .box-topranking-button .cv,
    .lp-yss.programming .box-topranking-button .cv {
      animation-name: btnlike-btn;
      animation-delay: 0s;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      border-radius: 50px; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking-button .cv,
        .lp-yss.video .box-topranking-button .cv,
        .lp-yss.programming .box-topranking-button .cv {
          width: 100%; } }
    .lp-yss.webdesign .box-topranking-button .link,
    .lp-yss.video .box-topranking-button .link,
    .lp-yss.programming .box-topranking-button .link {
      animation-name: btnlike-link;
      animation-delay: 0s;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      border-radius: 50px; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking-button .link,
        .lp-yss.video .box-topranking-button .link,
        .lp-yss.programming .box-topranking-button .link {
          width: 100%; } }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .box-topranking-button a,
      .lp-yss.video .box-topranking-button a,
      .lp-yss.programming .box-topranking-button a {
        padding: 1rem; } }
  .lp-yss.webdesign .box-topranking-point,
  .lp-yss.video .box-topranking-point,
  .lp-yss.programming .box-topranking-point {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: .5rem; }
    .lp-yss.webdesign .box-topranking-point-inner,
    .lp-yss.video .box-topranking-point-inner,
    .lp-yss.programming .box-topranking-point-inner {
      display: flex;
      gap: .5rem;
      align-items: center; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-topranking-point-inner,
        .lp-yss.video .box-topranking-point-inner,
        .lp-yss.programming .box-topranking-point-inner {
          flex-direction: column; } }
      .lp-yss.webdesign .box-topranking-point-inner-check,
      .lp-yss.video .box-topranking-point-inner-check,
      .lp-yss.programming .box-topranking-point-inner-check {
        background: url(../img/lp/check_pink.png) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 2rem;
        height: 1rem; }
      .lp-yss.webdesign .box-topranking-point-inner-txt,
      .lp-yss.video .box-topranking-point-inner-txt,
      .lp-yss.programming .box-topranking-point-inner-txt {
        width: 100%;
        text-align: left; }
        @media only screen and (max-width: 767px) {
          .lp-yss.webdesign .box-topranking-point-inner-txt,
          .lp-yss.video .box-topranking-point-inner-txt,
          .lp-yss.programming .box-topranking-point-inner-txt {
            font-size: 1.1rem; } }
.lp-yss.webdesign .box-3point,
.lp-yss.video .box-3point,
.lp-yss.programming .box-3point {
  background: #f7f4f5;
  border-radius: 6px;
  font-weight: 700;
  margin-bottom: 3rem;
  padding: 1.5rem;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .lp-yss.webdesign .box-3point,
    .lp-yss.video .box-3point,
    .lp-yss.programming .box-3point {
      border-radius: 0;
      margin-bottom: 0;
      padding: 1.5rem 1.5rem 3rem; } }
  .lp-yss.webdesign .box-3point p,
  .lp-yss.video .box-3point p,
  .lp-yss.programming .box-3point p {
    margin-bottom: 1.5rem; }
    .lp-yss.webdesign .box-3point p:last-child,
    .lp-yss.video .box-3point p:last-child,
    .lp-yss.programming .box-3point p:last-child {
      margin-bottom: 0; }
  .lp-yss.webdesign .box-3point strong,
  .lp-yss.video .box-3point strong,
  .lp-yss.programming .box-3point strong {
    color: #cf8080;
    font-size: 1.8rem; }
  .lp-yss.webdesign .box-3point .text-3point,
  .lp-yss.video .box-3point .text-3point,
  .lp-yss.programming .box-3point .text-3point {
    background: #cf8080;
    color: #fff;
    display: inline-block;
    font-size: 2.5rem;
    padding: 0 .5rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .box-3point .text-3point,
      .lp-yss.video .box-3point .text-3point,
      .lp-yss.programming .box-3point .text-3point {
        font-size: 2.3rem; } }
  .lp-yss.webdesign .box-3point ul,
  .lp-yss.video .box-3point ul,
  .lp-yss.programming .box-3point ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem; }
    .lp-yss.webdesign .box-3point ul li,
    .lp-yss.video .box-3point ul li,
    .lp-yss.programming .box-3point ul li {
      background: #fff;
      border: 1px solid #cf8080;
      border-radius: 4px;
      box-shadow: 1px 2px 0 #cf8080;
      font-size: 2.2rem;
      line-height: 1.3;
      margin: 0 .8rem;
      padding: 1rem;
      width: 8rem; }
      .lp-yss.webdesign .box-3point ul li:nth-child(1), .lp-yss.webdesign .box-3point ul li:nth-child(2),
      .lp-yss.video .box-3point ul li:nth-child(1),
      .lp-yss.video .box-3point ul li:nth-child(2),
      .lp-yss.programming .box-3point ul li:nth-child(1),
      .lp-yss.programming .box-3point ul li:nth-child(2) {
        padding-top: 2.2rem; }
      @media only screen and (max-width: 767px) {
        .lp-yss.webdesign .box-3point ul li,
        .lp-yss.video .box-3point ul li,
        .lp-yss.programming .box-3point ul li {
          font-size: 2rem; } }
  .lp-yss.webdesign .box-3point .text-3point2,
  .lp-yss.video .box-3point .text-3point2,
  .lp-yss.programming .box-3point .text-3point2 {
    background: #fff;
    border-left: 2px solid #cf8080;
    border-radius: 6px;
    border-right: 2px solid #cf8080;
    box-shadow: 0 1px 3px #ddd;
    display: inline-block;
    margin-top: 3rem;
    padding: 1rem 2rem; }
.lp-yss.webdesign .itengineer,
.lp-yss.video .itengineer,
.lp-yss.programming .itengineer {
  padding: 0; }
  .lp-yss.webdesign .itengineer-img,
  .lp-yss.video .itengineer-img,
  .lp-yss.programming .itengineer-img {
    width: 100%; }
  .lp-yss.webdesign .itengineer-intro,
  .lp-yss.video .itengineer-intro,
  .lp-yss.programming .itengineer-intro {
    background: url(../img/lp/itengineer.png) no-repeat;
    background-position: right;
    background-size: contain;
    padding: 4rem 40rem 6rem 1rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .itengineer-intro,
      .lp-yss.video .itengineer-intro,
      .lp-yss.programming .itengineer-intro {
        background: none;
        margin-top: -20%;
        padding: 0 1.5rem 1.5rem 1.5rem; } }
  .lp-yss.webdesign .itengineer-inner,
  .lp-yss.video .itengineer-inner,
  .lp-yss.programming .itengineer-inner {
    padding: 0 1.5rem 0.5rem 1.5rem;
    margin-top: -2rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .itengineer-inner,
      .lp-yss.video .itengineer-inner,
      .lp-yss.programming .itengineer-inner {
        margin-top: 0; } }
    .lp-yss.webdesign .itengineer-inner-link,
    .lp-yss.video .itengineer-inner-link,
    .lp-yss.programming .itengineer-inner-link {
      position: relative;
      margin-bottom: 1rem;
      cursor: pointer;
      display: inline-block; }
      .lp-yss.webdesign .itengineer-inner-link span,
      .lp-yss.video .itengineer-inner-link span,
      .lp-yss.programming .itengineer-inner-link span {
        text-decoration: underline; }
      .lp-yss.webdesign .itengineer-inner-link::before,
      .lp-yss.video .itengineer-inner-link::before,
      .lp-yss.programming .itengineer-inner-link::before {
        border-top: 8px solid #050d5c;
        border-left: 8px solid transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        top: 40%;
        left: -20px;
        margin: -3px 0 0; }
      .lp-yss.webdesign .itengineer-inner-link::after,
      .lp-yss.video .itengineer-inner-link::after,
      .lp-yss.programming .itengineer-inner-link::after {
        border-top: 8px solid #050d5c;
        border-left: 8px solid transparent;
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
        content: "";
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        top: 40%;
        right: -15px;
        margin: -3px 0 0; }
    .lp-yss.webdesign .itengineer-inner-content,
    .lp-yss.video .itengineer-inner-content,
    .lp-yss.programming .itengineer-inner-content {
      margin-top: 0.5rem;
      margin-bottom: 1rem; }
    .lp-yss.webdesign .itengineer-inner .text-3point2,
    .lp-yss.video .itengineer-inner .text-3point2,
    .lp-yss.programming .itengineer-inner .text-3point2 {
      margin-top: 1rem; }
  .lp-yss.webdesign .itengineer h4,
  .lp-yss.video .itengineer h4,
  .lp-yss.programming .itengineer h4 {
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    background-color: rgba(247, 245, 244, 0.9);
    display: inline-block;
    line-height: 1.5; }
  .lp-yss.webdesign .itengineer p,
  .lp-yss.video .itengineer p,
  .lp-yss.programming .itengineer p {
    padding: 0.5rem;
    background-color: rgba(247, 245, 244, 0.9);
    display: inline-block;
    text-align: left; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .itengineer p,
      .lp-yss.video .itengineer p,
      .lp-yss.programming .itengineer p {
        line-height: 1.5; } }
  .lp-yss.webdesign .itengineer strong,
  .lp-yss.video .itengineer strong,
  .lp-yss.programming .itengineer strong {
    font-size: 2.5rem; }
    @media only screen and (max-width: 767px) {
      .lp-yss.webdesign .itengineer strong,
      .lp-yss.video .itengineer strong,
      .lp-yss.programming .itengineer strong {
        font-size: 2rem;
        line-height: 1.3; } }
  .lp-yss.webdesign .itengineer ul,
  .lp-yss.video .itengineer ul,
  .lp-yss.programming .itengineer ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem; }
  .lp-yss.webdesign .itengineer li,
  .lp-yss.video .itengineer li,
  .lp-yss.programming .itengineer li {
    width: 70% !important;
    padding: 0.5rem !important;
    display: flex;
    justify-content: center;
    align-items: center; }
  .lp-yss.webdesign .itengineer-txt,
  .lp-yss.video .itengineer-txt,
  .lp-yss.programming .itengineer-txt {
    text-align: left; }
.lp-yss.webdesign .title-rank-h2,
.lp-yss.video .title-rank-h2,
.lp-yss.programming .title-rank-h2 {
  background: none;
  padding: 0; }
.lp-yss.webdesign .ranking-ttl,
.lp-yss.video .ranking-ttl,
.lp-yss.programming .ranking-ttl {
  margin: 1rem auto; }
.lp-yss.webdesign .rank .box,
.lp-yss.video .rank .box,
.lp-yss.programming .rank .box {
  border-top: 5px solid #cf8080; }
  .lp-yss.webdesign .rank .box .point h3,
  .lp-yss.webdesign .rank .box .spec th,
  .lp-yss.webdesign .rank .box .review dt,
  .lp-yss.video .rank .box .point h3,
  .lp-yss.video .rank .box .spec th,
  .lp-yss.video .rank .box .review dt,
  .lp-yss.programming .rank .box .point h3,
  .lp-yss.programming .rank .box .spec th,
  .lp-yss.programming .rank .box .review dt {
    background: #f7e4e4; }
  .lp-yss.webdesign .rank .box .skill h3,
  .lp-yss.video .rank .box .skill h3,
  .lp-yss.programming .rank .box .skill h3 {
    border-left: solid 9px #cf8080; }
  .lp-yss.webdesign .rank .box .maintext h3,
  .lp-yss.video .rank .box .maintext h3,
  .lp-yss.programming .rank .box .maintext h3 {
    background: #cf8080; }

.lp-yss.video {
  background-color: #070801;
  padding-bottom: 2rem; }
  .lp-yss.video .mainvisual {
    z-index: 0;
    background-color: transparent !important; }
  .lp-yss.video .box-topranking {
    position: relative; }
    .lp-yss.video .box-topranking th {
      background-color: #000; }
    .lp-yss.video .box-topranking td {
      background-color: #F3F3F3;
      border-right: 5px solid #070801;
      padding: .5rem; }
      @media only screen and (max-width: 767px) {
        .lp-yss.video .box-topranking td {
          padding: 1rem;
          border-right: 3px solid #070801; } }
    .lp-yss.video .box-topranking .name {
      position: sticky;
      top: 0;
      z-index: 1; }
    .lp-yss.video .box-topranking-cam:before {
      background: #000; }
    .lp-yss.video .box-topranking-point-inner-check {
      background: url(../img/lp/check_black.png) no-repeat;
      background-size: contain; }
  .lp-yss.video .rank .box {
    border-top: 5px solid #d284c9; }

.lp-yss.programming .title-webdesign {
  color: #050d5c;
  border-bottom: 0.1rem solid #050d5c; }
  .lp-yss.programming .title-webdesign small {
    background: #050d5c; }
  .lp-yss.programming .title-webdesign::before {
    border-color: #050d5c transparent transparent transparent; }
.lp-yss.programming .hikaku-container {
  grid-template-columns: 0.5fr 2fr 0.6fr .8fr 0.6fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr 0.5fr 0.5fr 1.5fr;
  grid-template-areas: ". ttl-online ttl-selfstudy ttl-selfstudy ttl-selfstudy" "ttl-studystyle resson books studysite moviesite" "ttl-price resson-price books-price studysite-price moviesite-price" "ttl-merit resson-merit selfstudy-merit selfstudy-merit selfstudy-merit" "ttl-demerit resson-demerit selfstudy-demerit selfstudy-demerit selfstudy-demerit" "ttl-osusume resson-osusume bs-osusume bs-osusume moviesite-osusume"; }
  @media only screen and (max-width: 767px) {
    .lp-yss.programming .hikaku-container {
      grid-template-columns: 5rem 24rem 8rem 10rem 8rem; } }
  .lp-yss.programming .hikaku-container .txt-color {
    color: #050d5c; }
  .lp-yss.programming .hikaku-container .ttl-online {
    color: #050d5c; }
.lp-yss.programming .hikaku-bnr {
  width: 70%; }
.lp-yss.programming .box-topranking th {
  background-color: #050d5c; }
.lp-yss.programming .box-topranking td {
  background-color: #F3F3F3; }
.lp-yss.programming .box-topranking-cam:before {
  background: #050d5c; }
.lp-yss.programming .box-topranking-point-inner-check {
  background: url(../img/lp/check.png) no-repeat;
  background-size: contain; }
.lp-yss.programming .box-3point strong {
  color: #050d5c; }
.lp-yss.programming .box-3point .text-3point {
  background: #050d5c; }
.lp-yss.programming .box-3point ul li {
  border: 1px solid #050d5c;
  box-shadow: 1px 2px 0 #050d5c; }
.lp-yss.programming .box-3point .text-3point2 {
  border-left: 2px solid #050d5c;
  border-right: 2px solid #050d5c; }
.lp-yss.programming .rank .box {
  border-top: 5px solid #050d5c; }
  .lp-yss.programming .rank .box .point h3,
  .lp-yss.programming .rank .box .spec th,
  .lp-yss.programming .rank .box .review dt {
    background: #d4e1f1; }
  .lp-yss.programming .rank .box .skill h3 {
    border-left: solid 9px #050d5c; }
  .lp-yss.programming .rank .box .maintext h3 {
    background: #050d5c; }

.title-rank-h2 {
  background: #050d5c;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  padding: 2rem 1rem;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .title-rank-h2 {
      font-size: 2rem;
      margin-bottom: 0; } }

/*YSS YDA GAD GDN LP用*/
.lp-ad {
  /*オーバーレイ*/
  /*比較タブ*/ }
  .lp-ad .mainvisual img {
    height: 315px; }
    @media only screen and (max-width: 767px) {
      .lp-ad .mainvisual img {
        height: auto;
        padding-bottom: 0rem; } }
  .lp-ad .title-rank-h2 {
    font-size: 2.6rem; }
    @media only screen and (max-width: 767px) {
      .lp-ad .title-rank-h2 {
        font-size: 1.8rem;
        padding: 1.5rem;
        margin-bottom: 1rem; } }
  .lp-ad .rank .box .mainbox {
    display: flex;
    align-items: flex-start; }
    @media only screen and (max-width: 767px) {
      .lp-ad .rank .box .mainbox {
        display: block; } }
    .lp-ad .rank .box .mainbox .banner {
      float: none;
      background: none; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .mainbox .banner {
          margin: 0rem auto 1rem;
          width: 50%; } }
    .lp-ad .rank .box .mainbox .rightbox {
      width: 76%; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .mainbox .rightbox {
          width: 100%; } }
      .lp-ad .rank .box .mainbox .rightbox .point {
        margin: 0rem 2rem 2rem; }
      .lp-ad .rank .box .mainbox .rightbox .spec th {
        border-left: 1px solid #DDD; }
      .lp-ad .rank .box .mainbox .rightbox .spec td {
        border-right: 1px solid #DDD; }
  .lp-ad .rank .box #acMenu {
    margin: 0rem 2rem; }
    .lp-ad .rank .box #acMenu dt {
      background-color: #fff;
      font-size: 1rem;
      font-weight: bold;
      display: block;
      width: 100%;
      height: auto;
      text-align: center;
      box-shadow: 0px 0px 2px 0px #666;
      cursor: pointer;
      padding: .5rem;
      margin: 0 0 1.5rem; }
    .lp-ad .rank .box #acMenu dd {
      display: none; }
    .lp-ad .rank .box #acMenu li {
      list-style: none; }
  .lp-ad .rank .box .skill {
    margin: 0rem 2rem 2rem;
    width: auto;
    float: none; }
    @media only screen and (max-width: 767px) {
      .lp-ad .rank .box .skill {
        margin: auto; } }
    @media only screen and (max-width: 767px) {
      .lp-ad .rank .box .skill h3 {
        margin-bottom: 0.5rem; } }
    .lp-ad .rank .box .skill ul {
      padding: 0rem 1rem 1rem; }
    .lp-ad .rank .box .skill p {
      margin: 0rem 2rem;
      font-size: 1.2rem;
      padding-bottom: 1rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .skill p {
          margin: auto;
          line-height: 1.5; } }
  .lp-ad .rank .box .campain {
    margin: 0rem 2rem; }
  .lp-ad .rank .box .review {
    margin: 0rem 2rem 2rem;
    border-radius: 5px;
    border: solid 1px #afafaf; }
    .lp-ad .rank .box .review dt {
      background: #afafaf;
      padding: 0.5rem 2rem;
      padding: 1rem 2rem;
      color: #fff;
      font-weight: bold;
      font-size: 1.8rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .review dt {
          font-size: 1.5rem;
          padding: 0.8rem 1.5rem 1rem; } }
    .lp-ad .rank .box .review dd {
      padding: 1rem;
      border: solid 1px #ccc;
      width: 97% !important;
      border-radius: 5px;
      background: #FCFDFD;
      margin-bottom: 0.5rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .review dd {
          padding: 0rem;
          margin: auto;
          width: 100% !important;
          border: none;
          background: none; } }
      .lp-ad .rank .box .review dd .flex {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        justify-content: space-between; }
        .lp-ad .rank .box .review dd .flex .left {
          width: 27%; }
          @media only screen and (max-width: 767px) {
            .lp-ad .rank .box .review dd .flex .left {
              width: 20%; } }
        .lp-ad .rank .box .review dd .flex .right {
          width: 70%; }
          @media only screen and (max-width: 767px) {
            .lp-ad .rank .box .review dd .flex .right {
              width: 76%; } }
          .lp-ad .rank .box .review dd .flex .right .ttl {
            font-weight: bold;
            line-height: 1.4; }
            @media only screen and (max-width: 767px) {
              .lp-ad .rank .box .review dd .flex .right .ttl {
                font-size: 1.3rem; } }
          .lp-ad .rank .box .review dd .flex .right .name {
            padding: 0.2rem;
            font-weight: bold;
            font-size: 1.3rem; }
            @media only screen and (max-width: 767px) {
              .lp-ad .rank .box .review dd .flex .right .name {
                font-size: 1.1rem;
                padding: 0rem; } }
    .lp-ad .rank .box .review .txt {
      clear: both;
      font-size: 1.3rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .review .txt {
          font-size: 1.1rem;
          line-height: 1.6; } }
  .lp-ad .rank .box .button {
    margin: 0rem auto; }
    .lp-ad .rank .box .button .info a {
      padding: 2.5rem 3rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .button .info a {
          padding: 1.5rem 1rem;
          font-size: 1.3rem; } }
    .lp-ad .rank .box .button .cv {
      width: 94%;
      font-size: 2.2rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .button .cv {
          font-size: 1.8rem; } }
      .lp-ad .rank .box .button .cv a {
        line-height: 1.2;
        padding: 0.7rem;
        letter-spacing: .08rem; }
        .lp-ad .rank .box .button .cv a span {
          font-size: 1.4rem; }
          @media only screen and (max-width: 767px) {
            .lp-ad .rank .box .button .cv a span {
              font-size: 1.2rem; } }
  .lp-ad .rank .box .button-flex {
    margin: 2rem; }
  .lp-ad .rank .box .button-yss {
    margin: 2rem auto 1rem; }
    @media only screen and (max-width: 767px) {
      .lp-ad .rank .box .button-yss {
        margin: 2rem auto 0rem; } }
    .lp-ad .rank .box .button-yss .toptxt {
      font-weight: bold;
      color: #444;
      letter-spacing: .05rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .button-yss .toptxt {
          font-size: 1.2rem; } }
    .lp-ad .rank .box .button-yss .cv {
      width: 60%;
      border-radius: 30px;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .lp-ad .rank .box .button-yss .cv {
          width: 75%; } }
      .lp-ad .rank .box .button-yss .cv a {
        padding: 0.8rem;
        line-height: 1.8; }
        .lp-ad .rank .box .button-yss .cv a:before {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 8%;
          margin: auto;
          content: "";
          vertical-align: middle;
          width: 0.6em;
          height: 0.6em;
          border-top: 3px solid #fff;
          border-right: 3px solid #fff;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
  .lp-ad .rank .box .button-top {
    margin-top: 0; }
  .lp-ad .rank .box .button-detail {
    text-align: right;
    margin: 1rem 3rem 1.5rem 0rem;
    font-weight: bold; }
  .lp-ad .slider {
    padding: 1rem 3rem; }
  .lp-ad .slick-track {
    display: flex;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .lp-ad .slick-track {
        gap: inherit; } }
  .lp-ad .slick-slide {
    height: auto !important; }
  .lp-ad .slick-next {
    right: 4px !important; }
  .lp-ad .slick-prev {
    left: 4px !important; }
  .lp-ad .slick-arrow {
    width: initial !important;
    height: initial !important;
    z-index: 2 !important; }
  .lp-ad .slick-arrow:before {
    font-size: 25px !important; }
    @media only screen and (max-width: 767px) {
      .lp-ad .slick-arrow:before {
        font-size: 20px !important; } }
  .lp-ad .slick-prev:before, .lp-ad .slick-next:before {
    color: #afafaf; }
  .lp-ad .slick-dots {
    width: 90% !important; }
  @media only screen and (max-width: 767px) {
    .lp-ad .overlay {
      display: block;
      position: relative; }
      .lp-ad .overlay #btn-rank {
        position: fixed;
        bottom: 0px;
        display: block;
        background-color: rgba(255, 255, 255, 0.8);
        height: 75px;
        right: 0;
        width: 100%;
        padding: 1.2rem 1rem; }
        .lp-ad .overlay #btn-rank p {
          font-weight: bold;
          font-size: 16px; }
        .lp-ad .overlay #btn-rank .item a {
          text-decoration: none; }
        .lp-ad .overlay #btn-rank .item h2 {
          background: #0F2173;
          color: #fff;
          padding: 1rem;
          border-radius: 6px;
          font-size: 20px;
          text-align: center;
          width: 80%;
          font-weight: bold; } }
  .lp-ad .category-article {
    margin-bottom: 3rem;
    background: none; }
    .lp-ad .category-article h2 {
      background: #050d5c;
      color: #fff;
      font-size: 2.6rem;
      font-weight: 700;
      padding: 2rem 1rem;
      text-align: center;
      text-shadow: none; }
      @media only screen and (max-width: 767px) {
        .lp-ad .category-article h2 {
          font-size: 1.8rem;
          padding: 1.5rem; } }
    .lp-ad .category-article article {
      padding: 1rem 2rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .category-article article {
          padding: 1rem; } }
  .lp-ad .tab-hikaku {
    margin-bottom: 4rem;
    /*比較タブ内ボックス*/ }
    .lp-ad .tab-hikaku .tab-group {
      display: flex;
      justify-content: center;
      border-bottom: solid 4px; }
    .lp-ad .tab-hikaku .tab {
      flex-grow: 1;
      list-style: none;
      border: solid 1px #050d5c;
      text-align: center;
      font-size: 1.8rem;
      padding: 1.5rem 0.5rem;
      font-weight: bold;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      cursor: pointer;
      width: 20%;
      border-bottom: none; }
      .lp-ad .tab-hikaku .tab:nth-child(2) {
        margin: 0rem 0.2rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .tab-hikaku .tab {
          font-size: 1.6rem; } }
    .lp-ad .tab-hikaku .panel {
      display: none; }
    .lp-ad .tab-hikaku .tab.is-active {
      background: #050d5c;
      color: #FFF;
      transition: all 0.2s ease-out; }
    .lp-ad .tab-hikaku .panel.is-show {
      display: block; }
    .lp-ad .tab-hikaku .hikaku-box .box {
      background: #FFF;
      margin: 3rem auto;
      border-bottom: solid 1px #ccc;
      padding-bottom: 1rem; }
      .lp-ad .tab-hikaku .hikaku-box .box:last-child {
        border-bottom: none; }
      @media only screen and (max-width: 767px) {
        .lp-ad .tab-hikaku .hikaku-box .box {
          margin: 2rem auto; } }
      .lp-ad .tab-hikaku .hikaku-box .box h2 {
        background: #FFF;
        line-height: 1.4;
        margin: 1rem auto;
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .lp-ad .tab-hikaku .hikaku-box .box h2 {
            font-size: 1.5rem;
            line-height: 1.2;
            margin: 0.8rem auto; } }
        .lp-ad .tab-hikaku .hikaku-box .box h2 a {
          color: #222; }
        .lp-ad .tab-hikaku .hikaku-box .box h2.icon {
          background-size: 4rem;
          background-repeat: no-repeat; }
        .lp-ad .tab-hikaku .hikaku-box .box h2.iconimg-1 {
          background-image: url(../img/ico_rank01.png); }
        .lp-ad .tab-hikaku .hikaku-box .box h2.iconimg-2 {
          background-image: url(../img/ico_rank02.png); }
        .lp-ad .tab-hikaku .hikaku-box .box h2.iconimg-3 {
          background-image: url(../img/ico_rank03.png); }
        .lp-ad .tab-hikaku .hikaku-box .box h2.iconimg-4 {
          background-image: url(../img/ico_rank04.png); }
        .lp-ad .tab-hikaku .hikaku-box .box h2.iconimg-5 {
          background-image: url(../img/ico_rank05.png); }
      .lp-ad .tab-hikaku .hikaku-box .box .flex {
        display: flex;
        justify-content: space-around; }
        .lp-ad .tab-hikaku .hikaku-box .box .flex .box-left {
          width: 26%; }
        .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right {
          width: 65%; }
          .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .spec table {
            border-top: 1px solid #DDD; }
            .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .spec table th {
              border-left: 1px solid #DDD;
              background: #F3F3F3;
              width: 40%;
              padding: 1rem;
              border-bottom: 1px solid #CCC;
              border-right: 1px solid #CCC; }
              @media only screen and (max-width: 767px) {
                .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .spec table th {
                  font-size: 1.2rem; } }
            .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .spec table td {
              border-right: 1px solid #DDD;
              padding: 1rem;
              border-bottom: 1px solid #DDD;
              border-left: 1px solid #DDD;
              vertical-align: middle;
              text-align: center; }
              @media only screen and (max-width: 767px) {
                .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .spec table td {
                  font-size: 1.2rem;
                  padding: 0.8rem 0.5rem;
                  font-size: 1.1rem; } }
          .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right ul {
            border-radius: 5px;
            background: #FCFDFD;
            box-shadow: 0 1px 4px #ddd;
            border: 1px solid #DDD;
            letter-spacing: 0.05em;
            padding: 1.5rem 1rem 0rem 0.5rem; }
            .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right ul li {
              font-size: 1.6rem;
              line-height: 1.4;
              margin: 0 0 0 1rem;
              background: url(../img/common/ico_check.png) left 0.7rem no-repeat;
              background-size: 1.5rem;
              padding-left: 2.5rem;
              margin-bottom: 1rem; }
              @media only screen and (max-width: 767px) {
                .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right ul li {
                  font-size: 1.3rem;
                  margin: 0 0 1rem 0.5rem;
                  padding-left: 2rem; } }
          .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .campain dl {
            border: 2px solid #f8a117;
            border-radius: 5px; }
            .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .campain dl dt {
              background: #f8a117;
              padding: 0.5rem 1rem;
              border-radius: 3px 3px 0px 0px;
              color: #FFF;
              font-size: 1.6rem;
              font-weight: bold; }
              @media only screen and (max-width: 767px) {
                .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .campain dl dt {
                  font-size: 1.5rem; } }
            .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .campain dl dd {
              padding: 1rem; }
              @media only screen and (max-width: 767px) {
                .lp-ad .tab-hikaku .hikaku-box .box .flex .box-right .campain dl dd {
                  font-size: 1.3rem; } }
      .lp-ad .tab-hikaku .hikaku-box .box .button {
        margin: 1rem auto; }
        .lp-ad .tab-hikaku .hikaku-box .box .button .cv {
          width: 100%;
          margin: auto;
          font-size: 2.2rem; }
          @media only screen and (max-width: 767px) {
            .lp-ad .tab-hikaku .hikaku-box .box .button .cv {
              font-size: 1.6rem;
              line-height: 1.4; } }
          .lp-ad .tab-hikaku .hikaku-box .box .button .cv span {
            font-size: 1.4rem; }
            @media only screen and (max-width: 767px) {
              .lp-ad .tab-hikaku .hikaku-box .box .button .cv span {
                font-size: 1.1rem; } }
          .lp-ad .tab-hikaku .hikaku-box .box .button .cv a {
            padding: 0.7rem 2rem;
            letter-spacing: 0.1rem;
            line-height: 1.1; }
            @media only screen and (max-width: 767px) {
              .lp-ad .tab-hikaku .hikaku-box .box .button .cv a {
                line-height: 1.2;
                padding: 0.5rem; } }
  .lp-ad .box-attention {
    padding: 2rem !important; }
    @media only screen and (max-width: 767px) {
      .lp-ad .box-attention {
        padding: 2rem 1rem 0rem !important; } }
    .lp-ad .box-attention .point {
      width: 65% !important; }
      @media only screen and (max-width: 767px) {
        .lp-ad .box-attention .point {
          width: 88% !important; } }
    .lp-ad .box-attention .rank .box .button .cv a {
      line-height: 1.9;
      padding: 1.3rem; }
      @media only screen and (max-width: 767px) {
        .lp-ad .box-attention .rank .box .button .cv a {
          line-height: 1; } }
    @media only screen and (max-width: 767px) {
      .lp-ad .box-attention .skill {
        margin: 0rem 0.5rem 1rem;
        width: 60%; } }
  .lp-ad .title-merit {
    padding-top: 2rem; }
  .lp-ad .merit {
    padding-bottom: 2rem; }
    .lp-ad .merit .wrap {
      width: 100%; }
      .lp-ad .merit .wrap .main {
        width: 100% !important; }
  .lp-ad .demerit {
    padding: 2rem 0 !important; }
    .lp-ad .demerit .wrap {
      width: 100%; }
      .lp-ad .demerit .wrap .main {
        width: 95% !important; }

/*yssのみ　配色違い*/
.lp-yss .title-rank-h2 {
  background: #304e97; }
.lp-yss .rank .box {
  border-top: 5px solid #6998ff; }
  .lp-yss .rank .box .point h3 {
    background: #d6ddfc; }
  .lp-yss .rank .box .spec th {
    background: #d6ddfc; }
  .lp-yss .rank .box .skill {
    padding: 0.5rem; }
    .lp-yss .rank .box .skill h3 {
      background: #fff;
      margin: 1rem 1.7rem;
      border-left: solid 9px #8b9cff;
      padding: 1rem;
      font-size: 1.6rem; }
  .lp-yss .rank .box .review dt {
    background: #e5e9ff;
    color: #333; }
  .lp-yss .rank .box .maintext {
    background: #fafbff; }
    .lp-yss .rank .box .maintext h3 {
      background: #8fabff;
      color: #fff; }

/*ydn gadのみ　sp rank01だけもっと見る無しで表示しておく*/
@media only screen and (max-width: 767px) {
  .lp-ydn #rank01 #acMenu dt,
  .lp-gad #rank01 #acMenu dt {
    display: none; }
  .lp-ydn #rank01 #acMenu dd,
  .lp-gad #rank01 #acMenu dd {
    display: block; } }
/* .rank-side
----------------------------------------------------------------------*/
.rank-side {
  margin: 0 -1% 3rem -1%;
  display: flex; }
  @media only screen and (max-width: 767px) {
    .rank-side {
      display: inherit; } }
  .rank-side .box {
    border: 1px solid #DDD;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0 1px 4px #DDD;
    border-top: 5px solid #0049b2;
    width: 31.33%;
    margin: 0 1%;
    padding: 0 -1%; }
    @media only screen and (max-width: 767px) {
      .rank-side .box {
        margin: 0 0 2rem;
        width: 100%; } }
    .rank-side .box .title {
      background: #FFF;
      border-radius: 4px 4px 0 0;
      line-height: 1;
      margin: 0 0 2rem 0;
      border-bottom: 1px solid #CCC; }
      .rank-side .box .title h3 {
        font-size: 1.8rem;
        line-height: 1.3;
        padding: 1.5rem 2rem 1.5rem 7.5rem; }
      .rank-side .box .title a {
        color: #222;
        font-size: 1.8rem; }
      .rank-side .box .title .icon {
        background-size: 4rem;
        background-repeat: no-repeat;
        background-position: 2rem; }
      .rank-side .box .title .iconimg-1 {
        background-image: url(../img/ico_rank01.png); }
      .rank-side .box .title .iconimg-2 {
        background-image: url(../img/ico_rank02.png); }
      .rank-side .box .title .iconimg-3 {
        background-image: url(../img/ico_rank03.png); }
  .rank-side .box2 {
    width: 20%; }
    .rank-side .box2 .banner {
      background: none;
      float: none;
      margin: 0 0 1.5rem;
      padding: 0 1rem;
      width: 100%; }
    .rank-side .box2 h3 {
      font-size: 1.5rem;
      text-align: center; }
      .rank-side .box2 h3 a {
        color: #222; }
  .rank-side .banner {
    margin: 0 0 0 6%;
    width: 30%;
    float: left;
    background: #F2FEFE;
    /*img{width:160px;height:160px;}*/ }
  .rank-side .spec {
    width: 54%;
    float: right;
    margin: 0 6% 0 0; }
    .rank-side .spec dt {
      font-size: 1.05rem;
      background: #F3F3F3;
      border-top: 1px solid #CCC;
      padding: 0.2rem 0.5rem; }
    .rank-side .spec dd {
      font-size: 1.05rem;
      border-top: 1px solid #CCC;
      padding: 0.5rem 0.5rem; }
  .rank-side .skill ul {
    padding: 1rem 2rem .5rem; }
  .rank-side .skill li {
    background: #FFF;
    border-radius: 5px;
    text-align: center;
    display: inline-flex;
    font-size: 1.05rem;
    padding: 0.6rem;
    float: left;
    border: 1px solid #9C9EB1;
    margin: 0 .6rem .5rem 0; }
    .rank-side .skill li.off {
      border: 1px solid #ddd;
      color: #ddd; }
    .rank-side .skill li img {
      width: 12px;
      height: 12px;
      margin: 0 0.4rem 0 0; }
  .rank-side .skill.right {
    width: 55%;
    float: right;
    margin: 0 5% 0 0; }
    .rank-side .skill.right li {
      padding: 0.5rem;
      margin: 0 0 .5rem 0; }
      .rank-side .skill.right li:nth-child(odd) {
        margin: 0 .6rem .5rem 0; }
  .rank-side .point {
    margin: 0 2rem 1rem 2rem;
    border-radius: 5px;
    background: #F0FBFB;
    letter-spacing: 0.05em; }
    .rank-side .point h3 {
      padding: 1rem;
      font-size: 1.4rem;
      background: #daeaf1;
      line-height: 1.2;
      border-radius: 5px 5px 0 0; }
    .rank-side .point ul {
      padding: 1rem 0 0.75rem 0; }
    .rank-side .point li {
      font-size: 1.3rem;
      line-height: 1.4;
      padding: 0.25rem 0.75rem 0.25rem 1.5rem;
      margin: 0 0 0 1rem;
      background: url(../img/common/ico_check.png) no-repeat;
      background-size: 1rem;
      background-position: 0 0.7rem; }
  @media only screen and (max-width: 767px) {
    .rank-side.lp2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 0; } }
  @media only screen and (max-width: 767px) {
    .rank-side.lp2 .box2 {
      width: 33.3%;
      margin-bottom: 2rem; } }
  .rank-side.lp2 .box2 h3 {
    font-size: 1.4rem; }

.box-1 .rank-side .box {
  margin: auto;
  width: 85%; }
  @media only screen and (max-width: 767px) {
    .box-1 .rank-side .box {
      width: 100%; } }
.box-1 .rank-side .banner {
  margin: 0 0 1.5rem 6%;
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .box-1 .rank-side .banner {
      margin: 0 0 0 6%;
      width: 30%; } }
.box-1 .rank-side .spec {
  width: 59%; }
  @media only screen and (max-width: 767px) {
    .box-1 .rank-side .spec {
      width: 54%; } }
.box-1 .rank-side .skill {
  float: right;
  margin: 0 6% 0 0;
  width: 59%; }
  @media only screen and (max-width: 767px) {
    .box-1 .rank-side .skill {
      float: inherit;
      margin: 0;
      width: 100%; } }
  .box-1 .rank-side .skill ul {
    padding-left: 0; }
    @media only screen and (max-width: 767px) {
      .box-1 .rank-side .skill ul {
        padding-left: 2rem; } }

.box-2 .rank-side .box {
  width: 48%; }
  @media only screen and (max-width: 767px) {
    .box-2 .rank-side .box {
      width: 100%; } }

/* search
----------------------------------------------------------------------*/
.search {
  margin: 0rem 0 3rem 0;
  background: #F3F3F3;
  border-radius: 5px;
  box-shadow: 0 1px 4px #DDD; }
  @media only screen and (max-width: 767px) {
    .search {
      margin: -1rem 0rem 4rem; } }
  .search h3 {
    font-size: 2rem;
    margin: 0 0 0 0;
    background: #050d5c;
    color: #FFF;
    padding: 2rem 2rem 2rem 5rem;
    border-radius: 5px 5px 0 0;
    line-height: 1;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .search h3 {
        background: none;
        color: #050d5c;
        font-size: 1.6rem;
        padding: 2rem 1.5rem 2rem 4.5rem; } }
    .search h3 img {
      position: absolute;
      width: 30px;
      left: 2rem;
      top: 28%; }
      @media only screen and (max-width: 767px) {
        .search h3 img {
          width: 25px;
          left: 1.5rem;
          top: 25%; } }
  .search .js-accordion-title {
    position: relative; }
    .search .js-accordion-title::after {
      border-right: solid 2px #050d5c;
      border-top: solid 2px #050d5c;
      content: "";
      display: block;
      height: 8px;
      position: absolute;
      right: 25px;
      top: 38%;
      transition: all 0.2s ease-in-out;
      transform: rotate(135deg);
      width: 8px;
      -webkit-transform: rotate(135deg); }
    .search .js-accordion-title.open::after {
      top: 45%;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg); }
  .search .input-box dl {
    display: flex;
    border-bottom: 1px solid #DDD;
    padding: 2rem 1.5rem 1rem 1.5rem; }
    @media only screen and (max-width: 767px) {
      .search .input-box dl {
        display: inherit;
        padding: 1rem 1rem 0.6rem; } }
  .search .input-box dt {
    font-size: 1.3rem;
    font-weight: bold;
    width: 120px; }
    @media only screen and (max-width: 767px) {
      .search .input-box dt {
        font-size: 1.2rem;
        margin-bottom: .5rem;
        width: 100%; } }
  .search .input-box dd {
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
  .search .input-box label {
    width: 24%;
    margin: 0 1% 8px 0; }
    .search .input-box label span {
      padding: 1rem 1rem;
      background: #FFF;
      border-radius: 5px;
      border: 1px solid #222;
      margin: 0 0 0 1%;
      box-shadow: 0 1px 4px #DDD;
      cursor: pointer;
      display: flex;
      font-size: 1.1rem; }
      @media only screen and (max-width: 767px) {
        .search .input-box label span {
          padding: 0.5rem; } }
  .search .input-box input {
    display: none;
    width: 25%; }
  .search .input-box input:checked + span {
    background: #f4cc2d; }
  .search .submit-box {
    padding: 2rem 6rem; }
    .search .submit-box .submit-btn {
      border: 0;
      background: #e22c2c;
      color: #FFF;
      display: block;
      margin: auto;
      width: 100%;
      font-weight: bold;
      padding: 1.5rem 2rem;
      font-size: 2.4rem;
      border-radius: 5px;
      box-shadow: 0 4px 0 #a10b0c;
      cursor: pointer; }
      @media only screen and (max-width: 767px) {
        .search .submit-box .submit-btn {
          font-size: 1.8rem;
          padding: 1rem; } }
      .search .submit-box .submit-btn:hover {
        opacity: 0.7; }
  .search .cat-list {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 1.5rem .5rem; }
    @media only screen and (max-width: 767px) {
      .search .cat-list {
        padding: 1rem 1rem 0; } }
    .search .cat-list li {
      background: #fff;
      border: 1px solid #222;
      border-radius: 5px;
      margin-bottom: 1.5rem;
      width: 48.5%; }
      @media only screen and (max-width: 767px) {
        .search .cat-list li {
          font-size: 1.2rem;
          margin-bottom: 1rem; } }
      .search .cat-list li:nth-child(odd) {
        margin-right: 3%; }
      .search .cat-list li a {
        display: block;
        line-height: 1.3;
        padding: 1.5rem 1rem;
        text-decoration: none; }
        @media only screen and (max-width: 767px) {
          .search .cat-list li a {
            padding: 1rem; } }

.search-simple .input-box dl {
  padding: 1.5rem; }
  @media only screen and (max-width: 767px) {
    .search-simple .input-box dl {
      padding: 1.5rem !important; } }
.search-simple .input-box dt {
  font-size: 1.2rem;
  width: 55px; }
.search-simple .input-box dd {
  display: block; }
.search-simple .input-box input {
  display: inline;
  width: auto;
  vertical-align: text-top; }
  .search-simple .input-box input:checked + span {
    background: none; }
.search-simple .input-box label span {
  background: none;
  border: none;
  box-shadow: none;
  display: inline;
  padding: 0;
  font-size: 1.2rem; }

/*lp-b search*/
#lp-b .search-simple {
  margin: 3rem auto; }
  @media only screen and (max-width: 767px) {
    #lp-b .search-simple {
      margin: auto; } }
  #lp-b .search-simple .search {
    background: #fff; }
    @media only screen and (max-width: 767px) {
      #lp-b .search-simple .search {
        background: #F3F3F3; } }
    #lp-b .search-simple .search .submit-box .submit-btn {
      background: #02bb80;
      box-shadow: 0 4px 0 #046c4b; }

/*看板に検索ボックスある分　SP*/
@media only screen and (max-width: 767px) {
  .search .input-box02 h3 {
    padding: 1rem 1.5rem 1rem 4.5rem;
    text-align: center; }
    .search .input-box02 h3 img {
      left: 7.5rem;
      top: 17%; }
  .search .input-box02 dl {
    padding: 0rem 1.5rem 1rem; }
    .search .input-box02 dl dt {
      font-size: 1.2rem;
      width: 55px;
      margin-bottom: 0.5rem;
      font-weight: bold; }
    .search .input-box02 dl dd {
      width: 100%;
      display: block; }
      .search .input-box02 dl dd span {
        background: none;
        border: none;
        box-shadow: none;
        display: inline;
        padding: 0;
        font-size: 1.2rem; }
  .search .input-box02 .js-accordion-title {
    font-size: 1.4rem;
    font-weight: bold;
    background: #fff;
    width: 94%;
    margin: auto;
    padding: 0.6rem;
    text-align: center;
    border: solid 1px #ccc; }
    .search .input-box02 .js-accordion-title::after {
      top: 28%; } }
/* result
----------------------------------------------------------------------*/
#result h2 {
  border-left: 6px solid #050d5c;
  font-size: 2.5rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
  padding: 0.3rem 0 0.5rem 1rem; }
  @media only screen and (max-width: 767px) {
    #result h2 {
      font-size: 2rem; } }
#result .result-head {
  align-items: center;
  background: #F3F3F3;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding: 0rem 1.5rem; }
  @media only screen and (max-width: 767px) {
    #result .result-head {
      padding: 1rem; } }
  #result .result-head .result-number {
    align-items: center;
    display: flex;
    margin-bottom: 0;
    margin-right: 1rem; }
    #result .result-head .result-number .result-text {
      margin-right: 1rem; }
      #result .result-head .result-number .result-text strong {
        color: #c41c1c;
        font-size: 3rem;
        font-weight: 700;
        padding: 0;
        line-height: 1.5;
        margin: 0 0.2rem 0 0; }
        @media only screen and (max-width: 767px) {
          #result .result-head .result-number .result-text strong {
            font-size: 2rem; } }
    #result .result-head .result-number .result-order {
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        #result .result-head .result-number .result-order {
          font-size: 1.3rem; } }

.rank .result-head {
  padding: 0.6rem 1.5rem !important;
  margin-bottom: 1.5rem !important; }

#noresult h2 {
  border-left: 6px solid #050d5c;
  font-size: 2.5rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
  padding: 0.3rem 0 0.5rem 1rem; }
  @media only screen and (max-width: 767px) {
    #noresult h2 {
      font-size: 2rem; } }
#noresult p {
  margin: 5rem 0; }
  @media only screen and (max-width: 767px) {
    #noresult p {
      margin: 4rem 0;
      padding: 0 1rem; } }

@media only screen and (max-width: 767px) {
  .kekka .list {
    padding: 0 1rem; } }
.kekka .list .box {
  border: 1px solid #DDD;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 1px 4px #DDD;
  margin: 0 0 3rem 0; }
  .kekka .list .box .top-box {
    display: flex;
    margin: 0 2rem 1.5rem 2rem; }
  .kekka .list .box .title {
    background: #FFF;
    border-radius: 4px 4px 0 0;
    line-height: 1;
    margin: 0 0 2rem 0;
    border-bottom: 1px solid #CCC;
    display: flex; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .title {
        display: inherit; } }
    .kekka .list .box .title h3 {
      font-size: 2rem;
      padding: 2rem;
      width: 80%; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .title h3 {
          padding: 1.5rem;
          width: 100%; } }
    .kekka .list .box .title a {
      color: #222;
      font-size: 2rem; }
    .kekka .list .box .title .icon {
      background-size: 4rem;
      background-repeat: no-repeat;
      background-position: 2rem; }
    .kekka .list .box .title .iconimg-1 {
      background-image: url(../img/ico_rank01.png); }
    .kekka .list .box .title .iconimg-2 {
      background-image: url(../img/ico_rank02.png); }
    .kekka .list .box .title .iconimg-3 {
      background-image: url(../img/ico_rank03.png); }
    .kekka .list .box .title .iconimg-4 {
      background-image: url(../img/ico_rank04.png); }
    .kekka .list .box .title .iconimg-5 {
      background-image: url(../img/ico_rank05.png); }
    .kekka .list .box .title .iconimg-6 {
      background-image: url(../img/ico_rank06.png); }
    .kekka .list .box .title .iconimg-7 {
      background-image: url(../img/ico_rank07.png); }
    .kekka .list .box .title .iconimg-8 {
      background-image: url(../img/ico_rank08.png); }
    .kekka .list .box .title .iconimg-9 {
      background-image: url(../img/ico_rank09.png); }
  .kekka .list .box .banner {
    width: 100%; }
  .kekka .list .box .skill {
    display: grid;
    width: 100%;
    padding: 0 2rem 0 0; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .skill {
        margin-bottom: 1.5rem;
        margin-left: 1.5rem; } }
    .kekka .list .box .skill ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row; }
    .kekka .list .box .skill li {
      display: flex;
      font-size: 1.1rem;
      border: 1px solid #9C9EB1;
      border-radius: 5px;
      padding: .8rem;
      align-items: center;
      margin: 0 0 0 1rem; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .skill li {
          font-size: 1rem;
          margin: 0 .3rem;
          padding: .5rem; } }
      .kekka .list .box .skill li.off {
        border: 1px solid #ddd;
        color: #ddd; }
        .kekka .list .box .skill li.off img {
          opacity: 0.5; }
      .kekka .list .box .skill li img {
        margin-right: 0.5rem;
        width: 1.5rem; }
  .kekka .list .box .box-sp {
    margin: 0 2rem; }
    .kekka .list .box .box-sp dl {
      margin-bottom: 2rem; }
      .kekka .list .box .box-sp dl dt {
        background: #f3f3f3;
        padding: 0.5rem;
        text-align: center;
        font-size: 1.2rem;
        font-weight: bold;
        border: 1px solid #DDD; }
      .kekka .list .box .box-sp dl dd {
        padding: 1rem;
        font-size: 1.3rem;
        border: 1px solid #DDD; }
    .kekka .list .box .box-sp .campain {
      margin-bottom: 2rem; }
      .kekka .list .box .box-sp .campain dl {
        margin-bottom: 0; }
        .kekka .list .box .box-sp .campain dl dt {
          font-size: 1.3rem;
          border: none;
          text-align: center;
          background: #050d5c;
          color: #FFF;
          font-weight: bold;
          border-radius: 20px;
          margin: 0 0 1rem 0; }
        .kekka .list .box .box-sp .campain dl dd {
          border: none;
          padding: 0; }
          .kekka .list .box .box-sp .campain dl dd .txt-red {
            color: #FE3E3E;
            font-weight: 700; }
          .kekka .list .box .box-sp .campain dl dd p {
            font-size: 1.3rem; }
          .kekka .list .box .box-sp .campain dl dd big {
            font-size: 1.5rem; }
          .kekka .list .box .box-sp .campain dl dd small {
            font-size: 1.2rem;
            color: #999;
            line-height: 1.5;
            margin-top: 0.5rem;
            display: inline-block; }
  .kekka .list .box .point {
    margin: 2rem 0 0 2%;
    width: 98%;
    border-radius: 5px;
    background: #F0FBFB;
    letter-spacing: 0.05em; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .point {
        margin: 2rem 0;
        width: 100%; } }
    .kekka .list .box .point h3 {
      padding: 1rem 2rem;
      font-size: 1.8rem;
      background: #cdeefd;
      line-height: 1.2;
      margin: 0 0 1rem 0;
      border-radius: 5px 5px 0 0; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .point h3 {
          font-size: 1.4rem;
          margin: 0;
          padding: 1rem 1.5rem; } }
    .kekka .list .box .point ul {
      padding: 0 1rem 1rem 1rem; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .point ul {
          padding: 1rem 1.5rem; } }
    .kekka .list .box .point li {
      font-size: 1.6rem;
      line-height: 1.4;
      padding: 0.25rem 3rem;
      margin: 0 0 0 1rem;
      background: url(../img/common/ico_check.png) left 0.7rem no-repeat;
      background-size: 1.5rem; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .point li {
          font-size: 1.3rem;
          padding: 0 0 0 2.3rem;
          margin: 0 0 1rem;
          background: url(../img/common/ico_check.png) left 0.3rem no-repeat;
          background-size: 1.3rem; } }
      .kekka .list .box .point li:last-child {
        margin-bottom: 0; }
  .kekka .list .box .campain {
    background: #fffdd3;
    border: 1px solid #dfd959;
    padding: 1rem 1rem;
    border-radius: 5px;
    margin: 1rem 0; }
    .kekka .list .box .campain a {
      text-decoration: none; }
    .kekka .list .box .campain dt {
      text-align: center;
      background: #050d5c;
      color: #FFF;
      font-weight: bold;
      border-radius: 12px;
      margin: 0 0 0.5rem 0; }
    .kekka .list .box .campain dd {
      color: #222;
      font-size: 1.3rem; }
      .kekka .list .box .campain dd .txt-red {
        color: #FE3E3E;
        font-weight: 700; }
      .kekka .list .box .campain dd p {
        font-size: 1.3rem;
        line-height: 1.5; }
      .kekka .list .box .campain dd big {
        font-size: 1.5rem; }
      .kekka .list .box .campain dd small {
        font-size: 1.2rem;
        color: #999;
        line-height: 1.5;
        margin-top: 0.5rem;
        display: inline-block; }
    .kekka .list .box .campain img {
      display: none; }
  .kekka .list .box .left-box {
    width: 20%; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .left-box {
        width: 35%; } }
  .kekka .list .box .right-box {
    width: 80%; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .right-box {
        width: 65%; } }
    .kekka .list .box .right-box .list-left {
      width: 43%;
      margin: 0 0 0 2%; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .right-box .list-left {
          margin: 0 0 0 5%;
          width: 95%; } }
    .kekka .list .box .right-box .list-right {
      width: 58%;
      margin: 0 0 0 2%; }
      @media only screen and (max-width: 767px) {
        .kekka .list .box .right-box .list-right {
          margin: 0;
          width: 100%; } }
  .kekka .list .box .specs {
    display: flex; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .specs {
        display: inherit; } }
    .kekka .list .box .specs br {
      display: none; }
    .kekka .list .box .specs dt {
      background: #f3f3f3;
      padding: 0.5rem;
      text-align: center;
      font-size: 1.3rem;
      font-weight: bold;
      border: 1px solid #DDD; }
    .kekka .list .box .specs dd {
      padding: 1rem;
      font-size: 1.3rem;
      border: 1px solid #DDD; }
    .kekka .list .box .specs th {
      background: #F3F3F3;
      padding: 0.5rem;
      border: 1px solid #DDD;
      width: 35%; }
    .kekka .list .box .specs td {
      padding: 0.5rem 1rem;
      border: 1px solid #DDD;
      font-size: 1.3rem; }
  .kekka .list .box .box-button {
    display: flex;
    margin: 0 2rem 2rem 2rem;
    text-align: center;
    font-size: 1.6rem;
    text-shadow: 2px 2px 2px #666; }
    .kekka .list .box .box-button a {
      text-decoration: none;
      color: #FFF;
      font-weight: bold;
      display: block; }
    .kekka .list .box .box-button p {
      border-radius: 5px;
      box-shadow: 0 4px 0 #018359;
      padding: 0.5rem 1rem;
      font-size: 2rem; }
    .kekka .list .box .box-button .more {
      width: 20%;
      background: #CCC; }
    .kekka .list .box .box-button .cv {
      width: 80%;
      background: #e22c2c;
      margin: 0 0 0 2%; }
  .kekka .list .box .button .cv {
    font-size: 2rem; }
  .kekka .list .box .button-flex .info {
    font-size: 2rem; }
    @media only screen and (max-width: 767px) {
      .kekka .list .box .button-flex .info {
        font-size: 1.6rem;
        line-height: 1.2; } }

.table-ranking {
  overflow-x: auto;
  margin: 3rem 0 5rem; }
  .table-ranking .blue {
    background: #daeaf1; }
  .table-ranking table {
    border-top: 1px solid #DDD;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr; }
    .table-ranking table thead th small {
      font-size: 1.1rem; }
    .table-ranking table tbody br {
      display: none; }
    .table-ranking table tbody th {
      background: #daeaf1; }
    .table-ranking table th, .table-ranking table td {
      writing-mode: horizontal-tb;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: horizontal-tb; }
    .table-ranking table th {
      background: #F3F3F3;
      border-bottom: 1px solid #DDD;
      border-right: 1px solid #DDD;
      text-align: left;
      padding: 1rem; }
    .table-ranking table td {
      width: 320px;
      border-bottom: 1px solid #DDD;
      border-right: 1px solid #DDD;
      padding: 1rem; }
      .table-ranking table td li {
        display: inline-block; }
    .table-ranking table .title {
      display: flex;
      font-size: 1.6rem; }
      .table-ranking table .title img {
        width: 24px;
        margin: 0 1rem 0 0; }
    .table-ranking table .banner {
      position: relative;
      height: 100px;
      margin: auto; }
      .table-ranking table .banner .rank {
        position: absolute;
        width: 40px;
        background: #FFF;
        border: 1px solid #DDD;
        border-radius: 5px; }
      .table-ranking table .banner img {
        height: 100px;
        margin: auto; }
    .table-ranking table .comname {
      text-align: center;
      font-size: 1rem; }
    .table-ranking table .rating {
      width: 100px;
      margin: auto; }

/* .merit
----------------------------------------------------------------------*/
.title-merit {
  background: #D8EBF2;
  color: #050d5c;
  font-size: 3rem;
  margin-top: 0;
  padding: 4rem 1rem 0;
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .title-merit {
      font-size: 2.5rem;
      padding: 2rem 1rem 1rem 0; } }

.merit {
  background: #D8EBF2;
  border-radius: 0 0 5px 5px;
  padding: 2rem 1.5rem 4rem; }
  @media only screen and (max-width: 767px) {
    .merit {
      padding: 0; } }
  .merit li {
    background: #fff;
    box-shadow: 0 8px 8px -10px #aaa;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1.5rem; }
    @media only screen and (max-width: 767px) {
      .merit li {
        display: inherit; } }
  .merit img {
    margin-right: 5%;
    height: 25%;
    width: 25%; }
    @media only screen and (max-width: 767px) {
      .merit img {
        height: 40%;
        margin: auto;
        width: 40%; } }
  .merit dl {
    margin-top: 1rem;
    width: 70%; }
    @media only screen and (max-width: 767px) {
      .merit dl {
        width: 100%; } }
    .merit dl:last-child {
      margin-bottom: 0; }
    .merit dl dt {
      color: #050d5c;
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1rem; }
    .merit dl dd p {
      font-size: 1.6rem;
      margin-bottom: 1rem; }
      .merit dl dd p:last-child {
        margin-bottom: 0; }

/* table-hikaku
----------------------------------------------------------------------*/
.title-hikaku {
  background: #050d5c;
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-size: 2rem;
  padding: 2rem 2rem 2rem 5.5rem;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .title-hikaku {
      font-size: 1.6rem; } }
  .title-hikaku img {
    position: absolute;
    width: 25px;
    left: 2rem;
    top: 28%; }

.table-hikaku {
  margin-bottom: 3rem; }
  .table-hikaku table {
    border-left: 1px solid #abd3e5; }
    @media only screen and (max-width: 767px) {
      .table-hikaku table {
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; } }
    .table-hikaku table th {
      background: #daeaf1;
      border-bottom: 1px solid #abd3e5;
      border-right: 1px solid #abd3e5;
      font-size: 1.3rem;
      padding: .5rem 1rem;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .table-hikaku table th.kotei {
          position: sticky;
          left: 0;
          z-index: 1; } }
    .table-hikaku table td {
      border-bottom: 1px solid #abd3e5;
      border-right: 1px solid #abd3e5;
      font-size: 1.3rem;
      padding: .5rem 1rem;
      text-align: center;
      vertical-align: middle; }
      .table-hikaku table td.title {
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .table-hikaku table td.title {
            position: sticky;
            left: 0;
            background: #fff; } }
        .table-hikaku table td.title img {
          margin: .5rem auto;
          width: 80px; }
    .table-hikaku table ul {
      padding-left: 1.5rem; }
    .table-hikaku table li {
      font-size: 1.2rem;
      list-style: disc;
      text-align: left; }
    .table-hikaku table strong {
      font-size: 1.2rem; }
    .table-hikaku table .button {
      margin: 0; }
      .table-hikaku table .button .cv {
        font-size: 1.3rem;
        margin: 0;
        width: 100%; }
        .table-hikaku table .button .cv a {
          padding: 0.5rem; }
  .table-hikaku .result-head {
    margin-bottom: 1rem !important;
    margin: 1rem auto;
    padding: 0.6rem 1.5rem !important; }

/* textcontents
----------------------------------------------------------------------*/
.textcontents {
  margin-bottom: 5rem; }
  .textcontents .title {
    margin-bottom: 2rem;
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      .textcontents .title {
        margin-top: -2rem; } }
    .textcontents .title h1 {
      float: left;
      font-size: 2.3rem; }
      @media only screen and (max-width: 767px) {
        .textcontents .title h1 {
          font-size: 1.5rem; } }
      .textcontents .title h1 a {
        color: #222;
        font-size: 3rem;
        margin-right: .3rem; }
        @media only screen and (max-width: 767px) {
          .textcontents .title h1 a {
            font-size: 2rem; } }
    .textcontents .title .img-rating {
      float: right;
      font-size: 1.3rem;
      display: block;
      margin-top: 1rem; }
      @media only screen and (max-width: 767px) {
        .textcontents .title .img-rating {
          display: none; } }
      .textcontents .title .img-rating em {
        color: #FE3E3E;
        display: block;
        float: right;
        font-size: 1.6rem;
        font-style: normal;
        font-weight: 700;
        margin-left: 0.5rem; }
      .textcontents .title .img-rating img {
        height: 20px;
        float: right; }
  .textcontents h2 {
    font-size: 2.4rem; }
  .textcontents article p {
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 2rem 0; }
  .textcontents .point {
    background: #FCFDFD;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 0 1px 4px #ddd;
    letter-spacing: 0.05em;
    margin: 0;
    float: right;
    width: 68%; }
    @media only screen and (max-width: 767px) {
      .textcontents .point {
        float: inherit;
        width: 100%; } }
    .textcontents .point dt {
      background: #cdeefd;
      border-radius: 5px 5px 0 0;
      font-size: 1.8rem;
      font-weight: 700;
      padding: 1rem 2rem;
      line-height: 1.2;
      margin: 0 0 1rem 0; }
      @media only screen and (max-width: 767px) {
        .textcontents .point dt {
          font-size: 1.4rem;
          margin: 0;
          padding: 1rem 1.5rem; } }
    .textcontents .point ul {
      radius: 0 0 5px 5px;
      padding: 0 1rem 1rem 1rem; }
      @media only screen and (max-width: 767px) {
        .textcontents .point ul {
          padding: 1rem 1.5rem; } }
      .textcontents .point ul li {
        background: url(../img/common/ico_check.png) left 0.7rem no-repeat;
        background-size: 1.5rem;
        font-size: 1.6rem;
        line-height: 1.4;
        margin: 0 0 0 1rem;
        padding: 0.5rem 3rem; }
        @media only screen and (max-width: 767px) {
          .textcontents .point ul li {
            font-size: 1.3rem;
            padding: 0 0 0 2.3rem;
            margin: 0 0 1rem;
            background: url(../img/common/ico_check.png) left 0.3rem no-repeat;
            background-size: 1.3rem; } }
        .textcontents .point ul li:last-child {
          margin-bottom: 0; }
  .textcontents .spec {
    display: flex;
    margin: 0 2rem 2rem 2rem; }
    @media only screen and (max-width: 767px) {
      .textcontents .spec {
        display: block;
        margin: auto; } }
    .textcontents .spec .spec-l {
      width: 48.5%;
      margin: 0 1.5% 0 0; }
      @media only screen and (max-width: 767px) {
        .textcontents .spec .spec-l {
          width: 100%;
          margin: auto; } }
      .textcontents .spec .spec-l th {
        background: #F3F3F3;
        width: 40%;
        padding: 1rem;
        border-bottom: 1px solid #CCC;
        text-align: left; }
      .textcontents .spec .spec-l td {
        padding: 1rem;
        border-bottom: 1px solid #DDD; }
    .textcontents .spec .spec-r {
      width: 48.5%;
      margin: 0 0 0 1.5%; }
      @media only screen and (max-width: 767px) {
        .textcontents .spec .spec-r {
          width: 100%;
          margin: auto; } }
      .textcontents .spec .spec-r th {
        background: #F3F3F3;
        width: 40%;
        padding: 1rem;
        border-bottom: 1px solid #CCC;
        text-align: left; }
      .textcontents .spec .spec-r td {
        padding: 1rem;
        border-bottom: 1px solid #DDD; }
  .textcontents .campain {
    margin: 3rem 0; }
    .textcontents .campain dl {
      border-radius: 5px;
      border: 1px solid #CCC;
      margin: 0 0 2rem 0;
      box-shadow: 0 8px 8px -10px #aaa; }
      .textcontents .campain dl dt {
        font-size: 1.6rem;
        padding: 0.8rem 1rem;
        border-bottom: 1px solid #CCC;
        background: #f8a117;
        color: #FFF;
        font-weight: bold; }
      .textcontents .campain dl dd {
        font-size: 1.5rem;
        line-height: 1.8;
        padding: 1rem 1.5rem; }
        .textcontents .campain dl dd .txt-red {
          color: #FE3E3E;
          font-weight: 700; }
        .textcontents .campain dl dd big {
          font-size: 1.7rem; }
        .textcontents .campain dl dd small {
          font-size: 1.3rem;
          color: #999;
          line-height: 1.5;
          margin-top: 0.5rem;
          display: inline-block; }
        .textcontents .campain dl dd img {
          margin: 1.5rem auto;
          width: 85%; }
        .textcontents .campain dl dd .pc-none {
          display: none; }
          @media only screen and (max-width: 767px) {
            .textcontents .campain dl dd .pc-none {
              display: block; } }
        .textcontents .campain dl dd .sp-none {
          display: block; }
          @media only screen and (max-width: 767px) {
            .textcontents .campain dl dd .sp-none {
              display: none; } }
  .textcontents .button {
    margin: 3rem auto 2rem; }
    .textcontents .button .cv {
      font-size: 2rem; }
      @media only screen and (max-width: 767px) {
        .textcontents .button .cv {
          font-size: 1.8rem;
          width: 90%; } }
      .textcontents .button .cv a {
        padding: 2rem 3rem; }
        @media only screen and (max-width: 767px) {
          .textcontents .button .cv a {
            padding: 2rem; } }
  .textcontents .clearfix {
    margin-bottom: 2rem; }
  .textcontents .banner {
    float: left;
    margin: 0 4% 2rem 0;
    width: 28%; }
    @media only screen and (max-width: 767px) {
      .textcontents .banner {
        float: inherit;
        width: 100%; } }
    @media only screen and (max-width: 767px) {
      .textcontents .banner img {
        margin: auto;
        width: 55%; } }
  .textcontents h5 {
    border-left: 5px solid #050d5c;
    font-size: 1.6rem;
    margin: 3rem 0;
    padding: 0.5rem 0.8rem; }
  .textcontents .table-purpose {
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    margin: 2rem 0 4rem;
    width: 100%; }
    .textcontents .table-purpose th {
      background: #F3F3F3;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      padding: 0.8rem 1rem; }
    .textcontents .table-purpose td {
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
      font-size: 1.2rem;
      padding: 0.8rem 1rem;
      text-align: center; }
      .textcontents .table-purpose td img {
        margin: 0 auto 0.3rem;
        width: 30px; }
  .textcontents .school_infomation {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0 4rem;
    width: 100%; }
    .textcontents .school_infomation dt {
      border-bottom: 1px solid #050D5C;
      font-size: 1.4rem;
      font-weight: 700;
      padding: 1rem;
      width: 20%; }
      @media only screen and (max-width: 767px) {
        .textcontents .school_infomation dt {
          font-size: 1.3rem;
          width: 22%; } }
    .textcontents .school_infomation dd {
      border-bottom: 1px solid #ccc;
      padding: 1rem;
      width: 80%; }
      @media only screen and (max-width: 767px) {
        .textcontents .school_infomation dd {
          width: 78%; } }

.box-content h2 {
  background: #F5F5F5;
  border-radius: 5px;
  font-size: 2.2rem;
  margin: 3rem 0 2rem;
  padding: 1.5rem; }
  @media only screen and (max-width: 767px) {
    .box-content h2 {
      font-size: 2rem; } }
.box-content h3 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  margin: 3rem 0 1.5rem;
  padding: 1rem 0.5rem;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .box-content h3 {
      font-size: 1.8rem; } }
  .box-content h3::before {
    bottom: -4px;
    background: #050d5c;
    content: '';
    height: 4px;
    left: 0;
    position: absolute;
    width: 20%; }
.box-content h4 {
  color: #050d5c;
  font-size: 1.8rem;
  margin: 3rem 0 1.5rem;
  padding: 0 .5rem 1.5rem;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .box-content h4 {
      font-size: 1.6rem; } }
  .box-content h4::after {
    background-image: -webkit-repeating-linear-gradient(135deg, #050d5c, #050d5c 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #050d5c, #050d5c 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    backface-visibility: hidden;
    bottom: 0;
    position: absolute;
    content: '';
    height: 6px;
    left: 0;
    width: 100%;
    -webkit-backface-visibility: hidden; }
.box-content .waku {
  border: 1px solid #ccc;
  margin: 2rem 0;
  padding: 2rem; }
  .box-content .waku ul, .box-content .waku ol {
    margin: 0; }
.box-content p {
  margin-bottom: 1.5rem; }
.box-content ul, .box-content ol {
  margin: 2rem 0;
  padding-left: 2rem; }
  .box-content ul li, .box-content ol li {
    font-size: 1.5rem;
    margin-bottom: 1rem; }
    .box-content ul li:last-child, .box-content ol li:last-child {
      margin-bottom: 0; }
.box-content ul li {
  list-style: disc; }
.box-content ol li {
  list-style: decimal; }

/* anken-box
----------------------------------------------------------------------*/
.anken-box {
  margin: 2rem 0;
  overflow: hidden; }
  @media only screen and (max-width: 767px) {
    .anken-box {
      margin: 0; } }
  .anken-box dl {
    border: 1px solid #050d5c;
    float: left;
    padding: 1rem;
    width: 48%; }
    @media only screen and (max-width: 767px) {
      .anken-box dl {
        margin-bottom: 1rem;
        width: 100%; } }
    .anken-box dl:nth-child(even) {
      margin-left: 4%; }
      @media only screen and (max-width: 767px) {
        .anken-box dl:nth-child(even) {
          margin-left: 0; } }
  .anken-box dt {
    color: #050d5c;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 700;
    position: relative;
    text-align: center; }
    .anken-box dt::after {
      content: "＋";
      position: absolute;
      right: 0;
      top: 23%; }
    .anken-box dt small {
      display: block;
      font-size: 1.3rem;
      font-weight: normal; }
    .anken-box dt.open::after {
      content: "－"; }
  .anken-box dd {
    display: none;
    text-align: center; }
    .anken-box dd .ttl-osusume {
      background: #050d5c;
      border-radius: 5px;
      color: #fff;
      font-size: 1.2rem;
      font-weight: 700;
      margin: 1rem 0;
      padding: 0.5rem; }
    .anken-box dd .anken-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      .anken-box dd .anken-list .box {
        width: 48%; }
        .anken-box dd .anken-list .box:nth-child(even) {
          margin-left: 4%; }
        .anken-box dd .anken-list .box .title {
          font-size: 1.2rem;
          font-weight: 700;
          margin-top: 0.5rem; }

/*yss nega_ranking 関連記事box*/
.item-kanren {
  position: relative;
  margin: 4rem 0 3rem; }
  @media only screen and (max-width: 767px) {
    .item-kanren {
      margin: 3rem 1.2rem 2rem; } }
  .item-kanren dl {
    padding: 1.5rem 1rem 1.5rem;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border-top: 1px solid #ccc; }
    @media only screen and (max-width: 767px) {
      .item-kanren dl {
        padding: 2rem 1rem 1rem; } }
    .item-kanren dl dt {
      position: absolute;
      top: -1.5rem;
      left: 2rem;
      font-size: 1.4rem;
      color: #FFF;
      background: #304e97;
      padding: 0.5rem 2.5rem;
      border-radius: 5px;
      font-weight: bold; }
      @media only screen and (max-width: 767px) {
        .item-kanren dl dt {
          padding: 0.3rem 1.5rem;
          left: 1.5rem; } }
    .item-kanren dl dd {
      font-weight: bold;
      text-align: center;
      font-size: 1.8rem; }
      @media only screen and (max-width: 767px) {
        .item-kanren dl dd {
          font-size: 1.6rem;
          line-height: 1.3; } }
      .item-kanren dl dd a {
        text-decoration: none; }

/*YSS YDA GAD GDN LP用*/
.osusume-rank {
  border: 4px solid #4b4b4b;
  border-radius: 6px;
  box-shadow: 0 1px 4px #ccc;
  margin: 3rem auto; }
  @media only screen and (max-width: 767px) {
    .osusume-rank {
      margin: 1rem auto 2rem; } }
  .osusume-rank .ttl-osusume {
    background: url(../img/lp/ico-osusume.png) 1rem 45% no-repeat #4b4b4b;
    background-size: 25px 25px;
    border-radius: 2px 2px 0 0;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem 1rem 1rem 4.3rem; }
  .osusume-rank .anken-list {
    padding: 1.5rem 3rem; }
    @media only screen and (max-width: 767px) {
      .osusume-rank .anken-list {
        padding: 1rem 1rem 1.5rem; } }
    .osusume-rank .anken-list .box {
      display: flex;
      justify-content: space-between; }
      .osusume-rank .anken-list .box .box-left {
        width: 25%; }
      .osusume-rank .anken-list .box .box-right {
        padding-left: 0;
        width: 72%; }
        .osusume-rank .anken-list .box .box-right .title {
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 1.3;
          margin-bottom: 1.5rem; }
          @media only screen and (max-width: 767px) {
            .osusume-rank .anken-list .box .box-right .title {
              font-size: 1.8rem;
              margin-bottom: 1rem; } }
        .osusume-rank .anken-list .box .box-right .catch {
          font-size: 1.8rem;
          line-height: 1.5;
          margin-bottom: 1.5rem; }
          @media only screen and (max-width: 767px) {
            .osusume-rank .anken-list .box .box-right .catch {
              font-size: 1.5rem;
              margin-bottom: 1rem; } }
          @media only screen and (max-width: 767px) {
            .osusume-rank .anken-list .box .box-right .catch p {
              font-size: 1.1rem;
              line-height: 1.7; } }
        .osusume-rank .anken-list .box .box-right .btn-cv {
          margin: auto;
          width: 70%;
          border-radius: 6px;
          box-shadow: 0 4px 0 #ac1800;
          overflow: hidden; }
          @media only screen and (max-width: 767px) {
            .osusume-rank .anken-list .box .box-right .btn-cv {
              width: 100%; } }
          .osusume-rank .anken-list .box .box-right .btn-cv a {
            background: linear-gradient(180deg, #e73b1f 50%, #d43706 100%);
            border-radius: 6px;
            box-shadow: 0 4px 0 #ac1800;
            bottom: 0;
            color: #fff;
            display: block;
            font-size: 2.2rem;
            font-weight: 700;
            padding: 1.8rem 1rem;
            position: relative;
            text-align: center;
            text-decoration: none; }
            @media only screen and (max-width: 767px) {
              .osusume-rank .anken-list .box .box-right .btn-cv a {
                font-size: 1.8rem;
                padding: 1.2rem; } }

/*   gad用 比較用 LP*/
.lp-hikaku .hikaku-rank {
  margin-bottom: 4rem;
  overflow-x: scroll; }
  @media only screen and (max-width: 767px) {
    .lp-hikaku .hikaku-rank {
      margin-bottom: 1rem;
      overflow-x: scroll; } }
  .lp-hikaku .hikaku-rank table {
    background: #fff;
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin: 1.5rem 0;
    table-layout: fixed;
    width: 100%; }
    @media only screen and (max-width: 767px) {
      .lp-hikaku .hikaku-rank table {
        min-width: 500px;
        table-layout: fixed;
        width: 100%; } }
    .lp-hikaku .hikaku-rank table tr {
      border-bottom: 1px solid #ccc; }
      .lp-hikaku .hikaku-rank table tr th {
        background: #FCFDFD;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 0.5rem;
        width: 18%;
        vertical-align: middle;
        width: 100px; }
        @media only screen and (max-width: 767px) {
          .lp-hikaku .hikaku-rank table tr th {
            width: 70px; } }
      .lp-hikaku .hikaku-rank table tr td {
        border-right: 1px solid #ccc;
        font-weight: 700;
        padding: 0.5rem;
        line-height: 1.4;
        text-align: center;
        vertical-align: middle;
        width: 140px; }
        .lp-hikaku .hikaku-rank table tr td.td-1 {
          background: #ffffe2; }
        .lp-hikaku .hikaku-rank table tr td img {
          margin: auto; }
        .lp-hikaku .hikaku-rank table tr td .refbutton {
          background: #e22c2c;
          border-radius: 4px;
          font-size: 1.5rem;
          display: inline-block;
          text-shadow: 2px 2px 2px #666;
          box-shadow: 0 4px 0 #a10b0c;
          margin: 0.5rem auto 1rem;
          text-decoration: none;
          color: #fff;
          padding: 0.5rem 1rem; }
        .lp-hikaku .hikaku-rank table tr td .shosai {
          color: #616161;
          font-size: 1.3rem; }
.lp-hikaku .rank .box h2 {
  font-size: 2rem;
  margin: 0rem 2rem 1.5rem; }
.lp-hikaku .rank .box .flex {
  display: flex;
  justify-content: space-between;
  margin: 1rem 2rem 2rem; }
  .lp-hikaku .rank .box .flex .point-wrap {
    width: 80%;
    margin-left: 1rem; }
    .lp-hikaku .rank .box .flex .point-wrap .point {
      margin: auto;
      border: none;
      background: #F3FBFB;
      box-shadow: none;
      padding: 0.5rem;
      margin-bottom: 1rem; }
      .lp-hikaku .rank .box .flex .point-wrap .point li {
        padding: 0.5rem 0rem 0.5rem 2rem; }
    .lp-hikaku .rank .box .flex .point-wrap .mini-cta {
      background: #e22c2c;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 1.4rem;
      padding: 1rem 0.5rem;
      width: 100%;
      margin: auto; }
.lp-hikaku .rank .box .button {
  margin: 2rem auto 1rem; }
.lp-hikaku .rank .box .button-flex {
  max-width: 95%; }
  @media only screen and (max-width: 767px) {
    .lp-hikaku .rank .box .button-flex {
      display: block; } }
  .lp-hikaku .rank .box .button-flex .info {
    margin: auto;
    flex-basis: 35%; }
    @media only screen and (max-width: 767px) {
      .lp-hikaku .rank .box .button-flex .info {
        margin: auto;
        width: 94%; } }
    @media only screen and (max-width: 767px) {
      .lp-hikaku .rank .box .button-flex .info a {
        padding: 1rem 0.5rem; } }
  .lp-hikaku .rank .box .button-flex .cv {
    margin: 2rem auto;
    flex-basis: 62%; }
    .lp-hikaku .rank .box .button-flex .cv span {
      font-size: 1.6rem; }
    @media only screen and (max-width: 767px) {
      .lp-hikaku .rank .box .button-flex .cv {
        margin: 1rem auto; } }
.lp-hikaku .rank .box .maintext {
  margin-bottom: 2rem; }
@media only screen and (max-width: 767px) {
  .lp-hikaku .rank .box .item-img {
    width: 90%;
    margin: auto; }
    .lp-hikaku .rank .box .item-img img {
      width: 100%; }
    .lp-hikaku .rank .box .item-img .item-textarea {
      display: flex;
      background-color: #efefef;
      margin: auto;
      padding: 0.7rem;
      justify-content: space-between;
      align-items: center; }
      .lp-hikaku .rank .box .item-img .item-textarea .text {
        font-size: 1.4rem;
        font-weight: bold;
        width: 70%;
        line-height: 1.6; }
      .lp-hikaku .rank .box .item-img .item-textarea .item-button {
        width: 35%;
        padding: 1rem;
        font-size: 1.1rem;
        text-shadow: -1px -1px 0 #333;
        color: #FFF;
        font-weight: bold;
        border-radius: 4px;
        text-align: center;
        background: #e22c2c; } }

/* sub
----------------------------------------------------------------------*/
.sub .sub-campain .box {
  border-radius: 5px;
  border: 1px solid #CCC;
  margin: 0 0 2rem 0;
  box-shadow: 0 8px 8px -10px #aaa; }
  .sub .sub-campain .box dt {
    font-size: 1.5rem;
    padding: .8rem 1.5rem;
    border-bottom: 1px solid #CCC;
    background: #f8a117;
    color: #FFF;
    font-weight: bold; }
  .sub .sub-campain .box .catch {
    margin: 1rem 1.5rem;
    padding: 0.5rem 1.5rem;
    background: #f3f3f3;
    font-size: 1.4rem; }
  .sub .sub-campain .box dd {
    font-size: 1.3rem;
    padding: 1rem 1.5rem; }
    .sub .sub-campain .box dd a {
      text-decoration: none; }
    .sub .sub-campain .box dd .txt-red {
      color: #FE3E3E;
      font-weight: 700; }
  .sub .sub-campain .box big {
    font-size: 1.5rem; }
  .sub .sub-campain .box small {
    font-size: 1.2rem;
    color: #999;
    line-height: 1.5;
    margin-top: 0.5rem;
    display: inline-block; }
  .sub .sub-campain .box p {
    font-size: 1.3rem; }
  .sub .sub-campain .box .campain {
    font-size: 1.3rem; }
    .sub .sub-campain .box .campain img {
      margin: 1rem 0; }
      @media only screen and (max-width: 767px) {
        .sub .sub-campain .box .campain img {
          margin: 1rem auto;
          width: 85%; } }
    .sub .sub-campain .box .campain .pc-none {
      display: none; }
      @media only screen and (max-width: 767px) {
        .sub .sub-campain .box .campain .pc-none {
          display: block; } }
    .sub .sub-campain .box .campain .sp-none {
      display: block; }
      @media only screen and (max-width: 767px) {
        .sub .sub-campain .box .campain .sp-none {
          display: none; } }
.sub .sub-list dt {
  background: #050d5c;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1rem 1.5rem; }
.sub .sub-list li {
  border-bottom: 1px solid #ccc;
  line-height: 1.5;
  padding: 1rem; }
  .sub .sub-list li a {
    display: block;
    padding-right: 1.5rem;
    position: relative;
    text-decoration: none; }
    .sub .sub-list li a::after {
      border-top: solid 2px #349FE8;
      border-right: solid 2px #349FE8;
      content: '';
      display: block;
      height: 6px;
      right: 0;
      margin: -3px 0 0;
      position: absolute;
      top: 45%;
      transform: rotate(45deg);
      width: 6px;
      -webkit-transform: rotate(45deg); }
  .sub .sub-list li.list-column {
    border-bottom: none;
    padding: 1rem .5rem;
    text-align: right; }
    .sub .sub-list li.list-column a {
      padding-right: 0; }
      .sub .sub-list li.list-column a::after {
        display: none; }

/* page
----------------------------------------------------------------------*/
#pages {
  margin-bottom: 5rem; }
  @media only screen and (max-width: 767px) {
    #pages {
      padding: 0 1rem; } }
  #pages h3 {
    border-left: 6px solid #050d5c;
    font-size: 2rem;
    line-height: 1.4;
    margin: 3rem 0 2rem;
    padding: 0.3rem 0 0.5rem 1rem;
    font-size: 1.8rem; }
  #pages ul {
    margin-bottom: 3rem;
    padding-left: 2.5rem; }
    #pages ul li {
      font-size: 1.5rem;
      line-height: 1.6;
      list-style: disc;
      margin-bottom: 1rem; }
  #pages .table-risearch {
    margin: 3rem 0 5rem;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd; }
    #pages .table-risearch th {
      background: #f3f3f3;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-size: 1.2rem;
      font-weight: 700;
      padding: 1rem; }
      #pages .table-risearch th small {
        font-size: 1.1rem;
        font-weight: normal; }
    #pages .table-risearch td {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-size: 1.3rem;
      padding: 1rem;
      text-align: center;
      vertical-align: middle; }
  #pages .box-survey dt {
    margin-bottom: 1rem; }
  #pages .box-survey ul {
    margin-left: 0; }
  #pages .box-survey li {
    font-size: 1.2rem; }

.box-survey {
  color: #888;
  margin-bottom: 3rem; }
  .box-survey dt {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem; }
  .box-survey dd {
    font-size: 1.2rem; }
    .box-survey dd ul {
      margin-left: 2rem; }
    .box-survey dd li {
      font-size: 1.2rem;
      list-style: disc; }

/* referrer
----------------------------------------------------------------------*/
.block-referrer .block-referrer-inner {
  margin: 0 auto;
  width: 960px; }
  @media only screen and (max-width: 767px) {
    .block-referrer .block-referrer-inner {
      width: 100%; } }
.block-referrer .block-referrer-logo {
  border-bottom: 1px solid #DDD;
  box-shadow: 0 1px 4px #ddd;
  padding: 0.5rem 0;
  border-top: 4px solid #050d5c;
  margin: 0 0 2rem 0; }
  .block-referrer .block-referrer-logo img {
    width: 130px; }
.block-referrer .block-referrer-text {
  text-align: center; }
  @media only screen and (max-width: 767px) {
    .block-referrer .block-referrer-text {
      padding: 1.5rem 1rem; } }
  .block-referrer .block-referrer-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 767px) {
      .block-referrer .block-referrer-text h2 {
        font-size: 1.8rem; } }
.block-referrer .block-referrer-img-loading img {
  margin: 1rem auto; }
.block-referrer .block-referrer-banner {
  margin-top: 1.5rem; }
  .block-referrer .block-referrer-banner img {
    margin: auto; }

/* footer
----------------------------------------------------------------------*/
footer {
  background: #444; }
  @media only screen and (max-width: 767px) {
    footer .inner {
      padding: 0 0.5rem; } }
  footer .flex {
    display: flex; }
    @media only screen and (max-width: 767px) {
      footer .flex {
        display: block; } }
  footer .column {
    padding: 3rem 4rem 2rem 0; }
    @media only screen and (max-width: 767px) {
      footer .column {
        padding: 3rem 0rem 2rem; } }
    footer .column .text-column-title {
      color: #FFF;
      font-size: 1.2rem;
      padding-bottom: 0.3rem; }
    footer .column li {
      font-size: 1.2rem;
      padding: 0.5rem;
      padding-left: 1rem; }
      footer .column li a {
        color: #FFF; }
    footer .column .text-column-list {
      font-size: 1.3rem;
      text-align: right;
      color: #FFF;
      margin-top: 0.5rem; }
      footer .column .text-column-list a {
        color: #FFF; }
  footer .link {
    display: flex;
    padding: 3rem 0 2rem 0; }
    footer .link a {
      color: #FFF;
      font-size: 1.2rem; }
    footer .link li {
      padding: 0 2rem 0 0; }
  footer .caution {
    color: #fff;
    font-size: 0.9rem; }
  footer .copyright {
    text-align: center;
    color: #fff;
    font-size: 1rem;
    padding: 2rem 0; }

/* .button
----------------------------------------------------------------------*/
.button {
  margin: 1rem 2rem;
  text-align: center; }
  .button .cv {
    background: #e22c2c;
    border-radius: 4px;
    font-size: 1.4rem;
    display: inline-block;
    width: 70%;
    text-shadow: 2px 2px 2px #666;
    box-shadow: 0 4px 0 #a10b0c;
    margin: 0 0 1.3rem 0; }
    .button .cv a {
      color: #FFF;
      text-decoration: none;
      font-weight: bold;
      display: block;
      padding: 1.5rem 2rem; }
    @media only screen and (max-width: 767px) {
      .button .cv-topranking a {
        padding: 1.5rem 1rem !important; } }
  .button .link {
    background: #fecf00;
    border-radius: 4px;
    font-size: 1.4rem;
    display: inline-block;
    width: 70%;
    text-shadow: 2px 2px 2px #666;
    box-shadow: 0 4px 0 #8e7400;
    margin: 0 0 1.3rem 0; }
    .button .link a {
      color: #FFF;
      text-decoration: none;
      font-weight: bold;
      display: block;
      padding: 1.5rem 2rem; }
  .button .info {
    font-size: 1.3rem; }

.lp-yss.video .box-topranking-button .cv {
  background: #e111c9;
  animation-name: video-btn !important;
  text-shadow: 2px 2px 2px #666;
  box-shadow: 0 4px 0 #7D0A70;
  margin: 0 0 1.3rem 0; }
.lp-yss.video .rank2 .box .button .cv {
  background: #e111c9;
  animation-name: video-btn;
  text-shadow: 2px 2px 2px #666;
  box-shadow: 0 4px 0 #7D0A70;
  margin: 0 0 1.3rem 0; }

.button-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 2rem; }
  .button-flex .cv {
    flex-basis: 100%; }
  .button-flex .info {
    background: #bbb;
    border-radius: 4px;
    font-size: 1.4rem;
    display: inline-block;
    margin: 0 0.5rem 1.5rem 0;
    box-shadow: 0 4px 0 #777;
    flex-basis: 50%; }
    .button-flex .info a {
      color: #FFF;
      text-decoration: none;
      font-weight: bold;
      display: block;
      padding: 1.5rem 1rem; }

/* .scrolltop
----------------------------------------------------------------------*/
#scrolltop {
  background: #050d5c;
  border-radius: 25px;
  z-index: 10;
  bottom: 1.4rem;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  height: 50px;
  line-height: 7rem;
  opacity: 0.8;
  position: fixed;
  right: 2rem;
  text-align: center;
  width: 50px; }

#scrolltop::after {
  content: '▲';
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: -1.8rem;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center; }

#scrolltop-pop {
  background: #050d5c;
  border-radius: 25px;
  z-index: 10;
  bottom: 1.4rem;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  height: 50px;
  line-height: 7rem;
  opacity: 0.8;
  position: fixed;
  right: 2rem;
  text-align: center;
  width: 50px; }
  @media only screen and (max-width: 767px) {
    #scrolltop-pop {
      bottom: 6.8rem; } }

#scrolltop-pop::after {
  content: '▲';
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: -1.8rem;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center; }

/* ------------------------------------------------- *
 *        ＠column一覧
 * ------------------------------------------------- */
.title-archive-column {
  margin: 1.5rem 0 3rem !important; }

.list-archive-column {
  border-bottom: 1px solid #d6d6d6;
  margin: 1rem 0;
  padding: 1rem 0 2rem; }
  .list-archive-column dt {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem; }
  .list-archive-column dd {
    font-size: 1.4rem;
    line-height: 1.5; }
    .list-archive-column dd p {
      margin-bottom: 0; }

/* ------------------------------------------------- *
 *        ＠column詳細
 * ------------------------------------------------- */
.single-column {
  margin-bottom: 5rem; }
  @media only screen and (max-width: 767px) {
    .single-column .block-archive-column {
      width: 96%;
      margin: auto; } }
  .single-column h1 {
    border-left: 6px solid #050d5c;
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    padding: .3rem 0 .5rem 1rem; }
    @media only screen and (max-width: 767px) {
      .single-column h1 {
        font-size: 2rem; } }
  .single-column h2 {
    border: 2px solid #050d5c;
    border-radius: 4px;
    font-size: 2rem;
    line-height: 1.4;
    margin: 4rem 0 2rem;
    padding: 1rem; }
    @media only screen and (max-width: 767px) {
      .single-column h2 {
        font-size: 1.8rem; } }
  .single-column h3 {
    border-bottom: 2px solid #050d5c;
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 4rem 0 2rem;
    padding: .5rem; }
    @media only screen and (max-width: 767px) {
      .single-column h3 {
        font-size: 1.6rem; } }
  .single-column h4 {
    font-size: 1.6rem;
    margin: 3rem 0 1rem; }
  .single-column p {
    font-size: 1.5rem;
    margin-bottom: 2rem; }
  .single-column ul {
    margin: 3rem 0 3rem 2rem; }
    .single-column ul li {
      font-size: 1.5rem;
      line-height: 1.8;
      margin-bottom: .5rem; }
  .single-column table {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    margin: 2rem 0; }
    .single-column table th {
      background: #f3f3f3;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-size: 1.4rem;
      padding: .8rem 1.3rem; }
    .single-column table td {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-size: 1.4rem;
      padding: .8rem 1.3rem; }
  .single-column .main-visual {
    clear: right;
    margin-bottom: 2rem; }
    .single-column .main-visual img {
      width: 100%;
      height: auto; }
  .single-column .txt-category {
    border: 1px solid #050d5c;
    border-radius: 3px;
    color: #050d5c;
    display: inline-block;
    float: right;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding: .3rem 1rem; }
  .single-column .table-column {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    width: 100%; }
    .single-column .table-column tr:first-child {
      background: #050d5c;
      color: #fff;
      font-weight: 700;
      text-align: center; }
    .single-column .table-column th {
      background: #0049b2;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 1rem 1.5rem; }
    .single-column .table-column td {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      padding: 1rem 1.5rem; }
  .single-column #toc_container {
    line-height: 1.8; }
  .single-column .cat-list {
    margin: 4rem 0;
    padding-left: 3rem; }
    .single-column .cat-list li {
      font-size: 1.8rem;
      font-weight: 700;
      list-style: disc; }

/* ------------------------------------------------- *
 *        ＠記事LP詳細
 * ------------------------------------------------- */
.single-kizi {
  letter-spacing: .05rem;
  font-size: 1.5rem;
  line-height: 1.8; }
  .single-kizi h2 {
    background: #F5F5F5;
    border-radius: 5px;
    font-size: 2.2rem;
    padding: 1.5rem;
    border: none; }
  .single-kizi h3 {
    font-size: 2rem;
    border-bottom: 4px solid #ccc;
    margin: 3rem 0 1.5rem;
    padding: 1rem 0.5rem;
    position: relative; }
    .single-kizi h3::before {
      bottom: -4px;
      background: #050d5c;
      content: '';
      height: 4px;
      left: 0;
      position: absolute;
      width: 20%; }
  .single-kizi h4 {
    color: #050d5c;
    font-size: 1.8rem;
    margin: 3rem 0 1.5rem;
    padding: 0 0.5rem 1.5rem;
    position: relative; }
    .single-kizi h4::after {
      background-image: repeating-linear-gradient(-45deg, #050d5c, #050d5c 1px, transparent 2px, transparent 5px);
      background-size: 7px 7px;
      backface-visibility: hidden;
      bottom: 0;
      position: absolute;
      content: '';
      height: 6px;
      left: 0;
      width: 100%;
      -webkit-backface-visibility: hidden; }
  .single-kizi .waku {
    border: 1px solid #ccc;
    margin: 2rem 0;
    padding: 2rem; }
  .single-kizi .button {
    margin: auto; }
    .single-kizi .button .cv {
      font-size: 2rem; }
      @media only screen and (max-width: 767px) {
        .single-kizi .button .cv {
          font-size: 1.8rem;
          width: 90%; } }
      .single-kizi .button .cv a {
        padding: 2rem 3rem; }
        @media only screen and (max-width: 767px) {
          .single-kizi .button .cv a {
            padding: 2rem; } }

/* ------------------------------------------------- *
 *        ＠lp2
 * ------------------------------------------------- */
#lp2 .category-article .inner {
  padding: 1rem 0 6rem 0; }
#lp2 .mainvisual img {
  height: 300px; }
  @media only screen and (max-width: 767px) {
    #lp2 .mainvisual img {
      height: auto;
      padding-bottom: 0; } }
#lp2 .textarea {
  background: #050d5c;
  color: #fff;
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem 1rem 2rem; }
  @media only screen and (max-width: 767px) {
    #lp2 .textarea {
      padding: 1rem; } }
  #lp2 .textarea p {
    font-size: 2rem;
    margin-bottom: 0.5rem; }
    @media only screen and (max-width: 767px) {
      #lp2 .textarea p {
        font-size: 1.4rem; } }
  #lp2 .textarea h2 {
    font-size: 3rem;
    line-height: 1.3; }
    @media only screen and (max-width: 767px) {
      #lp2 .textarea h2 {
        font-size: 1.8rem; } }
#lp2 .main {
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  width: 85%; }
  @media only screen and (max-width: 767px) {
    #lp2 .main {
      width: 100%; } }
#lp2 .box-attention {
  background: #ffffe1;
  padding: 5rem 0 3rem; }
  @media only screen and (max-width: 767px) {
    #lp2 .box-attention {
      padding: 3rem 0 1rem; } }
  #lp2 .box-attention .title-attention-h3 {
    color: #0049b2;
    font-size: 2.5rem;
    line-height: 1.3;
    margin: 0 0 2rem;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      #lp2 .box-attention .title-attention-h3 {
        font-size: 1.7rem; } }
    #lp2 .box-attention .title-attention-h3 small {
      color: #050d5c;
      display: block;
      font-size: 1.6rem;
      margin-bottom: 1rem; }
      @media only screen and (max-width: 767px) {
        #lp2 .box-attention .title-attention-h3 small {
          font-size: 1.4rem;
          margin-bottom: .5rem; } }
  #lp2 .box-attention .title h3 {
    padding: 2rem; }
#lp2 .box-worries {
  padding: 4rem 0; }
  @media only screen and (max-width: 767px) {
    #lp2 .box-worries {
      padding: 2rem 0; } }
  #lp2 .box-worries .title-worries-h4 {
    color: #050d5c;
    font-size: 3rem;
    letter-spacing: 2px;
    line-height: 1.3;
    margin-bottom: 3rem;
    text-decoration: underline wavy #050d5c;
    text-underline-offset: 3px;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      #lp2 .box-worries .title-worries-h4 {
        font-size: 2.2rem; } }
  #lp2 .box-worries .img-worries {
    margin: auto;
    width: 85%; }
    @media only screen and (max-width: 767px) {
      #lp2 .box-worries .img-worries {
        width: 100%; } }
#lp2 .demerit {
  background: #f8f8f8;
  margin: 0 0 4rem;
  padding: 4rem 0; }
  #lp2 .demerit .title-demerit {
    color: #050d5c;
    font-size: 2.8rem;
    letter-spacing: 2px;
    line-height: 1.3;
    margin-bottom: 3rem;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      #lp2 .demerit .title-demerit {
        font-size: 2rem; } }
  #lp2 .demerit .list-demerit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem; }
    @media only screen and (max-width: 767px) {
      #lp2 .demerit .list-demerit {
        border: 2px solid #050d5c;
        border-radius: 5px; } }
    #lp2 .demerit .list-demerit li {
      background: #fff;
      border: 2px solid #050d5c;
      border-radius: 5px;
      color: #050d5c;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      margin: 0 0.7rem 1.5rem;
      padding: 1rem 1.5rem;
      width: 31%; }
      @media only screen and (max-width: 767px) {
        #lp2 .demerit .list-demerit li {
          border: none;
          border-bottom: 1px dotted #050d5c;
          border-radius: 0;
          font-size: 1.5rem;
          margin: 0;
          width: 100%; } }
  #lp2 .demerit img {
    margin: 0 auto 2rem;
    width: 25%; }
    @media only screen and (max-width: 767px) {
      #lp2 .demerit img {
        width: 30%; } }
#lp2 .rank .box .banner {
  margin: 0 0 2rem 2rem; }
#lp2 .rank .box .maintext {
  background: none;
  margin: 0 2rem 2rem; }
  #lp2 .rank .box .maintext h3 {
    background: none;
    border-radius: 0;
    color: #050d5c;
    margin: 1rem 0 2rem;
    padding: 0; }
  #lp2 .rank .box .maintext p {
    padding: 0 0 1rem 0; }
#lp2 .skill {
  box-sizing: border-box;
  float: none;
  margin: 0 2rem 2rem;
  width: 95%; }
  @media only screen and (max-width: 767px) {
    #lp2 .skill {
      float: right;
      margin: 0 2rem 1.5rem 0;
      width: 54%; } }
  #lp2 .skill h3 {
    color: #050d5c;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      #lp2 .skill h3 {
        text-align: left; } }
  #lp2 .skill li {
    font-size: 1.2rem;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      #lp2 .skill li {
        font-size: 1.1rem;
        font-weight: normal; } }
    #lp2 .skill li img {
      width: 45%; }
      @media only screen and (max-width: 767px) {
        #lp2 .skill li img {
          width: 25px; } }
#lp2 .point {
  float: right;
  margin-top: 0;
  width: 68%; }
  @media only screen and (max-width: 767px) {
    #lp2 .point {
      float: inherit;
      width: auto; } }

/* ------------------------------------------------- *
 *        ＠ポップアップ
 * ------------------------------------------------- */
.popup-area {
  display: none;
  width: 350px;
  background: #fff;
  padding: 15px 15px 8px;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.4); }
  @media only screen and (max-width: 767px) {
    .popup-area {
      width: 75%; } }
  .popup-area .popup-area-in a {
    color: #333;
    text-decoration: none; }
  .popup-area .popup-area-in img {
    margin: auto;
    border: solid 1px #888; }
  .popup-area .popup-area-in p {
    font-weight: bold;
    font-size: 1.4rem;
    text-align: left; }
  .popup-area .popup-area-in .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem; }
    .popup-area .popup-area-in .flex .txt {
      width: 82%;
      margin: 1rem auto;
      line-height: 1.4; }
    .popup-area .popup-area-in .flex .arrow {
      border-radius: 25px;
      width: 40px;
      height: 40px;
      border: solid 1px #888;
      background: #EFEFEF;
      text-align: center;
      float: right;
      margin: 0px;
      position: relative; }
      .popup-area .popup-area-in .flex .arrow::before {
        content: '';
        width: 10px;
        height: 10px;
        border: 0;
        border-bottom: solid 3px #888;
        border-right: solid 3px #888;
        position: absolute;
        bottom: 1.5rem;
        right: 1.6rem;
        transform: rotate(-45deg); }
  .popup-area button {
    position: absolute;
    top: -13%;
    border-radius: 25px;
    width: 35px;
    height: 35px;
    right: 0%;
    border: none; }
    @media only screen and (max-width: 767px) {
      .popup-area button {
        top: -14%;
        width: 28px;
        height: 28px;
        padding: 0.3rem; } }
    .popup-area button p {
      font-size: 3rem;
      line-height: 0.9 !important; }
      @media only screen and (max-width: 767px) {
        .popup-area button p {
          font-size: 2rem; } }

.cover-eml {
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.followpop-area {
  display: none;
  position: fixed;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  right: -100%;
  width: 15vw;
  transition: .5s ease; }
  @media only screen and (max-width: 767px) {
    .followpop-area {
      width: 100%;
      transform: none;
      top: inherit;
      bottom: 0; } }
  .followpop-area.show {
    display: block;
    right: 0; }
  .followpop-area-in {
    padding: 1rem; }
    @media only screen and (max-width: 767px) {
      .followpop-area-in {
        padding: 0; } }
  .followpop-area-closebtn {
    position: absolute;
    top: -2rem;
    left: -1rem;
    border-radius: 15px;
    padding: .25rem 1rem;
    background-color: #fff;
    cursor: pointer; }
  .followpop-area-footer {
    padding-bottom: 6rem !important; }

/*loop-rank-boxad2のcss*/
.rank.rank2.rank-tab {
  margin-top: 7rem; }
  @media only screen and (max-width: 767px) {
    .rank.rank2.rank-tab {
      margin-top: 8rem; } }

.rank2 .rkselect-wrap {
  padding: 1.5rem 0;
  max-width: 820px;
  background-color: #F3F3F3;
  margin: 1rem auto; }
  .rank2 .rkselect-wrap-ttl {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem; }
  .rank2 .rkselect-wrap-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem .5rem; }
    .rank2 .rkselect-wrap-flex-btn {
      padding: 1rem;
      text-decoration: none;
      color: #333;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: 0.2s;
      border: 3px solid #daeaf1;
      background-color: #fff; }
      .rank2 .rkselect-wrap-flex-btn:hover {
        box-shadow: none;
        background-color: #daeaf1; }
      .rank2 .rkselect-wrap-flex-btn.active {
        box-shadow: none;
        background-color: #daeaf1; }
      .rank2 .rkselect-wrap-flex-btn-txt {
        font-size: 1.3rem; }
        @media only screen and (max-width: 767px) {
          .rank2 .rkselect-wrap-flex-btn-txt {
            font-size: 1rem; } }
    .rank2 .rkselect-wrap-flex-skill-ttl span {
      font-size: 1rem;
      margin-left: 2.5rem;
      color: rgba(0, 0, 0, 0.4);
      position: relative; }
      .rank2 .rkselect-wrap-flex-skill-ttl span:after {
        display: inline-block;
        position: absolute;
        top: 55%;
        left: -12px;
        transform: translate(-50%, -50%);
        content: '';
        width: 12px;
        height: 12px;
        background: url(../img/lp/link.webp) no-repeat;
        background-size: contain; }
    .rank2 .rkselect-wrap-flex-skill-btn {
      position: relative;
      background-color: #fff;
      width: 18.8%;
      text-align: center;
      padding: 1rem 1.5rem; }
      @media only screen and (max-width: 767px) {
        .rank2 .rkselect-wrap-flex-skill-btn {
          width: 170px;
          padding: .6rem 1.5rem; } }
      .rank2 .rkselect-wrap-flex-skill-btn:after {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%) rotate(-45deg);
        display: inline-block;
        content: '';
        width: 7px;
        height: 7px;
        border: 1px solid #888;
        border-top: none;
        border-left: none;
        transition: 0.2s; }
        @media only screen and (max-width: 767px) {
          .rank2 .rkselect-wrap-flex-skill-btn:after {
            width: 8px;
            height: 8px; } }
      .rank2 .rkselect-wrap-flex-skill-btn:hover:after {
        right: 12px; }
      .rank2 .rkselect-wrap-flex-skill-btn li {
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        gap: 0.5rem;
        height: 100%; }
      .rank2 .rkselect-wrap-flex-skill-btn-ttl {
        font-size: 1.3rem;
        font-weight: bold; }
        @media only screen and (max-width: 767px) {
          .rank2 .rkselect-wrap-flex-skill-btn-ttl {
            font-size: 1.2rem; } }
      .rank2 .rkselect-wrap-flex-skill-btn-img {
        width: 25%; }
.rank2 .rkselect-under {
  padding-bottom: 3.5rem;
  margin: -1rem 0 1rem;
  text-align: center;
  background: url(../img/lp/rkbtn_p_under.png) no-repeat center;
  background-size: contain; }
  .rank2 .rkselect-under-txt {
    font-size: 1.5rem;
    line-height: 1.2; }
    .rank2 .rkselect-under-txt span {
      font-weight: bold;
      font-size: 2rem; }
.rank2 .box {
  background-color: #F3F3F3;
  max-width: 1000px;
  box-shadow: 2px 10px 10px 0px rgba(0, 0, 0, 0.1);
  border: none;
  /*セクションタイトル*/
  /*cvボタンとlinkボタン*/ }
  .rank2 .box .title {
    background-color: #ffffff;
    border-bottom: none;
    line-height: 1.3; }
    @media only screen and (max-width: 767px) {
      .rank2 .box .title a {
        font-size: 2rem; } }
    .rank2 .box .title h3 {
      padding-top: 1.2rem; }
    .rank2 .box .title-sub {
      font-size: 1.3rem;
      line-height: 1.2; }
  .rank2 .box-tab {
    margin-top: 7rem; }
    @media only screen and (max-width: 767px) {
      .rank2 .box-tab {
        margin-top: 9rem; } }
    .rank2 .box-tab .iconimg-1 {
      position: relative; }
      .rank2 .box-tab .iconimg-1:before {
        position: absolute;
        top: 50%;
        left: 2rem;
        transform: translateY(-50%);
        content: '';
        display: inline-block;
        background: url(../img/ico_rank01.png) no-repeat;
        background-size: contain;
        width: 4rem;
        height: 4rem;
        z-index: 1; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-tab .iconimg-1:before {
            left: .5rem; } }
    .rank2 .box-tab .iconimg-2 {
      position: relative; }
      .rank2 .box-tab .iconimg-2:before {
        position: absolute;
        top: 50%;
        left: 2rem;
        transform: translateY(-50%);
        content: '';
        display: inline-block;
        background: url(../img/ico_rank02.png) no-repeat;
        background-size: contain;
        width: 4rem;
        height: 4rem;
        z-index: 1; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-tab .iconimg-2:before {
            left: .5rem; } }
    .rank2 .box-tab .iconimg-3 {
      position: relative; }
      .rank2 .box-tab .iconimg-3:before {
        position: absolute;
        top: 50%;
        left: 2rem;
        transform: translateY(-50%);
        content: '';
        display: inline-block;
        background: url(../img/ico_rank03.png) no-repeat;
        background-size: contain;
        width: 4rem;
        height: 4rem;
        z-index: 1; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-tab .iconimg-3:before {
            left: .5rem; } }
  .rank2 .box .tab-ttl {
    height: 10rem; }
    @media only screen and (max-width: 767px) {
      .rank2 .box .tab-ttl {
        height: 13rem; } }
    .rank2 .box .tab-ttl-list {
      display: flex;
      position: relative; }
      .rank2 .box .tab-ttl-list-item {
        display: flex;
        align-items: center;
        position: absolute;
        top: -5.5rem;
        border-radius: 5px 0 0 0;
        box-shadow: -3px 0 3px -0.5px rgba(0, 0, 0, 0.1); }
        @media only screen and (max-width: 767px) {
          .rank2 .box .tab-ttl-list-item {
            top: -6.5rem; } }
        .rank2 .box .tab-ttl-list-item-attention {
          position: absolute;
          top: -5.1rem;
          left: -200%;
          font-size: 1.5rem;
          font-weight: bold;
          color: #F5F5F5;
          padding: 1rem;
          border-radius: 5px;
          background-color: #808080; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-attention {
              font-size: 1.2rem;
              top: -7.5rem; } }
          .rank2 .box .tab-ttl-list-item-attention:before {
            position: absolute;
            bottom: 50%;
            right: -0.8rem;
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: .75rem 0 .75rem 1.5rem;
            border-color: transparent transparent transparent #808080;
            transform: translatey(50%); }
            @media only screen and (max-width: 767px) {
              .rank2 .box .tab-ttl-list-item-attention:before {
                bottom: -.8rem;
                right: 30%;
                content: '';
                border-style: solid;
                border-width: 1.5rem 0.75rem 0 0.75rem;
                border-color: #808080 transparent transparent transparent;
                transform: translatex(50%) rotate(-30deg); } }
        .rank2 .box .tab-ttl-list-item-1 {
          z-index: 1;
          width: 96%;
          left: 3%;
          background-color: #f0f7f9; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-1 {
              width: 94%;
              left: 4%; } }
          .rank2 .box .tab-ttl-list-item-1:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: .5rem;
            border-radius: 5px 5px 0 0;
            background-color: #cdcfde; }
        .rank2 .box .tab-ttl-list-item-2 {
          z-index: 2;
          width: 76%;
          left: 23%;
          background-color: #ecf4f8; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-2 {
              width: 77%;
              left: 21%; } }
          .rank2 .box .tab-ttl-list-item-2:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: .5rem;
            border-radius: 5px 5px 0 0;
            background-color: #9b9ebe; }
        .rank2 .box .tab-ttl-list-item-3 {
          z-index: 3;
          width: 56%;
          left: 43%;
          background-color: #e9f2f7; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-3 {
              width: 57%;
              left: 41%; } }
          .rank2 .box .tab-ttl-list-item-3:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: .5rem;
            border-radius: 5px 5px 0 0;
            background-color: #696e9d; }
        .rank2 .box .tab-ttl-list-item-4 {
          z-index: 4;
          width: 36%;
          left: 63%;
          background-color: #e1eef4; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-4 {
              width: 37%;
              left: 61%; } }
          .rank2 .box .tab-ttl-list-item-4:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: .5rem;
            border-radius: 5px 5px 0 0;
            background-color: #373d7d; }
        .rank2 .box .tab-ttl-list-item-5 {
          z-index: 5;
          width: 16%;
          left: 83%;
          background-color: #daeaf1; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item-5 {
              width: 18%;
              left: 80%; } }
          .rank2 .box .tab-ttl-list-item-5:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: .5rem;
            border-radius: 5px 5px 0 0;
            background-color: #050d5c; }
        .rank2 .box .tab-ttl-list-item-anken {
          display: none; }
        .rank2 .box .tab-ttl-list-item .title-sub {
          display: none; }
        .rank2 .box .tab-ttl-list-item h3 {
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 1.3rem;
          padding: 1.5rem 1rem 1rem;
          height: 5rem; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item h3 {
              height: 6rem;
              padding: 1.5rem .8rem 1rem; } }
          .rank2 .box .tab-ttl-list-item h3 a {
            font-size: 1.3rem; }
      .rank2 .box .tab-ttl-list-item.active {
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        background-color: #fff;
        box-shadow: none;
        display: flex;
        align-items: start; }
        .rank2 .box .tab-ttl-list-item.active:before {
          display: none; }
        .rank2 .box .tab-ttl-list-item.active .tab-ttl-list-item-attention {
          left: 1rem; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item.active .tab-ttl-list-item-attention {
              left: .5rem; } }
        .rank2 .box .tab-ttl-list-item.active .tab-ttl-list-item-anken, .rank2 .box .tab-ttl-list-item.active .title-sub {
          display: block; }
        .rank2 .box .tab-ttl-list-item.active h3 {
          font-size: 2.4rem;
          padding: 1rem 2rem 1rem 7.5rem;
          height: 10rem; }
          @media only screen and (max-width: 767px) {
            .rank2 .box .tab-ttl-list-item.active h3 {
              height: 13rem; } }
          .rank2 .box .tab-ttl-list-item.active h3 a {
            font-size: 2.4rem; }
  .rank2 .box-inner {
    padding-left: 3.25%;
    padding-right: 3.25%; }
    .rank2 .box-inner .detail-info .banner {
      float: none;
      margin: auto;
      background-color: inherit;
      width: 100%; }
      .rank2 .box-inner .detail-info .banner img {
        margin: auto;
        width: 100%; }
    .rank2 .box-inner .detail-info .spec {
      margin: 2rem 0 0 0; }
      .rank2 .box-inner .detail-info .spec-inner {
        display: flex;
        justify-content: space-between;
        gap: 2.3rem;
        width: 100%; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-inner .detail-info .spec-inner {
            gap: 0.5rem; } }
        .rank2 .box-inner .detail-info .spec-inner-wrapper {
          width: 100%;
          background-color: #ffffff; }
          .rank2 .box-inner .detail-info .spec-inner-wrapper-content {
            padding-top: 2.6%;
            padding-bottom: 2.6%;
            text-align: center; }
          .rank2 .box-inner .detail-info .spec-inner-wrapper dt {
            background-color: #daeaf1;
            font-weight: bold; }
          .rank2 .box-inner .detail-info .spec-inner-wrapper dd {
            background-color: #ffffff; }
    .rank2 .box-inner .detail-info .skill {
      margin: 2.2rem 0 3rem 0;
      padding: 0; }
      @media only screen and (max-width: 767px) {
        .rank2 .box-inner .detail-info .skill {
          margin: 1rem 0 3rem; } }
      .rank2 .box-inner .detail-info .skill-ttl {
        position: relative;
        background-color: #daeaf1;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        cursor: pointer; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-inner .detail-info .skill-ttl {
            margin-bottom: 1rem; } }
      .rank2 .box-inner .detail-info .skill-list {
        padding: 0 !important;
        gap: 1rem; }
        @media only screen and (max-width: 767px) {
          .rank2 .box-inner .detail-info .skill-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; } }
        .rank2 .box-inner .detail-info .skill-list .design-skill {
          display: flex;
          flex-direction: column;
          justify-content: space-between; }
          .rank2 .box-inner .detail-info .skill-list .design-skill-wp img {
            width: 70%; }
        .rank2 .box-inner .detail-info .skill-list li {
          margin: 0; }
          @media only screen and (max-width: 767px) {
            .rank2 .box-inner .detail-info .skill-list li {
              float: none;
              width: 30%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              padding: 0.5rem;
              position: static; } }
          .rank2 .box-inner .detail-info .skill-list li span {
            font-size: 1.3rem; }
          .rank2 .box-inner .detail-info .skill-list li img {
            margin: 0.5rem auto; }
            @media only screen and (max-width: 767px) {
              .rank2 .box-inner .detail-info .skill-list li img {
                position: static;
                width: 50%;
                height: auto; } }
    .rank2 .box-inner .detail-info-link {
      display: flex;
      justify-content: right;
      margin-top: 1rem; }
  .rank2 .box .point {
    margin: 2.5rem 0 0 0;
    background-color: #daeaf1;
    box-shadow: none;
    border: none; }
    .rank2 .box .point-inner {
      padding: 2.4rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 2.4rem; }
      .rank2 .box .point-inner-num {
        display: inline-block;
        background-color: #050d5c;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        text-align: center;
        font-size: 1.5rem;
        color: #ffffff; }
      .rank2 .box .point-inner-txt {
        width: 98%; }
      .rank2 .box .point-inner dt {
        padding: 0.6rem 1rem;
        font-weight: bold;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        gap: 1rem; }
      .rank2 .box .point-inner dd {
        margin-top: 0.5rem; }
  .rank2 .box .campain {
    margin: 3rem 0 0 0 !important;
    padding: 0;
    background-color: #EDDDA1; }
    .rank2 .box .campain-ttl {
      position: relative;
      background-color: #D7AE53;
      padding: 1.5rem 0 1.5rem 0.5rem;
      font-size: 2rem;
      color: #ffffff;
      text-align: center; }
      .rank2 .box .campain-ttl::before {
        position: absolute;
        top: 50%;
        left: 10%;
        z-index: 1;
        transform: translateY(-50%);
        display: inline-block;
        margin-right: 1rem;
        content: "";
        width: 12rem;
        height: 12rem;
        background: url(../img/lp/cam_img_l.webp) no-repeat;
        background-size: contain; }
        @media only screen and (max-width: 767px) {
          .rank2 .box .campain-ttl::before {
            top: 75%;
            left: .5rem;
            width: 7rem;
            height: 7rem; } }
      .rank2 .box .campain-ttl::after {
        position: absolute;
        top: 50%;
        right: 10%;
        z-index: 1;
        transform: translateY(-50%);
        display: inline-block;
        margin-left: 1rem;
        content: "";
        width: 12rem;
        height: 12rem;
        background: url(../img/lp/cam_img_r.webp) no-repeat;
        background-size: contain; }
        @media only screen and (max-width: 767px) {
          .rank2 .box .campain-ttl::after {
            top: 75%;
            right: -0.2rem;
            width: 7rem;
            height: 7rem; } }
      .rank2 .box .campain-ttl-txt {
        position: inherit;
        z-index: 5; }
      .rank2 .box .campain-ttl-bgl {
        position: absolute;
        top: 0;
        left: 0;
        content: 0;
        width: 40%;
        height: 5rem;
        background: url(../img/lp/campain_ttl_bgl.webp) no-repeat;
        background-size: cover; }
        @media only screen and (max-width: 767px) {
          .rank2 .box .campain-ttl-bgl {
            width: 30%;
            background-position: right; } }
      .rank2 .box .campain-ttl-bgr {
        position: absolute;
        top: 0;
        right: 0;
        content: 0;
        width: 40%;
        height: 5rem;
        background: url(../img/lp/campain_ttl_bgr.webp) no-repeat;
        background-size: cover; }
        @media only screen and (max-width: 767px) {
          .rank2 .box .campain-ttl-bgr {
            width: 30%;
            background-position: left; } }
    .rank2 .box .campain-wrapper {
      padding: 2.4rem 2rem;
      position: relative;
      overflow: hidden; }
      .rank2 .box .campain-wrapper-bg {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 98rem;
        background: url(../img/lp/campain_bg.webp) no-repeat;
        background-position: bottom;
        background-size: cover;
        opacity: 0.15; }
        @media only screen and (max-width: 767px) {
          .rank2 .box .campain-wrapper-bg {
            height: 90rem; } }
      .rank2 .box .campain-wrapper-img {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        position: inherit;
        z-index: 1; }
      .rank2 .box .campain-wrapper-inner {
        display: flex;
        align-items: center;
        gap: 1rem; }
        .rank2 .box .campain-wrapper-inner-txt {
          width: 98%; }
      .rank2 .box .campain-wrapper dl {
        border: none;
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        position: inherit;
        z-index: 1; }
      .rank2 .box .campain-wrapper dt {
        display: inline-block;
        padding: 0.6rem 1rem;
        font-weight: bold;
        color: #222;
        background-color: #ffffff; }
        .rank2 .box .campain-wrapper dt span {
          display: inline-block;
          width: 25px;
          height: 15px;
          background: url(../img/lp/check_gold.png) no-repeat;
          background-size: contain; }
      .rank2 .box .campain-wrapper dd {
        margin-top: 0.5rem;
        padding: 0; }
  .rank2 .box .review {
    margin: 0 !important;
    border: none !important; }
    .rank2 .box .review-kome {
      margin-top: 0.5rem;
      text-align: right;
      color: #808080;
      font-size: 0.9rem; }
    .rank2 .box .review .slider {
      padding-top: 2rem !important; }
    .rank2 .box .review dd {
      border: none !important;
      background-color: #ffffff !important;
      padding: 1rem !important; }
  .rank2 .box .maintext {
    margin: 0 !important; }
    .rank2 .box .maintext p {
      padding: 2rem 0.5rem;
      background-color: #F3F3F3;
      border-left: 5px solid #ffffff;
      border-bottom: 5px solid #ffffff;
      border-right: 5px solid #ffffff; }
  .rank2 .box .cat-ttl {
    background-color: #ffffff;
    border-left: 5px solid #050d5c;
    padding: 2.6% 0 2.6% 0.5rem;
    font-size: 1.8rem; }
  .rank2 .box .slick-dots {
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%); }
  .rank2 .box .button {
    padding-bottom: 2.4rem; }
    .rank2 .box .button .cv {
      background-color: #DE020D;
      /*cvボタンの動きをつける*/
      animation-name: btnlike-btn;
      animation-delay: 0s;
      /* アニメーションの開始時間指定 */
      animation-duration: 3s;
      /* アニメーション動作時間の指定 */
      animation-timing-function: linear;
      /* アニメーションの動き（一定）*/
      animation-iteration-count: infinite;
      /* アニメーションを繰り返す */ }
@keyframes btnlike-btn {
  0% {
    box-shadow: 0 8px 0 #750107;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #750107;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #750107;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #750107;
    transform: translatey(0); } }
@keyframes video-btn {
  0% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); } }
    .rank2 .box .button .link {
      background-color: #fffadf;
      /*cvボタンの動きをつける*/
      animation-name: btnlike-link;
      animation-delay: 0s;
      /* アニメーションの開始時間指定 */
      animation-duration: 3s;
      /* アニメーション動作時間の指定 */
      animation-timing-function: linear;
      /* アニメーションの動き（一定）*/
      animation-iteration-count: infinite;
      /* アニメーションを繰り返す */ }
@keyframes btnlike-link {
  0% {
    box-shadow: 0 8px 0 #8e7400;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #8e7400;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #8e7400;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #8e7400;
    transform: translatey(0); } }
@media only screen and (max-width: 767px) {
  .listwrap {
    padding: 0 1rem; } }

/*cvボタン上の訴求文の色*/
.cv-txt-red {
  color: #DE020D;
  margin-bottom: 2.4rem; }

.btn-back-blue {
  background-color: #daeaf1; }

.tab-contents {
  height: 0px;
  overflow-y: hidden; }

.tab-contents.active {
  height: auto;
  overflow-y: unset; }

/*webデサイナーlpのときの配色設定*/
.webdesign .rank2 .rkselect-ttl {
  background-color: #cf8080; }
  .webdesign .rank2 .rkselect-ttl:after {
    background: url(../img/lp/rkselect_ttl_d_under.png) no-repeat;
    background-size: contain;
    background-position: center; }
    @media only screen and (max-width: 767px) {
      .webdesign .rank2 .rkselect-ttl:after {
        bottom: -5.8rem; } }
.webdesign .rank2 .rkselect-wrap {
  background-color: #ecdcdc; }
  .webdesign .rank2 .rkselect-wrap-flex-btn-no1 {
    margin-top: 0;
    background: url(../img/lp/select_d1.jpg);
    background-size: cover;
    background-position: center; }
    @media only screen and (max-width: 767px) {
      .webdesign .rank2 .rkselect-wrap-flex-btn-no1 {
        background: url(../img/lp/select_d1.webp);
        background-size: cover;
        background-position: center; } }
  .webdesign .rank2 .rkselect-wrap-flex-btn-no2 {
    margin-top: 0; }
  .webdesign .rank2 .rkselect-wrap-flex-btn-no3 {
    margin-top: 0; }
  .webdesign .rank2 .rkselect-wrap-flex-btn-no4 {
    margin-top: 0;
    background: url(../img/lp/select_d4.jpg);
    background-size: cover;
    background-position: center; }
    @media only screen and (max-width: 767px) {
      .webdesign .rank2 .rkselect-wrap-flex-btn-no4 {
        background: url(../img/lp/select_d4.webp);
        background-size: cover;
        background-position: center; } }
.webdesign .rank2 .rkselect-under {
  background: url(../img/lp/rkbtn_d_under.png) no-repeat center;
  background-size: contain; }
.webdesign .rank2 .box {
  background-color: #f7f4f5;
  /*セクションタイトル*/ }
  .webdesign .rank2 .box .tab-ttl-list-item-1 {
    background-color: #f9f4f4; }
    .webdesign .rank2 .box .tab-ttl-list-item-1:before {
      background-color: #f5e6e6; }
  .webdesign .rank2 .box .tab-ttl-list-item-2 {
    background-color: #f7f1f1; }
    .webdesign .rank2 .box .tab-ttl-list-item-2:before {
      background-color: #eccccc; }
  .webdesign .rank2 .box .tab-ttl-list-item-3 {
    background-color: #f4eaea; }
    .webdesign .rank2 .box .tab-ttl-list-item-3:before {
      background-color: #e2b3b3; }
  .webdesign .rank2 .box .tab-ttl-list-item-4 {
    background-color: #f2e6e6; }
    .webdesign .rank2 .box .tab-ttl-list-item-4:before {
      background-color: #d99999; }
  .webdesign .rank2 .box .tab-ttl-list-item-5 {
    background-color: #ecdcdc; }
    .webdesign .rank2 .box .tab-ttl-list-item-5:before {
      background-color: #cf8080; }
  .webdesign .rank2 .box .tab-ttl-list-item.active {
    background-color: #fff; }
  .webdesign .rank2 .box-inner .detail-info .spec-inner-wrapper dt {
    background-color: #ecdcdc; }
  .webdesign .rank2 .box-inner .detail-info .skill-ttl {
    background-color: #ecdcdc; }
    .webdesign .rank2 .box-inner .detail-info .skill-ttl:before {
      border-top: 8px solid #cf8080; }
    .webdesign .rank2 .box-inner .detail-info .skill-ttl:after {
      border-top: 8px solid #cf8080; }
  .webdesign .rank2 .box .point {
    background-color: #ecdcdc; }
    .webdesign .rank2 .box .point-inner-num {
      background-color: #cf8080; }
  .webdesign .rank2 .box .campain {
    background-color: #EDDDA1; }
    .webdesign .rank2 .box .campain-ttl {
      background-color: #D7AE53; }
    .webdesign .rank2 .box .campain-wrapper dt span {
      background: url(../img/lp/check_gold.png) no-repeat;
      background-size: contain; }
  .webdesign .rank2 .box .maintext p {
    background-color: #f7f4f5; }
  .webdesign .rank2 .box .cat-ttl {
    border-left: 5px solid #cf8080; }
  .webdesign .rank2 .box .btn-back-blue {
    background-color: #ecdcdc; }

/*loop-rank-boxad-simpleとboxad-tabsimpleのcss*/
.rank.rank2.rank-tab {
  margin-top: 7rem; }
  @media only screen and (max-width: 767px) {
    .rank.rank2.rank-tab {
      margin-top: 8rem; } }

.rank-simple .box .tab-ttl {
  height: 8rem; }
  @media only screen and (max-width: 767px) {
    .rank-simple .box .tab-ttl:before {
      left: .2rem; } }
  .rank-simple .box .tab-ttl-list-item.active {
    align-items: center; }
    .rank-simple .box .tab-ttl-list-item.active h3 {
      height: 8rem; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .tab-ttl-list-item.active h3 {
          padding-left: 4.5rem; } }
.rank-simple .box .box-inner {
  position: relative; }
  .rank-simple .box .box-inner-icon {
    position: absolute;
    top: -9rem;
    right: 3rem;
    z-index: 10;
    width: 10%; }
    @media only screen and (max-width: 767px) {
      .rank-simple .box .box-inner-icon {
        right: 4rem;
        top: -1.5rem;
        width: 15%; } }
    .rank-simple .box .box-inner-icon-mini {
      width: 9%;
      top: -8rem;
      z-index: 1; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .box-inner-icon-mini {
          right: 4rem;
          top: -1.5rem;
          width: 15%; } }
  .rank-simple .box .box-inner .detail-info .button {
    padding-bottom: 0;
    width: 80%; }
    @media only screen and (max-width: 767px) {
      .rank-simple .box .box-inner .detail-info .button {
        width: 90%; } }
    .rank-simple .box .box-inner .detail-info .button-bottom {
      padding-bottom: 2rem; }
  .rank-simple .box .box-inner .detail-info-ttl {
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-align: center;
    background-color: #daeaf1;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.5; }
  .rank-simple .box .box-inner .detail-info-inner {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem; }
    @media only screen and (max-width: 767px) {
      .rank-simple .box .box-inner .detail-info-inner {
        flex-direction: column; } }
    .rank-simple .box .box-inner .detail-info-inner .banner {
      width: 34%; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .box-inner .detail-info-inner .banner {
          width: 50%; } }
    .rank-simple .box .box-inner .detail-info-inner .point {
      width: 65%;
      margin: 0;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .box-inner .detail-info-inner .point {
          width: 100%; } }
      .rank-simple .box .box-inner .detail-info-inner .point-ttl {
        padding: .5rem 1rem;
        background-color: #050d5c;
        color: #fff;
        font-size: 2rem;
        text-align: center; }
      .rank-simple .box .box-inner .detail-info-inner .point-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        padding: 1.5rem; }
        .rank-simple .box .box-inner .detail-info-inner .point-inner-wrap {
          display: flex;
          flex-direction: column;
          gap: 1.5rem; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .box-inner .detail-info-inner .point ul {
          padding: 1.5rem 1rem; } }
      .rank-simple .box .box-inner .detail-info-inner .point li {
        background: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 1rem;
        align-items: center; }
  .rank-simple .box .box-inner .detail-info .simple-campain {
    margin: 2rem auto; }
    .rank-simple .box .box-inner .detail-info .simple-campain-ttl {
      text-align: center;
      background-color: #fecf00;
      color: #fff;
      font-size: 2rem;
      padding: .5rem 1rem; }
    .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
      background-color: #fffadf;
      padding: 2rem;
      display: flex;
      align-items: center;
      gap: 1rem; }
      @media only screen and (max-width: 767px) {
        .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
          padding: 1rem;
          flex-direction: column-reverse; } }
      .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list {
        width: 55%;
        flex-direction: column;
        display: flex;
        gap: 1rem; }
        @media only screen and (max-width: 767px) {
          .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list {
            width: 100%; } }
        .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item {
          display: flex;
          gap: 1rem;
          align-items: center;
          line-height: 1.5; }
          .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
            display: inline-block;
            background-color: #fecf00;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            font-size: 1.5rem;
            line-height: 2.2rem;
            color: #ffffff; }
          .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-txt {
            width: 90%; }
          .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-kome {
            display: flex;
            flex-direction: column;
            gap: .5rem; }
            .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-kome-txt {
              display: flex;
              font-size: 1.3rem;
              line-height: 1.2; }
              .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-kome-txt .kome {
                display: inline-block;
                width: 10%; }
              .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-kome-txt .txt {
                width: 90%; }
      .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-img {
        width: 50%; }
        @media only screen and (max-width: 767px) {
          .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-img {
            width: 100%; } }
  .rank-simple .box .box-inner .detail-info .review {
    padding-top: 1rem; }
  .rank-simple .box .box-inner .detail-info .maintext p {
    background-color: #fff;
    border: none;
    padding: 2rem; }

/*webデサイナーlpのときの配色設定*/
.webdesign .rank-simple .box .box-inner .detail-info-ttl {
  background-color: #ecdcdc; }
.webdesign .rank-simple .box .box-inner .detail-info-inner .point-ttl {
  background-color: #cf8080; }

/*videolpのときの配色設定*/
.video .rank-simple .box .box-inner .detail-info-ttl {
  background-color: #4e4e4e;
  color: #fff; }
.video .rank-simple .box .box-inner .detail-info-inner .point-ttl {
  background-color: #000;
  color: #fff; }
.video .rank-simple .box .box-inner .detail-info-inner .point-inner-num {
  background-color: #000; }
.video .rank-simple .box .box-inner .detail-info .spec-inner-wrapper dt {
  background-color: #4e4e4e;
  color: #fff; }

/*loop-search-bestschoolとloop-cat-bestschool-search-kekkaのcss*/
.bestsearch {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #050d5c;
  color: #fff; }
  @media only screen and (max-width: 767px) {
    .bestsearch {
      padding: .5rem 0 1rem; } }
  .bestsearch-ttl {
    text-align: center;
    margin: 0rem auto 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.15rem; }
    @media only screen and (max-width: 767px) {
      .bestsearch-ttl {
        margin: 0 auto .5rem; } }
    .bestsearch-ttl-big {
      font-size: 2.5rem; }
  .bestsearch select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 200px;
    border: 2px solid #fff;
    padding: .5rem 1rem;
    height: 3rem;
    color: #808080;
    font-size: 1.2rem;
    width: 100%; }
    @media only screen and (max-width: 767px) {
      .bestsearch select {
        font-size: 1.2rem;
        height: 3rem; } }
  .bestsearch-form {
    display: flex; }
    .bestsearch-form-wrap {
      display: flex;
      gap: .5rem;
      width: 80%;
      justify-content: center;
      flex-wrap: wrap; }
      @media only screen and (max-width: 767px) {
        .bestsearch-form-wrap {
          width: 70%;
          padding: .5rem 0; } }
      .bestsearch-form-wrap-sankaku {
        position: relative;
        width: 32%; }
        @media only screen and (max-width: 767px) {
          .bestsearch-form-wrap-sankaku {
            width: 48%; } }
        .bestsearch-form-wrap-sankaku:after {
          position: absolute;
          top: 50%;
          right: 1rem;
          transform: translateY(-50%);
          content: '';
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 7.5px 0 7.5px;
          border-color: #050d5c transparent transparent transparent;
          display: inline-block; }
          @media only screen and (max-width: 767px) {
            .bestsearch-form-wrap-sankaku:after {
              right: 0.8rem;
              border-width: 8px 6.5px 0 6.5px; } }
      .bestsearch-form-wrap-inner {
        display: flex;
        gap: 0 .5rem; }
        @media only screen and (max-width: 767px) {
          .bestsearch-form-wrap-inner {
            flex-wrap: wrap;
            gap: .5rem; } }
        .bestsearch-form-wrap-inner:focus {
          border: 2px solid #808080; }
    .bestsearch-form-submit {
      position: relative;
      width: 20%;
      text-align: center;
      margin: auto; }
      @media only screen and (max-width: 767px) {
        .bestsearch-form-submit {
          width: 29%; } }
      .bestsearch-form-submit-txt {
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.2;
        position: relative;
        color: #808080; }
        .bestsearch-form-submit-txt:before {
          display: inline-block;
          content: "";
          height: 2rem;
          width: 1px;
          background-color: #808080;
          position: absolute;
          top: 0;
          left: 0;
          transform: rotate(-20deg); }
          @media only screen and (max-width: 767px) {
            .bestsearch-form-submit-txt:before {
              display: none; } }
        .bestsearch-form-submit-txt:after {
          display: inline-block;
          content: "";
          height: 2rem;
          width: 1px;
          background-color: #808080;
          position: absolute;
          top: 0;
          right: 0;
          transform: rotate(20deg); }
          @media only screen and (max-width: 767px) {
            .bestsearch-form-submit-txt:after {
              display: none; } }
      .bestsearch-form-submit input {
        padding: 1.5rem;
        background-color: #fecf00;
        border: 1px solid #fecf00;
        border-radius: 20px;
        font-weight: bold;
        color: #050d5c;
        cursor: pointer;
        transition: 0.2s;
        width: 90%;
        font-size: 2rem; }
        @media only screen and (max-width: 767px) {
          .bestsearch-form-submit input {
            width: 100%;
            border-radius: 25px;
            padding: 3.4rem 0.5rem;
            margin-top: 0.2rem;
            font-size: 2rem; } }
        .bestsearch-form-submit input:hover {
          background-color: #F3F3F3;
          border: 1px solid #F3F3F3; }

.lp-yss.webdesign .bestsearch {
  background-color: #cf8080; }
  .lp-yss.webdesign .bestsearch-form-wrap-sankaku:after {
    border-color: #cf8080 transparent transparent transparent; }
  .lp-yss.webdesign .bestsearch-form-submit input {
    color: #fff; }
    .lp-yss.webdesign .bestsearch-form-submit input:hover {
      color: #cf8080;
      background-color: #fff; }

.lp-yss.video .bestsearch {
  background-color: #4e4e4e; }
  .lp-yss.video .bestsearch-form-wrap-sankaku:after {
    border-color: #000 transparent transparent transparent; }
  .lp-yss.video .bestsearch-form-submit input {
    background-color: #e111c9;
    border: 1px solid #e111c9;
    color: #fff; }
    .lp-yss.video .bestsearch-form-submit input:hover {
      color: #e111c9;
      background-color: #fff; }

.lp-yss.black .bestsearch {
  background-color: #4e4e4e;
  margin-top: 0; }
  .lp-yss.black .bestsearch-form-wrap-sankaku:after {
    border-color: #000 transparent transparent transparent; }
  .lp-yss.black .bestsearch-form-submit input {
    background-color: #e111c9;
    border: 1px solid #e111c9;
    color: #fff; }
    .lp-yss.black .bestsearch-form-submit input:hover {
      color: #e111c9;
      background-color: #fff; }

.bestkekka-inner {
  background-color: #808080;
  padding: .5rem 1rem 2.5rem;
  position: relative; }
  .bestkekka-inner:before {
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5rem 9rem 0 9rem;
    border-color: #808080 transparent transparent transparent; }
    @media only screen and (max-width: 767px) {
      .bestkekka-inner:before {
        bottom: -2.5rem;
        border-width: 3rem 5rem 0 5rem; } }
  .bestkekka-inner .pr {
    color: #F3F3F3;
    opacity: 1; }
  .bestkekka-inner-tag {
    max-width: 800px;
    margin: 2rem auto 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .bestkekka-inner-tag {
        margin: 1rem auto 0;
        gap: 0.5rem;
        flex-wrap: wrap; } }
    .bestkekka-inner-tag-wrap {
      display: flex;
      flex-direction: column;
      width: 18%; }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-tag-wrap {
          width: 32%; } }
      .bestkekka-inner-tag-wrap-ttl {
        background-color: #F3F3F3;
        padding: .5rem 1rem;
        text-align: center;
        font-weight: bold;
        color: #808080; }
      .bestkekka-inner-tag-wrap-content {
        padding: .5rem 1rem;
        text-align: center;
        background-color: #fff;
        color: #808080;
        min-height: 5.5rem;
        display: flex;
        justify-content: center;
        align-items: center; }
  .bestkekka-inner-results {
    margin: 2rem auto 0;
    text-align: center;
    font-size: 1.5rem;
    color: #F3F3F3; }
    .bestkekka-inner-results-big {
      font-size: 2.5rem;
      font-weight: bold; }
    .bestkekka-inner-results-none {
      margin: 6rem auto 2rem;
      text-align: center;
      font-size: 1.5rem;
      color: #808080; }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-results-none {
          margin: 4rem auto 1.5rem;
          line-height: 1.4; } }
  .bestkekka-inner-sort {
    max-width: 800px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: end; }
    @media only screen and (max-width: 767px) {
      .bestkekka-inner-sort {
        flex-direction: row;
        margin: 2.5rem auto 1rem;
        justify-content: space-between;
        padding: 0 .5rem;
        align-items: center; } }
    .bestkekka-inner-sort-now {
      display: flex;
      justify-content: right;
      font-size: 1.2rem;
      padding-bottom: .5rem;
      align-items: center; }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-sort-now {
          width: 50%;
          font-size: 1rem;
          padding-bottom: 0; } }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-sort-now-ttl {
          width: 15%; } }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-sort-now-content {
          width: 85%; } }
    .bestkekka-inner-sort select {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      padding: .5rem 1rem;
      border: solid 1px #808080;
      border-radius: 200px; }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-sort select {
          padding: .5rem 2.5rem .5rem 1rem;
          width: 80%; } }
    .bestkekka-inner-sort-form {
      position: relative;
      display: flex;
      justify-content: right; }
      .bestkekka-inner-sort-form:after {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 6px 0 6px;
        border-color: #808080 transparent transparent transparent;
        display: inline-block; }
        @media only screen and (max-width: 767px) {
          .bestkekka-inner-sort-form:after {
            right: 0.8rem;
            border-width: 8px 6.5px 0 6.5px; } }
  .bestkekka-inner-button {
    width: 20%;
    margin: 0 auto 3rem; }
    @media only screen and (max-width: 767px) {
      .bestkekka-inner-button {
        width: 70%; } }
    .bestkekka-inner-button-wrap {
      background-color: #808080;
      border: 1px solid #808080;
      border-radius: 30px;
      font-weight: bold;
      color: #fff;
      cursor: pointer;
      transition: 0.2s;
      font-size: 2rem; }
      @media only screen and (max-width: 767px) {
        .bestkekka-inner-button-wrap {
          width: 100%;
          border-radius: 25px;
          margin-top: 0.2rem;
          font-size: 1.5rem; } }
      .bestkekka-inner-button-wrap:hover {
        background-color: #F3F3F3; }
      .bestkekka-inner-button-wrap a {
        padding: 1.8rem 0;
        color: #F3F3F3;
        text-decoration: none;
        display: inline-block;
        width: 100%; }
        .bestkekka-inner-button-wrap a:hover {
          color: #808080; }
.bestkekka-rank {
  max-width: 800px;
  margin: auto; }
  .bestkekka-rank .box {
    border-top: 5px solid #808080; }
    .bestkekka-rank .box .title .icon {
      transition: .2s; }
      .bestkekka-rank .box .title .icon:hover {
        opacity: .7;
        transition: .2s; }
    .bestkekka-rank .box .title h3 {
      padding: 1rem 0;
      text-align: center; }
    .bestkekka-rank .box .tab-ttl {
      height: 8rem; }
      @media only screen and (max-width: 767px) {
        .bestkekka-rank .box .tab-ttl:before {
          left: .2rem; } }
      .bestkekka-rank .box .tab-ttl-list-item.active {
        align-items: center; }
        .bestkekka-rank .box .tab-ttl-list-item.active h3 {
          height: 8rem; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .tab-ttl-list-item.active h3 {
              padding-left: 4.5rem; } }
    .bestkekka-rank .box .box-inner {
      position: relative; }
      .bestkekka-rank .box .box-inner-icon {
        position: absolute;
        top: -9rem;
        right: 3rem;
        z-index: 10;
        width: 10%; }
        @media only screen and (max-width: 767px) {
          .bestkekka-rank .box .box-inner-icon {
            right: 4rem;
            top: -1.5rem;
            width: 15%; } }
        .bestkekka-rank .box .box-inner-icon-mini {
          width: 9%;
          top: -8rem; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .box-inner-icon-mini {
              right: 4rem;
              top: -1.5rem;
              width: 15%; } }
      .bestkekka-rank .box .box-inner .detail-info .button {
        padding-bottom: 0;
        width: 80%; }
        @media only screen and (max-width: 767px) {
          .bestkekka-rank .box .box-inner .detail-info .button {
            width: 90%; } }
        .bestkekka-rank .box .box-inner .detail-info .button-bottom {
          padding-bottom: 2rem; }
      .bestkekka-rank .box .box-inner .detail-info-ttl {
        padding-top: .5rem;
        padding-bottom: .5rem;
        text-align: center;
        background-color: #808080;
        font-weight: bold;
        color: #fff;
        font-size: 1.5rem;
        line-height: 1.5; }
      .bestkekka-rank .box .box-inner .detail-info-inner {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 767px) {
          .bestkekka-rank .box .box-inner .detail-info-inner {
            flex-direction: column; } }
        .bestkekka-rank .box .box-inner .detail-info-inner .banner {
          width: 34%; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .box-inner .detail-info-inner .banner {
              width: 50%; } }
        .bestkekka-rank .box .box-inner .detail-info-inner .point {
          width: 65%;
          margin: 0;
          background-color: transparent;
          display: flex;
          flex-direction: column;
          justify-content: center; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .box-inner .detail-info-inner .point {
              width: 100%; } }
          .bestkekka-rank .box .box-inner .detail-info-inner .point-ttl {
            padding: .5rem 1rem;
            background-color: #808080;
            color: #fff;
            font-size: 2rem;
            text-align: center; }
          .bestkekka-rank .box .box-inner .detail-info-inner .point-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            padding: 1.5rem; }
            .bestkekka-rank .box .box-inner .detail-info-inner .point-inner-wrap {
              display: flex;
              flex-direction: column;
              gap: 1.5rem; }
            .bestkekka-rank .box .box-inner .detail-info-inner .point-inner-num {
              line-height: 1.7;
              background-color: #808080; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .box-inner .detail-info-inner .point ul {
              padding: 1.5rem 1rem; } }
          .bestkekka-rank .box .box-inner .detail-info-inner .point li {
            background: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 1rem;
            align-items: center; }
      .bestkekka-rank .box .box-inner .detail-info .spec-inner-wrapper dt {
        background-color: #808080;
        color: #fff; }
      .bestkekka-rank .box .box-inner .detail-info .simple-campain {
        margin: 2rem auto; }
        .bestkekka-rank .box .box-inner .detail-info .simple-campain-ttl {
          text-align: center;
          background-color: #fecf00;
          color: #fff;
          font-size: 2rem;
          padding: .5rem 1rem; }
        .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper {
          background-color: #fffadf;
          padding: 2rem;
          display: flex;
          align-items: center;
          gap: 1rem; }
          @media only screen and (max-width: 767px) {
            .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper {
              padding: 1rem;
              flex-direction: column-reverse; } }
          .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-list {
            width: 55%;
            flex-direction: column;
            display: flex;
            gap: 1rem; }
            @media only screen and (max-width: 767px) {
              .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-list {
                width: 100%; } }
            .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-list-item {
              display: flex;
              gap: 1rem;
              align-items: center;
              line-height: 1.5; }
              .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
                display: inline-block;
                background-color: #fecf00;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                text-align: center;
                font-size: 1.5rem;
                line-height: 2.2rem;
                color: #ffffff; }
              .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-list-item-txt {
                width: 90%; }
          .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-img {
            width: 45%; }
            @media only screen and (max-width: 767px) {
              .bestkekka-rank .box .box-inner .detail-info .simple-campain-wrapper-img {
                width: 60%; } }
      .bestkekka-rank .box .box-inner .detail-info .review {
        padding-top: 1rem; }
      .bestkekka-rank .box .box-inner .detail-info .maintext p {
        background-color: #fff;
        border: none;
        padding: 2rem; }

/*pmax用LPのcss*/
/*Pmax用LP
----------------------------------------------------------------------------------------------*/
.programming .pmax-bold, .webdesign .pmax-bold {
  font-weight: 500;
  color: #cf8080; }
.programming .pmax-column, .webdesign .pmax-column {
  margin: 3rem auto; }
  .programming .pmax-column-inner, .webdesign .pmax-column-inner {
    padding: 3rem;
    padding-bottom: 0;
    background-color: #f7f4f5; }
    @media only screen and (max-width: 767px) {
      .programming .pmax-column-inner, .webdesign .pmax-column-inner {
        padding: 1rem; } }
    .programming .pmax-column-inner-ttl, .webdesign .pmax-column-inner-ttl {
      margin: -5rem auto 0;
      max-width: 650px; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-inner-ttl, .webdesign .pmax-column-inner-ttl {
          margin: -2rem auto 0; } }
    .programming .pmax-column-inner-txt, .webdesign .pmax-column-inner-txt {
      margin-top: 1rem; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-inner-txt, .webdesign .pmax-column-inner-txt {
          font-size: 1.3rem;
          line-height: 1.6; } }
    .programming .pmax-column-inner-wrap, .webdesign .pmax-column-inner-wrap {
      margin-top: 1rem;
      background: url(../img/lp/pmax_column_img.png) no-repeat;
      background-size: contain;
      background-position: right; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-inner-wrap, .webdesign .pmax-column-inner-wrap {
          margin-top: 0;
          background: none; } }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-inner-wrap-img, .webdesign .pmax-column-inner-wrap-img {
          margin-top: 1rem;
          margin-bottom: 1rem; } }
      .programming .pmax-column-inner-wrap-txt, .webdesign .pmax-column-inner-wrap-txt {
        width: 55%; }
        @media only screen and (max-width: 767px) {
          .programming .pmax-column-inner-wrap-txt, .webdesign .pmax-column-inner-wrap-txt {
            font-size: 1.3rem;
            width: 100%;
            line-height: 1.6; } }
    .programming .pmax-column-inner-graph, .webdesign .pmax-column-inner-graph {
      margin: 2rem 0; }
      .programming .pmax-column-inner-graph-ttl, .webdesign .pmax-column-inner-graph-ttl {
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: .5rem; }
      .programming .pmax-column-inner-graph-img, .webdesign .pmax-column-inner-graph-img {
        width: 80%;
        margin: auto; }
        @media only screen and (max-width: 767px) {
          .programming .pmax-column-inner-graph-img, .webdesign .pmax-column-inner-graph-img {
            width: 100%; } }
  .programming .pmax-column-strong, .webdesign .pmax-column-strong {
    background: url(../img/lp/pmax_column_bg.png) no-repeat;
    background-size: contain;
    padding: 1.5rem 0 3.5rem;
    margin-bottom: -3rem; }
    @media only screen and (max-width: 767px) {
      .programming .pmax-column-strong, .webdesign .pmax-column-strong {
        background: url(../img/lp/pmax_column_bg_sp.png) no-repeat;
        background-size: contain;
        padding: 1rem 1rem 3rem; } }
    .programming .pmax-column-strong-main, .webdesign .pmax-column-strong-main {
      color: #cf8080;
      font-size: 2rem;
      font-weight: 500;
      text-align: center;
      line-height: 1.5;
      margin-bottom: 1.5rem; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-strong-main, .webdesign .pmax-column-strong-main {
          font-size: 1.8rem;
          margin-bottom: 1rem;
          line-height: 1.6; } }
    .programming .pmax-column-strong-sub, .webdesign .pmax-column-strong-sub {
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-column-strong-sub, .webdesign .pmax-column-strong-sub {
          font-size: 1.3rem;
          line-height: 1.6; } }
.programming .pmax-skill, .webdesign .pmax-skill {
  margin-top: -2rem; }
  .programming .pmax-skill-ttl, .webdesign .pmax-skill-ttl {
    max-width: 650px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      .programming .pmax-skill-ttl, .webdesign .pmax-skill-ttl {
        padding: 0 1rem; } }
  .programming .pmax-skill-tab, .webdesign .pmax-skill-tab {
    margin-top: 3rem; }
    @media only screen and (max-width: 767px) {
      .programming .pmax-skill-tab, .webdesign .pmax-skill-tab {
        margin-top: 2rem; } }
    .programming .pmax-skill-tab-wrap, .webdesign .pmax-skill-tab-wrap {
      display: flex;
      justify-content: space-between; }
      .programming .pmax-skill-tab-wrap-btn, .webdesign .pmax-skill-tab-wrap-btn {
        display: flex;
        width: 31%; }
        .programming .pmax-skill-tab-wrap-btn-number, .webdesign .pmax-skill-tab-wrap-btn-number {
          width: 12%;
          padding: 1rem;
          color: #fff;
          font-size: 1.8rem;
          border-radius: 5px 0 0 0;
          background-color: #808080;
          transition: 0.1s; }
          @media only screen and (max-width: 767px) {
            .programming .pmax-skill-tab-wrap-btn-number, .webdesign .pmax-skill-tab-wrap-btn-number {
              padding: 0.5rem;
              width: 16%; } }
        .programming .pmax-skill-tab-wrap-btn-name, .webdesign .pmax-skill-tab-wrap-btn-name {
          width: 88%;
          padding: 1rem;
          border-radius: 0 5px 0 0;
          background-color: #abaaaa;
          text-align: center;
          font-size: 1.5rem;
          transition: 0.1s; }
          @media only screen and (max-width: 767px) {
            .programming .pmax-skill-tab-wrap-btn-name, .webdesign .pmax-skill-tab-wrap-btn-name {
              width: 84%; } }
      .programming .pmax-skill-tab-wrap .active .pmax-skill-tab-wrap-btn-number, .webdesign .pmax-skill-tab-wrap .active .pmax-skill-tab-wrap-btn-number {
        background-color: #cf8080; }
      .programming .pmax-skill-tab-wrap .active .pmax-skill-tab-wrap-btn-name, .webdesign .pmax-skill-tab-wrap .active .pmax-skill-tab-wrap-btn-name {
        background-color: #dfb1b2; }
      .programming .pmax-skill-tab-wrap-contents-inner, .webdesign .pmax-skill-tab-wrap-contents-inner {
        display: flex;
        gap: 2rem;
        padding: 2rem;
        background-color: #f7f4f5; }
        @media only screen and (max-width: 767px) {
          .programming .pmax-skill-tab-wrap-contents-inner, .webdesign .pmax-skill-tab-wrap-contents-inner {
            flex-direction: column; } }
        .programming .pmax-skill-tab-wrap-contents-inner-img, .webdesign .pmax-skill-tab-wrap-contents-inner-img {
          width: 40%; }
          @media only screen and (max-width: 767px) {
            .programming .pmax-skill-tab-wrap-contents-inner-img, .webdesign .pmax-skill-tab-wrap-contents-inner-img {
              width: 100%; } }
        .programming .pmax-skill-tab-wrap-contents-inner-txt, .webdesign .pmax-skill-tab-wrap-contents-inner-txt {
          width: 60%;
          font-size: 1.4rem;
          line-height: 1.5; }
          @media only screen and (max-width: 767px) {
            .programming .pmax-skill-tab-wrap-contents-inner-txt, .webdesign .pmax-skill-tab-wrap-contents-inner-txt {
              width: 100%;
              font-size: 1.2rem;
              line-height: 1.6; } }
  .programming .pmax-skill-wrap, .webdesign .pmax-skill-wrap {
    margin-top: 1.5rem; }
    .programming .pmax-skill-wrap-inner, .webdesign .pmax-skill-wrap-inner {
      padding: 2rem;
      background-color: #f1e3e4; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-skill-wrap-inner, .webdesign .pmax-skill-wrap-inner {
          padding: 2rem 2rem 0; } }
      @media only screen and (max-width: 767px) {
        .programming .pmax-skill-wrap-inner-txt, .webdesign .pmax-skill-wrap-inner-txt {
          font-size: 1.3rem;
          line-height: 1.6; } }
    .programming .pmax-skill-wrap-strong, .webdesign .pmax-skill-wrap-strong {
      background: url(../img/lp/pmax_skill_bg.png) no-repeat;
      background-size: contain;
      padding: 1.5rem 0 3rem;
      margin-bottom: 1rem; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-skill-wrap-strong, .webdesign .pmax-skill-wrap-strong {
          background: url(../img/lp/pmax_skill_bg_sp.png) no-repeat;
          background-size: contain;
          padding: 1rem 1rem 2rem; } }
      .programming .pmax-skill-wrap-strong-sub, .webdesign .pmax-skill-wrap-strong-sub {
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .programming .pmax-skill-wrap-strong-sub, .webdesign .pmax-skill-wrap-strong-sub {
            font-size: 1.3rem;
            line-height: 1.6; } }
      .programming .pmax-skill-wrap-strong-main, .webdesign .pmax-skill-wrap-strong-main {
        color: #cf8080;
        font-size: 2rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.5;
        margin-top: 1.5rem; }
        @media only screen and (max-width: 767px) {
          .programming .pmax-skill-wrap-strong-main, .webdesign .pmax-skill-wrap-strong-main {
            font-size: 1.8rem; } }
.programming .pmax-link, .webdesign .pmax-link {
  margin-bottom: -2rem; }
  .programming .pmax-link ul li::before, .webdesign .pmax-link ul li::before {
    display: none; }
  .programming .pmax-link ul li::after, .webdesign .pmax-link ul li::after {
    display: none; }
  .programming .pmax-link a:link, .webdesign .pmax-link a:link {
    text-decoration: none;
    color: #333;
    font-weight: bold; }
  .programming .pmax-link a:visited, .webdesign .pmax-link a:visited {
    color: #808080; }
  .programming .pmax-link a:hover img, .webdesign .pmax-link a:hover img {
    opacity: 1; }
  .programming .pmax-link-wrap, .webdesign .pmax-link-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .programming .pmax-link-wrap, .webdesign .pmax-link-wrap {
        grid-template-columns: 1fr 1fr;
        gap: .5rem; } }
    .programming .pmax-link-wrap-item, .webdesign .pmax-link-wrap-item {
      display: flex;
      width: 100%;
      padding: 1rem 2rem;
      background-color: #c4c7cc;
      border: .5rem solid #fff;
      border-radius: 10px;
      height: 7rem;
      margin-bottom: 0;
      transition: .3s; }
      @media only screen and (max-width: 767px) {
        .programming .pmax-link-wrap-item, .webdesign .pmax-link-wrap-item {
          padding: 1rem; } }
      .programming .pmax-link-wrap-item:hover, .webdesign .pmax-link-wrap-item:hover {
        border: 0.5rem solid #c4c7cc;
        background-color: #808080; }
        .programming .pmax-link-wrap-item:hover .pmax-link-wrap-item-flex-txt, .webdesign .pmax-link-wrap-item:hover .pmax-link-wrap-item-flex-txt {
          color: #fff; }
      .programming .pmax-link-wrap-item-flex, .webdesign .pmax-link-wrap-item-flex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 100%; }
        .programming .pmax-link-wrap-item-flex-img, .webdesign .pmax-link-wrap-item-flex-img {
          width: 20%; }
        .programming .pmax-link-wrap-item-flex-txt, .webdesign .pmax-link-wrap-item-flex-txt {
          width: 79%;
          transition: .3s; }
.programming .schoolsearch, .webdesign .schoolsearch {
  background-color: #F3F3F3;
  padding: 1rem 1.5rem 2rem 1rem;
  margin-top: 1rem; }
  .programming .schoolsearch-ttl, .webdesign .schoolsearch-ttl {
    max-width: 450px;
    margin: auto; }
    @media only screen and (max-width: 767px) {
      .programming .schoolsearch-ttl, .webdesign .schoolsearch-ttl {
        max-width: 300px; } }
  .programming .schoolsearch-form, .webdesign .schoolsearch-form {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
    @media only screen and (max-width: 767px) {
      .programming .schoolsearch-form, .webdesign .schoolsearch-form {
        gap: 2.5rem; } }
    .programming .schoolsearch-form-wrap-width, .webdesign .schoolsearch-form-wrap-width {
      width: 90%;
      margin: 1.5rem auto 0; }
    .programming .schoolsearch-form-wrap-inner, .webdesign .schoolsearch-form-wrap-inner {
      margin: 1rem auto;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 3rem;
      width: 90%; }
      .programming .schoolsearch-form-wrap-inner-select, .webdesign .schoolsearch-form-wrap-inner-select {
        position: relative;
        display: inline-block;
        width: 47.5%; }
        @media only screen and (max-width: 767px) {
          .programming .schoolsearch-form-wrap-inner-select, .webdesign .schoolsearch-form-wrap-inner-select {
            width: 100%; } }
        .programming .schoolsearch-form-wrap-inner-select-ttl, .webdesign .schoolsearch-form-wrap-inner-select-ttl {
          position: relative;
          font-size: 1.6rem;
          margin: 0 0 0.5rem 0;
          padding-left: 1.5rem;
          color: #808080; }
          .programming .schoolsearch-form-wrap-inner-select-ttl::before, .webdesign .schoolsearch-form-wrap-inner-select-ttl::before {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            display: inline-block;
            width: .8rem;
            height: .8rem;
            border-radius: 30px;
            background-color: #808080;
            content: ''; }
        .programming .schoolsearch-form-wrap-inner-select::before, .webdesign .schoolsearch-form-wrap-inner-select::before {
          display: inline-block;
          width: 0;
          height: 0;
          border-width: 8px 5px 0 5px;
          border-style: solid;
          border-color: #808080 transparent transparent transparent;
          content: "";
          position: absolute;
          top: 70%;
          right: 1rem;
          transform: translateY(-50%);
          pointer-events: none; }
        .programming .schoolsearch-form-wrap-inner-select select, .webdesign .schoolsearch-form-wrap-inner-select select {
          -webkit-appearance: none;
          /* ベンダープレフィックス(Google Chrome、Safari用) */
          -moz-appearance: none;
          /* ベンダープレフィックス(Firefox用) */
          appearance: none;
          /* 標準のスタイルを無効にする */
          padding: 0.8rem 1.8rem 0.8rem 1rem;
          border: 1px solid #808080;
          background-color: #fff;
          border-radius: 30px;
          color: #808080;
          font-size: 1.2rem;
          width: 100%; }
          .programming .schoolsearch-form-wrap-inner-select select option[selected], .webdesign .schoolsearch-form-wrap-inner-select select option[selected] {
            background-color: #daeaf1; }
      .programming .schoolsearch-form-wrap-inner-alpha, .webdesign .schoolsearch-form-wrap-inner-alpha {
        margin: 1rem auto;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 3rem; }
        .programming .schoolsearch-form-wrap-inner-alpha-item, .webdesign .schoolsearch-form-wrap-inner-alpha-item {
          width: 20%;
          color: #808080; }
          @media only screen and (max-width: 767px) {
            .programming .schoolsearch-form-wrap-inner-alpha-item, .webdesign .schoolsearch-form-wrap-inner-alpha-item {
              width: 44%; } }
          .programming .schoolsearch-form-wrap-inner-alpha-item-wide, .webdesign .schoolsearch-form-wrap-inner-alpha-item-wide {
            width: 25%; }
            @media only screen and (max-width: 767px) {
              .programming .schoolsearch-form-wrap-inner-alpha-item-wide, .webdesign .schoolsearch-form-wrap-inner-alpha-item-wide {
                width: 44%; } }
          .programming .schoolsearch-form-wrap-inner-alpha-item-txt, .webdesign .schoolsearch-form-wrap-inner-alpha-item-txt {
            display: inline-block;
            position: relative;
            padding-left: 1.5rem;
            font-size: 1.5rem; }
            @media only screen and (max-width: 767px) {
              .programming .schoolsearch-form-wrap-inner-alpha-item-txt, .webdesign .schoolsearch-form-wrap-inner-alpha-item-txt {
                font-size: 1.3rem; } }
            .programming .schoolsearch-form-wrap-inner-alpha-item-txt:before, .webdesign .schoolsearch-form-wrap-inner-alpha-item-txt:before {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              width: 1rem;
              height: 1rem;
              border: 1px solid #eee;
              background: #fff;
              content: "";
              transition: all 0.2s; }
            .programming .schoolsearch-form-wrap-inner-alpha-item-txt:after, .webdesign .schoolsearch-form-wrap-inner-alpha-item-txt:after {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              width: 1rem;
              height: 1rem;
              color: #050d5c;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
              content: "✔";
              opacity: 0;
              transition: all 0.2s; }
          .programming .schoolsearch-form-wrap-inner-alpha-item input[type="checkbox"], .webdesign .schoolsearch-form-wrap-inner-alpha-item input[type="checkbox"] {
            opacity: 0;
            appearance: none;
            position: absolute; }
            .programming .schoolsearch-form-wrap-inner-alpha-item input[type="checkbox"]:checked + span::after, .webdesign .schoolsearch-form-wrap-inner-alpha-item input[type="checkbox"]:checked + span::after {
              opacity: 1; }
    .programming .schoolsearch-form-submit, .webdesign .schoolsearch-form-submit {
      position: relative;
      width: 100%;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .programming .schoolsearch-form-submit, .webdesign .schoolsearch-form-submit {
          width: 100%;
          display: flex;
          flex-direction: column; } }
      .programming .schoolsearch-form-submit:before, .webdesign .schoolsearch-form-submit:before {
        display: inline-block;
        content: "";
        width: 40rem;
        height: 1px;
        background-color: #050d5c;
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%); }
        @media only screen and (max-width: 767px) {
          .programming .schoolsearch-form-submit:before, .webdesign .schoolsearch-form-submit:before {
            width: 13rem;
            top: -2rem; } }
      .programming .schoolsearch-form-submit:after, .webdesign .schoolsearch-form-submit:after {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 6px 0 6px;
        border-color: #050d5c transparent transparent transparent;
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%); }
        @media only screen and (max-width: 767px) {
          .programming .schoolsearch-form-submit:after, .webdesign .schoolsearch-form-submit:after {
            border-color: #050d5c transparent transparent transparent; } }
      .programming .schoolsearch-form-submit-txt, .webdesign .schoolsearch-form-submit-txt {
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.2;
        position: relative;
        color: #808080; }
        @media only screen and (max-width: 767px) {
          .programming .schoolsearch-form-submit-txt, .webdesign .schoolsearch-form-submit-txt {
            display: inline; } }
        .programming .schoolsearch-form-submit-txt span, .webdesign .schoolsearch-form-submit-txt span {
          display: inline;
          position: relative; }
          .programming .schoolsearch-form-submit-txt span:before, .webdesign .schoolsearch-form-submit-txt span:before {
            display: inline-block;
            content: "";
            width: 1px;
            height: 2rem;
            background-color: #808080;
            position: absolute;
            top: 0;
            left: -1rem;
            transform: rotate(-25deg); }
            @media only screen and (max-width: 767px) {
              .programming .schoolsearch-form-submit-txt span:before, .webdesign .schoolsearch-form-submit-txt span:before {
                height: 1rem;
                left: -1rem;
                top: 0.5rem; } }
          .programming .schoolsearch-form-submit-txt span:after, .webdesign .schoolsearch-form-submit-txt span:after {
            display: inline-block;
            content: "";
            width: 1px;
            height: 2rem;
            background-color: #808080;
            position: absolute;
            top: 0;
            right: -1rem;
            transform: rotate(25deg); }
            @media only screen and (max-width: 767px) {
              .programming .schoolsearch-form-submit-txt span:after, .webdesign .schoolsearch-form-submit-txt span:after {
                height: 1rem;
                right: -1rem;
                top: 0.5rem; } }
      .programming .schoolsearch-form-submit input, .webdesign .schoolsearch-form-submit input {
        margin: 1rem auto 0;
        padding: 1.2rem 8rem;
        background-color: #daeaf1;
        border: 1px solid #daeaf1;
        border-radius: 30px;
        font-weight: bold;
        color: #050d5c;
        cursor: pointer;
        transition: 0.2s; }
        @media only screen and (max-width: 767px) {
          .programming .schoolsearch-form-submit input, .webdesign .schoolsearch-form-submit input {
            padding: 1rem 8rem;
            margin-top: 0.4rem; } }
        .programming .schoolsearch-form-submit input:hover, .webdesign .schoolsearch-form-submit input:hover {
          background-color: #050d5c;
          color: #daeaf1; }

.searchkekka .box {
  padding-bottom: 2rem; }
  .searchkekka .box .button {
    padding-bottom: 0; }
  .searchkekka .box .title h3 {
    padding: 1rem 3.25%; }
.searchkekka-cv {
  background: #e22c2c;
  border-radius: 50px;
  font-size: 2rem;
  display: inline-block;
  text-shadow: 2px 2px 2px #666;
  box-shadow: 0 4px 0 #a10b0c;
  margin: 0 0 1.5rem 0;
  width: 60%;
  background-color: #DE020D;
  animation-name: btnlike-btn;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }
  @media only screen and (max-width: 767px) {
    .searchkekka-cv {
      width: 90%; } }
  .searchkekka-cv a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 2rem 3rem; }
.searchkekka-ttl {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5rem; }
  @media only screen and (max-width: 767px) {
    .searchkekka-ttl {
      padding: 0 1rem; } }
  .searchkekka-ttl-tag {
    font-size: 2rem;
    line-height: 1.2; }
.searchkekka-sort {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  width: 50rem;
  border: 1px solid #F3F3F3;
  margin: 0 auto 1rem; }
  @media only screen and (max-width: 767px) {
    .searchkekka-sort {
      margin: 0 auto 1rem;
      width: 95%;
      padding: 0;
      gap: 0; } }
  .searchkekka-sort-ttl {
    display: inline-block;
    padding: 0.5rem;
    background-color: #F3F3F3;
    width: 13%;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .searchkekka-sort-ttl {
        width: 25%;
        display: flex;
        align-items: center; } }
  .searchkekka-sort-box {
    padding: 0.5rem; }
    .searchkekka-sort-box button {
      padding: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 0;
      border-radius: 3px;
      background: 0 0;
      line-height: 1;
      cursor: auto; }
      @media only screen and (max-width: 767px) {
        .searchkekka-sort-box button {
          line-height: 1.5; } }
    .searchkekka-sort-box .sort {
      position: relative;
      margin-right: 2rem; }
    .searchkekka-sort-box .sort.asc::after {
      position: absolute;
      top: 50%;
      right: -1rem;
      transform: translateY(-50%);
      color: #a0a0a0;
      content: "▼";
      font-size: 1rem; }
    .searchkekka-sort-box .sort.desc::after {
      position: absolute;
      top: 50%;
      right: -1rem;
      transform: translateY(-50%);
      color: #a0a0a0;
      content: "▲";
      font-size: 1rem; }
.searchkekka-skill {
  width: 100% !important;
  float: unset !important; }
.searchkekka-none {
  margin-top: 1rem; }
  .searchkekka-none-btn {
    width: 30%;
    margin: 2rem auto; }
    @media only screen and (max-width: 767px) {
      .searchkekka-none-btn {
        width: 90%; } }
    .searchkekka-none-btn a {
      text-decoration: none !important;
      color: #0a0a0a;
      font-weight: normal;
      line-height: 2rem;
      padding: 1rem 5rem;
      border-radius: 40px;
      display: inline-block;
      background-color: #f4f4f4;
      transition: 0.3s; }
      .searchkekka-none-btn a:hover {
        background-color: #222222;
        color: #fff; }
@media only screen and (max-width: 767px) {
  .searchkekka .cat-list_column p {
    display: block;
    font-size: 0.6rem; } }
@media only screen and (max-width: 767px) {
  .searchkekka .cat-list_column .item .img {
    width: 100%;
    margin-bottom: 0.5rem; } }
@media only screen and (max-width: 767px) {
  .searchkekka .cat-list_column .item .img img {
    width: 60%;
    height: auto;
    margin: auto; } }
@media only screen and (max-width: 767px) {
  .searchkekka .cat-list_column .item .txt {
    width: 100%; } }

.webdesign .pmax .column-list dt {
  background: #cf8080; }
.webdesign .pmax .column-list li:before {
  background: #cf8080; }
.webdesign .schoolsearch {
  background-color: #f7f4f5; }
  .webdesign .schoolsearch-form-wrap-inner-select select option[selected] {
    background-color: #ecdcdc; }
  .webdesign .schoolsearch-form-wrap-inner-alpha-item-txt:after {
    color: #cf8080; }
  .webdesign .schoolsearch-form-submit:before {
    background-color: #cf8080; }
  .webdesign .schoolsearch-form-submit:after {
    border-color: #cf8080 transparent transparent transparent; }
    @media only screen and (max-width: 767px) {
      .webdesign .schoolsearch-form-submit:after {
        border-color: #cf8080 transparent transparent transparent; } }
  .webdesign .schoolsearch-form input {
    background-color: #ecdcdc;
    border: 1px solid #ecdcdc;
    color: #cf8080; }
    .webdesign .schoolsearch-form input:hover {
      background-color: #cf8080;
      color: #ecdcdc; }

.pc_none {
  display: none; }
  @media only screen and (max-width: 767px) {
    .pc_none {
      display: block; } }

@media only screen and (max-width: 767px) {
  .sp_none {
    display: none; } }

/* ページネーション */
.pagination-area {
  margin: 0 0 32px 0; }
  .pagination-area .navigation {
    width: 100%;
    text-align: center;
    padding: 16px 0; }
  .pagination-area .nav-links a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px; }
  .pagination-area .nav-links .page-numbers {
    border: 1px solid #DDD;
    padding: 8px 12px;
    background: #EFEFEF; }
  .pagination-area .nav-links .current {
    background: #050d5c;
    color: #FFF; }

/*黒基調LPのcss*/
.black {
  background-color: #0e100f;
  color: #0e100f;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Lucida Grande", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
  .black .mainvisual {
    z-index: 0;
    background-color: transparent !important;
    max-width: 800px;
    margin: 0 auto; }
    .black .mainvisual img {
      height: auto; }
  .black .button .cv {
    background: #e111c9;
    box-shadow: 0 4px 0 #7D0A70; }
  .black .button .link {
    background: #f0ff1d;
    box-shadow: 0 4px 0 #4e5308; }
    .black .button .link a {
      color: #0e100f;
      text-shadow: none; }
  .black .ttl {
    max-width: 500px;
    margin: 1rem auto; }
    @media only screen and (max-width: 767px) {
      .black .ttl {
        padding: 0 0.5rem; } }
  .black .wrap .text-date {
    color: #fff;
    text-align: right; }
  @media only screen and (max-width: 767px) {
    .black .wrap .type {
      padding: 0 .5rem; } }
  .black .wrap .type-ttl {
    max-width: 500px;
    margin: 1rem auto; }
  .black .wrap .type-list {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .black .wrap .type-list {
        margin-top: .5rem;
        flex-direction: column;
        gap: 1.5rem; } }
    .black .wrap .type-list-inner {
      width: 24%; }
      @media only screen and (max-width: 767px) {
        .black .wrap .type-list-inner {
          width: 100%; } }
      .black .wrap .type-list-inner-fact {
        width: 33%; }
        @media only screen and (max-width: 767px) {
          .black .wrap .type-list-inner-fact {
            width: 100%; } }
      .black .wrap .type-list-inner-ttl {
        padding: 1rem .5rem;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 1.2rem;
        background-color: #436b2f;
        border-radius: 20px 20px 0 0; }
        .black .wrap .type-list-inner-ttl-big {
          font-size: 1.8rem; }
        .black .wrap .type-list-inner-ttl-y {
          background-color: #f0ff1d;
          color: #0e100f; }
        .black .wrap .type-list-inner-ttl-g {
          background-color: #6d2678; }
        .black .wrap .type-list-inner-ttl-w {
          background-color: #034d64; }
      .black .wrap .type-list-inner-content {
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #0e100f;
        background-color: #e8e8e8;
        border: none;
        border-radius: 0 0 20px 20px;
        text-align: center;
        font-size: .9rem;
        min-height: 20rem; }
        @media only screen and (max-width: 767px) {
          .black .wrap .type-list-inner-content {
            padding: 1rem 1rem 2rem;
            min-height: auto; } }
        .black .wrap .type-list-inner-content-wrap {
          display: flex;
          flex-direction: column;
          gap: .5rem;
          max-width: 350px;
          margin: auto; }
          .black .wrap .type-list-inner-content-wrap .logo {
            width: 80%;
            margin: auto;
            position: inherit; }
            @media only screen and (max-width: 767px) {
              .black .wrap .type-list-inner-content-wrap .logo {
                width: 65%; } }
          .black .wrap .type-list-inner-content-wrap-copy {
            width: 100%;
            font-size: 1.2rem; }
          .black .wrap .type-list-inner-content-wrap-flex {
            display: flex;
            gap: .5rem;
            margin-top: .5rem; }
            .black .wrap .type-list-inner-content-wrap-flex-link {
              width: 29%;
              border-radius: 20px;
              background-color: #fff;
              text-decoration: none;
              line-height: 45px;
              margin-top: 5px;
              box-shadow: 0 3px 0 #2b312e;
              display: flex;
              align-items: center;
              justify-content: center; }
              .black .wrap .type-list-inner-content-wrap-flex-link:hover {
                box-shadow: 0 0 0 0;
                margin: 8px 0 -3px;
                opacity: 1 !important;
                transition: .2s; }
              .black .wrap .type-list-inner-content-wrap-flex-link-txt {
                color: #0e100f !important;
                font-weight: bold;
                font-size: 1.2rem;
                font-weight: bold; }
                @media only screen and (max-width: 767px) {
                  .black .wrap .type-list-inner-content-wrap-flex-link-txt {
                    font-size: 1.6rem; } }
            .black .wrap .type-list-inner-content-wrap-flex-cv {
              width: 70%;
              margin: 5px .5rem 0; }
              .black .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                line-height: 3.5;
                width: 100%;
                margin-bottom: 0; }
                @media only screen and (max-width: 767px) {
                  .black .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                    line-height: 2.5; } }
                .black .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                  padding: 0; }
                  @media only screen and (max-width: 767px) {
                    .black .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                      padding: 0 !important; } }
              .black .wrap .type-list-inner-content-wrap-flex-cv-txt {
                color: #fff;
                font-size: 1.3rem;
                display: block; }
                @media only screen and (max-width: 767px) {
                  .black .wrap .type-list-inner-content-wrap-flex-cv-txt {
                    font-size: 2rem; } }
  .black .wrap .box-topranking {
    margin: 3rem 0;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .black .wrap .box-topranking {
        padding: 0 .5rem;
        margin: 3rem 0 2rem; } }
    .black .wrap .box-topranking th {
      background-color: #0e100f;
      color: #fff;
      padding: .5rem; }
    .black .wrap .box-topranking td {
      width: 32%;
      border-right: 3px solid #0e100f;
      padding: 1rem;
      background-color: #e8e8e8;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .black .wrap .box-topranking td {
          font-size: 1.1rem; } }
      .black .wrap .box-topranking td .ico-rank {
        margin: 0 auto .3rem;
        width: 40px; }
      .black .wrap .box-topranking td .banner {
        margin: 0.5rem auto;
        width: 70%; }
      .black .wrap .box-topranking td .title {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        margin-bottom: .5rem; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking td .title {
            font-size: 1.3rem; } }
      .black .wrap .box-topranking td .star {
        color: #888;
        font-size: 1.4rem;
        font-weight: 700;
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking td .star {
            font-size: 1.2rem; } }
        .black .wrap .box-topranking td .star img {
          display: inline-block;
          margin: .3rem .5rem 0 0;
          width: 30%; }
          @media only screen and (max-width: 767px) {
            .black .wrap .box-topranking td .star img {
              width: 60%; } }
      .black .wrap .box-topranking td:last-child {
        border-right: none; }
      .black .wrap .box-topranking td .eval-inner {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .5rem; }
        .black .wrap .box-topranking td .eval-inner-img {
          width: 20%;
          margin: auto; }
          @media only screen and (max-width: 767px) {
            .black .wrap .box-topranking td .eval-inner-img {
              width: 50%; } }
        .black .wrap .box-topranking td .eval-inner-txt {
          text-align: center; }
    .black .wrap .box-topranking .name {
      position: sticky;
      top: 0;
      z-index: 1; }
    .black .wrap .box-topranking-flex {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      justify-content: center; }
      .black .wrap .box-topranking-flex-item {
        width: 47.5%; }
        .black .wrap .box-topranking-flex-item img {
          margin: auto; }
        .black .wrap .box-topranking-flex-item-off {
          color: #c4c7cc; }
    .black .wrap .box-topranking-cam {
      text-align: left;
      margin-bottom: .5rem;
      margin-left: 2rem;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .black .wrap .box-topranking-cam {
          margin-left: 1rem;
          font-size: 1.1rem; } }
      .black .wrap .box-topranking-cam:before {
        position: absolute;
        top: 50%;
        left: -1.5rem;
        transform: translateY(-50%);
        display: inline-block;
        width: .8rem;
        height: .8rem;
        background: #e111c9;
        content: '';
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking-cam:before {
            left: -1rem;
            width: .5rem;
            height: .5rem; } }
      .black .wrap .box-topranking-cam:last-child {
        margin-bottom: 0; }
    .black .wrap .box-topranking-button {
      margin: 0; }
      .black .wrap .box-topranking-button .cv {
        animation-name: black-btn;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking-button .cv {
            width: 100%; } }
      .black .wrap .box-topranking-button .link {
        animation-name: black-link;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking-button .link {
            width: 100%; } }
      @media only screen and (max-width: 767px) {
        .black .wrap .box-topranking-button a {
          padding: 1rem; } }
    .black .wrap .box-topranking-point {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: .5rem; }
      .black .wrap .box-topranking-point-inner {
        display: flex;
        gap: .5rem;
        align-items: center; }
        @media only screen and (max-width: 767px) {
          .black .wrap .box-topranking-point-inner {
            flex-direction: column; } }
        .black .wrap .box-topranking-point-inner-check {
          background: url(../img/lp/check_pink.png) no-repeat;
          background-size: contain;
          display: inline-block;
          width: 2rem;
          height: 1rem; }
        .black .wrap .box-topranking-point-inner-txt {
          width: 100%;
          text-align: left; }
          @media only screen and (max-width: 767px) {
            .black .wrap .box-topranking-point-inner-txt {
              font-size: 1.1rem; } }
  .black .fact {
    background-color: #d8d8d8;
    position: relative;
    margin: 2rem 0 3rem; }
    .black .fact:before {
      position: absolute;
      bottom: -1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-block;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 60px solid transparent;
      z-index: 1;
      border-left: 60px solid transparent;
      border-top: 40px solid #d8d8d8;
      border-bottom: 0; }
    .black .fact-inner {
      max-width: 500px;
      margin: 1rem auto;
      padding: 2rem 0; }
      @media only screen and (max-width: 767px) {
        .black .fact-inner {
          padding-left: .5rem; } }
      .black .fact-inner-content {
        display: flex;
        flex-direction: column;
        margin: -3rem 0 1.5rem; }
        @media only screen and (max-width: 767px) {
          .black .fact-inner-content {
            margin: -2rem 0 .5rem; } }
        .black .fact-inner-content-img1 {
          margin-top: -1rem; }
        .black .fact-inner-content-link {
          font-size: 1.4rem; }
          .black .fact-inner-content-link a {
            color: #494949;
            font-weight: bold;
            text-decoration: none; }
        .black .fact-inner-content-txt {
          text-align: center;
          line-height: 1.5; }
          .black .fact-inner-content-txt .big {
            font-size: 2.3rem;
            font-weight: bold;
            color: #e111c9; }
            @media only screen and (max-width: 767px) {
              .black .fact-inner-content-txt .big {
                font-size: 2rem; } }
        .black .fact-inner-content-kome {
          margin-top: -2.5rem; }
          @media only screen and (max-width: 767px) {
            .black .fact-inner-content-kome {
              padding-right: .5rem;
              margin-top: -1.5rem; } }
          .black .fact-inner-content-kome-txt {
            font-size: 1rem;
            text-align: right;
            line-height: 1.4; }
            .black .fact-inner-content-kome-txt a {
              text-decoration: none;
              color: #999999;
              transition: .3s; }
            .black .fact-inner-content-kome-txt a:hover {
              color: #2b312e; }
  .black .top5 {
    max-width: 1200px;
    margin: 1.5rem auto 2rem; }
    @media only screen and (max-width: 767px) {
      .black .top5 {
        padding: 0 .5rem; } }
    .black .top5-container {
      display: grid;
      grid-template-columns: 0.7fr repeat(4, 0.5fr) repeat(2, 1fr) 0.5fr;
      grid-template-rows: auto;
      gap: 5px;
      grid-auto-flow: row;
      grid-template-areas: "name cost period type support feature cam cta" "anken1 anken1-cost anken1-period anken1-type anken1-support anken1-feature anken1-cam anken1-cta" "anken2 anken2-cost anken2-period anken2-type anken2-support anken2-feature anken2-cam anken2-cta" "anken3 anken3-cost anken3-period anken3-type anken3-support anken3-feature anken3-cam anken3-cta" "anken4 anken4-cost anken4-period anken4-type anken4-support anken4-feature anken4-cam anken4-cta" "anken5 anken5-cost anken5-period anken5-type anken5-support anken5-feature anken5-cam anken5-cta"; }
      @media only screen and (max-width: 767px) {
        .black .top5-container {
          grid-template-columns: 12rem repeat(4, 10rem) 18rem 18rem 14rem;
          gap: 2px; } }
      .black .top5-container-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .5rem; }
        .black .top5-container-inner .ico-rank {
          width: 30%;
          margin: auto; }
        .black .top5-container-inner .bnr {
          width: 80%;
          margin: auto; }
        .black .top5-container-inner-eval {
          width: 3.5rem;
          margin: auto; }
        .black .top5-container-inner-txt {
          font-size: 1.3rem;
          text-align: center;
          line-height: 1.4; }
          @media only screen and (max-width: 767px) {
            .black .top5-container-inner-txt {
              font-size: 1.2rem; } }
        .black .top5-container-inner-point {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: .5rem; }
          .black .top5-container-inner-point-inner {
            display: flex;
            gap: .5rem;
            align-items: center; }
            .black .top5-container-inner-point-inner-check {
              background: url(../img/lp/black/check_green.png) no-repeat;
              background-size: contain;
              display: inline-block;
              width: 2rem;
              height: 1rem; }
            .black .top5-container-inner-point-inner-txt {
              width: 100%;
              font-size: 1.3rem;
              line-height: 1.3; }
              @media only screen and (max-width: 767px) {
                .black .top5-container-inner-point-inner-txt {
                  font-size: 1.1rem; } }
        .black .top5-container-inner-camlist {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: .5rem; }
          @media only screen and (max-width: 767px) {
            .black .top5-container-inner-camlist {
              gap: .5rem; } }
          .black .top5-container-inner-camlist-item {
            text-align: left;
            margin-bottom: .5rem;
            margin-left: 2rem;
            position: relative;
            line-height: 1.3;
            font-size: 1.3rem; }
            @media only screen and (max-width: 767px) {
              .black .top5-container-inner-camlist-item {
                margin-left: 1rem;
                font-size: 1.1rem; } }
            .black .top5-container-inner-camlist-item:before {
              position: absolute;
              top: 50%;
              left: -1.5rem;
              transform: translateY(-50%);
              display: inline-block;
              width: .8rem;
              height: .8rem;
              background: #436b2f;
              content: '';
              border-radius: 50px; }
              @media only screen and (max-width: 767px) {
                .black .top5-container-inner-camlist-item:before {
                  left: -1rem;
                  width: .5rem;
                  height: .5rem; } }
            .black .top5-container-inner-camlist-item:last-child {
              margin-bottom: 0; }
        .black .top5-container-inner-button {
          width: 100%;
          margin: 0 0 .5rem; }
          .black .top5-container-inner-button .cv {
            width: 90%;
            margin-bottom: 0;
            animation-name: black-btn;
            animation-delay: 0s;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite; }
        .black .top5-container-inner-btn {
          margin: .5rem 0; }
          @media only screen and (max-width: 767px) {
            .black .top5-container-inner-btn {
              margin: 0 0 .5rem; } }
          .black .top5-container-inner-btn .cv {
            width: 60%;
            margin-bottom: .5rem;
            animation-name: black-btn;
            animation-delay: 0s;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite; }
            @media only screen and (max-width: 767px) {
              .black .top5-container-inner-btn .cv {
                width: 70%; } }
      .black .top5-container .flex {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;
        background-color: #fff; }
      .black .top5-container .title {
        background-color: #d2a4be;
        color: #fff;
        font-weight: bold;
        font-size: 1.2rem;
        padding: .5rem .2rem;
        text-align: center;
        line-height: 1.5; }
      @media only screen and (max-width: 767px) {
        .black .top5-container .stiky {
          position: sticky;
          left: 0;
          top: 0;
          z-index: 1;
          border-right: 2px solid #0e100f; } }
      .black .top5-container .name {
        grid-area: name;
        background-color: #6d2678;
        border-radius: 20px 0 0 0; }
      .black .top5-container .cost {
        grid-area: cost;
        background-color: #6d2678; }
      .black .top5-container .period {
        grid-area: period;
        background-color: #503773; }
      .black .top5-container .type {
        grid-area: type;
        background-color: #503773; }
      .black .top5-container .support {
        grid-area: support;
        background-color: #034d64; }
      .black .top5-container .feature {
        grid-area: feature;
        background-color: #436b2f; }
      .black .top5-container .cam {
        grid-area: cam;
        background-color: #436b2f; }
      .black .top5-container .cta {
        grid-area: cta;
        border-radius: 0 20px 0 0;
        background-color: #316541; }
      .black .top5-container .anken1 {
        grid-area: anken1; }
        .black .top5-container .anken1-cost {
          grid-area: anken1-cost; }
        .black .top5-container .anken1-period {
          grid-area: anken1-period; }
        .black .top5-container .anken1-type {
          grid-area: anken1-type; }
        .black .top5-container .anken1-support {
          grid-area: anken1-support; }
        .black .top5-container .anken1-feature {
          grid-area: anken1-feature; }
        .black .top5-container .anken1-cam {
          grid-area: anken1-cam; }
        .black .top5-container .anken1-cta {
          grid-area: anken1-cta; }
      .black .top5-container .anken2 {
        grid-area: anken2; }
        .black .top5-container .anken2-cost {
          grid-area: anken2-cost; }
        .black .top5-container .anken2-period {
          grid-area: anken2-period; }
        .black .top5-container .anken2-type {
          grid-area: anken2-type; }
        .black .top5-container .anken2-support {
          grid-area: anken2-support; }
        .black .top5-container .anken2-feature {
          grid-area: anken2-feature; }
        .black .top5-container .anken2-cam {
          grid-area: anken2-cam; }
        .black .top5-container .anken2-cta {
          grid-area: anken2-cta; }
      .black .top5-container .anken3 {
        grid-area: anken3; }
        .black .top5-container .anken3-cost {
          grid-area: anken3-cost; }
        .black .top5-container .anken3-period {
          grid-area: anken3-period; }
        .black .top5-container .anken3-type {
          grid-area: anken3-type; }
        .black .top5-container .anken3-support {
          grid-area: anken3-support; }
        .black .top5-container .anken3-feature {
          grid-area: anken3-feature; }
        .black .top5-container .anken3-cam {
          grid-area: anken3-cam; }
        .black .top5-container .anken3-cta {
          grid-area: anken3-cta; }
      .black .top5-container .anken4 {
        grid-area: anken4; }
        .black .top5-container .anken4-cost {
          grid-area: anken4-cost; }
        .black .top5-container .anken4-period {
          grid-area: anken4-period; }
        .black .top5-container .anken4-type {
          grid-area: anken4-type; }
        .black .top5-container .anken4-support {
          grid-area: anken4-support; }
        .black .top5-container .anken4-feature {
          grid-area: anken4-feature; }
        .black .top5-container .anken4-cam {
          grid-area: anken4-cam; }
        .black .top5-container .anken4-cta {
          grid-area: anken4-cta; }
      .black .top5-container .anken5 {
        grid-area: anken5;
        border-radius: 0 0 0 20px; }
        .black .top5-container .anken5-cost {
          grid-area: anken5-cost; }
        .black .top5-container .anken5-period {
          grid-area: anken5-period; }
        .black .top5-container .anken5-type {
          grid-area: anken5-type; }
        .black .top5-container .anken5-support {
          grid-area: anken5-support; }
        .black .top5-container .anken5-feature {
          grid-area: anken5-feature; }
        .black .top5-container .anken5-cam {
          grid-area: anken5-cam; }
        .black .top5-container .anken5-cta {
          grid-area: anken5-cta;
          border-radius: 0 0 20px 0; }
  .black .rank2 .box {
    border-image: linear-gradient(to right, #6d2678, #034d64, #436b2f) 1; }
    .black .rank2 .box .tab-ttl-list-item-1 {
      background-color: #f0e9f1;
      border-radius: 5px 5px 0 0; }
      .black .rank2 .box .tab-ttl-list-item-1:before {
        background-color: #6d2678; }
    .black .rank2 .box .tab-ttl-list-item-2 {
      background-color: #edebf1;
      border-radius: 5px 5px 0 0; }
      .black .rank2 .box .tab-ttl-list-item-2:before {
        background-color: #503773; }
    .black .rank2 .box .tab-ttl-list-item-3 {
      background-color: #e5edef;
      border-radius: 5px 5px 0 0; }
      .black .rank2 .box .tab-ttl-list-item-3:before {
        background-color: #034d64; }
    .black .rank2 .box .tab-ttl-list-item-4 {
      background-color: #eaefec;
      border-radius: 5px 5px 0 0; }
      .black .rank2 .box .tab-ttl-list-item-4:before {
        background-color: #316541; }
    .black .rank2 .box .tab-ttl-list-item-5 {
      background-color: #eaefec;
      border-radius: 5px 5px 0 0; }
      .black .rank2 .box .tab-ttl-list-item-5:before {
        background-color: #436b2f; }
    .black .rank2 .box .button .cv {
      background: #e111c9;
      animation-name: video-btn;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #7D0A70;
      margin: 0 0 1.3rem 0; }
  .black .rank-simple .box .box-inner .detail-info-inner .point-ttl {
    background: linear-gradient(90deg, #6d2678 0%, #034d64 50%, #436b2f 100%); }
  .black .rank-simple .box .box-inner .detail-info-inner .point-inner-num {
    background-color: #6d2678; }
  .black .rank-simple .box .box-inner .detail-info .spec-inner-wrapper dt {
    background-color: #e8e8e8; }
  .black .rank-simple .box .box-inner .detail-info .simple-campain-ttl {
    background-color: #f0ff1d;
    color: #0e100f; }
  .black .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
    background-color: #fdffe8; }
    .black .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
      background-color: #f0ff1d;
      color: #0e100f; }
  .black .rank-simple .box .box-inner .detail-info-ttl {
    background-color: #e8e8e8; }
  .black .hikaku {
    margin-top: 1rem; }
    .black .hikaku-container {
      text-align: center;
      font-size: 1.3rem;
      line-height: 1.5;
      margin: 1.5rem 0 3rem;
      display: grid;
      gap: .2rem;
      grid-template-columns: 0.5fr 2fr 0.6fr .8fr 0.6fr;
      grid-template-rows: 0.2fr 0.2fr 0.2fr 0.5fr 0.5fr 1.5fr;
      grid-template-areas: ". ttl-online ttl-selfstudy ttl-selfstudy ttl-selfstudy" "ttl-studystyle resson books studysite moviesite" "ttl-price resson-price books-price studysite-price moviesite-price" "ttl-merit resson-merit selfstudy-merit selfstudy-merit selfstudy-merit" "ttl-demerit resson-demerit selfstudy-demerit selfstudy-demerit selfstudy-demerit" "ttl-osusume resson-osusume bs-osusume bs-osusume moviesite-osusume"; }
      @media only screen and (max-width: 767px) {
        .black .hikaku-container {
          grid-template-columns: 5rem 24rem 8rem 10rem 8rem;
          padding: 0 .5rem;
          margin: 1rem 0 1.5rem; } }
      .black .hikaku-container .txt-color {
        color: #e111c9;
        font-weight: bold; }
      .black .hikaku-container .txt-bold {
        font-weight: bold; }
      .black .hikaku-container .l-size {
        font-size: 1.8rem;
        font-weight: bold;
        padding: 0 .2rem .3rem; }
        @media only screen and (max-width: 767px) {
          .black .hikaku-container .l-size {
            font-size: 1.4rem;
            padding: 0; } }
      .black .hikaku-container .flex {
        display: flex;
        justify-content: center;
        align-items: center; }
      .black .hikaku-container .ttl-online {
        grid-area: ttl-online;
        font-weight: bold;
        font-size: 1.8rem; }
        .black .hikaku-container .ttl-online .osusume-batch {
          position: relative;
          display: block;
          width: 80%;
          margin: auto; }
          @media only screen and (max-width: 767px) {
            .black .hikaku-container .ttl-online .osusume-batch {
              width: 85%; } }
          .black .hikaku-container .ttl-online .osusume-batch:before {
            position: absolute;
            top: -2rem;
            left: -6.5rem;
            content: '';
            display: inline-block;
            width: 6rem;
            height: 5rem;
            padding-right: 1rem;
            background: url(../img/lp/black/osusume_icon.png) no-repeat;
            background-size: contain;
            overflow: initial; }
            @media only screen and (max-width: 767px) {
              .black .hikaku-container .ttl-online .osusume-batch:before {
                top: -1.5rem;
                left: -5.5rem; } }
      .black .hikaku-container .ttl-selfstudy {
        grid-area: ttl-selfstudy;
        font-weight: bold;
        font-size: 1.4rem; }
      .black .hikaku-container .ttl-studystyle {
        grid-area: ttl-studystyle; }
      .black .hikaku-container .ttl-price {
        grid-area: ttl-price; }
      .black .hikaku-container .ttl-merit {
        grid-area: ttl-merit; }
      .black .hikaku-container .ttl-demerit {
        grid-area: ttl-demerit; }
      .black .hikaku-container .ttl-osusume {
        grid-area: ttl-osusume; }
      .black .hikaku-container .resson {
        grid-area: resson; }
      .black .hikaku-container .movie {
        grid-area: movie; }
      .black .hikaku-container .books {
        grid-area: books; }
      .black .hikaku-container .studysite {
        grid-area: studysite; }
      .black .hikaku-container .moviesite {
        grid-area: moviesite; }
      .black .hikaku-container .resson-price {
        grid-area: resson-price; }
      .black .hikaku-container .movie-price {
        grid-area: movie-price; }
      .black .hikaku-container .books-price {
        grid-area: books-price; }
      .black .hikaku-container .studysite-price {
        grid-area: studysite-price; }
      .black .hikaku-container .moviesite-price {
        grid-area: moviesite-price; }
      .black .hikaku-container .resson-merit {
        grid-area: resson-merit;
        text-align: left; }
      .black .hikaku-container .movie-merit {
        grid-area: movie-merit;
        text-align: left; }
      .black .hikaku-container .selfstudy-merit {
        grid-area: selfstudy-merit;
        text-align: left; }
      .black .hikaku-container .resson-demerit {
        grid-area: resson-demerit; }
      .black .hikaku-container .movie-demerit {
        grid-area: movie-demerit; }
      .black .hikaku-container .selfstudy-demerit {
        grid-area: selfstudy-demerit;
        text-align: left; }
      .black .hikaku-container .resson-osusume {
        grid-area: resson-osusume; }
      .black .hikaku-container .movie-osusume {
        grid-area: movie-osusume; }
      .black .hikaku-container .bs-osusume {
        grid-area: bs-osusume; }
      .black .hikaku-container .moviesite-osusume {
        grid-area: moviesite-osusume; }
      .black .hikaku-container .bg-ttl {
        background-color: #2b312e;
        color: #fff;
        font-weight: bold;
        padding: .5rem; }
      .black .hikaku-container .bg-y {
        background-color: #fff;
        padding: 1rem; }
      .black .hikaku-container .bg-y-opacity {
        background-color: #fff;
        padding: 1rem; }
      .black .hikaku-container .bg-g {
        background-color: #2b312e;
        padding: 1rem;
        color: #fff; }
      .black .hikaku-container .bg-g-opacity {
        background-color: #2b312e;
        padding: 1rem;
        color: #fff; }
      .black .hikaku-container .button .cv {
        width: 90%; }
      .black .hikaku-container .merideme-list li {
        margin-left: 1rem;
        position: relative; }
        .black .hikaku-container .merideme-list li:before {
          position: absolute;
          top: 50%;
          left: -1rem;
          transform: translateY(-50%);
          display: inline-block;
          width: .5rem;
          height: .5rem;
          background-color: #e8e8e8;
          border-radius: 50px;
          content: ''; }
    .black .hikaku-copy {
      width: 75%;
      margin: auto;
      position: relative; }
      .black .hikaku-copy:before {
        position: absolute;
        bottom: .2rem;
        left: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_left.png) no-repeat;
        background-size: contain; }
      .black .hikaku-copy:after {
        position: absolute;
        bottom: .2rem;
        right: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_right.png) no-repeat;
        background-size: contain; }
    .black .hikaku-bnr {
      width: 80%;
      margin: 1rem auto; }
  @media only screen and (max-width: 767px) {
    .black .suggest {
      padding: 0 .5rem; } }
  .black .suggest-title {
    max-width: 500px;
    margin: 1rem auto 2rem; }
  .black .suggest-list {
    margin-bottom: 1rem; }
    @media only screen and (max-width: 767px) {
      .black .suggest-list-item {
        height: 30rem; } }
    .black .suggest-list-item-img {
      margin: 0 auto .5rem; }
      @media only screen and (max-width: 767px) {
        .black .suggest-list-item-img {
          width: 45%; } }
      .black .suggest-list-item-img img {
        margin: auto; }
    .black .suggest-list-item-txt {
      text-align: center;
      font-weight: bold;
      line-height: 1.2;
      color: #e8e8e8; }
      @media only screen and (max-width: 767px) {
        .black .suggest-list-item-txt {
          font-size: 1.8rem; } }
      .black .suggest-list-item-txt-kome {
        margin-top: .5rem;
        font-weight: normal;
        font-size: 1rem;
        color: #e8e8e8; }
  .black .suggest-kome {
    text-align: right;
    margin: .5rem 0 1rem;
    color: #e8e8e8; }
  .black .suggest-type-sankaku {
    margin: 1rem auto;
    max-width: 400px; }
  .black .suggest-type-list {
    margin: 2rem auto; }
    .black .suggest-type-list-wrap-inner-ttl {
      padding: .5rem;
      font-weight: bold;
      color: #fff;
      font-size: 1.2rem;
      border-radius: 20px 20px 0 0;
      background: #6d2678;
      min-height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .black .suggest-type-list-wrap-inner-ttl {
          min-height: 60px;
          flex-direction: row;
          font-size: 1.5rem; } }
      .black .suggest-type-list-wrap-inner-ttl-b {
        background-color: #034d64; }
      .black .suggest-type-list-wrap-inner-ttl-g {
        background-color: #436b2f; }
      .black .suggest-type-list-wrap-inner-ttl .txt-big {
        font-size: 2rem; }
        @media only screen and (max-width: 767px) {
          .black .suggest-type-list-wrap-inner-ttl .txt-big {
            font-size: 2.4rem; } }
      @media only screen and (max-width: 767px) {
        .black .suggest-type-list-wrap-inner-ttl-txt {
          width: 90%; } }
    .black .suggest-type-list-wrap-inner-content {
      padding: 1rem .5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 0.2rem solid #e8e8e8;
      border-top: none;
      background-color: #fff;
      border-radius: 0 0 20px 20px;
      height: 25rem;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .black .suggest-type-list-wrap-inner-content {
          padding: 1rem 1rem 3rem;
          height: 28rem; } }
      .black .suggest-type-list-wrap-inner-content-name {
        font-size: 1.8rem;
        font-weight: bold; }
      .black .suggest-type-list-wrap-inner-content .img {
        width: 50%;
        margin: 1rem auto .5rem; }
      .black .suggest-type-list-wrap-inner-content-cv {
        width: 100%;
        margin: 1rem auto 0; }
        @media only screen and (max-width: 767px) {
          .black .suggest-type-list-wrap-inner-content-cv {
            width: 90%; } }
        .black .suggest-type-list-wrap-inner-content-cv .cv {
          width: 75%;
          margin: 0; }
  .black .suggest-strong-txt {
    margin: 1rem auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #e8e8e8; }
    .black .suggest-strong-txt-big {
      font-size: 2.5rem;
      font-weight: bold; }
    .black .suggest-strong-txt-red {
      font-size: 2.5rem;
      color: #e111c9; }
  .black .suggest-strong-list {
    margin: 1.5rem auto 2rem;
    width: 37%; }
    @media only screen and (max-width: 767px) {
      .black .suggest-strong-list {
        width: 80%; } }
    .black .suggest-strong-list-item {
      position: relative;
      padding-left: 4rem;
      margin: 1rem auto;
      font-size: 1.8rem;
      line-height: 1.2;
      color: #e8e8e8; }
      .black .suggest-strong-list-item:before {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 2.5rem;
        background: url(../img/lp/black/check_pink.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%); }
  .black .suggest-strong-name {
    font-size: 2.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center; }
    .black .suggest-strong-name-wrap {
      position: relative;
      text-align: center;
      color: #e8e8e8; }
      .black .suggest-strong-name-wrap:before {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: url(../img/lp/black/fukidashi_l.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: -3rem;
        transform: translateY(-50%); }
      .black .suggest-strong-name-wrap:after {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: url(../img/lp/black/fukidashi_r.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: -3.5rem;
        transform: translateY(-50%); }
  .black .suggest-strong-img {
    margin: 0.5rem auto;
    max-width: 500px; }
  .black .suggest-strong-cv {
    width: 60%;
    margin: 1rem auto !important; }
    @media only screen and (max-width: 767px) {
      .black .suggest-strong-cv {
        width: 90%; } }
  .black .suggest .swiper-button-next, .black .suggest .swiper-button-prev {
    color: #050d5c; }
  .black .suggest .swiper-pagination-bullet {
    background-color: #050d5c; }
  .black .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #050d5c; }
  .black .box-survey {
    margin-bottom: 0;
    padding-bottom: 3rem; }
  .black .suggest .swiper-button-next, .black .suggest .swiper-button-prev {
    color: #6d2678; }
  .black .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #6d2678; }
  .black-blue .button .cv {
    background: #f73b71;
    box-shadow: 0 4px 0 #711716; }
  .black-blue .button .link {
    background: #fccf04;
    box-shadow: 0 4px 0 #5c4b00; }
    .black-blue .button .link a {
      color: #0e100f;
      text-shadow: none; }
  .black-blue .wrap .type-list-inner-ttl {
    background-color: #2a234f; }
    .black-blue .wrap .type-list-inner-ttl-y {
      background-color: #fccf04;
      color: #fff; }
    .black-blue .wrap .type-list-inner-ttl-g {
      background-color: #0b4ea5; }
    .black-blue .wrap .type-list-inner-ttl-w {
      background-color: #061160; }
  .black-blue .wrap .box-topranking-cam:before {
    background: #f73b71; }
  .black-blue .wrap .box-topranking-button .cv {
    animation-name: blackblue-btn; }
  .black-blue .wrap .box-topranking-button .link {
    animation-name: blackblue-link; }
  .black-blue .rank2 .box {
    border-image: linear-gradient(to right, #061160, #0b4ea5, #2a234f) 1; }
    .black-blue .rank2 .box .tab-ttl-list-item-1 {
      background-color: #e6e7ef;
      border-radius: 5px 5px 0 0; }
      .black-blue .rank2 .box .tab-ttl-list-item-1:before {
        background-color: #061160; }
    .black-blue .rank2 .box .tab-ttl-list-item-2 {
      background-color: #e5e9f2;
      border-radius: 5px 5px 0 0; }
      .black-blue .rank2 .box .tab-ttl-list-item-2:before {
        background-color: #022a7d; }
    .black-blue .rank2 .box .tab-ttl-list-item-3 {
      background-color: #e6edf6;
      border-radius: 5px 5px 0 0; }
      .black-blue .rank2 .box .tab-ttl-list-item-3:before {
        background-color: #0b4ea5; }
    .black-blue .rank2 .box .tab-ttl-list-item-4 {
      background-color: #e9eaef;
      border-radius: 5px 5px 0 0; }
      .black-blue .rank2 .box .tab-ttl-list-item-4:before {
        background-color: #2a2f65; }
    .black-blue .rank2 .box .tab-ttl-list-item-5 {
      background-color: #e9e9ed;
      border-radius: 5px 5px 0 0; }
      .black-blue .rank2 .box .tab-ttl-list-item-5:before {
        background-color: #2a234f; }
    .black-blue .rank2 .box .button .cv {
      background: #f73b71;
      animation-name: blackblue-btn;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #711716;
      margin: 0 0 1.3rem 0; }
    .black-blue .rank2 .box-tab {
      margin-top: 7rem; }
      @media only screen and (max-width: 767px) {
        .black-blue .rank2 .box-tab {
          margin-top: 9rem; } }
      .black-blue .rank2 .box-tab .iconimg-1 {
        position: relative; }
        .black-blue .rank2 .box-tab .iconimg-1:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank01.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .black-blue .rank2 .box-tab .iconimg-1:before {
              left: .5rem; } }
      .black-blue .rank2 .box-tab .iconimg-2 {
        position: relative; }
        .black-blue .rank2 .box-tab .iconimg-2:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank02.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .black-blue .rank2 .box-tab .iconimg-2:before {
              left: .5rem; } }
      .black-blue .rank2 .box-tab .iconimg-3 {
        position: relative; }
        .black-blue .rank2 .box-tab .iconimg-3:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank03.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .black-blue .rank2 .box-tab .iconimg-3:before {
              left: .5rem; } }
  .black-blue .rank-simple .box .box-inner .detail-info-inner .point-ttl {
    background: linear-gradient(90deg, #061160 0%, #0b4ea5 50%, #2a234f 100%); }
  .black-blue .rank-simple .box .box-inner .detail-info-inner .point-inner-num {
    background-color: #061160; }
  .black-blue .rank-simple .box .box-inner .detail-info .simple-campain-ttl {
    background-color: #fccf04;
    color: #fff; }
  .black-blue .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
    background-color: #fffadf; }
    .black-blue .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
      background-color: #fccf04;
      color: #fff; }
  .black-blue .rank-simple .box .box-inner .detail-info-ttl {
    background-color: #e8e8e8; }
  .black-blue .hikaku-container .txt-color {
    color: #f73b71;
    font-weight: bold; }
  .black-blue .hikaku-container .ttl-online .osusume-batch:before {
    background: url(../img/lp/black/osusume_icon_blue.png) no-repeat;
    background-size: contain;
    overflow: initial; }
  .black-blue .suggest-type-list-wrap-inner-ttl {
    background: #061160; }
    .black-blue .suggest-type-list-wrap-inner-ttl-b {
      background-color: #0b4ea5; }
    .black-blue .suggest-type-list-wrap-inner-ttl-g {
      background-color: #2a234f; }
  .black-blue .suggest-strong-txt-red {
    font-size: 2.5rem;
    color: #f73b71; }
  .black-blue .suggest-strong-list-item:before {
    background: url(../img/lp/black/check_salmon.png) no-repeat;
    background-size: contain; }
  .black-blue .suggest .swiper-button-next, .black-blue .suggest .swiper-button-prev {
    color: #0b4ea5; }
  .black-blue .suggest .swiper-pagination-bullet {
    background-color: #0b4ea5; }
  .black-blue .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #0b4ea5; }
  .black-blue .box-survey {
    margin-bottom: 0;
    padding-bottom: 3rem; }
  .black-blue .suggest .swiper-button-next, .black-blue .suggest .swiper-button-prev {
    color: #0b4ea5; }
  .black-blue .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #0b4ea5; }

@keyframes black-btn {
  0% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #7D0A70;
    transform: translatey(0); } }
@keyframes black-link {
  0% {
    box-shadow: 0 8px 0 #4e5308;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #4e5308;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #4e5308;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #4e5308;
    transform: translatey(0); } }
@keyframes blackblue-btn {
  0% {
    box-shadow: 0 8px 0 #711716;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #711716;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #711716;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #711716;
    transform: translatey(0); } }
@keyframes blackblue-link {
  0% {
    box-shadow: 0 8px 0 #5c4b00;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #5c4b00;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #5c4b00;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #5c4b00;
    transform: translatey(0); } }
/*パステル調LPのcss*/
.pastel {
  background-color: #f8f4ee;
  color: #494949;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Lucida Grande", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
  .pastel .mainvisual {
    z-index: 0;
    background-color: transparent !important;
    max-width: 800px;
    margin: 0 auto; }
    .pastel .mainvisual img {
      height: auto; }
  .pastel .button .cv {
    background: #f37a8f;
    box-shadow: 0 4px 0 #8a2234; }
  .pastel .button .link {
    background: #f2ee91;
    box-shadow: 0 4px 0 #545331; }
    .pastel .button .link a {
      color: #494949;
      text-shadow: none; }
  .pastel .ttl {
    max-width: 500px;
    margin: 1rem auto; }
    @media only screen and (max-width: 767px) {
      .pastel .ttl {
        padding: 0 0.5rem; } }
  .pastel .wrap .text-date {
    color: #494949;
    text-align: right;
    margin-top: .5rem; }
  @media only screen and (max-width: 767px) {
    .pastel .wrap .type {
      padding: 0 .5rem; } }
  .pastel .wrap .type-ttl {
    max-width: 500px;
    margin: 1rem auto; }
  .pastel .wrap .type-list {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .pastel .wrap .type-list {
        margin-top: .5rem;
        flex-direction: column;
        gap: 1rem; } }
    .pastel .wrap .type-list-inner {
      width: 24%; }
      @media only screen and (max-width: 767px) {
        .pastel .wrap .type-list-inner {
          width: 100%; } }
      .pastel .wrap .type-list-inner-fact {
        width: 33%; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .type-list-inner-fact {
            width: 100%; } }
      .pastel .wrap .type-list-inner-ttl {
        padding: 1rem .5rem;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 1.2rem;
        background-color: #506873;
        border-radius: 20px 20px 0 0; }
        .pastel .wrap .type-list-inner-ttl-big {
          font-size: 1.8rem; }
        .pastel .wrap .type-list-inner-ttl-y {
          background-color: #f2ee91;
          color: #494949; }
        .pastel .wrap .type-list-inner-ttl-g {
          background-color: #d2a4be;
          color: #494949; }
        .pastel .wrap .type-list-inner-ttl-w {
          background-color: #f1b6a4;
          color: #494949; }
      .pastel .wrap .type-list-inner-content {
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #494949;
        background-color: #fff;
        border: none;
        border-radius: 0 0 20px 20px;
        text-align: center;
        font-size: .9rem;
        min-height: 20rem; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .type-list-inner-content {
            padding: 1rem 1rem 2rem;
            min-height: auto; } }
        .pastel .wrap .type-list-inner-content-wrap {
          display: flex;
          flex-direction: column;
          gap: .5rem;
          max-width: 350px;
          margin: auto; }
          .pastel .wrap .type-list-inner-content-wrap .logo {
            width: 80%;
            margin: auto;
            position: inherit; }
            @media only screen and (max-width: 767px) {
              .pastel .wrap .type-list-inner-content-wrap .logo {
                width: 65%; } }
          .pastel .wrap .type-list-inner-content-wrap-copy {
            width: 100%;
            font-size: 1.2rem; }
          .pastel .wrap .type-list-inner-content-wrap-flex {
            display: flex;
            gap: .5rem;
            margin-top: .5rem; }
            .pastel .wrap .type-list-inner-content-wrap-flex-link {
              width: 29%;
              border-radius: 20px;
              background-color: #e8e8e8;
              text-decoration: none;
              line-height: 45px;
              margin-top: 5px;
              box-shadow: 0 3px 0 #2b312e;
              display: flex;
              align-items: center;
              justify-content: center; }
              .pastel .wrap .type-list-inner-content-wrap-flex-link:hover {
                box-shadow: 0 0 0 0;
                margin: 8px 0 -3px;
                opacity: 1 !important;
                transition: .2s; }
              .pastel .wrap .type-list-inner-content-wrap-flex-link-txt {
                color: #494949 !important;
                font-weight: bold;
                font-size: 1.2rem;
                font-weight: bold; }
                @media only screen and (max-width: 767px) {
                  .pastel .wrap .type-list-inner-content-wrap-flex-link-txt {
                    font-size: 1.6rem; } }
            .pastel .wrap .type-list-inner-content-wrap-flex-cv {
              width: 70%;
              margin: 5px .5rem 0; }
              .pastel .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                line-height: 3.5;
                width: 100%;
                margin-bottom: 0; }
                @media only screen and (max-width: 767px) {
                  .pastel .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                    line-height: 2.5; } }
                .pastel .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                  padding: 0; }
                  @media only screen and (max-width: 767px) {
                    .pastel .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                      padding: 0 !important; } }
              .pastel .wrap .type-list-inner-content-wrap-flex-cv-txt {
                color: #fff;
                font-size: 1.3rem;
                display: block; }
                @media only screen and (max-width: 767px) {
                  .pastel .wrap .type-list-inner-content-wrap-flex-cv-txt {
                    font-size: 2rem; } }
  .pastel .wrap .box-topranking {
    margin: 3rem 0;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .pastel .wrap .box-topranking {
        padding: 0 .5rem;
        margin: 3rem 0 2rem; } }
    .pastel .wrap .box-topranking th {
      background-color: #f1b6a4;
      color: #494949;
      padding: .5rem; }
    .pastel .wrap .box-topranking td {
      width: 32%;
      border-right: 3px solid #f8f4ee;
      padding: 1rem;
      background-color: #fff;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .pastel .wrap .box-topranking td {
          font-size: 1.1rem; } }
      .pastel .wrap .box-topranking td .ico-rank {
        margin: 0 auto .3rem;
        width: 40px; }
      .pastel .wrap .box-topranking td .banner {
        margin: 0.5rem auto;
        width: 70%; }
      .pastel .wrap .box-topranking td .title {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        margin-bottom: .5rem; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking td .title {
            font-size: 1.3rem; } }
      .pastel .wrap .box-topranking td .star {
        color: #888;
        font-size: 1.4rem;
        font-weight: 700;
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking td .star {
            font-size: 1.2rem; } }
        .pastel .wrap .box-topranking td .star img {
          display: inline-block;
          margin: .3rem .5rem 0 0;
          width: 30%; }
          @media only screen and (max-width: 767px) {
            .pastel .wrap .box-topranking td .star img {
              width: 60%; } }
      .pastel .wrap .box-topranking td:last-child {
        border-right: none; }
      .pastel .wrap .box-topranking td .eval-inner {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .5rem; }
        .pastel .wrap .box-topranking td .eval-inner-img {
          width: 20%;
          margin: auto; }
          @media only screen and (max-width: 767px) {
            .pastel .wrap .box-topranking td .eval-inner-img {
              width: 50%; } }
        .pastel .wrap .box-topranking td .eval-inner-txt {
          text-align: center; }
    .pastel .wrap .box-topranking .name {
      position: sticky;
      top: 0;
      z-index: 1; }
    .pastel .wrap .box-topranking-flex {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      justify-content: center; }
      .pastel .wrap .box-topranking-flex-item {
        width: 47.5%; }
        .pastel .wrap .box-topranking-flex-item img {
          margin: auto; }
        .pastel .wrap .box-topranking-flex-item-off {
          color: #c4c7cc; }
    .pastel .wrap .box-topranking-cam {
      text-align: left;
      margin-bottom: .5rem;
      margin-left: 2rem;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .pastel .wrap .box-topranking-cam {
          margin-left: 1rem;
          font-size: 1.1rem; } }
      .pastel .wrap .box-topranking-cam:before {
        position: absolute;
        top: 50%;
        left: -1.5rem;
        transform: translateY(-50%);
        display: inline-block;
        width: .8rem;
        height: .8rem;
        background: #f1b6a4;
        content: '';
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking-cam:before {
            left: -1rem;
            width: .5rem;
            height: .5rem; } }
      .pastel .wrap .box-topranking-cam:last-child {
        margin-bottom: 0; }
    .pastel .wrap .box-topranking-button {
      margin: 0; }
      .pastel .wrap .box-topranking-button .cv {
        animation-name: pastel-btn;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking-button .cv {
            width: 100%; } }
      .pastel .wrap .box-topranking-button .link {
        animation-name: pastel-link;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking-button .link {
            width: 100%; } }
      @media only screen and (max-width: 767px) {
        .pastel .wrap .box-topranking-button a {
          padding: 1rem; } }
    .pastel .wrap .box-topranking-point {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: .5rem; }
      .pastel .wrap .box-topranking-point-inner {
        display: flex;
        gap: .5rem;
        align-items: center; }
        @media only screen and (max-width: 767px) {
          .pastel .wrap .box-topranking-point-inner {
            flex-direction: column; } }
        .pastel .wrap .box-topranking-point-inner-check {
          background: url(../img/lp/pastel/check_pink.png) no-repeat;
          background-size: contain;
          display: inline-block;
          width: 2rem;
          height: 1rem; }
        .pastel .wrap .box-topranking-point-inner-txt {
          width: 100%;
          text-align: left; }
          @media only screen and (max-width: 767px) {
            .pastel .wrap .box-topranking-point-inner-txt {
              font-size: 1.1rem; } }
  .pastel .fact {
    background-color: #fefbe3;
    position: relative;
    margin: 2rem 0; }
    .pastel .fact:before {
      position: absolute;
      bottom: -2rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-block;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 60px solid transparent;
      z-index: 1;
      border-left: 60px solid transparent;
      border-top: 40px solid #fefbe3;
      border-bottom: 0; }
    .pastel .fact-inner {
      max-width: 500px;
      margin: 1rem auto;
      padding: 2rem 0; }
      @media only screen and (max-width: 767px) {
        .pastel .fact-inner {
          padding: 2rem .5rem; } }
      .pastel .fact-inner-content {
        display: flex;
        flex-direction: column;
        gap: 1rem; }
        .pastel .fact-inner-content-img1 {
          margin-top: -1rem; }
        .pastel .fact-inner-content-link {
          font-size: 1.4rem; }
          .pastel .fact-inner-content-link a {
            color: #494949;
            font-weight: bold;
            text-decoration: none; }
        .pastel .fact-inner-content-txt {
          text-align: center;
          line-height: 1.5; }
          .pastel .fact-inner-content-txt .big {
            font-size: 2.3rem;
            font-weight: bold;
            color: #f37a8f; }
            @media only screen and (max-width: 767px) {
              .pastel .fact-inner-content-txt .big {
                font-size: 2rem; } }
        .pastel .fact-inner-content-kome {
          margin-top: -1rem; }
          .pastel .fact-inner-content-kome-txt {
            font-size: .8rem;
            text-align: right;
            line-height: 1.4; }
            .pastel .fact-inner-content-kome-txt a {
              text-decoration: none;
              color: #c0c0c0;
              transition: .3s; }
            .pastel .fact-inner-content-kome-txt a:hover {
              color: #2b312e; }
  .pastel .top5 {
    max-width: 1200px;
    margin: 1.5rem auto 2rem; }
    @media only screen and (max-width: 767px) {
      .pastel .top5 {
        padding: 0 .5rem; } }
    .pastel .top5-container {
      display: grid;
      grid-template-columns: 0.7fr repeat(4, 0.5fr) repeat(2, 1fr) 0.5fr;
      grid-template-rows: auto;
      gap: 5px;
      grid-auto-flow: row;
      grid-template-areas: "name cost period type support feature cam cta" "anken1 anken1-cost anken1-period anken1-type anken1-support anken1-feature anken1-cam anken1-cta" "anken2 anken2-cost anken2-period anken2-type anken2-support anken2-feature anken2-cam anken2-cta" "anken3 anken3-cost anken3-period anken3-type anken3-support anken3-feature anken3-cam anken3-cta" "anken4 anken4-cost anken4-period anken4-type anken4-support anken4-feature anken4-cam anken4-cta" "anken5 anken5-cost anken5-period anken5-type anken5-support anken5-feature anken5-cam anken5-cta"; }
      @media only screen and (max-width: 767px) {
        .pastel .top5-container {
          grid-template-columns: 12rem repeat(4, 10rem) 18rem 18rem 14rem;
          gap: 2px; } }
      .pastel .top5-container-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .5rem; }
        .pastel .top5-container-inner .ico-rank {
          width: 30%;
          margin: auto; }
        .pastel .top5-container-inner .bnr {
          width: 80%;
          margin: auto; }
        .pastel .top5-container-inner-eval {
          width: 3.5rem;
          margin: auto; }
        .pastel .top5-container-inner-txt {
          font-size: 1.3rem;
          text-align: center;
          line-height: 1.4; }
          @media only screen and (max-width: 767px) {
            .pastel .top5-container-inner-txt {
              font-size: 1.2rem; } }
        .pastel .top5-container-inner-point {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: .5rem; }
          .pastel .top5-container-inner-point-inner {
            display: flex;
            gap: .5rem;
            align-items: center; }
            .pastel .top5-container-inner-point-inner-check {
              background: url(../img/lp/pastel/check_pink.png) no-repeat;
              background-size: contain;
              display: inline-block;
              width: 2rem;
              height: 1rem; }
            .pastel .top5-container-inner-point-inner-txt {
              width: 100%;
              font-size: 1.3rem;
              line-height: 1.3; }
              @media only screen and (max-width: 767px) {
                .pastel .top5-container-inner-point-inner-txt {
                  font-size: 1.1rem; } }
        .pastel .top5-container-inner-camlist {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: .5rem; }
          @media only screen and (max-width: 767px) {
            .pastel .top5-container-inner-camlist {
              gap: .5rem; } }
          .pastel .top5-container-inner-camlist-item {
            text-align: left;
            margin-bottom: .5rem;
            margin-left: 2rem;
            position: relative;
            line-height: 1.3;
            font-size: 1.3rem; }
            @media only screen and (max-width: 767px) {
              .pastel .top5-container-inner-camlist-item {
                margin-left: 1rem;
                font-size: 1.1rem; } }
            .pastel .top5-container-inner-camlist-item:before {
              position: absolute;
              top: 50%;
              left: -1.5rem;
              transform: translateY(-50%);
              display: inline-block;
              width: .8rem;
              height: .8rem;
              background: #f1b6a4;
              content: '';
              border-radius: 50px; }
              @media only screen and (max-width: 767px) {
                .pastel .top5-container-inner-camlist-item:before {
                  left: -1rem;
                  width: .5rem;
                  height: .5rem; } }
            .pastel .top5-container-inner-camlist-item:last-child {
              margin-bottom: 0; }
        .pastel .top5-container-inner-button {
          width: 100%;
          margin: 0 0 .5rem; }
          .pastel .top5-container-inner-button .cv {
            width: 90%;
            margin-bottom: 0;
            animation-name: pastel-btn;
            animation-delay: 0s;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite; }
        .pastel .top5-container-inner-btn {
          margin: .5rem 0; }
          @media only screen and (max-width: 767px) {
            .pastel .top5-container-inner-btn {
              margin: 0 0 .5rem; } }
          .pastel .top5-container-inner-btn .cv {
            width: 60%;
            margin-bottom: .5rem;
            animation-name: pastel-btn;
            animation-delay: 0s;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite; }
            @media only screen and (max-width: 767px) {
              .pastel .top5-container-inner-btn .cv {
                width: 70%; } }
      .pastel .top5-container .flex {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;
        background-color: #fff; }
      .pastel .top5-container .title {
        background-color: #d2a4be;
        color: #fff;
        font-weight: bold;
        font-size: 1.2rem;
        padding: .5rem .2rem;
        text-align: center;
        line-height: 1.5; }
      @media only screen and (max-width: 767px) {
        .pastel .top5-container .stiky {
          position: sticky;
          left: 0;
          top: 0;
          z-index: 1;
          border-right: 2px solid #fff; } }
      .pastel .top5-container .name {
        grid-area: name;
        border-radius: 20px 0 0 0; }
      .pastel .top5-container .cost {
        grid-area: cost; }
      .pastel .top5-container .period {
        grid-area: period; }
      .pastel .top5-container .type {
        grid-area: type; }
      .pastel .top5-container .support {
        grid-area: support; }
      .pastel .top5-container .feature {
        grid-area: feature; }
      .pastel .top5-container .cam {
        grid-area: cam; }
      .pastel .top5-container .cta {
        grid-area: cta;
        border-radius: 0 20px 0 0; }
      .pastel .top5-container .anken1 {
        grid-area: anken1; }
        .pastel .top5-container .anken1-cost {
          grid-area: anken1-cost; }
        .pastel .top5-container .anken1-period {
          grid-area: anken1-period; }
        .pastel .top5-container .anken1-type {
          grid-area: anken1-type; }
        .pastel .top5-container .anken1-support {
          grid-area: anken1-support; }
        .pastel .top5-container .anken1-feature {
          grid-area: anken1-feature; }
        .pastel .top5-container .anken1-cam {
          grid-area: anken1-cam; }
        .pastel .top5-container .anken1-cta {
          grid-area: anken1-cta; }
      .pastel .top5-container .anken2 {
        grid-area: anken2; }
        .pastel .top5-container .anken2-cost {
          grid-area: anken2-cost; }
        .pastel .top5-container .anken2-period {
          grid-area: anken2-period; }
        .pastel .top5-container .anken2-type {
          grid-area: anken2-type; }
        .pastel .top5-container .anken2-support {
          grid-area: anken2-support; }
        .pastel .top5-container .anken2-feature {
          grid-area: anken2-feature; }
        .pastel .top5-container .anken2-cam {
          grid-area: anken2-cam; }
        .pastel .top5-container .anken2-cta {
          grid-area: anken2-cta; }
      .pastel .top5-container .anken3 {
        grid-area: anken3; }
        .pastel .top5-container .anken3-cost {
          grid-area: anken3-cost; }
        .pastel .top5-container .anken3-period {
          grid-area: anken3-period; }
        .pastel .top5-container .anken3-type {
          grid-area: anken3-type; }
        .pastel .top5-container .anken3-support {
          grid-area: anken3-support; }
        .pastel .top5-container .anken3-feature {
          grid-area: anken3-feature; }
        .pastel .top5-container .anken3-cam {
          grid-area: anken3-cam; }
        .pastel .top5-container .anken3-cta {
          grid-area: anken3-cta; }
      .pastel .top5-container .anken4 {
        grid-area: anken4; }
        .pastel .top5-container .anken4-cost {
          grid-area: anken4-cost; }
        .pastel .top5-container .anken4-period {
          grid-area: anken4-period; }
        .pastel .top5-container .anken4-type {
          grid-area: anken4-type; }
        .pastel .top5-container .anken4-support {
          grid-area: anken4-support; }
        .pastel .top5-container .anken4-feature {
          grid-area: anken4-feature; }
        .pastel .top5-container .anken4-cam {
          grid-area: anken4-cam; }
        .pastel .top5-container .anken4-cta {
          grid-area: anken4-cta; }
      .pastel .top5-container .anken5 {
        grid-area: anken5;
        border-radius: 0 0 0 20px; }
        .pastel .top5-container .anken5-cost {
          grid-area: anken5-cost; }
        .pastel .top5-container .anken5-period {
          grid-area: anken5-period; }
        .pastel .top5-container .anken5-type {
          grid-area: anken5-type; }
        .pastel .top5-container .anken5-support {
          grid-area: anken5-support; }
        .pastel .top5-container .anken5-feature {
          grid-area: anken5-feature; }
        .pastel .top5-container .anken5-cam {
          grid-area: anken5-cam; }
        .pastel .top5-container .anken5-cta {
          grid-area: anken5-cta;
          border-radius: 0 0 20px 0; }
  .pastel .rank2 .box {
    border-top: 5px solid #d2a4be;
    background-color: #f8f4ee; }
    .pastel .rank2 .box .tab-ttl-list-item-1 {
      background-color: #fef8f6;
      border-radius: 5px 5px 0 0; }
      .pastel .rank2 .box .tab-ttl-list-item-1:before {
        background-color: #f1b6a4; }
    .pastel .rank2 .box .tab-ttl-list-item-2 {
      background-color: #faf6f8;
      border-radius: 5px 5px 0 0; }
      .pastel .rank2 .box .tab-ttl-list-item-2:before {
        background-color: #d2a4be; }
    .pastel .rank2 .box .tab-ttl-list-item-3 {
      background-color: #f2f5f6;
      border-radius: 5px 5px 0 0; }
      .pastel .rank2 .box .tab-ttl-list-item-3:before {
        background-color: #809ba2; }
    .pastel .rank2 .box .tab-ttl-list-item-4 {
      background-color: #f2f5f6;
      border-radius: 5px 5px 0 0; }
      .pastel .rank2 .box .tab-ttl-list-item-4:before {
        background-color: #506873; }
    .pastel .rank2 .box .button .cv {
      background: #f37a8f;
      animation-name: pastel-btn;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #8a2234;
      margin: 0 0 1.3rem 0; }
    .pastel .rank2 .box-tab {
      margin-top: 7rem; }
      @media only screen and (max-width: 767px) {
        .pastel .rank2 .box-tab {
          margin-top: 9rem; } }
      .pastel .rank2 .box-tab .iconimg-1 {
        position: relative; }
        .pastel .rank2 .box-tab .iconimg-1:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank01.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .pastel .rank2 .box-tab .iconimg-1:before {
              left: .5rem; } }
      .pastel .rank2 .box-tab .iconimg-2 {
        position: relative; }
        .pastel .rank2 .box-tab .iconimg-2:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank02.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .pastel .rank2 .box-tab .iconimg-2:before {
              left: .5rem; } }
      .pastel .rank2 .box-tab .iconimg-3 {
        position: relative; }
        .pastel .rank2 .box-tab .iconimg-3:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank03.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .pastel .rank2 .box-tab .iconimg-3:before {
              left: .5rem; } }
  .pastel .rank-simple .box .box-inner .detail-info-inner .point-ttl {
    background-color: #d2a4be; }
  .pastel .rank-simple .box .box-inner .detail-info-inner .point-inner-num {
    background-color: #d2a4be; }
  .pastel .rank-simple .box .box-inner .detail-info .spec-inner-wrapper dt {
    background-color: #e8e8e8; }
  .pastel .rank-simple .box .box-inner .detail-info .simple-campain-ttl {
    background-color: #f2ee91;
    color: #494949; }
  .pastel .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
    background-color: #fefdf4; }
    .pastel .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
      background-color: #f2ee91;
      color: #494949; }
  .pastel .rank-simple .box .box-inner .detail-info-ttl {
    background-color: #d2a4be;
    color: #fff; }
  .pastel .hikaku {
    margin-top: 1rem; }
    .pastel .hikaku-ttl {
      max-width: 500px;
      margin: 1rem auto; }
    .pastel .hikaku-container {
      text-align: center;
      font-size: 1.3rem;
      line-height: 1.5;
      margin: 1.5rem 0 3rem;
      display: grid;
      gap: .2rem;
      grid-template-columns: 0.5fr 1.5fr 1.5fr 0.6fr .8fr 0.6fr;
      grid-template-rows: 0.2fr 0.2fr 0.2fr 1fr 0.5fr 1.5fr;
      grid-template-areas: ". ttl-online ttl-online ttl-selfstudy ttl-selfstudy ttl-selfstudy" "ttl-studystyle resson movie books studysite moviesite" "ttl-price resson-price movie-price books-price studysite-price moviesite-price" "ttl-merit resson-merit movie-merit selfstudy-merit selfstudy-merit selfstudy-merit" "ttl-demerit resson-demerit movie-demerit selfstudy-demerit selfstudy-demerit selfstudy-demerit" "ttl-osusume resson-osusume movie-osusume bs-osusume bs-osusume moviesite-osusume"; }
      @media only screen and (max-width: 767px) {
        .pastel .hikaku-container {
          grid-template-columns: 5rem 24rem 24rem 10rem 8rem;
          padding: 0 .5rem;
          margin: 1rem 0 1.5rem; } }
      .pastel .hikaku-container .hikaku-bnr {
        width: 70%; }
      .pastel .hikaku-container .txt-color {
        color: #d2a4be;
        font-weight: bold; }
      .pastel .hikaku-container .txt-bold {
        font-weight: bold; }
      .pastel .hikaku-container .l-size {
        font-size: 1.8rem;
        font-weight: bold;
        padding: 0 .2rem .3rem; }
        @media only screen and (max-width: 767px) {
          .pastel .hikaku-container .l-size {
            font-size: 1.4rem;
            padding: 0; } }
      .pastel .hikaku-container .flex {
        display: flex;
        justify-content: center;
        align-items: center; }
      .pastel .hikaku-container .ttl-online {
        grid-area: ttl-online;
        font-weight: bold;
        font-size: 1.8rem; }
        .pastel .hikaku-container .ttl-online .osusume-batch {
          position: relative;
          display: block;
          width: 80%;
          margin: auto; }
          @media only screen and (max-width: 767px) {
            .pastel .hikaku-container .ttl-online .osusume-batch {
              width: 85%; } }
          .pastel .hikaku-container .ttl-online .osusume-batch:before {
            position: absolute;
            top: -2rem;
            left: -6.5rem;
            content: '';
            display: inline-block;
            width: 6rem;
            height: 5rem;
            padding-right: 1rem;
            background: url(../img/lp/pastel/osusume_pastel.png) no-repeat;
            background-size: contain;
            overflow: initial; }
            @media only screen and (max-width: 767px) {
              .pastel .hikaku-container .ttl-online .osusume-batch:before {
                top: -1.5rem;
                left: -5.5rem; } }
      .pastel .hikaku-container .ttl-selfstudy {
        grid-area: ttl-selfstudy;
        font-weight: bold;
        font-size: 1.4rem; }
      .pastel .hikaku-container .ttl-studystyle {
        grid-area: ttl-studystyle; }
      .pastel .hikaku-container .ttl-price {
        grid-area: ttl-price; }
      .pastel .hikaku-container .ttl-merit {
        grid-area: ttl-merit; }
      .pastel .hikaku-container .ttl-demerit {
        grid-area: ttl-demerit; }
      .pastel .hikaku-container .ttl-osusume {
        grid-area: ttl-osusume; }
      .pastel .hikaku-container .resson {
        grid-area: resson; }
      .pastel .hikaku-container .movie {
        grid-area: movie; }
      .pastel .hikaku-container .books {
        grid-area: books; }
      .pastel .hikaku-container .studysite {
        grid-area: studysite; }
      .pastel .hikaku-container .moviesite {
        grid-area: moviesite; }
      .pastel .hikaku-container .resson-price {
        grid-area: resson-price; }
      .pastel .hikaku-container .movie-price {
        grid-area: movie-price; }
      .pastel .hikaku-container .books-price {
        grid-area: books-price; }
      .pastel .hikaku-container .studysite-price {
        grid-area: studysite-price; }
      .pastel .hikaku-container .moviesite-price {
        grid-area: moviesite-price; }
      .pastel .hikaku-container .resson-merit {
        grid-area: resson-merit;
        text-align: left; }
      .pastel .hikaku-container .movie-merit {
        grid-area: movie-merit;
        text-align: left; }
      .pastel .hikaku-container .selfstudy-merit {
        grid-area: selfstudy-merit;
        text-align: left; }
      .pastel .hikaku-container .resson-demerit {
        grid-area: resson-demerit; }
      .pastel .hikaku-container .movie-demerit {
        grid-area: movie-demerit; }
      .pastel .hikaku-container .selfstudy-demerit {
        grid-area: selfstudy-demerit;
        text-align: left; }
      .pastel .hikaku-container .resson-osusume {
        grid-area: resson-osusume; }
      .pastel .hikaku-container .movie-osusume {
        grid-area: movie-osusume; }
      .pastel .hikaku-container .bs-osusume {
        grid-area: bs-osusume; }
      .pastel .hikaku-container .moviesite-osusume {
        grid-area: moviesite-osusume; }
      .pastel .hikaku-container .bg-ttl {
        background-color: #d2a4be;
        color: #fff;
        font-weight: bold;
        padding: .5rem; }
      .pastel .hikaku-container .bg-y {
        background-color: #fff;
        padding: 1rem; }
      .pastel .hikaku-container .bg-y-opacity {
        background-color: #fff;
        padding: 1rem; }
      .pastel .hikaku-container .bg-g {
        background-color: #d2a4be;
        padding: 1rem;
        color: #fff; }
      .pastel .hikaku-container .bg-g-opacity {
        background-color: #d2a4be;
        padding: 1rem;
        color: #fff; }
      .pastel .hikaku-container .button .cv {
        width: 90%; }
      .pastel .hikaku-container .merideme-list li {
        margin-left: 1rem;
        position: relative; }
        .pastel .hikaku-container .merideme-list li:before {
          position: absolute;
          top: 50%;
          left: -1rem;
          transform: translateY(-50%);
          display: inline-block;
          width: .5rem;
          height: .5rem;
          background-color: #e7d9c7;
          border-radius: 50px;
          content: ''; }
    .pastel .hikaku-copy {
      width: 75%;
      margin: auto;
      position: relative; }
      .pastel .hikaku-copy:before {
        position: absolute;
        bottom: .2rem;
        left: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_left.png) no-repeat;
        background-size: contain; }
      .pastel .hikaku-copy:after {
        position: absolute;
        bottom: .2rem;
        right: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_right.png) no-repeat;
        background-size: contain; }
    .pastel .hikaku-bnr {
      width: 80%;
      margin: 1rem auto; }
  @media only screen and (max-width: 767px) {
    .pastel .suggest {
      padding: 0 .5rem; } }
  .pastel .suggest-title {
    max-width: 500px;
    margin: 1rem auto 2rem; }
  .pastel .suggest-list {
    margin-bottom: 1rem; }
    @media only screen and (max-width: 767px) {
      .pastel .suggest-list-item {
        height: 30rem; } }
    .pastel .suggest-list-item-img {
      margin: 0 auto .5rem; }
      @media only screen and (max-width: 767px) {
        .pastel .suggest-list-item-img {
          width: 45%; } }
      .pastel .suggest-list-item-img img {
        margin: auto; }
    .pastel .suggest-list-item-txt {
      text-align: center;
      font-weight: bold;
      line-height: 1.2;
      color: #506873; }
      @media only screen and (max-width: 767px) {
        .pastel .suggest-list-item-txt {
          font-size: 1.8rem; } }
      .pastel .suggest-list-item-txt-kome {
        margin-top: .5rem;
        font-weight: normal;
        font-size: 1rem;
        color: #506873; }
  .pastel .suggest-kome {
    text-align: right;
    margin: .5rem 0 1rem;
    color: #506873; }
  .pastel .suggest-type-sankaku {
    margin: 1rem auto;
    max-width: 400px;
    display: flex;
    justify-content: center; }
  .pastel .suggest-type-list {
    margin: 2rem auto; }
    .pastel .suggest-type-list-wrap-inner-ttl {
      padding: .5rem;
      font-weight: bold;
      color: #fff;
      font-size: 1.2rem;
      border-radius: 20px 20px 0 0;
      background: #f1b6a4;
      min-height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .pastel .suggest-type-list-wrap-inner-ttl {
          min-height: 60px;
          flex-direction: row;
          font-size: 1.5rem; } }
      .pastel .suggest-type-list-wrap-inner-ttl-p {
        background-color: #d2a4be; }
      .pastel .suggest-type-list-wrap-inner-ttl-g {
        background-color: #506873; }
      .pastel .suggest-type-list-wrap-inner-ttl .txt-big {
        font-size: 2rem; }
        @media only screen and (max-width: 767px) {
          .pastel .suggest-type-list-wrap-inner-ttl .txt-big {
            font-size: 2.4rem; } }
      @media only screen and (max-width: 767px) {
        .pastel .suggest-type-list-wrap-inner-ttl-txt {
          width: 90%; } }
    .pastel .suggest-type-list-wrap-inner-content {
      padding: 1rem .5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 0.2rem solid #f8f4ee;
      border-top: none;
      background-color: #fff;
      border-radius: 0 0 20px 20px;
      height: 25rem;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .pastel .suggest-type-list-wrap-inner-content {
          padding: 1rem 1rem 3rem;
          height: 28rem; } }
      .pastel .suggest-type-list-wrap-inner-content-name {
        font-size: 1.8rem;
        font-weight: bold; }
      .pastel .suggest-type-list-wrap-inner-content .img {
        width: 50%;
        margin: 1rem auto .5rem; }
      .pastel .suggest-type-list-wrap-inner-content-cv {
        width: 100%;
        margin: 1rem auto 0; }
        @media only screen and (max-width: 767px) {
          .pastel .suggest-type-list-wrap-inner-content-cv {
            width: 90%; } }
        .pastel .suggest-type-list-wrap-inner-content-cv .cv {
          width: 75%;
          margin: 0; }
  .pastel .suggest-strong-txt {
    margin: 1rem auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #506873; }
    .pastel .suggest-strong-txt-big {
      font-size: 2.5rem;
      font-weight: bold; }
    .pastel .suggest-strong-txt-red {
      font-size: 2.5rem;
      color: #f37a8f; }
  .pastel .suggest-strong-list {
    margin: 1.5rem auto 2rem;
    width: 37%; }
    @media only screen and (max-width: 767px) {
      .pastel .suggest-strong-list {
        width: 80%; } }
    .pastel .suggest-strong-list-item {
      position: relative;
      padding-left: 4rem;
      margin: 1rem auto;
      font-size: 1.8rem;
      line-height: 1.2;
      color: #506873; }
      .pastel .suggest-strong-list-item:before {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 2.5rem;
        background: url(../img/lp/pastel/check_pastel.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%); }
  .pastel .suggest-strong-name {
    font-size: 2.5rem;
    font-weight: bold;
    display: flex;
    justify-content: center; }
    .pastel .suggest-strong-name-wrap {
      position: relative;
      text-align: center;
      color: #506873; }
      .pastel .suggest-strong-name-wrap:before {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: url(../img/lp/pastel/fukidashi_l.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: -3rem;
        transform: translateY(-50%); }
      .pastel .suggest-strong-name-wrap:after {
        content: '';
        display: inline-block;
        width: 3rem;
        height: 3rem;
        background: url(../img/lp/pastel/fukidashi_r.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: -3.5rem;
        transform: translateY(-50%); }
  .pastel .suggest-strong-img {
    margin: 0.5rem auto;
    max-width: 500px; }
  .pastel .suggest-strong-cv {
    width: 60%;
    margin: 1rem auto !important; }
    @media only screen and (max-width: 767px) {
      .pastel .suggest-strong-cv {
        width: 90%; } }
  .pastel .suggest .swiper-button-next, .pastel .suggest .swiper-button-prev {
    color: #050d5c; }
  .pastel .suggest .swiper-pagination-bullet {
    background-color: #050d5c; }
  .pastel .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #050d5c; }
  .pastel .box-survey {
    margin-bottom: 0;
    padding-bottom: 3rem; }
  .pastel .suggest .swiper-button-next, .pastel .suggest .swiper-button-prev {
    color: #f37a8f; }
  .pastel .suggest .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #f37a8f; }
  .pastel .bestsearch {
    background-color: #e7d9c7; }
    .pastel .bestsearch-pmax {
      margin: 0 auto;
      max-width: 800px; }
    .pastel .bestsearch-form-wrap-sankaku:after {
      border-color: #e7d9c7 transparent transparent transparent; }
    .pastel .bestsearch-form-submit input {
      background: #f1b6a4;
      border: 1px solid #f1b6a4;
      color: #fff; }
      .pastel .bestsearch-form-submit input:hover {
        background-color: #fff;
        color: #f1b6a4; }
    .pastel .bestsearch select {
      color: #494949; }

@keyframes pastel-btn {
  0% {
    box-shadow: 0 8px 0 #8a2234;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #8a2234;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #8a2234;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #8a2234;
    transform: translatey(0); } }
@keyframes pastel-link {
  0% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); } }
/*中庸LPのcss*/
.mode {
  background-color: #fff;
  color: #0d0802;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Lucida Grande", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
  .mode .mainvisual {
    z-index: 0;
    background-color: transparent !important;
    max-width: 800px;
    margin: 0 auto; }
    .mode .mainvisual img {
      height: auto; }
  .mode .button .cv {
    background: #eb4828;
    box-shadow: 0 4px 0 #631d10; }
  .mode .button .link {
    background: #fff847;
    box-shadow: 0 4px 0 #545331; }
    .mode .button .link a {
      color: #0d0802;
      text-shadow: none; }
  .mode .ttl {
    max-width: 500px;
    margin: 2rem auto 1rem; }
    @media only screen and (max-width: 767px) {
      .mode .ttl {
        padding: 0 0.5rem; } }
  .mode .neotype {
    margin: 1.5rem auto;
    max-width: 1000px; }
    @media only screen and (max-width: 767px) {
      .mode .neotype {
        margin: .5rem auto;
        padding: 0 .5rem; } }
    .mode .neotype-ttl {
      max-width: 500px;
      margin: auto; }
    .mode .neotype-list {
      margin-top: 4rem;
      display: flex;
      gap: 1rem;
      justify-content: space-between; }
      @media only screen and (max-width: 767px) {
        .mode .neotype-list {
          margin-top: 3rem;
          flex-direction: column;
          gap: 4rem; } }
      .mode .neotype-list-inner {
        position: relative;
        width: 32%;
        background-color: #fdf8f3;
        border-radius: 10px;
        box-shadow: 0px 5px 15px -3px rgba(0, 0, 0, 0.1); }
        @media only screen and (max-width: 767px) {
          .mode .neotype-list-inner {
            width: 100%; } }
        .mode .neotype-list-inner-1 {
          border: 4px solid #fff847; }
          .mode .neotype-list-inner-1 .neotype-list-inner-ttl {
            position: relative; }
            .mode .neotype-list-inner-1 .neotype-list-inner-ttl:before {
              position: absolute;
              z-index: 1;
              top: -3rem;
              left: 50%;
              transform: translateX(-50%);
              display: inline-block;
              width: 5rem;
              height: 5rem;
              content: '';
              background: url(../img/icon/ico-rank01.png) no-repeat;
              background-size: contain; }
        .mode .neotype-list-inner-2 .neotype-list-inner-ttl {
          position: relative; }
          .mode .neotype-list-inner-2 .neotype-list-inner-ttl:before {
            position: absolute;
            z-index: 1;
            top: -3rem;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 5rem;
            height: 5rem;
            content: '';
            background: url(../img/icon/ico-rank02.png) no-repeat;
            background-size: contain; }
        .mode .neotype-list-inner-3 .neotype-list-inner-ttl {
          position: relative; }
          .mode .neotype-list-inner-3 .neotype-list-inner-ttl:before {
            position: absolute;
            z-index: 1;
            top: -3rem;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 5rem;
            height: 5rem;
            content: '';
            background: url(../img/icon/ico-rank03.png) no-repeat;
            background-size: contain; }
        .mode .neotype-list-inner-ttl {
          position: relative;
          padding: 2rem 1rem 1.8rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          border-radius: 10px; }
          .mode .neotype-list-inner-ttl:after {
            position: absolute;
            z-index: 1;
            display: inline-block;
            bottom: -2.1rem;
            left: 0;
            width: 100%;
            height: 3rem;
            content: '';
            background: url(../img/lp/mode/neotype_line.png) no-repeat;
            background-size: contain; }
          .mode .neotype-list-inner-ttl-copy {
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center; }
          .mode .neotype-list-inner-ttl-star {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .8rem; }
            .mode .neotype-list-inner-ttl-star-name {
              width: 20%;
              text-align: right; }
            .mode .neotype-list-inner-ttl-star-img {
              width: 38%; }
            .mode .neotype-list-inner-ttl-star-eval {
              width: 20%; }
              .mode .neotype-list-inner-ttl-star-eval-big {
                font-size: 1.8rem;
                font-weight: bold; }
          .mode .neotype-list-inner-ttl-name {
            font-size: 2.3rem;
            text-decoration: underline #349FE8;
            transition: 0.3s;
            color: #349FE8; }
            .mode .neotype-list-inner-ttl-name:hover {
              text-decoration: underline #060a3a;
              color: #060a3a; }
        .mode .neotype-list-inner-content {
          padding: 2.5rem 1rem 4.5rem;
          display: flex;
          flex-direction: column;
          gap: 1rem; }
          @media only screen and (max-width: 767px) {
            .mode .neotype-list-inner-content {
              padding: 2.5rem 1rem 5.5rem; } }
          .mode .neotype-list-inner-content-spec {
            display: flex;
            justify-content: center;
            gap: .2rem; }
            .mode .neotype-list-inner-content-spec-inner {
              width: 100%;
              background-color: #fff; }
              .mode .neotype-list-inner-content-spec-inner-dt {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                background-color: #000064;
                color: #fff;
                font-weight: bold;
                padding: .5rem; }
              .mode .neotype-list-inner-content-spec-inner-dd {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: .5rem;
                padding: .5rem;
                background-color: #fff; }
                .mode .neotype-list-inner-content-spec-inner-dd .eval-mark {
                  width: 30%;
                  display: flex; }
                .mode .neotype-list-inner-content-spec-inner-dd .txt {
                  font-size: 1.2rem;
                  text-align: center; }
          .mode .neotype-list-inner-content-point {
            padding: 1rem .5rem;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            gap: 1rem; }
            .mode .neotype-list-inner-content-point-flex {
              display: flex;
              gap: .5rem;
              align-items: center; }
            .mode .neotype-list-inner-content-point-check {
              display: inline-block;
              width: 25px;
              height: 15px;
              background: url(../img/lp/mode/check_orange.png) no-repeat;
              background-size: contain; }
              @media only screen and (max-width: 767px) {
                .mode .neotype-list-inner-content-point-check {
                  width: 10%; } }
            .mode .neotype-list-inner-content-point-txt {
              width: 100%; }
              @media only screen and (max-width: 767px) {
                .mode .neotype-list-inner-content-point-txt {
                  width: 90%; } }
          .mode .neotype-list-inner-content-cv {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem; }
            @media only screen and (max-width: 767px) {
              .mode .neotype-list-inner-content-cv {
                margin-bottom: .5rem; } }
            .mode .neotype-list-inner-content-cv-btn {
              animation-name: mode-btn;
              animation-delay: 0s;
              animation-duration: 3s;
              animation-timing-function: linear;
              animation-iteration-count: infinite;
              border-radius: 50px;
              background: #eb4828;
              box-shadow: 0 4px 0 #631d10; }
              .mode .neotype-list-inner-content-cv-btn a {
                color: #FFF;
                text-decoration: none;
                font-weight: bold;
                display: block;
                padding: 1.5rem 2rem;
                color: #FFF;
                text-align: center;
                font-size: 1.8rem; }
        .mode .neotype-list-inner-link {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%; }
          .mode .neotype-list-inner-link-btn {
            border-radius: 0 0 5px 5px;
            display: inline-block;
            width: 100%;
            background-color: #d8d7d8;
            padding: 1rem;
            font-size: 1.6rem;
            font-weight: bold;
            text-align: center;
            color: #0d0802;
            text-decoration: none; }
            .mode .neotype-list-inner-link-btn-txt {
              position: relative; }
              .mode .neotype-list-inner-link-btn-txt:before {
                position: absolute;
                top: 50%;
                left: -1.5rem;
                transform: translateY(-50%);
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-top: 7.5px solid #0d0802;
                border-bottom: 0;
                transition: .3s; }
              .mode .neotype-list-inner-link-btn-txt:after {
                position: absolute;
                top: 50%;
                right: -1.5rem;
                transform: translateY(-50%);
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-top: 7.5px solid #0d0802;
                border-bottom: 0;
                transition: .3s; }
  .mode .wrap .text-date {
    color: #0d0802;
    text-align: right;
    margin-top: .5rem; }
  @media only screen and (max-width: 767px) {
    .mode .wrap .type {
      padding: 0 .5rem; } }
  .mode .wrap .type-ttl {
    max-width: 500px;
    margin: 1rem auto; }
  .mode .wrap .type-list {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem; }
    @media only screen and (max-width: 767px) {
      .mode .wrap .type-list {
        margin-top: .5rem;
        flex-direction: column;
        gap: 1rem; } }
    .mode .wrap .type-list-inner {
      width: 24%; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .type-list-inner {
          width: 100%; } }
      .mode .wrap .type-list-inner-ttl {
        padding: 1rem .5rem;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 1.2rem;
        background-color: #529cff;
        border-radius: 20px 20px 0 0; }
        .mode .wrap .type-list-inner-ttl-big {
          font-size: 1.8rem; }
        .mode .wrap .type-list-inner-ttl-y {
          background-color: #ff3b3b;
          color: #fff; }
        .mode .wrap .type-list-inner-ttl-g {
          background-color: #529cff;
          color: #fff; }
        .mode .wrap .type-list-inner-ttl-w {
          background-color: #529cff; }
      .mode .wrap .type-list-inner-content {
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #0d0802;
        background-color: #f3f6fd;
        border: none;
        border-radius: 0 0 20px 20px;
        text-align: center;
        font-size: .9rem;
        min-height: 20rem; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .type-list-inner-content {
            padding: 1rem 1rem 2rem;
            min-height: auto; } }
        .mode .wrap .type-list-inner-content-wrap {
          display: flex;
          flex-direction: column;
          gap: .5rem;
          max-width: 350px;
          margin: auto; }
          .mode .wrap .type-list-inner-content-wrap .logo {
            width: 80%;
            margin: auto;
            position: inherit; }
            @media only screen and (max-width: 767px) {
              .mode .wrap .type-list-inner-content-wrap .logo {
                width: 65%; } }
          .mode .wrap .type-list-inner-content-wrap-copy {
            width: 100%;
            font-size: 1.2rem; }
          .mode .wrap .type-list-inner-content-wrap-flex {
            display: flex;
            gap: .5rem;
            margin-top: .5rem; }
            .mode .wrap .type-list-inner-content-wrap-flex-link {
              width: 29%;
              border-radius: 20px;
              background-color: #e8e8e8;
              text-decoration: none;
              line-height: 45px;
              margin-top: 5px;
              box-shadow: 0 3px 0 #2b312e;
              display: flex;
              align-items: center;
              justify-content: center; }
              .mode .wrap .type-list-inner-content-wrap-flex-link:hover {
                box-shadow: 0 0 0 0;
                margin: 8px 0 -3px;
                opacity: 1 !important;
                transition: .2s; }
              .mode .wrap .type-list-inner-content-wrap-flex-link-txt {
                color: #0d0802 !important;
                font-weight: bold;
                font-size: 1.2rem;
                font-weight: bold; }
                @media only screen and (max-width: 767px) {
                  .mode .wrap .type-list-inner-content-wrap-flex-link-txt {
                    font-size: 1.6rem; } }
            .mode .wrap .type-list-inner-content-wrap-flex-cv {
              width: 70%;
              margin: 5px .5rem 0; }
              .mode .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                line-height: 3.5;
                width: 100%;
                margin-bottom: 0; }
                @media only screen and (max-width: 767px) {
                  .mode .wrap .type-list-inner-content-wrap-flex-cv-wrapper {
                    line-height: 2.5; } }
                .mode .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                  padding: 0; }
                  @media only screen and (max-width: 767px) {
                    .mode .wrap .type-list-inner-content-wrap-flex-cv-wrapper a {
                      padding: 0 !important; } }
              .mode .wrap .type-list-inner-content-wrap-flex-cv-txt {
                color: #fff;
                font-size: 1.3rem;
                display: block; }
                @media only screen and (max-width: 767px) {
                  .mode .wrap .type-list-inner-content-wrap-flex-cv-txt {
                    font-size: 2rem; } }
  @media only screen and (max-width: 767px) {
    .mode .wrap .howto {
      padding: 0 .5rem; } }
  .mode .wrap .howto-com {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center; }
    .mode .wrap .howto-com-img {
      width: 20%; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .howto-com-img {
          width: 25%; } }
    .mode .wrap .howto-com-fukidashi {
      width: 79%;
      font-size: 1.6rem;
      line-height: 1.6; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .howto-com-fukidashi {
          width: 74%;
          font-size: 1.4rem; } }
      .mode .wrap .howto-com-fukidashi .big {
        font-size: 2.6rem; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .howto-com-fukidashi .big {
            font-size: 2rem; } }
  .mode .wrap .howto-container {
    /* 2025-02-05: 横スクロール修正のため変更
    修正前:
    max-width: 650px;
    margin: 0 auto; 
    */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    }
    @media only screen and (max-width: 767px) {
      .mode .wrap .howto-container {
        width: 54rem; } }
    .mode .wrap .howto-container-img {
      width: 100%; }
  .mode .wrap .howto-osusume {
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center; }
    @media only screen and (max-width: 767px) {
      .mode .wrap .howto-osusume {
        margin-bottom: 1rem; } }
    .mode .wrap .howto-osusume-sankaku {
      width: 100%;
      display: flex;
      justify-content: center; }
    .mode .wrap .howto-osusume-copy-wrap {
      position: relative;
      font-size: 1.4rem;
      font-weight: bold; }
      .mode .wrap .howto-osusume-copy-wrap:before {
        position: absolute;
        bottom: .2rem;
        left: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_left.png) no-repeat;
        background-size: contain; }
      .mode .wrap .howto-osusume-copy-wrap:after {
        position: absolute;
        bottom: .2rem;
        right: -2rem;
        content: '';
        width: 2rem;
        height: 2.5rem;
        display: inline-block;
        background: url(../img/lp/fukidashi_right.png) no-repeat;
        background-size: contain; }
    .mode .wrap .howto-osusume-logo {
      width: 40%;
      margin: -1rem auto;
      display: flex;
      justify-content: center; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .howto-osusume-logo {
          width: 75%; } }
    .mode .wrap .howto-osusume-bnr {
      width: 65%; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .howto-osusume-bnr {
          width: 95%; } }
    .mode .wrap .howto-osusume-btn {
      width: 60%; }
      .mode .wrap .howto-osusume-btn-inner {
        padding: 0.8rem;
        font-size: 2rem; }
  .mode .wrap .box-topranking {
    margin: 4rem 0 3rem;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .mode .wrap .box-topranking {
        padding: 0 .5rem;
        margin: 3rem 0 2rem; } }
    .mode .wrap .box-topranking th {
      background-color: #000064;
      color: #fff;
      padding: .5rem; }
    .mode .wrap .box-topranking td {
      width: 32%;
      border-right: 3px solid #fff;
      padding: 1rem;
      background-color: #f3f6fd;
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .box-topranking td {
          font-size: 1.1rem; } }
      .mode .wrap .box-topranking td .ico-rank {
        margin: 0 auto .3rem;
        width: 40px; }
      .mode .wrap .box-topranking td .banner {
        margin: 0.5rem auto;
        width: 70%; }
      .mode .wrap .box-topranking td .title {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        margin-bottom: .5rem; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking td .title {
            font-size: 1.3rem; } }
      .mode .wrap .box-topranking td .star {
        color: #888;
        font-size: 1.4rem;
        font-weight: 700;
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking td .star {
            font-size: 1.2rem; } }
        .mode .wrap .box-topranking td .star img {
          display: inline-block;
          margin: .3rem .5rem 0 0;
          width: 30%; }
          @media only screen and (max-width: 767px) {
            .mode .wrap .box-topranking td .star img {
              width: 60%; } }
      .mode .wrap .box-topranking td:last-child {
        border-right: none; }
      .mode .wrap .box-topranking td .eval-inner {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: .5rem; }
        .mode .wrap .box-topranking td .eval-inner-img {
          width: 20%;
          margin: auto; }
          @media only screen and (max-width: 767px) {
            .mode .wrap .box-topranking td .eval-inner-img {
              width: 50%; } }
        .mode .wrap .box-topranking td .eval-inner-txt {
          text-align: center; }
    .mode .wrap .box-topranking .name {
      position: sticky;
      top: 0;
      z-index: 1; }
    .mode .wrap .box-topranking-flex {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      justify-content: center; }
      .mode .wrap .box-topranking-flex-item {
        width: 47.5%; }
        .mode .wrap .box-topranking-flex-item img {
          margin: auto; }
        .mode .wrap .box-topranking-flex-item-off {
          color: #c4c7cc; }
    .mode .wrap .box-topranking-cam {
      text-align: left;
      margin-bottom: .5rem;
      margin-left: 2rem;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .mode .wrap .box-topranking-cam {
          margin-left: 1rem;
          font-size: 1.1rem; } }
      .mode .wrap .box-topranking-cam:before {
        position: absolute;
        top: 50%;
        left: -1.5rem;
        transform: translateY(-50%);
        display: inline-block;
        width: .8rem;
        height: .8rem;
        background: #000064;
        content: '';
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking-cam:before {
            left: -1rem;
            width: .5rem;
            height: .5rem; } }
      .mode .wrap .box-topranking-cam:last-child {
        margin-bottom: 0; }
    .mode .wrap .box-topranking-button {
      margin: 0; }
      .mode .wrap .box-topranking-button .cv {
        animation-name: mode-btn;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking-button .cv {
            width: 100%; } }
      .mode .wrap .box-topranking-button .link {
        animation-name: mode-link;
        animation-delay: 0s;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        border-radius: 50px; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking-button .link {
            width: 100%; } }
      @media only screen and (max-width: 767px) {
        .mode .wrap .box-topranking-button a {
          padding: 1rem; } }
    .mode .wrap .box-topranking-point {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding: .5rem; }
      .mode .wrap .box-topranking-point-inner {
        display: flex;
        gap: .5rem;
        align-items: center; }
        @media only screen and (max-width: 767px) {
          .mode .wrap .box-topranking-point-inner {
            flex-direction: column; } }
        .mode .wrap .box-topranking-point-inner-check {
          background: url(../img/lp/check_orange.png) no-repeat;
          background-size: contain;
          display: inline-block;
          width: 2rem;
          height: 1rem; }
        .mode .wrap .box-topranking-point-inner-txt {
          width: 100%;
          text-align: left; }
          @media only screen and (max-width: 767px) {
            .mode .wrap .box-topranking-point-inner-txt {
              font-size: 1.1rem; } }
  .mode .rank2 .box {
    border-top: 5px solid #000064;
    background-color: #f3f6fd; }
    .mode .rank2 .box .tab-ttl-list-item-1 {
      background-color: #fef8f6;
      border-radius: 5px 5px 0 0; }
      .mode .rank2 .box .tab-ttl-list-item-1:before {
        background-color: #f1b6a4; }
    .mode .rank2 .box .tab-ttl-list-item-2 {
      background-color: #faf6f8;
      border-radius: 5px 5px 0 0; }
      .mode .rank2 .box .tab-ttl-list-item-2:before {
        background-color: #d2a4be; }
    .mode .rank2 .box .tab-ttl-list-item-3 {
      background-color: #f2f5f6;
      border-radius: 5px 5px 0 0; }
      .mode .rank2 .box .tab-ttl-list-item-3:before {
        background-color: #809ba2; }
    .mode .rank2 .box .tab-ttl-list-item-4 {
      background-color: #f2f5f6;
      border-radius: 5px 5px 0 0; }
      .mode .rank2 .box .tab-ttl-list-item-4:before {
        background-color: #506873; }
    .mode .rank2 .box .button .cv {
      background: #eb4828;
      animation-name: pastel-btn;
      text-shadow: 2px 2px 2px #666;
      box-shadow: 0 4px 0 #631d10;
      margin: 0 0 1.3rem 0; }
    .mode .rank2 .box-tab {
      margin-top: 7rem; }
      @media only screen and (max-width: 767px) {
        .mode .rank2 .box-tab {
          margin-top: 9rem; } }
      .mode .rank2 .box-tab .iconimg-1 {
        position: relative; }
        .mode .rank2 .box-tab .iconimg-1:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank01.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .mode .rank2 .box-tab .iconimg-1:before {
              left: .5rem; } }
      .mode .rank2 .box-tab .iconimg-2 {
        position: relative; }
        .mode .rank2 .box-tab .iconimg-2:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank02.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .mode .rank2 .box-tab .iconimg-2:before {
              left: .5rem; } }
      .mode .rank2 .box-tab .iconimg-3 {
        position: relative; }
        .mode .rank2 .box-tab .iconimg-3:before {
          position: absolute;
          top: 50%;
          left: 2rem;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          background: url(../img/ico_rank03.png) no-repeat;
          background-size: contain;
          width: 4rem;
          height: 4rem;
          z-index: 1; }
          @media only screen and (max-width: 767px) {
            .mode .rank2 .box-tab .iconimg-3:before {
              left: .5rem; } }
  .mode .rank-simple .box .box-inner .detail-info-inner .point-ttl {
    background-color: #000064; }
  .mode .rank-simple .box .box-inner .detail-info-inner .point-inner-num {
    background-color: #000064; }
  .mode .rank-simple .box .box-inner .detail-info .spec-inner-wrapper dt {
    background-color: #e8e8e8; }
  .mode .rank-simple .box .box-inner .detail-info .simple-campain-ttl {
    background-color: #fff847;
    color: #0d0802; }
  .mode .rank-simple .box .box-inner .detail-info .simple-campain-wrapper {
    background-color: #f7fcff; }
    .mode .rank-simple .box .box-inner .detail-info .simple-campain-wrapper-list-item-num {
      background-color: #fff847;
      color: #0d0802; }
  .mode .rank-simple .box .box-inner .detail-info-ttl {
    background-color: #000064;
    color: #fff; }
  .mode .bestsearch {
    background-color: #fcf2e8; }
    .mode .bestsearch-ttl {
      color: #000064; }
    .mode .bestsearch-form-wrap-sankaku:after {
      border-color: #fcf2e8 transparent transparent transparent; }
    .mode .bestsearch-form-submit input {
      background: #000064;
      border: 1px solid #000064;
      color: #fff; }
      .mode .bestsearch-form-submit input:hover {
        background-color: #fff;
        color: #000064; }
    .mode .bestsearch select {
      color: #000064; }

@keyframes mode-btn {
  0% {
    box-shadow: 0 8px 0 #631d10;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #631d10;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #631d10;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #631d10;
    transform: translatey(0); } }
@keyframes mode-link {
  0% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  60% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  70% {
    box-shadow: none;
    transform: translatey(8px); }
  80% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); }
  100% {
    box-shadow: 0 8px 0 #545331;
    transform: translatey(0); } }

/*# sourceMappingURL=design.css.map */