@charset "utf-8";

/* ======================================================
 * tile.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
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  .tile-hero-compo,
  .tile-app-compo,
  .tile-app-compo-v2,
  .tile-feature-compo,
  .tile-spec-compo .spec_heading {
    font-family: "Noto Sans", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- tile-img-covered ---- */
  .tile-img-covered {
    position: relative;
  }
  .tile-img-covered::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(/sp/tile/img/spacer.gif);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    content: "";
  }
  
  /* ----- tile-hero-compo ---- */
  .tile-hero-compo {
    position: relative;
  }
  .tile-hero-compo .hero_title {
    position: absolute;
    top: 10.1%;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 0 5%;
    text-align: center;
  }
  .tile-hero-compo .hero_lead_1 {
    position: absolute;
    top: 34.3%;
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 0 5%;
    color: #5c6167;
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
  }
  .tile-hero-compo .hero_lead_2 {
    position: absolute;
    top: 50.6%;
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 0 5%;
    color: #0a6463;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
  }
  .tile-hero-compo .hero_lead_3 {
    position: absolute;
    top: 59.0%;
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 0 5%;
    color: #5c6268;
    font-size: 2.2rem;
    line-height: 1.5;
    text-align: center;
  }
  .tile-hero-compo .hero_release {
    position: absolute;
    top: 3.3%;
    right: 20px;
    z-index: 2;
    color: #5c6268;
    font-size: 1.8rem;
  }
  
  /* ----- tile-app-compo ---- */
  .tile-app-compo {
    margin-top: .5em;
  }
  .tile-app-compo .app_guide {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-app-compo .app_guide > .app_guide_image {
    width: 80px;
    margin-right: 20px;
  }
  .tile-app-compo .app_guide > .app_guide_caption {
  }
  .tile-app-compo .app_guide .app_guide_index > dt {
    margin: 0 0 .5em 0;
    color: #222;
    font-size: 2.0rem;
    line-height: 1.5;
    text-align: center;
  }
  .tile-app-compo .app_guide .app_guide_banner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-app-compo .app_guide .app_guide_banner > li {
    width: 145px;
  }
  .tile-app-compo .app_guide .app_guide_banner > li + li {
    margin-left: 8px;
  }
  /* v2 */
  .tile-app-compo-v2 {
    margin-top: 6.25em;
  }
  .tile-app-compo-v2 > .app_media {
  }
  .tile-app-compo-v2 > .app_media > .app_heading,
  .tile-app-compo-v2 > .app_media > .app_image,
  .tile-app-compo-v2 > .app_media > .app_detail {
    width: calc((100% - 40px) / 2);
  }
  .tile-app-compo-v2 > .app_media > .app_heading,
  .tile-app-compo-v2 > .app_media > .app_image,
  .tile-app-compo-v2 > .app_media > .app_detail {
    float: left;
  }
  .tile-app-compo-v2 > .app_media > .app_image {
    float: right;
  }
  .tile-app-compo-v2 > .app_media > [class*="app_"] > *:first-child,
  .tile-app-compo-v2 > .app_media > [class*="app_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-app-compo-v2 > .app_media > .app_heading {
    padding: 70px 40px 0;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_title {
    color: #006666;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide {
    margin-top: 2em;
    text-align: center;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide > dt {
    display: inline-block;
    margin: 0 0 2.5em 0;
    text-align: center;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide > dt img {
    width: 115px;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide > dd {
    font-size: 1.8rem;
    text-align: left;
  }
  .tile-app-compo-v2 > .app_media > .app_detail {
    margin-top: 1.5em;
    padding: 0 40px;
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner > li {
    width: calc((100% - 14px) / 2);
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner > li + li {
    margin-left: 14px;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note {
    margin-top: 1.5em;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note .link-inline {
    text-decoration: underline;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note .link-inline:hover {
    text-decoration: none;
  }
  
  /* ----- tile-feature-compo ---- */
  .tile-feature-compo {
    margin-top: 3em;
    padding-top: 30px;
    border-top: 1px solid #ddd;
  }
  .tile-feature-compo > .feature_media {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-feature-compo > .feature_media[data-media="left"] {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .tile-feature-compo > .feature_media + .feature_media {
    margin-top: 6.25em;
  }
  .tile-feature-compo > .feature_media > .feature_text,
  .tile-feature-compo > .feature_media > .feature_image {
    width: calc((100% - 40px) / 2);
  }
  .tile-feature-compo > .feature_media[data-media="right"] > .feature_text + .feature_image {
    margin-left: 40px;
  }
  .tile-feature-compo > .feature_media[data-media="left"] > .feature_text + .feature_image {
    margin-right: 40px;
  }
  .tile-feature-compo > .feature_media > [class*="feature_"] > *:first-child,
  .tile-feature-compo > .feature_media > [class*="feature_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon {
    margin-right: 18px;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon.i-2 {
    margin-right: 30px;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_label {
    -webkit-flex: 1;
    flex: 1;
    color: #006666;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_lead {
    margin-top: 1em;
    font-size: 1.8rem;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_lead > .is-highlight {
    font-size: 111.11%;
    font-weight: 700;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_lead + .list-note {
    margin-top: .5em;
  }
  
  /* ----- tile-spec-compo ---- */
  .tile-spec-compo {
    margin-top: 3em;
  }
  .tile-spec-compo > .spec_media + .spec_media {
    margin-top: 6.25em;
  }
  .tile-spec-compo > .spec_media > .spec_heading,
  .tile-spec-compo > .spec_media > .spec_image,
  .tile-spec-compo > .spec_media > .spec_detail {
    width: calc((100% - 40px) / 2);
  }
  .tile-spec-compo > .spec_media > .spec_heading,
  .tile-spec-compo > .spec_media > .spec_detail {
    float: left;
  }
  .tile-spec-compo > .spec_media > .spec_image {
    float: right;
  }
  .tile-spec-compo > .spec_media > [class*="spec_"] > *:first-child,
  .tile-spec-compo > .spec_media > [class*="spec_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-spec-compo > .spec_media > .spec_heading .spec_heading_subtitle {
    margin: 0 0 .25em 0;
    color: #ff6600;
    font-weight: 700;
    line-height: 1.5;
  }
  .tile-spec-compo > .spec_media > .spec_heading .spec_heading_title {
    color: #000;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .tile-spec-compo > .spec_media > .spec_image .image-set {
    margin-top: 1.5em;
  }
  .tile-spec-compo > .spec_media > .spec_detail {
    margin-top: 1.5em;
  }
  .tile-spec-compo > .spec_media > .spec_detail .table-layout th,
  .tile-spec-compo > .spec_media > .spec_detail .table-layout td {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .tile-spec-compo > .spec_media::after,
  .tile-app-compo-v2 > .app_media::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 1921px) {
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .tile-hero-compo .hero_title img {
    width: 140px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (min-width: 768px) and (max-width: 960px) {
  .tile-hero-compo .hero_title img {
    width: 120px;
  }
  .tile-hero-compo .hero_lead_3 {
    top: 61%;
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 812px) {
  .tile-hero-compo .hero_title img {
    width: 100px;
  }
}


/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Common
  ------------------------------------------------------ */
  .tile-hero-compo,
  .tile-app-compo,
  .tile-app-compo-v2,
  .tile-feature-compo,
  .tile-spec-compo .spec_heading {
    font-family: "Noto Sans", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* ----- tile-img-covered ---- */
  .tile-img-covered {
    position: relative;
  }
  .tile-img-covered::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(/sp/tile/img/spacer.gif);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 100% 100%;
    content: "";
  }
  
  /* ----- tile-hero-compo ---- */
  .tile-hero-compo {
    position: relative;
    margin: 0 -15px;
    padding: 0 15px;
  }
  .tile-hero-compo .hero_title {
    position: absolute;
    top: 19.3%;
    left: 15px;
    z-index: 2;
  }
  .tile-hero-compo .hero_title img {
    width: 83px;
  }
  .tile-hero-compo .hero_lead_1 {
    position: absolute;
    top: 37.5%;
    left: 15px;
    z-index: 3;
    color: #5c6167;
    font-size: 1.5rem;
    font-weight: 700;
  }
  .tile-hero-compo .hero_lead_2 {
    position: absolute;
    top: 48.4%;
    left: 15px;
    z-index: 3;
    color: #0a6463;
    font-weight: 700;
  }
  .tile-hero-compo .hero_lead_3 {
    position: absolute;
    top: 55.9%;
    left: 15px;
    z-index: 3;
    color: #5c6268;
    line-height: 1.5;
  }
  .tile-hero-compo .hero_release {
    position: absolute;
    top: 74.3%;
    left: 15px;
    z-index: 2;
    color: #5c6268;
    font-size: 1.2rem;
  }
  .tile-hero-compo .hero_visual {
    margin: 0 -15px;
  }
  
  /* ----- tile-app-compo ---- */
  .tile-app-compo {
    margin-top: 2em;
  }
  .tile-app-compo .app_guide {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 15px;
  }
  .tile-app-compo .app_guide > .app_guide_image {
    width: 75px;
    margin-right: 18px;
  }
  .tile-app-compo .app_guide > .app_guide_caption {
    -webkit-flex: 1;
    flex: 1;
  }
  .tile-app-compo .app_guide .app_guide_index > dt {
    margin: 0 0 .5em 0;
    color: #222;
    font-size: 2.0rem;
    line-height: 1.5;
    text-align: center;
  }
  .tile-app-compo .app_guide .app_guide_banner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-app-compo .app_guide .app_guide_banner > li {
    width: calc((100% - 10px) / 2);
  }
  .tile-app-compo .app_guide .app_guide_banner > li + li {
    margin-left: 10px;
  }
  /* v2 */
  .tile-app-compo-v2 {
    margin-top: 3em;
  }
  .tile-app-compo-v2 > .app_media {
  }
  .tile-app-compo-v2 > .app_media > [class*="app_"] > *:first-child,
  .tile-app-compo-v2 > .app_media > [class*="app_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-app-compo-v2 > .app_media > .app_heading {
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_title {
    color: #006666;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 1.25em;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide > dt {
    width: 98px;
    margin-right: 15px;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_guide > dd {
    -webkit-flex: 1;
    flex: 1;
  }
  .tile-app-compo-v2 > .app_media > .app_image {
    margin-top: 1.5em;
  }
  .tile-app-compo-v2 > .app_media > .app_detail {
    margin-top: 1.5em;
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner > li {
    width: calc((100% - 15px) / 2);
  }
  .tile-app-compo-v2 > .app_media > .app_detail > .app_banner > li + li {
    margin-left: 15px;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note {
    margin-top: 2.5em;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note > li {
    font-size: 1.4rem;
  }
  .tile-app-compo-v2 > .app_media > .app_detail .list-note .link-inline {
    text-decoration: underline;
  }
  
  /* ----- tile-feature-compo ---- */
  .tile-feature-compo {
    margin: 2em -15px 0;
    padding-top: 45px;
    border-top: 1px solid #ddd;
  }
  .tile-feature-compo > .feature_media {
    padding: 0 15px;
  }
  .tile-feature-compo > .feature_media + .feature_media {
    margin-top: 3.5em;
  }
  .tile-feature-compo > .feature_media > .feature_image {
    margin-top: 1.5em;
  }
  .tile-feature-compo > .feature_media > [class*="feature_"] > *:first-child,
  .tile-feature-compo > .feature_media > [class*="feature_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon {
    margin-right: 15px;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon.i-1 { width: 28px; }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon.i-2 { width: 15px; }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon.i-3 { width: 17px; }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_icon.i-4 { width: 25px; }
  .tile-feature-compo > .feature_media > .feature_text .feature_title .feature_title_label {
    -webkit-flex: 1;
    flex: 1;
    color: #006666;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_lead {
    margin-top: 1em;
  }
  .tile-feature-compo > .feature_media > .feature_text .feature_lead > .is-highlight {
    font-size: 107.14%;
    font-weight: 700;
  }
  .tile-feature-compo > .feature_media > .feature_text .list-note {
    font-size: 1.2rem;
  }
  
  /* ----- tile-spec-compo ---- */
  .tile-spec-compo {
    margin-top: 2.5em;
  }
  .tile-spec-compo > .spec_media + .spec_media {
    margin-top: 2.5em;
  }
  .tile-spec-compo > .spec_media > [class*="spec_"] > *:first-child,
  .tile-spec-compo > .spec_media > [class*="spec_"] > *:first-child > [class*="heading-lv"] {
    margin-top: 0 !important;
  }
  .tile-spec-compo > .spec_media > .spec_heading .spec_heading_subtitle {
    margin: 0 0 .25em 0;
    color: #ff6600;
    font-weight: 700;
    line-height: 1.5;
  }
  .tile-spec-compo > .spec_media > .spec_heading .spec_heading_title {
    color: #000;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .tile-spec-compo > .spec_media > .spec_image {
    margin-top: 1.5em;
  }
  .tile-spec-compo > .spec_media > .spec_image .image-set {
    margin-top: 1em;
  }
  .tile-spec-compo > .spec_media > .spec_detail {
    margin-top: 1.25em;
  }
  
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}


/* ======================================================
 * SP Media Queries
====================================================== */
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
  .tile-hero-compo .hero_title {
    top: 18%;
  }
  .tile-hero-compo .hero_lead_3 {
    font-size: 1.3rem;
  }
  .tile-app-compo .app_guide .app_guide_index > dt {
    font-size: 1.8rem;
  }
  .tile-app-compo-v2 > .app_media > .app_heading > .app_heading_title {
    font-size: 2.4rem;
  }
}


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