/* ベーススタイル */
/*.header{
	 position: fixed;
	 top: 0;
	 z-index: 1000;
	 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 */
.header {
	 background: #fff;
	 padding: 10px 15px;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 width: 100%;
	 height: 60px;
	 position: fixed;
	  top: 0;
	  z-index: 1000;
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .site-logo {
	 width: 150px;
	 height: auto;
 }
 
 .site-logo img {
	 width: 100%;
	 height: auto;
 }
 
 /* メニュー制御用のチェックボックス */
 #menu-toggle {
	 display: none;
 }
 
 /* ハンバーガーメニューボタン */
 .menu-btn {
	 width: 30px;
	 height: 24px;
	 position: relative;
	 background: none;
	 border: none;
	 padding: 0;
	 cursor: pointer;
	 z-index: 1001;
 }
 
 .menu-btn span {
	 display: block;
	 width: 100%;
	 height: 2px;
	 background: #000;
	 position: absolute;
	 left: 0;
	 transition: 0.3s ease;
 }
 
 .menu-btn span:nth-child(1) { top: 0; }
 .menu-btn span:nth-child(2) { top: 11px; }
 .menu-btn span:nth-child(3) { bottom: 0; }
 
 /* メニュー開閉時のハンバーガーアイコン変化 */
 #menu-toggle:checked ~ .header .menu-btn span:nth-child(1) {
	 transform: rotate(45deg);
	 top: 11px;
 }
 
 #menu-toggle:checked ~ .header .menu-btn span:nth-child(2) {
	 opacity: 0;
 }
 
 #menu-toggle:checked ~ .header .menu-btn span:nth-child(3) {
	 transform: rotate(-45deg);
	 bottom: 11px;
 }
 
 /* オーバーレイ */
 .overlay {
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: rgba(0, 0, 0, 0.5);
	 opacity: 0;
	 visibility: hidden;
	 transition: opacity 0.3s ease, visibility 0.3s ease;
	 z-index: 998;
 }
 
 #menu-toggle:checked ~ .overlay {
	 opacity: 1;
	 visibility: visible;
 }
 
 /* ナビゲーション */
 @media screen and (max-width: 1200px) {
	 .nav-wrapper {
		 display: none;
		 position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 background: #fff;
		 z-index: 999;
		 overflow-y: auto;
		 opacity: 0;
		 visibility: hidden;
	 }
 
	 #menu-toggle:checked ~ .header .nav-wrapper {
		 display: block;
		 opacity: 1;
		 visibility: visible;
		 transition: opacity 0.3s ease, visibility 0.3s ease;
	 }
	 
 }
 
 /* 以下は既存のスタイルを維持 */
 .nav-wrapper .campaign-banner {
	 padding: 15px;
	 text-align: center;
	 margin-bottom:10px;
 }
 
 .sp-logo{
	margin-top: 60px;
	padding: 15px;
	text-align: center;
 }
 
 .campaign-banner a {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 text-decoration: none;
	 color: #e60012;
	 font-weight: bold;
	 font-size: 14px;
 }
 
 .campaign-banner img, .sp-logo img {
	 width: 100%;
 }
 
 /* アコーディオンメニュー */
 .accordion-input {
	 display: none;
 }
 
 /* SP/PC表示切り替え */
 @media screen and (max-width: 959px) {
	 .pc-only {
		 display: none !important;
	 }
 }
 
 @media screen and (min-width: 960px) {
	 .sp-only {
		 display: none !important;
	 }
 }
 
 /* ナビアイテムの基本スタイル */
 .nav-item {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 15px;
	 color: #333;
	 font-size: 14px;
	 background: #fff;
	 width: 100%;
	 border-bottom: 1px solid #eee;
	 position: relative;
	 cursor: pointer;
	 text-decoration: none;
 }
 
 .nav-item::after {
	 /*
	 content: "∨";
	 color: #666;
	 font-size: 12px;
	 transition: transform 0.2s ease;
	 */
	 content: '';
	 position: absolute;
	 right: 15px;
	 top: 50%;
	 width: 8px;
	 height: 8px;
	 border-right: 2px solid #333;
	 border-bottom: 2px solid #333;
	 transform: translateY(-50%) rotate(45deg);
	 transition: transform 0.3s;
 }
 
 .accordion input:checked ~ .nav-item::after {
	 transform: translateY(-50%) rotate(-135deg);
 }
 
 .no-submenu::after{
	 border-right: 0;
	 border-bottom: 0;
 }
 
 .accordion-input:checked + .nav-item::after {
	 transform: rotate(180deg);
 }
 
 .submenu {
	 background: #f9f9f9;
	 max-height: 0;
	 overflow: hidden;
	 transition: max-height 0.2s ease-out;
 }
 
 .accordion-input:checked ~ .submenu {
	 max-height: 1000px;
 }
 
 .submenu-content {
	 padding: 15px;
 }
 
 .submenu-content ul {
	 list-style: none;
	 margin: 8px 0;
 }
 
 .submenu-content li {
	 padding: 8px 0 8px 15px;
	 position: relative;
	 font-size: 14px;
	 list-style: none;
 }
 
 .submenu-content li a{
	 text-decoration: none;
	 color:#000;
 }
 
