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

/**************************/
/*初期化*/
/**************************/
*{
  padding:0px;
  margin:0px;
  line-height:100%;
  color:#584b3a;
  border:none;
  font-weight:normal;
  font-style:normal;
}
@media screen and (max-width: 768px) {
  *{
    box-sizing: border-box;
  }
}

/**************************/
/*要素*/
/**************************/
body{
  font-size:13px;
  line-height:1.3em;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  /*木目*/
  background-image:url(../img/wood_back.jpg);
  background-position:center top;
  background-repeat:repeat-y;
  text-align:center;
}
@media screen and (max-width: 768px) {
  body{
    background-image: none;
    font-size: 14px;
  }
}

/*ロゴ上テキスト*/
h1{
  width:747px;
  font-size:11px;
  padding:9px 0px 15px 5px;
  float:left;
  display:block;
}
h2{
  width:270px;
  height:59px;
  float:left;
  margin:0px 0px 0px 5px;
}
@media screen and (max-width: 768px) {
  h2{
    width: auto;
    height: 43px;
    margin: 0;
  }
}

/*ページタイトル*/
h3#pageTitle{
  width:840px;
  margin:0px auto 30px auto;
}
@media screen and (max-width: 768px) {
  h3#pageTitle{
    width: 100%;
    margin:0px auto 30px auto;
  }
}


/**************************/
/*クラス・ID*/
/**************************/

/*============*/
/*おおまかな構成*/
/*============*/

/*布地*/
#wrap{
  width:1000px;
  margin:0px auto;
  background-image:url(../img/cloth_bg.gif);
  background-position:left top;
  background-repeat:repeat-y;
  text-align:left;
}
/*布地　chrome＠右方向1pxズレ対策*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
  #wrap{
    padding-right:1px;
  }
}*/

@media screen and (max-width: 768px) {
  #wrap{
    box-sizing: border-box;
    width: 100%;
    min-width: 320px;
  }
}


/*ヘッダー*/
#header{
  width:975px;
  margin:0px 0px 0px 25px;
}
@media screen and (max-width: 768px) {
  #header {
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: 75px;
    padding: 16px 0px 16px 15px;
    background-image:url(../../../common/img/cloth_bg.gif);
    background-position: left top;
    background-repeat: repeat-y;
    margin: 0 20px;
  }
}
@media screen and (max-width: 520px) {
  #header {
    padding: 16px 20px 16px 20px;
    margin: auto;
  }
}
@media screen and (max-width: 375px) {
  #header {
    padding: 16px 20px 16px 20px;
    margin: auto;
  }
}


/*「愛和学院は〜」・「電話番号」*/
@media screen and (max-width: 768px) {
  #tel_txt{
    display: none;
  }
}


/*愛和学院は〜*/
@media screen and (max-width: 768px) {
  #header h1 {
    display: none;
  }
}

/*電話番号*/
#tel{
  width:183px;
  float:right;
  padding:8px 25px 0px 0px;
}
@media screen and (max-width: 768px) {
  #tel{
    display: none;
  }
}

/*ロゴ*/
#logo{
  display:block;
  width:975px;
  height:77px;
  background-image:url(../img/aiwagakuin/navi_top_bk.png);
  background-repeat:no-repeat;
  background-position:center top;
  margin:0px 0px 0px 0px;
  clear:both;
}
@media screen and (max-width: 768px) {
  #logo{
    background-image: none;
    background-repeat: no-repeat;
    background-position:  right bottom;
    height: auto;
    width: auto;
    position: relative;
    /*z-index: 3;*/
    z-index: 3;
  }
}

/*タブレット以下時に表示するお花*/
#flower{
  display: none;
  font-size: 0;
}
@media screen and (max-width: 768px) {
  #flower{
    display: block;
    position: absolute;
    right: 0;
    bottom: -27px;
    /*z-index: 2;
    z-index: 1;*/
    z-index: 2
  }
}
@media screen and (max-width: 520px) {
  #flower{
    width: calc(290px/100*70);
    bottom: -19px;
    right: 20px;
  }
  #flower img{
    width: 100%;
  }
}
@media screen and (max-width: 414px) {
  #flower{
     width: calc(203px/100*80); 
    bottom: -15px;
    right: 20px;
  }
  #flower img{
    width: 100%;
  }
}



