@charset "utf-8";

/* 01.RESET
--------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption{ margin:0; padding:0; }
html { -webkit-text-size-adjust:none; }
img { border:0; vertical-align:bottom; }
li{ list-style: none; }
.br:before {
	content: "\A" ;
	white-space: pre ;
}

/* 02.FONT 
--------------------------------------------------- */
body {
	/*font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
	font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ", Meiryo, serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	color: #333;
	letter-spacing: 0.04em;
}

body#greeting { background:#636; }
body#message { background:#69C; }

.bold { font-weight:bold !important; }
.indent1em { text-indent:-1em; padding-left:1em; }

/* 03.LINK 
--------------------------------------------------- */
a { color:#5fdbd1; }
/* a:visited { color:#73ede3; } */
a:hover { 
	color:#5fdbd1; 
	-webkit-transition: .4s;
	transition: .4s;
	transform:/*rotate(-8deg)*/ scale(1.1);
}

.artist a { colosr:#F96}
.artist a:hover { color: #F96 }

/* 04.MARGIN 
--------------------------------------------------- */
.mt05 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb60 { margin-bottom: 60px !important; }
.noMargin { margin: 0 !important; }

/* 05.CLEARFIX 
--------------------------------------------------- */
.cf { overflow:hidden; }
.cf:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .cf { zoom:1; }
*:first-child+html .cf { zoom:1; }

/* 06.IMAGE 
--------------------------------------------------- */
.img100 { width:100%; }
img { max-width:100%; height:auto; }

/* 07.ALIGN 
--------------------------------------------------- */
.floL { display:inline; float:left; }
.floR { display:inline; float:right; }
.center { text-align:center !important; }
.right { text-align:right !important; }


/* ------------------------------------------------
   header
--------------------------------------------------- */
header{ 
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	background:rgba(255,255,255,.8);
}

body#greeting header { border-bottom: solid 5px #636; }
body#message header { border-bottom: solid 5px #69C; }
body#information header { border-bottom: solid 5px #69C; }
body#ob header { border-bottom: solid 5px #69C; }
body#student  header { border-bottom: solid 5px #F9C; }
body#ob header { border-bottom: solid 5px #963; }

header .innar:after{content: ""; display: block; clear: both; }
header .innar{ 
	display: inline-block;
	display: block;
	max-width: 1000px;
	margin: auto;
	padding: 15px 0 10px 0;
}
header .logo{
	width: 22%;
	display: inline-block;
	float: left;
	/*下記からテキスト用*/
/*
	text-align: center;
	margin-top: 30px;
*/
}
header .logo img {
	width: 100%;
	height: auto 
}
header .logo a{ text-decoration: none; }
header h1:hover{transform:scale(1.1);}
header .nav_pc{
	display: inline-block;
	float: right;
	width: 78%;
	margin-top:7px;
}
header .nav_pc ul{
	display: inline-block;
	float: left;
	width: 80%;
	margin-left: 30px
}
header .nav_pc li{
	display: inline-block;
	float: left;
	font-size: 15px;
	font-weight: bold;
	margin-top: 3%;
	margin-left: 2.5%;
	text-align: center;
	line-height: 140%;
	width:17%;
}
header .nav_pc li:nth-child(2){width: 22%;}
header .nav_pc li:first-child{ margin-left: 0;}
header .nav_pc li a{ 
	display: block;
	text-decoration: none;
	color: #333;
	font-weight:bold;
	overflow-x: hidden;
}
span.narrow {
	letter-spacing:-0.1em
}
header .nav_pc li a:hover{ 
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
body#greeting header .nav_pc li a:hover { color: #636; }
body#message header .nav_pc li a:hover { color: #69C; }
body#ob header .nav_pc { #963}

header .nav_pc li.active a{
	color: #5fcbb1;
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
	font-weight: bold
}
#information header .nav_pc li a:hover{ 
	color: #F63;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#information header .nav_pc li.active a{
	color: #F03;
}
#ob .nav_pc li a:hover{ 
	color: #963;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#ob .nav_pc li.active a{
	color: #963;
}
#student .nav_pc li a:hover{ 
	color: #F9C;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#student .nav_pc li.active a{
	color: #F9C;
}
.nav_btn{
	display: inline-block;
	float: right;
	width: 14%;
}
.nav_btn p{ text-align: center; padding:0 0 10px 0; box-shadow: none; background: none}

/*.nav_btn p:last-child{ font-weight: bold; font-family: 'Josefin Slab'; }*/
.nav_btn p a{
	display: block;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 3px;
	text-shadow:none;
	box-shadow: none
}

.nav_btn p a:hover{
	background:#FC3;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
body#greeting .nav_btn p a { background: #636; }
body#greeting .nav_btn p a:hover { background:#FC3; color: #000 }
body#message .nav_btn p a { background: #69C; }
body#message .nav_btn p a:hover { background: #69C; }

.nav_btn .mb{margin-bottom: 5px; }
.nav_sp{ display: none; }

#information .nav_btn p a{
	background:#F63;
}
#information .nav_btn p a:hover{
	background:#09C;
	transform:/*rotate(-8deg)*/ scale(1.1);
}

#ob .nav_btn p a{
	background:#963;
}
#ob .nav_btn p a:hover{
	background:#FC0;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#student .nav_btn p a{
	background:#F9C;
}
#student .nav_btn p a:hover{
	background:#96C;
	transform:/*rotate(-8deg)*/ scale(1.1);
}


