@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#mv {
  background-color: #DDF3FB;
  width: 100%;
  height: 100vh;
  max-height: 800px;
  position: relative; }
  #mv .MVin {
    max-width: 1300px;
    width: 90%;
    margin: auto;
    display: flex;
    position: relative;
    height: 100%; }
    #mv .MVin .MvTitle {
      margin: 100px 0 0 0;
      z-index: 10; }
      #mv .MVin .MvTitle .MainCopy h1 {
        font-size: 7vw;
        line-height: 1.4em;
        color: #4B4948; }
        @media (min-width: 1024px) {
          #mv .MVin .MvTitle .MainCopy h1 {
            font-size: 3.75em; } }
      #mv .MVin .MvTitle .MainCopy h2 {
        font-size: 8.5vw;
        font-weight: 900;
        line-height: 1.4em;
        color: #0077C8; }
        @media (min-width: 1024px) {
          #mv .MVin .MvTitle .MainCopy h2 {
            font-size: 5.5em; } }
      #mv .MVin .MvTitle .SabCopy {
        margin-top: 20px; }
        @media (min-width: 768px) {
          #mv .MVin .MvTitle .SabCopy {
            margin-top: 20px; } }
        #mv .MVin .MvTitle .SabCopy h2 {
          font-size: 1.8em;
          font-weight: 700;
          line-height: 1.4em;
          color: #4B4948;
          letter-spacing: 0.05em; }
          #mv .MVin .MvTitle .SabCopy h2 .Small {
            font-size: 0.8em;
            font-weight: 400;
            margin: 0 5px;
            letter-spacing: 0.0em; }
          @media (min-width: 768px) {
            #mv .MVin .MvTitle .SabCopy h2 {
              font-size: 3.0em; } }
          @media (min-width: 1024px) {
            #mv .MVin .MvTitle .SabCopy h2 {
              font-size: 3.75em; } }
        #mv .MVin .MvTitle .SabCopy h3 {
          font-size: 2em;
          font-weight: 500;
          font-feature-settings: "palt";
          line-height: 1.4em;
          letter-spacing: 0.05em;
          color: #FA0000;
          margin-top: 10px; }
          #mv .MVin .MvTitle .SabCopy h3 .Large {
            font-size: 1.2em;
            font-weight: 700; }
          @media (min-width: 768px) {
            #mv .MVin .MvTitle .SabCopy h3 {
              font-size: 3.0em; } }
          @media (min-width: 1024px) {
            #mv .MVin .MvTitle .SabCopy h3 {
              font-size: 3.75em; } }
      #mv .MVin .MvTitle #speech {
        opacity: 0; }
        #mv .MVin .MvTitle #speech .speech-sp {
          width: 65%;
          height: auto;
          animation: wobbling_x1 0.8s ease-in-out infinite alternate, wobbling_y1 1.1s ease-in-out infinite alternate; }
          #mv .MVin .MvTitle #speech .speech-sp img {
            margin: 0 0 0 -18px; }
          @media (min-width: 768px) {
            #mv .MVin .MvTitle #speech .speech-sp {
              display: none; } }
        #mv .MVin .MvTitle #speech .speech-pc {
          display: none; }
          @media (min-width: 768px) {
            #mv .MVin .MvTitle #speech .speech-pc {
              display: block;
              width: 60%;
              height: auto;
              margin: -20px 0 0 -40px;
              animation: wobbling_x1 0.8s ease-in-out infinite alternate, wobbling_y1 1.1s ease-in-out infinite alternate; } }
@keyframes wobbling_x1 {
  0% {
    margin-left: 4px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y1 {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: 4px; } }
      #mv .MVin .MvTitle .speech-display {
        animation: fadeIn 0.5s linear;
        animation-fill-mode: both; }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    #mv .MVin .PhonePh {
      font-size: 0;
      position: absolute;
      bottom: -11.5px;
      right: -5%;
      z-index: 8;
      width: 70%; }
      @media (min-width: 768px) {
        #mv .MVin .PhonePh {
          width: 50%;
          right: -3%; } }
      @media (min-width: 1024px) {
        #mv .MVin .PhonePh {
          width: 40%; } }
      #mv .MVin .PhonePh img {
        font-size: 0; }
  #mv .Back {
    position: absolute;
    bottom: -10px;
    width: 100%;
    font-size: 0;
    overflow: hidden; }
    #mv .Back img {
      width: 180%; }
      @media (min-width: 768px) {
        #mv .Back img {
          width: 100%; } }

