@charset "utf-8";
/* ----------------------------------
              COMMON
---------------------------------- */
html { margin:0; padding:0; }
body { margin:0px auto 0px auto; font-size:14px;
       font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
       background:#fff;}
header,section,article,aside,footer{ 	display: block;}
img{ margin:0;padding:0;border:none;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#00f;text-decoration:none;}
a:visited{ color:#00f;text-decoration:none;}
a:hover{ color:#f00;	text-decoration:none;}
a:active{ color:#298ADC;text-decoration:none;}

article.pageCon a:link{ color:#00f; }
article.pageCon a:visited { color:#00f; }
/* ----------------------------------
          ClearFix
---------------------------------- */
.cf { clear:both; }
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/* 追加 MacIE 5 と WinIE 7 向け */
/*MacIE \*/
* html .cf{ height:1em;}
/*-------------------------------------
	画像下端/リンク透過
-------------------------------------*/
img { vertical-align:middle; max-width:100%; }
/*-------------------------------------
	    PC / SP
-------------------------------------*/
.pc { display:table-cell; }
.sp { display:none; }
  @media screen and (max-width : 480px) { 
      .pc { display:none; }
      .sp { display:block; }
  }
/*-------------------------------------
	    Span Color
-------------------------------------*/
span.bold { font-weight:bold; }
span.red { color:#ff0000; font-weight:bold; }
span.blue { color:#0000ff; font-weight:bold; }
span.pink { color:#ff6666; font-weight:bold; }
span.yellow { color:#ffff00; font-weight:bold; }
span.line { background: linear-gradient(transparent 80%, #ff6633 20%); }
span.uline { text-decoration:underline; }

p.bigL { text-align:center; font-size:16px; }
/*-------------------------------------
	     Header
-------------------------------------*/
header { width:100%;text-align:center;margin:0px auto;position: relative; }
#header-inner { max-width:1200px; margin:0px auto ;padding:0px; }
.headerLogo  { float:left; padding-right:20px; margin:0px; width:150px; }
.headerLogo img { height:74px; }

  @media screen and (max-width : 769px) {
       #header-inner { width:100%; }
       .headerLogo  { float:none; width:100%; padding-right:0; text-align:left; }
  }
/*-------------------------------------
          NAV
-------------------------------------*/
nav { float:right; width:calc(100% - 170px); height:74px;
      background-image: repeating-linear-gradient( -45deg, #f9f9f9,#f9f9f9 2px,/*--濃い--*/
      #fff 2px, #fff 4px );  }
nav img.openIcon { display:none; }
#navList ul { width:100%; margin:0px auto; text-align:center; }
#navList ul li  { float:left; ;width:calc(100% / 7); display:block; padding:27px 0 23px; height:24px; }
#navList ul li:first-child { padding:0; margin:0; background:#555; height:74px; }
#navList ul li a { font-size:16px;color:#555; display:block; }
#navList ul li a:visited { color:#555; }
#navList ul li a:hover { color:#fff; background:#555; padding:27px 0 23px; margin:-27px 0 -23px; }
#navList ul li:first-child  a:hover { padding:0; margin:0;  }

  @media screen and (max-width : 769px) {
     nav { background:none;  width:100%; height:47px; position:relative; z-index:10;} 
     nav img.openIcon { display:block; position:relative;z-index:10; width:50px; height:47px; }
     #navList {  }
     #navList.open { -webkit-transition: .5s linear; transition: .5s linear;
             background: none; height:50px; }
     #navList.close { position:fixed; width: 100%; margin-left:250px;  height:100%;
             -webkit-transition: .5s linear; transition: .5s linear; 
             background-color: rgba(51,51,51,0.5);}
     #navList ul { margin:-47px 0px 0px -250px; width:250px; background:#323333; height:100%; }
     #navList ul li:first-child { width:250px; border-left:none; }
     #navList ul li { width: 220px; float:none;  text-align:left; padding:17px 0px 17px 30px;
             color:#fff;font-size: 16px;font-weight: bold; border-right:none; height:auto;
             border-bottom: 1px solid #FFF;}
     #navList ul li a:link { display:block; color:#fff; }
     #navList ul li a:visited { color:#fff; }
  }
/*-------------------------------------
	     Slider
-------------------------------------*/
#slider { width: 100%;  }
.wideslider { max-width: 1200px; margin:0 auto; }

/*-------------------------------------
	     Page Top
-------------------------------------*/
#topImage  { width:100%; }
#topImage ul { max-width:1200px; margin:0 auto; }
/*-------------------------------------
	   Main Contents
-------------------------------------*/
main { width:100%; }
article { width:100%; max-width:1200px; margin:0 auto; }
section { width:100%; max-width:1200px; margin:0 auto; }
section p { padding:10px; }
h1  { font-size:24px; color:#fff; padding:10px 0 9px 20px; margin:0px auto; width:calc(100% - 20px);
         background: linear-gradient(to bottom, #aff9ab, #58db51 40%, #28ab21 ); }
h1 span { font-size:18px; }
h2 { font-size:18px; width:90%; margin:10px 5% -10px 5%; }
h2.mainTitle { clear:both; font-size:24px; color:#fff; padding:10px 0 9px 20px; margin:0px auto; width:calc(100% - 20px);
         background: linear-gradient(to bottom, #aff9ab, #58db51 40%, #28ab21 ); }
div.contents { width:90%; margin:20px auto; padding:0; }

div.curriculum { margin-left:10px; background-image:url(../image/curriculum.jpg); 
         background-repeat: no-repeat;  background-position: right center }

h3 { padding:2px 2px 2px 10px; }
h4 { padding:2px 2px 2px 20px; }
div.contents ul { padding-left:30px; }

div.topDesc p { padding:10px; }
.topLink { width:100%; }
.topLinkCon { width:31%; float:left; margin:20px 1%; border:1px #ccc solid; }
h3.topLinkTitle { background:#daa521; color:#fff; font-size:18px; font-weight:normal; margin:0; text-align:center; }
.topLinkCon p.topLinkText { padding:15px 10px 0px;  }
.topLinkCon p.topLinkBottom { text-align:right; }


.certificateCon { display:flex; justify-content: flex-end;}
.certificateCon p { width:23%; float:left; margin:20px 1%; border:1px #ccc solid; }


.whatNew { width:80%; margin:20px 10%; height:200px; border: solid 1px #808080;    border-width: 2px;
             border-style: inset; border-color: initial; border-image: initial;   padding: 0.5em;
             overflow: auto;}

p.whatsnew { padding-left:50px; margin:0px 0 0px 30px; padding:3px 0 3px 50px;  }
p.whatsDate { padding-left:50px; margin:0px 0 0px 10px; padding:3px 0 3px 50px;
         background:url(../image/arrowC.png) no-repeat center left;  }
p.whatsnew a:link { color:#00f; }
p.whatsnew a:visited { color:#00f; }


  @media screen and (max-width : 480px) {
     div.curriculum { margin-left:10px; background-image:none; }
     #topCon { width:98%; margin:0 1%; }
     h3 { font-size:18px;  }
     h3 span { font-size:16px; }
     article .leftBox20 p.topDesc { float:left; width:44%;  }
     article .rightBox20 p.topDesc { float:left; width:44%;  }

     .whatNew iframe { width:calc(100% - 2% - 4px); margin:20px 1%; }
     .topLinkCon { width:98%; float:none; }
     h2.whatTitle { clear:both; padding: 20px 0 0 10px; }
     h2.mainTitle { font-size:18px; }
     div.contents { width:94%; }
     .whatNew { width:94%; margin:0 1%; }
  }


/*-------------------------------------
	   Float
-------------------------------------*/
article .leftBox80 { float:left; Width:78%; padding:20px 1%; }
article .rightBox20 { float:right; Width:18%; padding:20px 1%; }

article .leftBox50 { float:left; Width:48%; padding:20px 1%; }
article .rightBox50 { float:right; Width:48%; padding:20px 1%; }

article .leftBox40 { float:left; Width:38%; padding:20px 1%; }
article .rightBox60 { float:right; Width:58%; padding:20px 1%; }

article .leftBox20 { float:left; Width:18%; padding:20px 1%; }
article .midBox60 { float:left; Width:58%; padding:20px 1%; }
article .rightBox20 { float:right; Width:18%; padding:20px 1%; }

  @media screen and (max-width : 480px) {
     article .leftBox80 { float:none; Width:98%; padding:5px 1%; }
     article .rightBox20 { float:none; Width:78%; padding:5px 1%; margin:0 auto; }
     article .leftBox50 { float:none; Width:98%; padding:5px 1%; }
     article .rightBox50 { float:none; Width:98%; padding:5px 1%; margin:0 auto; }
     article .leftBox40 { float:none; Width:98%; padding:5px 1%; }
     article .rightBox60 { float:none; Width:98%; padding:5px 1%; margin:0 auto; }
     article .leftBox20 { float:none; Width:98%; padding:5px 1%; }
     article .midBox60 { clear:both; float:none; Width:98%; padding:5px 1%; margin:0 auto; }
     article .rightBox20 { float:none; Width:98%; padding:5px 1%; margin:0 auto; }
  }

/*-------------------------------------
	   School Information
-------------------------------------*/

div.libraly { margin-left:10px; background-image:url(../image/libraly.jpg); 
         background-repeat: no-repeat;  background-position: right center; }
div.manila { margin-left:10px; background-image:url(../image/schoolInfo018.jpg); 
         background-repeat: no-repeat;  background-position: right center; }

  @media screen and (max-width : 768px) {
      div.libraly { background-image:url(../image/libralyS.jpg);  }
      div.manila { background-image:url(../image/schoolInfo018S.jpg);  }
  }
  @media screen and (max-width : 480px) {
      div.libraly { background-position:bottom center; background-size:contain; height:700px; }
      div.manila { background-position:bottom center; background-size:contain; height:600px; }
  }
/*-------------------------------------
	   About Us
-------------------------------------*/
#aboutCon { max-width:800px; margin:20px auto 30px; }
table.aboutTable {  width: 100%; border-collapse: collapse; margin:0px auto 40px; }
table.aboutTable th { text-align:left; padding: 10px;  vertical-align: middle; 
         border-left:none; border-bottom:2px #ccc solid; border-right:2px #ccc solid; }
table.aboutTable th.officer { border-right:none; }
table.aboutTable th:nth-child(2) { border-right:none; }

table.aboutTable td { padding: 10px;  vertical-align: middle; 
         border-bottom: 2px solid #ccc; border-left: 2px solid #ccc; }
table.aboutTable td.officer { border-left:none; }

  @media screen and (max-width : 480px) {
      table.aboutTable th:nth-child(2) { width:45%; }
  }
/*-------------------------------------
	   CONTACT
-------------------------------------*/
#contactCon { max-width:800px; margin:20px auto 30px; }
h2.contacTitle { width:100%; text-align:center; padding:10px 0; font-size:20px; color:#000; }
table.contactTable {  width: 100%; border-collapse: collapse; margin:20px auto; }
table.contactTable tr th,
table.contactTable tr td { padding: 10px; border: 1px solid #DDD; vertical-align: middle; }
table.contactTable tr:nth-child(even) td { background: #f2f2f2; }
table.contactTable td:nth-child(1) { width:200px; }
table.contactTable strong.reruired { color:#fff; float: right; width: 40px; height: 20px;
            text-align:center; background:#ff6666; }

table.contactTable input, textarea { line-height: 1.5; border: 1px solid #ddd; padding: 5px 4px;
            background: #ffebeb;  }

#contactForm { margin:20px 0px 20px 50px; }
.contactLeft { width:200px;float:left;margin:3px;}
.contactRight { margin:5px 14px; }
.contactRight input, .contactRight textarea { width:400px;}

.submitButtons { text-align:center; }
.submitBtn { border: 0px; width:185px;height:47px; cursor:pointer;
         background: url(../image/submitBtn.jpg) left top no-repeat;}

#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:100%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:70%;padding:5px 20px 5px 20px;word-wrap:break-word; }
#contactForm .formTable th { width:30%;padding:5px 20px 5px 20px; }

  @media screen and (max-width : 768px) {
     #contactCon { width:100%; margin:20px auto; }
     #contactForm { margin:30px 0px 20px 0px; }
     table.contactTable input, textarea { width:200px; }
     .submitBtn { margin-left:40%;}
  }
  @media screen and (max-width : 480px) {
     #contactCon { width:98%; margin:20px 1%; }
     table.contactTable td:nth-child(1) { width:30%; }
     table.contactTable { font-size:14px; }
     table.contactTable input, textarea { width:100%; }
     table.contactTable input[type="radio" ] { width:20px; }
  }
/*-------------------------------------
	    Page Top
-------------------------------------*/
#page-top { display: block;  position: fixed;  z-index: 9999;  bottom: 10px;
  right: 10px;  width: 100px;  padding: 20px 10px;  background:#555;
  color: #fff;  text-align: center;  text-decoration: none; }
#page-top:hover{   background: rgba(0,0,0,.8); }
  @media screen and (max-width : 480px) {
      #pageTop { display: none; }
  }

/*-------------------------------------
	   Japanese School
-------------------------------------*/
#Gallery { }
 .gallery { width:100%; display:flex; flex-wrap: wrap; }
 .gallery p { width:19%; margin:0.5%; padding:0; }

  @media screen and (max-width : 480px) {
       .gallery p { width:100%; display:flex; flex-grow:1; }
  }

div#bottomCon { width:100%; margin:20px auto; padding:0; }
.youtubeLeft { width:500px; float:left; margin:20px 30px 20px 70px; }
.youtubeRight { width:500px; float:left; margin:20px 70px 20px 30px; }
.video { position:relative; width:100%; padding-top:56.25%; }
.video iframe { position:absolute; top:0; right:0; width:100%; height:100%; }
  @media screen and (max-width : 768px){
      .youtubeLeft { width:48%; margin:20px 1%; }
      .youtubeRight { width:48%; margin:20px 1% }
  }
  @media screen and (max-width : 480px) {
      .youtubeLeft, .youtubeRight { float:none; width:98%; margin:20px 1%; }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width:100%; margin:0px auto; padding-top:10px;
         background:#323333; color:#fff; }

.footer-inner { max-width:1200px; margin:0px auto; padding:0; }
.footer-inner h4 { background:#ff9934; }
.footerGroup { width:14%;float:left;padding:0 1%; }
.footerGroupB { width:26% ; float:left;padding:0 1%; }
.footerGroup ul { text-align:left;font-size:12px; }
.footerGroup li { padding:5px 0px; }
.footerGroupB ul li {  width:100%; text-align:left;}
footer li a { display:block;text-decoration:none;}
footer li a:link { color:#fff;}
footer li a:visited{ color:#fff;text-decoration:none;}
footer li a:hover{ color:#ff0000;text-decoration: none;}

.footerGroupC { clear:both; width:100%; text-align:center; padding:20px 0 20px 0;
         background:#222; }

  @media screen and (max-width : 768px){
      .footer-inner { max-width:100%; } 
      .footerGroup { width:48%; margin:20px 0; }
      .footerGroupB { width:48%; margin:20px 0; }
  }
  @media screen and (max-width : 480px) {
      .footer-inner { width:98%;margin:0 1%; } 
      .footerGroup {  width:98%; margin:0;}
      .footerGroupB {  width:98%; }
  }