@charset "UTF-8";

/*
Theme Name: 森猫堂
*/

/*全体
--------------------------------------------------------------------------*/
html {
    scroll-padding-top: 240px;
}
@media only screen and (max-width: 1080px) {
html {
    scroll-padding-top:180px;
}
}
@media only screen and (max-width: 835px) {
html {
    scroll-padding-top:200px;
}
}
@media only screen and (max-width: 640px) {
html {
    scroll-padding-top:120px;
}
}
@media only screen and (max-width: 480px) {
html {
    scroll-padding-top:110px;
}
}

body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:20px;
    font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 2000px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#00b5d1;
	font-weight: 500;
}

a:hover{
	outline:0;
	color: #00b5d1;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,br.spm,.nst,.nss,br.smm3{
	display:none;
}
@media only screen and (max-width: 1280px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm,br.smm3{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm,.nsm2,br.smm3{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 480px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2,br.smm3{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss,br.smm3{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(https://musicmindgamesjapan.com/image/header.png) no-repeat 98% bottom,#38b6ff;
text-align: left;
position: sticky;
top:0;
left: 0;
z-index: 9999;
display: flex;
align-items: flex-end;
}
header img.logo{
max-width: 100%;
padding: 10px 0 10px 10px;
}
@media only screen and (max-width: 1080px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(https://musicmindgamesjapan.com/image/header.png) no-repeat 98% bottom/8%,#38b6ff;
text-align: center;
position: sticky;
top:0;
left: 0;
z-index: 9999;
display: inherit;
}
header img.logo{
max-width: 100%;
max-height: 100px;
}
@media only screen and (max-width: 850px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(https://musicmindgamesjapan.com/image/header.png) no-repeat 98% bottom/10%,#38b6ff;
text-align: center;
position: sticky;
top:0;
left: 0;
z-index: 9999;
display: inherit;
}
header img.logo{
max-width: 100%;
max-height: 100px;
}
}
}
@media only screen and (max-width: 640px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: none;
background: #38b6ff;
text-align:center;
display: inherit;
}
header img.logo{
max-width: 100%;
max-height: 100px;
}
}
@media only screen and (max-width: 414px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: none;
background: #38b6ff;
text-align:center;
display: inherit;
}
}

menu{
clear: none;
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 0 0 0 2%;
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 10px;
text-align: left;
display: flex;
align-items: center;
flex-wrap: wrap;
}
menu li{
list-style-type: none;
margin: 0 2% 0 0;
padding: 0;
text-align: center;
font-size: 17px;
line-height: 100%;
color: #fff;
font-weight: 400;
flex: 0 0 auto;
}
menu li.bno{
}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #fff;
font-weight: 400;
}
menu li a:hover{
color: #fff200;
}
menu img{
max-width: 40px;
}
menu #menu-ipad{
display: none;
}
@media only screen and (max-width: 1080px) {
menu{
clear: none;
float: right;
width:100%;
height: auto;
margin: 0;
padding: 0 8% 0 2%;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 10px;
text-align: left;
display: inherit;
align-items: center;
flex-wrap: wrap;
}
menu li{
float: left;
list-style-type: none;
margin: 10px 3% 0 0;
padding: 0;
text-align: center;
font-size: 16px;
line-height: 100%;
color: #fff;
font-weight: 400;
flex: auto;
}
}
@media only screen and (max-width: 835px) {
menu li.bno{
display: none;
}
menu #menu-ipad{
display: inherit;
clear: both;
float: left;
width: 100%;
text-align: left;
}
menu #menu-ipad li.bno{
display:inherit;
}
}
@media only screen and (max-width:640px) {
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
position: fixed;
top: 0;
background: rgba(17,36,85,0.9);
}
menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-bottom: none;
border-top:1px solid #fff;
}
menu li{
float: none;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 17px;
line-height: 100%;
flex: 0 0 auto;
color: #fff;
font-weight: 400;
}
menu li.bno{
float: left;
width: 33.3%;
}
menu li a:link,menu li a:visited{
display: block;
height: auto;
text-decoration: none;
color: #fff;
font-weight: 400;
line-height: 100%;
padding: 0;
border-left:none;
border-bottom:1px solid #fff;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 25px 0 25px;
text-align: center;
line-height: 100%;
font-size: 17px;
}
menu li.bno a:link,menu li.bno a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 15px 0 15px;
text-align: center;
line-height: 100%;
font-size: 17px;
}
menu li a:hover{
text-decoration: underline;
}
menu img{
max-width: 50px;
}
@media only screen and (max-width: 640px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 25px 0 25px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(https://musicmindgamesjapan.com/image/menu-li2.png) no-repeat center 10px/2%;
}
}
@media only screen and (max-width: 480px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 20px 0 20px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(https://musicmindgamesjapan.com/image/menu-li2.png) no-repeat center 10px/3%;
}
}
@media only screen and (max-width: 414px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 20px 0 20px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(https://musicmindgamesjapan.com/image/menu-li2.png) no-repeat center 10px/4%;
}
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#0e71c6;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}

/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:-1px;
  left:-0px;
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#photo img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 300px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/40%;
}
main img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 200px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/45%;
}
}
@media only screen and (max-width: 835px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 200px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/50%;
}
}
@media only screen and (max-width: 640px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 150px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/90%;
}
}
@media only screen and (max-width: 480px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/90%;
}
}
@media only screen and (max-width: 414px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 80px;
background: url(https://musicmindgamesjapan.com/image/main.png) no-repeat center bottom/90%;
}
}

#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 10% 80px 15%;
background: #f3f3f3;
text-align: left;
}
@media only screen and (max-width: 1440px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 5% 80px 10%;
background: #f3f3f3;
text-align: left;
}
}
@media only screen and (max-width: 1280px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 5% 80px 5%;
background: #f3f3f3;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 5% 70px 5%;
background: #f3f3f3;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 2% 0px 2%;
background: #f3f3f3;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 1% 0px 1%;
background: #f3f3f3;
text-align: center;
}
}

#info img{
float: right;
max-width: 50%;
}
#info img.bno{
margin: 30px 0 0;
}
@media only screen and (max-width: 1280px) {
#info img{
float: right;
max-width:40%;
}
}
@media only screen and (max-width: 1080px) {
#info img{
float: none;
max-width:80%;
margin: 0 10%;
}
}
@media only screen and (max-width: 640px) {
#info img{
float: none;
max-width:90%;
margin: 0;
}
}
@media only screen and (max-width: 414px) {
#info img{
float: none;
max-width:100%;
}
}

