@charset "UTF-8";

/* ---- Fonts ---- 
@font-face { font-family: 'ヒラギノ明朝 ProN W3'; src: url("./font/ヒラギノ明朝 ProN W3.otf"); }
@font-face { font-family: 'ヒラギノ明朝 ProN W6'; src: url("./font/ヒラギノ明朝 ProN W6.otf"); }
*/

body,html{
margin:0;
padding:0;
width:100%;
height:auto;
z-index:0;
font-size:62.5%;
font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ", Meiryo, serif;
min-width:1000px;
}

img{
max-width:100%;
height:auto;
width /***/:auto;
}

/* ---- header ---- */
#smNav,.freebtn2,#footer br{display:none;}

#headerWrapper{
width:100%;
height:784px;
background: url(../img/top/topImg01.jpg) no-repeat top center;
background-size: auto 100%;
background-attachment:fixed;
background-color:#102210;
}

#header{
height:170px;
min-width:100%;
margin:0 auto;
background:rgba(255,255,255,.8);
position:relative;
z-index:1;
}

.headerInner{
width:980px;
height:17px;
margin:0 auto;
}

.headerInner h1{
width:368px;
height:66px;
margin:auto;
padding-top:8px;
transition:.5s;
}

.headerInner h1:hover{transform:scale(1.1);}

#nav{
padding-top:43px;
text-align:center;
}

#nav ul{
height:20px;
margin:0 auto;
overflow:visible;
}

#nav li{
display:inline;
height:auto;
}

#nav li::before{
content:"/";
font-size:2rem;
margin:0 0.5rem;
}

#nav li:first-child::before{content:none;}

#nav a{
color:#323232;
font-size:1.5rem;
padding:0 20px;
display:inline-block;
transition:.3s;
vertical-align:middle;
font-weight:bold
}

#nav a:hover{
color:#C33;
font-weight:bold;
transform:/*rotate(-8deg)*/ scale(1.1);
}

.headerInner .oshirase{
width:980px;
position:absolute;
margin: 0 auto;
right:0;
left:0;
margin-top:-95px;
}

#nav .oshirase a {
display:block;
position:absolute;
width:98px;
height:100px;
right:0;
top: -15px;
padding:0;
transition:none;
}

#nav .oshirase a:hover{
transform:rotate(0);
background:url(../img/top/oshirase_hover.png) no-repeat left bottom;
}

#nav .oshirase a:hover img {display:none;}

/*.nav_btn p:last-child{ font-weight: bold; font-family: 'Josefin Slab'; }*/
#header .nav_btn { position: absolute; right: 20px; top: 20px }
#nav .nav_btn p a{
	display: block;
	background: #61d7c7;
	text-decoration: none;
	padding: 5px 20px;
	margin-bottom: 8px;
}
#nav .nav_btn p a:hover{
	background:#F96;
	color: #000
}
#nav .nav_btn .mb{margin-bottom: 5px; }
#nav .nav_sp{ display: none; }

/* ---- topImg ---- */
#circle00,
#circle00 #circle01{
background-attachment:fixed;
width:100%;
top:0;
margin:0 auto;
z-index:0;
position:absolute;
}

#circleIn{
background:url(../img/top/topBack.png) 50% 0 no-repeat;
width:980px;
margin:0 auto;
padding:0 10px;
z-index:0;
position: relative;
}

#circle00,
#circle00 #circle01,
#circleIn {
height:744px;
}

#circleIn p.dai {
font-family:"ヒラギノ明朝 ProN W6","Times New Roman","游明朝",YuMincho,"Hiragino Mincho ProN","メイリオ", Meiryo, serif;
position: absolute;
color:#000;
font-size: 2.5rem;
left: 320px;
top: 300px;
font-weight: bold;
}

#circleIn dl.circle1{
text-align:center;
color:#323232;
width:400px;
top:370px;
left:37px;
position:relative;
}

#circleIn dl.circle1 dt{
color:#001674;
font-size:1.3rem;
margin-bottom:5px;
}

#circleIn dl.circle1 dd{
font-size:1.5rem;
}

#circleIn span{
display:inline-block;
width:100%;
color:#001674;
font-size:1.9rem;
font-weight:bold;
padding: 10px 0 1rem 70px
}

#circleIn a{
display:block;
color:#c8161d;
width:130px;
margin:10px auto 0;
font-size:1.2rem;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka, "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
border:1px #c8161d solid;
border-radius:1.7rem;
padding:.5rem 1rem;
background:rgba(255,255,255,.6);
transition-duration:.6s;
}

