@charset "utf-8";

/* ======================================================
 * docsortfile.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Page Component
 * - Clearfix
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Page Component
 * - Clearfix
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * Font
====================================================== */
.docsortfile-hero_date, .docsortfile-hero_price, .docsortfile-lead, .docsortfile-lead--highlight, .docsortfile-point_title {
  font-family: "Noto Sans", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- docsortfile-hero ----- */
  .docsortfile-hero_inner {
    position: relative;
  }
  .docsortfile-hero_description {
    position: absolute;
    bottom: 39px;
    left: 2.5em;
  }
  .docsortfile-hero_date {
    margin-top: 0.8em;
  }
  .docsortfile-hero_date,
  .docsortfile-hero_price {
    text-align: right;
    font-size: 1.8rem;
    line-height: 1.4;
  }
  /* ----- docsortfile-lead-layout ----- */
  .docsortfile-lead-layout {
    margin-top: 1.9em;
  }
  .docsortfile-lead_inner {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 228px;
    padding: 20px;
    background-color: #e8e8f3;
  }
  .docsortfile-lead_inner::after {
    position: absolute;
    bottom: 0;
    right: 4.16666666%;
    content: "";
    background: url(/sp/docsortfile/img/index_bg01.png) no-repeat 0 0/ contain;
    width: 15.16666%;
    height: 87.7192982%;
  }
  .docsortfile-lead_inner > .docsortfile-lead {
    margin-top: .3em;
  }
  .docsortfile-lead {
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
  }
  .docsortfile-lead--highlight {
    display: inline-block;
    background: linear-gradient(transparent 54%, #e3a406 0%);
    margin-top: 0.4em;
    padding: 0 0 4px 4px;
    font-size: 4.0rem;
    font-weight: bold;
    text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff;
    line-height: 1.2;
  }
  /* ----- docsortfile-point-layout ----- */
  .docsortfile-point-layout {
    margin-top: 5.6em;
  }
  .docsortfile-point_inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-flow: row wrap;
  }
  .docsortfile-point_item {
    width: calc(((100% - (36px)) / 2) - 0.1px);
    border-top: 2px solid #1d2088;
  }
  .docsortfile-point_item:nth-of-type(even) {
    margin-left: 36px;
  }
  .docsortfile-point_item:nth-of-type(n+3) {
    margin-top: 60px;
  }
  .docsortfile-point_item_head {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .docsortfile-point_title {
    margin-left: 17px;
    color: #1d2088;
    font-size: 3.3rem;
    font-weight: bold;
    line-height: 1.4;
  }
  .docsortfile-point_body {
    margin-top: 1.3em;
  }
  /* ----- docsortfile_heading2 ----- */
  .docsortfile_heading2 {
    margin-top: 3em;
    border-bottom: 2px solid #ddd;
    padding: 8px 0;
  }
  .docsortfile_heading2 .docsortfile_heading2_title {
    font-size: 2.8rem;
    font-weight: bold;
  }
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after{
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .docsortfile-hero_description img {
    width: 90%;
  }
  .docsortfile-hero_date,
  .docsortfile-hero_price {
    font-size: calc( 18 * 100vw / 1280);
  }
  .docsortfile-lead_inner {
    align-items: center;
  }
  .docsortfile-lead_inner::after {
    height: 70%;
  }
  .docsortfile-lead {
    font-size: calc( 26 * 100vw / 1280);
  }
  .docsortfile-lead--highlight {
    font-size: calc( 40 * 100vw / 1280);
  }
  .docsortfile-point_title {
    font-size: calc( 34 * 100vw / 1280);
  }
  .docsortfile_heading2 .docsortfile_heading2_title {
    font-size: calc( 28 * 100vw / 1280);
  }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .docsortfile-hero_description img {
    width: 80%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .docsortfile-lead_inner::after {
    height: 60%;
  }
}
@media screen and (min-width: 768px) and (max-width: 900px) {
  .docsortfile-hero_description img {
    width: 70%;
  }
}
@media screen and (min-width: 768px) and (max-width: 850px) {
  .docsortfile-lead_inner::after {
    height: 50%;
  }
}
/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Override
  ------------------------------------------------------ */

  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- docsortfile-hero ----- */
  .docsortfile-hero_inner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .docsortfile-hero_description {
    background-color: #dfe0e1;
    padding: 13px 20px;
    text-align: center;
  }
  .docsortfile-hero_description img {
    width: 88%;
  }
  .docsortfile-hero_date {
    margin-top: 0.4em;
  }
  .docsortfile-hero_date,
  .docsortfile-hero_price {
    text-align: right;
    font-size: 1.6rem;
    line-height: 1.5;
  }
  /* ----- docsortfile-lead-layout ----- */
  .docsortfile-lead-layout {
    position: relative;
    margin-top: 1em;
  }
  .docsortfile-lead_inner {
    display: flex;
    padding: 10px 14px;
    min-height: 143px;
    background-color: #e8e8f3;
  }
  .docsortfile-lead-layout::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 23.7681159%;
    height: 62.9370629%;
    background: url('/sp/docsortfile/img/index_bg01.png') no-repeat 0 0 / contain;
    content: "";
  }
  .docsortfile-lead_inner > .docsortfile-lead {
    margin-top: .4em;
  }
  .docsortfile-lead {
    font-size: 1.4rem;
    font-weight: bold;
  }
  .docsortfile-lead--highlight {
    display: inline-block;
    background: linear-gradient(transparent 54%, #e3a406 0%);
    margin-top: 0.6em;
    padding-bottom: 4px;
    font-size: 2.0rem;
    font-weight: bold;
    text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff;
    line-height: 1.2;
  }
  /* ----- docsortfile-point-layout ----- */
  .docsortfile-point-layout {
    margin-top: 2.8em;
  }
  .docsortfile-point_item {
    border-top: 2px solid #1d2088;
  }
  .docsortfile-point_item:nth-of-type(n+2) {
    margin-top: 30px;
  }
  .docsortfile-point_item_head {
    display: flex;
    align-items: center;
    margin-top: .5em;
  }
  .docsortfile-point img {
    max-width: 45px;
    max-height: 45px;
  }
  .docsortfile-point_title {
    margin-left: 8px;
    color: #1d2088;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1.4;
  }
  .docsortfile-point_body {
    margin-top: .6em;
  }
  /* ----- docsortfile_heading2 ----- */
  .docsortfile_heading2 {
    margin-top: 2.5em;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
  }
  .docsortfile_heading2 .docsortfile_heading2_title {
    font-size: 2.0rem;
    font-weight: bold;
  }
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * SP Media Queries
====================================================== */
@media screen and (min-width: 500px) and (max-width: 767.9px) {
  .docsortfile-lead_inner {
    justify-content: center;
  }
}
@media screen and (min-width: 300px) and (max-width: 365px) {
  .docsortfile-lead-layout::after {
    width: 22%;
    height: 54%;
  }
}
@media only screen and (max-width: 330px) {
}

/* ======================================================
 * Print
====================================================== */
@media print {
}