@charset "utf-8";
body {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/* 蛻晄悄迥ｶ諷九〒繝壹 繧ｸ蜈ｨ菴薙ｒ騾乗 縺ｫ */
#content {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}


/* 繝ｭ繧ｴ繧堤判髱｢荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* 繝壹 繧ｸ繧帝國縺  */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 繝ｭ繧ｴ縺ｮ繧ｵ繧､繧ｺ繧偵Ξ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢  */
#preloader img {
    width: 50%;
    height: auto;
    transition: width 0.3s ease-in-out;
}

/* 繧ｹ繝槭 逕ｨ 亥ｹ 600px莉･荳具ｼ  */
@media (max-width: 600px) {
    #preloader img {
        width: 100%;
    }
}

/* 繧ｿ繝悶Ξ繝 ヨ逕ｨ 亥ｹ 1024px莉･荳具ｼ  */
@media (max-width: 1024px) {
    #preloader img {
        width: 60%;
    }
}

/* 繝輔ぉ繝ｼ繝峨う繝ｳ繝ｻ繝輔ぉ繝ｼ繝峨い繧ｦ繝医い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
#content {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ遖∵ｭ｢ */
body.no-scroll {
    overflow: hidden;
}



.mainvisual {
    max-width: 100%;
    width: 100vw;
    height: auto;
}

.maincopyright {
    position: absolute;
    bottom: 10px; /* 菴咲ｽｮ繧定ｪｿ謨ｴ */
    right: 10px;  /* 菴咲ｽｮ繧定ｪｿ謨ｴ */
    color: rgb(0, 0, 0); 
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5%;
}

.catchphrase{
    text-align: center;
    margin-bottom: 24px;
}

.catchphrasep {
    margin: 0 auto;
    max-width: 696px;
    font-size: 24px;
    text-align: center;
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    background-color: floralwhite;
    padding: 16px 0;
}

.marquee {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: scroll 30s linear infinite;
}

.marquee img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    margin-right: 320px; /* 逕ｻ蜒城俣縺ｮ髫咎俣繧堤｢ｺ菫  */
}

/* 辟｡髯舌せ繧ｯ繝ｭ繝ｼ繝ｫ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.tezukacopyright{
    font-size: 14px;
    text-align: right;
    margin-right: 5%;
}

.lineuptezukacopyright{
    font-size: 14px;
    text-align: right;
    margin-right: 5%;
}

.lineup{
    background-color: #FFF44F;
}

.puroductlineup{
    text-align: center;
    margin-bottom: 24px;
    margin-top: 112px;
    background-color: #FFF44F;
    padding: 16px;
    border-radius: 8px;
}

.product-list {
    display: flex;
    justify-content: center;
    gap: 160px;
    margin-top: 32px;
    background-color: #FFF44F; /* 繧ｴ繝ｼ繝ｫ繝臥ｳｻ縺ｮ閭梧勹濶ｲ */
    padding: 40px 0; /* 荳贋ｸ九 菴咏區繧定ｿｽ蜉  */
    border-radius: 16px; /* 隗偵ｒ荳ｸ縺上☆繧  */
}


.product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-item img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.product-item img:hover {
    transform: scale(1.1);
}

