@charset "UTF-8";
/* =========================================
   CSS リセット
   ========================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

/* =========================================
   ページ全体の設定
   ========================================= */

.page-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  overflow: hidden;
}

body {
  font-family: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  height: auto;
  min-height: 100vh;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #333;
  background:url(https://mutsumi-biz.com/boki/img/mo.webp) fixed;
  background-attachment: fixed;
}

a {
  color: #5b2927;
  text-decoration: none;
  
}

a:visited {
  color: #3e2423;
}

a:hover {
  color: #ff6347;
}

li {
    list-style: none;
}

/* =========================================
   レイアウト構造 (メイン, ヘッダー, コンテナ)
   ========================================= */

#main {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

#header-img {
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);   /* 少し浮き感をプラス */
}
#header-img img.header-img {
  width: 101%;               /* ← 1%だけ広げる（10px～15px相当） */
  max-width: none;
  height: auto;              /* ← 高さは絶対に変えない！ */
  margin-left: -0.5%;        /* 左右に均等に0.5%ずつはみ出させる */
  margin-right: -0.5%;
  display: block;
}

#container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem;
}


#header-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 65px;
  background: radial-gradient(rgb(222 221 183 / 88%), #67809e);  
}

#header-inner > div:nth-child(1) {   /* 左側 */
  font-size: 1.3rem;
  font-weight: 500;
  text-align: left;
  padding: 6px 0 0 10px;
  line-height: 1.3;
}
#header-inner > div:nth-child(2) {   /* 右側 */
  font-size: 1.3rem;
  text-align: right;
  padding: 4px 10px 0 0;
  line-height: 1.3;
}

#footer,
.small-text,
.small-note,
.link-list {
  font-size: 1.3rem;
}

/* =========================================
   コンテンツ & サイドバー
   ========================================= */

#contents {
  flex: 1 1 520px;
  min-width: 0;
}

h1 {
  font-size: 1.5rem;
  margin: 15px 0 25px 0;
  line-height: 2.2;
  padding-bottom: 0.3em;
  background: linear-gradient(to bottom, 
              #fca4a41f 80%, 
              #eb1c3e6e 90%);
  background-size: 100% 1.4em;
  background-repeat: no-repeat;
  background-position: bottom;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

h1 span { display: block; }


#contents h2{
  font-size: 1.65rem;
  margin: 15px 5px 15px 6px;
  position: relative;/*相対位置*/
  padding: 0.57em 0.5em 0.5em 1.5em;
  line-height: 1.4;
  color: #3c4043;
  border-top: dotted 1px #cd1d46;
  border-bottom: dotted 1px #cd1d46;
  background: #ffffed;
}


#contents h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコンのユニコード*/ 
  position: absolute;/*絶対位置*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.70em;
  color: #e84f4f;
  font-weight: 900;
}

#contents h3 {
  margin: 12px 5px 10px 5px;
  padding: 9px 10px 8px 10px;
  line-height: 110%;
  font-size: 1.55rem;
  color: #444444;
  border-left: solid 5px #aaaaaa;
  background-color: #eeeeee;
  display: flex;
  align-items: center;
}

#menu {
  flex-shrink: 0; /* 固定幅を維持 */
  flex: 0 0 200px;
  padding: 6px 1px 0 1px;
}

#menu h2,
#menu2 h2 {
  font-size: 1.5rem;
  padding: 0.2em 0.5em 0.2em 1.3em;
  margin: 10px 1px 15px 20px;
  background: linear-gradient(to right, #ffa4f3 25%, transparent 80%);
  color: #545454;
}

.menu-list1 a,
.menulist a {
  position: relative;
  padding-left: 28px;
  display: block;
  font-size: 1.5rem;
  color: #333;
  line-height: 1.7;
  margin: 8px 3px 1px 8px;
  transition: color 0.3s ease;
}

#menu2 .menu-list1 a {
  display: inline-block;
}

.menu-list1 a:hover,
.menulist a:hover {
  color: #ac6125;
}

#menu2 .menu-list1 a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;      
  height: 17px; 
  background: url('https://mutsumi-biz.com/emoji/296[1].gif') no-repeat center / contain;
}

#menu .menu-list1 a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;      
  height: 17px; 
  background: url('https://mutsumi-biz.com/emoji/296[1].gif') no-repeat center / contain;
}