/*
---------------------------------------------------------------------------------------------------------------------
法人さま限定　特別価格でお見積もり！
---------------------------------------------------------------------------------------------------------------------
*/
#Introduction {
  background-color: #0077C8;
  padding: 30px 0 60px; }
  @media (min-width: 1024px) {
    #Introduction {
      padding: 60px 0 120px; } }
  #Introduction .Title {
    text-align: center;
    margin-bottom: 40px; }
    @media (min-width: 1024px) {
      #Introduction .Title {
        margin-bottom: 100px; } }
    #Introduction .Title h2 {
      font-size: 1.8em;
      color: #fff;
      font-feature-settings: "palt";
      letter-spacing: 0.08em; }
      @media (min-width: 768px) {
        #Introduction .Title h2 {
          font-size: 2.4em; } }
      @media (min-width: 1024px) {
        #Introduction .Title h2 {
          font-size: 3.75em; } }
      #Introduction .Title h2:nth-child(2) {
        margin-top: 0px; }
        @media (min-width: 1024px) {
          #Introduction .Title h2:nth-child(2) {
            margin-top: 20px; } }
  #Introduction .Price {
    background-color: #effaff;
    max-width: 1200px;
    width: 90%;
    margin: 50px auto 0;
    border-radius: 20px; }
    #Introduction .Price.Price1 {
      padding: 0px 20px; }
      @media (min-width: 1024px) {
        #Introduction .Price.Price1 {
          padding: 0px 40px; } }
    #Introduction .Price.Price2 {
      padding: 50px 20px; }
      @media (min-width: 1024px) {
        #Introduction .Price.Price2 {
          padding: 100px 40px; } }
    @media (min-width: 768px) {
      #Introduction .Price .PriceIn {
        display: flex; } }
    #Introduction .Price .PriceIn .IntroductionPrice {
      padding: 5% 0; }
      @media (min-width: 768px) {
        #Introduction .Price .PriceIn .IntroductionPrice {
          width: 55%;
          padding: 5% 0 5% 5%; } }
      #Introduction .Price .PriceIn .IntroductionPrice .slideAnimeUpDown {
        width: 100%; }
      #Introduction .Price .PriceIn .IntroductionPrice .slideAnimeDownUp {
        width: 100%; }
    #Introduction .Price .PriceIn .PriceImg {
      width: 50%;
      margin: auto;
      padding: 10% 0 0 0; }
      @media (min-width: 768px) {
        #Introduction .Price .PriceIn .PriceImg {
          width: 35%;
          padding: 5% 2% 0% 5%; } }
      @media (min-width: 1024px) {
        #Introduction .Price .PriceIn .PriceImg {
          display: flex;
          align-items: center;
          padding: 3% 5% 0% 5%; } }
    #Introduction .Price .SpecialPrice {
      text-align: center; }
      #Introduction .Price .SpecialPrice .sp {
        margin-bottom: 30px; }
        @media (min-width: 1024px) {
          #Introduction .Price .SpecialPrice .sp {
            display: none; } }
      #Introduction .Price .SpecialPrice h2 {
        font-size: 2em;
        color: #4B4948;
        margin-bottom: 30px; }
        #Introduction .Price .SpecialPrice h2.pc {
          display: none; }
        @media (min-width: 768px) {
          #Introduction .Price .SpecialPrice h2 {
            font-size: 2.4em;
            margin-bottom: 60px;
            display: block; } }
        @media (min-width: 1024px) {
          #Introduction .Price .SpecialPrice h2 {
            font-size: 3.75em; } }
      #Introduction .Price .SpecialPrice h3 {
        font-size: 1.6em;
        font-weight: 700;
        line-height: 1.4em;
        color: #0079CE;
        margin-bottom: 20px; }
        @media (min-width: 768px) {
          #Introduction .Price .SpecialPrice h3 {
            font-size: 2.0em; } }
        @media (min-width: 1024px) {
          #Introduction .Price .SpecialPrice h3 {
            font-size: 2.6em; } }
      #Introduction .Price .SpecialPrice img {
        width: 80%;
        height: auto;
        margin-top: 60px; }
      #Introduction .Price .SpecialPrice p {
        font-size: 2.75em;
        font-weight: 700;
        color: #0079CE; }
        @media (min-width: 1024px) {
          #Introduction .Price .SpecialPrice p {
            font-size: 3.75em; } }
      #Introduction .Price .SpecialPrice .Text3 {
        margin: 20px 0 40px; }
      #Introduction .Price .SpecialPrice .Text4 {
        margin: 40px auto 60px;
        max-width: 800px;
        width: 90%;
        padding: 10px 20px; }
        @media (min-width: 768px) {
          #Introduction .Price .SpecialPrice .Text4 {
            padding: 20px; } }
        #Introduction .Price .SpecialPrice .Text4 h4 {
          font-size: 1.125em;
          font-weight: 700;
          text-align: justify;
          line-height: 1.6em;
          color: #FF0000; }
          @media (min-width: 768px) {
            #Introduction .Price .SpecialPrice .Text4 h4 {
              font-size: 1.6em; } }
          @media (min-width: 1024px) {
            #Introduction .Price .SpecialPrice .Text4 h4 {
              font-size: 2.0em; } }
      #Introduction .Price .SpecialPrice .Btn3 {
        display: flex;
        justify-content: center; }

