html {
  scroll-behavior: smooth;
}


body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
background: #ffffff;
}


/* トップボタン */
.b-center {
  text-align: center;
}

.shinnen-img {
width: 50%;
margin: auto;
display: block;
}

button.img-btn {
border: none;          /* 枠線を消す */
background: none;      /* グレー背景を消す */
padding: 0;            /* 余白をゼロに */
cursor: pointer;       /* ポインタが指マークに */
}

button.img-btn img {
display: block;        /* 左ずれ防止（余白を消す） */
margin: 0 auto;        /* 画像を中央に */
transition: transform 0.15s ease;
}

button.img-btn:hover img {
transform: scale(0.97); 
}


/* コンテナ（最大幅1280px） */
.container {
max-width: 1280px;
margin: 0 auto;
scroll-behavior: smooth;
}


/* 背景（最下層） */
.background-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../img/bg.jpg') top center no-repeat;
background-size: min(100vw, 1280px) auto;
z-index: -1
}


/* コンテンツ間 */
.spacer {
max-width: 1000px;
height: 70px;
}


/* ヘッダー */
header {
width: 100%;
background: transparent;
border-bottom: none;
position: fixed; /* ← スクロールしても固定 */
top: 0;
left: 0;
z-index: 1000; /* ← 背景より前に表示 */
}


.nav-container {
display: flex;
justify-content: flex-end; /* PC：ナビを右寄せ */
align-items: center;
padding: 15px 20px;
width: 100%;
box-sizing: border-box;
}


.nav {
display: flex;
gap: 10px;
justify-content: flex-end; /* PC時：右寄せ */
padding-right: 20px; /* PC時：右端から余裕 */
}


.nav a {
text-decoration: none;
padding: 10px 16px;
background: #eee;
border-radius: 5px;
color: #333;
font-size: 14px;
transition: background 0.2s;
}


.nav a:hover {
background: #ddd;
}


.btn-outline {
display: inline-block;
padding: 0.75em 1.5em;
font-size: 1rem;
font-weight: 600;
color: #0066ff;
background-color: transparent;
text-decoration: none;
border: 2px solid #0066ff;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}


.btn-outline:hover,
.btn-outline:focus {
background-color: #0066ff;
color: #ffffff;
}


/* ハンバーガーメニュー */
.hamburger {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
width: 30px;
margin-left: 10px; /* 左端から余裕を持たせる */
}


.hamburger div {
width: 100%;
height: 3px;
background: #333;
border-radius: 2px;
transition: all 0.3s ease;
}


/* 3本線 → バツ印 */
.hamburger.active div:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}

.hamburger.active div:nth-child(2) {
opacity: 0;
}

.hamburger.active div:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}


/* コンテンツ層 */
.topcontainer {
width: 100%; /* container に準拠 */
position: relative;
aspect-ratio: 16 / 9; /* 高さは 16:9 */
display: flex;
flex-direction: column;
justify-content: center; /* 縦中央 */
align-items: flex-end; /* 右寄せ */
padding-right: 50px;
box-sizing: border-box;
color: #000;
}


.top-logo {
width: 400px; /* 任意。必要なら後で調整可能 */
height: auto;
margin-bottom: 10px;
}


.top-title {
font-size: 60px;
font-weight: bold;
margin: 5px 0;
text-align: right;
}


.top-sub {
font-size: 30px;
margin: 0;
text-align: right;
}


.content {
margin: 5px auto 40px auto;
background: rgba(255, 255, 255, 0.7);
padding: 40px;
border-radius: 5px;
}


/* 見出し */
.yt-heading {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 23px; /* ← 動画サムネとバランスを取る文字サイズ */
font-weight: bold;
}

.yt-heading .bar {
width: 6px;
height: 1.2em; /* 文字と高さを揃える */
background-color: orange;
margin-right: 8px;
border-radius: 2px;
}

.yt-heading .title {
color: #333;
}


/* 動画ギャラリー */
.video-content {
margin-top: 1px;
box-shadow: none;
}


.yt-box {
margin: 0 auto; /* 横方向中央寄せ */
width: var(--yt-box-width,90%); /* ← 任意指定できる横幅（デフォルト100%） */
border-top: 2px solid #ccc; /* 枠線は調整可能 */
border-bottom: 2px solid #ccc; /* 枠線は調整可能 */
border-left: none;
border-right: none;
background: #fff;
padding: 5px;
position: relative;
overflow:visible; /* ← ボタンが外に出るよう変更 */
display: flex;
align-items: center;
box-sizing: border-box;
}