/*  ------------------------------------------------
  共通
--------------------------------------------------- */
.section {
	text-align: left;
	margin-top: 180px;
	margin-bottom:100px
}
.section .innar {
	background: #fff;
	max-width:800px;
	margin: 40px auto;
	padding:30px;
	border: solid 1px #aaa;
	box-shadow: 3px 0 10px #fff, -3px 0 10px #fff
}
h1 {
margin: 10px 0 20px 0
}
h2{
	font-size:2em;
	margin-top: 60px;
	margin-bottom:15px;
	line-height: 120%
}
h2.mt30 {
	margin-top:30px	
}

section img {
	margin-bottom:20px	
}

/* .home p, .message1 p, .message2 p, .message3 p, .message4 p, .message5 p, .message6 p, .message7 p, .message8 p, .message9 p, .message10 p { */
p {
	line-height: 30px;
	color: #000;
	padding:10px 10px 0 20px;
}
p.shomei {
	font-size: 18px;
	text-align: right	
}
p.pt10 {
	padding-top:20px;
	border-radius: 50px 0 0 0;
	box-shadow: 0 -5px #66CCFF
}
.pb10 {
	padding-bottom:20px	;
	border-radius: 0 0 50px 0;
	box-shadow: 0 5px #FFCC33
}
.ptb10 {
	padding-top:20px;
	padding-bottom:20px	;
	border-radius: 50px 0 50px 0;
	box-shadow: 0 -5px #66CCFF, 0 5px #FFCC33
}

/*  ------------------------------------------------
   information
---------------------------------------------------*/ 
.information_area{
	background:url(../img/artist/mainimg07.jpg) center repeat-y;
	background-size: cover;
	margin-top: 125px;
	margin-bottom: -35px;
	padding-top: 40px;
	padding: 30px;
	text-align: center
}
information_area .innar{
	width: 970px;
	margin: 70px auto; 
}
.information_area .block:after{content: ""; display: block; clear: both; }
.information_area .block{ 
	display: inline-block; 
	background: url(../img/freedom/pback2.png); 
	box-shadow: 3px 3px 4px #999;
	padding: 20px; 
	margin-bottom:50px;
}
.information_area p { 
	background: none; 
	color: #000; 
	text-shadow: none; 
	line-height: 20px
}
.information_area h2 {
	margin: 20px auto;
	max-width: 800px	
}
.information_area h3 {
	width: 95%;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: #999;
	padding: 8px 10px 8px 20px;
	background: #333;
	color: #fff;
}
.information_area .txtbox{
	display: inline-block;
	width: 58%;
	float: right;
}
.information_area .phobox{
	display: inline-block;
	width: 40%;
	float: left;
	position: relative;
}
.information_area .phobox .photo01{
	position: absolute;
	width: 254px;
	height: 338px;
	top:0;
	left: 0;
	z-index: 1;
}
.information_area .phobox .photo02{
	position: absolute;
	width: 254px;
	height: 338px;
	top: 50px;
	right: 20px;
	z-index: 2;
}


