@charset "utf-8";

:root{
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(40px, 1.591rem + 4.55vw, 80px);

  --font-ss: clamp(10px, 0.534rem + 0.45vw, 14px);
  --font-s: clamp(12px, 0.659rem + 0.45vw, 16px);
  --font-m: clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-l: clamp(16px, 0.818rem + 0.91vw, 24px);
  --font-ll:clamp(18px, 0.614rem + 2.18vw, 36px);


  --color-word:#2255d1;
  --color-excel:#1d8b4d;
  --color-ppt:#d01333;
  --color-outlook:#0c78e5;
  --color-onenote:#900dca;
  --color-onedrive:#0c78e5;
  --color-copilot:#001e60;
  --color-defender:#177ae6;
  --color-teams:#5050cf;
  --color-designer:#dd267f;
  --color-clipchamp:#6c1dd3;

  --color-personal:#0e79de;
  --color-homebiz:#e17d02;
  --color-h-personal:#86bcee;
  --color-h-homebiz:#f0be80;
  --color-l-personal:#d9f5fc;
  --color-l-homebiz:#fcf1e3;

  --color-pipc:#227acb;
  --color-posa:#388600;
}

/*--レイアウト--------------------*/
#office{
  position:relative;
  width:100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:var(--font-s);
  line-height:1.2;
  letter-spacing:0.01em;
}
.sec-contents{
  position:relative;
  width:100%;
  text-align:center;
  padding: var(--gap-l) 0;
}
.bkg-gray{
  background:#f6f6f6;
}
.sec-sub-contents{
  position:relative;
  width:100%;
  text-align:center;
  padding: var(--gap-m) 0;
}
.contents-inner{
  width:calc(100% - 30px);
  max-width:1140px;
  margin:auto;
  text-align:left;
}

/*--画像/ボタン--------------------*/
#office img{
  width:100%;
  object-fit: contain;
}
#office .c-button{
  width:100%;
}
#office .c-button span{
  letter-spacing:0.03em;
  line-height:1.2;
}
#office p{
  line-height:1.6;
}

/*--テキスト--------------------*/
.sec-ttl{
  font-size:var(--font-ll);
  font-weight:700;
  margin-bottom:var(--gap-s);
  letter-spacing:0.02em;
}
.sec-ttl.-line{
  padding-left:0.51em;
  border-left:4px solid #004da1;
}

.sec-ttl small{
  font-size:0.8em;
}
.sec-sub-ttl{
  font-size:var(--font-l);
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:0.05em;
}

.lead-txt{
  font-size:var(--font-m);
}

/*--強調--*/
strong.--personal{
  color:var(--color-personal);
}
strong.--homebiz{
  color:var(--color-homebiz);
}

/*--注意書き--*/
.note{
  font-size:var(--font-ss);
}
ul.note{
  margin-top:10px;
}
ul.note li{
  position:relative;
  padding-left:1em;
}
ul.note li + li{
  margin-top:10px;
}
ul.note li::before{
  position:absolute;
  top:0;
  left:0;
  content:'※';
}
ul.note.--num{
  counter-reset: note-counter;
}
ul.note.--num li{
  counter-increment: note-counter;
  padding-left:2em;
}
ul.note.--num li::before{
  content: "※"counter(note-counter); 
}

/*--ドット付きリスト--*/
ul.disk-list{
  list-style: disc;
  margin-left:2em;
}
ul.disk-list li + li{
  margin-top:0.5em;
}

/*--途中画面サイズ--*/
.disp-mb{
  display:none;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .disp-mb{
    display:block;
  }
}

/*-------------------------------------
キービジュアル
kv-block
-------------------------------------*/
.sec-kv{
  position:relative;
  width:100%;
  margin:0;
  padding:var(--gap-m) var(--gap-s) 0 var(--gap-s);
}
.kv-wrap{
  position:relative;
  width:80%;
  margin:auto;
  display:flex;
  gap:var(--gap-s);
}
.kv-center{
  position:relative;
  width:35%;
  text-align:center;
}
.kv-block{
  position:relative;
  flex:1;
  border-radius:var(--gap-s);
  padding:var(--gap-s);
  display:flex;
  align-items: center;
  justify-content: center;
  margin:var(--gap-m) 0;
  width: 100%;
}
.kv-block-inner{
  width:100%;
  text-align:center;
}

