﻿<style>

/* 全ページ共通 ***************** */

article,aside,canvas,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display:block;
}

body {
margin-top: 0px;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
background: #fff;
color: #333;
margin-bottom:0px;
text-align: center;
padding:0px;
font-size:16px;
line-height:150%;
font-family:"Libre Bodoni","Zen Kaku Gothic New",sans-serif;
-webkit-text-size-adjust:100%;
}

a:link{color:#333}
a:visited{color:#666}
a:hover{color:#906;
text-decoration:underline;
}

/* ヘッダー */

#header{
display:block;
border-style:none;
}

#header-s{
display:block;
border-style:none;
}

/* 検索フォーム */

.search-form-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #666;
    border-radius: 3px;
margin-top:20px;
margin-bottom:20px;
}

.search-form-3 input {
    width: 250px;
    height: 36px;
    padding: 5px 10px;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
}

.search-form-3 input::placeholder{
    color: #666;
}

.search-form-3 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 36px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.search-form-3 button::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23777777'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

/* 画像回り込み */

.img-l{
float:left;
vertical-align:top;
margin-right:15px;
}

.img-r{
float:right;
vertical-align:top;
margin-left:15px;
}

/* 見出し */

h1,h2,h3{
font-weight:normal;
}

.latin{
font-family:"Libre Bodoni";
}

/* 区切り線 */