#info-box{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0;
padding: 0;
}
#info #info-box img{
float: none;
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#info-box{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 0 2% 0 0;
}
}
@media only screen and (max-width: 1080px) {
#info-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
}
}
@media only screen and (max-width: 414px) {
#info-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
}

#info h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 40px;
padding: 0;
text-align: left;
font-weight: 900;
font-size: 30px;
color: #0e72c4;
}
#info p{
text-align: left;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 20px;
}
#info p strong{
font-size: 1.1em;
color: #0e72c4;
}
@media only screen and (max-width: 1280px) {
#info p{
text-align: left;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 17px;
}
}
@media only screen and (max-width: 1080px) {
#info h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 40px;
padding: 0;
text-align: center;
font-weight: 900;
font-size: 30px;
color: #0e72c4;
}
#info p{
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#info h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 40px;
padding: 0;
text-align: left;
font-weight: 900;
font-size: 25px;
color: #0e72c4;
}
#info p{
text-align: left;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#info h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 20px;
padding: 0;
text-align: center;
font-weight: 900;
font-size: 22px;
color: #0e72c4;
}
#info p{
text-align:center;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 14px;
}
#info p.bno,#info img.bno{
display: none;
}
}
@media only screen and (max-width: 414px) {
#info h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 15px;
padding: 0;
text-align:center;
font-weight: 900;
font-size: 20px;
color: #0e72c4;
}
#info p{
text-align: center;
line-height: 200%;
margin: 0;
padding: 0;
font-size: 13px;
}
}

#topics{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}

#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size: 150px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
@media only screen and (max-width: 1440px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size: 120px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 1080px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size: 90px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 835px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size: 75px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 640px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size:55px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 480px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size:45px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 414px) {
#topics h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: right;
font-size:40px;
line-height: 100%;
border-bottom:1px solid #0e72c4;
color: #eff5fc;
font-weight: 300;
}
}

#topics-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10%;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 1280px) {
#topics-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 1080px) {
#topics-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 4%;
display: flex;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 480px) {
#topics-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 4%;
display: inherit;
flex-wrap: wrap;
}
}

.topics-box{
flex: 1;
margin: 0 2% 50px;
flex-basis:29.3%;
position: relative;
}
.topics-box img{
width: 100%;
height: 100%;
}
@media only screen and (max-width: 1080px) {
.topics-box{
flex: 1;
margin: 0 1% 20px;
flex-basis:31.3%;
position: relative;
}
}
@media only screen and (max-width: 835px) {
.topics-box{
margin: 0 1% 20px;
flex-basis:48%;
position: relative;
flex-grow: 0;
}
}
@media only screen and (max-width: 480px) {
.topics-box{
margin: 0 0% 40px;
flex-basis:100%;
position: relative;
flex-grow: 0;
width: 100%;
}
}

.topics-text{
width: 100%;
height: auto;
margin: 0;
padding: 15px 0;
background: url(https://musicmindgamesjapan.com/image/topics-back.png) no-repeat center bottom/100% 100%;
position: absolute;
bottom: 0;
left:0;
}
.topics-text p{
margin: 0;
padding: 0;
font-size: 25px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
@media only screen and (max-width: 1280px) {
.topics-text p{
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
}
@media only screen and (max-width: 1080px) {
.topics-text{
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
background: url(https://musicmindgamesjapan.com/image/topics-back.png) no-repeat center bottom/100% 100%;
position: absolute;
bottom: 0;
left:0;
}
.topics-text p{
margin: 0;
padding: 0;
font-size: 17px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
}
@media only screen and (max-width: 835px) {
.topics-text{
width: 100%;
height: auto;
margin: 0;
padding: 15px 0;
background: url(https://musicmindgamesjapan.com/image/topics-back.png) no-repeat center bottom/100% 100%;
position: absolute;
bottom: 0;
left:0;
}
}
@media only screen and (max-width: 640px) {
.topics-text{
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
background: url(https://musicmindgamesjapan.com/image/topics-back.png) no-repeat center bottom/100% 100%;
position: absolute;
bottom: 0;
left:0;
}
.topics-text p{
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
.topics-text{
width: 100%;
height: auto;
margin: 0;
padding: 15px 0;
background: url(https://musicmindgamesjapan.com/image/topics-back.png) no-repeat center bottom/100% 100%;
position: absolute;
bottom: 0;
left:0;
}
.topics-text p{
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 400;
text-align: center;
line-height: 100%;
}
}

#sns{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
border-top:1px solid #0e72c4;
}

#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -20px 0 50px;
padding: 0;
text-align:left;
font-size: 150px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
@media only screen and (max-width: 1440px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -10px 0 50px;
padding: 0;
text-align:left;
font-size: 120px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 1080px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -10px 0 50px;
padding: 0;
text-align:left;
font-size: 90px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 835px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -10px 0 50px;
padding: 0;
text-align:left;
font-size: 75px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 640px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -5px 0 50px;
padding: 0;
text-align:left;
font-size: 55px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 480px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -5px 0 50px;
padding: 0;
text-align:left;
font-size: 45px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}
@media only screen and (max-width: 414px) {
#sns h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -5px 0 50px;
padding: 0;
text-align:left;
font-size: 40px;
line-height: 100%;
color: #eff5fc;
font-weight: 300;
}
}

#news{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 0 5% 0 10%;
}
@media only screen and (max-width: 1440px) {
#news{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 0 5% 0 5%;
}
}
@media only screen and (max-width: 1080px) {
#news{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0;
padding: 0 5% 0 5%;
}
}
@media only screen and (max-width: 640px) {
#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 5% 0 5%;
}
}

#news h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 35px;
font-weight: 700;
color: #0e72c4;
}

#news ul.wp-news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#news li{
clear: both;
float: left;
width: 100%;
font-size: 17px;
line-height: 150%;
margin: 0 0 15px;
padding: 0;
list-style-type: none;
text-align: left;
font-weight: 300;
}
#news li h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 15px;
text-align: left;
font-size: 17px;
font-weight: 400;
border-bottom:1px solid #9ec3bc;
}
#news li a:link,#news li a:visited{
text-decoration: none;
color: #111;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 15px;
text-align: left;
font-size: 17px;
font-weight: 400;
border-bottom:1px solid #9ec3bc;
}
#news li a:hover{
color: #0e72c4;
}
@media only screen and (max-width: 1080px) {
#news li{
clear: both;
float: left;
width: 100%;
font-size: 15px;
line-height: 150%;
margin: 0 0 15px;
padding: 0;
list-style-type: none;
text-align: left;
font-weight: 300;
}
#news li h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 15px;
text-align: left;
font-size: 15px;
font-weight: 400;
border-bottom:1px solid #9ec3bc;
}
}
@media only screen and (max-width: 480px) {
#news li{
clear: both;
float: left;
width: 100%;
font-size: 14px;
line-height: 150%;
margin: 0 0 10px;
padding: 0;
list-style-type: none;
text-align: left;
font-weight: 300;
}
#news li h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 10px;
text-align: left;
font-size: 14px;
font-weight: 400;
border-bottom:1px solid #9ec3bc;
}
}

