@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
事業・サービス　共通
---------------------------------------------------------------------------------------------------------------------
*/
.service {
  position: relative;
  padding: 60px 0 90px;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    .service {
      padding: 80px 0 120px; } }
  @media screen and (min-width: 1200px) {
    .service {
      padding: 100px 0 100px; } }
  @media screen and (min-width: 768px) {
    .service.corp {
      overflow: visible; } }
  .service::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    height: 100%;
    mix-blend-mode: screen;
    z-index: -1; }
  .service__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 5%;
    position: relative; }
    .service__inner.corp {
      padding: 0 5%; }
      @media screen and (min-width: 768px) {
        .service__inner.corp {
          padding: 0 0 0 5%; } }
  .service__intro {
    position: relative;
    z-index: 2; }
    @media screen and (min-width: 768px) {
      .service__intro {
        width: 45%; } }
    @media screen and (min-width: 1200px) {
      .service__intro {
        width: 50%; } }
    .service__intro.corp {
      width: 100%; }
  .service__catch {
    font-size: 1.45em;
    font-weight: 600;
    line-height: 1.4em; }
    @media screen and (min-width: 768px) {
      .service__catch {
        font-size: 1.75em; } }
    @media screen and (min-width: 1200px) {
      .service__catch {
        font-size: 2.25em; } }
  .service__lead {
    font-size: 0.85em;
    text-align: justify;
    line-height: 2.0em;
    margin: 20px 0 0; }
    @media screen and (min-width: 768px) {
      .service__lead {
        font-size: 0.9em;
        margin-top: 30px; } }
    @media screen and (min-width: 1200px) {
      .service__lead {
        font-size: 1.0em;
        margin-top: 40px; } }
  .service__main-image {
    margin: 40px -20px 0 40px;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .service__main-image {
        margin: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%; } }
    @media screen and (min-width: 1200px) {
      .service__main-image {
        width: 40%; } }
    .service__main-image img {
      display: block;
      height: auto;
      object-fit: cover;
      width: 100%; }
      @media screen and (min-width: 1200px) {
        .service__main-image img {
          height: 100%; } }
  .service__brand {
    margin-top: 40px; }
    @media screen and (min-width: 768px) {
      .service__brand {
        margin-top: 120px; } }
    @media screen and (min-width: 1024px) {
      .service__brand {
        margin-top: 260px; } }
    @media screen and (min-width: 1200px) {
      .service__brand {
        margin-top: 60px; } }
  @media screen and (min-width: 1200px) {
    .service__brand-heading {
      max-width: 520px; } }
  .service__brand-en {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.0em;
    color: #223588;
    margin: 0 0 5px 0; }
    @media screen and (min-width: 768px) {
      .service__brand-en {
        font-size: 0.9em; } }
    @media screen and (min-width: 1200px) {
      .service__brand-en {
        font-size: 1.0em;
        margin: 0 0 10px 0; } }
  .service__brand-title {
    font-size: 1.75em;
    font-weight: 500;
    line-height: 1.4em;
    color: #223588;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .service__brand-title {
        font-size: 2em; } }
    @media screen and (min-width: 1200px) {
      .service__brand-title {
        font-size: 2.25em; } }
  .service__solutions {
    margin-top: 40px; }
    @media screen and (min-width: 768px) {
      .service__solutions {
        margin-top: 120px; } }

/*
---------------------------------------------------------------------------------------------------------------------
通信キャリアショップ運営
---------------------------------------------------------------------------------------------------------------------
*/
.brand-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 20px; }
  @media screen and (min-width: 768px) {
    .brand-list {
      gap: 60px;
      margin-top: 40px; } }
  @media screen and (min-width: 1200px) {
    .brand-list {
      gap: 80px;
      margin-top: 40px; } }