#circleIn a:hover{
display:block;
background-color:#F33;
color: #FFF;
transition-duration:.6s;
}

#circleIn dl.circle2{
text-align:center;
color:#323232;
width:380px;
top:90px;
left:435px;
position:relative;
}

#circleIn dl.circle2 dt{
color:#000;
font-size:1.9rem;
margin-bottom:4px;
line-height: 120%;
font-weight:bold
}

#circleIn dl.circle2 dd{
font-size:1.5rem;
}

#circleIn dl.circle3{
text-align:center;
color:#323232;
width:350px;
top:280px;
left:617px;
position:absolute;
}

#circleIn dl.circle3 dt{
font-weight:bold;
color:#000;
font-size:2rem;
margin-bottom:5px;
line-height: 120%;
}

#circleIn dl.circle3 dd{
font-size:1.5rem;
}

#circleIn p.proud {
position: absolute;
font-size: 2.4rem;
right: 60px;
top: 180px;
font-weight bold;
width: 100px;
line-height: 100%;
text-align: center;
color:#C36
}

/* ---- お知らせ ---- */
#information{
position:relative;
display:block;
width:100%;
height:120px;
padding:30px 0;
background:#DAD4C9;
z-index:1;
}

.newsIn{
width:960px;
height:120px;
margin:0 auto;
padding:0 10px;
border-right:1px solid #323232;
border-left:1px solid #323232;
}

.newsLeft{
width:180px;
float:left;
text-align: center
}

.newsRight{
width:680px;
float:right;
margin:0 40px 0 20px;
transition-duration:.6s;
}

.newsRight:hover{
box-shadow:0 0 6px 3px #999 inset;
transition-duration:.6s;
border-radius:5px;
}

.newsIn p{
text-align:center;
font-size:1.8rem;
line-height:120px;
color:#c8161d;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
letter-spacing:.8rem;
margin:0 auto 0 20px;
text-align: center;
border-right:1px solid #323232;
}

.newsIn p::after{
content:"";
background:url(../img/top/icon.png);
display:inline-block;
height:15px;
width:23px;
}

#news{
padding:10px 30px;
width:640px;
height:100px;
overflow:auto;
display:inline-block;
}

#news dl,#news dt,#news dd{
margin:0 auto;
padding:0;
overflow:visible;
text-align:left;
}

#news dl{
height:auto;
overflow:hidden;
font-size:1.5rem;
padding-top:10px;
color:#333;
}

#news dl:first-child{padding-top:0;}

#news dt{
width:80px;
color:#777;
clear:left;
float:left;
}

#news a{color:#333;}
#news a:hover{color:#c8161d;}

#news dd{
width:525px;
margin-left:5px;
float:left;
}

#news dd a{	text-decoration:underline;}

/* ---- メイン ---- */
#main{
position:relative;
width:100%;
display:block;
overflow:hidden;
background:#fff;
}

.content{
width:840px;
height:450px;
margin:0 auto;
padding:100px 10px;
}

#freedom, #history, #artist, #future {
position:rerative;
}

#freedom{
background:#2E3a48;
width:100%;
transition-duration:1s;
}

#freedom .content{
width:96%;
height:650px;
margin:0 auto;
text-align: center;
padding:30px 2% 100px 2%;
background:url(../img/top/mainimg14.jpg) no-repeat; background-size: cover
}

#freedom p{ color: #fff;}
#artist p{ text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 3px #fff,0 0 10px #fff,0 0 8px #fff,0 0 15px #fff;}
#history p{ text-shadow:0 0 1px #dcdcdc,0 0 1px #dcdcdc,0 0 3px #dcdcdc,0 0 10px #dcdcdc,0 0 8px #dcdcdc,0 0 15px #dcdcdc;}

h3{
font-size:2.2rem;
color:#777;
margin:24px auto 3px auto;
}

h2, h2 a{
font-weight:bold;
font-size:2.4rem;
color:#c8161d;
margin-bottom:8px;
}

h2::after{
content:"";
background:url(../img/top/koushou.png) no-repeat;
display:inline-block;
height:40px;
width:35px;
margin-left:.5rem;
}

h2 a:hover {
color: #39C
}

.content p{
font-size:1.5rem;
color:#000;
line-height:2.3rem;
}

