@charset "utf-8";

/* ================ common ================ */

html {
  scroll-padding-top: 112px;
  scroll-behavior: smooth
}
@media (max-width: 430px) {
  html { scroll-padding-top: 54px; }
}	
body {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN', 'Meiryo', Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .05rem;
  font-size: 1.0rem;
  font-weight: 400;
  background: #f7f7f7
}
.sp-nav {
  display: none
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}
.bnr-wide {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
}
@media (max-width: 430px) {
  .bnr-wide { width: 95%; margin-bottom: 2.0rem; }
}
main.one-column {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
  
  @media (max-width: 430px) {
    & { width: 95%; }
  }
}

/* ================ title ================ */

.section-ttl {
    position: relative;
    border-bottom: 3px solid var(--color-accent);
    padding: 0 0 5px 32.5px;
    margin-bottom: 30px;
    font-size: 1.5rem;
    
    &::before{
    	content: "";
		background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_map.svg) no-repeat center center;
		background-size: cover;
		width: 21px;
		height: 28px;
		transform: translate(0, -50%);
		position: absolute;
		top: 43%;
		left: 5px;
    }
}

/* ================ header ================ */

header {
  position: sticky;
  top: 0;
  left: 0;
  height: 112px;
  width: 100%;
  z-index: 10000;
  background: var(--color-surface);
  
  .header-inner {
  	padding: 10px 50px;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	
  	.logo { width: 200px; }

    .search-form {
  	  position: relative;
  	  width: 350px;
  	  height: 50px;
  	  line-height: 1;

      .form-txt {
  	    border: 1px solid  var(--color-border);
  	    padding: 10px 10px 10px 40px;
  	    font-size: 0.875rem;
  	    width: 100%;
  	    height: 100%;
  	    line-height: 1;
      }

      .search-icon {
  	    position: absolute;
  	    top: 0;
  	    left: 0;
  	    width: 30px;
  	    height: 50px;
  	    background: var(--color-border);
  	    color: #fff;
  	    display: flex;
  	    align-items: center;

        img {
          width: 18px;
          height: auto;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
  
  @media (max-width: 1024px) {
    .header-inner {
      padding: 10px 15px;
    }
  }
  
  @media (max-width: 430px) {
	& {
	  height: 54px;

      .header-inner {
        .logo { width: 130px; }

        .search-form { display: none; }
      } 	   
	}
  }	 
}

 

nav.gnav {
  padding: 10px 50px 15px;
  line-height: 1;

  ul {
    display: flex;
    justify-content: space-between;
  }
  
  li {
    font-weight: 700;
    font-size: 1rem;
  }

  a {
    color: var(--color-text);
    transition: .3s;
    
    @media (hover: hover) {
      &:hover { color: var(--color-accent); }
    }
  }
  
  @media (max-width: 1024px) {
    & { padding: 10px 15px 15px; } 
  }
  
  @media (max-width: 430px) {
    & { display: none; }
  }
}

/* ================ SP MENU ================ */

@media (max-width: 430px)  {
	
  #menu_checkbox { display: none; }
  
  #background {
    display: block;
    z-index: 99999;
    position: fixed;
    top: 53px;
    left: 0;
    width: 100%;
    height: 0;
    transition: .4s;
    background-color: var(--color-accent);
  }
  
  .sp-nav {
    position: fixed;
    display: block;
    top: 53px;
    left: 0;
    width: 100%;
    height: 0;
    overflow-y: hidden;
    padding: 0;
    transition: .4s;
    z-index: 100000;
    
    ul {
      width: 80%;
      margin: 0 auto;
      text-align: left;

      li {
        font-weight: 700;
        opacity: 0;
        transition: .4s .4s;
        border-bottom: 1px solid var(--color-surface);
        padding-bottom: 20px;
        font-size: 0.875rem;
      
        &:first-child {
          border-bottom: 0;
          margin-bottom: 0;
        }

        a {
          position: relative;
          display: block;
          color: var(--color-surface);
        
          &:after {
            content: '';
            width: 8px;
            height: 8px;
            border-right: 1px solid var(--color-surface);
            border-bottom: 1px solid var(--color-surface);
            position: absolute;
            right: 10px;
            top: 8px;
            transform: translateY(0) rotate(-45deg);
          }
        }
      
        .search-form {
          position: relative;
          width: 100%;
          height: 45px;
 
          .form-txt {
            border: 1px solid var(--color-bg);
            padding: 10px 10px 8px 40px;
            font-size: 0.875rem;
            font-weight: 400;
            width: 100%;
            height: 45px
          }
        
          .search-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 45px;
            line-height: 45px;
            background: var(--color-cancel);
            color: var(--color-surface);
            text-align: center;
          
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 18px;
            }
          }
        }
      }
    }
  }

  .menu_btn {
    display: inline-block;
    position: fixed;
    width: 26px;
    height: 21px;
    top: 15px;
    right: 25px;
    z-index: 100000;
    cursor: pointer;
  
    &:before {
      position: absolute;
      top: -7px;
      left: -4px;
      content: "";
      background: var(--color-accent);
      width: 35px;
      height: 35px;
      z-index: 100001;
    }

    span {
      display: inline-block;
      width: 100%;
      height: 2px;
      background-color: var(--color-surface);
      transition: .4s;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      z-index: 100002;
    
      &:nth-of-type(1) {
        top: 0;
        width: calc(100% - 4px);
        animation: line1 1s linear infinite
      }
    
      &:nth-of-type(2) {
        top: 9px;
        width: calc(100% - 7px);
        animation: line2 1s linear infinite
      }
    
      &:nth-of-type(3) {
        bottom: 0;
        animation: line3 1s linear infinite
      }
    }
  }

  #menu_checkbox:checked ~ #menu_label .menu_btn span:nth-of-type(1) {
    transform: translateY(10px) rotate(-225deg);
    width: 100%;
    animation: none;
  }

  #menu_checkbox:checked ~ #menu_label .menu_btn span:nth-of-type(2) {
    right: 100%;
    opacity: 0;
    width: 100%;
    animation: none;
  }

  #menu_checkbox:checked ~ #menu_label .menu_btn span:nth-of-type(3) {
    transform: translateY(-9px) rotate(225deg);
    width: 100%;
    animation: none;
  }

  #menu_checkbox:checked ~ #background { height: calc(100vh - 53px); }

  #menu_checkbox:checked ~ .sp-nav {
    max-height: calc(100vh - 53px);
    height: auto;
    padding: 45px 0 50px;
  }

  #menu_checkbox:checked ~ .sp-nav ul li {
    opacity: 1;
    margin-bottom: 20px;
  }

