@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);

  --color-word:#2255d1;
  --color-excel:#1d8b4d;
  --color-ppt:#d01333;
  --color-outlook:#0c78e5;
  --color-onenote:#900dca;
}

/*--レイアウト--------------------*/
.office-pipc{
  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.0;
  letter-spacing:0.01em;
}
.sec-contents{
  position:relative;
  width:100%;
  text-align:center;
  padding: var(--gap-l) 0;
}
.sec-sub-contents{
  position:relative;
  width:100%;
  text-align:center;
  padding: var(--gap-m) 0;
}
section section + section{
  margin-top: var(--gap-m) ;
}
.contents-inner{
  width:calc(100% - 30px);
  max-width:1140px;
  margin:auto;
  text-align:left;
}

/*--セクション背景--------------------*/
.sec-gray {
  background: #f6f6f6;
}
.sec-light-blue {
  background:#e2f5fb
}
.sec-blue {
  background: #004da1;
}
.sec-blue .sec-ttl,
.sec-blue .sec-sub-ttl,
.sec-blue .lead-txt{
  color: #fff;
}

/*--画像/ボタン--------------------*/
.office-pipc img{
  width:100%;
  object-fit: contain;
}
.office-pipc .c-button{
  width:100%;
}

/*--テキスト--------------------*/
.sec-ttl{
  font-size:var(--font-l);
  font-weight:700;
  line-height:1.2;
  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:clamp(14px, 0.739rem + 0.68vw, 20px);
  font-weight:700;
  margin-bottom:10px;
  line-height: 1.25;
  letter-spacing:0.05em;
}

.lead-txt{
  font-size:var(--font-m);
  line-height:1.6;
}
.note{
  font-size:var(--font-ss);
}

/*--レビューfix--------------------*/
.office-pipc .review-in-recommend__star{
  height:1em !important;
  width:auto !important;
  vertical-align: baseline;
  margin-right:0.5em;
}
.review-in-recommend__link {
  justify-content: flex-start;
}

/*-------------------------------------
キービジュアル
kv-block
-------------------------------------*/
.kv-block{
  position:relative;
  width:100%;
  margin:0;
}
.kv-back{
  position:relative;
  width:100%;
  margin:0;
}
.kv-cont{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:+1;
  display:flex;
  justify-content: flex-end;
  align-items: center;
}
.kv-cont .contents-inner {
  text-align: right;
}
.kv-block h1{
  font-size:clamp(20px, 0.795rem + 2.27vw, 40px);
  font-weight:700;
  color:#333;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 8px rgba(255, 255, 255, 0.5), 0px 0px 5px rgba(255, 252, 252, 0.4);
  line-height:1.4;
  margin-bottom:var(--gap-m);
}
.kv-block h1 strong{
  font-size:clamp(26px, 0.852rem + 3.86vw, 60px);
  font-weight:900;
  color:#000;
  display:block;
}
.kv-block .kv-lead{
  font-size:clamp(18px, 0.807rem + 1.59vw, 32px);
  font-weight:700;
  color:#111;
  margin-right:-1.5em;
  line-height:1.4;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 1280px) {
  .kv-block h1{
    margin-bottom:var(--gap-s);
  }
}

@media screen and (max-width: 767px) {
  .kv-cont{
    position:relative;
    width:100%;
    margin-bottom:var(--gap-s);
  }
  .kv-block .contents-inner{
    text-align:center;
  }
  .kv-block .kv-lead{
    margin-right:auto;
  }
}

/*--リード文--------------------*/
.lead-block{
  padding: var(--gap-m) 0;
}

/*-------------------------------------
導入
block-intro
-------------------------------------*/

/*--ナビ--------------------*/
.nav-anchor{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap-s);
}
.nav-anchor li .c-button{
  width:100%;
  height:100%;
  border-radius:20px;
  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(1, 1fr);
  }
}