@media (min-width: 768px) {
  .Swiper01 .card01, .Swiper01 .card01b {
    /* スライダー非活性時 */ }
    .Swiper01 .card01 .swiper:not(.swiper-initialized), .Swiper01 .card01b .swiper:not(.swiper-initialized) {
      padding: 0; }
      .Swiper01 .card01 .swiper:not(.swiper-initialized) .swiper-button-prev,
      .Swiper01 .card01 .swiper:not(.swiper-initialized) .swiper-button-next, .Swiper01 .card01b .swiper:not(.swiper-initialized) .swiper-button-prev,
      .Swiper01 .card01b .swiper:not(.swiper-initialized) .swiper-button-next {
        display: none; }
      .Swiper01 .card01 .swiper:not(.swiper-initialized) .swiper-wrapper, .Swiper01 .card01b .swiper:not(.swiper-initialized) .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 00px; } }
.Swiper01 .card01, .Swiper01 .card01b {
  position: relative; }
  .Swiper01 .card01 .swiper-area, .Swiper01 .card01b .swiper-area {
    overflow: hidden;
    max-width: 1200px;
    width: 100%; }
    @media (min-width: 768px) {
      .Swiper01 .card01 .swiper-area, .Swiper01 .card01b .swiper-area {
        width: 95%; } }
  .Swiper01 .card01 .swiper-pagination, .Swiper01 .card01b .swiper-pagination {
    left: 0;
    right: 0; }
  .Swiper01 .card01 .swiper-pagination-bullet, .Swiper01 .card01b .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 20px;
    margin: 0 5px; }
  .Swiper01 .card01 .swiper-pagination-bullet, .Swiper01 .card01b .swiper-pagination-bullet {
    opacity: 0.3; }
  .Swiper01 .card01 .swiper-pagination-bullet-active, .Swiper01 .card01b .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #111; }
.Swiper01 .card01 .swiper-pagination {
  bottom: -10px; }
.Swiper01 .card01b .swiper-pagination {
  bottom: -10px; }