/* ─── この機能専用アニメーション ─── */

  @keyframes line1 {
    0% { width: calc(100% - 4px); }
    25% { width: calc(100% - 2px); }
    50% { width: calc(100% - 4px); }
    75% { width: calc(100% - 6px); }
    100% { width: calc(100% - 4px); }
  }

  @keyframes line2 {
    0% { width: calc(100% - 7px); }
    25% { width: calc(100% - 9px); }
    50% { width: calc(100% - 7px); }
    75% { width: calc(100% - 5px); }
    100% { width: calc(100% - 7px); }
  }

  @keyframes line3 {
    0% { width: 100%; }
    50% { width: calc(100% - 9px); }
    100% { width: 100%; }
  }
}

/* ================ footer ================ */

footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.625rem;
  background: var(--color-surface);
    
  .footer-nav {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap : 10px 20px;
    font-size: 0.75rem;
  }
}

/* ================ sidebar ================ */

.sidebar {
  width: 300px;
  background: #fff;
  padding: 20px;
  overflow: hidden;
    
  .sidebar-block {
    margin-bottom: 50px;
    
    &:last-of-type {
      margin-bottom: 0;
    }
    
    .sidebar-ttl {
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 1.25rem;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--color-border);
      
      .en { font-family: "Afacad",sans-serif; }
    }

    .list li {
      margin-bottom: 20px;
    
      &:last-child { margin-bottom: 0; }

      a {
        display: flex;
        justify-content: space-between;
        color: var(--color-text);
        border: 5px solid var(--color-surface);
        transition: .3s;

        @media (hover: hover) {
          &:hover { border: 5px solid var(--color-accent); }
        }

        .image { width: 100px; }


        .detail { 
	      width: calc(100% - 120px);

          .cat-name {
            color: var(--color-accent);
            font-size: 0.75rem;
            font-weight: 700;
          }

          .ttl {
            font-weight: 700;
            font-size: 0.875rem;
            line-height: 1.2;
          }
        
          .date { font-size: 0.625rem; }
        }
      }
    }
  }
  
  @media (max-width: 430px) {
    & { width: 100%; }
  }
}

.sidebar-cat-list > ul {
  padding: 0 5px;

  > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 0.875rem;

    &:before {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 1px solid #111;
      border-bottom: 1px solid #111;
      position: absolute;
      left: 0;
      top: 7px;
      transform: translateY(0) rotate(-45deg);
    }
    
    &:last-child{ margin-bottom: 0; }
    
    > ul {
      padding: 10px 20px;
      list-style: outside square;
      color: var(--color-border);
      
      > li {
	    margin-bottom: 10px;
	  
        &:last-child{ margin-bottom: 0; }
	  }
    }
  }
}

.sidebar-archive-list ul {
  padding: 0 5px;

  li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 0.875rem;

    &:last-child { margin-bottom: 0; }

    &:before {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
      position: absolute;
      left: 0;
      top: 7px;
      transform: translateY(0) rotate(-45deg);
    }
  }
}

.sidebar-hojokin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  .sidebar-hojokin-item {
    margin-bottom: 2rem;
    
    .sidebar-hojokin-days {
      font-weight: 700;
      white-space: nowrap;
      display: block;
      text-align: center;
      padding: 5px 0;
      color: var(--color-surface);
      margin-bottom: 10px;
      
      &.is-open { background: #1d9e75; }

      &.is-soon { background: #ef9f27; }

      &.is-today { background: #e24b4a; }
    }

    .sidebar-hojokin-link {
      
      .sidebar-hojokin-name {
        font-size: 0.875rem;
        color: var(--color-text);
        line-height: 1.4;
      }
    }
    
  }  
}

/* ================ index ================ */

.home #container {
	display: block;
}

/* ─── slider ─── */
.slider-root {
  width: 100%;
  padding: 48px 0 36px;

  @media (max-width: 768px) {
    padding: 0 0 16px;
  }
}

.slider-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;

  @media (max-width: 768px) {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
}

.slider-track {
  display: flex;
  align-items: center;
  will-change: transform;
  gap: 20px; /* JS側で動的に上書き */
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;

  @media (max-width: 768px) {
    gap: 16px;
    margin-top: 12px;
  }
}

.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  transition: background 0.2s, border-color 0.2s;
  line-height: 1;
  user-select: none;

  @media (hover: hover) {
    &:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.4);
    }
  }

  &:active {
    transform: scale(0.95);
  }
}

.dots-row {
  display: flex;
  gap: 7px;
  align-items: center;

  .dot {
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: #ccc;
    transition: width 0.35s cubic-bezier(.4, 0, .2, 1), background 0.35s;
    cursor: pointer;

    &.active {
      width: 20px;
      background: #0ABAB5;
    }
  }
}

