/*
Theme Name: Hikari Consulting Inc.
Author: Ryonosuke Miyashita
Description: WordPress theme Hor Hikari Consulting Inc.
Version: 1.0
*/
:root {
  --base-color: rgb(247, 240, 234);
  --dark-color: rgb(101, 67, 33);
  --mid-color: rgb(153, 124, 95);
  --light-color: rgb(204, 85, 0);
  --disable-color: #e9e9e9;
  --alert-color:tomato;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: white;
}
body.disabled {
  width:100vw;
  height:100vh;
  overflow:hidden;
}
body.disabled::after {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:100;
  background:rgba(255,255,255,.7);
}

a:visited,
a:focus,
a:target {
  text-decoration: none; /* 下線を削除 */
  color: inherit;        /* 親要素の色を維持（変えない） */
}
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.normal {
  font-weight:400 !important;
}
.bold {
  font-weight:600 !important;
}

/* ヘッダー */
.site-header {
  padding: 1rem;
  background-color: white;
  position:relative;
}
.site-header h1 {
  font-size:21px;
  color:var(--dark-color);
  letter-spacing:1px;
  padding-left:.6em;
}


/* ハンバーガー非表示状態（PC/タブレット用） */

.global-nav {
  
}

.global-nav ul {
  list-style:none;
}
.global-nav ul li a {
  text-decoration:none; 
  display:inline-block;
  padding:.4em .8em;
  position:relative;
  letter-spacing:2px;
  color:var(--dark-color) !important;
}


/* ハンバーガーボタン */
.menu-toggle {
  display: none;
  font-size: 2.4rem;
  background: none;
  border: none;
  cursor: pointer;
  position:absolute;
  top:22px;
  right:14px;
}

/* PC表示 */
@media (min-width: 768px) {
  .global-nav ul {
    display: flex;
    gap: 1rem;
  }
}

/* スマホ表示 */
@media (max-width: 767px) {
  .menu-toggle {
    display: block;
    color:var(--dark-color);
    line-height:10px;
    transition:all .3s 0s ease-in-out;
  }
  .menu-toggle span {
    font-size:8px;
  }
  .menu-toggle:hover {
    color:var(--light-color);
  }

  .global-nav {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    z-index:2;
    background:url('./images/ptbk.png') repeat center;
    filter:invert(100%);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }

  .global-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    gap: 1rem;
    margin: 0;
    padding: 1rem 0;
    width:100%;
    text-align:center;
    filter:invert(100%);
    color:var(--dark-color);
  }

  /* 開いた状態 */
  .global-nav.active {
    max-height: 300px; /* メニュー全体の高さを想定 */
    opacity: 1;
  }
}


/* PC以上（横並び表示） */
@media (min-width: 768px) {
  .global-nav ul {
    display: flex;
    gap: 1rem;
  }
}

.site-main {
  width:100%;
  margin-bottom:4rem;
}


/* メインビジュアル */
.hero {
  position: relative;
  width: 100%;
  
  /* アスペクト比 2:3 を維持 */
  aspect-ratio:16 / 9;

  /* 背景画像 */
  background-image: url('./images/main.webp');
  background-position: center; /* 中央を基準 */
  background-size: cover;      /* 必ず領域いっぱいに */
  background-repeat: no-repeat;

  /* テキストを中央に配置したい場合 */
  text-align: center;
}
.hero p {
  color:var(--light-color);
  display:block;
}
.hero h2 {
  position:absolute;
  display:block;
  font-size: 2rem;
  letter-spacing:2px;
  font-weight:bold;
  font-size:16px;
  color:var(--dark-color);
  bottom:1.6em;
  right:0;
  left:0;
  margin:auto;
}
.hero::after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('./images/ptbk.png') repeat center;
  background-size:2px 2px;
  filter:invert(100%);
  opacity:.4;
  z-index:1;
}
@media (max-width: 767px) {
  .hero {
      aspect-ratio: 3 / 2; /* 縦/横 = 2/3 */
  }
}