#news p span{
clear: both;
float: right;
text-align: right;
font-size: 15px;
border: 1px solid #111;
padding: 0;
line-height: 100%;
}
#news p a:link,#news p a:visited{
display: block;
text-decoration: none;
color: #111;
padding: 10px 15px;
}
#news p a:hover{
background: #38b6ff;
color: #fff;
}
@media only screen and (max-width: 480px) {
#news p span{
clear: both;
float: right;
text-align: right;
font-size: 13px;
border: 1px solid #111;
padding: 0;
line-height: 100%;
}
#news p a:link,#news p a:visited{
display: block;
text-decoration: none;
color: #111;
padding: 10px 25px;
}
#news p a:hover{
background: #38b6ff;
color: #fff;
}
}

#fb{
float: right;
width: 40%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
}
@media only screen and (max-width: 1080px) {
#fb{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
}
}

@media only screen and (max-width: 640px) {
#fb{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 0;
text-align: center;
}
}
	 
.fb-page,
.fb-page span,
#fb iframe{
width: 100% !important;
height: 500px !important;
}

#line{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
text-align: center;
}
#line img{
max-width: 100%;
}
@media only screen and (max-width: 480px) {
#line{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 5%;
text-align: center;
}
}

table {
	clear:both;
	width:100%;
	margin:5px 0 20px;
    border:0;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
}

th{
	width:30%;
	text-align:left;
	font-weight: normal;
	border:0;
	padding: 15px;
	font-size: 17px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
	}
td{
	border:0;
	padding: 15px;
	font-size: 17px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
@media only screen and (max-width: 1080px) {
th{
	width:30%;
	text-align:left;
	font-weight: normal;
	border:0;
	padding: 10px;
	font-size: 15px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
	}
td{
	border:0;
	padding: 10px;
	font-size: 15px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
}
@media only screen and (max-width: 835px) {
th{
	width:30%;
	text-align:left;
	font-weight: normal;
	border:0;
	padding: 10px;
	font-size: 14px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
	}
td{
	border:0;
	padding: 10px;
	font-size: 14px;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
}
@media only screen and (max-width: 640px) {
th{
clear: both;
float: left;
	width:100%;
	text-align:left;
	font-weight: normal;
	border:0;
	padding: 10px 10px 10px;
	font-size: 14px;
border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
	}
td{
clear: both;
float: left;
width: 100%;
	border:0;
	padding: 5px 10px 10px;
	font-size: 14px;
border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
}

#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 15% 80px;
background: url(https://musicmindgamesjapan.com/image/h1.png) no-repeat right bottom/60%,#f3f3f3;
border-bottom:1px solid #0e72c4;
text-align: left;
font-size: 40px;
color: #0e72c4;
font-weight: 500;
line-height: 100%;
}
@media only screen and (max-width: 1080px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 10% 60px;
background: url(https://musicmindgamesjapan.com/image/h1.png) no-repeat right bottom/60%,#f3f3f3;
border-bottom:1px solid #0e72c4;
text-align: left;
font-size: 35px;
color: #0e72c4;
font-weight: 500;
line-height: 100%;
}
}
@media only screen and (max-width: 835px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 5% 50px;
background: url(https://musicmindgamesjapan.com/image/h1.png) no-repeat right bottom/60%,#f3f3f3;
border-bottom:1px solid #0e72c4;
text-align: left;
font-size: 35px;
color: #0e72c4;
font-weight: 500;
line-height: 100%;
}
}
@media only screen and (max-width: 640px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 5% 40px;
background: url(https://musicmindgamesjapan.com/image/h1.png) no-repeat right bottom/60%,#f3f3f3;
border-bottom:1px solid #0e72c4;
text-align: left;
font-size: 35px;
color: #0e72c4;
font-weight: 500;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 5% 40px;
background: url(https://musicmindgamesjapan.com/image/h1.png) no-repeat right bottom/60%,#f3f3f3;
border-bottom:1px solid #0e72c4;
text-align: left;
font-size: 30px;
color: #0e72c4;
font-weight: 500;
line-height: 100%;
}
}

#sub-page article{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 15% 0px;
}
@media only screen and (max-width: 1440px) {
#sub-page article{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 5% 0px;
}
}
@media only screen and (max-width: 835px) {
#sub-page article p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
#sub-page article p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#sub-page article p{
font-size: 16px;
}
}

#work{
}
#work h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-weight:700;
font-size: 35px;
line-height: 120%;
}
#work h2 span{
color: #0e72c4;
}
@media only screen and (max-width: 640px) {
#work h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;

font-weight:700;
font-size: 30px;
line-height: 120%;
}
}
@media only screen and (max-width: 480px) {
#work h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0px;
padding: 0;
text-align: left;
font-weight:700;
font-size: 25px;
line-height: 120%;
}
}

#work-info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
}
@media only screen and (max-width: 1080px) {
#work-info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display:inherit;
}
}

#work-text{
border: 5px solid #fff200;
text-align: center;
padding: 20px 3%;
flex-basis:42%;
}
@media only screen and (max-width: 1280px) {
#work-text{
border: 5px solid #fff200;
text-align: center;
padding: 15px 2%;
}
}
@media only screen and (max-width: 1080px) {
#work-text{
clear: both;
float: left;
width: 100%;
border: 5px solid #fff200;
text-align: center;
padding: 15px 2% 15px;
flex-basis:100%;
}
}
@media only screen and (max-width: 480px) {
#work-text{
display: none;
}
}