.separate{
display:block;
height:6px;
background: #000;
background: linear-gradient(to left, #333, #000);
margin-top:20px;
margin-bottom:20px;
}

.separate2{
display:block;
height:3px;
background: #000;
background: linear-gradient(to left, #333, #000);
margin-top:30px;
margin-bottom:30px;
}

/* フッター */

footer{
font-size:16px;
text-align:left;
}

ul.menu-footer{
padding:0px;
}

.menu-footer li{
list-style:none;
line-height:200%;
display:block;
text-align:left;
}

.menu-footer li a{
text-decoration:none;
}

.menu-footer li a:hover{
text-decoration:underline;
}

.footer-logo{
display: flex;
justify-content: left;
align-items: center;
}

.latin2{
font-family:"Libre Bodoni";
font-size:12px;
}

img.f-logo{
width: 180px;
}

img.iglogo{
width: 40px;
margin-bottom:20px;
}

.footer-logo{
display: flex;
justify-content: leftr;
align-items: center;
}

.banner2{
border-left:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
}

/* お問い合わせバナー */
.floating-banner {
  position: fixed;
  bottom: 20px; /* 画面下から20pxの距離 */
  right: 20px;  /* 画面右から20pxの距離 */
  width: 150px;  /* バナーの幅を指定 */
  height: auto;  /* 高さを自動調整 */
  z-index: 9999;  /* 他の要素よりも前面に表示 */
display:block;
background: #faf0e6;
line-height:1.5;
letter-spacing:0.05em;
padding-top:8px;
padding-bottom:6px;
border-top:solid 3px #666;
border-right:solid 3px #666;
border-left:solid 3px #333;
border-bottom:solid 3px #333;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-decoration:none;
font-size: 16px;
font-family:"Libre Bodoni","Zen Kaku Gothic New",sans-serif;
font-weight:bold;
}

.floating-banner a{
color: #333;
text-decoration:none;
}

.close-btn {
  position: absolute;
  top: -6px;
  right: 0px;
  background-color: transparent;
  border: none;
padding:0px;
  font-size: 16px;
font-weight:bold;
  color: #333;
  cursor: pointer;
}

/* トップページ ***************** */


/* 上部バナー */

.banner{
border-left:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

/* 写真スライダー */

.slider-group {
  position: relative;
  width: 100%;
  min-height: 200px;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.slider-card {
  flex: 0 0 auto;
  max-width: 22.5%;
  height: 100%;
  margin-right: 20px;
margin-bottom:10px;
}

.slider-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 教室名ロゴ */

img.logo{
width:48%;
height:auto;
margin:0 26%;
}

/* トップ教室写真 */

#lesson-room{
width:48%;
height:auto;
margin:0 26%;
padding:0 0 10px 0;
}

/* メニューリンクボタン */

h2.button a{
display:block;
background: #000;
background: linear-gradient(to left, #333, #000);
color: #ffc;
line-height:1.5;
letter-spacing:0.05em;
padding-top:6px;
padding-bottom:3px;
border-top:solid 2px #666;
border-right:solid 2px #666;
border-left:solid 2px #333;
border-bottom:solid 2px #333;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-decoration:none;
font-family:"Libre Bodoni","Zen Kaku Gothic New",sans-serif;
}

h2.button a:hover{
background:#333;
background: linear-gradient(to left, #666, #333);
border-top:solid 2px #999;
border-right:solid 2px #999;
border-left:solid 2px #666;
border-bottom:solid 2px #666;
}

img.menu-index a,img.menu-index2 a,{
border-style:none;
}

p.menu-index{
font-size:16px;
line-height:1.5;
margin-bottom:20px;
}

p.menu-index a{
color:#333;
text-decoration:none;
}

p.menu-index a:hover{
text-decoration:underline;
}

.latin1{
font-family:"Libre Bodoni";
font-size:24px;
}

/* お知らせ欄 */

.news1{
border:dotted 1px #636;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#faf0e6;
text-align:left;
padding:0 20px;
margin-bottom:30px;
}

p.news{
display:block;
border-left:solid 4px #906;
text-align:left;
padding:0px 10px;
}


/* 教室宣伝文句 */

.info{
background:#faf0e6;
padding:12px;
margin-bottom:30px;
border-top:solid 1px #fff9f5;
border-right:solid 1px #fff9f5;
border-left:solid 1px #ede4e1;
border-bottom:solid 1px #ede4e1;
}

/* スマホ用上記宣伝欄 479px以上 */

.info-phone{
display:none;
visibility:hidden;
}

/* ソルフェージュ教室案内文 */

.solfe-index{
margin-top:30px;
line-height:150%;
}

/* ソルフェージュ教室画像 */

#hand{
width:48%;
height:auto;
margin:0 26%;
padding:0 0 10px 0;
}


ul.solfe-menu{
padding:0px;
}

.solfe-menu li{
list-style:none;
line-height:200%;
display:block;
text-align:center;
margin-bottom:20px;
}

.solfe-menu a{
color:#333;
text-decoration:none;
}

.solfe-menu a:hover{
text-decoration:underline;
}


/* 教室案内ページ ***************** */

img.cut{
width:22.5%;
height:auto;
margin:0 38.75%;
}

/* 教室名リンク */

.school a{
display:block;
background:#faf0e6;
font-size:16px;
padding:12px;
margin-top:10px;
border-top:solid 1px #fffaf0;
border-right:solid 1px #fffaf0;
border-left:solid 1px #d3d3d3;
border-bottom:solid 1px #d3d3d3;
text-decoration:none;
}

.school a:hover{
background:#faf0e6;
}

.table1{
width:100%;
border-collapse:collapse;
text-align:left;
margin-bottom:20px;
}

caption{
font-size:18px;
padding-bottom:10px;
}

th{
background:#faf0e6;
border:solid 1px #ccc;
font-weight:normal;
width:22.5%;
padding:6px;
font-weight:normal;
text-align:left;
}

.t1{
border:solid 1px #ccc;
padding:6px;
}


/* レッスン科ページ ***************** */
.lesson{
text-align:left;
}


/* 講師ページ ***************** */
.h-small{
font-size:14px;
}


/* アンダンテ　箇条書き案内文 */
.left{
text-align:left;
margin-bottom:10px;
}


/* 講師専用ページ ***************** */
.calendar{
text-align:left;
}

/* 生徒専用ページ ***************** */
.ol li{
text-align:left;
}


/* タブレットサイズ以下 */

	@media all and (max-width: 768px) {

#solfe{
display:none;
visibility:hidden;
}

.search-form-3
{
width:300px;
}

img.logo{
width:65%;
height:auto;
margin:0 17.5%;
}

img.cut{
width:31%;
height:auto;
margin:0 34.5%;
}

img.instruments{
width: 31%;
height:auto;
margin:0 34.5%;
}

#lesson-room{
width:48%;
height:auto;
margin:0 10px 0 0;
float:left;
}

.intro{
text-align:left;
}

img.menu-index{
width:65%;
height:auto;
margin:0 17.5%;
}

img.menu-index2{
width:82%;
height:auto;
margin:0 9%;
}

.slider-card {
  flex: 0 0 auto;
  max-width: 31%;
  height: 100%;
  margin-right: 10px;
}

.slider-group::-webkit-scrollbar{
  display:none;
}

.info{
margin-bottom:20px;
}

h2.lesson{
text-align:center;
}

h3.lesson{
text-align:center;
}

/* タブレット～スマホ */

	@media (min-width:480px) and (max-width:768px){

.col3, .col3 last, .col4,.col4 last{
float:left;
width:47%;
}

}

/* スマホ */

	@media all and (max-width: 479px) {

.menu-header1 li{
display:block;
padding:8px;
border-style:none;
}

.menu-header3{
font-size:12px;
}

.menu-header2 li,.menu-header3 li{
padding:8px;
border-style:none;
}

.menu-header1 li.first,.menu-header2 li.first,.menu-header3 li.first,.menu-header1 li.last,.menu-header2 li.last,.menu-header3 li.last{
padding:8px;
}

.search-form-3
{
width:300px;
}

img.logo{
width:82%;
height:auto;
margin:0 9%;
}

#lesson-room{
width:100%;
height:auto;
margin:0px;
}

img.cut{
width:48%;
height:auto;
margin:0 26%;
}

img.instruments{
width: 31%;
height:auto;
margin:0 34.5%;
}

img.menu-index{
width:48%;
height:auto;
margin:0 26%;
}

img.menu-index2{
width:65%;
height:auto;
margin:0 17.5%;
}

.news1{
margin-bottom:20px;
}

img.news{
width:31%;
height:auto;
}

.info{
display:none;
visibility:hidden;
}

.info-phone{
display:block;
visibility:visible;
background:#faf0e6;
text-align:left;
list-style-type:square;
margin:20px 0;
padding:20px 20px 20px 40px;
border-top:solid 1px #fff9f5;
border-right:solid 1px #fff9f5;
border-left:solid 1px #ede4e1;
border-bottom:solid 1px #ede4e1;
}

.ryaku{
display:none;
visibility:hidden;
}

.slider-card {
  flex: 0 0 auto;
  max-width: 48%;
  height: 100%;
  margin-right: 10px;
}

}
</style>