/*--ドット付きリスト--*/
.kv-block .disk-list{
  width:fit-content;
  margin:auto;
  padding-left:1.5em;
  font-size:var(--font-m);
  text-align:left;
}
.kv-block.--homebiz{
  background:var(--color-l-homebiz);
}
.kv-block.--personal{
  background:var(--color-l-personal);
}

.kv-block .c-button{
  margin:var(--gap-s) auto 0 auto;
  border-radius: 10px;
  font-weight:700;
  color:#fff;
  border:none;
  max-width:400px;
}
.kv-block.--homebiz .c-button{
  background:var(--color-homebiz);
}
.kv-block.--personal .c-button{
  background:var(--color-personal);
}

.kv-block .c-button::after{
  border-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.kv-block.--homebiz .c-button::before {
  background:var(--color-l-homebiz);
  opacity: .2;
}
.kv-block.--personal .c-button::before {
  background:var(--color-l-personal);
  opacity: .2;
}

@media screen and (max-width: 1590px) {
  .kv-wrap{
    width:90%;
  }
}
@media screen and (max-width: 1400px) {
  .kv-wrap{
    width:100%;
    align-items: center;
  }
}

@media screen and (max-width: 1280px) {
  .kv-block .disk-list{
    font-size:var(--font-s);
  }
}

@media screen and (max-width: 767px) {
  .sec-kv{
    padding-top:var(--gap-s);
  }
  .kv-wrap{
    flex-direction: column;
    gap:0;
  }
  .kv-center{
    width:70%;
    order: 1;
    margin:auto;
  }
  .kv-block.--personal{
    order: 2;
  }
  .kv-block.--homebiz{
    order: 3;
  }
  .kv-block{
    margin:0 0 var(--gap-s) 0;
  }
  .kv-block .disk-list{
    font-size:var(--font-m);
  }
  .kv-block .c-button{
    height:40px;
  }
}


/*-------------------------------------
導入
area-intro
-------------------------------------*/

/*--ナビ--------------------*/
.nav-anchor{
  margin-top:var(--gap-s);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:var(--gap-s);
}
.nav-anchor li .c-button{
  width:100%;
  height:100%;
  border-radius:10px;
  padding:10px 10px 20px 10px;
  text-align:center;
  line-height:1.4;
  font-weight:700;
}
.nav-anchor li .c-button::after{
  top: auto;
  bottom: 10px;
  right: calc((100% - 8px) / 2);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-anchor li strong{
  font-weight:700;
  font-size:1.2em;
}

@media screen and (max-width: 767px) {
  .nav-anchor{
    grid-template-columns: repeat(2, 1fr);
  }
}


/*-------------------------------------
3つのご利用方法
area-ways
-------------------------------------*/

/*--タイトル--------------------*/
.way-based{
  font-size:70%;
  padding:0.2em 0.5em;
  display:inline-block;
  border:1px solid #333;
  border-radius:4px;
  margin-right:5px;
}
.block-way.--homebiz .way-based{
  color:var(--color-homebiz);
  border-color:var(--color-homebiz);
}
.block-way.--personal .way-based{
  color:var(--color-personal);
  border-color:var(--color-personal);
}

.block-way.--homebiz .sec-sub-ttl{
  color:var(--color-homebiz);
}
.block-way.--personal .sec-sub-ttl{
  color:var(--color-personal);
}

/*--ブロック--------------------*/
.block-way + .block-way{
  margin-top:var(--gap-m);
}

/*--図--------------------*/
.way-chart{
  border-radius: 5px;
  overflow: hidden;
}
.block-way.--homebiz .way-chart{
  background:var(--color-l-homebiz);
}
.block-way.--personal .way-chart{
  background:var(--color-l-personal);
}

@media screen and (max-width: 767px) {
  .chart-wrap{
    overflow-x: scroll;
    padding-bottom:5px;
    width:100%;
  }
  .chart-wrap > div{
    width:max-content;
  }
  #office .chart-wrap > div > img{
    width:760px;
  }
}

/*-------------------------------------
それぞれの特長
area-features
-------------------------------------*/

/*--タブ--------------------*/
.features-tabs input[type="radio"] {
  display: none;
}

/* タブボタン */
.features-tabs .tab-labels {
  display: flex;
  gap:10px;
}

.features-tabs .tab-labels label {
  padding:1em;
  cursor: pointer;
  background: #f5f5f5;
  border-radius: 8px 8px 0 0;
  transition: 0.2s;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  font-weight:700;
  color: #fff;
  width:calc(50% - 5px);
  text-align:center;
}
.tab-labels label[for="tab-homebiz"]{
  background:var(--color-l-homebiz);
  color:var(--color-homebiz);
}
.tab-labels label[for="tab-personal"]{
  background:var(--color-l-personal);
  color:var(--color-personal);
}

/* .tab-labels label[for="tab-homebiz"]{
  background:var(--color-l-homebiz);
  color:var(--color-h-homebiz);
}
.tab-labels label[for="tab-personal"]{
  background:var(--color-l-personal);
  color:var(--color-h-personal);
} */
/* アクティブなタブ */
#tab-homebiz:checked ~ .tab-labels label[for="tab-homebiz"]{
  background:var(--color-homebiz);
  color:#fff;
}
#tab-personal:checked ~ .tab-labels label[for="tab-personal"] {
  background:var(--color-personal);
  color:#fff;
}

