@charset "UTF-8";

/*共通*/
.about {
	background: url(../img/about-image.jpg) no-repeat center top;
	background-size: cover;
}

/*学校長挨拶 */
#messages .photo {
	width: 30%;
	float: left;
}

#messages .txt {
	width: 65%;
	float: right;
}

#messages h4{
    font-family: 'Redressed', cursive;
    font-size:4.8rem;
    font-weight:normal;
    color:#c73c60;
		border: none;
}

#messages h4::after {
	content: none;
}

#messages h4 span{
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size:1.4rem;
    color:#333;
    font-weight:bold;
}

#messages .copy span.beyond {
	/* display: block; */
	font-family: 'Redressed', cursive;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.2px;
	margin: 10px 0;
}

/* 梅光学院145年の歴史*/
#history dl {
	padding: 20px;
	border-bottom: 1px solid #e6e6e6;
}

#history dl:after{
	content: '';
	display: block;
	font-size:0;
	clear: both;
}

#history dt {
	width: 10%;
	float: left;
	margin-right: 15px;
	color: #c73c60;
}

#history dd {
	width: 85%;
	float: left;
	padding-left: 20px;
	border-left: 1px solid #c73c60;
}

#history .block-2 {
		width: 47%;
		float: left;
		margin-right: 6%;
	}
	
	#history .block-2:last-of-type {
		margin-right: 0;
	}
	
	#history .block-2 h5 {
		margin-bottom: 5px
	}
	
	#history .block-2 img {
		width: 50%;
		height: auto;
	}

/* 施設紹介 */
#facility h4 {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-style: normal;
	font-size: 1.8rem;
	letter-spacing: 0;
	margin-bottom: 5px;
	line-height: 1.2;
}

#facility .wrap img {
	margin-bottom: 15px;
}

#facility .block img {
	display: block;
	width: 250px;
	float: right;
	margin-left: 20px;
	margin-top: -10px;
}

#facility .block p {
	width: 60%;
	float: left;
}
#facility .block-3 span{
    font-size:14px;
}

#facility h4 span {
	display: inline-block;
 	font-size: 1.2rem;
}


/* 新制服紹介 */
#uniform .photo-L {
	width: 25%;
	float: left;
	margin-right: 30px;
}

#uniform .photo-R {
	width: 25%;
	float: right;
	margin-left: 30px;
}

#uniform .block img {
	margin-bottom: 15px;
}

#uniform .box {
	width: 48%;
	float: left;
	margin-right: 4%;
	margin-bottom: 5px;
}
#uniform .box:nth-of-type(odd) {
	margin-right: 0;
}	

/* 梅光なんでもQ＆A */
#qa dl {
	background: url(../img/about-qa-01.png) no-repeat left top 4px;
}

#qa dt {
	padding-left: 70px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-feature-settings: "pkna";
	font-size: 1.8rem;
	color: #c73c60;
	margin-bottom: 10px;
}

#qa dd {
	padding-left: 70px;
	margin-bottom: 60px;
}

/* 年間行事 */
#event h4 {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	border-bottom: 1px dotted #c73c60;
	color: #333;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 5px;
}

#event .block-2 .wrap ul {
	margin-bottom: 30px;
}

#event img {
    margin-bottom: 20px;
}

#event .block-2 img:nth-of-type(2) {
    width: 25%;
    float: left;
}

#event .block-2 .wrap {
	width: 72%;
	float: right;
}

#event .block-2 {
	margin-bottom: 20px;
}

#event .column {
	
}

.column-august {
	border: 1px solid #3fad71;
	padding: 10px 20px 0px 20px;
}

.column-august,
.column-january {
	margin-top: -30px;
	position: relative;
}

#event img.figure {
	margin-bottom: 0;
}

.triangle1 {
	position: absolute;
	top: -20px;
	left: 130px;
	width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #3fad71;
}

.triangle2 {
	position: absolute;
	top: -20px;
	right: 160px;
	width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #7d257a;
}

.column-august h5 span {
	display: inline-block;
	margin-right: 10px;
	background: #3fad71;
	font-size: 1.2rem;
	color: #fff;
	padding: 2px 15px;
	margin-bottom: 5px;
}

.column-january h5 span {
	display: inline-block;
	margin-right: 10px;
	background: #7d257a;
	font-size: 1.2rem;
	color: #fff;
	padding: 2px 15px;
	margin-bottom: 5px;
}


.column-august .photo,
.column-january .photo {
	width: 40%;
	float: right;
}

