@charset "utf-8";
/* CSS Document */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17

*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

ul,ol {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
img{
	vertical-align:bottom;
}

/************** layout base ********************/

.clearfix{
overflow:hidden;
}
.clear{
	clear:both;
}

img{ max-width:100%;}

a,
a:hover{text-decoration:none;}
a:link{}

a:visited{}


sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}

.txtLeft{
text-align:left;
}
.txtRight{
text-align:right;
}
.txtCenter{
text-align:center;
}
.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f22{ font-size:22px !important;}
.f24{ font-size:24px !important;}

.txtRed{ color:#D80000;}
.txtOrange{ color:#ff7800;}
.txtBlue{ color:#0d5bab;}
.txtPurple{ color:#463fa7; }
.note{ color:#666666; font-size:12px;}

.fLeft{ float:left;}
.fRight{ float:right;}
.fNon{
	float:none !important;
}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}
.mTop55{ margin-top:55px !important;}
.mTop60{ margin-top:60px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm55{ margin-bottom:55px !important;}
.mBtm60{ margin-bottom:60px !important;}
.mBtm70{ margin-bottom:70px !important;}
.mBtm80{ margin-bottom:80px !important;}
.mBtm90{ margin-bottom:90px !important;}
.mBtm100{ margin-bottom:100px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm55{ padding-bottom:55px !important;}
.pBtm60{ padding-bottom:60px !important;}

.disnon{
	display:none;
}
.spOnly,
.iosOnly{
	display:none;
}
.pcOnly{
	display:block;
}


/************** layout base ********************/
body {
	background: #fff;
   font-family: 'Noto Sans Japanese', sans-serif;
   font-size: 100%;
	color: #000000;
}

div,p,dl {
	text-align:left;
	font-weight:400;
	font-size: 16px;
}
h1,h2,h3,h4,h5,h6 {
	text-align:left;
}


/* #footer
---------------------------------------------------------------------------- */
#footer{
  background: #939393;
  margin-top: 7%;
  padding: 20px 0;
}
#footer small{
  display: block;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
}


/* common
---------------------------------------------------------------------------- */
.phraseList{
  position: relative;
	background: url(../images/bg_phrase.png) repeat-y left top;
  background-size: 100% auto;
  padding: 5% 0 13.1% 0;
}
.phraseList::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	background: url(../images/sp_arrow_white.png) no-repeat;
	background-size: 100% auto;
	width: 33px;
	height: 14px;
	margin-left: -16.5px;
}

.phraseList ul{
  overflow:hidden;
  width: 96%;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}
.phraseList ul li{
  display: inline-block;
  width: 49%;
  margin-right: 2%;
  vertical-align: top;
}
.phraseList ul li:nth-child(2n){
  margin-right: 0%;
}

.phraseList ul.wide li{
	width: 100%;
}

.phraseList.lower ul{
	margin-top:10px;
}

.phraseList.lower .listTtl{
	position:relative;
  width: 49%;
  margin: 0 auto 10%;
  height:44vw;
}
.phraseList.lower .listTtl span{
	position:absolute;
	top:50%;
	left:50%;
	z-index:10;
}
.phraseList.lower .listTtl span img{
	margin:auto;
}
.phraseList.lower .listTtl strong{
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}

.band{
  margin-bottom: 5%;
}


/* top
---------------------------------------------------------------------------- */

.rhythmBox{
	margin-bottom:11%;
	position:relative;
}
.rhythmBox span{
	position:absolute;
	z-index:100;
}

.rhythmBox h1{
	z-index:10;
}

.rhythmBox #note01{
	top:10px;
	left:48%;
	width:2%
}

.rhythmBox #note02{
	top: 27%;
	left:28%;
	width:5%
}
.rhythmBox #note03{
	top: 13%;
	right:8%;
	width:11%
}

.rhythmBox #note04{
	top: 45%;
	right:4%;
	width:10%
}

.top .movieBox h2{
  position: absolute;
  top: -7%;
  left: 5%;
}

.movieBox h2{
  position: absolute;
  top: -14%;
  left: 5%;
}

.top .phraseList{
  background: url(../images/bg_phrase.png) repeat-y left top;
  background-size: 100% auto;
  padding: 32.8% 0 20% 0;
  text-align: left;
}

