/* ------------------------------
 * デザイントークン
 * ------------------------------ */
#ms {
  /* 規定カラー */
  --color-primary:   #0074C2;  
  --color-bg:        #f9f9f9;  
  --color-secondary: #707070;
  --color-corporate: #d51121;

  /* ラディウス/影/透過 */
  --radius-base:  8px;
  --opacity-base: 0.9;
  --shadow-base: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}
/* ------------------------------
 * ボタン
 * ------------------------------ */
/* ボタン基本CSS */
#ms [class^="btn"] {
  position: relative;
  color: #333333;
  max-width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 21px;
  font-size: 16px;
  border-radius: .5rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
}
#ms [class^="btn"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/* ボタン：優先度高 */
#ms .btn-primary {
  background: #0074C2;
  background: var(--color-primary, #0074C2);
  color: #fff;
}
#ms .btn-primary:hover{ border-bottom: 1px solid #328880;box-sizing: border-box; }

/* ボタン：優先度中 */
#ms .btn-secondary {
  background: #707070;
  background: var(--color-secondary, #707070);
  color: #fff;
}
#ms .btn-secondary:hover{ border-bottom: 1px solid #666666;box-sizing: border-box; }
/* hover,activeの挙動 */
#ms [class^="btn"]:hover{ transform: translateY(-1px); opacity: 0.9; }
#ms [class^="btn"]:active{ transform: translateY(0);border-bottom:1px solid transparent; }

/* ------------------------------
 * テキストリンク
 * ------------------------------ */
#ms a.txtlink {
    position: relative;
    color: #333333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#ms .txtlink::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -16px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    box-sizing: border-box;
}
/* ------------------------------
 * テキストボックス .callout-*
 * ------------------------------ */
#ms [class^="callout"] {
  padding: 19px 20px;
  border: 1px solid;
  box-sizing: border-box;
  line-height: 1.6;
  color: #333333;
}
#ms .callout-note {
  border-color: #CCCCCC;
}
#ms .callout-info {
  border: none;
  background-color: #F5F5F5;
}

/* ------------------------------
 * カラムレイアウト割付
 * ------------------------------ */
/* 親：flex + 固定gap */
#ms .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 32px ; 
}
#ms .flex > * {
  box-sizing: border-box;
}
/* 等分カラム */
#ms .col-2 { width: calc( calc(100% - calc(32px * 1)) /2); }
#ms .col-3 { width: calc( calc(100% - calc(32px * 2)) /3); }
#ms .col-4 { width: calc( calc(100% - calc(32px * 3)) /4); }
#ms .col-5 { width: calc( calc(100% - calc(32px * 4)) /5); }
#ms .col-6 { width: calc( calc(100% - calc(32px * 5)) /6); }
#ms .col-7 { width: calc( calc(100% - calc(32px * 6)) /7); }
#ms .col-8 { width: calc( calc(100% - calc(32px * 7)) /8); }
/* 等分カラム */
#ms .flex.nowrap,
#ms .flex.pc_nowrap {
  flex-wrap: nowrap;
}
#ms .flex.flex-start{align-items:flex-start}
/* ------------------------------
 * stack子要素に一定のmargin設定
 * ------------------------------ */
#ms .stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  align-items: normal;
}

/* ------------------------------
 * リスト
 * ------------------------------ */
#ms ul.list{
  text-align: left;
  padding-left: 18px;
}
#ms ol.list {
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
}

#ms ul.list > li {
  list-style-type: disc;
  line-height: 1.6;
}
#ms ol.list > li {
  list-style-type: decimal;
  line-height: 1.6;
}
#ms ul.list li::marker {
  font-size: 0.8em;
  color:#333333;
}
#ms ul.list li + li,
#ms ol.list li + li {
  margin-block-start: 8px;
}


/* ------------------------------
 * フッター
 * ------------------------------ */
#ms ul.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#ms ul.footer li {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
  height: 4em;
  flex-basis: unset;
  border-radius: 5px;
}
/* 等分カラム */
#ms ul.footer .col-2 { width: calc( calc(100% - calc(16px * 1)) /2); }
#ms ul.footer .col-3 { width: calc( calc(100% - calc(16px * 2)) /3); }
#ms ul.footer .col-4 { width: calc( calc(100% - calc(16px * 3)) /4); }
#ms ul.footer .col-5 { width: calc( calc(100% - calc(16px * 4)) /5); }
#ms ul.footer .col-6 { width: calc( calc(100% - calc(16px * 5)) /6); }
#ms ul.footer .col-7 { width: calc( calc(100% - calc(16px * 6)) /7); }
#ms ul.footer .col-8 { width: calc( calc(100% - calc(16px * 7)) /8); }

#ms ul.footer li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #707070;
  border-top: 2px solid var(--color-secondary,#707070);
  border-right: 2px solid #707070;
  border-right: 2px solid var(--color-secondary,#707070);
  transform: rotate(45deg);
  box-sizing: border-box;
}
#ms ul.footer li a {
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px;
  color: #333;
  color:var(--color-text);
  padding: 0 40px 0 15px;
}
#ms ul.footer li a:hover {
  text-decoration: none;
}

/* ------------------------------
 * 全体の設定
 * ------------------------------ */
#index #pan{
	min-width: 850px;
    max-width: 1200px;
    margin: auto;
}
#ms section{
	width: 100%;
}
#ms img{height: auto;}