/*  ------------------------------------------------
　STUDENT 現役高校生
------------------------------------------------- */
.student_area {
	background: url(../img/freedom/mainimg17.jpg) center repeat-y;
	background-size: cover;
	margin-top: 125px;
	margin-bottom: -40px
}
.student_area .innar{
	max-width: 1000px;
	margin: 60px auto;
	padding-bottom:90px
}
.student_area .block:after{content: ""; display: block; clear: both; }
.student_area .block{ display: inline-block; } 
.student_area .block{ display: block; }
.student_area h2{ max-width: 600px; margin:  auto; padding: 30px 30px 10px 30px}
.student_area p { background: none; color: #000; text-shadow:none }
.student_area table.club {
	border: solid 2px #999;
	border-right-width: 1px;
	border-bottom-width: 1px;
	background: #FFF;
	padding: 0;
	cell-spacing: 0;
	width: 84%;
	margin: 20px auto;
	text-aign: center
}
.student_area table.club th {
	padding: 3px;
	text-align: center;
	background: #CF9;
	border-right: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	width: 150px
}
.student_area table.club td {
	padding: 3px 3px 3px 8px;
	border-right: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	text-align: left
}
.student_area h3 {
	width: 80%;
	font-size: 24px;
	color: #000:;
	font-weight: bold;
	margin: 50px auto 10px auto;
	padding: 8px 20px;
	background: #fff;
	border-top: solid 3px #FF6699;
	border-bottom: solid 3px #FF6699
}

/*  ------------------------------------------------
  OB
--------------------------------------------------- */
.ob_area{
	background: url(../img/freedom/mainimg08.jpg) center repeat-y;
	background-size: cover;
	height: 700px;
	margin-top: 125px
}
.ob_area .innar{
	max-width: 1000px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
}
.ob_area h2{ max-width: 250px; margin:  auto; padding: 40px 30px 30px 30px}
.ob_area p { width: 80%; max-width: 700px; padding: 30px; background: #FFF; margin: 0 auto}

/*  ------------------------------------------------
   contact
--------------------------------------------------- */
.contact{
	background: url(../img/freedom/mainimg02_flower.png) left top no-repeat ,
				url(../img/freedom/mainimg06.png) center no-repeat;
	background-size: auto 50% ,cover;
	
}
.contact .innar{ max-width: 1000px; margin: 0 auto; }
.contact h1{ max-width: 150px; margin-bottom: 40px; }

/*  ------------------------------------------------
   access
--------------------------------------------------- */
.access{
	background: url(../img/top/mainimg07.png) center no-repeat;
	background-size: cover;
}
.access .innar{
	max-width: 1000px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
}

.access h1{
	max-width: 366px;
	margin: 37px auto;
}
.access p{ font-size: 18px; line-height: 31px; }
.access iframe{
	margin-top: 40px;
	width: 100%;
	height: 287px;
}

/*  ------------------------------------------------
   footer
--------------------------------------------------- */
footer { 
	position: fixed;
	z-index: 3;
	bottom: 0;
	left: 0;
	width: 100%;
	background:#61d7c7
}

body#message footer { background:#F66; }

#information footer {background:#F63}
#ob footer { background:#963; }
#student footer{ background:#F9C;}

footer .innar:after{content: ""; display: block; clear: both; }
footer .innar{ 
	display: inline-block;
	max-width: 1000px;
	margin: auto;
	padding: 0;
}

footer .address {
	color: #fff;
	float: right;	
	width: 50%;
	margin: 10px;
	text-align: right
}

footer .nav_pc{
	display: inline-block;
	float: left;
	width: 45%;
	margin-top:0;
}

footer .nav_pc ul{
	display: inline-block;
	width: 100%;
	margin:10px
}

footer .nav_pc li:first-child {
	border-left: solid 1px #FFF
}

footer .nav_pc li{
	display: inline-block;
	float: left;
	font-size: 14px;
	margin-left: 2%;
	text-align: center;
	line-height: 140%;
	font-weight: bold;
	width:29%;
	border-right: solid 1px #FFF
}

footer .nav_pc li:first-child{ margin-left: 0;}
footer .nav_pc li a{ 
	display: block;
	text-decoration: none;
	overflow-x: hidden;
 	color: #FFF; 
}
#greeting footer { background:#FC3 }
#greeting footer .nav_pc li a { color: #000 }

footer .nav_pc li a:hover{ 
	color: #FF3;
	margin-top: -2px;
	-webkit-transition: .4s;
	transition: .4s;
	border-bottom: solid 2px;
	transform:/*rotate(-8deg)*/ scale(1.1);
}

.btn{
	width: 100px;
	font-size: 18px;
/*	margin: 30px auto;*/
	margin: 20px 0 40px;
	float: right;
}
.btn a {
	text-align:center;
	display: block;
	text-decoration: none;
	padding: 3px 20px 5px 20px;
	background:#6C9	;
	color: #FFF;
	border-radius: 20px;
}
.btn a:hover {
	background:#FC6	;
	transform:/*rotate(-8deg)*/ scale(1.1);
}


/* 横幅970px以下（ノートパソコン・タブレット用）
--------------------------------------------------- */

@media screen and (max-width:1060px) {
	.information_area .innar{
		width: 93%;
		margin: 30px 3% 0 1%
	}
	.information_area .block{ 
		width: 100%;
	}
}

@media screen and (min-width:0px) and (max-width:970px) {
/* ▼SP用================================================================ */

	p{ font-size: 14px; line-height: 24px; }
	.innar{
		width: 90%;
		margin: 0 auto;
		padding-right: 5%;
	}
	.information_area .block{ 
		padding: 20px
	} 
	#ob h1{
		marrgin:0
	}
	.ob_area{
		margin-top: 60px
	}
	.student_area, .information_area{
		margin-top: 90px;
	}
	#student .txtbox{
		display: block;
		width: auto;
		float:none;
		max-width: 480px;
		margin: 20px auto;
	}
	#student .phobox{
		display: block;
		width: auto;
		float:none;
		height: 210px;
		margin: auto;
	    max-width: 560px;
	    width: auto;
	}
	#student .phobox .photo03,
	#student .phobox .photo02,
	#student .phobox .photo01{ width: 70%;}
	.access h1{ margin-bottom: 20px; }	
	.access iframe{ margin-top: 20px; }	
	.access p{ font-size: 14px; line-height: 24px; }
	
	footer { padding: 0; }
	footer .logo{  }
	footer ul{ display: none; }
	footer address{
	}

	header .innar{ width: 98%; margin: 0 1%}	
	header .logo{
		width: 25%;
	}
	header .nav_pc{
		width: 75%;
	}
	header .nav_pc ul{
		width: 81%;
		margin-left: 20px
	}
	header .nav_pc li{
		margin-top: 1.5%;
		margin-left: 1.7%;
	}
	header .nav_pc li br {
		display:none	
	}
	.nav_btn{
		display: display: inline-block;
		float: right;
		width: 14%;
	}
	
	
}

