@import url('https://fonts.googleapis.com/css?family=Neuton');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}
body {
    overflow-x: hidden;
    line-height: 1;
    transition: .3s;
    font-family: sans-serif;
}
ol,
ul {
    list-style: none
}
blockquote,
q {
    quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
a {
    text-decoration: none;
    cursor: pointer
}
select {

}
body,
html {
    overflow-x: hidden;
}
section {
    position: relative
}
h1 {
    font-size: 3vw;
    font-weight: bold;
    margin-bottom: 2vw;
}
h2 {
    font-size: 2.5vw;
    font-weight: bold;
    margin-bottom: 2vw;
}
/* Header styles */
header {
    background-color: #fff;
    padding: 1.5vw;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 11vw;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 2rem;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 1.1vw;
}
p {
    font-size: 1.1vw;
}
/* ナビゲーションメニューのデフォルトスタイル */
.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 2rem;
}

/* ハンバーガーメニューのスタイル（デフォルトでは非表示） */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.hamburger-menu span {
    width: 2rem;
    height: 0.25rem;
    background: #00bf78;
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}
.cta-button {
    background-color: #00bf78;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
.firstview {
    padding-right: 5vw;
}
.firstview .img_wrap{
    width: 45vw;
}
/* Hero section styles */
.flex_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.flex_wrap .flex_center p {
    text-align: left;
}
.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: 4.5vw;
    line-height: 1.5;
    margin-bottom: unset;
    color: #07BF79;
}
.catch {
    line-height: 1.5;
    font-size: 3vw;
    font-weight: bold;
}

.app-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.app-buttons img {
    height: 40px;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}
.flex_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Service section styles */
#service {
    text-align: center;
    background-color: #0BBF79;
    color: #fff;
}
#service .flex_center{
    text-align: left;
    width: 45vw;
}
section div p{
    line-height: 2.5;
}
#service .img_wrap{
    width: 55vw;
}

.service-image {
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
}

/* Wallet section styles */
.wallet-section {
    text-align: center;
}
section {
    padding: 5vw 10vw;      
}
.img_wrap {
    display: flex;
    justify-content: center;
    align-items: center;    
}
.img_wrap img{
    width: 100%;
}
#blockchain-wallet {
    background-color: #AADAAC;
    color: #707070;
}
#blockchain-wallet .flex_center {
    text-align: left;
    width: 50%;
    padding-left: 5vw;
}
#blockchain-wallet .img_wrap{
    width: 30vw;
}
.wallet-section-upper {
    display: flex;
}
.wallet-section-upper div {
    width: 50%;
}
.wallet-section-upper div{
    width: 50%;
    text-align: left;
}
#blockchain-wallet .img_wrap img {

}
#cloud-wallet {
    background-color: #fff;
    padding-left: 15vw;
    padding-right: 7vw;
}
#cloud-wallet div{
    text-align: left;
}
#cloud-wallet .icon_wrap p{
    text-align: center;
}
#cloud-wallet .flex_center {
    text-align: left;
    width: 36vw;
}
#cloud-wallet .img_wrap{
    width: 35vw;
}
.features {
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
}
.feature {
    width: 10vw;
}
.feature img {
    width: 100%;
    margin-bottom: 1rem;
}
.icon_wrap {
    display: flex;
    justify-content: center;
    gap: 15vw;
    margin-top: 5vw;
}
.item {
    width: 10vw;
}
.item img {
    width: 100%;
    margin-bottom: 1rem;
}

/* Security section styles */
#security {
    text-align: center;
    background-color: #8A6EE5;
    color: #fff;
    padding-bottom: 0;
}
#security .img_wrap{

}
#security .flex_center{

}
#security div{
    text-align: left;
}
#security div p{
    line-height: 2;
}

.security-image {
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
}

/* Partners section styles */
#partners {
    text-align: center;
    background-color: #E4D7F9;
    padding-top: 7vw;
    padding-bottom: 7vw;
}

.partner-logos {
    display: flex;
    justify-content: center;
    gap: 10vw;
    margin-top: 7vw;
}

.partner-logos img {
    width: 15vw;
}

/* Synthoria section styles */
#synthoria {
    text-align: center;
}
#synthoria .img_wrap{
    margin: 2vw auto 3vw;
}
#synthoria p{
    width: 50vw;
    margin: 2vw auto;
    line-height: 2;
}
#synthoria br {
    display: none;
}


footer {
    background-color: #f8f8f8;
    padding: 5vw 0 2vw;
    font-family: serif;
    letter-spacing: 1px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 50px;
    height: auto;
}

.logo-text {
    font-size: 24px;
    margin-left: 10px;
    color: #333;
}

.highlight {
    color: #4169e1; /* Blue color */
}
.social {

}
.social {
    color: #4169e1; /* Text color */
}

.social h4 {
    margin-bottom: 10px;
    font-size: 1.2vw;
    font-weight: normal;
}

.social ul {
    list-style: none;
    padding: 0;
}

.social ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.social ul li a {
    text-decoration: none;
    color: #4169e1;
    font-size: 1.1vw;
    display: flex;
    align-items: center;
}

.social ul li a i {
    margin-right: 8px;
}

.copy {
    text-align: center;
    color: #4169e1;
        margin-top: 3vw;
}