body { background-color: white; margin:0; } header { background-color:#eeffff; position: fixed; width:100%; z-index:50; } header ul{ float:right; margin:0; padding-left:0; } header li{ display:inline-block; } header li a{ display: flex; align-items: center; font-weight: bold; color: #2b3a62; height:50px; font-size:15px; padding:0 20px; } header h3 { margin:10px 20px; display:inline-block; } ul{ list-style-type: none; padding-left: 0; } .main{ padding-top:50px; } .mem { text-align:center; font-size:30px; margin:10px 0; } .member { width:98%; margin: auto; } .member li{ width:18%; float: left; margin:0 1%; } .member p{ text-indent:0; text-align:center; font-weight:bold; font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; } .name{ background-color:#33CCCC; margin:0 auto; padding:5px 5px; } .course{ background-color:#33FFCC; margin:0 auto; padding:5px 5px; } .conteiner{ height:800px; } .photo{ margin-top:100px; } .photo1{position: relative; width: 60%; padding: 0 0 0 40%; margin-top:200px; } .photo2{position: relative; width: 60%; padding: 0 40% 0 0; } img { width: 100%; height: auto; z-index:-10; } .title1{ position: absolute; left: 5%; } .title2{ position: absolute; right: 5%; } .box{ width:28em; } .box1{ position: absolute; top: 100px; left: 5%; } .box2{ position: absolute; top: 100px; right: 5%; } .syokai_box{ background-color:#DDDDDD; width:100%; padding:10px 0 15px 0; } .link_box{ margin-top:10px; height:3em; width:100%; background-color:#FF6928; display:inline-block; } .link_box a{ height:3em; display: flex; position:relative; } .link_box a p{ margin:0; position:absolute; top:50%; transform:translate(0, -50%); left:4em; } .gaiyo_box{ width:90%; margin:0 5%; } .gaiyo_box h1{ text-align:center; } .gaiyo_box p{ text-indent:0; margin-left:2em; } h1 { font-size: 50px; z-index:5; font-family:"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E"; } h2 { font-size: x-large; color: #1E90FF; margin:10px 10px; } p { font-size: large; color: #000000; margin:5px 0; text-indent:1em; } address { text-align: right; } .main a:link { text-decoration: underline; } .main a:visited { color: #000080; text-decoration: underline; } a:hover { background-color: #008080; } a:active { color: #0000ff; } .hoge {color:#ffccff} p.piyo {color:#ffccff} .imgs{ text-align:center; } .text { width:90%; margin:0 auto; } .calender { margin-top:50px; } table { font-size:20px; width:90%; margin:0 auto; text-align:center; border:2px solid red; } th{ width:12%; height:80px; } @media screen and (max-width: 960px){ header li a{ font-size:14px; height:60px; } header img{ height:60px; } .main{ padding-top:35px; } header h3 { font-size:25px; } } @media screen and (max-width:740px){ header { text-align: center; } header img{ display: inline-block; text-align: left; margin-left:0; } header ul{ display:block; float:none; text-align:center; } .main{ padding-top:100px; } } @media print{ h1{ color:black; background:none; border-color:black; } h2{ color:black; } }