/* ─── index 補助金 ─── */
.index-top-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 50px;
    
  li {

	&:first-child {
      flex: 7 1 0;
      min-width: 18rem;
            
      img { width: 100%; }
    }
	
	&:last-child {
	  flex: 3 1 0;
      min-width: 15rem;
      background: #c4e4ff;
      color: #1a4f9c;
      padding: 50px 30px;
      display: flex;
      flex-direction: column;
      gap: 50px;
      
      h2 {
        font-size: 2.1rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.4;
        
        span {
          font-size: 1.125rem;
          display: block;
        }
      }

      .txt { font-size: 1.125rem; }

      a {
        position: relative;
        margin-top: auto;
        background: #fff;
        color: #1a4f9c;
        padding: 20px 0;
        text-align: center;
        font-weight: 700;
        transition: .3s;

        @media (hover: hover) {
          &:hover {
            background: #1a4f9c;
            color: var(--color-surface);
          
            &:after {
              border-right: 2px solid var(--color-surface);
              border-bottom: 2px solid var(--color-surface);
            }
          }
        }

        &:after {
          content: '';
          width: 8px;
          height: 8px;
          border-right: 2px solid #1a4f9c;
          border-bottom: 2px solid #1a4f9c;
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%) rotate(-45deg);
        }
      }
    }
  }
}

#index-cat {
  margin-bottom: 50px;

  article:after {
    content: "";
    display: block;
    clear: both;
  }
}

.index-cat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
  margin-bottom: 40px;
  gap: var(--gap);
  
  @media (max-width: 768px) {
    margin-bottom: 20px;
  }

  li {
    display: flex;
    flex-direction: column;

    a {
	  flex-grow: 1;
      color: var(--color-text);
      background:  var(--color-surface);
      border: 10px solid var(--color-surface);
      transition: .3s;

      @media (hover: hover) {
        &:hover { 
	      border: 10px solid var(--color-accent);
	    
	      .image img { transform: scale(1.1) }
	    }
	  }
      
      .image { 
	    overflow: hidden;
	    
	    img { height: auto; transition: transform .6s ease; }
	  }

      .detail {
        padding: 20px;
        
        @media (max-width: 768px) {
          padding: 20px 0;
        }
        
        .detail-header {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;
          margin-bottom: 10px;
        }

        .cat-name {
          font-weight: 700;
          font-size: 0.75rem;
          background: var(--color-accent);
          color: var(--color-surface);
          padding: 2.5px 10px;
          margin-bottom: 10px;
        }

        .date { font-size: 0.75rem; }

        h2 { line-height: 1.3; font-size: 1.0rem; }
      }
    }
  }
}

.cat-btn {
    float: right;
}

.link-btn {
  padding: 20px;
  color: var(--color-text);
  overflow: hidden;
  position: relative;
  z-index: 1;

  @media (max-width: 768px) {
    padding: 10px 10px 10px 20px;
  }

  &:before {
    content: '';
    width: 60px;
    height: 60px;
    background-color: var(--color-accent);
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: .4s;
    z-index: -1;
    
    @media (max-width: 768px) {
      width: 30px;
      height: 30px;
    }
  }

  &:after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-surface);
    border-bottom: 2px solid var(--color-surface);
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    
    @media (max-width: 768px) {
      left: 10px;
    }
  }
  
  .btn-txt {
    padding-left: 50px;
    transition: .3s;
    font-weight: 700;
    font-size: 1.0rem;
    
    @media (max-width: 768px) {
	  padding-left: 20px;
      font-size: 0.875rem;
    }
  }

  @media (hover: hover) {
    &:hover {
      &:before { width: 100%; }
      .btn-txt { color: var(--color-surface); }
    }
  }  
}

/* ─── index keyv ─── */

#index-keyv {
  position: relative;
  background: url(/wp-content/themes/shikinmap/assets/images/index/keyv_intro.svg) no-repeat center bottom;
  background-size: cover;
  width: 100%;
  height: 385px;
  margin: 0;
    
  h1 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 4.5rem;
    width: 100%;
    text-align: center;
    -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
    line-height: 1.2;
    paint-order: stroke;
    font-size: 3.0rem;

    span {
      display: block;
      font-size: 1.25rem;
    }
    
    span.ttl { font-size: 2.5rem; }
  }
  
  @media (max-width: 1024px) {
    h1 {
	  font-size: 2.5rem;
	  
      span.ttl { font-size: 2.0rem; }  
	}
  }

  @media (max-width: 430px) {
    h1 {
	  font-size: 1.25rem;
	  
	  span { font-size: 0.875rem; }
      span.ttl { font-size: 1.0rem; }
	}
  } 
}

@media (max-width: 430px) {
  #index-keyv { height: 150px; }
}

/* ================ breadcrumb ================ */

.breadcrumb {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;

  ul {
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
    line-height: 1;
    font-size: 0.75rem;

    li {
      position: relative;
      margin-right: 15px;
      padding-right: 15px;
      
      &:first-child {
        padding-left: 20px;

        &:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0,-50%);
          background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_home.svg) no-repeat center center;
          background-size: cover;
          width: 15px;
          height: 14px;
        }
      }

      &:after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }

      &:last-child:after {
        display: none;
        margin-right: 0;
        padding-right: 0;
      }
    }
  }
  
  @media (max-width: 430px) {
	& {
	  width: 95%;
	  margin: 1.0rem auto;
      
      ul { padding: 20px 10px; }
    }
  }
}

/* ================ post ================ */

.post-cat-name {
  position: absolute;
  top: -10px;
  left: -20px;
  background: #fcee21;
  padding: 10px 50px;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
  transform: rotate(-3deg);
}

.post-header {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  padding-bottom: 0px;

  time {
    position: relative;
    padding-left: 25px;
    font-size: 1.0rem;
    
    @media (max-width: 430px) {
      & { font-size: 0.875rem; }
    }
  }
 
  .post-date-opacity { opacity: .7; }
  
  .post-update {
    color: #d9534f;
   
    &:before {
      content: "";
      background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_rewrite.svg) no-repeat center center;
      width: 15px;
      height: 17px;
      background-size: cover;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0,-50%);
    }
  }

  .post-date:before {
    content: "";
    background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_checkcal.svg) no-repeat center center;
    width: 15px;
    height: 17px;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%)
  }
}

