@charset "UTF-8";
.microsoft365 {
  padding-top: 20px;
  width: 100%;
  /* remember to define focus styles! */
  /* remember to highlight inserts somehow! */
  /* tables still need 'cellspacing="0"' in the markup */
}

.microsoft365 div,
.microsoft365 span,
.microsoft365 applet,
.microsoft365 object,
.microsoft365 iframe,
.microsoft365 h1,
.microsoft365 h2,
.microsoft365 h3,
.microsoft365 h4,
.microsoft365 h5,
.microsoft365 h6,
.microsoft365 p,
.microsoft365 blockquote,
.microsoft365 pre,
.microsoft365 a,
.microsoft365 abbr,
.microsoft365 acronym,
.microsoft365 address,
.microsoft365 big,
.microsoft365 cite,
.microsoft365 code,
.microsoft365 del,
.microsoft365 dfn,
.microsoft365 em,
.microsoft365 font,
.microsoft365 img,
.microsoft365 ins,
.microsoft365 kbd,
.microsoft365 q,
.microsoft365 s,
.microsoft365 samp,
.microsoft365 small,
.microsoft365 strike,
.microsoft365 strong,
.microsoft365 sub,
.microsoft365 sup,
.microsoft365 tt,
.microsoft365 var,
.microsoft365 b,
.microsoft365 u,
.microsoft365 i,
.microsoft365 center,
.microsoft365 dl,
.microsoft365 dt,
.microsoft365 dd,
.microsoft365 ol,
.microsoft365 ul,
.microsoft365 li,
.microsoft365 fieldset,
.microsoft365 form,
.microsoft365 label,
.microsoft365 legend,
.microsoft365 table,
.microsoft365 caption,
.microsoft365 tbody,
.microsoft365 tfoot,
.microsoft365 thead,
.microsoft365 tr,
.microsoft365 th,
.microsoft365 td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  zoom: 1;
}

.microsoft365 ol,
.microsoft365 ul {
  list-style: none;
}

.microsoft365 blockquote,
.microsoft365 q {
  quotes: none;
}

.microsoft365 blockquote:before,
.microsoft365 blockquote:after,
.microsoft365 q:before,
.microsoft365 q:after {
  content: "";
  content: none;
}

.microsoft365 :focus {
  outline: 0;
}

.microsoft365 ins {
  text-decoration: none;
}

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

.microsoft365 table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media screen and (min-width: 768px) {
  .microsoft365 {
    font-family: "Yu Gothic UI", "Segoe UI", SegoeUI, "Meiryo UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    max-width: 980px;
    width: 100%;
    margin: 0 auto 50px;
    text-align: left;
    color: black;
    background: #fff;
  }
  .microsoft365 img {
    width: 100%;
  }
  .microsoft365 .nv_main {
    border-bottom: 1px solid #0078d4;
    text-align: center;
    margin-top: 35px;
  }
  .microsoft365 .nv_main ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 880px;
    margin: 0 auto;
  }
  .microsoft365 .nv_main ul li {
    max-width: 220px;
    width: 100%;
  }
  .microsoft365 .nv_main ul li a {
    display: block;
    width: 100%;
    background-color: white;
    color: #707070;
    font-size: 18px;
    padding: 0.5rem 0;
  }
  .microsoft365 .nv_main ul li a.active {
    color: white;
    background-color: #0078d4;
  }
  .microsoft365 .nv_main ul li a:hover {
    opacity: 0.8;
  }
  .microsoft365 #microsoft365_content {
    max-width: 880px;
    margin: 50px auto 0;
  }
  .microsoft365 .movie {
    text-align: center;
    margin-bottom: 50px;
  }
  .microsoft365 .movie div {
    background-color: #f7f7f7;
    padding: 20px 0 50px;
  }
  .microsoft365 .movie div h2 {
    font-size: 26px;
    padding-bottom: 0.5rem;
  }
  .microsoft365 .movie div .movie_content video {
    width: 560px;
    height: 315px;
  }
  .microsoft365 .feature .featurebox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 50px;
  }
  .microsoft365 .feature .featurebox h3 {
    font-size: 28px;
    font-weight: bold;
  }
  .microsoft365 .feature .featurebox img {
    width: 100%;
    max-width: 430px;
  }
  .microsoft365 .feature .featurebox.ll {
    width: 100%;
  }
  .microsoft365 .feature .featurebox.ll .text {
    padding-left: 1rem;
    max-width: 450px;
    width: 100%;
  }
  .microsoft365 .feature .featurebox.lr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    width: 100%;
  }
  .microsoft365 .feature .featurebox.lr .text {
    padding-right: 1rem;
    max-width: 450px;
    width: 100%;
  }
  .microsoft365 .download {
    text-align: center;
    margin: 50px 0;
  }
  .microsoft365 .download .download_content {
    max-width: 454px;
    border: solid 5px #cccccc;
    margin: 0 auto;
    padding: 30px;
  }
  .microsoft365 .download .download_content h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .microsoft365 .download .download_content .thumbnail {
    max-width: 188px;
    margin: 0 auto;
    font-size: 14px;
  }
  .microsoft365 .download .download_content .btn_download a {
    background: url(/asset/img/microsoft365/ic_arrow_s.svg) no-repeat 68% #0067b8;
    display: inline-block;
    width: 100%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 1rem 0;
    margin-top: 20px;
  }
  .microsoft365 .download .buy {
    margin-top: 50px;
  }
  .microsoft365 .download .buy a {
    background: url(/asset/img/microsoft365/ic_arrow.svg) no-repeat 70% #0067b8;
    display: inline-block;
    width: 100%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 1.5rem 0;
    margin-top: 20px;
  }
  .microsoft365 .promotion ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: -20px;
  }
  .microsoft365 .promotion ul li {
    margin-left: 20px;
  }
  .microsoft365 .notes {
    font-size: 14px;
    border-top: 1px solid #cccccc;
    margin-top: 50px;
    padding-top: 10px;
  }
  #front #microsoft365_content .item {
    text-align: center;
    padding: 0 0 50px;
  }
  #front #microsoft365_content .item img {
    width: auto;
  }
  #front #microsoft365_content .nv_sub {
    text-align: center;
    margin-top: 35px;
  }
  #front #microsoft365_content .nv_sub ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 880px;
    margin: 0 auto;
  }
  #front #microsoft365_content .nv_sub ul li {
    max-width: 290px;
    width: 100%;
  }
  #front #microsoft365_content .nv_sub ul li a {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    padding: 0.5rem 0;
    color: white;
    background-color: #0078d4;
  }
  #front #microsoft365_content .nv_sub ul li a span {
    background: url(/asset/img/microsoft365/ic_arrow_s.svg) no-repeat 100%;
    display: inline-block;
    padding: 0 1rem;
  }
  #front #microsoft365_content .nv_sub ul li a:hover {
    opacity: 0.8;
  }
}

