@charset "utf-8";

:root {
--black: #434343;
--white: #fff;
--line-gray: #bbb;
--border-gray:#D9D9D9;
--lgray: #F5F5F5;
--lblue: #EBF7FF;
--dblue: #0C62B9;
--icon-blue:#0364C6;
--text-orange: #e34f28;

--radius_l: 1.5rem;
--radius_m: 1rem;
--radius_s: .5rem;
}

.overflow-x-clip {
overflow-x: clip;
}

/*------------------------------------
fv
--------------------------------------*/
.kv {
background: #0F9EE4;
background:url("../images/kv_b-l.svg") left -14rem bottom -9rem no-repeat,
url("../images/kv_t-l.svg") left 18rem top -8rem no-repeat,
url("../images/kv_b-r.svg") right 10rem bottom -6rem no-repeat,
url("../images/kv_t-r.svg") right -7rem top -9rem no-repeat #0F9EE4;
background-size: clamp(34rem, 29.5349rem + 8.7209vw, 40rem), clamp(25rem, 18.3023rem + 13.0814vw, 34rem), clamp(21rem, 13.5581rem + 14.5349vw, 31rem), clamp(25rem, 19.7907rem + 10.1744vw, 32rem);
width: 100%;
height:  clamp(350px, 237.7193px + 14.6199vw, 400px);
overflow: hidden;
position: relative;
}

.kv-inner {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
gap: clamp(25px, 2.27vw + 10px, 60px);
margin: auto;
}

.kv-inner h1 > img {
width: clamp(340px, 250.1754px + 11.6959vw, 380px);
}
figure.kv-img {
margin-bottom:clamp(-12rem, -20.9825rem + 11.6959vw, -8rem);
width: clamp(325px, 21.8421px + 39.4737vw, 460px);
}


@media (max-width: 767.9px) {
.kv {
background:url("../images/kv_b-l.svg") left -16rem bottom -10rem no-repeat,
url("../images/kv_t-l.svg") left -1rem top -10rem no-repeat,
url("../images/kv_b-r.svg") right -7rem bottom -4rem no-repeat,
url("../images/kv_t-r.svg") right -10rem top -10rem no-repeat #0F9EE4;
background-size: clamp(32rem, 27.8034rem + 17.9856vw, 37rem), clamp(24rem, 23.1607rem + 3.5971vw, 25rem), clamp(19rem, 15.6427rem + 14.3885vw, 23rem), clamp(23rem, 20.482rem + 10.7914vw, 26rem);
height: 450px;
}
.kv-inner {
flex-direction: column;
justify-content: start;
gap: 0;
position: relative;
}
.kv-inner h1 > img {
position: relative;
padding-top: 3rem;
width: 85vw;
max-width: 330px;
z-index: 3;
}

figure.kv-img {
position: absolute;
bottom: -3rem;
margin-bottom:0;
width: 80vw;
max-width: 290px;
}
}

/*------------------------------------
text
--------------------------------------*/
h2.sub-title-border {
font-size: clamp(2.5rem, 2.164rem + 0.933vw, 3.2rem);
padding: clamp(3rem, 1.9rem + 2.9vw, 4rem) 0 clamp(2rem, .97rem + 2.9vw, 3rem);
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: center;
gap:12px;
}
h2.sub-title-border-border::after {
content: "";
position: absolute;
width: 100px;
height: 4px;
background-color: var(--border-gray);
bottom: 0;
left: calc(50% - 50px);
}

h2.sub-title-border span:nth-child(1) {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
background:var(--icon-blue);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-style: normal !important;
font-size:1.05em;
margin-right:0;
}

@media (max-width: 540px) {
h2.sub-title-border {
gap:5px;
}
h2.sub-title-border span:nth-child(1) {
width: 34px;
height: 34px;
}
}

.wappen {
display: inline-block;
padding:.25rem 1.5rem 0;
background:var(--text-orange);
color:var(--white);
border-radius: 50rem;
margin-right: .75rem;
}

.attention-icon:before {
display: inline-block;
font-family: 'icomoon';
content: "\ea21";
font-size: 1.8rem;
font-weight: normal !important;
color: #e34f28;
margin-right: 0.7rem;
}


/*------------------------------------
contents
--------------------------------------*/
section.sec-py5 {
padding: clamp(1.8rem, .56rem + 3.5vw, 3rem) 0;
}

section.sec-pt5_pb10 {
padding: clamp(1.8rem, .56rem + 3.5vw, 3rem) 0 clamp(5rem, 1.9rem + 8.8vw, 8rem) ;
}

/*アンカーリンク ナビ*/
.passkey-nav {
margin:8rem auto auto;
max-width: 650px;
background: var(--lgray);
padding: 1.5rem;
border-radius: var(--radius_l);
}

.passkey-nav ul li {
padding-bottom: 0;
}
.passkey-nav ul li a {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 1.5rem;
background: var(--white);
border-bottom:1px solid var(--border-gray);
}
.passkey-nav ul li a:hover {
background:var(--lblue);
}

.passkey-nav ul li:first-of-type a {
border-radius:1.5rem 1.5rem 0 0;
}
.passkey-nav ul li:last-of-type a {
border-bottom: none;
border-radius: 0 0 1.5rem 1.5rem;
}