/*--タイトル--------------------*/
.block-intro .sec-ttl{
  text-align:center;
  width:fit-content;
  margin-left: auto;
  margin-right: auto;
}
.sec-ttl.ico-ttl{
  display: flex;
  gap:10px;
  align-items: center;
  justify-content: center;
}
.office-pipc .sec-ttl.ico-ttl img{
  width:70px;
  filter: brightness(0) saturate(100%) invert(12%) sepia(88%) saturate(3807%) hue-rotate(201deg) brightness(105%) contrast(100%);
}

/*--3つのメリット--------------------*/
.merit-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap-m);
}
.merit-list li{
  border:2px solid #999;
  border-radius:10px;
  padding:var(--gap-s);
  text-align:center;
}
.merit-list .merit-point{
  margin:auto;
  width:30%;
  aspect-ratio: 1 / 1;
  border-radius:50%;
  background:#004da1;
  color:#fff;
  font-size:var(--font-l);
  font-weight:800;
  text-align:center;
  display:flex;
  justify-content: center;
  align-items: center;
}
.merit-list .merit-ttl{
  margin:10px 0;
  color:#004da1;
  background:#eee;
  border-radius:5px;
  font-size:var(--font-m);
  font-weight:700;
  padding:0.5em;
  line-height:1.2;
}
.merit-list .merit-txt{
  line-height:1.6;
}
@media screen and (max-width: 767px) {
  .merit-list{
    grid-template-columns: repeat(1, 1fr);
    gap:var(--gap-s);
  }
}

/*-------------------------------------
定番ツール
block-tool-list
-------------------------------------*/
.sec-ttl.img-ttl img{
  width:150px;
  margin-bottom:32px;
}

@media screen and (max-width: 767px) {
  .sec-ttl.img-ttl img{
    width:108px;
    margin-bottom:23px;
    margin-left:8px;
  }
}


/*--スライダー--------------------*/
.block-tool-list{
  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-pipc .office-slider img{
  width: 40%;
  margin:auto;
}

.office-slider-ttl,
.office-slider-lead{
  font-size: var(--font-m);
  font-weight: 700;
  line-height: 1.2;
}
.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-slider-list li{
  list-style: disc;
  line-height: 1.2;
  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;
  }
}

/*----------------------------------------------------
Office 2024 新機能紹介
block-new-feature
----------------------------------------------------*/
.block-new-feature .sec-catch{
  font-size:var(--font-l);
  font-weight:900;
  color:#004da1;
  text-align:center;
  margin-bottom:1em;
}
.block-new-feature .sec-ttl{
  background:#666;
  padding:0.5em;
  color:#fff;
  text-align:center;
}

/*--機能リスト--------------------*/

.feature-list{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:var(--gap-m);
}
.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:20px;
}
.feature-list .feature-hd{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
}
.office-pipc .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:20px;
  border-bottom:1px solid #999;
}
.feature-list .feature-lead{
  font-weight:700;
}
.feature-list .feature-txt{
  font-size:var(--font-s);
  line-height:1.6;
}
.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-pipc .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 2024とMicrosoft 365比較
block-comparison
----------------------------------------------------*/
.office-comparison{
  margin-top:var(--gap-m);
  width:100%;
}
.office-comparison th{
  border:1px solid #ccc;
  padding:1em;
  background:#eee;
  font-weight:700;
  text-align: center;
  vertical-align: middle;
  font-size:var(--font-s);
  line-height:1.4;
  width:20%;
}
.office-comparison td{
  border:1px solid #ccc;
  background:#fff;
  padding:1em;
  text-align: center;
  vertical-align: middle;
  font-weight:500;
  font-size:var(--font-m);
  line-height:1.4;
  width:40%;
}
.office-comparison td.office2024{
  background:#f0c79f;
}
.office-comparison td.microsoft365{
  background:#9fd6f0;
}
.office-comparison .license{
  margin-bottom:0.5em;
  padding:0.5em;
  width:100%;
  border-radius:5px;
  border:1px solid #ccc;
  font-weight:700;
  font-size:var(--font-s);
}
.office-comparison .license.office2024{
  border-color:#f0c79f;
  color:#c7701a;
}
.office-comparison .license.microsoft365{
  border-color:#9fd6f0;
  color:#2584b0;
}