/* コンテンツ */
.features-tabs .content {
  display: none;
  padding: var(--gap-m);
  background: #fff;
  border-radius: 0 0 8px 8px;
  border: 2px solid #ddd;
}
.features-tabs .content.--homebiz {
  border-color:var(--color-homebiz);
}
.features-tabs .content.--personal {
  border-color:var(--color-personal);
}

/* 表示するコンテンツ */
#tab-homebiz:checked ~ .tab-contents .content.--homebiz,
#tab-personal:checked ~ .tab-contents .content.--personal {
  display: block;
}

/*--タブコンテンツ内容--------------------*/
.tab-section{
  margin-top:var(--gap-m);
}

.tab-sub-section{
  margin-top:var(--gap-m);
}

.tab-section + .tab-section{
  margin-top:var(--gap-m);
  padding-top:var(--gap-m);
  border-top:1px dotted #ccc;
}
.content.--homebiz .tab-section + .tab-section{
  border-color:var(--color-h-homebiz);
}
.content.--personal .tab-section + .tab-section{
  border-color:var(--color-h-personal);
}

/* 利用可能なアプリ */
.app-list{
  width:100%;
  display:flex;
  gap:20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.app-list li{
  width:calc((100% - 180px) / 10);
  font-size: clamp(10px, 0.58rem + 0.23vw, 12px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .app-list li{
    width:calc((100% - 80px) / 5);
  }
}

#office .app-list li p{
  line-height:1.2;
}
/* Officeソフトについて詳しくはこちら */
.more-link{
  width:100%;
  max-width:600px;
  margin:var(--gap-m) auto 0;
}
.more-link .c-button{
  border-radius: 100vw;
}
.more-link .c-button::after{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 流れ図 */
.flow-chart{
  margin-top:var(--gap-s);
  border-radius: 5px;
  overflow: hidden;
}
.content.--homebiz .flow-chart{
  background:var(--color-l-homebiz);
}
.content.--personal .flow-chart{
  background:var(--color-l-personal);
}

/* 流れ */
.tab-section:has(.flow-block){
  counter-reset: flow-counter;
}
.flow-block{
  margin-top:var(--gap-m);
  counter-increment: flow-counter;
}
.flow-block h4{
  position:relative;
  font-weight:700;
  padding-left:2.5em;
  margin-bottom: 1em;
  font-size:1.2em;
}
.content.--homebiz .flow-block h4{
  color:var(--color-homebiz);
}
.content.--personal .flow-block h4{
  color:var(--color-personal);
}
.flow-block h4::before{
  position:absolute;
  left:0;
  top:-0.2em;
  content: counter(flow-counter); 
  padding:0.2em 0.5em;
  background:var(--color-personal);
  color:#fff;
  font-weight:700;
}
.content.--homebiz .flow-block h4::before{
  background:var(--color-homebiz);
}
.content.--personal .flow-block h4::before{
  background:var(--color-personal);
}

/* 3ヵ月以内にどちらかを選択 */
.select-list{
  display:flex;
  border-radius: 5px;
  overflow: hidden;
}
.select-list + .select-list{
  margin-top:var(--gap-s);
}
.select-list.--homebiz{
  border:1px solid var(--color-homebiz);
}
.select-list.--personal{
  border:1px solid var(--color-personal);
}
.select-list dt{
  display:flex;
  align-items: center;
  justify-content: center;
  width:20%;
  color:#fff;
  text-align:center;
}
.select-list.--homebiz dt{
  background:var(--color-homebiz);
}
.select-list.--personal dt{
  background:var(--color-personal);
}
.select-list dt .num{
  font-size:1.2em;
}
.select-list dd{
  width:80%;
  background:#fff;
  padding:var(--gap-s);
}
.select-list dd h5{
  font-weight:700;
  margin-bottom:10px;
  font-size:1.2em;
}
.select-list.--homebiz dd h5{
  color:var(--color-homebiz);
}
.select-list.--personal dd h5{
  color:var(--color-personal);
}

/* メリット */
.merit-block{
  margin-top: var(--gap-s);
  counter-reset: merit-counter;
}
.merit-list + .merit-list{
  margin-top:var(--gap-m);
}
.merit-list{
  position:relative;
  counter-increment: merit-counter;
  padding-left:2.5em;
}
.merit-list::before{
  position:absolute;
  left:0;
  top:-0.2em;
  content: counter(merit-counter); 
  padding:0.2em 0.5em;
  background:var(--color-homebiz);
  color:#fff;
  font-weight:700;
  font-size:1.2em;
}
.content.--homebiz .merit-list::before{
  background:var(--color-homebiz);
}
.content.--personal .merit-list::before{
  background:var(--color-personal);
}
.merit-list dt{
  font-weight:700;
  font-size:1.2em;
  margin-bottom:0.5em;
}
.content.--homebiz .merit-list dt{
  color:var(--color-homebiz);
}
.content.--personal .merit-list dt{
  color:var(--color-personal);
}

/* バナー */
.bnr-area{
  text-align:center;
}
.bnr-area p{
  font-weight:700;
}
.bnr-area a{
  display:block;
  width:100%;
  max-width:600px;
  margin:10px auto 0;
}
.bnr-area a:hover {
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

/*--新機能紹介--------------------*/

.feature-catch{
  font-size:var(--font-m);
  font-weight:900;
  color:#004da1;
  text-align:center;
  margin-bottom:1em;
}
.feature-list-ttl{
  background:#666;
  padding:0.5em;
  color:#fff;
  text-align:center;
}

/*新機能紹介リスト*/
.feature-list{
  margin-top:var(--gap-s);
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:var(--gap-s);
}
.feature-list li{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap:10px;
  padding:var(--gap-s);
  border:2px solid #333;
  border-radius: 10px;
}
.feature-list li.office-word{
  border-color:var(--color-word);
}
.feature-list li.office-excel{
  border-color:var(--color-excel);
}
.feature-list li.office-ppt{
  border-color:var(--color-ppt);
}
.feature-list li.office-onenote{
  border-color:var(--color-onenote);
}
.feature-list li.office-outlook{
  border-color:var(--color-outlook);
}

.feature-list .feature-top{
  display:flex;
  flex-direction: column;
  gap:var(--gap-s);
}
.feature-list .feature-hd{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
}
#office .feature-list .feature-hd img{
  width:80px;
  height:80px;
}
.feature-list .feature-hd-bar{
  width:calc(100% - 100px);
  height:50px;
  display:flex;
  justify-content: flex-end;
  align-items: center;
  padding:10px;
  background:#333;
  color:#fff;
  font-weight:700;
  font-size:var(--font-m);
  letter-spacing:0.1em;
}
.feature-list li.office-word .feature-hd-bar{
  background:var(--color-word);
}
.feature-list li.office-excel .feature-hd-bar{
  background:var(--color-excel);
}
.feature-list li.office-ppt .feature-hd-bar{
  background:var(--color-ppt);
}
.feature-list li.office-onenote .feature-hd-bar{
  background:var(--color-onenote);
}
.feature-list li.office-outlook .feature-hd-bar{
  background:var(--color-outlook);
}
.feature-list li.office-other .feature-hd-bar{
  width:calc(100% - 180px);
}
.feature-list .feature-ttl{
  font-weight:700;
  font-size:var(--font-l);
  padding-bottom:var(--gap-s);
  border-bottom:1px solid #999;
}
.feature-list .feature-lead{
  font-weight:700;
}
.feature-list .feature-txt{
  font-size:var(--font-s);
}
.feature-list .feature-img{
  border:1px solid #ccc;
}

@media screen and (max-width: 767px) {
  .feature-list{
    grid-template-columns: repeat(1,1fr);
    gap:var(--gap-m);
  }
  #office .feature-list .feature-hd img{
    width:40px;
    height:40px;
  }
  .feature-list .feature-hd .feature-hd-bar{
    width:calc(100% - 50px);
    height:30px;
  }
  .feature-list li.office-other .feature-hd-bar{
    width:calc(100% - 100px);
  }
}

/*--表 office-spec--------------------*/

.office-spec{
  margin:var(--gap-s) 0;
  width:100%;
  font-size:clamp(14px, 0.818rem + 0.24vw, 16px);
  line-height:1.4;
}

.office-spec th,
.office-spec td{
  width:100%;
  padding:0.5em;
  text-align:center;
  vertical-align: middle;
  border:1px solid #ccc;
}

.office-spec th{
  white-space:nowrap;
  font-weight:700;
  background:#eee;
  width:20%;
}
.office-spec td{
  width:40%;
}
.office-spec td strong{
  font-weight:700;
}

.office-spec td.--pipc{
  background:var(--color-pipc);
  color:#fff;
}
.office-spec td.--posa{
  background:var(--color-posa);
  color:#fff;
}
.office-spec td.--homebiz{
  background:var(--color-homebiz);
  color:#fff;
}
.office-spec td.--personal{
  background:var(--color-personal);
  color:#fff;
}

.office-spec .license{
  margin-bottom:0.5em;
  padding:0.5em;
  width:100%;
  border-radius:5px;
  font-weight:700;
  font-size:80%;
}
.office-spec .license.--homebiz{
  background:var(--color-l-homebiz);
  color:var(--color-homebiz);
}
.office-spec .license.--personal{
  background:var(--color-l-personal);
  color:var(--color-personal);
}

@media screen and (max-width: 767px) {
  .office-spec th{
    width:30%;
  }
  .office-spec td{
    width:70%;
  }
}


/* サポートリスト */
.support-list{
  position:relative;
  margin-top:var(--gap-s);
}
.support-list dt{
  font-weight:700;
}
.content.--homebiz .support-list dt{
  color:var(--color-homebiz);
}
.content.--personal .support-list dt{
  color:var(--color-personal);
}

/*----------------------------------------------------
FAQ
----------------------------------------------------*/
.faq-list {
  margin-top:var(--gap-m);
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}
.faq-list-item {
  position: relative;
  width: calc((100% - 20px) / 2);
}
.faq-list-item details {
  line-height: 1.5;
  font-size: 16px;
  border: 1px solid #ececec;
  box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, .1);
  transition: transform .2s;
  background: #fff;
}
.faq-list-item details summary {
  cursor: pointer;
  font-size: var(--font-m);
  padding: 15px;
  text-indent: -1em; 
  margin-left:1em;
}
.faq-list-item-body {
  padding: 0 15px 15px 15px;
  font-size: var(--font-s);
}
.faq-list-item-body p + p{
  margin-top:10px;
}
.faq-list-item-body strong{
  font-size:1.2em;
  font-weight:700;
}
.faq-list-item-body .qanda-link {
  color: #00a2e6;
  text-decoration: underline;
}
.faq-list-item-body .qanda-link:hover {
  color: #80d1f3;
}