#work-text a:link,#work-text a:visited{
display: block;
border-radius: 50px;
background: #0066b3;
color: #fff;
text-decoration: none;
font-size: 20px;
line-height: 100%;
padding: 15px 0;
}
#work-text a:hover{
background: #38b6ff;
}

#work-text a.linea:link,#work-text a.linea:visited{
display: block;
border-radius: 50px;
background: #06c755;
color: #fff;
text-decoration: none;
font-size: 20px;
line-height: 100%;
padding: 15px 0;
}
#work-text a.linea:hover{
background: #068a3c;
}

#work-text2,#work-text3{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 50px 20% 0;
border: 5px solid #fff200;
text-align: center;
padding: 20px 3% 20px;
}
@media only screen and (max-width: 640px) {
#work-text2,#work-text3{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 40px 10% 20px;
border: 5px solid #fff200;
text-align: center;
padding: 20px 3% 20px;
}
}
@media only screen and (max-width: 480px) {
#work-text2,#work-text3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0% 20px;
border: 5px solid #fff200;
text-align: center;
padding:20px 3% 20px;
}
}

#work-text2 a:link,#work-text2 a:visited{
display: block;
float: left;
width: 100%;
border-radius: 50px;
background: #0066b3;
color: #fff;
text-decoration: none;
font-size: 20px;
line-height: 100%;
margin: 5px 0% 15px;
padding: 15px 0;
}
#work-text2 a:hover{
background: #38b6ff;
}
#work-text3 a:link,#work-text3 a:visited{
display: block;
float: left;
width: 31.3%;
border-radius: 50px;
background: #0066b3;
color: #fff;
text-decoration: none;
font-size: 20px;
line-height: 100%;
margin: 5px 1% 15px;
padding: 15px 0;
}
#work-text3 a:hover{
background: #38b6ff;
}

#work-text2 a.linea:link,#work-text2 a.linea:visited,#work-text3 a.linea:link,#work-text3 a.linea:visited{
display: block;
width: 100%;
border-radius: 50px;
background: #06c755;
color: #fff;
text-decoration: none;
font-size: 20px;
line-height: 100%;
margin: 0;
padding: 15px 0;
}
#work-text2 a.linea:hover,#work-text3 a.linea:hover{
background: #068a3c;
}

#work-pict{
margin: 0 0 0 3%;
flex-basis:55%;
}
#work-pict img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#work-pict{
clear: both;
float: left;
width: 100%;
margin: 30px 0 0;
flex-basis:100%;
}
}

#work h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0px;
padding: 15px 0;
border-radius: 7px;
background: #f3f3f3;
font-size: 25px;
font-weight: 500;
line-height: 100%;
border: 2px solid #0066b3;
text-align: left;
text-indent: 1em;
color: #0066b3;
}
@media only screen and (max-width: 640px) {
#work h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0px;
padding: 15px 3%;
border-radius: 7px;
background: #f3f3f3;
font-size: 25px;
font-weight: 500;
line-height: 100%;
border: 2px solid #0066b3;
text-align: left;
text-indent:0em;
color: #0066b3;
}
}

.work-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
.work-box p{
text-align: left;
}


h4#hissu-book-h{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding: 0 0 10px;
line-height: 100%;
text-align: left;
font-weight: 500;
font-size: 30px;
border-bottom: 1px solid #666;
}
@media only screen and (max-width: 835px) {
h4#hissu-book-h{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 30px;
padding: 0 0 10px;
line-height: 100%;
text-align: left;
font-weight: 500;
font-size: 30px;
border-bottom: 1px solid #666;
}
}
@media only screen and (max-width: 640px) {
h4#hissu-book-h{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 30px;
padding: 0 0 10px;
line-height: 100%;
text-align: left;
font-weight: 500;
font-size: 25px;
border-bottom: 1px solid #666;
}
}

#hissu-book{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}

.hissu-box{
flex: 1;
margin: 0 1% 30px;
padding: 25px 2%;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
flex-basis:31.3%;
flex-grow: 0;
}
@media only screen and (max-width: 835px) {
.hissu-box{
flex: 1;
margin: 0 1% 25px;
padding: 20px 2%;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
flex-basis:48%;
flex-grow: 0;
}
}
@media only screen and (max-width: 640px) {
.hissu-box{
flex: 1;
margin: 0 1% 20px;
padding: 15px 2%;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
flex-basis:48%;
flex-grow: 0;
}
}
@media only screen and (max-width: 480px) {
.hissu-box{
flex: 1;
margin: 0 0% 20px;
padding: 15px 2%;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
flex-basis:100%;
flex-grow: 0;
}
}

.hissu-box img{
max-width: 100%;
margin: 0 0 15px;
border-radius: 10px;
}

.hissu-box p{
font-size: 20px;
font-weight: 700;
margin: 0 0 15px;
padding: 0 0 5px;
text-align: center;
border-bottom: 1px solid #666;
}
.hissu-box p span{
font-size: 15px;
}

.hissu-box ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.hissu-box li{
margin: 0 0 10px 5%;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 100%;
}
@media only screen and (max-width: 640px) {
.hissu-box li{
margin: 0 0 10px 8%;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 100%;
}
}

.work-list{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
@media only screen and (max-width: 835px) {
.work-list{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
}

.work-list ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.work-list li{
list-style-type: none;
border-bottom: 1px solid #111;
margin: 0 1% 25px;
padding: 0 1% 10px;
flex: 1;
flex-basis:98%;
flex-grow: 0;
text-align: left;
font-size: 20px;
}
@media only screen and (max-width: 835px) {
.work-list li{
list-style-type: none;
border-bottom: 1px solid #111;
margin: 0 1% 25px;
padding: 0 1% 10px;
flex: 1;
flex-basis:98%;
flex-grow: 0;
text-align: left;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
.work-list li{
list-style-type: none;
border-bottom: 1px solid #111;
margin: 0 1% 15px;
padding: 0 1% 10px;
flex: 1;
flex-basis:98%;
flex-grow: 0;
text-align: left;
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
.work-list li{
list-style-type: none;
border-bottom: 1px solid #111;
margin: 0 1% 10px;
padding: 0px 2% 10px;
flex: 1;
flex-basis:98%;
flex-grow: 0;
text-align: left;
font-size: 16px;
}
}

#work .work-list li h2{
font-size: 20px;
margin: 0;
padding: 0;
text-align: left;
font-weight: 400;
}
@media only screen and (max-width: 835px) {
#work .work-list li h2{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
#work .work-list li h2{
font-size: 16px;
}
}

.work-list a:link,.work-list a:visited{
color: #111;
text-decoration: none;
}
.work-list a:hover{
color: #0066b3;
}

.work-list-end{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0 0 80px;
}
#sub-page .work-list-end h4{
text-align: left;
font-size: 20px;
border-left: 20px solid #38b6ff;
padding: 0 0 0 10px;
}

.work-set{
}
.accordion-area .work-set p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0 0 10px;
text-align: left;
font-size: 17px;
line-height: 100%;
border-left:none;
text-indent: 2.5em;
font-weight: 500;
}
@media only screen and (max-width: 640px) {
.accordion-area .work-set p{
padding: 0 0 10px 30px;
text-indent:0px;
}
}