.content p.freedomp {
font-size:1.8rem;
color:#FFF;
line-height:3rem;
}

#freedom ul.free{
width:800px;
line-height: 30px;
color: #000;
margin: 30px auto;
padding:30px 30px 15px 30px;
background: url(../img/top/pback.png);
}

#freedom li{
text-align: left;
margin-bottom: 15px;
font-size: 15px;
}

.content li:hover{opacity:.7;}

#history{
background: #e3e3ef;
width:100%;
}

#history .content{
background:url(../img/top/topImg03_s.jpg) left center no-repeat;
padding:10px 10px 200px 10px;
}

#history h2,
#history p{
text-align:right;
}

#history h3 {
text-align: right;
margin-right: 0;
margin-top:133px;
}

#history ul{
clear: both;
float: right;
margin-top:14px;
text-align:right;
}

#history p{
float: right;
width: 310px;
margin-bottom:20px;
text-align: left;
margin-right: 0
}

#history li{margin-left:8px; float: left} 
#history li:hover{
opacity:.7;
transform:translate(0,-10px);
}

#artist{
background:#fff;
width:100%;
}

#artist .content{
background:url(../img/top/topImg02_s.jpg) right center no-repeat;
}

#artist h3{margin-top: -20px;}

#artist p, #artist ul{
margin-top:14px;
font-size: 15px;
width:300px;
transition:.3s;
}

#artist li {
margin-bottom: 25px	
}

#artist li span {
font-size: 18px;
font-weight: bold;
display: block;	
}

#artist li a {
color: #000;
font-size: 13px;
width: 70px;
float: right;
text-align: center;	
display: block;
padding: 3px 8px;
background:#E8E8E8;
border: solid 1px #666
}

#artist li a:hover {
color: #fff;
background:#C06
}

#future{
background:#2E3a48;
width:100%;
transition-duration:1s;
padding-bottom:97px
}

#future .content{
width:100%;
height:450px;
margin:0 auto;
text-align: center;
padding:20px 10px 150px 10px;
background:url(../img/top/mainimg05.jpg) no-repeat;
background-size: cover
}

#future h3 { margin-top: 320px}
#future h3, #future h2, #future p{ color: #fff;}
#future p { width: 570px; margin: 20px auto; text-align: left}

/* ---- コンテンツ ---- */
#links,
#linksBtn .social_second-level{
background: #3670A6;
height:116px;
margin-bottom:101px;
width:100%;
} 

#links .content,
#linksBtn .social_second-level{
padding:0;
width:735px;
height:116px;
}

#links dl,
#linksBtn .social_second-level dl{
width:325px;
height:116px;
float:left;
}

#links dt,
#linksBtn .social_second-level dt{
clear:left;
float:left;
font-size:1.8rem;
color:#FFF;
margin-top:21px;
transition:.2s;
}

#links dt:hover,
#linksBtn .social_second-level dt:hover{
transform:rotate(15deg);
}

#links dd,
#linksBtn .social_second-level dd{
float:left;
margin:35px 0 0 10px;
}

#links dl.totop{
float:right;
font-size:1.4rem;
font-weight:bold;
padding-top:0;
margin-top: 35px;
float:right;
line-height:130%;
border-radius:10px;
width:76px; 
height:53px;
color:#FFF;
text-align:center;
background: #F93;
}

#links dl.totop dt{
margin:5px 0 5px 20px;
text-align: center
}

#links a,
#links .p2,
#linksBtn a{
font-size:1.2rem;
color:#FFF;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

#links span,
#linksBtn span{
font-size:1.8rem;
font-weight:bold;
}

#links .p2{font-weight:normal;}

#links dd:hover,
#linksBtn .social_second-level dd:hover{
opacity:.7;
}

#linksBtn{
position:fixed;
width:100%;
right:0;
bottom:0;
z-index:1;
transition-duration:.6s;
}

#linksBtn .menu{
position:relative;
width:1020px;
margin:0 auto;
}

#linksBtn .init-bottom{
font-size:1.4rem;
font-weight:bold;
position:relative;
float:right;
line-height:50px;
border-radius:10px 10px 0 0;
width:166px; 
height:50px;
color:#FFF;
text-align:center;
background: #3670A6;
margin-bottom: -50px
}

#pagetop{
font-size:1.4rem;
font-weight:bold;
position:relative;
padding-top:7px;
float:right;
line-height:130%;
border-radius:10px 10px 0 0;
width:76px; 
height:43px;
color:#FFF;
right: 30px;
bottom: 0;
text-align:center;
background: #3670A6;
}

