/*PC・タブレット・スマホ共通設定*/
/*全体*/
html,body {
width: 100%;height: 100%;
}
.body {
margin: 0px;
padding: 0px;
color: #3e6680; /*全体の文字色*/
/*font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
font-size: 10px; /*文字サイズ*/
line-height: 2; /*行間*/
-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 20px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 0px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align:top;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 30%; padding:30px 20px; margin:0px 180px 0px; argin-right:50px;}
/*リンクテキスト設定
---------------------------------------------------------------------------*/
a {
color: #3e6680; /*リンクテキストの色*/
-webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s; /*同上*/
}
a:hover {
color:#d50f26;/*マウスオン時の文字色*/
}
/*h2見出しタグの設定
---------------------------------------------------------------------------*/
h2 {
font-size:18px;
margin-bottom: 20px;
color: #fff; /*文字色*/
padding: 10px 30px; /*上下、左右への余白*/
background: #3e6680; /*背景色*/
border-radius: 30px; /*角丸のサイズ*/
}
/*h3見出しタグの設定
---------------------------------------------------------------------------*/
h3 {
clear: both;
margin-bottom: 20px;
padding: 8px 30px; /*上下、左右への余白*/
border-radius: 30px; /*角丸のサイズ*/
border: 2px solid #3e6680; /*枠線の幅、線種、色*/
}
/*h4見出しタグの設定
---------------------------------------------------------------------------*/
h4{
font-size:22px;
}
/*pタグの設定
---------------------------------------------------------------------------*/
p{
font-size:16px;
line-height:1.5em;
}
/*ul、liタグの設定
---------------------------------------------------------------------------*/
/*dl.dt.ddタグの設定
---------------------------------------------------------------------------*/
dl{
text-align:center;
font-size:17px;
font-weight: normal;
margin-top:10px;
padding-top:30px;
line-height:25px;
}
dt{
font-size:15px;
text-align:center;
}
dd{
text-align:center;
font-size:13px;
}
/*Music school
---------------------------------------------------------------------------*/
/*画像周りの設定*/
.lessen-icon{
margin:10px 0 ;
padding-bottom:30px;
}
/*画像の設定*/
.lessen-icon figure img {
float: left;
max-width:100%;
width: 20%; /*画像の幅*/
margin: 30px 5% 20px; /*画像の外側に空けるスペース。左から、上(0px)、左右(1%)、下(15px)への設定。*/
border-radius: 45%; /*角丸のサイズ。50%にすると円形になる。正方形がいいなら、この１行削除する。*/
}
/*記事、レッスン対応項目
---------------------------------------------------------------------------*/
.item{
margin-top :120px;
margin-right:120px;
margin-bottom:180px;
padding-right:50px;
padding-bottom:50px;
}
.lessen p{
text-align:center;
padding-top:100px;
margin:40px;
}
.lessen ul li{
font-size:17px;
text-align:center;
margin:35px; /*li（箇条書き） 間の縦幅設定*/
padding-top:70px;
padding-bottom : 5px; /*下への余白*/
}
/*レッスン内容詳細
---------------------------------------------------------------------------*/
.explanation{
margin-top:150px;
text-align:center;
clear:both;
}
.explanation h2{
font-size:1em;
margin: 40px 140px;
background:green;
}
.elemental{
clear:both;
padding-top:20px;
text-align:center;
}
/*ヘッダー（ロゴ、メニュー、お知らせ欄が入った最初の画面）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
text-align: center; /*ヘッダーブロックの内容ンタリングする設定*/
height: 50%; /*ヘッダーブロックの高さ。画面の高さに合わせる為に100%で指定。*/
}
/*ロゴ画像設定*/
#logo img {
width: 100%; /*幅*/
opacity: 9; /*透明度60%の事*/
margin-bottom:20px;
}
/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体のブロック*/
#menubar {
text-align: center; /*メニューブロックの内容をセンタリングする設定*/
position: absolute;
top: 20%; /*ヘッダーブロックに対して上から50%の場所に配置*/
width: 100%; /*幅*/
}
/*メニュー１個あたりの設定*/
#menubar li {
display: inline; /*横並びにする設定*/
}
#menubar li a {
display: inline-block;
letter-spacing: 0.5em;
text-decoration: none;
color: #fff;
font-size: 20px;
width: 200px; /*幅。下のline-heightと数字を合わせる。*/
line-height: 200px;
border-radius: 70%;
border: 4px solid #fff; /*枠線の幅、線種、色*/
margin: 0px 20px 50px;
text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}
/*マウスオン時の設定*/
#menubar li a:hover {
background: #CCCCCC; /*背景色*/
color: #fff; /*文字色*/
width: 220px; /*幅*/
line-height: 220px; /*高さ*/
}
/*コンテンツ（色のついたコンテンツブロック）
---------------------------------------------------------------------------*/
.contents {
overflow: hidden;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
background: #fff; /*背景色（古いブラウザ用）*/
background: rgba(255,255,255,0.9); /*背景色。255,255,255は白の事で0.9は透明度90%の事。*/
padding-top: 2%; /*ボックス内の余白*/
margin:0 2px 30px;
margin-right:18px;
margin-bottom: 0%; /*ボックスの下にとる余白。背景の写真を見せる為にウィンドウの高さの80%の余白をあけていますがお好みにあわせて変更してもらってOK。*/
}
/*サウンド設定
---------------------------------------------------------------------------*/
.boxConteiner{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding-bottom:40px;
}
.box1{
width:50%;
margin:20px 0px;
max-width:100%;
float:left;
}
.box2{
width:50%;
margin:20px 0px;
max-width:100%;
float:right;
}
/*サブメニュー設定
---------------------------------------------------------------------------*/
.submenu{
float:right;
text-decoration: none;
}
.menu{
font-family:"ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif;
padding:20px;
text-decoration:none;
text-align:center;
font-size:auto;
color:#fff;
border-radius:50%;
background:#FFE4E1;
-webkit-transition: 0.5s; /*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s; /*同上*/
}
.menu:hover{
background:#DCDCDC;
}
/*フッター設定
---------------------------------------------------------------------------*/
footer {
text-align: center;
position: fixed;
left: 0;
light:0;
bottom:0;
/*以下装飾*/
vertical-align:middle;
width: 100%;
height:60px;
background-color: #888888;
color:white;
}
/*住所設定
---------------------------------------------------------------------------*/
.adress{
height:15px;
bottom:15px;
}
/*ページの上部へ（↑）ボタン
---------------------------------------------------------------------------*/
.pagetop {
text-align: left;
}
.pagetop a {
display: inline-block;
text-decoration: none;
text-align: center;
background: #3e6680; /*背景色*/
color: #fff; /*文字色*/
border-radius: 50%; /*角丸のサイズ*/
width: 40px; /*幅*/
line-height: 40px; /*高さ*/
}
/*フォームエリア
---------------------------------------------------------------------------*/
.infomation{
padding:10px 20px 10px;
}
#mapcontents{
font-size: 20px;
text-align: center;
padding:30px;
}
.gazo_box img{
margin:0px 0px 0px;
}
#related_link{
margin:0px 5px 30px;
margin-right:20px;
}
/*背景用画像の設定（※実際にはcss背景画像でなく、画像としてhtml側の一番下に配置しています）
---------------------------------------------------------------------------*/
#bg img {
position: fixed;
left: 0px;
top: 0px;
z-index: -2;
width: 100%;
height: 100%;
}
/*その他
---------------------------------------------------------------------------*/
.look {background: #33; color: #fff;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color:#d50f26;}
.pr {font-size: 10px;}
/*==================
▼ブレイクポイントのルール▼
-スマホを基本設計にする-
*?479px：SP縦
*480px?：SP横
*600px?タブレット
*960px?小型PC
*1280px?大型PC
==================*/
/*端末を縦向きにした場合の設定
--------------------------------------------*/
@media screen and (orientation: portrait){
.portrait {display: block;}
.landscape {display: none;}
}
/*端末を横向きにした場合の設定
--------------------------------------------*/
@media screen and (orientation: landscape){
.portrait {display: none;}
.landscape {display: block;}
}
@media screen and (max-width: 1440px){
iframe {width:30%; padding:20px; margin:0px 140px 0; }
.gazo_box img{width:30%; height:400px; margin:0px 40px 0;}
h2{
font-size:0.9em;
}
h4{
font-size:22px;
}
p{
font-size:1em;
}
.lessen-icon{
margin:10px 0;
padding-bottom:20px;
}
.lessen-icon figure img {
width:23%;
height:auto;
margin: 25px 5% 20px;
}
.item{
margin-right:80px;
margin-bottom:150px;
padding-right:100px;
padding-bottom:150px;
}
.lessen p{
font-size:0.9em;
text-align:center;
padding-top:80px;
margin:30px;
}
.lessen ul li {
margin:30px;
padding-top:60px;
padding-left:0px;
padding-bottom : 5px; /*上、左右、下への余白*/
}
.explanation{
margin-top:180px;
text-align :center;
line-height:30px;
}
.explanation h2{
font-size:1em;
margin: 30px 30px;
background:green;
}
/*大学受験項目専用 */
.explanation p{
font-size:0.9em;
}
.explanation dl{
font-size:0.95em;
}
.explanation dt{
font-size:16px;
}
/*サウンド設定（文字幅含む）*/
.elemental{
clear:both;
padding-top:20px;
text-align:center;
}
footer{font-size:12px;}
}
@media screen and (max-width: 1080px){
iframe {width: 30%; padding:20px; margin:0px 20px 0px; margin-left:80px; }
.gazo_box img{width:35%; margin:0px 30px 0px ;margin-left:70px;}
h2{
font-size:0.8em;
}
h4{
font-size:1em;
}
p{
font-size:1em;
line-height:1.5em;
}
.lessen-icon{
margin:15px 0 ;
padding-bottom:35px;
cursor: pointer;
}
.lessen-icon figure img {
width:22%;
height:auto;
margin: 25px 5% 20px;
}
.item{
margin-top:60px;
margin-right:30px;
margin-bottom: 4em;
padding-right:50px;
padding-bottom:150px;
}
.lessen p{
font-size:0.9em;
text-align:center;
padding-top:60px;
margin:20px 70px;
}
.lessen ul li {
margin:20px;
padding-top:50px;
padding-bottom : 5px; /*上、左右、下への余白*/
padding-left:0px;
text-align:center;
}
.explanation{
padding:10px 80px;
font-size:16px;
text-align :center;
line-height:30px;
}
.explanation h2{
font-size:1em;
margin: 0px 0px;
background:green;
}
.explanation p{
font-size:0.9em;
}
/*大学受験項目専用 */
.explanation dl{
font-size:15px;
}
.explanation dt{
font-size:15px;
}
/*サウンド設定*/
.elemental{
clear:both;
padding-top:20px;
text-align:center;
}
.boxConteiner{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding-bottom:40px;
}
.box1{
max-width:100%;
margin:20px 0px;
float:center;
}
.box2{
max-width:100%;
margin:20px 0px;
float:center;
}
footer {
font-size:12px;
}
/*タブレット兼スマートフォン対応の設定
---------------------------------------------*/
@media screen and (max-width: 768px){
#logo img {
width: 100%; /*幅*/
opacity: 9; /*透明度60%の事*/
margin-bottom:40px;
}
iframe {width: 80%; padding:20px; margin:0px 40px 30px }
.gazo_box img{width:80%; height:50%; margin:40px 60px 0;}
h2{
font-size:0.7em;
}
h4{
font-size:0.9em;
}
p{
font-size:0.9em;
line-height:3em;
}
ul{
font-size:12px;
}
.contents{
padding-bottom:50px;
}
.lessen-icon{
margin:40px 0px;
padding-bottom:10px;
}
.lessen-icon figure img {
width:22%;
margin: 0px 6% 0px;
}
.item{
margin-top:0px;
margin-right:20px;
margin-bottom: 80px;
padding-right:;
}
.lessen p{
font-size:0.9em;
text-align:center;
padding-top:40px;
margin:10px 50px;
}
.ressen ul li{
margin:20px;
padding-top:40px;
padding-bottom : 5px; /*上、左右、下への余白*/
text-align: center;
}
.explanation{
padding:10px 60px;
font-size:16px;
text-align :center;
line-height:30px;
}
.explanation h2{
font-size:0.8em;
margin: 0px 0px;
background:green;
}
/*大学受験項目専用 */
.explanation p{
font-size:0.9em;
}
.explanation dl{
font-size:14px;
}
.explanation dt{
font-size:14px;
}
.elemental{
clear:both;
padding-top:20px;
text-align:center;
}
.boxConteiner{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding-bottom:40px;
}
.box1{
width:100%;
margin:20px 0px;
float:center;
}
.box2{
width:100%;
margin:20px 0px;
float:center;
}
footer {
font-size:10px;
}
}
/*スマートフォン対応の設定
----------------------------------------------*/
@media screen and (max-width: 670px) {
iframe {width: 80%; height:200px; padding:20px 0px;vertical-align:middle; margin:0px 28px 20px; }
.gazo_box img{width:80%; height:250px; padding:20px 0px 0px; vertical-align:middle; margin:15px 30px 0px;}
header {
text-align: center; /*ヘッダーブロックの内容ンタリングする設定*/
height: 0%; /*ヘッダーブロックの高さ。画面の高さに合わせる為に100%で指定。*/
}
#infomation{
padding-bottom:50px;
}
.contents{
margin-top:130px;
padding-bottom:0px;
}
/*ロゴ画像設定*/
#logo img {
width: 100%; /*幅*/
vertical-align:middle;
opacity: 9; /*透明度60%の事*/
}
h2{
font-size:0.6em;
}
h4{
font-size:0.8em;
}
p{
font-size:0.9em;
line-height:3em;
}
.infomation{
margin-top:100px;
width:auto;
}
#menubar li a {
display: inline-block;
text-decoration: none;
color: #fff;
font-size: 20px;
letter-spacing: 0.2em;
width: 200px;
line-height: 200px;
border-radius: 70%;
border: 4px solid #fff; /*枠線の幅、線種、色*/
margin: 0px 0px 10px;
text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}
.lessen-icon{
position:relative;
width: 50%;
height: 50%;
margin: 0px 0% 0px;
padding: 60% 0 0;
padding-bottom:0px;
margin-right:0px;
margin-bottom:0px;
}
.lessen-icon figure img {
box-sizing: border-box;
position: absolute;
width: 50%;
height: 50%;
top: 20px;
left: 70%;
margin: 0px 0% 0px;
margin-right:0px;
}
.item{
clear:both;
margin-top:-55px;
margin-right:15px;
margin-left:15px;
margin-bottom:0px;
padding-top:0px;
padding-right:0px;
padding-left:0px;
padding-bottom:10px;
text-align:center;
}
.lessen p{
font-size:0.7em;
text-align:center;
padding-top:30px;
margin:80px 50px;
}
.lessen ul li{
line-height:20px;
margin:10px 20px;
padding-top:50px;
padding-bottom : 0px; /*上、左右、下への余白*/
text-align:center;
}
.explanation{
font-weight:normal;
margin-top:0px;
padding:50px 20px;
text-align:center;
}
.explanation h2{
font-size:0.9em;
margin: 0px 0px;
background:green;
}
.explanation p{
font-size:0.8em;
}
.explanation dl{
font-size:12px;
}
.explanation dt{
font-size:13px;
}
/*フォームエリア
---------------------------------------------------------------------------*/
.infomation{
margin:40px 20px 50px;
padding:0px;
}
#mapcontents{
font-size: 0.8em;
text-align: center;
padding:30px;
}
/*サウンド設定
---------------------------------------------------------------------------*/
.elemental{
clear:both;
padding-top:20px;
text-align:center;
}
.boxConteiner{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding-bottom:40px;
}
footer{
font-size:10px;
}
}