@charset "utf-8";
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video, a):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
}
a:hover, a:focus, a:active{color: var(--fontColor);} 
body.devPc a:hover{opacity: 1;}
#container > .wrapContent {
padding: 0;
width: 100%;
}

@media screen and (min-width: 701px) {
    a[href^="tel:"] {
    pointer-events: none;
    }
    }

#container > .wrapContent {
padding: 0;
width: 100%;
}
/*========= ▼特選特集用 ===============*/
:root {
--fontColor:#000;
--primaryColor:#abcd03;
--secondaryColor:#D4FF00;
--redColor:#C80000;
--whiteColor:#fff;
--shadowColor:rgba(0, 0, 0, 0.35);
--wglassColor:rgba(255, 255, 255, .7);
--bglassColor:rgba(0, 0, 0, .15);
--btnColor:#464646;
}
.font_small {font-size: 80%;}
.font_ss{font-size: 70%;}
.font_sss{font-size: 62%;}
.font_large {font-size: 130%;}
.font_ll{font-size: 155%;}
.line_center {text-align: center;}
.line_right{text-align: right;}
.line_left{text-align: left;}
.font_bold{font-weight: bold;}
.font_red {color: var(--redColor);}
img {width: auto;max-width: 100%;vertical-align: bottom;}
.pagesUi{z-index: 999;}

#lp-content{overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;line-height: 1.7;color: var(--fontColor);max-width: 2040px;margin: auto;}


/*========= ▲特選特集用 ===============*/

#HEADER .global{display: none;}
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}

/*========= LoadingのためのCSS ===============*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    background: var(--fontColor);
    z-index: 999;
}
/* HTML: <div class="loader"></div> */
.loader {
  height: 15px;
  aspect-ratio: 5;
  display: grid;
  --_g: no-repeat radial-gradient(farthest-side,#fff 94%,#0000);
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  background:
    var(--_g) left,
    var(--_g) right;
  background-size: 20% 100%;
  animation: l32 1s infinite; 
}
.loader:after { 
  background:
    var(--_g) calc(1*100%/3),
    var(--_g) calc(2*100%/3);
  background-size: 20% 100%;
  animation-direction: reverse;
}
@keyframes l32 {
  80%,100% {transform:rotate(.5turn)}
}/*=========▲ LoadingのためのCSS▲ ===============*/

#lp-content .includeSCT .item{background-color: var(--wglassColor)!important;padding: 22px;}
#lp-content .includeSCT .tag .stockLabel .outStock{
    background: red;
    color: #fff;
}
.includeSCT .cont{padding-bottom: 0;}
#lp-content ul.action {display: none;}
section{padding: 5% 0;position: relative;}
#sec01{padding: 0;}
.secInner{max-width: 1290px;width: 90%;position: relative;margin: 0 auto;}
.leadTxt{font-size: clamp(14px, 1.4vw, 22px);text-align: center;width: 90%;margin: auto;}
.topBtn_area{position: absolute;width: 50%;bottom: 0;right: 0;padding: 5%;}
.topBtn_area a {color: var(--whiteColor);display: block;}
.flexTop{display: flex;justify-content: space-around;flex-wrap: wrap;}
.flexTop li {flex-basis: 46%;margin: 2%;}
.flexTop li a {display: block;background: var(--bglassColor);border: 2px solid var(--whiteColor);border-radius: 10px;text-align: center;padding: 1em .4em;font-size:clamp(16px, 1.5vw, 24px);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);transition: all .5s;position: relative;}
#lp-content .icon {margin: auto 5px;}
.flexTop li a .icon{position: absolute;top: 50%;right: 1%;transform: translateY(-50%);}
.flexTop li a img{width: 58%;margin-left: -5%;vertical-align: middle;}
#sec02{padding: 3% 0;}
#sec03{background: url("smartphone_2025/bg01.jpg?$staticlink$") top center no-repeat;background-size: cover;background-attachment: fixed;}
#lp-content section h2 {font-size: clamp(21px, 2.65vw, 42px);color: var(--whiteColor);text-align: center;font-weight: 400;}
.sumWrapper{margin: 1% auto;}
.flexSum{display: flex;justify-content: space-around;align-items: center;}
.flexSum .sumTxt {flex-basis: 50%;}
.flexSum .sumImg {flex-basis: 48%; margin-left: 2%;}
.bBox{border: 1px solid var(--whiteColor);background: var(--bglassColor);padding: 1.5em;border-radius: 15px;color: var(--whiteColor);backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);}
#lp-content h3 {font-size: clamp(22px, 2vw, 32px);color: var(--secondaryColor);text-align: center;}
#lp-content h3 span {border-bottom: 1px solid var(--secondaryColor);}
#lp-content h4{font-size: clamp(12px, 0.95vw, 15px);color: var(--whiteColor);text-align: center;line-height: 1;}
.sumWrapper ol {list-style-type: decimal;margin: 2em 0 1em 1.5em;font-size: clamp(14px, 1.25vw, 20px);}
.sumWrapper ol li {margin-bottom: 10px;padding-left: 10px;}
.flexPro {display: flex;justify-content:center;}
.flexPro > li {flex-basis: 35%;margin: 0;}
.flexPro > li a {display:block;overflow: hidden;}
.flexPro > li a img{width: 100%;display: block;transition: all .5s;}
.includeSCT .image img{max-width: 600px;}
.pro-box{margin-top: 10px;}
.proTitle{ font-size: clamp(14px, 1.1vw, 17px);}
.proPrice{font-size: clamp(15px, 1.15vw, 18px);font-weight: 700;text-align: right;margin-top: 10px;color: var(--redColor);}
.btn01{background: var(--btnColor);border-radius: 10px;text-align: center;color: var(--whiteColor); font-size: clamp(17px, 1.25vw, 20px);font-weight: 500;padding: .85em;display: block;margin-top: 10px;transition: all .5s;}
#sec04{background: url("smartphone_2025/bg02.jpg?$staticlink$") top center no-repeat;background-size: cover;background-attachment: fixed;}
.flexSum.rev {display: flex;justify-content: space-around;align-items: center;flex-direction: row-reverse;}
.flexSum.rev .sumImg {flex-basis: 48%; margin-left: 0;margin-right: 2%;}
#sec05{background: url("smartphone_2025/bg03.jpg?$staticlink$") top center no-repeat;background-size: cover;background-attachment: fixed;}
#sec06{background: url("smartphone_2025/bg04.jpg?$staticlink$") top center no-repeat;background-size: cover;background-attachment: fixed;}
#btnArea{
    background:url("smartphone_2025/bg04.jpg?$staticlink$") bottom center no-repeat;
    background-size: cover;background-attachment: fixed;
}
.btnAriaBox{
    margin: 3% auto;
    text-align: center;
}
.btnAriaBox a {
    display: inline-block;
    position: relative;
    color: var(--whiteColor);
    font-size: clamp(18px, 2.25vw, 36px);
    font-weight: 400;
    background: var(--bglassColor);
    border: solid 1px var(--whiteColor);
    border-radius: 10px;
    padding: 0.7em 2em;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: center;
    transition: all .5s;
}

