/* 
    ===== PROJECT-WIDE CSS DOCUMENTATION =====

    This stylesheet provides a comprehensive set of utility classes and design 
    system for the entire website. It uses a combination of:
    - CSS Variables for consistent theming
    - Utility classes for rapid development
    - Responsive design principles

    KEY SECTIONS:
    1. Font Imports
    2. Color Variables
    3. Utility Classes
    4. Component Styles
    5. Responsive Overrides

    CUSTOMIZATION GUIDELINES:
    - Modify CSS variables in :root for site-wide theme changes
    - Add new utility classes for repeated design patterns
    - Use responsive design breakpoints consistently
*/

/* ===== FONT IMPORTS ===== 
   Imports custom font (Noto Sans JP) in multiple weights
   To add new fonts:
   1. Add font file to 'fonts/' directory
   2. Create new @font-face rule
   3. Update font-family references
*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("fonts/NotoSansJP-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: bold;
}

/* ===== GLOBAL BODY STYLING ===== */
body {
  font-family: "Noto Sans JP", sans-serif;
}

/* ===== COLOR AND DESIGN SYSTEM VARIABLES =====
   Central place to manage site-wide color and design tokens
   To rebrand:
   1. Modify these variables
   2. Ensure sufficient color contrast
   3. Test across all components
*/
:root {
  --primary-color: #367FC0;     /* Main brand blue */
  --secondary-color: #2D4989;   /* Darker blue accent */
  --light-gray: #ECEBEB;        /* Light background gray */
  --dark-gray: #e0e0e0;         /* Dark background gray */
  --gray-bg: #F2F2F2;           /* Neutral background */
  
  /* Shadow and spacing variables */
  --standard-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  --card-padding-sm: 1rem;
  --card-padding-md: 2rem;
  --card-padding-lg: 3rem;
}

.py {
  padding: 10rem 0;
}

.border {
  width: 4.6875rem !important;
  margin: 0 auto;
  margin-bottom: 1.5rem !important;
  border: 0.375rem solid var(--primary-color) !important;
  opacity: 1 !important;
}

.heading-text {
  font-weight: bold !important;
  margin-bottom: 3rem !important;
}

.blue-text {
  color: var(--primary-color) !important;
  margin-bottom: 1.2rem ;
}

.blue-color{
  color: var(--primary-color) !important;
}

.btn-read-more {
  background-color: var(--light-gray) !important;
  padding: 0.5rem 0.5rem 0.5rem 1rem !important;
  border-radius: 3.125rem !important;
  margin-top: 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: 1.5625rem;
  cursor: pointer;
  position: relative;
}

.btn-read-more::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  /* background-color: black; */
  background-image: url('/imgs/arrow-right.svg');
  background-size: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-download {
  background-color: var(--light-gray) !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 3.125rem !important;
  margin-top: 1rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.9375rem;
  cursor: pointer;
  position: relative;
}

.btn-download::before{
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url('/imgs/Group.svg');
  background-size: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
}

.pdf {
  background-color: #ffffff;
  border-radius: 3.125rem;
  color: var(--secondary-color);
  padding: 0 0.9375rem;
  display: inline-block;
  text-decoration: none;
}

.mycard {
  background-color: #fff;
  box-shadow: var(--standard-shadow);
  padding: var(--card-padding-lg);
}

.accordion{
  background-color: #fff;
  padding: 1.5rem 0;
}
.accordion-button{
  box-shadow: var(--standard-shadow);
  font-size: 1.2rem;
}
.accordion-body{
  margin-top:2rem;
}
.accordion-button:not(.collapsed){
  background-color: #fff !important;
}

.grey-card{
  background-color:  var(--gray-bg) !important;
  border-radius: 0.25rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 0 0.625rem rgba(186, 185, 185, 0.931);
}

.dark-grey-card{
  background-color:  var(--dark-gray) !important;
  border-radius: 0.0rem !important;
  padding: 0.0rem 0.2rem !important;
  box-shadow: 0 0 0.625rem rgba(186, 185, 185, 0.931);
}