.menu-list1 a:hover::before,
.menulist a:hover::before {
  filter: brightness(0) saturate(100%) invert(47%) sepia(108%) saturate(1498%) hue-rotate(340deg) brightness(95%) contrast(95%);
}

.menulist a::before {
  content: "📍";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;                 /* 絵文字サイズ（文字に追従） */
}

.menulist a:hover::before {
  content: "🔥"; 
}

/* =========================================
   ユーティリティ & コンポーネント
   ========================================= */
.image-container {
  display: flex;
  margin: 1rem 0 0.5rem 0;
  gap: 1rem;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

figure {margin-top: 10px;}

.image-container img {
  max-width: 100%;
  width: 250px;
  min-height: 150px;
  max-height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border-radius: 5px;
  object-fit: cover;
}

.text-content {
  margin: 1rem 0;
  line-height: 1.5;
}

.highlight-text {
  font-size: 1.7rem;
  color: rgb(42 31 31);
  font-weight: bold;
}

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

.small-text,
.small-text a { 
  margin-top: 0.8px;
  gap: 1px;
}

p, .text-content, li, td, th {
   font-size: 1.5rem;    
}

p, .text-content {
  margin: 1.4rem 0;
  line-height: 1.6;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95em;
}

table caption {
    text-align: left;
    padding: 5px;
    font-size: 1.1em;
  color: #1565c0;
  font-weight: bold;
  background: #e3f2fd;
}

table th,
table td {
    border: 1px solid #999;
    padding: 8px 5px;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}

table th:first-child {
    width: 40%;
}

#news {
  border: 1px solid #999;
  padding: 1rem;
  max-height: 350px;
  overflow-y: auto;
  font-size: 1.4rem;
}

/* スマホでも絶対にこのサイズを守る（17pxを潰す） */
#news p,
#news .text-content {
  font-size: inherit;
}

.box18:after {
  top: -9px;
  left: -10px;
}
.box18:before {
  bottom: -9px;
  right: -10px;
}
.box18 {
  position: relative;
  margin: 1.5rem 0;
  padding: 1em;
  border: 2px solid #ffa4f3;
  border-radius: 3px 0 3px 0;
  font-size: 1.5rem;
  width: fit-content;
}

.box18::before,
.box18::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #ffa4f3;
  border-radius: 50%;
}

.cta-button a.button,
.cta-button2 a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  background: #17A2B8;
  color: #fff;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  min-height: 44px;
}

.cta-button a.button:hover,
.cta-button2 a.button:hover {
  background: #138496;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.cta-button.center {
  margin: 20px 0;
}

.faq-section {
  margin: 20px 0;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #eee;
  border-radius: 5px;
}

.faq-item {
  margin-bottom: 15px;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 10px 10px 10px 30px;
  background-color: #eeeeee;
  border: 1px solid #aaaaaa;
  border-radius: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  color: #444444;
  cursor: pointer;
  position: relative;
}

.faq-question::before {
  content: '+';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.9rem;
  font-weight: bold;
  color: #444444;
}

.faq-answer {
  display: none;
  padding: 10px;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 5px 5px;
  transition: max-height 0.3s ease-out;
  max-height: 0;
  overflow: hidden;
}

.faq-answer.active {
  display: block;
  max-height: 500px;
}

.individual-tutoring-banner,
.individual-tutoring-banner2 {
  background-color: #3a9261;
  color: #ffffff;
  padding: 12px 16px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.1;
  border-radius: 10px;
  margin: 10px 0;
  display: inline-block;
  max-width: 70%;
}

.individual-tutoring-banner2 a {
  color: #ffffff;
  font-size: 1.6rem;
}

.individual-tutoring-banner2:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hamburger-icon {
    position: fixed;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ddd;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    top: 30px;
    right: 40px;
  }

a:focus,
button:focus,
.hamburger-icon:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px rgba(140, 120, 150, 0.18);  /* 超極薄ライン */
  border-radius: 6px;
}

.form-container {
  margin: 40px auto 15px; 
  max-width: 560px;
  width: 100%;
  height: 380px;                   
  border: 2px solid #ffa4f3;
  border-radius: 20px;
  overflow: hidden;   
  position: relative;
  box-shadow: 0 6px 18px rgba(255, 105, 180, 0.12);
  padding: 0 1px;
  box-sizing: border-box;
}