.yt-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 10px 0;
scrollbar-width: none; /* Firefox */
}


.yt-track::-webkit-scrollbar {
display: none; /* Chrome系 */
}


.yt-thumb img {
width: 280px;
height: auto;
border-radius: 6px;
display: block;
}


.yt-prev,
.yt-next {
font-size: 50px;
background: #fff;
border: none !important;
margin: 5px;
padding: 5px 10px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}


.yt-prev {
left: -70px; /* 枠の外へ */
}
.yt-next {
right: -70px; /* 枠の外へ */
}


/* おすすめチラシ */
.flyer-content {
margin-top: 1px;
box-shadow: none;
}


.flyer-box {
margin: 0 auto;
width: var(--yt-box-width, 100%);
padding: 15px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
}

/* 左上見出し（yt-headingを継承） */
.flyer-heading {
display: flex;
align-items: center;
position: absolute;
font-size: 23px; /* ← 動画サムネとバランスを取る文字サイズ */
top: 10px;
left: 1px; /* ← 左上配置 */
font-weight: bold;
}


.flyer-heading .bar {
width: 6px;
height: 1.2em;
background-color: orange;
margin-right: 6px;
border-radius: 2px;
}


.flyer-heading .title {
color: #333;
}


/* サムネイル画像の基本設定 */
.lightbox-thumb {
width: auto;
height: auto;
max-width: 170px; /* PCでの最大サイズ（お好みで変更） */
}


/* サムネ4枚 横並び（PC時） */
.flyer-track {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px; /* ← 間隔を少し縮めた */
justify-content: center; /* ← 横方向中央寄せ */
justify-items: center; /* ← 各サムネを中央寄せ */
align-items: center;
margin: 40px auto 0 auto; /* 上下中央整列用 */
max-width: 90%; /* ← yt-boxの幅に近づける */
}


.flyer-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
width: 170px; /* サムネイル+ボタンの固定幅 */
box-sizing: border-box;
}


/* ダウンロードボタン */
.flyer-download {
display: inline-block;
width: 100%;
text-align: center;
margin-top: 2px;
padding: 1px 0;
text-decoration: none;
font-size: 12px;
color: #0055aa;
border: 1px solid #0055aa;
border-radius: 4px;
background-color: #fff;
transition: background-color 0.2s ease, color 0.2s ease;
}

.flyer-download i {
margin-left: 6px;
}

.flyer-download:hover {
background-color: #0055aa;
color: #fff;
}


/* ニュースカード */
.news-card {
display: flex;
align-items: flex-start;
border: 1px solid #ccc;
background-color: #fff;
width: 900px;
margin-bottom: 25px;
margin-left: 9%;
}


.news-image {
width: 320px;
height: 160px;
flex-shrink: 0;
}


.news-content {
padding: 12px 16px;
flex: 1;
}


.newlabel {
display: inline-block;
background-color: #2c8800;
color: white;
font-size: 16px;
padding: 2px 10px;
border-radius: 2px;
margin-bottom: 6px;
}


.label {
display: inline-block;
background-color: #ff7000;
color: white;
font-size: 16px;
padding: 2px 10px;
border-radius: 2px;
margin-bottom: 6px;
}


.news-title {
font-size: 15px;
line-height: 1.6;
margin: 4px 0;
}


.news-subtitle {
font-size: 15px;
line-height: 1.6;
margin: 4px 0 20px 0;
}


.news-date {
font-size: 12px;
color: #555;
}


.newspacer {
max-width: 1000px;
height: 40px;
}


/* 事例記事 */
.jirei {
color: #000000;
text-decoration: none;
}


.jirei-card {
display: flex;
align-items: flex-start;
border: 1px solid #ccc;
background-color: #fff;
width: 900px;
margin-bottom: 25px;
margin-left: 9%;
}


.jirei-image {
width: 154px;
height: 77px;
flex-shrink: 0;
}


.jirei-content {
padding: 12px 16px;
flex: 1;
}


.jirei-title {
margin-top: 1px;
font-size: 16px;
line-height: 1.4;
font-weight: 600
}


