/* ----------------------------------
サークル各ページ用CSS
---------------------------------- */

* {
	margin : 0;
	padding : 0;	
}

body {	
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size : 80%;
	-webkit-text-size-adjust: 100%;
}

/* 共通
----------------------------------- */

p {
	line-height : 1.8;	
}

img {
	border: none;
	max-width : 100%;
	height : auto;
	-ms-interpolation-mode: bicubic;
	vertical-align : bottom;
}

.inner {
	margin : 0 auto;
	box-sizing : border-box;
}

/* header
----------------------------------- */

header {
	background : #eeeeee;
	text-align : center;
}


/* 各種タイトル
----------------------------------- */

h1 {
	letter-spacing : 1px;
	color : #184869;	
}

h2 {
	font-size : 180%;
	color : #184869;
	font-weight : normal;
	letter-spacing : 1px;
}

h3 {
	background : #eeeeee;
	padding : 15px;
	font-weight : normal;
}


/* table
----------------------------------- */

.tstyle01 {
	border-collapse : collapse;
	width : 100%;
}

.tstyle01 th {
	font-weight : normal;
	text-align : left;
	vertical-align : top;
	background : #f5f5f5;
	white-space : nowrap;
}

.tstyle01 th ,
.tstyle01 td {
	border : 1px solid #ccc;
	line-height : 1.6;
}

.profile th {
	width : 30%;
}

.schedule th {
	width : 20%;
}



/* アイコンリスト
----------------------------------- */

.icon-area {
	padding : 0 5px;
}

.icon-list {
	display : -webkit-flex;
	display : flex;
	 -webkit-justify-content: space-between;
	justify-content: space-between;

}

.icon-list li {
	list-style-type : none;
	display : inline-block;
	background : #ccc;
	text-align:center;
	border-radius : 5px;
	font-weight : bold;
	color : #ffffff;
}

.icon-list li.on {
	background : #184869;	
}

@media only screen and (min-width: 640px),print {

body {
	min-width : 880px;	
}

.inner {
	padding : 40px 0;
	width : 880px;
}


/* section
----------------------------------- */

.comment-area , .profile-area {
	display : -webkit-flex;
	display : flex;
	 -webkit-justify-content: space-between;
	justify-content: space-between;
}

.comment-area > div {
	width : 380px;
}

.comment-area > div:nth-child(2) {
	width : 460px;
}

.profile-area > div {
	width : 420px;
}

.icon-area {
	margin-bottom : 40px;	
}

h1 {
	font-size : 220%;	
}

h2 {
	margin-bottom : 20px;
}

h3 {
	font-size : 120%;
	margin-top : 50px;
	margin-bottom : 20px;
}

.tstyle01 th ,
.tstyle01 td {
	padding : 15px;
}

.icon-list li {
	font-size : 90%;
	letter-spacing : 1px;
	padding : 6px 0;
	margin-left : 5px;
	width : 7em;	
}

.icon-list li:first-child {
	margin-left : 0;	
}

}


@media print {

body {
	min-width : 900px;	
}

}


@media only screen and (max-width: 639px) {

body {
	min-width : 320px;	
}

.inner {
	padding : 30px 0;	
}

.inner {
	width : 90%;
}

.comment-area > div:first-child {
	text-align : center;
	margin-bottom : 25px;
}

.icon-area {
	margin-bottom : 25px;
}

.icon-list {
	  -webkit-flex-wrap:wrap;
	  flex-wrap:wrap;
}

.icon-list li {
	font-size : 75%;
	padding : 5px 0;
	margin-left : 1%;
	width :19%;
}


.icon-list li:first-child ,
.icon-list li:nth-child(6) {
	margin-left : 0; 
 }

.icon-list li:nth-child(n + 6) {
	margin-top : 5px;
 }


.icon-list li.on {
	display : block;	
}

h1 {
	font-size : 180%;
}

h2 {
	margin-bottom : 15px;
}

h3 {
	font-size : 110%;
	margin-top : 35px;
	margin-bottom : 15px;
}


.tstyle01 th ,
.tstyle01 td {
	padding : 10px;
}


}