/*スマホメニュー*/
#menu_sp{
  display: none;
}
@media screen and (max-width: 768px) {
  #menu_sp{
    display: block;
    width: 100%;
    position: fixed;
    z-index: 10;
    right: 0;
    top: 0px;
  }
  /*　ハンバーガーボタン　*/
  .hamburger {
    display : block;
    position: absolute;
    /*z-index: 5;*/
    background-color: #584B3A;
    right: 20px;
    top: 16px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    border-radius: 42% 58% 59% 41% / 50% 59% 41% 50%;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width: 20px;
    height  : 2px;
    left: 10px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 13px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 27px;
  }

  /* ナビ開いてる時のボタン */
  .hamburger.active{
    position: fixed;
    z-index: 25;
  }
  @media screen and (max-width: 320px) {
    .hamburger.active{
      top: 17px;
    }
  }
  
  .hamburger.active span{
    width: 22px;
  }
  .hamburger.active span:nth-child(1) {
    top: 20px;
    left: 9px;
    background :#fff;
    /* -webkit-transform: rotate(-45deg); */
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 20px;
    background :#fff;
    /* -webkit-transform: rotate(45deg); */
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  
  nav.globalMenuSp {
    display: none;
    position: fixed;
    z-index: 10;
    top  : 0;
    left : 0;
    color: #fff;
    background: rgba(255,255,255,0.95);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    padding: 68px 24px 0px 24px;
    z-index: 20;
  }

  nav.globalMenuSp ul {
    /*margin: 0 auto 50px auto;*/
    margin: 0 auto 0 auto;
    padding: 0;
    width: 100%;
    background: url("../img/aiwagakuin/spmenu_dot_line.svg") repeat-x left top;
  }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    text-align: left;
    transition: .4s all;
    background: url("../img/aiwagakuin/spmenu_dot_line.svg") repeat-x left bottom;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }

  nav.globalMenuSp ul li a {
    display: block;
    padding: 17px 20px;
    text-decoration :none;
  }
  nav.globalMenuSp ul li div {
    position: relative;
    padding: 17px 20px;
  }
  
  nav.globalMenuSp ul li a img{
    width: auto;
    height: auto;
  }

  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
    /* box-sizing: content-box; */
    display: block;
    opacity: 100;
    position: absolute;
    min-height: 100vh;
    height: 100%;
    position: fixed;
    overflow-y: scroll;
  }
  nav.globalMenuSp.lock {
    display: block;
    opacity: 100;
    position: absolute;
    height: 100vh;
    position: fixed;
    overflow-y: scroll;
  }
  
  nav.globalMenuSp ul li.childMenu{
    background: url("../img/aiwagakuin/spmenu_dot_line.svg") repeat-x left bottom;
    transition: unset;
  }
  nav.globalMenuSp ul li.childMenu:hover{

  }
  
  nav.globalMenuSp ul li.childMenu ul{
    display: none;
    background-repeat: no-repeat;
    background-position: center;
    transition: .4s all;
    background: none;
  }
  
  nav.globalMenuSp ul li.childMenu ul li{
    background-image: none;
  }
  
  nav.globalMenuSp ul li.childMenu ul li a{
    padding: 14px 40px;
  }
  nav.globalMenuSp ul li.childMenu ul li:last-child a{
    padding: 14px 40px 17px 40px;
  }
  nav.globalMenuSp ul li.childMenu img.icon_updown{
    display: block;
    position: absolute;
    right: 20px;
    top: 23px;
  }
  
  nav.globalMenuSp ul li.childMenu ul.open{
    display: block;
  }
  nav.globalMenuSp ul li.childMenu ul.lock{
    display: block;
  }
  
  
  nav.globalMenuSp ul#spmenu_btn{
    background-image: none;
    margin-top: 50px;
  }
  nav.globalMenuSp ul#spmenu_btn li{
    transition: unset;
    border: 1px dashed #584B3A;
    border-radius: 10px;
    background-image: none;
  }
  nav.globalMenuSp ul#spmenu_btn li a{
    padding: 19px 20px;
    line-height: 0;
  }
}
@media screen and (max-width: 320px) {
  #menu_sp{
    /*position: relative;*/
  }
}

@media screen and (max-width: 520px) {
  /*　ハンバーガーボタン　*/
  .hamburger {
    right: 20px;
    top: 16px;
  }
}
@media screen and (max-width: 375px) {
  /*　ハンバーガーボタン　*/
  .hamburger {
    right: 20px;
    top: 16px;
  }
}
@media screen and (max-width: 320px) {
  /*　ハンバーガーボタン　*/
  .hamburger {
    /*right: 20px;
    top: -59px;*/
  }
}



.active_menu{
  /* ピンク filter: brightness(0) saturate(100%) invert(77%) sepia(30%) saturate(5409%) hue-rotate(300deg) brightness(91%) contrast(103%);*/
  filter: brightness(0) saturate(100%) invert(40%) sepia(57%) saturate(4796%) hue-rotate(173deg) brightness(90%) contrast(101%);
}


