Newer
Older
renshu-2021 / Unique / style.css
body {
        	background-color:#fafafa;
        	margin:0;
		margin-bottom:50px;
        	}
         
        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:40px;
    }
 
    .member-box{
    background-color:#DDDDDD;
    width:100%;
    padding:5px 0 80px 0;
    margin:0;
    }
 
    .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;
    }
    .photo p{
    	   padding-left: 1em;
     	   text-indent: 0em;
    }
    .photo1{position: relative;
    	 width: 60%;
    	 padding: 0 0 0 40%;
    	margin-top:50px;
    }
    .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:5em;
    }
     
    .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";
    	color:#212121
    }
    h2 {
    	font-size: x-large;
    	color: #1E90FF;
    	margin:10px 10px;
    	}
    p {
    	font-size: large;
    	color: #000000;
    	margin:0px 0px;
    	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:60px;
    	}
    	header h3 {
    	font-size:25px;
    	}
	.member-box{padding-bottom:100px;}
 
    .box{
    	width:23em;
    }
 
    .link_box a p{
    	left:2.5em;
    }
 
    }
     
    @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:110px;
    	}
	.member-box{padding-bottom:100px;}
    }
 
    .photo2{
    margin-top:150px;
    }
     
    @media print{
    	h1{
    		color:black;
    		background:none;
    		border-color:black;
    	}	
    	h2{
    		color:black;
    	}
    }