.brand-card {
  position: relative; }
  @media screen and (min-width: 1200px) {
    .brand-card {
      min-height: 180px; } }
  .brand-card__content {
    max-width: 500px;
    position: relative;
    z-index: 2; }
    @media screen and (min-width: 768px) {
      .brand-card__content {
        max-width: 60%; } }
    @media screen and (min-width: 1200px) {
      .brand-card__content {
        max-width: 440px; } }
  .brand-card__logo img {
    display: block;
    height: auto;
    max-width: 100%; }
  .brand-card__logo--style {
    width: 160px; }
    @media screen and (min-width: 768px) {
      .brand-card__logo--style {
        width: 220px; } }
    @media screen and (min-width: 1200px) {
      .brand-card__logo--style {
        width: 230px; } }
  .brand-card__logo--au {
    width: 70px; }
    @media screen and (min-width: 768px) {
      .brand-card__logo--au {
        width: 90px; } }
    @media screen and (min-width: 1200px) {
      .brand-card__logo--au {
        width: 96px; } }
  .brand-card__logo--uq {
    width: 180px; }
    @media screen and (min-width: 768px) {
      .brand-card__logo--uq {
        width: 200px; } }
    @media screen and (min-width: 1200px) {
      .brand-card__logo--uq {
        width: 210px; } }
  .brand-card__text {
    font-size: 0.85em;
    line-height: 2.0em;
    margin: 10px 0 0 0; }
    @media screen and (min-width: 768px) {
      .brand-card__text {
        font-size: 0.9em; } }
    @media screen and (min-width: 1200px) {
      .brand-card__text {
        font-size: 1.0em;
        margin: 20px 0 0 0; } }
  .brand-card .common-link {
    margin-top: 15px; }
    @media screen and (min-width: 768px) {
      .brand-card .common-link {
        margin-top: 20px; } }
    @media screen and (min-width: 1200px) {
      .brand-card .common-link {
        margin-top: 30px; } }
  .brand-card__image {
    margin-top: 40px;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .brand-card__image {
        margin-left: auto; } }
    .brand-card__image img {
      display: block;
      object-fit: cover; }
    .brand-card__image--small {
      margin-left: 25%; }
      @media screen and (min-width: 768px) {
        .brand-card__image--small {
          position: absolute;
          right: 0;
          top: -70%;
          margin: 0;
          width: 200px;
          height: 200px; } }
      @media screen and (min-width: 1200px) {
        .brand-card__image--small {
          width: 280px;
          height: 280px; } }
    .brand-card__image--large {
      position: relative;
      left: -6%; }
      @media screen and (min-width: 768px) {
        .brand-card__image--large {
          position: absolute;
          top: -30%;
          right: 0;
          left: inherit;
          width: 260px;
          margin: 0; } }
      @media screen and (min-width: 1200px) {
        .brand-card__image--large {
          right: 5%;
          width: 400px; } }
  @media screen and (min-width: 1200px) {
    .brand-card--au {
      min-height: 220px; } }
  @media screen and (min-width: 1200px) {
    .brand-card--uq {
      min-height: 330px;
      padding-top: 20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
法人のお客様　代理店様支援
---------------------------------------------------------------------------------------------------------------------
*/
.solution-contents {
  position: relative; }
  @media screen and (min-width: 768px) {
    .solution-contents {
      display: grid;
      grid-template-columns: 45% 1fr;
      gap: 5%; } }
  @media screen and (min-width: 1200px) {
    .solution-contents {
      grid-template-columns: 50% 1fr;
      gap: 10%; } }
  .solution-contents .solution-L .photo-sp {
    position: relative;
    margin: 40px -20px 0 40px; }
    @media screen and (min-width: 768px) {
      .solution-contents .solution-L .photo-sp {
        display: none; } }
  .solution-contents .solution-R {
    display: none; }
    @media screen and (min-width: 768px) {
      .solution-contents .solution-R {
        display: block; } }
    .solution-contents .solution-R .photo {
      position: sticky;
      top: 100px; }
      .solution-contents .solution-R .photo .photo-in {
        position: relative;
        right: -6%; }

.solution-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px; }
  @media screen and (min-width: 768px) {
    .solution-list {
      gap: 60px; } }
  @media screen and (min-width: 1200px) {
    .solution-list {
      gap: 80px;
      margin-top: 60px; } }

.solution-card__heading {
  align-items: center;
  border-bottom: 1px solid #223588;
  display: flex;
  gap: 10px;
  padding-bottom: 14px; }
  @media screen and (min-width: 768px) {
    .solution-card__heading {
      gap: 20px;
      padding-bottom: 16px; } }
.solution-card__icon {
  flex-shrink: 0;
  height: 36px;
  width: 36px; }
  @media screen and (min-width: 768px) {
    .solution-card__icon {
      height: 42px;
      width: 42px; } }
  .solution-card__icon img {
    display: block;
    object-fit: contain; }
.solution-card__title {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.4em;
  color: #223588; }
  @media screen and (min-width: 768px) {
    .solution-card__title {
      font-size: 1.25em; } }
  @media screen and (min-width: 1200px) {
    .solution-card__title {
      font-size: 1.375em; } }
.solution-card__text {
  font-size: 0.85em;
  line-height: 2.0em;
  margin: 10px 0 0 0; }
  @media screen and (min-width: 768px) {
    .solution-card__text {
      font-size: 0.9em; } }
  @media screen and (min-width: 1200px) {
    .solution-card__text {
      font-size: 1.0em;
      margin: 20px 0 0 0; } }
.solution-card__service {
  margin-top: 18px; }
  @media screen and (min-width: 768px) {
    .solution-card__service {
      margin-top: 22px; } }
.solution-card__service-label {
  font-size: 0.85em;
  font-weight: 500;
  color: #223588; }
  @media screen and (min-width: 768px) {
    .solution-card__service-label {
      font-size: 1.0em; } }
.solution-card__service-logos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 8px; }
  @media screen and (min-width: 768px) {
    .solution-card__service-logos {
      gap: 20px; } }
  .solution-card__service-logos img {
    display: block;
    height: 18px;
    object-fit: contain;
    width: auto; }
    @media screen and (min-width: 768px) {
      .solution-card__service-logos img {
        height: 22px; } }

/*
---------------------------------------------------------------------------------------------------------------------
お問い合わせ
---------------------------------------------------------------------------------------------------------------------
*/
.contact {
  background-color: #223588;
  border-radius: 10px;
  color: #fff;
  margin: 100px auto 0;
  width: 85%;
  padding: 30px 20px; }
  @media screen and (min-width: 768px) {
    .contact {
      margin-top: 140px;
      padding: 40px; } }
  @media screen and (min-width: 1200px) {
    .contact {
      margin: 180px auto 0;
      max-width: 1100px;
      padding: 80px;
      border-radius: 20px; } }
  .contact__heading-en {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.0em;
    margin: 0 0 5px 0; }
    @media screen and (min-width: 768px) {
      .contact__heading-en {
        font-size: 0.9em; } }
    @media screen and (min-width: 1200px) {
      .contact__heading-en {
        font-size: 1.0em;
        margin: 0 0 10px 0; } }
  .contact__heading-ja {
    font-size: 1.125em;
    font-weight: 500;
    line-height: 1.4em; }
    @media screen and (min-width: 768px) {
      .contact__heading-ja {
        font-size: 1.25em; } }
    @media screen and (min-width: 1200px) {
      .contact__heading-ja {
        font-size: 1.375em; } }
  .contact__links {
    display: grid;
    gap: 15px;
    margin-top: 20px; }
    @media screen and (min-width: 768px) {
      .contact__links {
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 40px; } }
  .contact__link {
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px 30px 20px;
    color: #223588;
    transition: transform 0.3s ease; }
    @media screen and (min-width: 768px) {
      .contact__link {
        border-radius: 15px;
        padding: 40px 40px 30px; } }
    .contact__link:hover {
      transform: translateY(-4px); }
      .contact__link:hover .contact__arrow {
        background-color: #223588;
        color: #fff; }
    .contact__link--phone {
      cursor: default; }
      .contact__link--phone:hover {
        transform: none; }
  .contact__link-title {
    font-size: 1.0em;
    font-weight: 600;
    line-height: 1.4em;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .contact__link-title {
        font-size: 1.25em; } }
    @media screen and (min-width: 1200px) {
      .contact__link-title {
        font-size: 1.375em; } }
  .contact__link-bottom {
    font-size: 0.85em;
    border-top: 1px solid #223588;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px; }
    @media screen and (min-width: 768px) {
      .contact__link-bottom {
        font-size: 1.0em;
        margin-top: 30px;
        padding-top: 15px; } }
    .contact__link-bottom--phone {
      align-items: center;
      flex-direction: column;
      gap: 8px; }
      @media screen and (min-width: 768px) {
        .contact__link-bottom--phone {
          gap: 10px; } }
      @media screen and (min-width: 1200px) {
        .contact__link-bottom--phone {
          flex-direction: row;
          gap: 18px;
          justify-content: center; } }
  .contact__arrow {
    align-items: center;
    border: 1px solid #223588;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    font-size: 1em;
    height: 24px;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 24px; }
    @media screen and (min-width: 768px) {
      .contact__arrow {
        height: 28px;
        width: 28px; } }
  .contact__phone {
    background-color: #fff;
    border-radius: 10px;
    color: #223588;
    margin-top: 18px;
    padding: 30px 30px; }
    @media screen and (min-width: 768px) {
      .contact__phone {
        border-radius: 15px;
        margin-top: 20px;
        padding: 40px 40px; } }
  .contact__phone-title {
    font-size: 1.125em;
    font-weight: 600;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .contact__phone-title {
        font-size: 1.375em; } }
  .contact__phone-list {
    display: grid;
    gap: 20px;
    margin-top: 30px; }
    @media screen and (min-width: 768px) {
      .contact__phone-list {
        gap: 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 34px; } }
  .contact__phone-item {
    text-align: center; }
  .contact__phone-area {
    border-bottom: 1px solid #223588;
    font-size: 0.85em;
    font-weight: 500;
    padding-bottom: 10px; }
    @media screen and (min-width: 768px) {
      .contact__phone-area {
        font-size: 1.0em; } }
  .contact__phone-number {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.75em;
    font-weight: 600;
    line-height: 1.0em;
    align-items: center;
    color: #223588;
    display: inline-flex;
    gap: 8px;
    margin-top: 10px; }
    @media screen and (min-width: 768px) {
      .contact__phone-number {
        font-size: 2.0em;
        gap: 10px; } }
    @media screen and (min-width: 1200px) {
      .contact__phone-number {
        margin-top: 20px; } }
    .contact__phone-number img {
      display: block;
      height: auto;
      width: 20px; }
      @media screen and (min-width: 768px) {
        .contact__phone-number img {
          width: 24px; } }
      @media screen and (min-width: 1200px) {
        .contact__phone-number img {
          width: 26px; } }
    .contact__phone-number.agent {
      margin-top: 0; }
  .contact__phone-hours {
    font-size: 0.85em;
    line-height: 1.2em;
    margin: 4px 0 0 0;
    white-space: nowrap; }
    @media screen and (min-width: 768px) {
      .contact__phone-hours {
        font-size: 0.85em; } }
    @media screen and (min-width: 1200px) {
      .contact__phone-hours {
        font-size: 0.9em; } }