@charset "UTF-8";
/* == すべて共通 == */
html, body {
font-size: 16px;
font-family: sans-serif; /*== ゴシック体 ==*/
color: #000; /*== 黒色 ==*/
background: #fff;
}
@media screen and (max-width : 720px){
html{ font-size : 12px;
}
}
body, div, p, h1, h2, h3, h4, ul, figure {
margin: 0;
padding: 0;
}
p, td, th, li {
line-height: 1.8;
}
a:link {
color: #000;
text-decoration: none;
} /*== 未訪問のリンクの色 ==*/
a:visited {
color: #000;
} /*== 訪問済みのリンクの色 ==*/
a:hover {
color: #28af78;
} /*== カーソルが乗っているリンクの色 ==*/
a:active {
color: #28af78;
} /*== クリック中のリンクの色 ==*/
section .container {
-js-display: flex;
display: flex;
flex-flow: column; /*== 表示方向、縦方向 ==*/
}
/*== 共通の見出し ==*/
main h1 {
margin-bottom: 1rem;
border-bottom: 1px dashed #b22222; /*== 破線で表示、ワインレッド ==*/
font-weight: normal;
font-size: 1.6em;
max-width: 640px;
padding-left: 3em; /*== h1文字 ==*/
}
.container {
margin: 0 auto; /*== センター ==*/
padding-left: 10px;
padding-right: 10px;
max-width: 960px; /*== 最大横幅 ==*/
min-width: 640px; /*== 最小横幅 ==*/
}
@media screen and (min-width:768px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
}
.center {
text-align: center;
}
.space {
padding-left: 24px;
}
/* == ヘッダー == */
header {
background: #b22222;
min-width: 640px;
}
.header-inner {
-js-display: flex;
display: flex;
justify-content: space-around; /*== 横方向の整列を指定、均等、両端の外側に半分の余白 ==*/
align-items: center; /*== 縦方向の整列を指定、センター ==*/
}
.header-logo {
padding: 20px 0;
width: 440px;
height: 36px;
}
.header-container {
padding-left: 20px;
padding-right: 20px;
}
.menu-btn {
padding: 20px 0;
width: 40px;
height: 40px;
align-items: center;
}
@media screen and (min-width: 80px) {
.menu-btn {
visibility:hidden;
}
} /*== 要素を非表示 ==*/
/* == ナビゲーション == */
nav{
background: #000;
min-width: 640px;
}
.navber {
display:none;
list-style-type: none;
} /*== liのマーカーを指定 ==*/
.navbar a {
display:block;
padding: 0.6rem 0;
color: #fff;
}
.navbar a:hover {
background: #b22222;
}
@media screen and (min-width: 80px) {
.navbar {
display: flex !important;/*== 横並び ==*/
}
}
.navbar li {
flex: 1 1 auto;
text-align: center;
list-style-type:none;
}
.navbar a.nav-current {
background: #b22222;
}
/* == メインエリア基本レイアウト ==*/
main {
padding-top: 26PX;
padding-bottom: 48px;
background: #fff;
min-width: 640px;
}
.photo1 {
display: block;
margin: 0 auto;
padding-top: 24PX;
padding-bottom: 48px;
max-width: 720px;
} /*== Toppage画像 ==*/
.photo2 {
display: block;
margin: 0 auto;
align-items: center;
max-width: 720px;
padding-bottom: 20px;
} /*== メニュー、page上の画像 ==*/
.photo3 {
display: block;
margin: 0 auto;
padding-top: 36PX;
padding-bottom: 12px;
} /*== infosite画像 ==*/
.main-title {
text-align: center;
border-style: none;
padding-bottom: 20px;
}
.table1 {
border-style: none;
width: 100%;
align-items: center;
max-width: 680px;
min-width: 600px;
}
.table2 {
table-layout: fixed;
border: solid 3px #e7e7e7; /*== 枠線、色 ==*/
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /*== 要素の角丸 ==*/
background-color: #fff;
margin: 10px 10px 20px;
max-width: 640px;
padding-top: 10PX;
padding-bottom: 10px;
} /*== communitysite ==*/
.table3 {
border-style: none;
table-layout: fixed;
max-width: 640px;
} /*== pfofilesite,calendarsite,infosite,その他 ==*/
.table5 {
table-layout: fixed;
max-width: 640px;
border: 2px #b22222 solid;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /*== 要素の角丸 ==*/
} /*== ladysshvingsite ==*/
.table6 {
table-layout: fixed;
max-width: 640px;
border: 2px #d3d3d3 solid; /*== table外枠、link ==*/
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /*== 要素の角丸 ==*/
}
.table7 {
width: 680px;
} /*== kawaraban ==*/
.td1 {
background: #CCCCCC;
} /*== kawaraban ==*/
td /*== 画像のcenter ==*/ /*== | ==*/
.item {
text-align: center;
width: 170px;
background-color: #f5f5f5;
border: 1px solid #a9a9a9; /*== 枠線、色 ==*/
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /*== 要素の角丸 ==*/
padding: 10px;
margin-top: 28px;
margin-bottom: 20px;
}
.sidebar {
width: 160px;
height: 640px;
background-repeat: no-repeat;
background-position: top;
background: url("images/topsiki1a.jpg"); /*== sidebar 壁紙 ==*/
margin-top: 24px;
margin-bottom: 24px;
}
.sidebarladys {
width: 160px;
height: 640px;
background-repeat: no-repeat;
background-position: top;
background: url("images/ladys2.jpg");
margin-top: 24px;
}
@media only screen and (min-width: 720px) {
section .container {
flex-flow: row;
} /*== メインとサイドバーが横並び ==*/
main {
flex: 1 1 auto;
padding-left: 30px;
padding-right: 30px;
} /*== メインの横幅が伸縮 ==*/
.sidbar {
flex: 0 0 160px; /*== サイドバーの横幅を固定==*/
}
.sidbarladys {
flex: 0 0 160px; /*== サイドバーの横幅を固定==*/
}
}
@media screen and (max-width:720px) {
.header {
width: 100%;
}
.nav {
width: 100%;
}
.container {
width: 100%;
}
.main {
width: 100%;
}
.sidebar {
display: none;
width: 0%;
}
.sidebarladys {
display: none;
width: 0%;
}
.footer {
width: 100%;
}
} /*== 要素とpxを消す ==*/
/* == フッター == */
footer {
background: #b22222;
min-width: 640px;
}
.footer-inner {
-js-display: flex;
display: flex;
justify-content: space-between; /*== 横方向の整列を指定、均等 ==*/
align-items: center; /*== 縦方向の整列を指定、センター ==*/
}
.footer-logo {
padding: 10px;
width: 88px;
height: 31px;
}
.footer-copy {
font-size: 12px;
color: #fff;
align-items: center;
text-align: center;
}
.pagetop {
padding: 10px;
width: 141px;
height: 17px;
}
/* === オーダー == */
.kokoroe {
font-size: 12px;
color: #fff;
text-align: center;
}
.sunday {
background-color: #ffd9d9;
} /*== calendar ==*/
.saturday {
background-color: #bbe9f0;
} /*== calendar ==*/
.aka {
color: #c00;
} /*== calendar ==*/
.padding1 {
padding-top: 40px;
padding-bottom: 36px;
text-align: center;
} /*== infosite ==*/
.padding2 {
padding-top: 80px;
text-align: center;
} /*== infosite ==*/
.padding3 {
padding-top: 40px;
} /*== mapsite,sign ==*/
.padding4 {
align-items: center;
padding-left: 5px;
} /*== communuity ==*/
.padding5 {
padding-top: 20px;
padding-bottom: 20px;
} /*== contents ==*/
.padding6 {
padding-top: 8px;
padding-bottom: 8px;
align-items: center;
} /*== link ==*/
.size14 {
font-size:14px;
} /*== 図書室 ==*/
.tdwidth {
width: 140px;
height: 240px;
} /*== ==*/ |