:root {
    --max-width: 1200px;
    --primary: #194FBD;
    --accent: #005fa3;
    --bg: #f9fafc;
    --card: #ffffff;
    --text: #333;
}

* {
    box-sizing: border-box
}

html,body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "BIZ UDGothic",sans-serif;
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
    background: var(--primary);
    color: #fff;
    padding: 1rem 0;
}

.header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.brand {
    display: flex;
    align-items: center;

}

.site-logo {
    width: 75px;
    height: 75px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: .4rem .6rem;
    border-radius: 6px;
}

nav a[aria-current="page"] {
    background: rgba(255,255,255,0.35);
    padding:0.75rem;
}


nav a:hover {
  background: #fff;
  color: var(--primary);
  border: 0.25px solid var(--primary);
  padding:0.5rem 0.75rem;
}


/* =========================================================
   トップページ
   ========================================================= */
.hero {
    background: linear-gradient(180deg, #eaf3ff, #ffffff);
    padding: 2rem;
    border-radius: 10px;
    margin: 1rem 0;
}

.hero img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-bottom: 1rem;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.card {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30,115,190,0.06);
}


h1{
    margin:0;
    padding:0;
}

.main-title{
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.5em;
  line-height: 1.4;
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  background: #e2e9f9;
  font-size: 1.2em;
}

.main-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0.25em;
  top: 0.5em;
  color: var(--primary); 
}


.services-title{
    font-weight: bold;
    padding: 0.3rem;
    margin-top: 0.3rem;    
    margin-bottom: 2rem;
    position: relative;
    font-size: 1.3em;
    text-align: left;
}