/*
---------------------------------------------------------------------------------------------------------------------
法人携帯を導入する　６つのメリット
---------------------------------------------------------------------------------------------------------------------
*/
#Merit6 {
  background-color: #FF9200;
  padding-bottom: 60px; }
  #Merit6 .Title {
    background-color: #fff;
    width: 100%; }
  #Merit6 .san_box {
    background: #fff;
    position: relative;
    margin: 0 0 60px; }
    #Merit6 .san_box:after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 80px 50vw 0 50vw;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0; }
    #Merit6 .san_box .san_in {
      text-align: center;
      padding: 40px 0 0; }
      #Merit6 .san_box .san_in h2 {
        font-size: 2.0em;
        line-height: 1.4em; }
        @media (min-width: 1024px) {
          #Merit6 .san_box .san_in h2 {
            font-size: 2.5em; } }
      #Merit6 .san_box .san_in h3 {
        font-size: 2.0em;
        line-height: 0.8em;
        display: flex;
        justify-content: center;
        margin-top: 30px;
        font-weight: 700; }
        @media (min-width: 1024px) {
          #Merit6 .san_box .san_in h3 {
            font-size: 4.0em;
            margin-top: 60px; } }
        #Merit6 .san_box .san_in h3 .Border {
          display: flex; }
        #Merit6 .san_box .san_in h3 .No {
          font-size: 2.0em;
          margin-top: -14px; }
          @media (min-width: 1024px) {
            #Merit6 .san_box .san_in h3 .No {
              margin-top: -25px; } }
      #Merit6 .san_box .san_in .san_t_b {
        color: #ffffff;
        font-size: 24px;
        font-weight: bold;
        margin: 0; }
  #Merit6 .swiper-area {
    margin: 100px auto 0; }
  #Merit6 .MeritBox {
    background-color: #fff;
    padding: 10px;
    margin: 0 auto 20px;
    position: relative;
    border-radius: 20px;
    height: 300px;
    width: 90%; }
    @media (min-width: 768px) {
      #Merit6 .MeritBox {
        width: 95%; } }
    @media (min-width: 1024px) {
      #Merit6 .MeritBox {
        height: 450px; } }
    @media (min-width: 1250px) {
      #Merit6 .MeritBox {
        height: 450px;
        margin: 0 auto 40px; } }
    #Merit6 .MeritBox .No {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 100px 100px 0 0;
      border-color: #FFD200 transparent transparent transparent;
      border-top-left-radius: 20px; }
      @media (min-width: 1024px) {
        #Merit6 .MeritBox .No {
          border-width: 130px 130px 0 0; } }
    #Merit6 .MeritBox .suuji {
      font-size: 2.5em;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      position: absolute;
      top: 10px;
      left: 5px;
      line-height: 1.0em; }
      @media (min-width: 1024px) {
        #Merit6 .MeritBox .suuji {
          font-size: 3.2em; } }
    #Merit6 .MeritBox .Icon {
      background-color: #FFE9C7;
      text-align: center;
      padding: 10px;
      border-radius: 10px; }
      #Merit6 .MeritBox .Icon img {
        width: 30%;
        height: auto; }
        @media (min-width: 1024px) {
          #Merit6 .MeritBox .Icon img {
            width: 40%; } }
    #Merit6 .MeritBox .Text {
      text-align: center;
      line-height: 1.4em;
      padding: 10px; }
      @media (min-width: 768px) {
        #Merit6 .MeritBox .Text {
          padding: 0px; } }
      @media (min-width: 1024px) {
        #Merit6 .MeritBox .Text {
          padding: 20px; } }
      @media (min-width: 1250px) {
        #Merit6 .MeritBox .Text {
          padding: 30px; } }
      #Merit6 .MeritBox .Text h3 {
        font-size: 1.2em;
        font-weight: 700;
        line-height: 1.4em;
        color: #FF6100; }
        @media (min-width: 768px) {
          #Merit6 .MeritBox .Text h3 {
            margin-top: 10px; } }
        @media (min-width: 1024px) {
          #Merit6 .MeritBox .Text h3 {
            font-size: 1.5em;
            margin-top: 20px; } }
      #Merit6 .MeritBox .Text p {
        font-size: 0.9em;
        text-align: justify;
        line-height: 2em;
        margin-top: 10px; }
        @media (min-width: 1024px) {
          #Merit6 .MeritBox .Text p {
            font-size: 1.125em;
            margin-top: 20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
導入スタイルに応じたプランをご提案
---------------------------------------------------------------------------------------------------------------------
*/
#Proposal {
  background-color: #0077C8;
  padding: 60px 0; }
  @media (min-width: 1024px) {
    #Proposal {
      padding: 120px 0; } }
  #Proposal .ProposalIn {
    max-width: 1200px;
    width: 90%;
    margin: 40px auto 0; }
    @media (min-width: 1024px) {
      #Proposal .ProposalIn {
        margin: 80px auto 0; }
        #Proposal .ProposalIn .o-4column .col-xl-4 {
          padding: 0 10px; }
        #Proposal .ProposalIn .o-4column {
          margin: 0 -10px; } }
    @media (min-width: 1200px) {
      #Proposal .ProposalIn {
        margin: 80px auto 0; }
        #Proposal .ProposalIn .o-4column .col-xl-4 {
          padding: 0 20px; }
        #Proposal .ProposalIn .o-4column {
          margin: 0 -20px; } }
  #Proposal .ProposalBox {
    margin-bottom: 20px;
    background-color: #fff;
    position: relative;
    height: 350px;
    border-radius: 20px; }
    @media (min-width: 768px) {
      #Proposal .ProposalBox {
        height: 380px; } }
    @media (min-width: 1024px) {
      #Proposal .ProposalBox {
        height: 430px; } }
    @media (min-width: 1250px) {
      #Proposal .ProposalBox {
        height: 500px; } }
    #Proposal .ProposalBox .ProposalT {
      background-color: #FFD200;
      padding: 10px 0 8px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px; }
      @media (min-width: 1024px) {
        #Proposal .ProposalBox .ProposalT {
          padding: 20px 0 16px; } }
      #Proposal .ProposalBox .ProposalT h2 {
        font-size: 1.5em;
        text-align: center;
        line-height: 1.4em; }
        @media (min-width: 768px) {
          #Proposal .ProposalBox .ProposalT h2 {
            font-size: 1.3em; } }
        @media (min-width: 1024px) {
          #Proposal .ProposalBox .ProposalT h2 {
            font-size: 1.8em; } }
        @media (min-width: 1250px) {
          #Proposal .ProposalBox .ProposalT h2 {
            font-size: 2.0em; } }
    #Proposal .ProposalBox p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: justify;
      padding: 20px; }
      @media (min-width: 1024px) {
        #Proposal .ProposalBox p {
          font-size: 1.0em; } }
      @media (min-width: 1250px) {
        #Proposal .ProposalBox p {
          font-size: 1.125em; } }
    #Proposal .ProposalBox .PlanIcon {
      position: absolute;
      margin: auto;
      bottom: 20px;
      left: 0;
      right: 0;
      width: 60%; }
      @media (min-width: 1024px) {
        #Proposal .ProposalBox .PlanIcon {
          width: 80%; } }
  #Proposal .ProposalArrow {
    text-align: center; }
    #Proposal .ProposalArrow img {
      width: 100px;
      height: auto; }
      @media (min-width: 1024px) {
        #Proposal .ProposalArrow img {
          width: 150px; } }
  #Proposal .ProposalText {
    margin-bottom: 20px;
    background-color: #fff;
    position: relative;
    height: auto;
    padding: 20px 20px;
    border-radius: 20px;
    text-align: center; }
    @media (min-width: 1024px) {
      #Proposal .ProposalText {
        padding: 40px 60px; } }
    #Proposal .ProposalText h3 {
      font-size: 1.2em;
      line-height: 1.8em;
      color: #4B4948;
      text-align: justify; }
      @media (min-width: 1024px) {
        #Proposal .ProposalText h3 {
          font-size: 1.8em; } }
      @media (min-width: 1250px) {
        #Proposal .ProposalText h3 {
          font-size: 2.25em;
          line-height: 2em;
          text-align: center; } }

