Newer
Older
renshu-2021 / Unique / style.css
body {
	background-color:#ffffff;
	margin:0;
	padding:0;
	max-width:100%;
}
         
        header {
                background-color:#dadada;
        	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;
		color:#414141;
        }
     
    ul{
     	list-style-type: none;
    	padding-left: 0;
    }
    .main{
    	padding-top:40px;
    	max-width: 100%;
        overflow-x: hidden;
    }
 
 
 /*
    .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{
    	position:relative;
    	width:60%;
    }
    .photo1{
    	padding: 50px 0 50px 40%;
    }
    .photo2{
    	padding: 50px 40% 50px 0;
    }
    img {
        z-index:-10;
        width: 100%;
	height: auto;
    }
    .top img{
    	width: 100%;
    	height: 350px;
    	object-fit: cover;
	font-family: 'object-fit: contain;'
    }
    
.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
}
.is-show {
  transform: translate(0, 0);
  opacity: 1;
  transition: 2s;
}

    
    
    
    
    
    .photo h1{
    	top:90px;
    	padding:0 15px;
    }
    .title1{
    	position: absolute;
        left: 5%;
    }
    .title2{
    	position: absolute;
        right: 5%;
    }
    .box{
    	width:26em;
    	position: absolute;
        top: 150px;
    }
    .box1{
        left: 5%;
    }
    .box2{
        right: 5%;
    }
    .box1 .syokai_box{
    	border-radius: 5px 15px 5px 15px;
    }
    .box2 .syokai_box{
    	border-radius: 15px 5px 15px 5px;
    }
    .syokai_box{
    	background-color:#EDFFFF;
    	width:100%;
    }
    .syokai_box h2{
    	padding:15px 15px 0 15px;
    	color:#414141;
    }
    .syokai_box p{
    	padding:15px 15px 15px 15px;
    	color:#414141;
    }
    .sub .syokai_box{
    	background-color:#FF6928;
    }
    .sub .syokai_box h2{
    	color:#ffffff;
    }
    .sub .syokai_box p{
    	color:#ffffff;
    }
     
    .link_box{
    	margin-top:10px;
    	height:3em;
    	width:100%;
    	display:inline-block;
    }
    .link_box a{
    	height:100%;
            display: flex;
            position:relative;
            background-color:#FF6928;
    }
    .box1 .link_box a{
    	border-radius: 15px 5px 15px 5px;
    }
    .box2 .link_box a{
    	border-radius: 5px 15px 5px 15px;
    }
    .link_box a p{
    	margin:auto;
    	top:50%;
    	color:#ffffff;
    	text-decoration:none;
    }
     
    .gaiyo_box{
    	width:100%;
    	margin:0;
    	padding:0;
    	background-color:#EDFFFF;
    	padding:1em 0;
    }
    .gaiyo_box h1{
    	text-align:center;
    }
    .gaiyo_box h2{
    	color:#FF6928;
    	margin-bottom:10px;
    }
    .gaiyo_box p{
    	text-indent:0;
    }
    
    .border-radius-1{
    	background-color: #ffffff;
    	border-radius: 10px 30px 10px 30px;
    	padding:1em 1em;
    	margin:30px 5%;
    	
    }
    
    
    
     
     
    h1 {
    	font-size: 50px;
    	z-index:5;
    	font-family:"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E";
    	color:#414141;
    	margin:0;
    	padding:0;
    }
    h2 {
    	font-size: 22px;
    	color: #414141;
    	margin:0;
    	padding:0;
    	font-family: 'Kosugi', sans-serif;
    	}
    p {
    	font-size: 18px;
    	color: #000000;
    	margin:0px;
    	font-family: 'Kosugi', sans-serif;
    	}
    a{
    	text-decoration:none;
    }
    address {
    	text-align: right;
    	}
    .main a:link {
    	}
    .main a:visited {
    	color: #000080;
    	}
    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;
    }
    
    
footer{
	background-color:#414141;
	height:2em;
	display: table;
	width: 100%;
}
footer p{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color:#ffffff;
	font-size:14px;
}





 
     
@media screen and (min-width: 960px){
}
     
@media screen and (max-width:959px){ /*タブレット用*/
            header img{
    	       display: inline-block;
    	       text-align: left;
    	       margin-left:0;
    	}
	.member-box{padding-bottom:100px;}
	
	.box{
		width:20em;
	}
}
    
@media screen and (max-width:767px){ /*スマホ用*/
            header img{
    	       display: inline-block;
    	       text-align: left;
    	       margin-left:0;
    	}
	.member-box{padding-bottom:100px;}
	
	h1{
		font-size:35px;
	}
	h2{
		font-size:16px;
	}
	
	.photo h1{
		padding:0 10px;
	}
	.photo{
    		width:70%;
	}
	.top .photo{
		padding-bottom:100px;
	}
	.photo1{
		padding: 20px 0 50px 30%;
	}
	.photo2{
		padding: 20px 30% 50px 0;
	}
    	
	
	.syokai_box h2{
		padding:10px 10px 0 10px;
	}
    .syokai_box p {
    	font-size: 14px;
    	padding:10px 10px 10px 10px;
    }
	.link_box {
		height:2em;
	}
	.link_box a p{
		font-size:14px;
	}
    .photo h1{
    	top:135px;
    }
    .box{
    	top:180px;
    	width:12em;
    }
    .gaiyo_box p{
    	font-size:14px;
    	margin-top:5px;
    }
    
    footer{
    	height:1.5em;
    }
    footer p{
    	font-size:10px;
    }
}
     
     
    @media print{
    	h1{
    		color:black;
    		background:none;
    		border-color:black;
    	}	
    	h2{
    		color:black;
    	}
    }