/* 雉ｼ蜈･繝懊ち繝ｳ繝 じ繧､繝ｳ */
.purchase-button {
    display: inline-block;
    margin-top: 32px;
    padding: 12px 24px;
    font-size: 16px;
    color: white;
    background-color: #d4af37; /* 繧ｴ繝ｼ繝ｫ繝峨き繝ｩ繝ｼ */
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.purchase-button:hover {
    background-color: #b7952b; /* 豼 ＞繧ｴ繝ｼ繝ｫ繝  */
    transform: scale(1.05);
}

.paa{
    text-align: center;
}

.eximg{
    padding-top: 112px;
    max-width: 600px;
    width: 50%;
    height: auto;
    display: block;  /* 逕ｻ蜒上ｒ荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
    margin: 0 auto;
}

.explan{
    text-align: center;
    margin-bottom: 24px;
    margin-top: 112px;
}

.explanp{
    margin: 0 auto;
    max-width: 696px;
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.explanimgs {
    max-width: 696px;
    width: 50%;  /* 菫ｮ豁｣  'widows' 竊  'width' */
    height: auto;
    display: block;  /* 逕ｻ蜒上ｒ荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
    margin: 0 auto;
    margin-bottom: 36px;
}

.explanimgs2 {
    max-width: 696px;
    width: 50%;  /* 菫ｮ豁｣  'widows' 竊  'width' */
    height: auto;
    display: block;  /* 逕ｻ蜒上ｒ荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
    margin: 0 auto;
    margin-bottom: 224px;
}

.footer {
    margin-top: 64px;
    padding: 16px 0;
    background-color: #3c3c3c; 
    text-align: center;
}

.footer-logo {
    width: 200px;
    height: auto;
    margin-top: 8px;  /* 繝ｭ繧ｴ荳翫↓112px縺ｮ菴咏區繧定ｿｽ蜉  */
}


/* 繝ｪ繝ｳ繧ｯ縺ｮ繧ｳ繝ｳ繝 リ */
.footer-nav {
    margin-top: 16px;  /* 繝ｭ繧ｴ縺ｨ繝ｪ繝ｳ繧ｯ縺ｮ髢薙 繧ｹ繝壹 繧ｹ */
}

/* 繝ｪ繝ｳ繧ｯ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.footer-nav a {
    margin: 0 8px;           /* 繝ｪ繝ｳ繧ｯ髢薙 繧ｹ繝壹 繧ｹ */
    font-size: 16px;
    color: white;             /* 繝ｪ繝ｳ繧ｯ縺ｮ蝓ｺ譛ｬ濶ｲ */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #d4af37;          /* 繝帙ヰ繝ｼ譎ゅ↓繧ｴ繝ｼ繝ｫ繝峨き繝ｩ繝ｼ縺ｸ螟画峩 */
}

footer p {
    margin-top: 16px;
    font-size: 14px;  /* 驕ｩ蛻 ↑螟ｧ縺阪＆縺ｫ險ｭ螳  */
    color: #777;
}

/* 蜈ｨ菴薙 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢  */
body {
    background-color: floralwhite;
}

/* 繧ｹ繝槭 逕ｨ縺ｮ繝｡繧､繝ｳ繝薙ず繝･繧｢繝ｫ蛻 ｊ譖ｿ縺  */
@media (max-width: 600px) {
    .mainvisual {
        content: url("https://gigaplus.makeshop.jp/kinchara/tezuka-K24card/img/visual/mainimg-mobile.png"); /* 繧ｹ繝槭 逕ｨ逕ｻ蜒  */
    }
}

/* 繝ｬ繧､繧｢繧ｦ繝郁ｪｿ謨ｴ 域ｨｪ荳ｦ縺ｳ縺九ｉ邵ｦ荳ｦ縺ｳ縺ｸ   */
@media (max-width: 600px) {
    .product-list {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .footer-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* iPad繧ｵ繧､繧ｺ  1024px莉･荳具ｼ峨 蝠 刀繝ｩ繧､繝ｳ繝翫ャ繝苓ｪｿ謨ｴ */
@media (max-width: 1024px) {
    .product-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 80px;
    }
}

/* 繧ｹ繝槭 繧ｵ繧､繧ｺ縺ｮ繧ｹ繝ｩ繧､繝峨す繝ｧ繝ｼ隱ｿ謨ｴ */
@media (max-width: 600px) {
    .marquee-container {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
        display: flex;
        justify-content: center;
    }
    
    .marquee {
        display: flex;
        flex-wrap: nowrap;
        animation: scroll 30s linear infinite;
    }
    
    .marquee img {
        width: 120px;
        height: auto;
        margin-right: 120px; /* 逕ｻ蜒城俣縺ｮ繧ｹ繝壹 繧ｹ繧定ｪｿ謨ｴ */
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 120% !important; /* 蠑ｷ蛻ｶ逧 ↓驕ｩ逕ｨ */
    }

    p {
        font-size: 100% !important; /* 蠑ｷ蛻ｶ逧 ↓驕ｩ逕ｨ */
    }

    .tezukacopyright{
        font-size: 12px  !important;
    }

    .maincopyright{
        font-size: 12px  !important;
    }
}

/* 繧ｹ繝槭 繧ｵ繧､繧ｺ 亥ｹ 600px莉･荳具ｼ峨 繧ｹ繝ｩ繧､繝峨す繝ｧ繝ｼ隱ｿ謨ｴ */
@media (max-width: 600px) {
    .marquee-container {
        overflow: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        white-space: nowrap;
    }
    
    .marquee {
        display: flex;
        animation: scroll-mobile 20s linear infinite;
        will-change: transform;
    }

    .marquee img {
        width: 120px;
        height: auto;
        margin-right: 40px; /* 逕ｻ蜒城俣縺ｮ繧ｹ繝壹 繧ｹ繧定ｪｿ謨ｴ */
    }
}

/* 繧ｹ繝槭 逕ｨ縺ｮ繧ｹ繝 繝ｼ繧ｺ縺ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ */
@keyframes scroll-mobile {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-30%);
    }
}