/* コンテンツカード */
.content {
  width:100%;
  max-width:1180px;
  margin:6rem auto 5rem auto;
  opacity:0;
  transition:all .8s .3s ease-in-out;
}
.content.archive {
  min-height:60vh;
}
.content.active {
  opacity:1;
  margin:5rem auto 5rem auto;
}
.content h3 {
  margin:2em 0 .4em 0;
  width:100%;
  font-size:20px;
  padding-left:20px;
  letter-spacing:2px;
  position:relative;
  color:var(--dark-color);
  display:block;
}
.content h3 span {
  display:inline-block;
  vertical-align:bottom;
  font-size:15px;
  text-indent:.6em;
  letter-spacing:.4px;
  color:var(--mid-color);
}
.content .summary {
  padding:1em 20px;
  color:var(--light-color) !important;
}
.content .summary h4 {
  font-size:20px;  
  padding-top:1em;
  color:var(--dark-color);
  text-align:right;
}
.content .summary h5 {
  line-height:1.7em;
  font-size:20px;
  padding-bottom:.6em;
}
.content .summary p {
  line-height:1.5em;
  font-size:15px;
  padding-bottom:.6em;
}

.content div.inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.4rem 1rem;
}

.content div.pannel .button {
  display:block;
  background:var(--dark-color);
  border:none;
  color:white !important;
  font-weight:bold;
  padding:1.2rem;
  width:250px;
  margin:2.4rem auto;
  font-size:16px;
  letter-spacing:1px;
  border-radius:.4rem;
  transition:all .4s 0s ease-in-out;
  text-align:center;
  text-decoration:none;
}
.content div.pannel .button:hover {
  background-color:var(--light-color);
  padding:1.1rem 1.2rem 1.3rem 1.2rem;
}

.content .flat {
  display:grid;
  gap:10px;
  list-style:none;
  margin:1rem;
  padding:1rem 0;
  border-radius:0.2rem;
  background:rgba(255,255,255,.7);
  color:var(--dark-color);
}
@media (max-width: 767px) {
  .content .flat {
    grid-template-columns:1fr 3fr;
  }
}
@media (min-width: 768px) {
  .content .flat {
    grid-template-columns:1fr 5fr;
  }
}
.content .flat dt {
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.8em;
}
.content .flat>* {
  padding:.4rem 0;
  border-bottom:dotted 1px #e9e9e9;
}


.card {
  padding: 1rem 1rem 2rem 1rem;
  border: 1px solid var(--dark-color);
  border-radius: 0.4rem;
}
.card h4 {
  width:100%;
  font-size:18px;
  padding:.4em 0 .3em 0;
  border-bottom:1px solid var(--light-color);
  margin-bottom:1em;
  letter-spacing:2px;
  color:var(--dark-color)
}
.card p {
  line-height:1.9em;
  font-size:15px;
  color:var(--mid-color);
  min-height:5.7em;
}