.form-container iframe {
  width: 100%;  
  height: 69vh;          
  border: none; 
  clip-path: inset(0 0 80px 0);     /* ← 最下部53pxを完全に切り取る神CSS！！ */
  transform: translateZ(0);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.form-container iframe::-webkit-scrollbar {
  display: none;
}

.table-cell {
  padding: 8px;
}

.image-center {
  text-align: center;
}

.c-image {
  
  margin: 20px 0;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 85%;
}

.c2-image {
  
  margin: 20px 0;
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 75%;
}

.c3-image {
  
  margin: 20px 0;
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}

.textbook-img {
  max-width: 200px;
  width: 100%;
  margin: 20px 0;
}

.map-container {
  text-align: center;
  margin: 20px 0;
}

.map-container iframe {
  width: 100%;
  height: auto;
  min-height: 400px;
}

.course-list {
  margin: 10px 0;
  padding: 10px;
  border: 2px solid #eee;
  border-radius: 10px;
}

.course-link {
  display: flex;
  align-items: center;
  gap: 5px;
}

.course-list li {
  font-size: 1.4rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.course-list a {
  font-size: 1.4rem;
}

.course-link b {
  min-width: 130px;
}

.shortcut-section {
    margin: 30px 0;
    padding: 10px;
    border: dotted 1px #cd1d46;
    border-radius: 8px;
}
#shortcut-heading {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #d32f2f;
}
.shortcut-list li {
    position: relative;
    padding: 15px 10px 15px 60px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);    
}
.shortcut-num {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #e84f4f;
    color: white;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
}
.shortcut-desc {
    display: block;
    margin-top: 8px;
    font-size: 1.4rem;
    color: #666;
    line-height: 1.5;
} 

.small-note {
     margin: 10px 0;  
}

.small-note li {
  margin: 5px 0;  
    position: relative;
    padding-left: 0.5em;
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 4px;
}

.small-note li::before {
    content: "※";
    color: #999;
}

.small-note,
.small-note a {

color: #5f5252;
}

.small-note a:hover {
  color: #d2691e !important;
  text-decoration: underline;
}


.info-list,
.info-list ul {
  padding-left: 0.9em; 
  font-size: 1.4rem;
  margin: 1rem 0;
}

.info-list li {
  position: relative;
  padding-left: 0.8em;
  text-indent: -0.8em;  
  line-height: 1.7;
  margin-bottom: 0.6em;
}


.link-list {
  list-style: none;
  padding: 0;
  margin: 20px 0; 
}


.link-list li {
  margin-bottom: 0.8em;
  line-height: 0.8;
}

.link-list a {
  color: #78462e;                
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.link-list a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;  /* 矢印と文字の間隔 */
  background: url('https://mutsumi-biz.com/boki/img/yajirusi.jpeg') no-repeat center / contain;
  vertical-align: middle;
}

.link-list a:hover {
  color: #f60442;  
}


.target-subjects {
  margin: 10px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.target-subjects li {
  margin-bottom: 5px;
  font-size: 1.4rem;
}

.contact-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 3px;
  flex-shrink: 0;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

article {
  border: 1px solid #e0e0e0;
  padding: 5px 5px 10px 5px;
}

#footer,
.small-text,
.small-note,
.link-list
 {font-size: 1.3rem;}

#menu .menu-list1 a,
.menulist a,
.faq-question {
  font-size: 1.5rem;
}

/* =========================================
   フッター
   ========================================= */

#footer {
  margin: 0;
  padding: 20px 0 18px 0;
  text-align: center;
  color: #e0e0d5;
  border-top: 2px solid #fafecb;
  background-image: radial-gradient(#f81c81d9, #0b111dba 60%);
  background-size: cover;
}

#footer a {
  color: #bdc469;
}

#footer a:hover {
  color: #311010;
}

.footer-bottom {
  text-align: right;
}

.footer-contact {
  color: #615f5f;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #684545;
  border-radius: 4px;
  font-size: 1.3rem;
}

.footer-contact:hover {
  color: #755151;
  background-color: #a19090;
}