:where(#post-container) {

  h1 {
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 0 20px;
    margin-bottom: 20px;
    
    @media (max-width: 430px) {
      & { font-size: 1.5rem; }
    }
  }

  h2 {
    position: relative;
    padding: 15px 10px;
    color: #111;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 2.0rem;
    border-left: 1rem solid var(--color-accent);
    background: linear-gradient(135deg, transparent 25%, rgba(0, 64, 128, .05) 25%, rgba(0, 64, 128, .05) 50%, transparent 50%, transparent 75%, rgba(0, 64, 128, .05) 75%, rgba(0, 64, 128, .05));
    background-size: 4px 4px;
  }

  h3 {
    font-size: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2.0rem;
    padding-bottom: 5px;
  }
}

#post-container {
  div:where(:not([class]):not([id])) > ul{
    margin-bottom: 0;
	padding: 0 0 0 22px;
  }
}

/* ─── 目次 ─── */

#toc {
  position: relative;
  background: #f7f7f7;
  padding: 60px 50px 35px;
  margin-bottom: 2rem;
    
  &:before {
    content: "目次";
    font-size: 1.25rem;
    font-weight: 700;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%,0)
  }

  ul {
    line-height: 1;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;

    li {
      position: relative;
      padding-left: 2.0rem;
      margin-bottom: 1.0rem;
      overflow: hidden;
      width: 100%;
      font-feature-settings: "palt";
    
      &:last-child { margin-bottom: 0; }

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0.5rem;
        height: 1px;
        background: currentColor;
        transform-origin: center;
      }

      &::before {
        left: 0;
        transform: translateY(-50%) rotate(45deg);
      }

      &::after {
        left: 0.32rem;
        transform: translateY(-50%) rotate(-45deg);
      }
    }
  }
  
  @media (max-width: 430px) {
    & { 
	  padding: 60px 10px 35px;
	  
	  ul{
        padding: 0 0 0 10px;
	  }
	}
  }
}

#toggle-toc {
  position: fixed;
  top: 112px;
  right: 0;
  font-weight: 700;
  z-index: 100000000000;
  background: var(--color-accent);
  color: var(--color-surface);
  padding: 10px 20px 10px 40px;
  border: 2px solid var(--color-accent);
  transition: .3s;
  cursor: pointer;

  &:before {
    content: "";
    background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_cal.svg) no-repeat center center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 48%;
    left: 10px;
    transform: translate(0,-50%);
  }
  
  @media (hover: hover) {
    &:hover {
      background: var(--color-surface);
      color: var(--color-accent);
    
      &:before {
        content: "";
        background: url(/wp-content/themes/shikinmap/assets/common/icon/icon_cal_on.svg) no-repeat center center;
      }
    }
  }
  
  @media (max-width: 430px) {
    & { display: none; }
  }
}

#fixed-toc {
    position: fixed;
    top: 112px;
    right: 0;
    width: 450px;
    background: #fff;
    
  #toc {
    background: #fff;
    padding: 60px 20px 35px;
    margin-bottom: 0;
    line-height: 1.2;
    
    a.active {
      color: #333;
      font-weight: 700;
    }
  }
}

.toc-wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s ease-out,opacity .5s ease-out
}

.toc-wrapper.show {
  max-height: 650px;
  opacity: 1
}

/* ─── ファクタリングシークへのリンク ─── */

.factoring-link {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 20px 20px 25px;
  margin-bottom: 2rem;
  
  h3 { margin-bottom: 20px; }
  
  ul {
    padding: 0;
    margin: 0;
    
    li {
      list-style: none;
      
      a {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        
        .image {
	      width: 150px;
	      
	      img { margin-bottom: 0; }
        }
        
        .detail {
          width: calc(100% - 180px);
          
          .head {
            margin-bottom: 15px;
            font-size: 0.75rem;
            color: var(--color-text);
            
            .icon {
              border: 1px solid var(--color-text);
              display: inline-block;
              font-size: 0.75rem;
              padding: 5px 10px;
              margin-right: 15px;
            }
          }
          
          h4 {
            font-size: 1.125rem;
            line-height: 1.2;
            margin-bottom: 10px;
            
            br { display: block; }
          }

          .txt {
            font-size: 0.875rem;
            color: var(--color-text);
            line-height: 1.4;
          }
        }
        
        @media (max-width: 430px) {
          .image { width: 80%; margin: 0 auto 20px;}
          .detail { width: 100%; }
        }
      }
    }
  }
}

.fs-link-btn {
  position: relative;
  padding: 15px 20px;
  background: var(--color-accent);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(27,45,102,.15);
  transition: .3s ease;
  color: var(--color-surface);
  display: block;

  &:before {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: rotate(45deg) translate(0,-50%);
    content: '';
    width: 30px;
    height: 30px;
    border-top: 1px solid var(--color-surface);
    border-right: 1px solid var(--color-surface);
  }

  @media (hover: hover) {
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(27,45,102,.25);
    }
  }
  
  .fs-badge {
    font-weight: 700;
    display: block;
  }

  strong.fs-title {
    font-size: 2.0rem;
    font-weight: 700;
    background: 0 0;
    line-height: 1;
    margin-bottom: 20px;
    display: block;

    @media (max-width: 430px) {
      & { font-size: 1.5rem; }
    }
  }

  .fs-sub {
    font-weight: 700;
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-accent);
    padding: 5px 10px;
    line-height: 1.2;

    @media (max-width: 430px) {
      & { font-size: 0.875rem; }
    }
  }
}

/* ─── 内部リンク ─── */

.internal-link {
  background: #f5fbfb;
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 2rem;

  ul {
    background: #f5fbfb;
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      padding: 20px;
      background: #fff;
      margin-bottom: 10px;
      
      &:last-child { margin-bottom: 0; }
      
      h4 {
        line-height: 1.2;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: none
      }
      
      .txt {
        color: var(--color-text);
        font-size: 0.875rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: none;
      }
    }
  }
  
  @media (max-width: 430px) {
    & { padding: 20px; }
  }
}