@media screen and (max-width: 767px) {
  .microsoft365 {
    font-family: "Yu Gothic UI", "Segoe UI", SegoeUI, "Meiryo UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto 50px;
    text-align: left;
    color: black;
    background: #fff;
  }
  .microsoft365 img {
    width: 100%;
  }
  .microsoft365 .nv_main {
    text-align: center;
    margin-top: 35px;
  }
  .microsoft365 .nv_main ul {
    width: 100%;
    margin: 0 auto;
  }
  .microsoft365 .nv_main ul li {
    border-bottom: 1px solid #0078d4;
  }
  .microsoft365 .nv_main ul li a {
    display: inline-block;
    width: 100%;
    background-color: white;
    color: #707070;
    font-size: 18px;
    padding: 0.5rem 0;
  }
  .microsoft365 .nv_main ul li a.active {
    color: white;
    background-color: #0078d4;
  }
  .microsoft365 .nv_main ul li a:hover {
    opacity: 0.8;
  }
  .microsoft365 #microsoft365_content {
    width: 100%;
    max-width: 880px;
    margin: 50px auto 0;
  }
  .microsoft365 .movie {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
  }
  .microsoft365 .movie div {
    background-color: #f7f7f7;
    padding: 20px 20px 50px;
  }
  .microsoft365 .movie div h2 {
    font-size: 22px;
    padding-bottom: 0.5rem;
  }
  .microsoft365 .movie div .movie_content {
    position: relative;
    padding-bottom: 56.25%;
    /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
  }
  .microsoft365 .movie div .movie_content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .microsoft365 .movie div .movie_content video {
    width: 100%;
  }
  .microsoft365 .feature {
    padding: 0 20px;
  }
  .microsoft365 .feature .featurebox {
    margin-bottom: 50px;
  }
  .microsoft365 .feature .featurebox h3 {
    font-size: 24px;
    font-weight: bold;
  }
  .microsoft365 .feature .featurebox img {
    width: 100%;
  }
  .microsoft365 .feature .featurebox.ll .text,
  .microsoft365 .feature .featurebox.lr .text {
    text-align: center;
  }
  .microsoft365 .download {
    text-align: center;
    margin: 50px 0;
    padding: 0 20px;
  }
  .microsoft365 .download .download_content {
    border: solid 5px #cccccc;
    margin: 0 auto;
    padding: 20px;
  }
  .microsoft365 .download .download_content h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .microsoft365 .download .download_content .thumbnail {
    max-width: 188px;
    margin: 0 auto;
    font-size: 14px;
  }
  .microsoft365 .download .download_content .btn_download a {
    background: url(/asset/img/microsoft365/ic_arrow_s.svg) no-repeat 95% #0067b8;
    display: inline-block;
    width: 100%;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 1rem 0;
    margin-top: 20px;
  }
  .microsoft365 .download .buy {
    margin-top: 50px;
  }
  .microsoft365 .download .buy a {
    background-color: #0067b8;
    display: inline-block;
    width: 100%;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 1.5rem 0;
    margin-top: 20px;
  }
  .microsoft365 .promotion {
    padding: 0 20px;
  }
  .microsoft365 .promotion ul li a img {
    width: 100%;
  }
  .microsoft365 .notes {
    font-size: 14px;
    border-top: 1px solid #cccccc;
    margin-top: 50px;
    padding: 10px 20px 0;
  }
  #front #microsoft365_content .item {
    text-align: center;
    padding: 0 0 50px;
  }
  #front #microsoft365_content .item img {
    width: 100%;
  }
  #front #microsoft365_content .nv_sub {
    text-align: center;
    margin-top: 35px;
  }
  #front #microsoft365_content .nv_sub ul {
    margin: 0 auto;
  }
  #front #microsoft365_content .nv_sub ul li a {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    padding: 0.5rem 0;
    color: white;
    background-color: #0078d4;
    border-bottom: 1px solid white;
  }
  #front #microsoft365_content .nv_sub ul li a span {
    background: url(/asset/img/microsoft365/ic_arrow_s.svg) no-repeat 100%;
    display: inline-block;
    padding: 0 1rem;
  }
  #front #microsoft365_content .nv_sub ul li a:hover {
    opacity: 0.8;
  }
}