#pagetop:hover{
background:#3CC
}

#linksBtn .social_second-level li{
width:166px;
height:116px;
background: #3670A6;
}

#linksBtn ul.social_second-level{
visibility:hidden;
opacity:0;
z-index:1;
}

/* floatクリア */
#linksBtn .menu:before,
#linksBtn .menu:after{
content:" ";
display:table;
}

#linksBtn .menu:after{clear:both;}

#linksBtn .social_second-level{
position:absolute;
top:0;
left:0;
padding:0 142.5px 0;
box-sizing:border-box;
width:100%;
color: #fff;
background: #3670A6;
transition:all .2s ease;
border-radius:10px 10px 0 0;
}

#linksBtn li.social_menu:hover ul.social_second-level{
top:-66px;
visibility:visible;
opacity:1;
}

#linksBtn li.social_menu ul.social_second-level > li{
float:left;
width:48%;
border:none;
}

a.white{color: #FFF}

/* --- フッター --- */
#footer{
position:fixed;
overflow:hidden;
width:100%;
bottom:0;
background:#C33;
z-index:100;
transition-duration:.6s;
}

.school{
margin:0 auto;
width:795px;
height:60px;
overflow:hidden;
text-align: center;
border-bottom:1px #fff solid;
padding:5px 20px;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
color:#fff;
position:relative;
}

.school00{
float:left;
margin-right:20px;
}

.school00 img{
height:60px;
width:auto;
}

.school01{float:left;}

.school01 p{font-size:1.2rem;}

.school01 .comName{
font-size:2.2rem;
font-weight:bold;
line-height:2.2rem;
color:#fff;
margin:2px 0;
}

.school02{
float:left;
margin-left:50px;
text-align:left
}

.school02 p{
font-size:1.8rem;
line-height:3rem;
}

.school02 p a{
font-size:1.8rem;
font-weight:bold;
color:#000;
}

.school02 dt{clear:left;}

.school02 dt,
.school02 dd{
float:left;
font-size:1.1rem;
}

.school02 span{letter-spacing:.6rem;}

.school02 dt::after{
content:"/";
display:inline-block;
margin:0 .7rem;
}

.copy{
position:relative;
color:#fff;
font-size:1.4rem;
height:24px;
width:100%;
text-align:center;
bottom:0;
vertical-align:bottom;
line-height:24px;
}

a[href^='tel']{color:inherit;}
a[href^='tel']:hover{color:#555;}

.next{
position: absolute;
left: 47%;
bottom: 5px;
z-index:101
}

.nextbutton {
clear:both; 
text-align: center; 
padding-top:80px;
}

.nextbutton a {
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px
}

#freedom .nextbutton {
padding-top:50px	
}

#history .nextbutton {
padding-top:40px;
}

#artist .nextbutton {
padding-top:20px;
}



@media screen and (max-width:1220px){
.headerInner .oshirase, #nav .oshirase a{
right: -10px;
top:97px;
}

#linksBtn .init-bottom{
float: right;
margin-right: 20%;
}

#freedom ul.free{
width:80%;
margin: 30px auto;
line-height: 25px
}

}

@media screen and (max-width:980px){
body,html{
min-width:100%;
}

.headerInner,
.headerInner .oshirase,
#circleIn,
#nav {
width: 96%
}

#freedom li{
width:44%;
}

#circleIn{
padding:0 20px;
}

#circleIn dl{
 margin-left: -30px
}

#circleIn p.dai {
left: 300px;
}

#circleIn p.proud {
font-size: 2.2rem;
right: 42px;
}

#nav li::before{
margin:0 1rem;
}

#nav a{
color:#323232;
font-size:1.5rem;
padding:0 1.4%;
font-weight:bold
}

#nav a:first-child {
padding-left:0	
}

#nav{
padding-top:43px;
text-align:center;
}

#nav ul{
width: 100%;
}

#freedom .content{
width:96%;
height:650px;
margin:0 auto;
text-align: center;
padding:30px 2% 100px 2%;
}

#freedom ul.free{
line-height: 22px
}

#freedom li{
width: 100%;
transition:.3s;
}

.content li img {
width: 90%;
height: auto	
}

.headerInner .oshirase, #nav .oshirase a{
right: 0;
}

#linksBtn .init-bottom{
float: right;
margin-right: 20%;
}