.author-info {
  background: var(--color-bg);
  padding: 20px;
  margin-bottom: 2rem;

  h3{ margin-bottom: 20px; }

  .author-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .image {
	  width: 150px;
	
	  img { margin: 0; }
	  
      @media (max-width: 430px) {
        & { width: 80%; margin: 0 auto 20px;}
      }
	}
	
	.detail {
      width: calc(100% - 150px);
      padding: 0 30px;
      
      p {
        font-size: 0.875rem;
        margin: 0;
      }
      
      @media (max-width: 430px) {
        & { width: 100%; padding: 0;}
      }      
    }
  }
}

/* ─── 関連記事 ─── */

.related-list {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 50px;
  background: var(--color-surface);

  h2 { margin-bottom: 20px; }

  ul {
	--card-min: 240px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
	gap: var(--gap);
	
	li {
      display: flex;
      flex-direction: column;

      a {
        color: var(--color-text);
        display: block;
        transition: .3s;
        border: 10px solid var(--color-surface);
        flex-grow: 1;
        background:  var(--color-surface);

        @media (max-width: 430px) {
          & { border: 0; }
        }
        
        @media (hover: hover) {
          &:hover {
	        border: 10px solid var(--color-accent);

	        .image img { transform: scale(1.1); }
	      }
	    }

        .image {
          overflow: hidden;

          img {
            height: auto;
            transition: transform .6s ease;
          }
        }
        
        .detail {
          padding: 20px 10px;
        
          .detail-header {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 10px;
            
            .cat-name {
              font-size: 0.75rem;
              background: #0abab5;
              color: #fff;
              padding: 2px 10px;
              font-weight: 700;
            }
            
            .date { font-size: 0.75rem; }
          }

          .ttl {
            font-weight: 700;
            margin-bottom: 0;
            line-height: 1.4;
          }

          @media (max-width: 430px) {
            & { padding: 20px 0; }
          }
        }
      }
    }
  }
  @media (max-width: 430px) {
    & { width: 95%; padding: 30px 20px; }
  }
}

/* ─── 記事ページのページャー ─── */

.post-pager {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 25px 50px;
  background: var(--color-surface);
  font-size: 0.875rem;
  line-height: 1.4;

  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;

    li {
      position: relative;
      display: flex;
      align-items: center;
      width: 50%;
      padding: 0 20px;
      
      &:first-child {
        border-right: 1px solid var(--color-border);

        &::before {
          content: '';
          position: absolute;
          top: 47%;
          left: -15px;
          transform: translate(0,-50%);
          background: var(--color-border);
          width: 30px;
          height: 30px;
          text-align: center;
          border-radius: 50px;
        }
      
        &::after {
          content: '';
          width: 8px;
          height: 8px;
          border-right: 1px solid var(--color-surface);
          border-bottom: 1px solid var(--color-surface);
          position: absolute;
          transform: translateY(-50%) rotate(135deg);
          top: 47%;
          left: -2px;
        }
      }
      
      &:last-child {
            
        &::before {
          content: '';
          position: absolute;
          top: 47%;
          right: -15px;
          transform: translate(0,-50%);
          background: var(--color-border);
          width: 30px;
          height: 30px;
          text-align: center;
          border-radius: 50px;
        }
      
        &::after {
          content: '';
          width: 8px;
          height: 8px;
          border-right: 1px solid var(--color-surface);
          border-bottom: 1px solid var(--color-surface);
          position: absolute;
          transform: translateY(-50%) rotate(-45deg);
          top: 47%;
          right: -2px;
        }
      }
      
      a{
        transition: .3s;
        padding: 5px 10px;
        
        @media (hover: hover) {
          &:hover {
            background: var(--color-accent);
            color: var(--color-surface);
          }
        }
      }
    }
  }
  
  @media (max-width: 430px) {
    & { 
      width: 95%; 
      padding: 20px;
	    
      ul {
        li {
          width: 100%;
          padding: 0 0 10px;
          margin-bottom: 10px; 
	       
          &:first-child {
            border: none;
            border-bottom: 1px solid var(--color-border);
            
            &::before {
              width: 20px;
              height: 20px;
              top: 40%;
              left: -5px;
            }
            
            &::after {
              top: 40%;
              left: 3px;
	        }

	        a{ padding: 5px 0 5px 20px; }   
	      }
	      
          &:last-child {
	          
	        margin-bottom: 0;
            padding-bottom: 0;
            
            &::before {
              width: 20px;
              height: 20px;
              top: 40%;
              right: -5px;
            }
            
            &::after {
              top: 40%;
              right: 3px;
	        }

	        a{ padding: 5px 20px 5px 0; }   
	      }
        }
	  }
	}    
  }
}

/* ================ category ================ */

#cat-container {
  position: relative;
  background: var(--color-surface);
  padding: 50px;

  @media (max-width: 430px) {
    &{ padding: 20px; }
  }  
}

.cat-description {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid  var(--color-border);

  .cat-image {
    margin-bottom: 2rem;

    img {
      width: 100%;
    }
  }

  h1 {
    font-size: 1.5rem;
    background: #0abab5;
    color: #fff;
    margin-bottom: 2rem;
    padding: 5px 10px;
  }

  h2 {
    font-size: 1.125rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    margin-bottom: 1.0rem;
  }

  p {
    margin-bottom: 2rem;
    
    &:has(+ ul) {
	  margin-bottom: 0.5rem;
    }
  }

  ul {
    list-style: square outside;
    padding-left: 20px;
    margin-bottom: 2rem;
  }
  
  table {
    width: 100%;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    margin-bottom: 2rem;
    font-size: 0.875rem;
  
    th, td {
      text-align: left;
      font-size: 0.875rem;
      padding: 5px 10px;
      border-bottom: 1px solid var(--color-border);
      border-right: 1px solid var(--color-border);
      width: auto;
      vertical-align: top
    }
    
    th {
      background: var(--color-accent);
      color: var(--color-surface);
      text-align: center
    }
    
    a {
      display: inline-block;
      background: #1b2d66;
      color: var(--color-surface);
      padding: 15px 0;
      border-radius: 8px;
      font-weight: 700;
      text-decoration: none;
      transition: .25s ease;
      width: 100%;
      text-align: center;
      border: 1px solid #1b2d66;
    
      @media (hover: hover) {
        &:hover {
          background: var(--color-surface);
          color: #1b2d66;
        }
      }
    }
  }
}