.column-august .block-2, 
.column-january .block-2 {
    width: 56%;
    float: left;
    margin-right: 4%;
   	margin-bottom: 0px; 
    text-align: justify;
}



.column-august .block-2:nth-of-type(2n) {
    margin-right: 0;
    width: 60%;
}
.column-august .block-2 img {
    margin-bottom: 0px !important; 
    
}

.column-august h5 {
	color: #3fad71;
	margin-bottom: 0;
}

.column-january {
	border: 1px solid #7d257a;
	padding: 10px 20px 0px 20px;
}

.column-january h5 {
	color: #7d257a;
	margin-bottom: 5px;
}

.column-january .block-2 {
    width: 60%;
    float: left;
    margin-right: 4%;
   margin-bottom: 0px; 
    text-align: justify;
}

.column-january .block-2:nth-of-type(2n) {
    margin-right: 0;
    width: 36%;
}

.column-january .block-2 img {
    margin-bottom: 0px !important;  
}


.clear {
	clear: both;
}

#event li {
	list-style-type: none;
}

#event ul.txt-april li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #e17d7a;
	margin-right: 5px;
}
#event ul.txt-may li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #edab51;
	margin-right: 5px;
}
#event ul.txt-june li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #f5eb4f;
	margin-right: 5px;
}
#event ul.txt-july li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #8bc14a;
	margin-right: 5px;
}
#event ul.txt-august li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #3fad71;
	margin-right: 5px;
}
#event ul.txt-september li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #1b9989;
	margin-right: 5px;
}
#event ul.txt-october li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #44a2cc;
	margin-right: 5px;
}
#event ul.txt-november li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #2f69a4;
	margin-right: 5px;
}
#event ul.txt-december li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #1b1b48;
	margin-right: 5px;
}
#event ul.txt-january li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #7d257a;
	margin-right: 5px;
}
#event ul.txt-february li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #891d55;
	margin-right: 5px;
}
#event ul.txt-march li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #bf1452;
	margin-right: 5px;
}

/* 1日のスケジュール */
.contents-main{
    width:100%;
}

.schdule-box {
    width: 46%;
    float: left;
    margin-bottom: 40px;
    text-align: justify;
}

.schdule-box:after {
    content: '';
    display: block;
    clear: both;
    font-size: 0;
    margin: 0;
    padding: 0;
}

.schdule-box h4 {
    margin-bottom: 0;
    margin-left: 25px;
    font-size:1.8rem;
}

.sch-number {
    display: block;
    margin-top: -24px;
}

.sch-number img {
    width: 21px;
}

.first-arrow{
    width: 3%;
    max-width: 100%;
    float: left;
    padding-top: 90px;
    margin: 0 5px;
}
.first-arrow:after {
    content: '';
    display: block;
    clear: both;
    font-size: 0;
    margin: 0;
    padding: 0;
}



/* クラブ・部活動紹介 */
#club .ttl {
    font-size: 2rem;
		font-weight: bold;
    letter-spacing: 1.6px;
    margin-bottom: 40px;
		padding-left: 5px;
		padding-bottom: 5px;
		position: relative;
		border-bottom: solid 2px #eaeaea;
}

#club .ttl span {
    font-size: 1.2rem;
		font-weight: normal;
    letter-spacing: 0;
		padding-left: 10px;
		vertical-align: 4px;
}

#club .ttl::after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 2px #c73c60;
bottom: -2px;
left: 0;
width: 4%;
}

#club h4 {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-style: normal;
    font-size: 1.8rem;
    letter-spacing: 0;
    margin-bottom: 5px;
		font-weight: bold;
}

#club .wrap .block-3 {
    height: 332px;
		margin-bottom: 40px;
}

#club .wrap2 .block-3 {
		height: 282px;
}

#club .wrap2 .block-3:nth-of-type(3n) {
    margin-right: 0;
}

#club .block {
    width: 50%;
    float: left;
    margin-right: 0;
    margin-bottom: 0;
}

#club .block ul {
    float: right;
    width: 49%;
}

#club .block li {
    list-style-type: disc;
    line-height: 1.6;
}

#club .concours-wrap {
		margin-bottom: 60px;
}

#club .concours-wrap img {
	width: 50%;
	height: auto;
}

#club ul.concours {
	padding: 20px;
	margin-top: 20px;
	background: #e4ecd5;
}

#club ul.concours li {
	list-style-type:none;
}