/*
---------------------------------------------------------------------------------------------------------------------
人気の機種
---------------------------------------------------------------------------------------------------------------------
*/
#Model {
  padding: 60px 0 30px; }
  @media (min-width: 1024px) {
    #Model {
      padding: 120px 0 60px; } }
  #Model .ModelIn {
    max-width: 1200px;
    width: 90%;
    margin: 40px auto 0; }
    @media (min-width: 1024px) {
      #Model .ModelIn .o-3column .col-xl-3 {
        padding: 0 10px; }
      #Model .ModelIn .o-3column {
        margin: 0 -10px; } }
  #Model .ModelBox {
    border: 4px solid #4B4948;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px; }
    @media (min-width: 1024px) {
      #Model .ModelBox {
        padding: 20px; } }
    #Model .ModelBox h2 {
      font-size: 1.125em;
      margin: 10px 0; }
    #Model .ModelBox p {
      font-size: 0.75em;
      line-height: 1.8em;
      margin-top: 20px; }
      @media (min-width: 1024px) {
        #Model .ModelBox p {
          font-size: 0.9em; } }

/*
---------------------------------------------------------------------------------------------------------------------
おすすめソリューション / 業務効率化ツール
---------------------------------------------------------------------------------------------------------------------
*/
#Tool {
  padding: 0px 0 60px;
  margin: auto; }
  @media (min-width: 1024px) {
    #Tool {
      padding: 60px 0 120px; } }
  #Tool .ToolIn {
    max-width: 1200px;
    width: 90%;
    margin: 40px auto 0; }
    @media (min-width: 1024px) {
      #Tool .ToolIn .o-4column .col-lg-4 {
        padding: 0 10px; }
      #Tool .ToolIn .o-4column {
        margin: 0 -10px; } }
    @media (min-width: 1200px) {
      #Tool .ToolIn .o-4column .col-lg-4 {
        padding: 0 20px; }
      #Tool .ToolIn .o-4column {
        margin: 0 -20px; } }
  #Tool .ToolBox {
    border: 3px solid #4B4948;
    margin-bottom: 20px; }
    #Tool .ToolBox .ToolT {
      display: flex;
      border-bottom: 3px solid #4B4948; }
      #Tool .ToolBox .ToolT .Logo {
        width: 30%;
        padding: 15px 15px;
        border-right: 3px solid #4B4948; }
        @media (min-width: 768px) {
          #Tool .ToolBox .ToolT .Logo {
            padding: 24px 15px; } }
        @media (min-width: 1200px) {
          #Tool .ToolBox .ToolT .Logo {
            padding: 15px; } }
      #Tool .ToolBox .ToolT .ToolName {
        width: 70%;
        position: relative; }
        #Tool .ToolBox .ToolT .ToolName h2 {
          font-size: 1.2em;
          padding-left: 10px;
          margin-top: 10px; }
          @media (min-width: 1024px) {
            #Tool .ToolBox .ToolT .ToolName h2 {
              font-size: 1.5em; } }
        #Tool .ToolBox .ToolT .ToolName .Text {
          background-color: #4B4948;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
          #Tool .ToolBox .ToolT .ToolName .Text h4 {
            font-size: 0.8em;
            line-height: 1.4em;
            color: #fff;
            padding: 10px; }
            @media (min-width: 768px) {
              #Tool .ToolBox .ToolT .ToolName .Text h4 {
                padding: 10px 0 10px 5px; } }
            @media (min-width: 1024px) {
              #Tool .ToolBox .ToolT .ToolName .Text h4 {
                font-size: 0.9em;
                padding: 10px; } }
            @media (min-width: 1200px) {
              #Tool .ToolBox .ToolT .ToolName .Text h4 {
                font-size: 1.125em; } }
    #Tool .ToolBox p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: justify;
      padding: 15px; }
      @media (min-width: 1200px) {
        #Tool .ToolBox p {
          font-size: 1.125em;
          padding: 20px; } }