.work-list-end ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.work-list-end li{
list-style-type: none;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 1% 25px;
padding: 5px 1% 10px;
flex: 1;
flex-basis:31.3%;
flex-grow: 0;
text-align: left;
font-size: 17px;
color: #666;
}
@media only screen and (max-width: 835px) {
.work-list-end li{
list-style-type: none;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 1% 25px;
padding: 0 1% 10px;
flex: 1;
flex-basis:48%;
flex-grow: 0;
text-align: left;
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
.work-list-end li{
list-style-type: none;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 1% 15px;
padding: 0 1% 10px;
flex: 1;
flex-basis:48%;
flex-grow: 0;
text-align: left;
font-size: 15px;
}
}
@media only screen and (max-width: 480px) {
.work-list-end li{
list-style-type: none;
border: 1px solid #ddd;
border-radius: 10px;
margin: 0 1% 10px;
padding: 0px 2% 10px;
flex: 1;
flex-basis:48%;
flex-grow: 0;
text-align: left;
font-size: 15px;
}
}
#work .work-list-end li h2{
font-size: 17px;
margin: 0;
padding: 0;
text-align: left;
font-weight: 400;
}
@media only screen and (max-width: 835px) {
#work .work-list-end li h2{
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#work .work-list-end li h2{
font-size: 15px;
}
}

.work-nav,.work-nav2,.work-nav3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.work-nav2{
margin: 50px 0 0;
}
.work-nav3{
margin: 0 0 50px;
}
.work-nav ul,.work-nav2 ul,.work-nav3 ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 2%;
display: flex;
flex-wrap: wrap;
}
.work-nav li,.work-nav2 li,.work-nav3 li{
margin: 0 2% 15px 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 100%;
flex: 1 0 auto;
}
@media only screen and (max-width: 835px) {
.work-nav li,.work-nav2 li,.work-nav3 li{
flex: 1;
flex-basis:48%;
margin: 0 2% 15px 0;
}
}
@media only screen and (max-width: 640px) {
.work-nav2{
margin: 20px 0 20px;
}
.work-nav ul,.work-nav2 ul,.work-nav3 ul{
padding: 0 0 0 4%;
}
.work-nav li,.work-nav2 li{
flex-basis:100%;
margin: 0 0 15px 0;
}
.work-nav3 li{
flex-basis:48%;
margin: 0 1% 15px;
}
}
@media only screen and (max-width: 480px) {
.work-nav ul,.work-nav2 ul,.work-nav3 ul{
padding: 0 0 0 5%;
}
.work-nav li,.work-nav2 li,.work-nav3 li{
font-size: 16px;
}
}

#work-bo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 60px 0;
padding: 0;
}
#work-bo h3{
border: none;
margin: 0 0 30px;
background: #38b6ff;
color: #fff;
}
#work-bo h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 30px;
line-height: 100%;
font-weight: 500;
}
@media only screen and (max-width: 640px) {
#work-bo h4{
font-size: 25px;
}
}

.work-bo-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding:40px 2% 20px;
border-radius: 10px;
background: #e2f3fc;
display: flex;
flex-wrap: wrap;
}
#sub-page .work-bo-box h4{
font-size: 20px;
font-weight: 600;
color: #38b6ff;
margin: 0 0 15px;
text-align:center;
}
@media only screen and (max-width: 835px) {
.work-bo-box{
padding:30px 3% 5px;
}
}
@media only screen and (max-width: 480px) {
.work-bo-box{
padding:30px 6% 5px;
}
}

.work-bo-pict{
clear: both;
float: left;
width: 23%;
height: auto;
padding: 20px 2%;
margin: 0 1% 30px;
flex-basis:23%;
background: #fff;
border-radius: 5px;
}
@media only screen and (max-width: 1080px) {
.work-bo-pict{
flex-basis:31.3%;
max-width: 31.3%;
}
}
@media only screen and (max-width: 640px) {
.work-bo-pict{
flex-basis:48%;
max-width:48%;
}
}
@media only screen and (max-width: 480px) {
.work-bo-pict{
margin: 0 0 20px;
padding: 20px 5%;
flex-basis:100%;
max-width:100%;
}
}

#work-end{
display: none;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 60px 0;
padding: 0;
}
#work-end h3{
border: none;
margin: 0 0 30px
}
#work-end h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 30px;
line-height: 100%;
font-weight: 500;
}
@media only screen and (max-width: 640px) {
#work-end h4{
font-size: 25px;
}
}

.work-end-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding:40px 5% 20px;
border-radius: 10px;
background: #e2f3fc;
}
.work-end-box p{
font-size: 25px;
font-weight: 600;
color: #38b6ff;
margin: 0 0 30px;
text-align: left;
}
@media only screen and (max-width: 835px) {
.work-end-box{
padding:30px 5% 20px;
}
#work .work-end-box p{
font-size: 25px;
margin: 20px 0 15px;
}
}
@media only screen and (max-width: 640px) {
.work-end-box{
padding:5px 5% 20px;
}
}

.work-end-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.work-end-pict img{
flex: 1;
margin: 0 1% 30px;
flex-basis:18%;
max-width: 18%;
}
@media only screen and (max-width: 1080px) {
.work-end-pict img{
flex-basis:23%;
max-width: 23%;
}
}
@media only screen and (max-width: 640px) {
.work-end-pict img{
flex-basis:31.3%;
max-width:31.3%;
}
}
@media only screen and (max-width: 480px) {
.work-end-pict img{
margin: 0 1% 15px;
flex-basis:48%;
max-width:48%;
}
}

