@charset "UTF-8";
/* CSS Document */
header {
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

header div {width: 1024px;
margin: 0 auto;}
@media (max-width: 768px)  {
header div {width: 100%;}}

header img {width: 15%;}
@media (max-width: 768px)  {
header img {width: 30%;}}

.mt32 {margin-top: 32px !important;}

article {
width: 1024px;
margin: 0 auto;
padding:0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
@media (max-width: 768px)  {
article {width: 100%;}}

.gray_bg {
background: #F6F6F6;
padding: 16px 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

time {
font-weight: 800;
font-size: 18px;
}

dl {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

a {color: #333;}

.btn a {
text-decoration: none;
background: #333;
color: #FFF;
border-radius: 8px;
display: block;
padding: 16px 0;
margin: 64px auto 16px auto;
width: 80%;
text-align: center;
font-weight: bold;
}

.have_btn {
text-align: center;
display: block;
margin: 0 auto 64px auto;
width: 80%;
}

.block_text p {
display:block;
}

.block_text p span {
padding: 8px 4px 8px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 24px;
background: #000;
color: #FFF;
font-weight: bold;
margin: 4px 0;
display: inline-block;}

h1 {
position: relative;
overflow: hidden;
color: #F6F6F6;
font-size: 80px;
white-space: nowrap;
height: 11rem;}

#campaign::after {
content:'キャンペーン概要';
font-size: x-large;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
top: -50px;
color: #333;}

#free_ok::after {
content:'無料で手続きOK';
font-size: x-large;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
top: -50px;
color: #333;}

#select::after {
content:'選ばれてSBI証券';
font-size: x-large;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
top: -50px;
color: #333;}

#flow::after {
content:'口座開設の流れ';
font-size: x-large;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
top: -50px;
color: #333;}

#attention::after {
content:'口座開設に関するご注意事項';
font-size: x-large;
display: block;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
top: -50px;
color: #333;}

#main_img {position: relative;}

#main_box {
background: rgba(0,0,0,0.5);
position: absolute;
color: #FFF;
font-weight: bold;
bottom: 0;
width: 100%;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#main_box {display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
font-size: 36px;
}
@media (max-width: 768px)  {
#main_box {font-size:inherit;}}

#main_box div:first-child {width: 20%;
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
padding-right: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
@media (max-width: 768px)  {
#main_box div:first-child {width: 40%;}}

#main_box div:last-child  {width: 6%;}
@media (max-width: 768px)  {
#main_box div:last-child  {width: 20%;}}

#attention_box p {margin-bottom: 8px;}

#nft {background-image: url("https://sbisec.akamaized.net/sbisec/images/base02/revolt2022/nft_bg@2x.png");
background-repeat: no-repeat;
background-size:100%;
-webkit-background-size: 100%;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
}

#nft div {
width: 50%;
margin: 32px auto 64px auto;
}

.dott_list {
list-style: disc;
list-style-position: inside;
text-indent: -20px;
margin-left: 30px;
}

.dott_list li {margin-bottom: 4px;}

footer {
background: #333;
color: #FFF;
padding: 16px 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

footer dl {margin: 16px 0 32px 0;}

footer dt {width: 10%;
margin-bottom: 4px;}
@media (max-width: 768px)  {
footer dt {width: 28%;}}

footer dd {width: 90%;
margin-bottom: 4px;}
@media (max-width: 768px)  {
footer dd {width: 72%;}}

#copyright {text-align: center;
font-size: 12px;
margin: 8px 0}