@media screen and (max-width:870px) {
	header .logo{
		width: 25%;
	}
	header .nav_pc{
		width: 73%;
		margin-left:0
	}
	header .nav_pc ul{
		width: 81%;
	}
	header .nav_pc li{
		margin-left: 1%;
	}
	.student_area, .information_area{
		margin-top: 80px;
	}
	.nav_btn{
		width: 15%;
	}
}

@media screen and (max-width:808px) {
	header .nav_pc li{
		margin-top: -2px;
	}	
	.student_area, .information_area{
		margin-top: 74px;
	}
	header .logo{
		width: 25%;
	}
	header .nav_pc{
		width: 75%;
	}
	header .nav_pc ul{
		width: 80%;
		margin-left: 10px
	}
	header .nav_pc li{
		font-size: 14px;
	}
	.nav_btn{
		width: 16%;
	}
	p {
		padding:10px;
	}
}

@media screen and (max-width:720px) {
	.student_area, .information_area{
		margin-top: 67px;
	}
	.nav_btn{
		width: 17%;
	}
}

@media screen and (max-width:650px) {
	header .logo{ margin-top:-5px; width: 24%; min-width: 200px }
	.nav_btn{
		display:none;
	}
	.nav_sp{ 
		display: inline-block;
		width:20%;
		float: right;
	}
	header {
		height: 80px	
	}
	header .nav_pc{
		display:none;
	}
	.student_area, .information_area{
		margin-top: 60px;
	}
	.information_area .block {
		margin-bottom:40px	
	}
	#message .section, #greeting .section {
		margin-top:85px	
	}
}