.newsIn{
width:98%;
height:120px;

}

.newsLeft{
width:160px;
float:left;
text-align: center
}

.newsRight{
width:65%;
}

#history .content{
width: 96%;
background-size:55%; 
background-position: 15px center;
padding:10px 2% 200px 2%;
}

#history p{
width: 40%;
margin-right: 0
}

}

@media screen and (max-width:900px){
#circleIn dl{
 margin-left: -60px
}

#circleIn p.dai {
left: 265px;
}

#circleIn p.proud {
font-size: 2.2rem;
top: 185px;
right: 0;
line-height: 110%;
}

.content {
width: 100%	
}

#artist .content {
width: 92%;
background-size:55%; 
background-position: right center;
padding:10px 2% 200px 2%;
}

#artist .inner{
width: 42%;
margin-top: 80px;
margin-left: 0
}

#artist h3 {font-size:2rem;}
#artist h2 {font-size:2.2rem;}

#artist p, #artist ul{
width:100%;
}

#linksBtn .init-bottom{
float: right;
margin-right: 30%;
}

.school{
width:100%;
}
}

@media screen and (max-width:840px){
#circleIn dl{
 margin-left: -90px
}
#circleIn p.dai {
left: 235px;
}

#circleIn p.proud {
font-size: 2rem;
}

#nav a{
color:#323232;
font-size:1.5rem;
padding:0 0.7%;
}

#nav a:first-child{
padding-left:-10px
}

#nav .info a {
display:none
}

#linksBtn .init-bottom{
float: right;
margin-right: 40%;
}

.school01 p.comName {
font-size:2rem;
}

#artist .inner{
margin-top: 60px;
}

.school02 {
margin-left: 20px	
}

.school02 p{
font-size:1.7rem;
line-height:3rem;
}

.school02 p a{
font-size:1.7rem;
}

.school02 p{
font-size:1.7rem;
line-height:3rem;
}

.school02 p a{
font-size:1.7rem;
}

#history .nextbutton {
padding-top:20px;
}

}

@media screen and (max-width:768px){
.headerInner{
width: 100%;
max-width: 768px;
margin-left:0;
}

#nav {
margin-left: -5px
}

#nav a{
color:#323232;
font-size:1.5rem;
padding:0 1.4%;
}

#headerWrapper {
height:990px;
}

#circle00,
#circle00 #circle01,
#circleIn {
width: 100%;
height:890px;
}

#circleIn{
background:none;
width:90%;
padding: 20px;
margin: 130px 4% 20px 4%;
padding:0;
}

#circleIn dl{
width:80%;
top:20px;
left:inherit;
z-index:1000;
margin:auto;
padding:20px 5%;
background:rgba(255,255,255,0.75);
}

#circleIn dt,
#circleIn dd{
font-size:1.1rem;
}

#circleIn p.dai {
font-size: 2.5rem;
left: 45px;
top: 90px;
z-index: 1002
}

#circleIn dl.circle1, #circleIn dl.circle2, #circleIn dl.circle3{
position: relative;
}

#circleIn dl.circle1{
border-radius: 30px 30px 0 0;
text-align:center;
width:90%;
top:80px;
left:7px;
}

#circleIn dl.circle2{
top:80px;
left:7px;
width: 90%;
}

#circleIn dl.circle1 br, #circleIn dl.circle2 br, #circleIn dl.circle3 br{
display: none;
}

#circleIn span{
padding: 30px 0 1rem 0;
font-size: 1.6rem; 
}

#circleIn dl.circle1 dd span br{
display: none;
margin-bottom: -20px;
}

#circleIn dl.circle2 dt, #circleIn dl.circle3 dt {
text-align: left
}

#circleIn dl.circle3{
width: 90%;
top:80px;
left:7px;
border-radius: 0 0 30px 30px;
}

#circleIn dl.circle1 dd, #circleIn dl.circle2 dd, #circleIn dl.circle3 dd{
margin-top:10px;
text-align: left
}

#circleIn a{
text-align: center
}

#circleIn p.proud {
position: relative;
color: #fff;
font-size: 3rem;
font-weight: bold;
width: 90%;
margin: 30px auto;
text-align: center;
position: absolute;
top: 620px;
}

.next{
left: 44%;
bottom: -50px;
}

.school02 p{
font-size:1.5rem;
line-height:3rem;
}

.school02 p a{
font-size:1.5rem;
}

#freedom .content{
padding:20px 2% 150px 2%;
}