.services-title::after{
    content: '';
    background-size: 10px 10px;
    background-color: #e1eef5;
    background-image: repeating-linear-gradient(-45deg, var(--primary) 0, var(--primary) 3px, #fff 0, #fff 50%);
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.card h4{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.card figcaption{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;    
}

.card img{
    width: 100%;
    height: auto;
}

.card figure{
    margin: 0 auto 0 auto;
}

/* =========================================================
   パンくずリスト
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 1px 0);
  white-space: nowrap; border: 0;
}

.breadcrumb {
  background: #f3f7ff;
  border-bottom: 1px solid #e2e9f9;
}
.breadcrumb__wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: .5rem 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.breadcrumb__wrap:focus {
  outline: 3px solid #ffcc33;
  outline-offset: 3px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap; 
}

.breadcrumb__item a,
.breadcrumb__item[aria-current="page"] {
  font-size: .95rem;
  color: var(--text);
  text-decoration: none;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin: 0 .25rem 0 .15rem;
  color: #7d8fb3;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.breadcrumb__item a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.breadcrumb__item a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 934px) {
  .breadcrumb__wrap {
    padding: .75rem 1rem;
  }
  .breadcrumb__item a,
  .breadcrumb__item[aria-current="page"] {
    font-size: 1rem;
  }
}

/* =========================================================
   フッター
   ========================================================= */
footer.site-footer {
    background: var(--primary);
    color: #fff;
    padding: 0.25rem 1rem;
    margin-top: 0.5rem;
    text-align: left;
}

.site-footer a { color:#fff; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus { text-decoration:underline; }

.footer-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 1rem 0;
}

.footer-block h4 {
  color:#fff;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-bottom: dotted 3px #fff;
}

.footer-menu { list-style:none; padding:0; margin:0; }
.footer-menu li { margin-bottom:.4rem; }


.footer-map-area {
  display:flex;
  gap:1rem;
  flex-wrap:nowrap;
}
.footer-map-box iframe {
  width:350px !important;
  height:250px !important;
}

.footer-info-box {
  display:flex;
  flex-direction:column;
  /*justify-content:center;*/
  color:#fff;
}

.footer-logo {
  width:150px;
  height:auto;
  margin-bottom:.5rem;
}

.footer-address {
  font-size:.85rem;
  line-height:1.7;
}

.sns-icons { display:flex; gap:.8rem; flex-wrap:wrap; }
.sns-icon { width:28px; height:28px; display:inline-block; }



.footer-copy {
  border-top:1px solid rgba(255,255,255,0.4);
  text-align:center;
  padding:.8rem 0;
  margin-top:1rem;
  margin-bottom:0.5rem;
  color:#fff;
}

@media (max-width: 1024px){
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-map-box iframe { height:300px !important; }
}

@media (max-width: 768px){
  .footer-map-area { flex-direction:column; text-align:center; }
  .footer-map-box iframe { width:100% !important; height:260px !important; }
}

@media (max-width: 600px){
  .footer-grid { grid-template-columns:1fr; }
  .sns-icons { justify-content:center; }
  .footer-copy p { font-size:.9rem; }
}

/* =========================================================
   よくある質問ページ用アコーディオン
   ========================================================= */
.accordion { 
  max-width: 90%; 
  margin: 0 auto;
 }

.accordion-item {
  background:#fff;
  margin-bottom:20px;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition: 5s;
}

.accordion-header {
  list-style:none;
  padding:15px;
  cursor:pointer;
  font-weight:bold;
  font-size:1.2em;
  background:#3770ad;
  color:#fff;
  user-select:none;
  transition:background 1.5s;
  border:0.25px solid transparent;
}

.accordion-header::-webkit-details-marker { display:none; }
.accordion-header::marker { content:""; }

.accordion-header:hover {
  background:#fff;
  border-radius:6px;
  color:var(--primary);
  border:0.25px solid var(--primary);
}

.accordion-header:focus-visible {
    outline: 3px solid #ffcc33;
    outline-offset: 4px;
    background: #fff;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 204, 51, 0.4); 
    border-radius: 6px;
}

.accordion-content {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  background:#fff;
  padding:0 15px;
  font-size:1.1em;
  border-color:var(--accent);
}


.accordion-content p { padding:15px 0; margin:0; }

.accordion-item[open] .accordion-content {
  max-height:500px; 
}

@media(max-width: 934px) {
    .header .inner {
        flex-direction:column;
        align-items: flex-start;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    nav ul {
        flex-wrap: wrap;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 1rem;
        border-radius: 8px;
        padding: 1rem;
        background: #fff;
    }

    .responsive-table td {
        display: block;
        border: none;
        padding: .5rem 0;
    }

    .responsive-table td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--primary);
        display: inline-block;
        width: 40%;
    }
}

/* =========================================================
   サービス・料金表用ページtable関連
   ========================================================= */
.table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.responsive-table th,.responsive-table td {
    padding: .75rem;
    border-bottom: 1px solid #e6eef9;
    text-align: left;
    vertical-align: top;
}

.responsive-table th {
    background: #eaf3ff;
    color: var(--text);
    font-weight: 700;
}

.responsive-table tr:nth-child(even) {
    background: #fbfdff;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.table-wrap:focus {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 1px 0);
  white-space: nowrap; border: 0;
}

.price-table {
  width: 100%;
  margin-bottom:3rem; 
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  font-size: 16px;
}

.price-table caption {
  text-align: left;
  padding: .75rem 1rem;
  background: #eaf3ff;
  color: var(--primary);
  font-weight: 700;
}

.price-table .caption-title { display: inline-block; }

.price-table thead th {
  background: #3770ad;
  color: #fff;
  text-align: center;
  padding: .75rem 1rem;
  font-weight: 700;
  border-bottom: 1px solid #dfeaf7;
  white-space: nowrap; 
}

.price-table td,
.price-table th[scope="row"] {
  padding: .85rem 1rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}
.price-table tbody tr:nth-child(odd)  { background: #ffffff; }
.price-table tbody tr:nth-child(even) { background: #f7fbff; }

.price-table th[scope="row"] { font-weight: 700; color: #1b2a3a; }

.tax-note { font-size: .8em; font-weight: normal; color: #fff; opacity: .9; }

@media (min-width: 935px) {
  .price-table td,
  .price-table th[scope="row"],
  .price-table thead th {
    vertical-align: middle !important;
  }
}

@media (max-width: 934px) {
  .price-table thead { display: none; }
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td,
  .price-table th[scope="row"] {
    display: block;
    width: 100%;
  }

  .price-table tr {
    margin: .75rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    overflow: hidden;
  }

  .price-table th[scope="row"] {
    background: #3770ad;
    color: #fff;
    border-bottom: 1px solid #dfeaf7;
  }

  .price-table td {
    border: none;
    border-bottom: 1px solid #eef2f7;
    position: relative;
    padding-left: 1rem !important;
    min-height: unset !important;
  }

  .price-table td::before {
    content: attr(data-label) "：";
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: .25rem 0 .25rem 0;
    font-weight: 700;
    color: var(--primary);
    white-space: normal;
  }
}

.price-table .category-row th {
  background: #eae6ff;          
  font-weight: 700;
  font-size: 1.05em;
  padding: 0.5rem 1rem;           
  border-bottom: 1px solid #dfeaf7;
  text-align: left;
}

@media (max-width: 934px) {
  .price-table .category-row th {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #dfeaf7;
  }
}

/* =========================================================
   お客様の声ページ
   ========================================================= */
.voice-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
@media (max-width: 934px){
  .voice-grid{ grid-template-columns: 1fr; }
}

.voice-card{
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30,115,190,0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
}
@media (max-width: 600px){
  .voice-card{ grid-template-columns: 1fr; }
}

.voice-figure{
  margin: 0;
  background: #f3f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  display: block;
}
.voice-figure figcaption{
  position: absolute;
  left: -9999px;
}

.voice-body{
  padding: 1rem;
}
.voice-title{
  font-size: 1.1rem;
  margin: 0 0 .3rem;
}
.voice-meta{
  margin: 0 0 .6rem;
  color: #556;
  font-size: .95rem;
}
.badge{
  display: inline-block;
  margin:0 auto;
  width:40%;
  text-align:center;
  padding: .15rem .5rem;
  background: #eaf3ff;
  border: 1px solid #dfeaf7;
  color: var(--primary);
  border-radius: 999px;
  font-size: .85rem;
}

.voice-rating{
  margin: .2rem 0 .6rem;
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: #f39c12;
}

.voice-dl{
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: .25rem .75rem;
  margin: .6rem 0 0;
  font-size: .95rem;
}
.voice-dl dt{ color:#445; }
.voice-dl dd{ margin: 0; }

.voice-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
@media (max-width: 1024px){
  .voice-grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .voice-grid-3{ grid-template-columns: 1fr; }
}

.voice-card2{
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30,115,190,0.06);
  padding: 1rem;
  display: flex;
  flex-direction: column; 
  gap: .5rem;
}

.voice-avatar{
  width: 250px; height: 250px;
  object-fit: cover;
  border-radius: 8px;
  align-self: center;  
  background: #f3f7ff;
}

.voice-title2{
  font-size: 1.05rem;
  margin: .25rem auto;
  text-argin:center;
}

.voice-meta2{
  margin: 0;
  color: #556;
  font-size: 1rem;
  margin:0 auto;
  font-weight:bold;
}

.voice-rating2{
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: var(--primary);
  margin:0 auto;
}

.voice-text{
  margin: .25rem 0 0;
}

.voice-time{
  margin: .25rem 0 0;
  font-size: .95rem;
  color: #445;
}

.voice-card2 a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.voice-card a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   お問い合わせページ用
   ========================================================= */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-grid input,.form-grid textarea,.form-grid select {
    width: 100%;
    padding: .6rem;
    border-radius: 6px;
    border: 1px solid #dfeaf7;
}

.req {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .4rem;
  font-size: .85em;
  color: #fff;
  background: #e74c3c;
  border-radius: 4px;
  line-height: 1.6;
}

.hint { margin:.25rem 0 0; font-size:.9rem; color:#666; }

.form-row { margin-bottom: 1rem; }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  max-width: 100%;
  border: 1px solid #dfeaf7;
  border-radius: 6px;
  padding: .6rem .7rem;
  background: #fff;
}

.address-fieldset { border: 1px solid #e6eef9; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.address-fieldset legend { padding: 0 .4rem; font-weight: 700; color: var(--primary); }
.address-grid {
  grid-template-columns: 1fr;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-w{
    width:80%;
    margin:0 auto;
}

/* =========================================================
   会社概要・プライバシーポリシー・サイトマップページページ
   ========================================================= */
.company-narrow{
  width: min(80%, var(--max-width));
  margin: 0 auto;
}

@media (min-width: 935px){
  .price-table .key-col{ width: 28%; }
}

@media (max-width: 934px){
  .company-narrow{ width: 92%; }
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.toc-list li a {
  display: inline-block;
  color: var(--primary);
  text-decoration: none;          
  line-height: 1.6;
  border-bottom: 2px solid transparent; 
  padding: 0;                     
}

.toc-list li a:hover,
.toc-list li a:focus {
  border-bottom-color: var(--primary);
  text-decoration: none;           
}

.toc-list li a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (min-width: 935px) {
  .toc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: .4rem;
  }
  .toc-list li:nth-child(7)  { grid-column: 2; grid-row: 1; }
  .toc-list li:nth-child(8)  { grid-column: 2; grid-row: 2; }
  .toc-list li:nth-child(9)  { grid-column: 2; grid-row: 3; }
  .toc-list li:nth-child(10) { grid-column: 2; grid-row: 4; }
  .toc-list li:nth-child(11) { grid-column: 2; grid-row: 5; }
  .toc-list li:nth-child(12) { grid-column: 2; grid-row: 6; }
}

@media (max-width: 934px) {
  .toc-list { gap: .6rem; }
  .toc-list li a { font-size: 1.05rem; }
}

/* =========================================================
   その他
   ========================================================= */
/*テキストリンク装飾*/
.textlink {
    padding-bottom: 5px;
    background-image: linear-gradient(#03c, #03c);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

.textlink:hover {
    background-position: bottom left;
    background-size: 100% 4px;
    text-decoration: none;
}

/*ボタン*/
.btn {
    display: inline-block;
    padding:0.6rem 1rem;
    margin: 1rem 0;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    border: 0.25px solid transparent; /* 初期状態ボーダー設定 */
}

.btn:hover {
  background: #fff;
  padding: .6rem 1rem;
  color: var(--primary);
  border: 0.25px solid var(--primary);
  border-color: var(--accent); /* ホバー時ボーダー色を設定 */
}

.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 5px;
}

/*Font Awesomeアイコン用*/
.fa-home,
.fa-yen-sign,
.fa-smile,
.fa-question,
.fa-envelope{    
    margin-right: 3px;
}

/*文字の横位置*/
.al-l{ text-align: left; }
.al-r{ text-align: right; }
.al-c{ text-align: center; }

/*文字のサイズ*/
.f08em{ font-size: 0.8em; }
.f09em{ font-size: 0.9em; }
.f10em{ font-size: 1.0em; }
.f11em{ font-size: 1.1em; }
.f12em{ font-size: 1.2em; }
.f13em{ font-size: 1.3em; }
.f14em{ font-size: 1.4em; }
.f15em{ font-size: 1.5em; }

a {
    color: #03c;
}