@charset "utf-8";
@media screen,print and (min-width: 769px) {
/*横幅769px以上に適応*/



	
.contents {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}	

}

.contents h2 {
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝体", YuMincho,
                 "MS PMincho", "MS Mincho", serif;
    font-size: 30px;           /* 見出しらしい大きさ */
    font-weight: 600;          /* 明朝体はやや太めで上品に */
    color: #7B586D;               /* 落ち着いたダークグレー */
    line-height: 1.6;          /* 行間を少し広めに */
    letter-spacing: 0.05em;    /* 少し字間を広げて読みやすく */
    margin: 50px 0 30px;       /* 上下の余白を調整 */
    text-align: center;        /* 中央揃え（必要なら left/right に変更） */
    position: relative;
    padding-bottom: 12px;      /* 下に装飾ライン用の余白 */
}

/* 下に細い装飾ラインを追加（上品な雰囲気） */
.contents h2::after {
    content: "";
    display: block;
    width: 100px;               /* ラインの長さ */
    height: 2px;
    background-color: #924F77; /* サイトのカラーに合わせると統一感UP */
    margin: 12px auto 0;
    border-radius: 2px;
}

/* スマホ対応（フォントサイズを少し小さく） */
@media screen and (max-width: 768px) {
    .contents h2 {
        font-size: 26px;
        margin: 40px 0 25px;
    }
    .contents h2::after {
        width: 40px;
    }
}


/*---------------------------------
横スククロール画像　調整
------------------------------------*/  	
.contents0 {
    width: 100%;
    padding-top: 60px;/*    position: relative;  
    top: -50px;          
    margin-top: 0;      
    margin-bottom: 0;    */
}
@media (max-width: 640px) {
	.contents0 {
    padding-top: 20px;
}
}


/* 横いっぱいのカルーセル指示 */
.simply-scroll-container {
	position: relative;
	
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    float: left;
    padding: 0;
    margin: 0 10px;
    width: 260px;
    height: 280px;
    position: relative;
    overflow: hidden; /* ←これを追加 */
    transition: transform 0.3s ease;
    border-radius: 16px; /* ←liにも角丸を付ける */
}

.simply-scroll-list li img {
    display: block;
    width: 100%;
    height: auto;
}
/* ジグザグ配置のための上下余白を追加 */
.simply-scroll-list li {
    float: left;
    padding: 0;
    margin: 0 10px; /* 左右の余白 */
    width: 260px;
    height: 280px;
    position: relative;
    transition: transform 0.3s ease;
}

/* 奇数番目 → 上にズラす */
.simply-scroll-list li:nth-child(odd) img {
    transform: translateY(-20px);
}