#artist .inner{
margin-top: 40px;
}

}

@media screen and (max-width:700px){
#nav a{
color:#323232;
font-size:1.5rem;
padding:0 1.2%;
}

.school02 p{
font-size:1.4rem;
line-height:3rem;
}

.school02 p a{
font-size:1.4rem;
}

}

@media screen and (max-width:650px){
#headerWrapper {
height:840px;
}

#circle00,
#circle00 #circle01,
#circleIn {
width: 100%;
height:780px;
}

#circleIn {
width: 94%;
height:780px;
margin: 30px 0 0 10px;
}

#circleIn p.proud {
position: absolute;
top: 620px;
}

.next{
left: 45%;
bottom: -20px;
}

#header,#linksBtn,#topPage,.p2 {display:none;}

#smNav{
display:inherit;
height: 75px;
position:fixed;
width:100%;
top:0;
left:0;
background:rgba(255,255,255,.7);
z-index:100;
}

#smNav h1{
height:60px;
width:100%;
}

#smNav h1 a{
display:block;
width:100%;
text-align:center;
position:relative;
height:80px;
margin:0 auto;}

#smNav h1 img{
margin:10px;
width:194px;
height:auto;
position:absolute;
display:block;
}

#nav2 a{
text-align:center;
color:#000;
font-size:1.4rem;
padding:0;
display:inline-block;
transition:.3s;
}

#nav2 a:hover{
color:#000;
font-weight:bold;
}

#menu{
border-top:1px solid #fff;
width:102%;
}

#nav2{width:100%;}

#menu li{
width:49%;
float:left;
height:60px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
box-sizing:border-box;
overflow:hidden;
background:#fff;
}

#menu li:nth-child(1),
#menu li:nth-child(4),
#menu li:nth-child(7){
border-left:1px solid #fff;
}

#menu li a{
display:block;
height:auto;
line-height:60px;
width:100%;
font-size:1.4rem;
color:#323232;
text-align:center;
background:#eee;
background:#ffd300;
color:#694215
}

#smNav #menu li a:hover{
color:#fff;
background:#999;
}

#nav-toggle{
border:0;
cursor:pointer;
position:absolute;
display:block;
width:50px;
height:60px;
overflow:hidden;
background-image:url("../img/top/hamburger.gif");
background-position:center 75px;
background-color:#000;
padding:35px 0 0;
color:#000;
font-size:1rem;
top:7px;
right:7px;
z-index:1003;
transition-duration:.6s;
}

#nav-toggle:hover{transition-duration:.6s;}

#nav-toggle.active{
background-image:url("../img/top/hamburger2.gif");
transition-duration:.6s;
}

/* ---- メイン ---- */
.content{
width:90%;
padding:120px 7%;
transition-duration:1s;
}

freebtn2{
display: none	
}

#freedom .content{background: url(../img/top/topImg04_s.jpg) left bottom no-repeat;background-size:auto 100% ;}
#history .content{background:url(../img/top/mainimg03.jpg) -100px 0 no-repeat;background-size:auto 100%; }
#artist .content{background:url(../img/top/mainimg02.jpg) -200px center no-repeat;background-size:auto 100% ;}

#freedom li:hover{
opacity:.7;
transform:translate(0,-10px);
}

#freedom h3,
#history h3,
#artist h3,
#future h3{
text-align:center;
margin:5px auto 0 auto;
text-indent:-10px;
font-size: 2.4rem;
color: #FFF;
text-shadow: 2px 2px 3px #333
}

#history h3{color:#000; text-shadow:2px 2px #FFF}
#history h3::after{background:url(../img/top/iconW.png);}
#history p{text-align:left;}

h2, h2 a{
float:none;
text-shadow:2px 1px #FFF;
color: #C33;
font-size: 3rem;
margin:5px auto 15px auto;
text-align:center;
font-weight:900;
}

#freedom p,
#artist p{
text-shadow:none;
line-height: 170%;
color: #FFF;
text-shadow:2px 2px 2px #000;
font-weight: bold;
text-align: center;
font-size: 2rem
}

#history h3 {
margin-top: 50px
}

#history h2 {
text-align: center;
margin: 10px auto
}

#history p {
width: 90%;
color: #000;
font-size: 15px;
line-height: 30px;
margin: 30px auto;
padding:30px 30px 15px 30px;
background: url(../img/top/pback.png);
}

.content p{font-size:1.8rem;}