/* =========================================
   レスポンシブ (スマートフォン: max-width 600px)
   ========================================= */
@media (max-width: 600px) {
  
body {
    background-attachment: scroll;
  }
  
  html {
    font-size: 67.5%;     /* （1rem = 10.8px） */
  }

 h2 {
    padding-left: 1.6em !important;  }

  #contents h2:before {  
  font-size: 1.2em;  
  top: 0.5em;}

 #header-img {
        height: 100px;
    }

    #header-img img {
        width: 100%;
        height: 100%;
    }
  
.footer-contact {
    display: inline-block;
    padding: 0px 7px;
    margin-top: 7px;
  }

  #main, #header-inner, #header-img, #container, #contents, #news, #menu {
    width: 100%;
    max-width: 100%;
  }

#container {
    flex-direction: column;
    gap: 1.8rem;                    /* ちょっと広めで気持ちいい */
  }  

  #contents h2 {
    padding: 14px 0 10px 10px;
  }
  
  .box18 {
    padding: 0.6em 1em;
    }

#menu2 {
    width: 100%;
    flex-shrink: 1; /* 縮小可能 */
    margin: 0;
    padding: 3px 10px;
    order: 2;                      /* contentsの後に強制配置 */
    margin-top: 10px;
    padding: 20px 15px 0px ;
    border-top: 4px solid #ffa4f3;
  }


body.menu-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* メニュー本体は独立してスクロール可能 */
#menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;           /* フル高さ */
  height: 100dvh;          /* iOS対応 */
  overflow-y: auto;        /* ← これが無いとスクロールできない！ */
  -webkit-overflow-scrolling: touch;  /* iOSで滑らかに */
  transition: right 0.35s ease;
  background: #ffffff;
  z-index: 1000;
  padding: 20px;
  box-shadow: -5px 0 20px rgba(0,0,0,0.3);
}

#menu.active {
  right: 0;
}

#menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

#menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.hamburger-icon {
    top: 50px;
    right: 1px;
    background: #eeeeeeb3;
    border: 1px solid #ddd;
    font-size: 1.4rem;
   padding: 7px 8px; 
    
  }

  #menu h2 {
    padding: 7px 10px 7px 8px; 
      }
  
  #menu .menu-list1 a {
    display: inline-block;
}

  #menu #menu2 img {
    margin: 20px 10px;
  }

 .menulist a {
    display: inline-block;    
    margin: 3px 12px 3px 0; 
    white-space: nowrap;       /* リンクテキストが途中で折り返さない */
  }

  #menu h2 {
    background: -webkit-linear-gradient(to right, #f685e8, transparent) ;
    background: linear-gradient(to right, #ffa4f3 25%, transparent 80%) ;
    color: #545454;
    padding: 0.2em 0.5em 0.2em 1.3em;
    margin: 5px 1px 7px 15px;
    font-size: 1.5rem;
     }

  #news {
    max-height: 250px;
    padding: 3px;
  }

  p.textbook-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 5px;
  }

  p.textbook-container img {
    width: 45%;
    max-width: 150px;
    height: auto;
  }

  .course-list {
    margin: 10px 0;
    padding: 3px;
  }

  .course-list li {
    padding: 5px 0;
    }
  
 .c-image {
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 85%;
}

.c2-image {
  margin: 20px 0;
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .image-container img {
    
    width: 100%;
    min-width: auto;
    max-width: 100%;
    border-radius: 5px;
    object-fit: cover;
  }
  
  figure.image-container {
    text-align: center;
  }
  figure.image-container img {
    margin: 15px auto;
    max-width: 180px;
  }
  
  .faq-section {
    margin: 10px 0;
    padding: 5px;
  }

  .faq-question {
    padding: 8px 8px 8px 32px;
  }

 .form-container {
 max-width: 100%;
  height: 280px;
}
  .form-container iframe {
  height: 38vh;
}

}

@media (min-width: 601px) {

  #menu2 {
    display: none;
  }
  
 .top-highlight-wrapper {
    display: flex;
    align-items: center;
    gap: 35px;
    margin: 20px 0 10px 5px;
  }
  
  .top-highlight-wrapper figure {
    flex: 0 0 30%;
    align-self: flex-start;
  margin-top: -15px;       
  }
  
  }