.top .phraseList h2{
  position: absolute;
  top: -2%;
  left: 4.5%;
  width: 91%;
  background:url(images/bg_phrase_large.png) no-repeat;
  background-position:30% 50%;
  background-size:70%;
}

.top .phraseList ul{
  text-align: left;
}

.movieBox{
  position: relative;
  background: url(images/bg_eeny_top.png) no-repeat left top,
  url(images/bg_eeny_btm.png) no-repeat left bottom,
  url(images/bg_eeny_mid.png) repeat-y;
  background-size: 100% auto;
  width: 95%;
  margin: 0 auto 15px;
  padding: 11% 0 6% 0;
}
.movieBox h2{
  width: 90%;
  margin: 0 auto;
}
.top .movieBox .movie{
  position: relative;
  width: 77%;
  padding: calc(315 / 560 * 100%) 0 0;
  margin: 0 auto 5%;
}
.movieBox .movie{
  position: relative;
  width: 50%;
  padding: calc(150 / 315 * 70%) 0 0;
  margin: 0 0 2% 4%;
}
.movieBox .movie iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movieBox .inner{
  overflow: hidden;
  padding: 0 3% 0 6%;
}
.movieBox .inner .fLeft{
  width: 54%;
}
.movieBox .inner .fRight{
  width: 41%;
}

.movieBox .tigaer,
.movieBox .movieImg{
  position: absolute;
  /* top: 27%; */
  top: 14%;
  width: 35%;
  right: 4%;
}

.top .otherMagazine{
  margin: 4% auto 0;
}

/* schoolroomArea
---------------------------------------------------------------------------- */
#schoolroomArea{
  font-size: 100%;
	margin-bottom: 24px;
}
#schoolroomHead{
	position: relative;
	background: url(images/schoolroom_head_bg01.png) no-repeat center bottom;
	background-size: cover;
	overflow: hidden;
	margin-bottom: 20px;
}
#schoolroomHead #schoolroomHeadLogo img{
	width: 77.656%;
}
#schoolroomHead #giraffe{
	position: absolute;
	right: 0;
	top:100%;
	width: 22.344%;
	z-index: 99;
}
#schoolroomHead #giraffe img{
	width: 100%;
	height: auto;
}
#schoolroomHead #bg{
	position: absolute;
	right: 0;
	bottom:0;
	width: 100%;
	z-index: 100;
}
#schoolroomHead #bg img{
	width: 100%;
	height: auto;
}
#schoolroomBtn{
	background: url(images/schoolroom_bg.png) no-repeat center bottom;
	background-size: 100% auto;
}
#schoolroomBtn img{
	width: 100%;
}
#schoolroomBtn li{
	width: 100%;
}
#schoolroomBtn li.img2 img {
    width: 50%;
}
.rhythmTtl{
  margin-bottom: 8%;
  text-align: center;
}



/*---------small talk------------*/
.smalltalkBox{
	width: 94%;
	margin: -7px auto 0;
}
.smalltalkBox.case{
	margin-top: -16px;
}
.smalltalkBox h2{
	position: relative;
}
.smalltalkBox #fukidashi{
	position: absolute;
	right: 0;
	top: -8px;
	width: 23%;
}
.smalltalkBox.case #fukidashi{
	top: -15px;	
}
/*---*/
.smalltalkBox #fukidashi{
    animation: fadeOut 2s ease 5s 1 normal;
    -webkit-animation: fadeOut 2s ease 5s 1 forwards;
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}
/*--*/
.smalltalkBox h2 a{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 22.5%;
}
.keyMaga05.smalltalk03 .smalltalkBox h2 a,
.keyMaga05.smalltalk05 .smalltalkBox h2 a,
.keyMaga05.smalltalk04 .smalltalkBox h2 a{
	bottom: -18%;
}

.smalltalkList{
	background: url(images/smalltalk_other_bg.png) no-repeat left top;
	background-size: cover;
	padding: 0 0 40px 0;
	margin:50px 0 15px;
}
.smalltalkList h2 img{
	margin-top: -44px;
}
.smalltalkList ul{
	padding: 0 0 0 1.5%;
	font-size: 0;
}
.smalltalkList ul li{
	display: inline-block;
	width: 48.5%;
	margin-bottom: 2%;
	vertical-align: bottom;
}