#freedom ul.free{
width: 90%;
margin: 30px auto;
padding:20px;
}

#freedom p {
color: #FFF;
font-size: 1.6rem;
line-height: 150%	
}

#artist .content {
width: 100%	
}

#artist .inner{
width: 80%;
margin: 40px auto 
}

#artist ul{
margin:30px auto 0 auto;
width:100%;
}

#artist p, #artist ul{
width:100%;
text-align: left;
font-size: 15px;
color: #FFF;
text-shadow: 2px 2px 3px #000
}

#artist p {
font-size: 17px	;
line-height: 120%
}

#artist ul a {
text-shadow: none	
}

#freedom a,
#history a{
width:100%;
height:auto;}

#future h3 { margin-top: 300px}
#future h2 { font-size: 2.8rem}
#future p { font-size: 15px; width: 80%; margin: 20px auto; text-align: left}

#linksBtn #pagetop{
right: -10px;
}

#information{
position:inherit;
width:80%;
height:auto;
padding:10px 10%;
}

.newsIn{
width:100%;
height:auto;
padding:0;
border:none;
}

.newsLeft{
width:100%;
padding:15px 0; 
border-bottom:1px solid #323232;
float:none;
}

.newsRight{
width:100%;
float:none;
margin:10px auto;
}

.newsIn p{
text-indent:30px;
border:none;
line-height:inherit;
}

#news{
padding:2%;
width:100%;
}

#news dt{
width:100%;
margin:0 auto 10px;
text-align:left;
float:none;
}

#news dd{
margin:0;
float:none;
width:100%;
}

.school02 p{
font-size:1.2rem;
line-height:2rem;
}

.school02 p a{
font-size:1.2rem;
}

.nextbutton {
padding-top:0;
}

.nextbutton a {
padding-bottom: 20px;
}

#freedom .nextbutton {
padding-top:0	
}

#history .nextbutton {
padding-top:20px	
}

}

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

#circleIn p.proud {
top: 660px;
}

.next{
bottom: -40px;
}

#artist .nextbutton {
padding-top:0;
}

}

@media screen and (max-width:560px){
#headerWrapper {
height:800px;
}
	
#circleIn p.proud {
display:none
}

.freebtn{display:none;}
.freebtn2{display:block;}

#freedom ul.free, #history ul {
max-width:90%;
margin: 30px auto;
text-align: center;
}

#footer .school{
width: 90%;
text-align:center	
}

.school00 {
margin-left: 40px
}

.school01 {
float:none;
text-aline: left	
}

.school02{
display:none
}

.next{
left: 44%;
bottom: 0;
}

}

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

body,html{min-width:inherit;}
#header,.freebtn,#linksBtn,#topPage,.p2{display:none;}

#headerWrapper{
height:870px;
min-width:inherit;
background-size:cover;
background-attachment:inherit;
margin-top:0;
}

#circle00,
#circle00 #circle01{
width: 100%;
height:730px;
}

#circleIn{
background:none;
width:95%;
padding: 15px;
height:730px;
margin: 0 0 0 -13px;
}

#circleIn p.dai {
top: 103px;
}

#links{
height:auto;
overflow:hidden;
margin:0 auto;
} 

span.white {
color: #FFF
}

#freedom h3,
#history h3,
#artist h3,
#future h3{
text-indent:0;
font-size: 2.1rem;
float: none
}

#links .content{
padding:10px 10%;
overflow:hidden;
background: #3670A6;
width:80%;
height:auto;
}

#links dl{
width:25%;
margin-right:12.5%;
height:auto;
}

#links dl:last-child{margin-right:0;}

#links dt{
float:none;
margin:0 auto;
}

#links dd{
float:none;
margin:5px 0 0;
text-align:center;
}

#links span{font-size:1rem;}

#footer{position:inherit;}
#footer .school{
height:80px;
padding:15px
}

.school00 {
margin-left: -5px
}

.school01 {
margin-left: -30px}

#footer br{display:inherit;}

.copy{
position:fixed;
font-size:1.3rem;
height:20px;
line-height:20px;
border-top:1px #fff solid;
background:#999;
}

#topPage02{
bottom:10px;
right:-127px;
height:80px;
width:127px;
}

#topPageImg02{
height:auto;
width:127px;
right:-127px;
}

#freedom ul.free {
width: 94%;
line-height: 20px;
padding: 10px
}

#topPageImg02:hover{background-size:127px auto;}