.content .works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.4rem 1rem;
  list-style:none;
}
.content .works li.work { 
  display: grid !important;
  gap: 1rem;
}
@media (max-width: 767px) {
  .content .works {
    grid-template-columns:1fr;
  }
  .content .works li.work { 
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 768px) {
  .content .works {
    grid-template-columns:1fr 1fr;
  }
  .content .works li.work { 
    grid-template-columns: 1fr;
    gap:1rem;
  }
}
@media (min-width: 1024px) {
  .content .works {
    grid-template-columns:1fr 1fr 1fr;
  }
  .content .works li.work { 
    grid-template-columns: 1fr;
    gap:0;
  }
}
.content .works .work h4 {
  width:100%;
  margin:0 0 1em 0;
  font-size:18px;
}
.content .works .work h4 span {
  font-size:14px;
  color:var(--mid-color);
  line-height:1em;
}
.content .works div img {
  width:100%;
  padding-top:10px;
}
.content .works .work .description {
  padding:0 1em 0 1em;
}
.content .works .work p {
  padding-bottom:1.8em;
  font-size:14px;
  width:100%;
}
.content .works .work p.phone {
  width:100%;
  text-align:right;
}
.content .works .work p.phone a[href^="tel:"] {
  display:inline-block;
  padding:.6em 1em;
  background:var(--mid-color);
  line-height:1em;
  border-radius:1rem;
  color:var(--base-color);
  letter-spacing:1px;
  color:var(--base-color);
  text-decoration:none;
  transition:all .4s 0s ease-in-out;
  margin:0 0 0 auto;
}
.content .works .work p.phone a[href^="tel:"]:hover {
  background:var(--light-color);
}
.contact-form {
  padding:1.4rem 1rem;  
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea
{
  padding:.6em;
  font-size:16px;
  border:solid 1px var(--dark-color);
}
.contact-form .nf-error-msg,
.contact-form .ninja-forms-req-symbol
{
  color:var(--alert-color);
}
.contact-form .nf-error input,
.contact-form .nf-error textarea
{
  border:solid 1px var(--alert-color);
}
.contact-form label {
  font-family: "Noto Sans JP", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  color:var(--dark-color);
}
.contact-form input[type="submit"] {
  display:block;
  background:var(--dark-color);
  border:none;
  color:white !important;
  font-weight:bold;
  padding:1.2rem;
  width:250px !important;
  margin:2.4rem auto;
  font-size:16px;
  letter-spacing:1px;
  border-radius:.4rem;
  transition:all .4s 0s ease-in-out;
  text-align:center;
  text-decoration:none;
}

.content .newsList {
  list-style:none;
  padding: 1.4rem 1rem;
}
.content .notexists {
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
  min-height:200px;
  width:100%;
  margin:1rem auto;
  font-size:20px;
  letter-spacing:1px;
  color:var(--mid-color);
}

.content .newsList .news {
  padding:0 1em 1em 1em;
  border-bottom:1px dashed #e9e9e9;
  margin-bottom:1.8em;
}
.content .newsList .news a {
  text-decoration:none;
}
.content .newsList .news a h4 {
  font-size:20px;
  letter-spacing:1px;
  color:var(--dark-color);
  transition:all .3s 0s ease-in-out;
}
.content .newsList .news a:hover h4 {
  color:var(--light-color);
}
.content .newsList .news a time {
  font-size:12px;
  letter-spacing:1px;
  color:var(--base-color);
  background:var(--light-color);
  padding:.3em .6em;
  line-height:1em;
  border-radius:.4rem;
  transition:all .3s 0s ease-in-out;
}
.content .newsList .news a:hover time {
  background:var(--mid-color);
}
.content .newsList .news a p.excerpt {
  width:100%;
  margin:1em 0 0 0;
  line-height:1.6em;
  color:var(--mid-color);
} 

.pagination-wrap {
  width:100%;
  margin-top:80px;
}
ul.pagination {
  list-style:none !important;
  display:grid;
  width:76vw;
  max-width:420px;
  margin:0 auto;
  gap:10px;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center; /* 横方向 */
  align-items: center;
}
ul.pagination a {
  text-decoration:none;
  color:var(--dark-color);
  vertical-align:middle;
}
ul.pagination span {
  text-decoration:none;
  color:var(--light-color);
  vertical-align:middle;
}
ul.pagination .disabled {
  color:var(--disable-color);
  vertical-align:middle;
}

.post-detail {
  display:block;
  min-height:100vh;
}

.post .content article {
  padding: 1.4rem 1rem;
}

.post .content article .thumbnail {
  width:100%;
  aspect-ratio: 3 / 2;
  margin:0 auto 1.6em auto;
}
.post .content article img {
  width:100%;
}
.post .content article p:has(img) {
  margin:1.8em auto;
  padding:0 1rem;
  text-align:center;
}
.post .content article .title {
  font-size:20px;
  line-height:1.8em;
  color:var(--dark-color);
}
.post .content article .published {
  font-size:14px;
  color:var(--mid-color);
  display:block;
}
.post .content article .detail {
  width:100%;
  margin:1.8em auto;
  color:var(--dark-color);
  line-height:1.6em;
}
.post .content article h4 {
  width:100%;
  margin:2.4em 0;
}
.post .content article ul {
  padding:1.6em 2em;
  line-height:1.6em;
}
/* フッター */
.site-footer {
  padding: 6rem 1rem;
  text-align: center;
  background-color:var(--dark-color);
}
.site-footer .footer-menu {
  display:grid;
  padding:0 1rem;
  grid-template-columns:1fr 1fr;
  gap:1em;
  width:100%;
  max-width:600px;
  margin:0 auto 4rem auto;;
  justify-items: center; /* 横方向 */
  align-items: center;
  list-style:none;
}
.site-footer .footer-menu a {
  text-decoration:none;
  color:var(--base-color);
  font-size:14px;
  transition:all .3s 0s ease-in-out;
}
.site-footer .footer-menu a:hover {
  color:var(--mid-color);
}
.site-footer p {
  color:#fff;
  letter-spacing:2px;
  font-size:14px;
}

@media (min-width: 768px) {
  .content div.inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .content div.inner {
    grid-template-columns: repeat(3, 1fr);
  }
}