.jirei-subtitle {
font-size: 14px;
margin: 7px 0 0 0;
}


.jirei-spacer {
max-width: 1000px;
height: 40px;
}


/* セミナー */
.semi-track {
display: grid;
grid-template-columns: repeat(3, 1fr); /* ← 2行×3列 */
gap: 21px;
justify-content: center;
justify-items: center;
align-items: center;
margin: 40px auto 0 auto;
max-width: 85%;
}


.semi-item {
display: flex;
flex-direction: column;
justify-content: start;
justify-items: start;
align-items: start;
flex: 0 0 auto;
width: 270px; /* サムネイル+ボタンの固定幅 */
box-sizing: border-box;
}


.semi-text {
width: 100%;
text-align: left;     /* ← 左寄せ */
margin-top: 6px;
font-size: 14px;
line-height: 0.8;
color: #555;
}


/* 課題マンガ */
.kadai-track {
display: grid;
grid-template-columns: repeat(3, 1fr); /* ← 2行×3列 */
gap: 21px;
justify-content: center;
justify-items: center;
align-items: center;
background-color: #fffbdd;
margin: 40px auto 0 auto;
max-width: 85%;
}


.kadai-item {
display: flex;
flex-direction: column;
justify-content: start;
justify-items: start;
align-items: start;
flex: 0 0 auto;
width: 270px; /* サムネイル+ボタンの固定幅 */
box-sizing: border-box;
}


.kadaiue-text {
width: 100%;
text-align: left;     /* ← 左寄せ */
margin-top: 6px;
font-size: 17px;
line-height: 1.2;
color: #555;
}


.kadaishita-text {
width: 100%;
text-align: left;     /* ← 左寄せ */
margin-top: -2px;
font-size: 14px;
color: #555;
}


/* ---------------Ｑ＆Ａ--------------- */
.qa-container {
max-width: 920px;
margin: 30px auto;
padding: 15px 20px 0 20px;
width: 100%;
background-color: #ffffe3;
}


/* --- 個別Q&Aの枠 --- */
.qa-item {
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
padding-bottom: 10px;
}


/* --- Q&A質問帯 --- */
.qa-question {
display: flex;
align-items: center;
background: #f7f7f7;
padding: 5px;
cursor: pointer;
border-radius: 6px;
transition: background 0.3s;
}

.qa-question:hover {
background: #ececec;
}

/* --- Q&A左側の「✕」マーク --- */
.qa-icon {
font-size: 20px;
margin-right: 12px;
transition: transform 0.3s;
}

/* Q&A展開時回転（バツ→プラス風に） */
.qa-item.active .qa-icon {
transform: rotate(45deg);
}

/* --- Q&A質問テキスト --- */
.qa-text {
font-size: 16px;
font-weight: 600;
}

/* --- Q&A回答部分（初期は閉じる） --- */
.qa-answer {
max-height: 0;
overflow: hidden;
opacity: 0;
padding-left: 32px;
font-size: 15px;
line-height: 1.6;
transition: max-height 0.35s ease, opacity 0.35s ease;
}

/* Q&A展開時 */
.qa-item.active .qa-answer {
max-height: 500px; /* 必要に応じて増やす */
padding-top: 10px;
opacity: 1;
}


/* フッター */
footer {
background: #0055aa;
color: white;
text-align: center;
padding: 10px 0;
font-size: 12px;
margin-top: 40px;
}


