/* Basic overrides and layout tweaks to match Figma layout for blog/index.html */
:root{
  --green:#38a87c;
  --ene-green: #38A87C; /* defined to match Figma */
  --orange:#ef7e3a;
  --ene-orange:#ef7e3a;
  --muted:#f1f4f2;
  --text:#222;
}


html{ scroll-behavior:smooth }

body[data-theme="light"]{
  background:#f6f7f6;
  color:var(--text);
  font-family: "Noto Sans JP", "NotoSansCJKjp-Regular", "Helvetica Neue", Arial, sans-serif;
}

.section {
  .container {
      overflow: initial;
      @media(max-width:768px){
        padding-left: 0;
        padding-right: 0;
      }
  }
}

.kv-section{
  padding:48px 0 40px;
  background:linear-gradient(180deg, #f3f7f6 0%, #eef3f1 100%);
  position:relative;
}
.kv-background{position:absolute;inset:0;z-index:0;opacity:0.02}
.kv-msg{position:relative;z-index:2;padding:28px 0}
.kv-msg .title{font-size:34px;margin-bottom:8px;color:#0b4a3b}
.kv-msg .title span{color:var(--green)}
.kv-msg .kv-msg-small_or_big{margin-bottom:12px}
.kv-image{position:absolute;right:0;top:40px;z-index:1}
.kv-image-01 img,.kv-image-02 img{max-width:420px;width:100%;display:block}


.tools-guide .card{border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,20,0.06);border:1px solid rgba(0,0,0,0.03);background:white}
.tools-guide .card-image{height:160px;overflow:hidden}
.tools-guide .card-image img{width:100%;height:100%;object-fit:cover}
.tools-guide .card-content{padding:18px}
.tools-guide h4{font-size:18px;margin-bottom:8px}
.tools-guide .sub{color:#6b776f;font-size:14px;margin-bottom:12px}
.tools-guide .button{background:var(--orange);border:none;color:white}

.contact-section{padding:36px 0}
.contact-box{display:flex;gap:18px;align-items:center;background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 14px rgba(0,0,0,0.05)}
.contact-box-header{display:flex;gap:18px;align-items:center}
.contact-callout .lead{font-weight:700;color:var(--green)}
.contact-callout .tel{font-size:20px;margin-top:6px}

/* Responsive tweaks */
@media(max-width:768px){
  .kv-image{position:static;margin-top:18px;text-align:center}
  .kv-msg .title{font-size:26px}
  .tools-guide .card-image{height:120px}
  .contact-box{flex-direction:column;align-items:flex-start}
}

.next-title {
  font-size: .9rem;
  font-weight: 800;
  color: #38A87C;
  margin: 0 0 1rem 0;
}

.breadcrumb {
margin-top: 6rem;
@media(max-width:768px){
  margin-top: 9rem;
  font-size: 0.8rem;
}
a {
  color: #111;
}
li.is-active a {
  color: #111;

}
}

.breadcrumb ul, .breadcrumb ol {
      align-items: center;
}

.index-menu {
        background-color: white;
        border-radius: 0.5rem 0 0 0.5rem;
        padding: 0.2rem;
        backdrop-filter: blur(5px);
        width: 10.61111rem;
        position: fixed;
        right: 0;
        top: 20rem;
        z-index: 100;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        opacity: 1;
        transform: translateX(0);

        @media(max-width:768px){
          display: none;
        }

        &.is-slide {
            opacity: 0;
            transform: translateX(10%);
            display: inherit;
            visibility: hidden;
        }

        h2 {
            font-size: 1rem;
            line-height: 1rem;
            margin-bottom: 0.25rem;
            color: $ene-black;
            margin: auto;
            text-align: center;
            border-bottom: 1px solid $ene-orange;
            padding-bottom: 0.2rem;

            img {
                width: 66px;
                margin: 0 auto;
            }
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 0.2rem;
            font-size: 0.8rem;
            margin-top: 0.25rem;

            li {
                width: 100%;
            }

            li a {
                font-weight: normal;
                color: black;
                background: #ECE3D8;
                width: 100%;
                display: flex;
                align-items: center;
                padding: 0.2rem 0.5rem;

                &:hover {
                        color: var(--orange);
                }

                &:active,&.is-active {
                        color: var(--orange);
                    background: inherit;
                }

                span {
                        color: var(--orange);
                    font-size: 0.5rem;
                    margin-right: 0.5rem;
                }
            }
        }

        @include mx.touch {
            display: none;
        }
    }