@charset "UTF-8";

/* -------------------------- reset --------------------------  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



/* -------------------------- styles --------------------------  */

html body {
     background-image: linear-gradient(0deg, transparent 39px, #056FB2 40px), linear-gradient(90deg, transparent 39px, #056FB2  40px);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    position: relative;
}


.custom-border {
    border: #056FB2 1px solid;
}


.tab-box {
  position: relative;
  width: 100%;
  max-width: 1500px;
  background: white;
  margin: 200px auto 100px;
  border-radius: 32px 0 32px 32px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 2px solid #056FB2;
}

.tab {
  position: absolute;
  top: -100px;
  left: 748px;
  width: 750px;
  height: 100px;
  background: white;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  border: 2px solid #056FB2;
  border-bottom: none; 

}



@media (max-width: 1500px) {
  .tab {
    width: 50%;
    left: 50.2%;
  }


    section {
        padding: 0 16px;
    }
}


@media (max-width: 992px) {
  .tab-box {
    width: 100%;
    margin: 50px auto;
    border-radius: 24px;
  }

      section {
        padding: 0;
    }
}


.topic-h2 {
  color: #056FB2;
  font-size: 3.5rem;
  display: inline-block;
  position: relative;
  margin-top: 16px;
}

.topic-h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -7px; 
  width: calc(100% + 15px);
  height: 2px;
  background-color: #056FB2;
}

.topic-p {
    color: #056FB2;
    font-size: 1.1rem;
    font-weight: bold;
}

.subheading {
    color: #056FB2;
    font-size: 1.4rem;
    font-weight: bold;
}

.buy-btn {
    display: inline-block;
    background: #056FB2;
    color: #fff;
    padding: 6px 48px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .buy-btn:hover {
    background-color: #044a7c;
  }
}

/* nav */

.menu-pc {
    position: fixed;
    right: 15px;
    z-index: 100;
    border-radius: 16px;
}

.nav-link {
    color: #056FB2 !important;
    font-weight: bold !important;
}

.nav-link:hover {
    color: #044a7c !important;
}


.menu-sp {
    width: 120px;
    height: 350px;
    background: rgba(250, 250, 250, 0.9);
    border-left: #056FB2 solid 2px;
    border-bottom: #056FB2 solid 2px;
    border-bottom-left-radius: 16px;
    position: fixed;
    right: -150px;
    z-index: 100;
    transition: right 0.4s ease;
}

.menu-sp.open {
    right: 0;
}

.menu-sp ul {
    margin-top: 50px;
}

.nav-link-sp {
    margin-top: 16px;
}

.menu-sp-icon {
    display: none;
}

.icon-x {
    font-size: 2rem !important;
}
            

.menu-sp-icon.active {
    display: block;
    position: fixed;
    right: 8px;
    color: #056FB2 ;
    font-size: 2.5rem;
    z-index: 101;
}
            

.about-p {
    font-size: 1.2rem;
}
            


/* spec */

@media (max-width: 768px) {
  .custom-th {
    width: 40%;
  }
  .custom-td {
    width: 60%;
  }
}


.buy-bottom {
    width: 100%;
    background: #fff;
    border-top: #056FB2 1px solid;
}


footer {
    background: #eee;
}


/* トップへスクロールボタン */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 15px;
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
    border: none;
    display: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
}

.back-to-top.show {
    display: block;
    opacity: 1;
}



/* animation */

.fade-image {
  opacity: 0;
  visibility: hidden;
}

.fade-in {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}




/* loading */

#loading {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: #fff; 
    z-index: 9999; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

#progress-bar-container {
    width: 80%; 
    height: 20px; 
    background: #eee; 
    border-radius: 10px;
}

#progress-bar {
    height: 100%; 
    width: 0%; 
    background: #056FB2; 
    border-radius: 10px;
}

.float-image {
  animation: floatUpDown 2s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}