.passkey-nav ul li a:after {
display: inline-block;
position: absolute;
font-family: icomoon;
font-size: 2rem;
content: "\e912";
color: var(--dblue);
transform: rotate(180deg);
right: 2rem;
margin: auto;
}

.passkey-nav ul li a > span {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background:var(--icon-blue);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size:1.2em;
line-height: 1.2;
}

/*.passkey-nav ul li a > span::after {
position: absolute;
content: "";
background:url("../images/QuestionCircle.svg") center center no-repeat;
background-size: 70%;
width: 30px;
height: 30px;
}
.passkey-nav ul li:nth-of-type(2) a > span::after {
background:url("../images/star.svg") center center no-repeat;
background-size: 75%;
}
.passkey-nav ul li:nth-of-type(3) a > span::after {
background:url("../images/Laptop.svg") center center no-repeat;
background-size: 67%;
}
.passkey-nav ul li:nth-of-type(4) a > span::after {
background:url("../images/setting.svg") center center no-repeat;
background-size: 75%;
}
.passkey-nav ul li:nth-of-type(5) a > span::after {
background:url("../images/CheckSquare.svg") center center no-repeat;
background-size: 67%;
}*/


/*パスキーアイコン３つ*/
.icon-img-bluebox {
margin: auto;
display: flex;
flex-direction: row;
justify-content: center;
gap: clamp(2.5rem, 0.2941rem + 9.1912vw, 5rem);
width: fit-content;
padding: 3rem clamp(3rem, 2.1176rem + 3.6765vw, 4rem) 2.5rem;
background: #EBF7FF;
border-radius: var(--radius_l);
text-align: center;
color: #315E97;
}

.icon-img-bluebox-inner {
display: flex;
flex-direction: column; 
gap:10px; 
}

.icon-img-bluebox-inner > div {
max-height: 70px;
}
.icon-img-bluebox-inner > div > img {
height: min(70px, 18vw);
width: auto;
object-fit: contain;
}
.icon-img-bluebox-inner > span {
margin-top:1rem;
}


/*--- パスキー認証のメリット 3つ ---*/
.passkey-point-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-inline: auto;
}
.passkey-point-inner {
display: flex;
flex-direction: column;
align-items: center;
gap:15px;
}
.passkey-point-circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 220px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--lblue);
}
.passkey-point-circle img {
width: min(65%, 138px);
}
.passkey-point-inner:nth-of-type(2) .passkey-point-circle img {
width: min(80%, 175px);
}
.passkey-point-inner:nth-of-type(3) .passkey-point-circle img {
width: min(70%, 150px);
}
.passkey-point-text {
position: relative;
padding-left: clamp(28px, 22.24px + 1.6vw, 40px);
text-align: center;
font-weight: bolder;
font-size: clamp(1.6rem, 1.5rem + 0.2667vw, 1.4rem);
}

.passkey-point-text:before {
position: absolute;
top: 50%;
left: 0;
display: block;
content: "";
width: clamp(20px, 18.08px + 0.5333vw, 24px);
height: clamp(20px, 18.08px + 0.5333vw, 24px);
background: url(../images/blue-checkmark.svg) center center no-repeat;
background-size: contain;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

@media (max-width: 767.9px) {
.passkey-point-wrap {
grid-template-columns: none;
grid-template-rows: repeat(3, 1fr);
}
.passkey-point-circle {
width: clamp(180px, 162.3096px + 4.914vw, 200px);
}





}



/*--- 表 ---*/
.compare-table-wrap .table {
table-layout: fixed;
width: 100%;
}
.compare-table-wrap .table td {
text-align: left;
}
.compare-table_first {
width: max(20%, 73px);
}
.compare-table_last {
width: 34%;
}


/*セットアップ*/
.btn-passkey > dt button {
position: relative;
padding: 1.75rem 4rem;
border: 1px solid var(--line-gray); 
border-radius: var(--radius_s);
text-align: left;
font-size: 1.5rem;
transition: all .3s ease-in-out;
margin-bottom: 1rem;
}
.btn-passkey > dt button:before {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 1.5rem;
content: "";
width: 14px;
height: 14px;
border-radius:3px;
background: var(--icon-blue);
}

.btn-passkey .card-body {
text-align: left;
}
@media (max-width: 767.9px) {
.btn-passkey .card-body {
padding:1.25rem 0;
}
}


.btn-passkey .card-body > .d-flex > div {
width: 100%;
}


/*--- FAQ ---*/
/*.passkey-faq {
border-bottom: 1px  solid var(--border-gray);
}
.passkey-faq .btn-faq {
margin-bottom: 0 !important;
}*/
.passkey-faq .btn-faq > dt button {
background: var(--white);
/*padding: 2rem 3.6rem 2rem 4.2rem;
margin-bottom: 0;
border-top: 1px solid var(--border-gray);*/
padding: 1.75rem 4rem;
border: 1px solid var(--line-gray); 
border-radius: var(--radius_s);
}
/*.passkey-faq .btn-faq dd .card-body {
background: var(--lgray);
border:0;
margin-bottom: 0;
}*/