/*
---------------------------------------------------------------------------------------------------------------------
ご利用までの流れ　３ステップ
---------------------------------------------------------------------------------------------------------------------
*/
#Step {
  background-color: #0077C8;
  padding: 60px 0 100px; }
  @media (min-width: 1024px) {
    #Step {
      padding: 80px 0 100px; } }
  #Step .swiper-area {
    margin: 40px auto 0; }
  #Step .StepBox {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 280px;
    border-radius: 20px;
    margin: 0 auto 20px;
    width: 90%; }
    @media (min-width: 768px) {
      #Step .StepBox {
        width: 95%;
        height: 260px; } }
    @media (min-width: 1024px) {
      #Step .StepBox {
        height: 420px; } }
    #Step .StepBox .StepT {
      background-color: #FFD200;
      text-align: center;
      padding: 15px 0;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media (min-width: 1024px) {
        #Step .StepBox .StepT {
          display: block;
          padding: 20px 0; } }
      #Step .StepBox .StepT h2 {
        font-size: 1.3em;
        margin-top: 3px; }
        @media (min-width: 1024px) {
          #Step .StepBox .StepT h2 {
            margin-top: 0px; } }
      #Step .StepBox .StepT h3 {
        font-size: 1.5em;
        line-height: 1.4em;
        margin-left: 10px; }
        @media (min-width: 1024px) {
          #Step .StepBox .StepT h3 {
            margin-left: 0px; } }
      #Step .StepBox .StepT h4 {
        font-size: 1.5em; }
    #Step .StepBox p {
      font-size: 1.0em;
      font-weight: 400;
      line-height: 1.8em;
      text-align: center;
      margin-top: 10px; }
      @media (min-width: 1024px) {
        #Step .StepBox p {
          font-size: 1.125em;
          margin-top: 20px; } }
    #Step .StepBox .Icon {
      position: absolute;
      bottom: -12px;
      right: 10%;
      left: 10%;
      font-size: 0; }
      @media (min-width: 1024px) {
        #Step .StepBox .Icon {
          right: 0;
          left: 0; } }
      @media (min-width: 1024px) {
        #Step .StepBox .Icon img {
          border-bottom-right-radius: 20px; } }