.slide-item {
  /* background-color: red; */
  padding: 0.7rem;
  /* overflow: visible!important; */
}

.slide{
  /* background-color: red; */
  /* display: flex; */
  width: 100% !important;
  height: 100% !important;
  padding: 1rem;
  box-shadow: 0 0 1.125rem rgba(0, 0, 0, 0.2); /* Soft shadow */
}

/* Positioning Navigation Buttons */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* Allows clicks on items */
}

/* Styling for Navigation Buttons */
.owl-nav button {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  pointer-events: all; /* Enable click */
}

/* Navigation Icon Styling */
.owl-nav button img.owl-nav-svg {
  width: 3.125rem;
  height: 3.125rem;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease;
}

/* Hover Effect */
.owl-nav button:hover img.owl-nav-svg {
  transform: scale(1.2); /* Slight zoom effect */
  opacity: 0.8; /* Reduce opacity slightly */
}

.left-arrow {
  margin-left: -6.25rem;
}

.right-arrow {
  margin-right: -6.25rem;
}

.owl-dots{
  display: none !important;
}

.mycard-list{
  list-style-position: inside;
  margin-top: 2rem;
  padding: 0;
}

.mycard-list li{
  padding-left: 0;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: #fff;
  box-shadow: var(--standard-shadow);
  font-weight: bold;
}

.border-bottom{
  padding: 2rem 0rem;
  border-bottom: 0.1875rem solid rgb(176, 176, 176) !important;
}

.text-small{
  font-size: 0.8rem;
}

.text-bold{
  font-weight: bold;
}

.full-height{
  height: 100% !important;
}

.left{
  /* align-content: left; */
  text-align: left;
}

#questions h5{
  display: inline;
}

.h4list {
  font-size: 1.5rem;
}

.h4list ol {
  list-style: none; /* Remove default numbering */
  counter-reset: list-counter; /* Initialize counter */
  padding-left: 0; /* Remove default padding */
}

.h4list ol li {
  counter-increment: list-counter; /* Increase counter */
  position: relative;
  padding-left: 4rem; /* Space for the numbering */
  text-align: left;
}

.h4list ol li::before {
  content: counter(list-counter) "."; /* Add custom numbering */
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 1.875rem; /* Fixed width for the numbering block */
  text-align: right;
  font-weight: bold;
}

/* New classes for previously inline styles */

/* Background image styles */
.bg-hero {
  background-image: url('./imgs/image 1.png');
  background-size: cover;
  background-position: center;
}

.bg-discussion {
  background-image: url('./imgs/image 3.png');
  background-size: cover;
  background-position: center;
}

.bg-discussion-2 {
  background-image: url('./imgs/image 5.png');
  background-size: cover;
  background-position: center;
}

/* Image styles */
.img-full-width {
  width: 100%;
}

.img-padded {
  padding: 1rem;
  width: 100%;
}

/* Link styles */
.link-no-decoration {
  text-decoration: none;
  color: black;
}

.link-blue-no-decoration {
  text-decoration: none;
  color: var(--primary-color);
}

/* Card styles */
.card-full-height {
  height: 100%;
}

/* Button styles */
.btn-white-bg {
  background-color: white !important;
}

/* Margin and padding utilities */
.mb-4 {
  margin-bottom: 1.5rem;
}

/* Heading styles */
.heading-bold {
  font-weight: bold;
}

/* Additional classes for previously inline styles */

/* Background image styles for different pages */
.bg-hero-about {
  background-image: url('./imgs/image 1.png');
  background-size: cover;
  background-position: center;
}

.bg-hero-place {
  background-image: url('./imgs/image 9.png');
  background-size: cover;
  background-position: center;
}

.bg-hero-method {
  background-image: url('./imgs/image 10.png');
  background-size: cover;
  background-position: center;
}

/* Button styles */
.btn-blue {
  background-color: var(--secondary-color) !important;
  color: white;
  text-decoration: none;
}

