@charset "UTF-8";
/* すべての要素のmarginとpaddingを0に設定します */
* {
  margin: 0;/* 要素の外側の余白を0にする */
  padding: 0;/* 要素の内側の余白を0にする */
    line-height:1.5;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; フォントを指定する 
    -webkit-text-size-adjust: 100%;
}

.net{
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    text-decoration: none;
    color:#000000;
}

nav {
/*  background-color:#ffc489;*/
    background-color: #afeeee;
  padding-top: 10px;
  padding-bottom: 10px;
      text-align: center;
}
 nav a{
  color:#9393ff;   
     text-decoration: none;
}
nav a:hover {
color:#bf7fff;
}

nav ul {
  margin-top: 0px;
  margin-bottom: 0px;
     text-align: center;
}

nav li {
  display: inline-block;
     margin-right: 40px;
}
/* 全てのsection */

section {
  padding: 30px;
}


/* h2のclass title */

.title {
  font-size: 30px;/* フォントの大きさを指定する */
  margin-bottom: 30px;
  font-family: 'Oswald', sans-serif;
  text-align: center;/* 文字・画像を中央にそろえる */
}


/* headerはここ */

header {
    padding-top: 100px;
  text-align: center;
/*  background-color:#ffffe0;*/
     background-color:#d6ffea;
    width: auto;
  min-width: 920px;
    height: 200px;
}


header h1 {
    font-size: 50px;
/*    font-family: 'Limelight', cursive;*/
      font-family:'Source Sans Pro', sans-serif;
/*  color: #ffa500; フォントの色を指定する */
    color: #8ec6ff;
}


header h2 {
    font-size: 30px;
/*  color: #ffa500; フォントの色を指定する */
    color: #8ec6ff;
/*   font-family: 'M PLUS 1p', sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
}


/* sectionのclass about */

.about {
/*  background-color:#ffff93; 背景色を指定する */
    background: #67eaca;
  text-align: center;
    width:auto;
}

.about h2 {
  color:#008db7;
}

.about p {
  margin-bottom: 20px;
  text-align: left;
max-height: 100%; 
  max-width: 700px;/* 幅の最大値を指定する */
  margin: 20px auto;
    color: #434343;
}


/* sectionのclass photo */

.photo {
    height:auto;
    width: auto;
  text-align: center;
    background: -moz-linear-gradient(top, #d1ffe8, #e0ffef);
  background: -webkit-linear-gradient(top, #d1ffe8, #e0ffef);
  background: linear-gradient(to bottom, #d1ffe8, #e0ffef);
}

.photo h2 {
  color:#00a1e9;
}


.mentor{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.suki{
    text-align: left;
    width: 220px;
    height: 400px;
    float: left;
  display: inline-block;/* 要素の表示形式を指定する */
  margin: 5px;
  border: 10px solid #ffffff;/* 枠線を指定する */
  background:#fff;
}

.suki img{
    width: 100%;
}

/*
.photo{
  background: -moz-linear-gradient(top, #FFC778, #ffffb7);
  background: -webkit-linear-gradient(top, #FFC778, #ffffb7);
  background: linear-gradient(to bottom, #FFC778, #ffffb7);
  グラデーション以外は省略
}
*/

/*
.ni-za img{
    width:70%;
    height:55%;
    height:transition:0.5s ease;
    
}

.ni-za{
    text-decoration:none;
    overflow:hidden;
    width:200px;
    height:200px;
    
    
}

.ni-za:hover img{
    margin-left:-15%;
    margin-top:-15%;
    
    width:100%;
    height:57%;
    
    transition:0.5s ease;
}
*/

.ni-za{
     overflow:hidden;
     position:relative;
}

.mask{
    width: 100%;
    height: 98%;
    position:absolute;
    z-index:10;
    top: 0;
    left: 0;
    opacity: 0;
    background-color:rgba(0,0,0,0.4);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;

}
.mask:hover{
    opacity: 1;

}

.click{
    text-align: center;
    color: #fff;
    padding-top: 100px;
    font-size: 130%;
}

/* sectionのclass information */
.infomation p{
     max-height: 100%;
}


.information {
  background-color:#afeeee;
  background-size: cover;
}

.information h2 {
  color:#009999;
    font-weight: bold;
/*    text-shadow: 1px 1px 1px #999999;*/
}

.information div {
  border: 5px solid #82cddd;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
      background: -moz-linear-gradient(top,#bbe2f1,#a0d8ef);
  background: -webkit-linear-gradient(top,#bbe2f1,#a0d8ef);
  background: linear-gradient(to bottom,#bbe2f1,#a0d8ef);
}

.information h3 {
  color:#1e90ff;
  font-size: 28px;
  text-align: center;
    margin-bottom:25px;
     max-height: 999999px; 
}

.information p{
    color: #434343;
     max-height: 999999px; 
}

.information img {
  float: left;/* 要素の回り込みを指定する */
  margin-right: 20px;
}


/* 全てのsection */



/* footerはここ */

footer {
  text-align: center;
  color: #4169e1;
  background:#00ced1;
  padding: 10px 0;
}