#club ul.concours li:before{
    content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #76a22d;
	margin-right: 5px;
}
#club ul.concours p{
    margin-left: 14px;
}



/* 640pxまでの幅の場合に適応される */
@media screen and (max-width: 640px) {

/*学校長挨拶 */
#messages .photo {
	width: 100%;
	float: none;
}
	
#messages .photo img {
	width: 50%;
	float: none;
}

#messages .txt {
	width: 100%;
	float: none;
}

#messages h4 {
	font-size: 3.2rem;
}


	/* 梅光学院145年の歴史*/
#history dl {
	padding: 15px 0;
	border-bottom: 1px solid #e6e6e6;
}

#history dt {
	width: 19%;
	float: left;
}

#history dd {
	width: 75%;
	float: left;
}
	
#history .block-2 img {
		width: 100%;
		height: auto;
	}

/* 施設紹介 */
#facility h4 {
	font-size: 1.6rem;
	margin-bottom: 5px;
}
	
#facility .wrap img {
	margin-bottom: 10px;
}

#facility .block img {
	display: block;
	width: 90%;
	float: none;
	margin: 10px auto 0;
	padding-right: 10px;
}

#facility .block p {
	width: 100%;
	float: none
}


/* 新制服紹介 */
#uniform .photo-L {
	width: 40%;
	float: left;
	margin-right: 20px;
}

#uniform .photo-R {
	width: 40%;
	float: right;
	margin-left: 20px;
}

/* クラブ・部活動紹介 */
	#club .ttl {
    font-size: 1.6rem;
    margin-bottom: 20px;
		padding-left: 2px;
		}

	#club .ttl span {
    font-size: 1rem;
		padding-left: 10px;
		vertical-align: 2px;
}
	
		#club .ttl::after {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 2px #c73c60;
		bottom: -2px;
		left: 0;
		width: 10%;
		}

    #club h4 {
        font-size: 1.6rem;
        margin-bottom: 5px;
    }

    #club .block {
        width: 100%;
        float: none;
        margin-right: 0;
    }

    #club .block .block-3 {
        width: 49%;
    }

    #club .block ul {
        float: right;
        width: 42%;
    }

    #club .block li {
        list-style-type: disc;
    }

   #club .concours-wrap img {
		width: 100%;
		height: auto;
}
	
	#club .wrap .block-3,
	#club .wrap2 .block-3 {
		height: auto;
    margin-bottom: 20px;
		margin-right: 4%;
}

	#club .wrap .block-3:nth-of-type(2n) {
		margin-right: 0;
}
	
#club .wrap2 .block-3:nth-of-type(2n) {
	width: 48%;
	float: left;
	margin-right: 0;	
}
	
#club .wrap2 .block-3:nth-of-type(3n) {
    margin-right: 0;
}
	
#club .wrap2 .block-3:nth-of-type(3),
	#club .wrap2 .block-3:nth-of-type(9) {
    margin-right: 4%;
}
	
#club .concours-wrap {
    margin-bottom: 30px;
}

    .first-arrow img {
        display: none;
    }

    .second-arrow img {
        display: none;
    }
    .third-arrow img {
        display: none;
    }

    .sch-number {
        display: block;
        margin-top: -25px;
    }
    .schdule-box h4 {
        margin-left: 30px;
    }
    
    .schdule-box{
    	width:100%;
    }
    .sch-number img {
    max-width: 20px;
}

.schdule-box img {
    width: 100%;
    
}

.column-august {
    border: 1px solid #3fad71;
    padding: 10px 20px;
}

.column-august .block-2 {
    width: 100%;
   float: none;
    margin-right: 4%;
    margin-bottom: 0px;
    text-align: justify;
}
.column-august .block-2:nth-of-type(2n) {
    margin-right: 0;
    width: 100%;
}

.column-january {
    border: 1px solid #7d257a;
    padding: 10px 20px;
}


.column-january .block-2 {
    width: 100%;
   float: none;
    margin-right: 4%;
    margin-bottom: 0px;
    text-align: justify;
}

.column-january .block-2:nth-of-type(2n) {
    margin-right: 0;
    width: 100%;
}
	
.column-august .photo,
.column-january .photo {
	width: 100%;
	height: auto;
}

#event .block-2 {
	margin-bottom: 10px;
}	
	
.triangle1 {
	position: absolute;
	top: -20px;
	left: 0;
	width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #3fad71;
}

.triangle2 {
	position: absolute;
	top: -20px;
	left: 0;
	width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #7d257a;
}
	

}