@media screen and (max-width: 767px) {
  .faq-list-item {
    width: 100%;
  }
  .faq-list-item details {
    line-height: 1.5;
    font-size: 14px;
  }
}


/*-------------------------------------
アプリケーション
area-app
-------------------------------------*/
#office .sec-ttl.img-ttl{
  width: 150px;
  margin-bottom: 32px;
}

/*--スライダー--------------------*/
.area-app{
  overflow: hidden;
}
.office-slider{
  width: 100%;
  max-width: 1140px;
  margin: var(--gap-m) auto 0 auto;
}
.office-slider .swiper-container{
  width: 100%;
  margin: 0 auto 80px;
  position: relative;
  overflow: visible;
}
.office-slider .swiper-slide{
  width: 500px;
  height: auto;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  filter: drop-shadow(0px 0px 5px #666);
}
#office .office-slider img{
  width: 40%;
  margin:auto;
}

.office-slider-ttl,
.office-slider-lead{
  font-size: var(--font-m);
  font-weight: 700;
}
.office-slider-ttl strong{
  font-size: 1.4em;
  margin-right:0.5em;
}
.office-word .office-slider-ttl strong{
  color:var(--color-word);
}
.office-excel .office-slider-ttl strong{
  color:var(--color-excel);
}
.office-ppt .office-slider-ttl strong{
  color:var(--color-ppt);
}
.office-onenote .office-slider-ttl strong{
  color:var(--color-onenote);
}
.office-outlook .office-slider-ttl strong{
  color:var(--color-outlook);
}
.office-onedrive .office-slider-ttl strong{
  color:var(--color-onedrive);
}
.office-copilot .office-slider-ttl strong{
  color:var(--color-copilot);
}
.office-defender .office-slider-ttl strong{
  color:var(--color-defender);
}
.office-designer .office-slider-ttl strong{
  color:var(--color-designer);
}
.office-clipchamp .office-slider-ttl strong{
  color:var(--color-clipchamp);
}