/* 偶数番目 → 下にズラす */
.simply-scroll-list li:nth-child(even) img {
    transform: translateY(20px);
}
/* 影をふわっと強める */
.simply-scroll-list li img {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 画像を角丸にする */
.simply-scroll-list li img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px; /* ←ここで角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}


/* どこかのCSSへ（例: css/top.css の末尾） */
#loopSlide { overflow: hidden; }
#loopSlide ul { list-style: none; margin: 0; padding: 0; }
#loopSlide li { display: inline-block; }
#loopSlide img { display: block; height: auto; }



/*---------------------------------
contents1
------------------------------------*/  	
.contents1{
    width: 100%;
    
}
.contents1_in {
    width: 100%;
    max-width: 1050px;
    margin-right: auto;
    margin-left: auto;
	padding-bottom: 100px;
}
.contents1_in-left {
    width: 36%;
    float: left;
    padding-top: 60px;
}
.contents1_in-right {
    width: 60%;
    float: right;
}
@media screen and (max-width: 768px) {
	.contents1_in {
    width: 90%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
	padding-bottom: 10px;
}
.contents1_in-left {
    width: 90%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    float: none;
    padding-top: 0px;
}
.contents1_in-right {
    width: 90%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    float: none;
}
}

/* レッスン時間割テーブル */
.lesson-schedule {
    width: 100%;
    border-collapse: collapse; /* 線を1本に */
    margin: 20px 0;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    font-family: "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", sans-serif;
}

/* 見出しセル */
.lesson-schedule th {
    padding: 12px 10px;
    background-color: #f9f9f9; /* 見出しに薄い背景色 */
    font-weight: 600;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #ccc;
}

/* 左側の曜日セル */
.lesson-schedule tbody th {
    text-align: left;
    padding-left: 12px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
}

/* データセル */
.lesson-schedule td {
    padding: 12px 10px;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

/* 奇数行・偶数行で背景色を切り替え */
.lesson-schedule tbody tr:nth-child(odd) {
    background-color: #fff;
}
.lesson-schedule tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

/* レスポンシブ対応（スマホ用） */
@media screen and (max-width: 768px) {
    .lesson-schedule {
        font-size: 14px;
    }
    .lesson-schedule th,
    .lesson-schedule td {
        padding: 10px 6px;
    }
}



/*---------------------------------
contents2
------------------------------------*/  	
.contents2 {
    width: 100%;
}
.contents2_in {
    width: 100%;
    max-width: 1050px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/img_con22_25.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    min-height: 700px;
}
/* 📱スマホ用（幅640px以下） */
@media (max-width: 640px) {
  .contents2_in {
    background-position: center bottom;
    min-height: 440px; /* ← 高さを小さく調整 */
    padding: 20px 0;   /* ← 必要なら余白追加 */
  }
}

/*---------------------------------
contents3（解決のカギ）
------------------------------------*/  	
.contents3 {
    width: 100%;
    background-color: #FAF5F6;
	 padding-bottom: 100px;
    padding-top: 100px;
}
@media (max-width: 640px) {
	.contents3 {
	 padding-bottom: 50px;
    padding-top: 50px;
}
}
.contents3_in {
    width: 100%;
    max-width: 1050px;
    margin-right: auto;
    margin-left: auto;
}
.contents3_in-tex {
    width: 76%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 30px;
	line-height: 2;
}
.benefits{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr)); /* PCは3列 */
  gap: clamp(14px, 2.6vw, 28px); /* 上下も左右もこの値で詰め具合調整 */
  align-items: stretch;
}