/* Heading styles */
.heading-number {
  padding-left: 1.5rem;
}

.heading-number-sm {
  padding-left: 1rem;
}

/* Border styles */
.border-no-margin {
  margin: 0;
}

/* Card styles */
.card-minimal-padding {
  padding: 0.5rem;
}

/* Table styles */
.table-black-border {
  border-color: black;
}

/* Print styles */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .shadow-element {
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5) !important;
  }
}

/* Additional classes for worldview.html and other remaining files */

.bg-hero-worldview {
  background-image: url('./imgs/image 11.png');
  background-size: cover;
  background-position: center;
}

.card-padding-lg {
  padding: 2.5rem !important;
}

.btn-grey {
  width: auto;
  background-color: #C8C8C8 !important;
}

.index-card {
  padding: 1.5rem;
}

.index-card-inner {
  padding: 1rem;
}

/* Sticky top with padding */
.sticky-top-with-padding {
  position: sticky;
  top: 1.25rem;
}

/* Button alignment */
.btn-center {
  align-items: center !important;
  width: auto;
}

/* Background image for blog */
.bg-hero-blog {
  background-image: url('./imgs/image 18.png');
  background-size: cover;
  background-position: center;
}

/* Image styles */
.img-full-width-margin {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Back button styles */
.back-link {
  text-decoration: none;
  color: black;
}

.back-icon {
  margin-right: 0.3125rem;
  padding-bottom: 0.3125rem;
  display: inline-block;
}

/* Background image styles for question pages */
.bg-hero-question {
  background-image: url('./imgs/image 12.png');
  background-size: cover;
  background-position: center;
}

/* Background image styles for question pages */
.bg-question {
  background-image: url('./imgs/image 13.png');
  background-size: cover;
  background-position: center;
}

/* Link styles for question list */
.question-link {
  text-decoration: none;
  color: black;
}

/* Image styles */
.img-height-80 {
  height: 80%;
  margin-bottom: 0.625rem;
}

/* Meta information card styles */
.meta-card-heading {
  color: black;
  display: inline-block;
}

.meta-card-light-text {
  color: #e0e0e0 !important;
}

.meta-link {
  color: grey;
}

/* Card styles */
.meta-card {
  padding: 1rem;
}

.meta-card-inner {
  padding: 1rem;
}

.meta-card-list {
  color: black;
}

/* Horizontal rule styles */
.meta-hr {
  border: 0.0625rem solid black;
}

/* Additional classes for remaining files */

/* Background image styles */
.bg-hero-blog {
  background-image: url('./imgs/image 18.png');
  background-size: cover;
  background-position: center;
}

.bg-hero-worldview-1 {
  background-image: url('./imgs/image 11.png');
  background-size: cover;
  background-position: center;
}

.bg-hero-link {
  background-image: url('./imgs/image 14.png');
  background-size: cover;
  background-position: center;
}

.bg-hero-catalog {
  background-image: url('./imgs/image 16.png');
  background-size: cover;
  background-position: center;
  margin-top: 2rem;
}

.bg-footer {
  background-image: url('./imgs/image 7.png');
  background-size: cover;
  background-position: center;
}

/* Text styles */
.text-underline {
  text-decoration: underline;
}

.orange-number {
  color: #FDA709;
  font-size: 3.125rem;
  margin-top: -0.7rem;
}

/* Spacing and layout */
.py-10 {
  padding-top: 10%;
}

.card-padding-sm {
  padding: 1.5rem;
}

/* Border styles */
.hr-black {
  border: 0.0625rem solid #000000;
  margin: 1%;
}

.hr-black-lg {
  border: 0.0625rem solid #000000;
  margin: 3%;
}

/* Image styles */
.img-full-width-100 {
  width: 100%;
}

/* Additional utility classes */
.fw-bold {
  font-weight: bold !important;
}

.text-left{
  text-align: left;
}

h4{
  font-weight: bolder !important;
}