#work-single{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
#work-single div{
margin: 0 1%;
flex: 1;
flex-basis:48%;
}
@media only screen and (max-width: 640px) {
#work-single{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display:inherit;
}
#work-single div{
clear: both;
float: left;
width: 100%;
margin: 0 0%;
flex: 1;
flex-basis:100%;
}
}

#work-single div p{
text-align: left;
}

#teacher{
}

#teacher h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 10px 1%;
text-align: left;
font-size: 35px;
line-height: 120%;
font-weight: 500;
color: #38b6ff;
border-left: 50px solid #38b6ff;
border-bottom: 1px solid #38b6ff;
}
@media only screen and (max-width: 835px) {
#teacher h2{
margin: 0 0 40px;
padding: 0 0 10px 1%;
font-size: 30px;
border-left: 35px solid #38b6ff;
}
}
@media only screen and (max-width: 640px) {
#teacher h2{
margin: 0 0 30px;
padding: 3px 0 7px 2%;
font-size: 25px;
border-left: 30px solid #38b6ff;
}
}
@media only screen and (max-width: 480px) {
#teacher h2{
margin: 0 0 30px;
padding: 3px 0 7px 2%;
font-size: 20px;
border-left: 20px solid #38b6ff;
}
}

#teacher h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 30px;
font-weight: 600;
line-height: 100%;
}
#teacher h3 span{
font-size: 17px;
font-weight: 400;
line-height: 200%;
}
@media only screen and (max-width: 480px) {
#teacher h3{
font-size: 25px;
}
#teacher h3 span{
font-size: 15px;
}
}

.tea,.tea2,.tea3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
text-align: left;
}
.tea3{
margin: 0;
display: flex;
}
.tea img{
max-width: 30%;
border-radius: 10px;
}
.tea2 img{
max-width: 20%;
border-radius: 10px;
}
@media only screen and (max-width: 835px) {
.tea,.tea2,.tea3{
margin: 0 0 40px;
}
.tea img{
max-width: 50%;
border-radius: 10px;
}
.tea2 img{
max-width: 30%;
border-radius: 10px;
}
}
@media only screen and (max-width: 640px) {
.tea2 img{
max-width: 35%;
border-radius: 10px;
}
}
@media only screen and (max-width: 480px) {
.tea img{
max-width: 60%;
border-radius: 10px;
}
.tea2 img{
max-width: 40%;
border-radius: 10px;
}
}

.tea-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

.tea-box{

}

#tea-photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
text-align: center;
}
#tea-photo img{
max-width: 50%;
border-radius: 10px;
}
@media only screen and (max-width: 835px) {
#tea-photo img{
max-width: 80%;
border-radius: 10px;
}
}
@media only screen and (max-width: 480px) {
#tea-photo img{
max-width: 100%;
border-radius: 10px;
}
}

.tea-text{
float: right;
width: 70%;
height: auto;
margin: 0;
padding: 0 0 0 5%;
text-align: left;
}
.tea2 .tea-text{
width: 80%;
}
.tea3 .tea-text{
float: left;
width: 48%;
margin: 0 2% 0 0;
flex: 1;
}
@media only screen and (max-width: 835px) {
.tea-text{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
text-align: left;
}
.tea2 .tea-text{
width: 100%;
}
.tea3 .tea-text{
float: left;
width: 48%;
margin: 0 2% 0 0;
flex: 1;
}
}

.tea-text p{
font-size: 17px;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
@media only screen and (max-width: 480px) {
.tea-text p{
font-size: 16px;
}
}

#sub-page .tea-text h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 10px;
padding: 5px 3%;
text-align: left;
font-size: 17px;
font-weight: 400;
line-height: 100%;
background: #eee;
border: 1px solid #ccc;
border-radius: 7px;
}
.tea-text ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
.tea-text li{
font-size: 17px;
line-height: 120%;
margin: 0 0 10px;
text-align: left;
}
@media only screen and (max-width: 640px) {
#sub-page .tea-text h4{
font-size: 16px;
border-radius: 5px;
}
.tea-text ul{
padding: 0 0 0 6%;
}
.tea-text li{
font-size: 15px;
}
}

/*アコーディオン全体*/
.accordion-area{
clear: both;
float: left;
    list-style: none;
    width: 100%;
    margin:0 auto;
}

.tea-text .accordion-area p{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0 0 10px;
text-align: left;
font-size: 17px;
line-height: 100%;
border-left:none;
text-indent: 2.5em;
font-weight: 500;
}
@media only screen and (max-width: 640px) {
.tea-text .accordion-area p{
padding: 0 0 10px 30px;
text-indent:0px;
}
}

.accordion-area .tea-box{
    flex-basis:100%;
margin: 0 0 0px;
padding: 0px 0% 0;
flex-grow: 0;
align-self:flex-start;
}

.accordion-area section {
clear: both;
margin: 0;
padding: 0 0 10px;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 0 3% 0 20px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #fc659e;
    }
.title::before{
    top:30%;
    left: 15px;
    transform: rotate(0deg);
    }
.title::after{    
    top:30%;
    left: 15px;
    transform: rotate(90deg);
}
@media only screen and (max-width: 835px) {
.title::before{
    top:30%;
    left: 15px;
    transform: rotate(0deg);
    }
.title::after{    
    top:30%;
    left: 15px;
    transform: rotate(90deg);
}
}
@media only screen and (max-width: 640px) {
.title::before{
    top:30%;
    left: 0px;
    transform: rotate(0deg);
    }
.title::after{    
    top:30%;
    left: 0px;
    transform: rotate(90deg);
}
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}
.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 15px;
border-bottom: 1px dashed #777;
}
.work-list-end .box{
padding: 0;
border-bottom: none;
}

.tea-box dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.tea-box dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 5px;
text-align: left;
font-weight: 500;
font-size: 15px;
line-height: 120%;
background: #eee;
}
.tea-box dd{
float: left;
width: 47%;
height: auto;
margin: 0 0 15px 3%;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 120%;
}
.tea-box dd.fin{
padding: 0 0 0 2.5em;
}
@media only screen and (max-width: 480px) {
.tea-box dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 120%;
}
}