.office-slider-list li{
  list-style: disc;
  margin-top:1em;
  font-size: var(--font-s);
  margin-left:1em;
  text-align:left;
}

.office-slider-list em{
  font-style:normal;
  font-weight:700;
}

.office-slider-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(98, 98, 98, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  backdrop-filter: blur(5px);
  position: absolute;
  bottom: -80px;
}
.office-slider-button::after {
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}
.office-slider-button--next {
  right: 0;
  transform: rotate(45deg);
}
.office-slider-button--prev {
  right: 80px;
  transform: rotate(-135deg);
}
.office-slider-button.swiper-button-disabled {
  background: rgba(220, 220, 220, 0.5);
  cursor: default;
}
@media screen and (max-width:767px){
  .office-slider{
     width: calc(100% - 30px); 
  }
  .office-slider .swiper-slide{
    padding: 20px;
    gap: 10px;
  }
  .office-slider-thumb{
    width: calc(100% + 20px + 20px);
    margin: -20px;
    margin-bottom: 10px;
  }
  .office-slider-title{
    font-size: 4.27vw;
  }
  .office-slider-body{
    font-size: 3.2vw;
  }
  .office-slider-link{
    gap: 5px;
  }
  .office-slider-link .c-button{
    padding-right: 10px;
    font-size: 3.2vw;
    height: 8.53vw;
  }
  .office-slider-link .c-button::after{
    right: 11.31px;
  }
}