@charset "utf-8";

:root {
  --gap-ss: clamp(5px, 0.17rem + 0.61vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.989rem + 5.68vw, 60px);

  --color-blue: #0078d4;
}

/*------------------------------------------
基本レイアウト
------------------------------------------*/

.windows11{
  position:relative;
  width:100%;
  text-align:center;
  padding-bottom:var(--gap-l);
}

.windows11 img{
  width:100%;
  object-fit: contain;
  margin-inline: auto;
}

/*------------------------------------------
共通レイアウト
------------------------------------------*/
.cont-section {
  position:relative;
}

.cont-section-wide {
  position:relative;
  padding-block:var(--gap-l);
}

.contents-inner {
  width: calc(100% - 40px);
  max-width: 1140px;
  margin-inline: auto;
  text-align:left;
}

@media screen and (max-width: 767px) {
  .contents-inner {
    width: 100%;
    text-align:center;
  }

  .model-list-wrap{
    width: calc(100% - 30px);
  }
}


/*------------------------------------------
ページタイトル・KV
section-kv
------------------------------------------*/
.kv-wrap{
  position:relative;
  width:100%;
}

.kv-img{
  position:relative;
  width:100%;
}

.kv-txt{
  position:absolute;
  top:var(--gap-m);
  left:0;
  width:100%;
  text-align:center;
}

.logo-kv{
  margin-inline: auto;
  width:20.5%;
  margin-bottom:var(--gap-m);
}

.kv-txt h1{
  margin-inline: auto;
  font-size:clamp(25px, 0.184rem + 5.88vw, 70px);
  font-weight:700;
  color:var(--color-blue);
  line-height:1.2;
}

@media screen and (max-width: 767px) {
  .kv-txt{
    top:var(--gap-s);
  }
  .logo-kv{
    width:28%;
    min-width:90px;
    margin-bottom:var(--gap-ss);
  }
}

/*------------------------------------------
ページブロック
article-wrap
------------------------------------------*/
.article-wrap{
  position:relative;
  width:100%;
}

.article-block-img{
  position:relative;
  width:100%;
  z-index:1;
}

.article-block-txt{
  position:absolute;
  top:0;
  width:44%;
  height:100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  z-index:2;
}

.article-wrap.--left .article-block-txt{
  left:0;
}

.article-wrap.--right .article-block-txt{
  right:0;
}

.article-txt{
  position:relative;
  width:80%;
}


/*-----H2*/
.sec-ttl{
  font-size:clamp(22px, 0.824rem + 2.35vw, 40px);
  font-weight:700;
  line-height:1.2;
  color:var(--color-blue);
  margin-bottom:var(--gap-s);
}

/*-----文章*/
.lead-txt{
  font-size:clamp(14px, 0.845rem + 0.13vw, 16px);
  line-height:1.6;
}

@media screen and (max-width: 767px) {
  .article-block-txt{
    top:0;
    width:100%;
    height:auto;
    display:block;
    text-align:center;
  }

  .article-txt{
    display:block;
    position:relative;
    margin-inline: auto;
    width:100%;
    padding-inline: 20px;
  }

  .article-txt::before{
    display:block;
    position:relative;
    content:'';
    background:transparent;
    width:100%;
    height:auto;
    aspect-ratio: 750/900;
  }

  .sec-ttl,
  .lead-txt{
    text-align:center;
  }
}

/*------------------------------------------
バッテリーを気にしない毎日に
------------------------------------------*/
.battery-wrap{
  margin-block:var(--gap-l);
  width:100%;
  padding-block:40px;
  background: #000 url(../images/02-bkg-pc.webp) no-repeat top center / cover;
}

.battery-wrap-inner{
  margin-inline: auto;
  width:fit-content;
  display:flex;
  gap:var(--gap-m);
}

.battery-img{
  width:11.75%;
  max-width:120px;
}


@media screen and (max-width: 767px) {
  .battery-wrap{
    margin-top:0;
    margin-inline: auto;
    width:calc(100% - 50px);
    background: #000 url(../images/02-bkg-sp.webp) no-repeat top center / cover;
  }

  .battery-wrap-inner{
    flex-direction: column;
    text-align:center;
    padding-inline: 20px;
  }
  .battery-img{
    width:50%;
    max-width:160px;
    margin-inline:auto;
  }
}


/*------------------------------------------
いつものアプリを、Copilotでもっと便利に
------------------------------------------*/
.copilot-wrap{
  position:relative;
  width:100%;
  background: #ebe2ce;
}

.copilot-img{
  position:relative;
  width:100%;
  top:0;
  right:0;
  z-index:1;
}

.copilot-txt{
  position:absolute;
  top:var(--gap-m);
  left:6.25%;
  width:37.5%;
  z-index:2;
}

.logo-copilot{
  width:35%;
  min-width:100px;
  margin-bottom:var(--gap-m);
}

.copilot-ttl{
  color:#000;
  margin-bottom:var(--gap-s);
  font-size:clamp(22px, 1.13rem + 1.05vw, 30px);
  font-weight:700;
  line-height:1.2;
}

.btn-apply{
  margin-top:var(--gap-s);
}
 
.btn-apply a{
  display:block;
  width:fit-content;
  padding:var(--gap-ss) var(--gap-s);
  color:#fff;
  font-weight:700;
  font-size:clamp(14px, 0.845rem + 0.13vw, 16px);
  background:var(--color-blue);
  border-radius:5px;
  transition: transform 0.3s ease;
}

.btn-apply a:hover{
  opacity: 0.9;
  transform: translateY(5px);
}

@media screen and (max-width: 767px) {
  .copilot-img{
    position:absolute;
    width:100%;
  }
  .copilot-txt{
    position:relative;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    padding-block: 20px;
  }
  .logo-copilot{
    display:block;
    width:21%;
    min-width:100px;
    margin-inline: auto;
  }
  .copilot-ttl{
    position:relative;
    width:100%;
    text-align:center;
  }
  .copilot-ttl::before{
    display:block;
    position:relative;
    content:'';
    width:100%;
    aspect-ratio:750/430;
    background:transparent;
  }
  
  .btn-apply a{
    margin-inline: auto;
  }
}


/*------------------------------------------
注釈
------------------------------------------*/
sup{
  padding-right: 0.5em;
  font-size:80%;
}

.note-list{
  margin-block:var(--gap-m);
  font-size:clamp(12px, 0.72rem + 0.13vw, 14px);
}

.note-list li{
  position:relative;
}

.note-list li+li{
  margin-top:0.8em;
}

@media screen and (max-width: 767px) {
  .note-list{
    width:calc(100% - 30px);
    text-align:left;
    margin-inline: auto;
  }
}