@media screen and (max-width: 767px) {
  .office-comparison + .office-comparison{
    margin-top:var(--gap-s);
  }
  .office-comparison th{
    width:30%;
  }
  .office-comparison td{
    width:70%;
  }
}

/*----------------------------------------------------
FAQ
----------------------------------------------------*/
.faq-list {
  margin-top:var(--gap-m);
  display: flex;
  gap: 20px;
  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.2;
  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 {
    width: 100%;
    margin: 0 auto;
  }
  .faq-list-item {
    width: 100%;
  }
  .faq-list-item details {
    line-height: 1.5;
    font-size: 14px;
  }
}

/*----------------------------------------------------
通販スタッフおすすめモデル
block-reccomend
----------------------------------------------------*/
.sec-ttl-fukidashi{
  position:relative;
  padding: 0.5em 1em 0.7em;
  border-radius:10px;
  margin-bottom:20px;
  font-size:var(--font-s);
  font-weight:700;
  background:#ff0;
  width:fit-content;
}
.sec-ttl-fukidashi::after{
  position:absolute;
  bottom:-14px;
  left:calc((100% - 15px) / 2);
  content:'';
  display: block;
  width: 15px;
  height: 15px;
  background: #ff0;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

/*--おすすめモデル--------------------*/
.reccomend__card-wrap{
  width:100%;
}

/*------モデルブロック--*/
.reccomend__card-list{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:var(--gap-s);
}

.reccomend__card-list li.c-panel-arrow {
  border: none;
}
.reccomend__card-list li.c-panel-arrow::after {
  background-color: #ececec;
  border-radius: 2rem;
  right:7px;
  bottom:7px;
}
.reccomend__card-list li.c-panel-arrow::before {
   right: 14px;
   bottom: 13px;
   border-color: #a3a3a3;
}

.reccomend__card-list li .model-card {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius: 15px;
  padding:20px;
  gap:10px;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
}
.reccomend__card-list li .model-card .model-card-top,
.reccomend__card-list li .model-card .model-card-btm{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.reccomend__card-list li .model-card:hover {
  cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(0, 162, 230, 0.4));
}
.reccomend__card-list li .model-card::after {
  content: "";
  width: 34px;
  height: 30px;
  display: block;
  position: absolute;
  right: 10px;
  top: 10px;
}

/*ランキング*/
.reccomend__card-list.ranking-list li .model-card::before {
  content: "";
  width: 110px;
  height: 110px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.reccomend__card-list.ranking-list li:nth-child(1) .model-card::after {
  background: url(../../gaming-pc/images/gamingnote-pc/icon-pc-rank-1.svg) no-repeat 50% 50% / cover;
}
.reccomend__card-list.ranking-list li:nth-child(2) .model-card::after {
  background: url(../../gaming-pc/images/gamingnote-pc/icon-pc-rank-2.svg) no-repeat 50% 50% / cover;
}
.reccomend__card-list.ranking-list li:nth-child(3) .model-card::after {
  background: url(../../gaming-pc/images/gamingnote-pc/icon-pc-rank-3.svg) no-repeat 50% 50% / cover;
}
.reccomend__card-list.ranking-list li:nth-child(4) .model-card::after {
  background: url(../../gaming-pc/images/gamingnote-pc/icon-pc-rank-4.svg) no-repeat 50% 50% / cover;
}

.model-card-name {
  margin-bottom: 10px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: clamp(13px, 0.744rem + 0.34vw, 16px);
  line-height: 1.4;
  font-weight:700;
}
.model-card-img {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  text-align:center;
}
.model-card-img img{
  width: 70%;
  margin:auto;
}
.model-card-icon {
  position: relative;
  z-index:+1;
  display: flex;
  gap:10px;
  font-size:(--font-s);
  font-weight: 700;
}
.model-card-icon .icon-display{
  padding: 6px 12px;
  background: #ececec;
  border-radius: 1em;
  display: block;
}
.model-card-icon .icon-display small {
  font-size: (--font-ss);
  bottom: 0;
  font-weight: 400;
}
.model-card-icon .icon-light{
  padding: 6px 12px;
  background: #999;
  border-radius: 1em;
  color:#fff;
  display: block;
}
.model-card-review {
  font-size: 13px;
}
.model-card-spec {
  display: block;
  margin-bottom: 0.5rem;
}
.model-card-spec > li {
  width: auto;
  display: inline-block;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 13px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.model-card-spec > li+li::before {
  content: "/";
  padding-right:0.2em;
}
.model-card-stkname {
  padding: 5px 12px 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 1em;
  color: #e43344;
  border: 1px solid #e43344;
  display: inline-block;
  width:fit-content;
}
.model-card-price {
  font-size: clamp(10px, 0.58rem + 0.23vw, 12px);
  font-weight: 400;
}
.model-card-price .main_price{
  font-size: clamp(18px, 1.034rem + 0.45vw, 22px);
  font-weight: 700;
}

@media screen and (max-width: 1280px) {
  .model-card-icon .icon-display,
  .model-card-icon .icon-light{
    padding: 6px;
  }
}

@media screen and (max-width: 767px) {
  .reccomend__card-list {
    grid-template-columns: repeat(2,1fr);
  }
  
  .reccomend__card-list li .model-card {
    border-radius: 6px;
    padding:15px 10px;
  }
  .reccomend__card-list li.c-panel-arrow::before {
    right: 13px;
    bottom: 12px;
  }
  .reccomend__card-list li .model-card::after {
    width: 30px;
    height: 26px;
    top:6px;
    right:6px;
  }

  .model-card-name {
    -webkit-line-clamp: 3;
    margin-bottom: 10px;
    padding-right: 30px;
    line-height: 1.2;
  }

  .model-card-review {
    font-size: 11px;
  }
  .model-card-spec > li {
    font-size: 11px;
  }
  .model-card-stkname {
    padding: 3px 12px 2px 12px;
    font-size: 12px;
  }
}

/*カテゴリタイトル*/
.model-card .model-card-hd{
  padding-left: 10px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  line-height:1.2;
}
.model-card .model-card-hd::before{
  content: "";
  height: 100%;
  width:2px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.reccomend__card-list li:nth-child(1) .model-card-hd::before{
  background: #ed5e8d;
}
.reccomend__card-list li:nth-child(2) .model-card-hd::before{
  background: #00a7b0;
}
.reccomend__card-list li:nth-child(3) .model-card-hd::before{
  background: #565a8f;
}
.reccomend__card-list li:nth-child(4) .model-card-hd::before{
  background: #aa5ce3;
}
@media screen and (max-width: 767px) {
 .model-card .model-card-hd{
    padding-left: 2.13vw;
    font-size: 3.2vw;
  }
}

/*----------------------------------------------------
モデルスライダーブロック
block-model
----------------------------------------------------*/
.block-model{
  overflow: hidden;
}


.model-list-wrapper {
  margin:var(--gap-m) auto 0 auto;
  position:relative;
  width: calc(100% - 30px);
  max-width: 1140px;
  box-sizing: border-box;
}
.model-list-wrapper .model-list__swiper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.model-list > li{
  position:relative;
  height: auto;
  padding:20px;
  border-radius:15px;
  background:#fff;
  text-align:left;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap:10px;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
}

.model-list .model-top,
.model-list .model-btm{
  display:flex;
  flex-direction: column;
  gap:10px;
}

.model-list__button{
  position: absolute;
  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;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  backdrop-filter:blur(5px);
}
.model-list__button::after{
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}
.model-list__button-prev{
  left: -80px;
  transform: rotate(-135deg);
}
.model-list__button-next{
  right: -80px;
  transform: rotate(45deg);
}
.model-list__button.swiper-button-disabled{
  background: rgba(220,220,220,0.5);
  cursor: default;
}

/*リスト中身*/
.model-list__name{
  display: -webkit-box;
  overflow: hidden;
  height:2.7em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
  line-height: 1.4;
  font-weight: 700;
}



.model-list__img{
  position:relative;
  text-align:center;
}
.model-list__img img{
  width:70% !important;
  margin:auto;
}
.model-list__icon {
  position:relative;
  display: flex;
  gap:5px;
  margin-bottom:5px;
}
.model-list__icon .icon-display{
  display: block;
  padding: 6px 8px;
  background: #ececec;
  font-weight: 700;
  border-radius: 2em;
}
.model-list__icon .icon-display small {
  font-size: 10px;
  bottom: 0;
  font-weight: 400;
}
.model-list__icon .icon-light {
  display: block;
  padding: 6px 8px;
  background: #999;
  color:#fff;
  font-weight: 500;
  border-radius: 2em;
}
.model-list__review{
  font-size: 12px;
}
.model-list__spec > li {
  width: auto;
  display: inline-block;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 12px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.model-list__spec > li + li:before{
  content:' / '
}
.model-list__stkname{
  padding: 5px 12px 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 1em;
  color: #e43344;
  border: 1px solid #e43344;
  display: inline-block;
  width: fit-content;
}
.model-list__price {
  font-size: clamp(10px, 0.58rem + 0.23vw, 12px);
  bottom: 0;
}
.model-list__price .main_price {
  font-size: clamp(18px, 1.034rem + 0.45vw, 22px);
  font-weight: 700;
}


/*----------------------
カテゴリ別から探してみる
-----------------------*/
.category-link{
  margin-top:var(--gap-m);
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px 30px;
}

@media screen and (max-width:767px){
  .category-link{
    grid-template-columns: repeat(1, 1fr);
    gap:10px;
  }
}



/*--------------------------------
サポートリンク
support-link
--------------------------------*/
.support-link a img{
  border:1px solid #004da1;
}
.support-link a:hover{
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

/*--------------------------------
サポート体制
--------------------------------*/
.p-about-dospara__bto-recommend{
  margin-top:var(--gap-m);
}
/*--------------------------------
Slider
--------------------------------*/
.lp-slide {
  overflow: hidden;
}

.lp-slide-list-wrapper {
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
}

.lp-slide-list>li {
  /* width: 270px; */
  height: auto;
}

.lp-slide-list>li a:hover {
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

.lp-slide-card {
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 20px 15px 8px;
  height: 100%;
  line-height: 1.5;
  border: 2px solid var(--color-primary);
}

.lp-slide-card__img {
  height: 63px;
  text-align: center;
  margin-bottom: 16px;
}

.lp-slide-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lp-slide-card__heading {
  height: 3em;
  font-size: 14px;
  font-weight: bold;
  min-height: 2lh;
  text-align: center;
  margin-bottom: 8px;
}

.lp-slide-card__body,
.lp-slide-card__more {
  font-size: 12px;
}

.lp-slide-card__body {
  margin-bottom: 30px;
}

.lp-slide-card__more {
  margin-top: auto;
  margin-bottom: 0;
  text-align: right;
}

.lp-slide-card .c-button {
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.lp-slide-card .c-button::after {
  border-color: #fff;
}

@media screen and (min-width: 768px) {
  .lp-slide-card {
    padding: 30px 20px 20px;
  }

  .lp-slide-card__img {
    height: 83px;
  }

  .lp-slide-card__heading {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .lp-slide-card__body,
  .lp-slide-card__more {
    font-size: 14px;
  }
}

.lp-slide__navigation {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin: 20px auto;
}

.lp-slide__prev,
.lp-slide__next {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #004da1;
  cursor: pointer;
}

.lp-slide__prev:hover,
.lp-slide__next:hover {
  opacity: 0.7;
}

.lp-slide__prev::before,
.lp-slide__next::before {
  content: "";
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotateZ(-135deg);
  margin-left: 6px;
}

.lp-slide__next::before {
  transform: rotateZ(45deg);
  margin-left: 0;
  margin-right: 6px;
}

@media screen and (max-width:767px) {
  .lp-slide {
    padding: 0 0 45px;
  }
}

/*--------------------------------
受賞履歴
--------------------------------*/
.awards_received_wrap {
  border: 10px solid #EAEABF;
  margin-bottom: 25px;
  padding: 10px;
}