.section_wrapper{
    margin: 0px auto;
    min-width: 850px;
    max-width: 1200px;
	padding-top: 80px;
	padding-bottom: 80px;
}
div#index {
    width: 100%;
    text-align: center;
    min-width: unset;
    max-width: unset;
    zoom: 100%;
    font-size: 80%;
	font-family: "Noto Sans JP", sans-serif!important;
	font-weight: 500;
    margin: 0px auto;
}
#ms div,
#ms h1,
#ms h2,
#ms h3,
#ms h4,
#ms h5,
#ms h6,
#ms input,
#ms ol,
#ms p,
#ms pre,
#ms td,
#ms textarea,
#ms th,
#ms ul,
#ms span{
	font-family: "Noto Sans JP", sans-serif!important;
	font-weight: 500;
	font-style: normal;
	font-size:16px;
	line-height: 1.6;
	text-align: left;
}
#ms h1{font-size: 24px;}
#ms h2{font-size: 46px;}
#ms h3{font-size: 26px;font-weight: 700;line-height: 1.4;position: relative;padding-left: 23px;}
#ms h3:before {
    content: "";
    position: absolute;
    left: 0px;
    display: block;
    width: 9px;
    height: 86%;
    background: #0074C2;
    background: var(--color-primary, #0074C2);
    top: 0;
    bottom: 0;
    margin: auto;
}
#ms h3 span{display: block;font-size: 18px;color: #707070;color: var(--color-secondary, #707070);}
#ms h4{font-size: 24px;}
#ms h4 span{display: block;font-size: 18px;color: #707070;color: var(--color-secondary, #707070);text-align: inherit;}
#ms h5{font-size: 18px;}

/* ------------------------------
 * メインビジュアル
 * ------------------------------ */
#ms .mv{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 740px;
	grid-template-rows: auto minmax(0, 1fr);
	align-content: center;
}
#ms .mv img{
	width: 110px;
    align-self: end;
}
#ms .mv h1{
	line-height: 1;
	grid-column-start: 1;
    grid-row-start: 2;
    align-self: start;
}
#ms .mv p{
	grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: #F5F5F5;
    padding: 19px 35px;
    box-sizing: border-box;
}
/* ------------------------------
 * アンカーリンク
 * ------------------------------ */
#ms .anchor {
    margin-top: 36px;
}
#ms .anchor ul {
    display: flex;
    gap: 8px;
}
#ms .anchor ul li {
    width: 50%;
    text-align: center;
}
#ms .anchor ul li a{
    color: #fff;
    background-color: #0074C2;
    height: 73px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 24px;
}
#ms .anchor ul li:last-child a {
    background-color: #6CB4C6;
}
#ms .anchor ul li a:hover {
    text-decoration: none;
    background: #005ca0;
	transform: translateY(-1px);
    opacity: 0.9;
}
#ms .anchor ul li:last-child a:hover{
    background: #4c93a5;
}
#ms .anchor ul li a:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 23px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
}

/* ------------------------------
 * Surfaceシリーズ（ガイド）
 * ------------------------------ */
#ms .guide .flex.lineup {
	gap: 90px;
    justify-content: center;
}
#ms .guide .col-2 {
    max-width: 490px;
}
#ms .guide .col-2 > :not(.container) {
    padding: 0 24px;
}
#ms .container {
	color: #333333;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 11px;
    text-align: center;
    /*box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);*/
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .05);
    border-radius: var(--radius-base);
    padding: 27px;
    box-sizing: border-box;
    margin: 0 auto 25px;
	transition: .3s ease;
	position: relative;
	border: 1px solid #efefef;
}
#ms a.container{color: #333333;}
#ms a.container:hover {
    text-decoration: none;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .11), 0 12px 32px rgba(0, 0, 0, .07);
}

#ms .detail{
	background: #0074C2;
    background: var(--color-primary, #0074C2);
    color: #fff;    max-width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    padding: 9px 21px;
    font-size: 16px;
    border-radius: 3px;
}
#ms #surface .detail{margin-top: 8px;}

#ms ul.list.f-list {
    list-style: none;
	margin: 19px auto;
    padding: 0;
}
#ms ul.list.f-list li {
	list-style-type: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    line-height: 1.6;
}
#ms ul.list.f-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: #0078d4;
    border-radius: 50%;
    bottom: 0;
    margin: auto;
}
#ms ul.list.f-list li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 7px;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    box-sizing: border-box;
}


/* ------------------------------
 * M365/Office
 * ------------------------------ */
#ms .ribbon {
    --s: 16px;
    --d: 5px;
    --c: 8px;
    color: #fff;
    font-size: 18px;
    padding: 0px calc(var(--s) + 16px) calc(var(--d) + 3px);
    line-height: 1.8;
    background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%, #0008 0 37.5%, #0004 0) 0 / 50% 100% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%, #0008 0 75%, #0000 0) 100% / 50% 100% no-repeat;
    clip-path: polygon(0 var(--d), var(--s) var(--d), var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--d), 100% var(--d), calc(100% - var(--c)) calc(50% + var(--d) / 2), 100% 100%, calc(100% - var(--s) - var(--d)) 100%, calc(100% - var(--s) - var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) calc(100% - var(--d)), calc(var(--s) + var(--d)) 100%, 0 100%, var(--c) calc(50% + var(--d) / 2));
    background-color: #E60012;
    width: fit-content;
    position: absolute;
    top: -22px;
}
#ms #office .container{
	grid-template-rows: auto auto 1fr auto;
	padding-top: 43px;
	height: 100%;
	align-items: center;
}