/* 角丸＋薄枠＋ほわっと影のカード */
.benefit{
    background: #FFFFFF;
    color: #D96F84;
    border: thin solid #F6D2D8;
    border-radius: 24px;
    padding: clamp(12px, 3.2vw, 28px);
    font-size: 18px; /* 画像のサイズ感に近づける */
    line-height: 1.6;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

/* タブレットでは2列、スマホは1列 */
@media (max-width: 1024px){
  .benefits{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .benefits{ grid-template-columns: 1fr; }
  .benefit{ text-align: left; } /* スマホは左寄せにするなら */
}




/*---------------------------------
contents4（講師プロフィール）
------------------------------------*/  	
.contents4 {
    width: 100%;
    clear: both;
}
.contents4_in {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding-bottom: 100px;
  box-sizing: border-box;
}

/* 画像を右寄せ＋テキスト回り込み */
.float-img {
    float: right;
    width: 520px;       /* 画像の大きさ */
    margin-left: 30px;  /* テキストとの間隔 */
    margin-bottom: 10px;
    padding: 15px;      /* 画像と円の余白 */
    box-sizing: border-box;
}
.con4pad_h50{
	padding-top:50px;
}
/* スマホ時：回り込み解除して中央配置 */
@media screen and (max-width: 768px) {
  .float-img {
    float: none;           /* 回り込みをやめる */
    display: block;
    margin: 0 auto 20px;   /* 中央に配置 */
    width: 90%;            /* 小さめに縮小 */
    max-width: 600px;
  }
.contents4_in {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.con4pad_h50{
	padding-top:10px;
}
}
/* ベース */
.career{
    max-width: 1050px;         /* PC時の読みやすい行幅 */
    margin: 0 auto;
    line-height: 1.9;
    font-size: clamp(14px, 1.1vw, 16px); /* 画面に合わせて自然に可変 */
    padding: 0 16px;          /* 端末の端に貼り付かないよう内側余白 */
    box-sizing: border-box;
}
.career_bg{
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  display: flow-root;
}

.career_bg::after{
  content:"";
  position: absolute;
  right: 0; bottom: 0;
  width: min(420px, 38vw);    /* 花の幅：調整可 */
  height: auto;
  aspect-ratio: 3/5;          /* わかる比率でOK／不明なら削除 */
  background: url(../images/con4_bg.png) no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 0;
}

/* 本文は前面へ */
.career_bg > *{ position: relative; z-index: 1; }



.career h3{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  margin: 0 0 .9em;
  border-bottom: 1px solid #ddd;
  padding-bottom: .4em;
}

.career dl{ margin: 0; }

.career dt{
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  margin: 1.6em 0 .6em;
}

.career dd{
  margin: 0 0 1.2em 1.2em;  /* 交友録っぽい控えめな字下げ */
  word-break: break-word;   /* 長い語で崩れないように */
}

/* スマホ（～768px） */
@media (max-width: 768px){
  .career{
	width: 90%;
    max-width: 680px;       /* 余裕を持たせつつ中央寄せ */
    padding: 0 14px;
    background-image: none;
  }
  .career dd{
    margin-left: .8em;      /* インデントを浅くして読みやすく */
  }
}

/* ワイド（≥1200px）：少し広げるだけ。読みやすさ優先で1カラム維持 */
@media (min-width: 1200px){
  .career{ max-width: 1050px; }
}
.contents4_in-left {
    width: 50%;
    float: left;
    padding-top: 80px;
}
.contents4_in-right {
    width: 50%;
    float: right;
    text-align: center;
}
.contents4_in-tex {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
}




/*---------------------------------
contents5（サービス紹介）
------------------------------------*/  
.contents5 {
    width: 100%;
    clear: both;
    background-color: #FAF5F6;
	padding-bottom: 30px;
    padding-top: 30px;
}
.contents5_in {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    box-sizing: border-box;
    min-height: 500px;
}
.service {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 16px;
  text-align: center;
}

.service-item {
  flex: 1 1 280px; /* 最小280pxで均等配置 */
  max-width: 300px;
}

.icon {
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
    border: thin solid #7a6e78;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #7a6e78;
}

.contents5_in h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

p {
  line-height: 1.7;
  font-size: 16px;
  color: #333;
}

.coming {
  color: #c55;
  display: inline-block;
  margin-top: 6px;
  font-weight: bold;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  .service {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
}






/*---------------------------------
contents6（体験者の声）
------------------------------------*/  
.contents6 {
    width: 100%;
    clear: both;
	padding-bottom: 30px;
    padding-top: 30px;
}
.contents6_in {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

.voice {
  width: 70%;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.voice-item {
  display: flex;
  align-items: center;
  gap: 24px;
}

.voice-icon {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.voice-icon img {
  width: 100%;
  height: auto;
}

.voice-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.voice-text span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #555;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
  .voice-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .voice-icon {
    width: 160px;
    height: 160px;
  }
}


/* セクションの器 */
.voices-more{
  width: 70%;
  margin: 0 auto;
  padding: 40px 16px;
}

/* 見出し */
.voices-more h3{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  margin: 0 0 18px;
}

/* 箇条書き */
.voices-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: clamp(16px, 2.2vw, 26px); /* 項目の縦余白を可変に */
}

/* “◎”の位置をきれいに揃える（ハンギングインデント風） */
.voices-list li{
  display: grid;
  grid-template-columns: 1.6em 1fr; /* 左に記号、右に本文 */
  column-gap: 10px;
  align-items: start;
  line-height: 1.9;
  font-size: clamp(15px, 1.9vw, 18px);
  color: #222;
}

.voices-list li::before{
  content: "◎";
  font-weight: 700;
  color: #222;
  line-height: 1;
  transform: translateY(0.25em); /* 複数行でも頭がそろうよう微調整 */
}

/* スマホ時は余白を少しタイトに */
@media (max-width: 599px){
  .voices-more{ padding: 28px 14px; }
  .voices-list{ row-gap: 14px; }
  .voices-list li{ column-gap: 8px; }
}






/*---------------------------------
contents7（よくある質問）
------------------------------------*/  
.contents7 {
  width: 100%;
  clear: both;
  position: relative;
  overflow: visible; /* 上に出せるように */
  background-color: #FAF5F6;
  padding: 150px 0;
}
@media (max-width: 640px) {
	.contents7 {
	 padding: 50px 0;
}
}


/* 中身（センター寄せ） */
.contents7_in {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}


/* 器 */
.faq{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px;
}



/* リスト全体 */
.faq-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各項目の区切り（点線） */
.faq-item{
  padding: 18px 0 26px;
  border-bottom: 1px dashed #cfcfcf;
}

/* Q/Aの1行 */
.faq-row{
  display: grid;
  grid-template-columns: 44px 1fr; /* 左:丸バッジ / 右:本文 */
  column-gap: 12px;
  align-items: start;
}

/* Q行の見出しっぽい強調 */
.faq-row.q h4{
  font-size: clamp(16px, 1.9vw, 18px);
  margin: 4px 0 8px;
  font-weight: 700;
}

/* A行の本文 */
.faq-row.a p{
    margin-top: 2px;
    margin-right: 0;
    margin-left: 25px;
    margin-bottom: 0;
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1.9;
    color: #222;
}

/* 青い丸バッジ */
.badge{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #8fc6ea;           /* やさしい青 */
    color: #fff;
    font-weight: 900;
    display: grid;
    place-items: center;
    line-height: 1;
    user-select: none;
    font-size: 22px;
}

/* 余白の微調整：Q→Aの間だけすこし詰める */
.faq-row.q{ margin-bottom: 6px; }
/* A のデザイン（白背景・青文字・少し右寄せ） */
.faq-row.a .badge {
  background: #fff;
  color: #5ba6d8;      /* やさしい青 */
  border: 2px solid #5ba6d8;
  margin-left: 20px;    /* 少し右にずらす */
}

/* スマホ調整 */
@media (max-width: 599px){
  .faq{ padding: 28px 14px; }
  .faq-item{ padding: 14px 0 20px; }
  .faq-row{ grid-template-columns: 38px 1fr; column-gap: 10px; }
  .badge{ width: 38px; height: 38px; }
}







/*---------------------------------
contents8（動画講座）
------------------------------------*/  
.contents8 {
    width: 100%;
    clear: both;
	padding-bottom: 30px;
    padding-top: 30px;
}
.contents8_in {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
}





/*---------------------------------
背景用
------------------------------------*/ 
.ripple-anim {
  position: relative;
  overflow: hidden;
  --ring-color: rgba(227,154,168,.55);
  --x: 15%;  /* 左上寄り */
  --y: 20%;
}

/* 共通スタイル */
.ripple-anim::before,
.ripple-anim::after,
.ripple-anim span {
  content:"";
  position:absolute;
  left: var(--x);
  top:  var(--y);
  width: 60vmax;   /* ← 少し小さめ */
  height:60vmax;
  transform: translate(-50%,-50%) scale(.3);
  border: 2px solid var(--ring-color);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 6s linear infinite;
  opacity:.9;
  z-index: 0;  /* 背景として */
}

/* 疑似要素のディレイ */
.ripple-anim::after { animation-delay: 2s; opacity:.7; }

/* spanで追加する波紋 */
.ripple-anim span:nth-child(1) { animation-delay: 4s; opacity:.6; }
.ripple-anim span:nth-child(2) { animation-delay: 6s; opacity:.5; }

/* 波紋アニメーション：小さめに広がる */
@keyframes ripple {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity:.9; }
  100% { transform: translate(-50%,-50%) scale(1.8); opacity:0; }
}

/* スマホ用 */
@media (max-width: 640px){
  .ripple-anim { --x: 30%; --y: 50%; }
  .ripple-anim::before,
  .ripple-anim::after,
  .ripple-anim span {
    width: 70vmin; height: 70vmin;
  }
}



/*---------------------------------
ふわふわ動く吹き出し
------------------------------------*/  
/* コンテナ */
.bubble-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 0;
    height: 480px;
}


/* 最小上書き：前と同じ見た目のまま、確実に前面表示＆クリック領域を確保 */
#nav-toggle{
  position: fixed;
  top: 25px;
  right: 25px;
  width: 36px;          /* ← 元の内側divと同じ幅を親にも付与 */
  height: 32px;         /* ← クリック領域を明示 */
  display: block;       /* ← どこかで消されていても表示 */
  z-index: 10010;       /* ← headerより前に */
  cursor: pointer;
}
#nav-toggle > div{
  position: relative;
  width: 36px;          /* ← ここは元のまま */
  height: 32px;         /* ← 高さも付けてヒット範囲を安定 */
}

/* header が上に被るのを防ぐ（見た目は変えない） */
.header{
  position: relative;   /* stickyにしているならそのままでOK */
  z-index: 1000;
}

/* gloval-nav は今のままでOK。必要なら前面関係だけ微調整 */
#gloval-nav{ z-index: 10000; }

/* 誤記修正：.contact-right にドットを付ける（スマホで非表示にする場合） */
@media screen and (max-width: 768px){
  .contact-right{ display: none; }
}