/* =====================================================
アクエリアス・ナビ レスポンシブ修正CSS v3
style_top.css の内容を元に作成
【導入手順】
1. index_new1.html の 内に viewport タグを追加:
2. style_top.css の の直後に追記:
===================================================== */
*, *::before, *::after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
/* ================================================
■ body・全体
================================================ */
body {
width: 100% !important;
min-width: 0 !important;
overflow-x: hidden;
font-size: 14px;
}
/* ================================================
■ ヘッダー
================================================ */
#header_wrapper {
width: 100% !important;
}
#header {
width: 100% !important;
height: auto !important;
position: static !important;
display: block;
text-align: center;
padding: 8px 12px;
}
#header h1 {
position: static !important;
display: block;
font-size: 11px;
line-height: 1.5;
text-align: center;
margin: 0 0 6px;
padding: 0;
float: none !important;
width: auto !important;
}
#logo, p#logo {
position: static !important;
display: block;
text-align: center;
float: none !important;
margin: 0 auto 6px;
width: auto !important;
}
#logo img {
max-width: 220px;
height: auto;
}
#header ul {
position: static !important;
float: none !important;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
list-style: none;
margin: 4px 0 0;
padding: 0;
gap: 0 14px;
width: auto !important;
height: auto !important;
}
#header ul li {
display: inline-block;
}
/* ================================================
■ グローバルナビ・フッターメニュー：スマホでは非表示
================================================ */
#gnavi_wrapper,
#footer_sitemap {
display: none !important;
}
/* ================================================
■ グローバルナビ（非表示のため以下は念のため残す）
#gnavi, #gnavi_wrapper {
width: 100% !important;
float: none !important;
clear: both;
}
#gnavi > ul {
display: block !important;
width: 100% !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
#gnavi > ul > li {
display: block !important;
width: 100% !important;
float: none !important;
position: static !important;
border-bottom: 1px solid #999;
}
#gnavi > ul > li > a {
display: block !important;
width: 100% !important;
padding: 13px 16px !important;
font-size: 14px !important;
line-height: 1.4 !important;
white-space: normal !important;
}
#gnavi ul ul,
#gnavi li ul,
#gnavi .gnaviSub,
ul.gnaviSub {
display: none !important;
visibility: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* ================================================
■ メインビジュアル【重要な修正箇所】
PCでの構造:
#mainvisual_wrapper {
background: url(mainvisual.jpg); ← 背景画像
height: 260px; ← 固定高さ
}
#mainvisual { width: 960px; } ← 固定幅
#mainvisual h2 { float: left; } ← 左にfloat
#mainvisual ul { float: right; } ← 右にfloat
→ スマホでは height:260px 内に全要素が重なる
修正方針:
・背景画像を疑似要素で上部に分離して表示
・h2とulを通常フローで縦に並べる
================================================ */
#mainvisual_wrapper {
/* 背景画像を上部に単独で表示 */
background-image: url(../images/mainvisual.jpg) !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-size: 100% auto !important; /* 横幅に合わせて縮小 */
/* 背景画像の縦横比を維持するためpaddingで高さを確保 */
/* mainvisual.jpg が 960×260px の場合 → 260/960 = 27.08% */
padding-top: 27% !important; /* ← 画像の縦横比に合わせて調整 */
height: auto !important; /* 固定高さを解除 */
width: 100% !important;
position: relative;
}
#mainvisual {
width: 100% !important;
margin: 0 !important;
padding: 8px 0;
display: flex !important;
flex-direction: column;
align-items: center;
position: static !important;
}
/* h2（キャッチコピー画像）: float:left を解除 */
#mainvisual h2 {
float: none !important;
padding-top: 8px !important;
text-align: center;
width: 100%;
margin: 0;
}
#mainvisual h2 img {
max-width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
/* ul#bnr_area01: float:right を解除して横並びに */
#mainvisual ul,
ul#bnr_area01 {
float: none !important;
margin-top: 8px !important;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 6px !important;
gap: 8px;
width: 100% !important;
}
ul#bnr_area01 li {
width: calc(50% - 8px);
float: none !important;
text-align: center;
border: 1px #ccc solid;
margin-bottom: 0;
}
ul#bnr_area01 li img {
width: 100%;
height: auto;
vertical-align: bottom;
display: block;
}
/* ================================================
■ コンテンツエリア（2カラム → 1カラム）
================================================ */
#contents_wrapper {
width: 100% !important;
}
#contents {
width: 100% !important;
display: block !important;
overflow: hidden;
}
#main_contents {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 10px 12px !important;
}
#main_contents p {
margin: 10px 0 !important;
}
#sub_contents {
width: 100% !important;
float: none !important;
clear: both;
margin: 0 !important;
padding: 16px 12px !important;
border-top: 2px solid #ddd;
text-align: left;
}
/* ================================================
■ ピックアップエリア
================================================ */
/* pickup_area 全体のfloatをリセット */
#pickup_area {
overflow: visible !important;
}
/* div.fl_l（画像＋テキストのセット）を縦積みに */
#pickup_area div.fl_l {
float: none !important;
width: 100% !important;
display: block;
text-align: left !important; /* ← センタリング継承を上書き */
margin-bottom: 16px;
overflow: hidden;
}
/* 画像を含む p.fl_l は中央揃え */
#pickup_area p.fl_l:has(img),
#pickup_area p.fl_l:has(a > img) {
float: none !important;
width: 100% !important;
text-align: center !important;
margin: 0 0 8px 0;
}
/* テキスト用 p.fl_l は左揃え */
#pickup_area p.fl_l {
float: none !important;
width: 100% !important;
text-align: left !important;
margin: 0 0 8px 0;
}
/* ただし画像だけを含む p は中央を維持（上書き） */
#pickup_area p.fl_l img {
display: block;
margin: 0 auto 8px;
}
/* テキスト段落（style="width:480px;" がついている要素）*/
#pickup_area p.fl_l[style*="width"] {
text-align: left !important;
width: 100% !important;
}
/* index_student.html など： で直接囲まれている場合 */
#pickup_area > a,
#pickup_area div > a {
display: block;
text-align: left !important;
}
#pickup_area a > img,
#pickup_area > img {
display: block;
margin: 0 auto 8px;
}
#pickup_area .topic {
width: 100% !important;
}
#main_contents #pickup_area p {
display: block;
margin: 8px 0;
}
#pickup_area .topic {
width: 100% !important;
}
#main_contents #pickup_area p {
display: block;
margin: 8px 0;
}
/* ================================================
■ セミナーリスト（float → flex 2列）
================================================ */
ul#seminar_list {
margin: 8px 0 !important;
overflow: hidden;
display: flex !important;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0 !important;
}
ul#seminar_list li.list_l,
ul#seminar_list li.list_r {
float: none !important;
margin-left: 0 !important;
margin-top: 0 !important;
width: calc(50% - 8px);
text-align: center;
}
ul#seminar_list li.list_l img,
ul#seminar_list li.list_r img {
width: 100%;
height: auto;
vertical-align: bottom;
}
/* ================================================
■ ブログリンク（固定幅 → 全幅）
================================================ */
#blog_links {
width: 100% !important;
padding: 16px 0;
margin-top: 20px !important;
}
#blog_links ul {
margin-left: 0 !important;
}
#carouselWrap {
width: 100% !important;
margin: 20px auto !important;
}
#carouselInner ul.column {
width: 100% !important;
float: none !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 10px !important;
}
#carouselInner ul.column li {
float: none !important;
margin-right: 0 !important;
display: block !important;
}
#blog_links ul.column {
display: flex !important;
flex-wrap: wrap;
list-style: none;
padding: 0 !important;
margin: 6px 0 !important;
gap: 8px;
justify-content: center;
}
#blog_links ul.column li {
width: calc(50% - 8px);
float: none !important;
margin-right: 0 !important;
text-align: center;
border: 1px #ccc solid;
}
#blog_links ul.column li img {
width: 100%;
height: auto;
}
/* ================================================
■ サブコンテンツ
================================================ */
#sub_contents img {
display: block;
max-width: 240px;
height: auto;
margin: 4px auto; /* 画像は中央揃えを維持 */
}
#profile {
text-align: center; /* プロフィールバナーは中央 */
}
#profile img {
max-width: 240px;
height: auto;
}
#bnr_area02 ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: 8px;
justify-content: center;
}
#bnr_area02 ul li {
width: calc(50% - 8px);
text-align: center;
}
/* ================================================
■ フッター（style.css の実際の定義に基づく正確な修正）
問題の根本原因（style.css より）:
#footer_sitemap { height:480px; width:960px; } ← 固定幅・高さ
ul.l_list { width:200px; float:left; } ← float横並び3列
#information { width:270px; float:right; } ← float右寄せ
#footer_bottom { height:79px; } ← 固定高さ
#footer_bottom #copyright { padding-top:50px; width:960px; text-align:right; }
================================================ */
/* ── #footer_top ── */
#footer_top {
width: 100% !important;
height: auto !important; /* 固定47px解除 */
background-size: 100% auto !important;
}
#footer_top #pagetop {
width: 100% !important; /* 固定960px解除 */
text-align: center !important; /* right → center */
padding: 8px 0;
}
/* ── フッター全体 ── */
#footer {
width: 100% !important;
overflow: visible !important;
position: static !important;
}
#footer::after {
content: "";
display: table;
clear: both;
}
/* ── #footer_sitemap ── */
#footer_sitemap {
width: 100% !important; /* 固定960px解除 */
height: auto !important; /* 固定480px解除 ← コピーライト重なりの根本原因 */
padding: 16px 0 !important;
margin: 0 !important;
display: block !important;
float: none !important;
clear: both !important;
box-sizing: border-box;
}
#footer_sitemap::after {
content: "";
display: table;
clear: both;
}
/* ul.l_list: float:left + width:200px → 縦積み全幅 */
#footer_sitemap ul.l_list {
width: 100% !important; /* 固定200px解除 */
float: none !important; /* float:left 解除 */
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: block !important;
border-top: 1px solid #ddd;
}
/* 親メニューの li */
#footer_sitemap ul.l_list > li {
display: block !important;
float: none !important;
width: 100% !important;
padding: 8px 14px 6px 20px !important;
border-bottom: 1px solid #e0e0e0;
font-weight: bold;
margin: 0 !important;
background-position: 8px 50% !important;
}
/* li.largeItem */
#footer_sitemap ul.l_list > li.largeItem {
padding-bottom: 2px !important;
background-position: 8px 12px !important;
}
/* ul.s_list（サブメニュー）*/
#footer_sitemap ul.s_list {
display: block !important;
float: none !important;
width: 100% !important;
list-style: none !important;
margin: 4px 0 8px !important;
padding: 0 0 0 10px !important;
}
#footer_sitemap ul.s_list li {
display: block !important;
float: none !important;
width: 100% !important;
padding: 4px 0 !important;
font-weight: normal;
white-space: normal !important;
word-break: break-all;
background-image: none !important;
margin: 0 !important;
}
/* ── #information（お問合せ）── */
#information {
width: 100% !important; /* 固定270px解除 */
height: auto !important; /* 固定180px解除 */
float: none !important; /* float:right 解除 */
clear: both !important;
box-sizing: border-box;
border: 1px #ccc solid;
text-align: center;
padding: 16px 12px;
margin: 10px 0;
}
#information h2 {
padding-left: 0 !important;
border: none;
text-align: center;
}
#information h2 img {
max-width: 200px;
height: auto;
}
#information p#tel {
margin: 12px auto !important;
}
#information p#tel img {
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}
#information #mail {
margin: 10px auto !important; /* 固定 margin:30px 20px 解除 */
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
#information #mail p {
margin-top: 0 !important; /* 固定 margin-top:-30px 解除 */
margin-left: 0 !important; /* 固定 margin-left:80px 解除 */
}
#information p#form {
margin-left: 0 !important; /* 固定 margin-left:95px 解除 */
text-align: center;
}
/* ── #footer_bottom ── */
#footer_bottom {
width: 100% !important;
height: auto !important; /* 固定79px解除 */
background-size: 100% auto !important;
display: block !important;
position: static !important;
float: none !important;
clear: both !important;
}
/* #copyright（style.css: padding-top:50px; width:960px; text-align:right;）*/
#footer_bottom #copyright {
width: 100% !important; /* 固定960px解除 */
text-align: center !important; /* right → center */
padding-top: 12px !important; /* 固定50px解除 */
padding-bottom: 12px !important;
margin: 0 !important;
}
#footer_bottom #copyright p {
font-size: 10px !important;
line-height: 1.6;
word-break: break-all;
color: #fff;
}
/* ================================================
■ iframe・インライン固定幅
================================================ */
iframe {
width: 100% !important;
}
[style*="width: 480"],
[style*="width: 600"],
[style*="width: 640"],
[style*="width: 700"],
[style*="width: 720"],
[style*="width: 760"],
[style*="width: 800"],
[style*="width: 900"],
[style*="width: 960"],
[style*="width: 1000"] {
width: 100% !important;
max-width: 100% !important;
}
}
/* =====================================================
スマートフォン小（max-width: 480px）
===================================================== */
@media screen and (max-width: 480px) {
body {
font-size: 13px;
line-height: 1.7;
}
#logo img {
max-width: 180px;
}
ul#bnr_area01 li,
ul#seminar_list li.list_l,
ul#seminar_list li.list_r,
#bnr_area02 ul li,
#blog_links ul.column li {
width: 100%;
max-width: 300px;
}
}