/*ナビゲーション*/
#gnaviWrap{
  width:975px;
  height:72px;
  margin:0px 0px 0px 25px;
  background-image:url(../img/aiwagakuin/navi_bottom_bk.png);
  background-repeat:no-repeat;
}
@media screen and (max-width: 768px) {
  #gnaviWrap{
    display: none;
  }
}

/*ナビゲーションリスト*/
ul#gnavi{
  list-style:none;
  width:898px;
  margin:0px 0px 0px 45px;
  height:45px;
  clear:both;
}
/*リスト*/
ul#gnavi li{
  list-style:none;
  height:45px;
  float:left;
}

/*白地*/
#contents{
  width:940px;
  background-image:url(../img/contents_back.png);
  background-repeat:repeat-y;
  background-position:top center;
  padding:0px 30px 0px 30px;
}
@media screen and (max-width: 768px) {
  #contents{
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/**********************/
/*トップページ　　　　*/
/**********************/
/*白地＠本文が入るエリア*/
#contents .area{	
  width:890px;
  padding:0px 0px 80px 0px;
  margin:0px 25px;
}
#contents .area picture{
  display: block;
  font-size: 0;
}
@media screen and (max-width: 768px) {
  #contents .area{
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 30px 20px 70px 20px;
  }
}
@media screen and (max-width: 520px) {
  #contents .area{
    padding: 30px 10px 50px 10px;
  }
}

/**********************/
/*その他ページ　　　　*/
/**********************/
/*白地＠本文が入るエリア*/
#contents .area_other{
  width:840px;
  padding:28px 0px 80px 0px;
  margin:0px 50px 0px 50px;
}
@media screen and (max-width: 768px) {
  #contents .area_other{
    width: 100%;
    padding: 40px 30px 70px 30px;
    margin: 0;
  }
}
@media screen and (max-width: 520px) {
  #contents .area_other{
    padding: 40px 24px 50px 24px;
  }
}


/*メイン画像*/
h3.mainImg{
  width:890px;
  margin:0px auto 12px auto;
}
img.mainImg{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  h3.mainImg{
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 375px) {
  h3.mainImg{
    margin-bottom: 20px;
  }
}


/*入り口*/
ul#enter{
  list-style:none;
  width:890px;
}
@media screen and (max-width: 768px) {
  ul#enter{
    max-width: 327px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

ul#enter li{
  list-style:none;
  float:left;
}
@media screen and (max-width: 768px) {
  ul#enter li{
    float: none;
    margin-bottom: 7px;
  }
  ul#enter li:last-child{
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  ul#enter li img{
    width: 100%;
  }
}


/*白地下部ボカシ*/
.shadow{
  background-image:url(../img/shadow_bottom.png);
  background-position:left top;
  background-repeat:repeat-x;
  width:943px;
  margin:0px 0px 0px 30px;
  font-size:1px;
  line-height:1px;
  height:10px;
}
@media screen and (max-width: 768px) {
  .shadow{
    display: none;
  }
}

/*コンテンツ一覧＆お問合せください*/
#itemListContactWrap{
  padding:18px 30px 13px 30px;
}
@media screen and (max-width: 768px) {
  #itemListContactWrap{
    padding: 30px 0 33px 0;
  }
}


/*コンテンツ一覧リスト*/
ul.itemList{
  list-style: none;
}
@media screen and (max-width: 768px) {
  ul.itemList{
    text-align: center;
  }
}
ul.itemList li{
  list-style: none;
  border-left:1px solid #584b3a;
  padding:0px 20px;
  float:left;
}
@media screen and (max-width: 768px) {
  ul.itemList li{
    float: none;
    display: inline-block;
  }
}
@media screen and (max-width: 620px) {
  ul.itemList li{
    display: block;
    border: none;
    line-height: 2.5em;
  }
}

ul.itemList li.end{
  border-right:1px solid #584b3a;
}
@media screen and (max-width: 768px) {
  ul.itemList li.end{
    /*display: none;*/
  }
}



/*緑*/
#footer{
  width:1000px;
  height:45px;
  background-image:url(../img/footer_bg.png);
  background-position:left bottom;
  background-repeat:no-repeat;
  color:#ffffff;
  text-align:right;
}
@media screen and (max-width: 768px) {
  #footer{
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
  }
}

/*コピーライト*/
#footer div.copy{
  padding:16px 30px;
  color:#ffffff;
}
@media screen and (max-width: 768px) {
  #footer div.copy{
    text-align: center;
    font-size: 11px;
    padding: 20px 0 14px 0;
  }
}

/*============*/
/*装飾*/
/*============*/
.cl{
  clear:both;
  font-size:0px;
  line-height:0px;
  font-size:0px;
}

/**************************/
/*クリア*/
/**************************/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE Mac */
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}