/******************* スマホ対応（800px以下）*******************/
@media (max-width: 800px) {

.background-layer {
padding-left: 30%;
background: url('../img/bg.jpg') top center no-repeat;    
}
    
 
.shinnen-img {
width: 100%;
}
    
    
.video-content,
.flyer-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
    
    
/* コンテンツ間 */
.spacer {
margin-top: -5%;
height: 1%;
}
/**コンテンツ間のスキマ**/
    
    
.newspacer {
height: 0;
}
    
    
.nav-container {
justify-content: space-between; /* スマホ：左にハンバーガー、右にナビ */
}


.nav {
display: none;
position: absolute;
top: 60px;
left: 20px;
background: #fff;
flex-direction: column;
padding: 15px 17px 15px 15px; /* 右だけ広くして白いボックスを伸ばす */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
align-items: flex-start; /* ボタンは左寄せのまま */
}

    
.nav a {
font-size: 17px;
padding: 10px;
text-align: left;
width: 120px; /* ← 背景ボックスの幅に引っ張られない */
box-sizing: border-box;
background: #eee; /* ボタンの背景 */
border-radius: 5px;
margin-bottom: 8px;
}    
    

.hamburger {
display: flex;
margin-left: 10px;
}


.nav.active {
display: flex;
}
    
    
.topcontainer {
aspect-ratio: 16 / 9;
padding-right: 10px;
}
    
    
.top-logo {
width: 250px;
}
    
    
.top-title {
font-size: 47px;
}
    
    
.top-sub {
font-size: 27px;
}    

    
.yt-box {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
   
    
.yt-track {
width: 100% !important;
margin: 0 auto !important;
height: 700px;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
    
    
.yt-thumb img {
width: 100% !important;
margin-bottom: 15px;
}
    
    
.yt-prev,
.yt-next {
display: none;
}       

    
.lightbox-thumb {
width: 100%;
height: auto;
max-width: none;
padding-left: 5%;
}    
    

.flyer-track {
width: 100% !important;
max-width: 100% !important;
padding: 0;
margin: 0 auto; /* ← 上の余白を削除 */
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
justify-content: center;
}

    
.flyer-heading {
position: static;
margin-bottom: 0; /* ← 隙間を削除 */
margin-left: -5%;
padding-bottom: 0;
}
      
    
.flyer-item {
width: 100% !important;
max-width: 100% !important;
align-items: center;
margin-bottom: 10px;
}
    
    
.flyer-item img {
width: 90% !important;
height: auto;
margin-left: auto;
margin-right: auto;
}

    
.flyer-download {
width: 90% !important;
margin: 5px auto 0 auto;
display: block;
text-align: center;
font-size: 15px;
} 
    

.lb-img {
max-width: 100%;
height: auto;
}
    
    
.news-card {
flex-direction: column;
width: 100% !important;
max-width: 100% !important;
margin: 20px auto !important;
padding: 0;
box-sizing: border-box;
}

    
.news-image {
width: 100%;
height: auto;
text-align: center;
}

    
.news-content {
padding: 12px;
}

    
.news-title,
.news-subtitle {
font-size: 16px;
}
    
    
.jirei-card {
flex-direction: column;
width: 100% !important;
max-width: 100% !important;
margin: 20px auto !important;
padding: 0;
box-sizing: border-box;
}

    
.jirei-image {
width: 100%;
margin-bottom: -3%;
height: auto;
text-align: center;
}

    
.jirei-content {
padding: 12px;
}

    
.jirei-title{
margin-bottom: 2%;
font-size: 12px;
}
    
    
.jirei-subtitle {
font-size: 12px;
}
    
    
.semi-track {
width: 100% !important;
max-width: 100% !important;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column; /* ← 1列縦並び */
gap: 21px;
align-items: center;
}
    
    
.semi-track img {
width: 140% !important; /* ← 横いっぱい */
margin-left: 0 !important;
}

    
.semi-item {
width: 100% !important;
max-width: 100% !important;
}
    
    
.semi-text {
font-size: 20px;
width: 100%;
text-align: left;
margin-left: 5%;
}  
    
    
.kadai-track {
width: 100% !important;
max-width: 100% !important;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column; /* ← 1列縦並び */
gap: 21px;
align-items: center;
}
    
    
.kadai-track img {
width: 140% !important; /* ← 横いっぱい */
margin-left: 2% !important;
}

    
.kadai-item {
width: 100% !important;
max-width: 100% !important;
}
    
    
.kadaiue-text {
font-size: 25px;
width: 100%;
text-align: left;
margin-left: 3%;    
}
    
    
.kadaishita-text {
font-size: 18px;
width: 100%;
text-align: left;
margin-left: 3%;
}
    
 
.qa-container {
width: 100% !important;
max-width: 100% !important;
padding: 0;
margin: 0 auto;
align-items: center;
}
    
    
.qa-item {
margin: 2% 2%;
}    
    
    
.qa-text {
font-size: 15px;
}

.qa-answer {
padding-left: 26px;
font-size: 17px;
}
}


/******************* スマホ最小サイズ *******************/
@media (max-width: 620px) {
.top-logo {
width: 180px;
}
    
    
.top-title {
font-size: 30px;
}
    
    
.top-sub {
font-size: 20px;
}    
}