#sec07{background: url("smartphone_2025/bg05.jpg?$staticlink$") top center no-repeat;background-size: cover;background-attachment: fixed;}
#sec07 .flexPro {margin-top: 6%;flex-wrap: wrap;}
#sec08{background: url("smartphone_2025/bg99.jpg?$staticlink$") top center no-repeat;background-size: cover;}
.btnWrapper {margin-top: 6%;}
.flexBtn {display: flex;flex-wrap: wrap;}
.flexBtn li {flex-basis: 23%;margin: 0 1%;}
.otherBtn{display: block flex;background: var(--bglassColor);border: 1px solid var(--whiteColor);border-radius: 10px;padding: 1em;font-size: clamp(18px, 1.4vw, 22px);font-weight: 500;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);text-align: center;transition: all .5s;justify-content: center;align-items: center;}
.flexBtn a.otherBtn{color: var(--whiteColor);}
.iphoneTxt{font-size: clamp(20px, 1.9vw, 30px);font-weight: 500;line-height: 1;}
#link01, #link02, #link03, #link04, #link05{padding-top: 90px;margin-top: -90px;}
@media (any-hover: hover) {
/*:hover はここに書く*/
  body.devPc #lp-content a:hover{opacity: 1;}
  .flexTop li a:hover {backdrop-filter: blur(0px);-webkit-backdrop-filter: blur(0px);}
  .btn01:hover {background: var(--whiteColor);color: var(--fontColor);}
  .otherBtn:hover {backdrop-filter: blur(0);-webkit-backdrop-filter: blur(0);}
    .flexPro > li a:hover img{transform: scale(1.05);}
.btnAriaBox a:hover{
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}
}

/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}

/************************************************************/@media screen and (max-width: 820px) {
#link01, #link02, #link03, #link04, #link05{padding-top: 100px;margin-top: -100px;}
  .flexPro > li {flex-basis: 50%;}
  .flexTop li {padding: .1em .1em;}
  .topBtn_area{padding: 2%;bottom: -1%;}
  .bBox{padding: 1em;}
  .flexSum{margin-top: 5%;margin-bottom: 5%;}
  .flexBtn li{flex-basis: 46%;margin: 2%;}
  .flexPro > li{padding: 1.2em;}
}
/************************************************************/@media screen and (max-width: 700px) {
  section{padding: 10% 0;}
    #sec02{padding: 6% 0;}
  .topBtn_area{padding: 3% 3% 7%;width: 100%;}
  .leadTxt{text-align: left;}
  #lp-content section h2{line-height: 1.5;}
  .flexSum, .flexSum.rev {flex-direction: column-reverse;}
  .proWrapper{margin-top: 12%;padding: 0 4%;}
  .flexPro{flex-direction: column;}
  .flexPro > li:not(:last-child) {margin-bottom: 7%;}
  #sec03{background-position:top right;}
    #sec05, #sec06, #sec07{background-position: top left;}
  .btnWrapper{margin: 7%;}
  .flexBtn{flex-direction: column;}  
    .flexSum .sumImg{margin-bottom: 5%;}
#link01, #link02, #link03, #link04, #link05{padding-top: 44px;margin-top: -44px;}
}