#school{
}
#school h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 10px 0;
text-align: left;
font-size: 30px;
line-height: 120%;
font-weight: 500;
color: #38b6ff;
border-bottom: 2px solid #38b6ff;
}
#school .sc h2{
font-size: 20px;
color: #111;
border-bottom: none;
background: #eee;
border-radius: 10px;
padding: 10px;
font-weight: 400;
}
@media only screen and (max-width: 480px) {
#school .sc h2{
margin: 0 0 20px;
}
}

#school h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 5px 0 2px 1.5em;
text-align:left;
font-size: 20px;
font-weight: 400;
line-height: 120%;
background: url(https://musicmindgamesjapan.com/image/sc-h3-l.png) no-repeat left top/auto 100%;
border-bottom: 1px solid #ccc;
color: #111;
}
@media only screen and (max-width: 1080px) {
#school h3{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#school h3{
font-size: 16px;
margin: 0 0 10px;
padding: 5px 0 2px 20px;
background: url(https://musicmindgamesjapan.com/image/sc-h3-l.png) no-repeat left top/15px 100%;
}
}

#school h3 a::before {
  content: "";
  margin: 0 0 0 10px;
width: 25px;
    height:25px;
vertical-align: middle;
display: inline-block;
background: url(https://musicmindgamesjapan.com/image/school-icon.png) no-repeat center/contain;
}
#school h3 a img{
max-width: 25px;
}

#sub-page #school p{
text-align: left;
font-size: 16px;
line-height: 150%;
margin: 0;
}

#school p span.te{
font-size: 13px;
color: #fff;
font-weight: 500;
background: #38b6ff;
border-radius: 50px;
padding: 0 10px;
margin: 0 0 0 2%;
}
#school p span.te::after{
content: '';
color: #0066b3;
padding: 0;
}

#school p span{
font-size: 13px;
color: #444;
font-weight: 400;
background: #d0ecfc;
border-radius: 50px;
padding: 0 10px;
margin: 0 0 0 2%;
}
#school p span::after{
content: '★';
color: #0066b3;
padding: 0 0 0 3px;
}
#school p span.s2::after{
content: '★★';
}
#school p span.s3::after{
content: '★★★';
}
#school p span.s4::after{
content: '★★★★';
}
#school p span.s5::after{
content: '★★★★★';
}
#school p span.s6::after{
content: '★★★★★★';
}
#school p span.s7::after{
content: '★★★★★★★';
}
#school p span.s8::after{
content: '★★★★★★★★';
}
#school p span.s9::after{
content: '★★★★★★★★★';
}
#school p span.s10::after{
content: '★★★★★★★★★★';
}

#school p span.s01,#school p span.s02,#school p span.s03,#school p span.s04,#school p span.s05,#school p span.s06,#school p span.s07,#school p span.s08,#school p span.s09,#school p span.s10{
font-size: 13px;
color: #555;
font-weight: 400;
background: #eee;
border-radius: 50px;
padding: 0 10px;
margin: 0 0 0 2%;
}
#school p span.s01::after{
content: '★';
color: #38b6ff;
}
#school p span.s02::after{
content: '★★';
color: #38b6ff;
}
#school p span.s03::after{
content: '★★★';
color: #38b6ff;
}
#school p span.s04::after{
content: '★★★★';
color: #38b6ff;
}
#school p span.s05::after{
content: '★★★★★';
color: #38b6ff;
}
#school p span.s06::after{
content: '★★★★★★';
color: #38b6ff;
}
#school p span.s07::after{
content: '★★★★★★★';
color: #38b6ff;
}
#school p span.s08::after{
content: '★★★★★★★★';
color: #38b6ff;
}
#school p span.s09::after{
content: '★★★★★★★★★';
color: #38b6ff;
}
#school p span.s010::after{
content: '★★★★★★★★★★';
color: #38b6ff;
}

@media only screen and (max-width: 640px) {
#school p span{
display: inline-block;
width: auto;
margin: 0 2% 5px 0;
}
#school p span.s01,#school p span.s02,#school p span.s03,#school p span.s04,#school p span.s05,#school p span.s06,#school p span.s07,#school p span.s08,#school p span.s09,#school p span.s10{
margin: 0 2% 5px 0;
}
}
@media only screen and (max-width: 480px) {
#sub-page #school p{
font-size: 15px;
}
#school p span{
font-size: 13px;
}
}

.sc{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
flex-wrap: wrap;
}

.sc-box{
margin: 0 1% 30px;
padding: 20px 2%;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 3px 3px 3px #ddd;
flex: 1;
flex-basis:48%;
flex-grow: 0;
}
@media only screen and (max-width: 640px) {
.sc-box{
margin: 0 0% 30px;
flex-basis:100%;
}
}
@media only screen and (max-width: 480px) {
.sc-box{
margin: 0 1% 20px;
padding: 10px 2%;
box-shadow: none;
}
}

#mail{
}
#mail p{
text-align: left;
margin: 0 0 50px;
}

form{
clear: both;
width:100%;
height: auto;
margin: 0 auto;
padding: 0;
text-align: center;
}

.hissu{
font-size: 12px;
border-radius: 5px;
background: #ef3876;
color:#fff;
padding: 0 5px 1px;
margin: 0 0 0 2%;
}
#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:10px 0 50px;
	padding:10px 0;
	text-align:center;
}
@media only screen and (max-width: 640px) {
#mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0 0 50px;
	padding:0;
	text-align:center;
}
}

table {
	clear:both;
	width:100%;
	margin:5px 0 20px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table hr{
border-top:1px dashed #333;
border-left:none;
border-right:none;
border-bottom:none;
}

#sub-page table p{
font-size: 15px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}

table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:25px 0 20px;
text-align: center;
font-size: 25px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
@media only screen and (max-width: 640px) {
table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:20px 0 15px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
}

th{
	width:30%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
}
@media only screen and (max-width: 1080px) {
th{
	width:30%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
th{
	width:40%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
table {
	clear:both;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
th{
clear: both;
float: left;
	width:100%;
	background:#eee;
	text-align:left;
	font-weight: normal;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 15px;
	line-height: 150%;
	}
td{
clear: both;
float: left;
width: 100%;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 15px;
}
td.bno{
border-bottom:none;
}
#sub-page table p{
font-size: 13px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}
}
@media only screen and (max-width: 480px) {
th{
clear: both;
float: left;
	width:100%;
	background:#eee;
	text-align:left;
	font-weight: normal;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 14px;
	line-height: 150%;
	}
td{
clear: both;
float: left;
width: 100%;
	border-right:none;
	border-bottom:1px solid #333;
	padding: 10px 5px;
	font-size: 14px;
}
}

textarea,input[type="text"] ,input[type="email"]{
width: 100%;
}
input[type="text"].s70{
width: 75%;
}
select{
width: 20%;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 640px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
line-height: 150%;
}
input[type="text"].s70{
width: 100%;
margin: 5px 0 0;
}
select{
width: 23%;
margin: 0 2% 0 0;
}
select.s30{
width: 35%;
margin: 0 2% 0 0;
}
}
@media only screen and (max-width: 480px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding: 5px;
}
textarea{
font-size: 14px;
}
}