/*
 
 .submenu-content li::before {
	 content: "";
	 position: absolute;
	 left: 0;
	 top: 16px;
	 width: 4px;
	 height: 4px;
	 background: #0B318F;
	 border-radius: 50%;
 }
 */
 
 .header-buttons {
	 padding: 15px;
	 display: flex;
	 flex-direction: column;
	 display: none;
 }
 
 .header-btn {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 padding: 10px;
	 border-radius: 50px;
	 text-decoration: none;
	 font-size: 13px;
	 font-weight: bold;
	 white-space: nowrap;
 }
 
 .btn-hover:hover,.course-button:hover,.topic-button:hover,.prefecture-btn:hover,.level-button:hover,.result-button:hover,.view-all-button:hover,.tendency-button:hover{
	 opacity: 0.7;
 }
 
 .btn-contact img{
	 width: 255px;
	 height: 50px;
 }


 .btn-material img{
	  width: 235px;
	  height: 50px;
  }
 
 /*
 .btn-contact {
	 background: #0B318F;
	 color: white;
	 border: 2px solid #0B318F;
 }
 
 .btn-material {
	 background: #E60012;
	 color: white;
	 border: 2px solid #E60012;
 }
 */
 
 .blog-section {
	 background: #f5f5f5;
	 padding: 15px;
	 margin-top: 15px;
 }
 
 .online-course {
	 padding: 15px;
	 font-size: 14px;
	 display: flex;
	 align-items: center;
 }
 
 .top-banner {
	 position: fixed;
	 top: 0;
	 left: 0;
	 z-index: 1001;
	 width: 100%;
	 background: #073681;
	 padding:3px;
 }
 
 .top-banner h1{
	 color: #fff;
/*	 max-width: 1200px;*/
	 margin: 0 auto;
	 font-size: 10px;
	 font-weight: normal;
	 padding-left: 5px;
 }
 
 .header {
/*!固定*/
/*	 position: fixed;
	 top: 20px; /* H1の高さ分 */
	 z-index: 1000;
*/	 
 }
 
 .header a{
	 color: #000;
	 text-decoration:none;
 }
 
 @media screen and (max-width: 1400px) {
	 a.btn-contact{
			display: none;
		}
 }
 
 /*! タブレット用スタイル */
 @media screen and (min-width: 768px) {
	  .campaign-banner img, .sp-logo img {
		   width: 70%!important;
	   }
	   
  }
 
 
 /*! PCメニュー用スタイル */
 @media screen and (min-width: 960px) {
	 
	 .header {
		 top:27px;
		 height: 70px;
		 padding: 10px 20px;
		 overflow: unset;
	 }
 
	 .site-logo {
		 width: 200px;
	 }
 
	 .menu-btn, .overlay {
		 display: none;
	 }
 
	 .nav-wrapper {
		 position: static;
		 height: auto;
		 background: none;
		 display: flex;
		 align-items: center;
		 flex-grow: 1;
		 padding: 0 20px;
		 overflow: visible;
		 opacity: 1;
		 visibility: visible;
	 }
 
	 .campaign-banner, .blog-section, .online-course, .sp-logo  {
		 display: none;
	 }
 
	 .nav-menu {
		 display: flex;
		 align-items: center;
		 margin: 0 auto;
	 }
 
	 .nav-menu .accordion {
		 position: relative;
	 }
 
	 .nav-item {
		 padding: 5px 20px;
		 border: none;
		 background: none;
	 }
 
	 .nav-item::after {
		 content: none;		 
		 top: auto;
		 width: 0;
		 height: 0;
		 border-right: 0;
		 border-bottom:0;
		 transform:none;
	 }
 
	 .nav-item::before {
		 content: '';
		 position: absolute;
		 right: 0;
		 top: 50%;
		 transform: translateY(-50%);
		 width: 1px;
		 height: 16px;
		 background: #0056b3;
	 }
 
	 /* PCでのサブメニュー表示 */
	 .submenu {
		 position: absolute;
		 top: 100%;
		 left: 0;
		 background: #fff;
		 min-width: 200px;
		 max-height: none;
		 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		 opacity: 0;
		 visibility: hidden;
		 transition: opacity 0.3s, visibility 0.3s;
		 pointer-events: none;
		 margin-top:5px;
	 }
 
	 .accordion:hover .submenu {
		 opacity: 1;
		 visibility: visible;
		 pointer-events: auto;
	 }
 
	 .submenu-content {
		 padding: 15px;
	 }
 
	 .submenu-content ul {
		 margin: 0;
	 }
 
	 .submenu-content li {
		 padding: 8px 15px;
		 white-space: nowrap;
	 }
 
	 .submenu-content li:hover {
		 background: #f5f5f5;
	 }
 
	 .header-buttons {
		 padding: 15px;
		 display: flex;
		 flex-direction: column;
		 padding: 0;
		 flex-direction: row;
	 }
	 
	 a.nav-item::after {
	 position: absolute;
	 left: 0;
	 content: '';
	 width: 100%;
	 height: 4px;
	 background: #073681;
	 bottom: 5px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
	 opacity: 0;
	 visibility: hidden;
	 transition: 0.3s;
	 }
	 
	 a.nav-item:hover::after {
	 visibility: visible;
	 bottom: -5px; /*アニメーションが止まる位置*/
	 opacity: 1;
	 }
 
	 /* PCでのアコーディオン制御を無効化 */
	 .accordion-input:checked ~ .submenu {
		 max-height: none;
	 }
	 
	 .top-banner h1{
		padding-left:20px;
		font-size: 13px;
	 }
 }