.cat-list li {
  padding-bottom: 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid var(--color-border);
    
  a {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    border: 10px solid var(--color-surface);
    transition: .3s;

    @media (hover: hover) {
      &:hover {
        border: 10px solid var(--color-accent);
      }
    }

    .cat-list-image { width: 45%; }
      
    .cat-list-detail {
      width: 50%;
      padding-right: 25px;
        
      h2 {
        color: var(--color-text);
        line-height: 1.4;
        margin-bottom: 10px;
        font-size: 1.25rem;
      }
        
      time {
        position: relative;
        font-size: 0.75rem;
        color: var(--color-text);
      }
    }

    @media (max-width: 430px) {
      .cat-list-image { width: 100%; margin-bottom: 20px; }
      
      .cat-list-detail { width: 100%; }
    }  
  }
}

.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
    
  li > * {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    height: 45px;
     
    &:not(.dots) {
      width: 45px;
      border-radius: 50%;
      color: var(--color-text);
      background: var(--color-bg);
      transition: color .3s ease,background .3s ease;
    }
  }
  
  li > .current {
    color: var(--color-surface);
    background: var(--color-text);
  }
  
  @media (hover: hover) {
    li > a:hover {
      color: var(--color-surface);
      background: var(--color-text);
    }
  }
}

/* ================ 補助金ページ ================ */

.page.page-hojokin main { background: transparent; padding: 0; }

#hojokin-app {
  width: 100%;

  .hk-filter-box {
    position: relative;
    display: flex;
    align-items: center;
    background: url("/wp-content/themes/shikinmap/assets/images/category/bg_hojokin.webp") no-repeat center top;
    background-size: cover;
    width: 100%;
    height: 680px;
    margin-bottom: 50px;
    
    &:after {
      content: "";
      position: absolute;
      right: 3.5%;
      bottom: 0;
      background: url("/wp-content/themes/shikinmap/assets/images/category/hojokin_woman.webp") no-repeat center bottom;
      background-size: cover;
      width: 500px;
      height: 620px;
      z-index: 1;
    }

    .hk-filter-box-txt {
      position: absolute;
      right: 0;
      bottom: 50px;
      width: 40%;
      z-index: 2;
      background: #0333bc;
      border-radius: 8px 0 0 8px;
      padding: 15px 10px 20px 30px;
      line-height: 1.4;
      color: var(--color-surface);
      font-weight: 700;
    
      h1 {
        font-size: 2.25rem;
      
        span {
          color: #ede053;
        }
      }
    }

    .hk-filter-inner {
      width: 50%;
      background: var(--color-surface);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.15);
      padding: 30px;
      margin-left: 5%;
      
      .hk-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 2rem;
        
        .hojokin-search-ttl {
          font-size: 2.25rem;
        }
        
        .hk-result-count {
          font-size: 12px;
          color: var(--color-cancel);
        }
      }
      
      .hk-search-wrap {
        margin-bottom: 2rem;
        
        input[type=text] {
          width: 100%;
          padding: 20px;
          border: 1px solid var(--color-border);
          border-radius: 8px;
          box-sizing: border-box;
          outline: none;
          background: #fff;
          padding-left: 75px;
          
          &:focus {
            border-color: #1d9e75;
          }
          
          &::placeholder {
            color: var(--color-border);
          }
        }
        
        .hk-search-inner {
          position: relative;
        
          .hk-search-icon {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            pointer-events: none;
            color: #bbb;
            width: 25px;
          }
        }
      }     
      
      .hk-filter-toggle { display: none; }
      
      .hk-filter-flex-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px 50px;

        .hk-filter-label {
          color: var(--color-cancel);
          margin-bottom: 10px;
        }
        
        .hk-chip-row {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 20px;

          .hk-chip {
            font-size: 0.875rem;
            padding: 5px 20px 3px;
            border-radius: 20px;
            border: 1px solid var(--color-border);
            color: var(--color-cancel);
            background: var(--color-surface);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            
            &.active {
              background: #e1f5ee;
              color: #0f6e56;
              border-color: #5dcaa5;
              font-weight: 700;
            }        
          }
        }
      }
    }
    @media (max-width: 430px) {
	  & {
        background: 0 0;
        height: auto;
        margin-bottom: 50px;
        
        &:after, .hk-filter-box-txt {
	      display: none;
        }
        
        .hk-filter-inner {
	      width: 95%;
	      margin: 0 auto;
	      box-shadow: none;
	      border-radius: 0;
	      
	      .hk-filter-header {
            .hojokin-search-ttl { font-size: 1.5rem; }

            .hk-result-count { font-size: 0.625rem; }
          }
          
          .hk-search-wrap {
	        .hk-search-inner {
              .hk-search-icon { width: 20px; }
              
              input[type="text"] { font-size: 0.875rem; padding-left: 50px; }
            }
          }
          
          .hk-filter-toggle {
            display: block;
            width: 100%;
            padding: 10px 16px;
            background: #f0f7f4;
            border: 1px solid #1D9E75;
            border-radius: 6px;
            color: #0F6E56;
            font-size: 0.875rem;
            text-align: center;
            margin-bottom: 15px;
            transition: background 0.2s;
          }
          
          #hk-filter-flex-box {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.4s ease, opacity 0.3s ease;
          }
          
          #hk-filter-flex-box.open {
            max-height: 600px;
            opacity: 1;
          }
	    }
	  }
    }
  }
  .hk-filter-box-sp {
	display: none;
	
    @media (max-width: 430px) {
      & {
	    display: block;
        position: relative;
        background: url(/wp-content/themes/shikinmap/assets/images/category/bg_hojokin.webp) no-repeat right top;
        background-size: cover;
        width: 100%;
        height: 250px;
        margin-bottom: 3rem;
        overflow-x: hidden;
      }

      &:after {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        background: url("/wp-content/themes/shikinmap/assets/images/category/hojokin_woman.webp") no-repeat center bottom;
        background-size: cover;
        width: 170px;
        height: 210px;
        z-index: 1;
      }

      .hk-filter-box-txt-sp {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(0, -50%);
        width: 55%;
        z-index: 2;
        font-weight: 700;
        color: #0232ba;
        
        .ttl-sp {
          font-size: 1.5rem;
          line-height: 1.2;
          margin-bottom: 10px;
          
          span { display: block; }
        }
        
        .txt-sp { line-height: 1.2; }
      }
    }
  }
}