h2, h2 a{
font-size: 2.4rem
}

#freedom p,
#artist p{
font-size: 1.8rem
}

#future h3 { margin-top: 260px}

.next{
bottom: -90px;
}

#future {
margin-bottom: -100px	
}

#artist h3 {
margin-top:-20px
}

#artist ul li{
margin-bottom:15px;
}

}

@media screen and (max-width:420px){
#headerWrapper{
height:950px;
}

#circleIn span{
padding: 30px 0 1rem 0;
font-size: 15px; 
}

#circleIn dl{
width: 84%;
padding:20px 2% 20px 3%;
}
	
h2, h2 a, #future h2{
font-size: 2.3rem
}

#freedom p,
#history p,
#artist p,
#future p{
font-size: 1.5rem;
}

#history p {
line-height: 25px
}

#history ul {
width: 110% 
}

#history li {
width: 30%;
margin: 0 0 15px 8px
}

#history li img{
width: 80%;
height:auto
}

#links dl{
width:25%;
margin-right:5.5%;
height:auto;
}

.next{
left: 40%;
bottom: -150px;
}

@media screen and (max-width:375px){
#headerWrapper{
height:900px;
}

#circleIn span{
font-size: 14px; 
}

#circleIn dl{
width: 87%;
padding:20px 2% 20px 3%;
}

.next{
left: 40%;
bottom: -150px;
}

#freedom h3,
#history h3,
#artist h3,
#future h3{
text-indent:-30px;
font-size: 2.1rem;
}

#freedom p,
#history p,
#artist p,
#future p{
font-size: 1.4rem
}

}

/*  ------------------------------------------------
   artist紹介
--------------------------------------------------- */
.innar {
	max-width: 600px;
	margin: 0 auto;
}
.block {
	margin: auto;
	padding: 0;
}

button.btn-default {
	position:absolute;
	left: 45%;
	bottom:50px;
	z-index:10001;
	padding: 5px 20px;
	font-size: 15px
}

button.btn-default:hover {
	background: #3CC
}

#artist1 p, #artist2 p, #artist3  p
 {
	font-size:15px;
	color: #000
}

#artist1 h2. #artist2 h2, #artist3 h2 {
	max-width: 480px;
	margin-top: 50px;
	margin-bottom: 20px;
}

/* artist1 */
#artist1{
	position: relative;
	display: block;
	text-align: left;
	background: url(../img/artist/muraoka2.jpg) center no-repeat;
	background-size: cover;
	height: 600px
}
#artist1 .block {
	float: left;
	padding: 30px;
}
#artist1 h2 {
	margin-top: 10px;
	max-width: 320px; 
	text-shadow: 2px 2px 4px #000	
}
#artist1 p {
	color: #FFF;
	text-shadow: 2px 2px 4px #000;	
	line-height: 20px;
}
#artist1 .pic {
	width: 300px;
	position: absolute; 
	bottom: 10px; 
	right: 25px
}
#artist1 .pic img {
	width: 100%;
	height: auto	
}

/* artist2 */
#artist2 .innar  {
	background:#FFF url(../img/artist/morimura_art.jpg) right 90px no-repeat;
	background-size:32%;
	max-width: 600px;
	height: 670px;
	margin: 0 auto;
	padding: 20px 0 20px 20px;
}
#artist2 .block {
	width: 380px;
	position: absolute; 
	top: 80px; 
	left: 20px
}
#artist2 h2 {
	margin-top:0;
	margin-bottom:20px;	
}
#artist2 p {
	line-height: 18px;	
}
#artist2 img.flL {
	float: left;
	margin: 0 5px 5px 0
}
#artist2 img.flL {
	width: 150px;
	height: auto	
}
#artist2 button.btn-default {
	bottom:15px;
}

/* artist3 */
#artist3{
	position: relative;
	background:url(../img/artist/mizuno1.jpg) center bottom no-repeat;
	background-size: 100%;
	padding: 20px;
	height: 490px
}
#artist3 .block{
	position: absolute;
	max-width: 600px;
	top: 80px;
	left: 20px;
}
#artist3 h2 {
	margin: 0 0 20px 0;	
	max-width: 450px; 
}
#artist3 p {
	line-height: 22px
}
#artist3 img.flR {
	float: right;
	margin: 0 0 5px 5px
}
#artist3 img.flR {
	width: 200px;
	height: auto	
}
#artist3 button.btn-default {
	bottom:-50px;
}