/* ▲SP用================================================================ */
@media screen and (min-width:0px) and (max-width:600px) {
	.innar{
		width: 90%;
	}
	p {
		padding:0;
	}
}

@media screen and (min-width:0px) and (max-width:580px) {
	.innar{
		width: 88%;
	}
	footer .innar:after, footer .innar, footer .address, footer .nav_pc, footer .nav_pc ul{
		display: none;
	}
	.information_area{
		padding: 30px 10px 10px 10px
	}
	.information_area h3 {
		width: 90%
	}
	.information_area .phobox, .information_area .txtbox{
		display: inline-block;
		width: 100%;
		float: none;
		margin: 10px auto;
	}

}

@media screen and (min-width:0px) and (max-width:480px) {
	h2 br {
		display: none	
	}
}

@media screen and (min-width:0px) and (max-width:420px) {
	.innar{
		width: 86%;
		margin-left:-15px
	}
	p {
		padding:0;
	}
}

.b-a, .bar, .bar:before, .bar:after {
	transition: all .25s;
	content: "";
	position: absolute;
	right: 0;
	height: 3px;
	width: 30px;
	background: #5fdbd1;
}

#information .b-a, #information .bar, #information .bar:before, #information .bar:after  { background:#F77}
#ob .b-a, #ob .bar, #ob .bar:before, #ob .bar:after  { background:#C93}
#student .b-a, #student .bar, #student .bar:before, #student  .bar:after  { background:#F69}

.menu-collapsed {
	transition: all .25s;
	position: fixed;
	top: 10px;
	right: 9px;
	height: 36px;
	width: 36px;
	z-index: 300;
	cursor: pointer;
	color: #64beb6;
}

.menu-collapsed ul {
	transition: all 0s;
	position: fixed;
	left: -9000px;
}

.bar {
	position: fixed;
	right: 15px;
	top: 34px;
}
.bar a {color: #64beb6;}
.bar:before { top: -8px; }
.bar:after { top: 8px; }

.b-a-expanded, .menu-expanded .bar:before, .menu-expanded .bar:after {
	transition: all .25s;
  	top: 0px;
}

.menu-expanded {
  	transition: all .25s;
  	text-align: center;
  	height: 100%;
  	width: 100%;
  	border-radius: 0px;
  	top: 0;
  	right: 0;
  	background: #64beb6;
	z-index: 3002;
	color: #fff;
	filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

#information .menu-expanded { background:#F03}
#ob .menu-expanded { background:#963}
#student .menu-expanded { background:#F9C}

.menu-expanded ul {
	transition: all 0s;
	position: relative;
	left: 0;
	top: 50px; 
	bottom: 0;
	margin: auto;
	width:70%;
	z-index: 1002;
	/*font-family: 'Josefin Slab', serif;*/
	letter-spacing:0.12em!important;
}
.menu-expanded li { text-align: center; color: #FFF }
.menu-expanded li h2{
	color: #fff;
	margin: 20px auto;
	text-align: center;
	font-family: 'Josefin Slab', serif;
}
.menu-expanded a {
	transition: all .15s;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 2%;
	border-bottom: dotted 1px #fff;
}
.menu-expanded a:hover {
	font-weight: bold;
	background: #F93;
	transform:/*rotate(-8deg)*/ scale(1.1);
}

#information .menu-expanded a:hover {
	font-weight: bold;
	background: #09C;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#ob .menu-expanded a:hover {
	font-weight: bold;
	background: #FC0;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
#student .menu-expanded a:hover {
	font-weight: bold;
	background: #96C;
	transform:/*rotate(-8deg)*/ scale(1.1);
}
.menu-expanded li a { color: #FFF}
.menu-expanded .bar { background-color: transparent; transition: all .25s; }
.menu-expanded .bar:before { transform: rotate(45deg); }
.menu-expanded .bar:after { transform: rotate(-45deg); }

.animated {
  opacity: 1;
}