input.btn_submit,input.btn_submit2{
 width:150px;
 height:50px;
 background: #ef3876;
 border-radius: 10px;
 box-shadow: 2px 2px 3px #aaa;
 border: 2px solid #fff;
 font-size: 20px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
 width:100px;
 height:40px;
  line-height: 36px;
   background: #dddddd;
 color: #555;
 font-size: 15px;
 margin: 0 0 0 2%;
}

input.btn_submit:hover {
 background: #f67ba3;
 cursor: pointer;
}

input.btn_submit2:hover {
 background: #ccc;
  cursor: pointer;
}

form strong{
color: #ef3876;
}
label{
 cursor: pointer;
}

#mail-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 40px;
padding: 30px 0;
border-top:2px solid #326d9f;
border-bottom:2px solid #326d9f;
}
#mail-title h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
font-size: 30px;
font-weight: 600;
line-height: 100%;
color: #326d9f;
}
@media only screen and (max-width: 1080px) {
#mail-title{
margin: 30px 0 30px;
padding: 20px 0;
}
#mail-title h2{
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
#mail-title h2{
line-height: 120%;
}
}

#mail-ok{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
}

/* 最新の投稿ブロックのリストアイテムを縦並びにする */
.wp-block-latest-posts li {
    display: flex;
    flex-direction: column; /* 縦に並べる */
}

/* 日付（time要素）を一番上（order: 1）に配置する */
.wp-block-latest-posts li time {
    order: 1;
    margin-bottom: 5px; /* タイトルとの間に少し隙間を作る */
    font-size: 0.8em;    /* 日付を少し小さくする場合 */
    color: #666;        /* 日付の色を薄くする場合 */
}

/* タイトル（aタグやテキスト）を二番目（order: 2）に配置する */
.wp-block-latest-posts li a {
    order: 2;
    text-decoration: none;
    font-weight: bold;
}

.entry-content{
text-align: left;
}

.post-date,.entry-date{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 100%;
color: #999;
}
h3.post-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 5px 3%;
text-align: left;
font-size: 25px;
font-weight: 600;
line-height: 150%;
color: #fff;
border-radius: 10px;
background: #38b6ff;
}
h3.post-title a:link,h3.post-title a:visited{
text-decoration: none;
color: #fff;
}
@media only screen and (max-width: 480px) {
.post-date,.entry-date{
font-size: 14px;
}
h3.post-title{
margin: 0 0 15px;
font-size: 20px;
}
}

.post-content p,.entry-content p{
margin: 0 0 30px;
line-height: 180%;
font-size: 20px;
}
@media only screen and (max-width: 640px) {
.post-content p,.entry-content p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
.post-content p,.entry-content p{
font-size: 16px;
}
}

.entry-content section{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 0 80px;
border-bottom: 1px dashed #111;
}
@media only screen and (max-width: 480px) {
.entry-content section{
margin: 0 0 40px;
padding: 0 0 40px;
}
}

.post-navigation{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
font-size: 16px;
}
@media only screen and (max-width: 480px) {
.post-navigation{
margin: 0 0 30px;
font-size: 14px;
}
}

h2.entry-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding:0 0 10px;
text-align: left;
font-size: 25px;
font-weight: 600;
line-height: 130%;
border-bottom: 1px solid #111;
}
@media only screen and (max-width: 480px) {
h2.entry-title{
margin: 0 0 25px;
padding:0 0 5px;
font-size: 20px;
}
}

.nav-previous{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
font-size: 15px;
line-height: 150%;
text-align: left;
}
.nav-next{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 0 0 0 5%;
font-size: 15px;
line-height: 150%;
text-align: right;
}
.nav-previous .post-title,.nav-next .post-title{
display: none;
}
@media only screen and (max-width: 480px) {
.nav-previous{
padding: 0 5% 0 3%;
}
.nav-next{
padding: 0 3% 0 5%;
}
}

svg{
vertical-align: middle;
}

.wp-block-media-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
figure{
margin: 0 0 20px;
}

@media only screen and (max-width: 480px) {
.wp-block-media-text__content{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.wp-block-media-text__content p{
margin: 0 0 20px;
padding: 0;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#38b6ff;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
}
 
#page-top p:hover{
	background:#fff200;
	color:#fff;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 25%;
background: #38b6ff;
}
@media only screen and (max-width: 1280px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 20%;
background: #38b6ff;
}
}
@media only screen and (max-width: 1080px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 15%;
background: #38b6ff;
}
}
@media only screen and (max-width: 835px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 5% 20px;
background: #38b6ff;
}
}

footer h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
line-height: 100%;
color: #fff;
font-size: 20px;
font-weight: 500;
}
footer h6 a:link,footer h6 a:visited{
text-decoration: none;
color: #fff;
}
footer h6 a:hover{
color: #fff200;
}
@media only screen and (max-width: 835px) {
footer h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align:center;
line-height: 100%;
color: #fff;
font-size: 20px;
font-weight: 500;
}
}
@media only screen and (max-width: 640px) {
footer h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align:center;
line-height: 100%;
color: #fff;
font-size: 15px;
font-weight: 500;
}
}

footer ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
display: flex;
align-items: center;
}
footer li{
list-style-type: none;
margin: 0 2% 0 0;
padding: 0;
text-align: center;
font-size: 15px;
line-height: 100%;
flex: 0 0 auto;
color: #fff;
font-weight: 400;
}
footer li a:link,footer li a:visited{
text-decoration: none;
color: #fff;
font-weight: 400;
}
footer li a:hover{
color: #fff200;
}
footer img{
margin: 0 3% 0 0;
max-width: 40px;
}
@media only screen and (max-width: 835px) {
footer ul{
display: none;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
align-items: center;
}
}