.hk-card {
  background: var(--color-surface);
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 50px;
  
  .hk-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 20px;
    
    .hk-card-name {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.4;
      flex: 1;
    }
  }
  
  .hk-card-meta {
    font-size: 0.875rem;
    color: var(--color-cancel);
    margin-bottom: 20px;
  }
  
  .hk-card-stats {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    
    .hk-stat {
      background: var(--color-bg);
      padding: 15px 20px;
      width: 49%;
      margin-bottom: 20px;
      
      .hk-stat-label {
        font-size: 0.875rem;
        color: var(--color-cancel);
      }

      .hk-stat-value {
        font-size: 1.125rem;
        font-weight: 700;
      }
    }
  }
  
  .hk-deadline-bar {
    margin-bottom: 20px;
    
    .hk-bar-labels {
      display: flex;
      justify-content: space-between;
      color: var(--color-cancel);
      margin-bottom: 10px;
      
      .is-open {
        color: #1d9e75;
        font-weight: 700;
      }
        
      .is-soon {
        color: #ef9f27;
        font-weight: 700;
      }
      
      .is-today {
        color: #e24b4a;
        font-weight: 700
      }

    }

    .hk-bar-bg {
      height: 20px;
      background:  var(--color-bg);
      border-radius: 5px;
      overflow: hidden;
      
      .hk-bar-fill {
        height: 100%;
        border-radius: 5px;
        transition: width .3s;
        
        &.is-open {
          background: #1d9e75;
        }
        
        &.is-soon {
          background: #ef9f27;
        }
        
        &.is-today {
          background: #e24b4a;
        }
      }
    }
  }
  
  .hk-next-round {
    background: var(--color-bg);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--color-cancel);
    margin-bottom: 20px;
  }
  
  .hk-memo {
    color: var(--color-cancel);
    line-height: 1.4;
    margin-bottom: 20px
  }
  
  .hk-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    
    .hk-checked {
      font-size: 0.75rem;
      color: var(--color-cancel);
    }
    
    .hk-btn {
      display: inline-block;
      background: var(--color-accent);
      color: var(--color-surface);
      font-size: 0.875rem;
      font-weight: 700;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none
    }
  }
  
  @media (max-width: 430px) {
    & {
      padding: 20px;
      
      .hk-card-top {
	    .hk-card-name {
          width: 100%;
          font-size: 1.25rem;
	    }
	    
	    span {
		  width: 100%;
		  text-align: center;
		  padding: 10px;
	    }
      }
      
      .hk-card-stats {
	    .hk-stat {
		    width: 100%;
	    }
	      
      }
    }
  }
}

.hk-status-badge {
  font-size: 0.875rem;
  padding: 5px 20px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 700;
  flex-shrink: 0;
      
  &.hk-status-open {
    background: #e1f5ee;
    color: #0f6e56;
  }

  &.hk-status-soon {
    background: #faeeda;
    color: #854f0b;
  }

  &.hk-status-closed {
    background: var(--color-bg);
    color: var(--color-cancel);
  }
}

/* ================ 補助金ページ 記事詳細 ================ */