/* PC縺ｧ縺ｯ繝帙ヰ繝ｼ縺ｧ逕ｻ蜒上ｒ蛻 ｊ譖ｿ縺  */
@media (min-width: 601px) {
    .hover-img:hover {
        content: attr(data-hover);
    }
}

/* 繝輔ャ繧ｿ繝ｼ縺ｮ繝ｭ繧ｴ繧ｵ繧､繧ｺ繧貞崋螳  */
.footer-logo {
    width: 200px; /* PC繧ｵ繧､繧ｺ縺ｧ蝗ｺ螳  */
    height: auto;
}

@media (max-width: 600px) {
    .footer-logo {
        width: 200px; /* 繧ｹ繝槭 縺ｧ繧１C繧ｵ繧､繧ｺ繧堤ｶｭ謖  */
    }
}

.explanimgs, .explanimgs2,.eximg {
    width: 60%;  
    min-width: 300px; /* 譛€蟆上し繧､繧ｺ繧定ｨｭ螳  */
    height: auto;
    display: block;  
    margin: 0 auto;
    margin-bottom: 24px;
}

/* 繧ｹ繝槭 蟇ｾ蠢懶ｼ亥ｹ 600px莉･荳具ｼ  */
@media (max-width: 600px) {
    .explanimgs, .explanimgs2, .eximg {
        width: 80%;  /* 繧ｹ繝槭 縺ｧ縺ｯ蟆代＠螟ｧ縺阪￥ */
        min-width: 300px; /* 蟆上＆縺吶℃縺ｪ縺 ｈ縺 ↓蛻ｶ髯  */
    }
}

/* 繧ｿ繝悶Ξ繝 ヨ蟇ｾ蠢懶ｼ亥ｹ 1024px莉･荳具ｼ  */
@media (max-width: 1024px) {
    .explanimgs, .explanimgs2, .eximg {
        width: 60%;
        min-width: 300px;
    }
}

.footer-menu {
    font-size: 16px; /* PC縺ｮ縺ｨ縺阪 譁 ｭ励し繧､繧ｺ */
}

/* 繧ｹ繝槭 逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
@media screen and (max-width: 768px) {
    .footer-menu {
        font-size: 10px; /* 繧ｹ繝槭 縺ｮ縺ｨ縺阪 譁 ｭ励し繧､繧ｺ */
    }

}

.mobilecopyright {
    display: none; /* 蛻晄悄迥ｶ諷九〒縺ｯ髱櫁｡ｨ遉ｺ */
    font-size: 12px;
    text-align: center;
    margin-top: 16px;
  }
  
  @media (max-width: 768px) {
    .mobilecopyright {
      display: block; /* 繧ｹ繝槭 譎ゅ↓陦ｨ遉ｺ */
    }

    .lineuptezukacopyright{
        display: none;
    }

  }
 
  /* 蛻晄悄迥ｶ諷具ｼ PC譎ゑｼ  */
.copyright-main {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
  }
  
  /* 繧ｹ繝槭 譎ゑｼ亥ｹ 768px莉･荳具ｼ  */
  @media (max-width: 768px) {
    .maincopyright {
      font-size: 12px;
      padding: 3px 8px;
    }
  }