.hk-wrap {
  .hks-status-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 2rem;
  }
  
  .hk-deadline-bar {
    margin-bottom: 2rem;
    
    .hk-bar-labels {
      display: flex;
      justify-content: space-between;
      color: var(--color-cancel);
      margin-bottom: 10px;
      
      .hk-days-left {
	    font-weight: 700;

        &.is-open {
          color: #1d9e75;
        }

        &.is-soon {
          color: #ef9f27;
        }

        &.is-today {
          color: #e24b4a;
        }
      }
    }
    
    .hk-bar-bg {
      height: 20px;
      background: #f0f0f0;
      border-radius: .5rem;
      overflow: hidden;

      .hk-bar-fill {
        height: 100%;
        border-radius: .5rem;
        transition: width .3s;

        &.is-open { background: #1d9e75; }

        &.is-soon { background: #ef9f27; }

        &.is-today { background: #e24b4a; }
      }
    }
  }
  
  .hks-next-round { margin-bottom: 2.0rem; }
  
  .hks-stats-list {
    margin: 0 0 3rem;
    padding: 20px;
    background: var(--color-bg);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    
    li {
      width: 100%;
      background: var(--color-surface);
      padding: 20px;
      
      .ttl {
        font-weight: 700;
      }
    }
  }
  .hks-section {
    margin-bottom: 2rem;
    
    .hks-steps {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      
      .hks-step {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        
        .hks-step-num {
          width: 150px;
          text-align: center;
          background: var(--color-bg);
          padding: 10px 0 8px;
          font-size: 0.875rem;
          margin-right: 20px;
          font-weight: 700;
          
          @media (max-width: 430px) {
            & {
	          margin: 0 0 10px;
	          width: 100%;
            }
	      }
        }
        
        .hks-step-text {
          line-height: 1
        }
      }
    }
    
    .hks-caution {
      background: var(--color-bg);
      padding: 20px 20px 20px 40px;
      
      li {
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .hks-cases {
      background: var(--color-bg);
      padding: 20px;

      .hks-case {
        background: var(--color-surface);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        
        &:last-child { margin-bottom: 0; }
        
        .hks-case-header {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: stretch;
          gap: 10px;
          margin-bottom: 20px;
        
          .hks-case-industry {
            font-weight: 700;
            background: #e1f5ee;
            color: var(--color-accent);
            padding: 15px 15px 13px;
            border-radius: 4px;
            width: 100%;
          }
          
          .hks-case-tool {
            font-size: 0.875rem;
            color:  var(--color-cancel);
            padding: 10px 15px 8px;
            border-radius: 4px;
            border: 1px solid var(--color-border);
            width: 49%
          }
          
          .hks-case-amount {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--color-accent);
            background: var(--color-surface);
            padding: 10px 15px 8px;
            border-radius: 4px;
            border: 1px solid var(--color-border);
            width: 49%;
          }
          
          @media (max-width: 430px) {
            .hks-case-tool, .hks-case-amount { width: 100%; }
          }
        }
        
        .hks-case-block {
          margin-bottom: 10px;
          
          &:last-child { margin-bottom: 0; }
          
          .hks-case-label {
            font-weight: 700;
            color: var(--color-text);
          }
          
          .hks-case-text {
            color: var(--color-text);
            margin-bottom: 0;
          }
        }
      }
    }
    
    .hks-related {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2rem;
      gap: 20px;
      
      .hks-related-item {
        width: 100%;
        display: block;
        background: var(--color-bg);
        border-radius: 8px;
        padding: 20px;
        text-decoration: none;
        border: 1px solid var(--color-border);
        transition: .3s;

        @media (hover: hover) {
          &:hover {
            background: #f0f0f0;
          }
        }

        .hks-related-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 20px;
          
          .hks-related-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: #333;
            line-height: 1.4;
            flex: 1;
          }
          
          .hks-related-status {
	          
	        .hks-related-days {
		      font-size: 0.75rem;
              font-weight: 500;
		        
		      &.is-open { color: #1d9e75; }
		      &.is-soon { color: #ef9f27; }
	        }
          }
        }
        .hks-related-meta {
          display: flex;
          align-items: center;
          gap: 8px;
            
          .hks-related-max {
            color: var(--color-accent);
            font-weight: 700;
            
            .hks-related-max span { font-size: 0.875rem; }
            
          }
        }
      }
    }
  }
  .hks-checked-at {
    text-align: right;
    font-size: 0.75rem;
    margin-bottom: 50px;
  }
  
  .hks-cta a {
    width: 250px;
    font-size: 0.875rem;
    text-align: center;
    background: var(--color-accent);
    color: var(--color-surface);
    border: 1px solid var(--color-accent);
    display: block;
    padding: 10px 0 8px;
    margin: 0 auto;
    transition: .3s;
    
    @media (hover: hover) {
      &:hover {
	    background: var(--color-surface);
	    color: var(--color-accent);
      }
    }
  }
}

/* ================ 固定ページ類 ================ */
.page #index-keyv {
  margin-bottom: 50px;
}

.page {
  main {
    background: #fff;
    padding: 50px;
	
    @media (max-width: 430px) {
      & { padding: 20px; }  
    }
  }
}

.information-box {
  padding: 30px;
  background: #fff;
  height: 100%;
    
  ul {
    border: 1px solid var(--color-border);
    padding: 30px;
    
    li {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      padding: 30px;
      border-bottom: 1px solid var(--color-border);
      width: 100%;
      
      &:first-child { padding-top: 0; }
      
      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      
      .item { width: 150px }
    }
  }
  @media (max-width: 430px) {
    & {
	  padding: 0;
	  
	  ul {
		li {
          padding: 30px 0;
		}
	  }
	}  
  }
}

.author-block {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.0rem;
  
  h2 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .image { width: 200px; }
  
  .detail {
    width: calc(100% - 200px);
    padding-left: 3rem;
    
    h2 {
      font-size: 1.125rem;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    
    h3 { 
	  font-size: 0.875rem;
	  margin-bottom: 10px;
	}
    
    .txt { font-size: 0.875rem }
  }
  
  @media (max-width: 430px) {
    .image {
      width: 80%;
      margin: 0 auto 20px;
    }

    .detail { width: 100%; padding: 0; }
  }
}

.terms-box {

  h3 { margin-bottom: 10px; }
  
  ul {
    list-style: outside disc;
    border: 0;
    padding: 0 0 0 18px;
    margin-bottom: 2.0rem;
    
    li {
      position: relative;
      border: 0;
      display: block;
      margin-bottom: 5px;
      padding: 0;
      text-indent: -19px;
    
      &:last-child { margin-bottom: 0; }

      &:before {
        content: "●";
        left: 0;
        top: 0;
        color: var(--color-text);
        font-size: 0.75rem;
        line-height: 1;
        padding: 0 5px 0 1.5px;
      }
    }
  }
}

.contact-form {

  ul {
    margin-bottom: 2rem;
  
    li{
	  
	  h4 { width: 150px; }

      .input-form { width: calc(100% - 150px); }
    
      input, textarea {
        width: 100%;
        background: var(--color-bg);
        padding: 10px;
      }

      @media (max-width: 430px) {
        h4 { margin-bottom: 10px; }
	      
        h4, .input-form { width: 100%; }
      }
    }
  }
  
  .center {
    text-align: center;
    font-size: 0.875rem;
    margin-bottom: 20px;
  }
  
  .wpcf7-turnstile {
    width: 300px;
    margin: 0 auto 20px;
  }
  
  .btn-submit input {
    width: 300px;
    background: #0abab5;
    padding: 1rem 0;
    text-align: center;
    color: #fff;
    margin-inline:auto;
    display: block;
  }

}