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

.sp { display: none; }
.pc { display: block; }

/* ハンバーガーメニュー */ 
@media screen and (max-width: 1024px) { 
    .global-nav{
        display: none;
    }
    header .nav-button {
        display: block;
    }
    .hd-btn{
        margin-right:70px;
    }

	nav{
	  padding: 0;
	}
	
	nav ul{
	  display: block;
	}

	nav ul li a{
		padding: 5px 35px;
	}

	nav ul li a:hover {
		color: #333;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
  }

  nav li.has-child ul li{
	border-bottom: 1px solid #fff;
  }

  nav li.has-child ul li a{
	color: #fff;
	border: none;
  }

  
  /*矢印の位置と向き*/
  
  nav ul li.has-child::before{
	right: 45px;
    top: 28px;
  }
  
  nav ul ul li.has-child::before{
	  transform: rotate(135deg);
	left:20px;
  }
	  
  nav ul li.has-child.active::before{
	  transform: rotate(-45deg);
  }
  
  }

/* ハンバーガーメニュー出現幅より大きい時、ドロワーが開いていた場合は非表示 */ 
@media screen and (min-width: 1025px) { 
    header .drawer{
        display: none !important;
    }
}

/*tablet */
@media screen and (max-width: 1024px) {

    .fb {
        display: block;
    }
    .fb .t-box1 {
        max-width: 100%;
        margin: 0 auto;
    }
    .fb .t-box2 {
        max-width: 100%;
        margin: 0 auto;
    }
    .fb .t-box3 {
        max-width: 100%;
        margin: 0 auto;
    }

    h2 {
        margin-top: 60px;
    }

    .content-mv h1 {
        margin-top: -100px;
    }

    .content.content-mainMessage {
        padding: 0;
    }

    .content-mainMessage .img-title {
        padding-top: 100px;
    }

    .content-about h2 {
        margin-top: 10px;
    }

    .btn-faq img {
        width: 80%;
    }

    .wrap-btn p img {
        margin-top: 20px;
    }

    .content-toCE {
        padding: 12% 5% 5% 5%;
    }

    .content-toCE h2 {
        margin-top: -20%;
    }

    .content-toCE .wrap-toC {
        margin-top: 60px;
        padding: 4% 4% 6% 4%;
    }

    .content-toCE .wrap-toE {
        margin-top: 100px;
        padding: 4% 4% 6% 4%;
    }


    .wrap-toC img {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .wrap-toE img {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .content-reqruit img{
        margin: auto;
        margin-bottom: -40px;
    }

    .content-yb h2{
        margin-top: 0px;
    }

    .wrap-yb {
        margin: 20px 2%;
    }

    .copy-yb {
        top: -20px;
        left: -20px;
    }

    .content-contact {
        margin-top: 60px;
    }

    .content-event .th-r {
        padding-left: 20px;
    }

    .content-event  table td {
        width: 100px;
    }

    /* 園一覧(都道府県別) */
    .h4-title {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .content-facility-ken .vision-value01 .wrap-text {
        padding: 0% 4%;
    } 

    .content-facility-ken .vision-value01 {
        margin-bottom: 60px;
    }

    /* 園個別ページ */
    .content-single .img-facility img {
        max-width: 90%;
    }
}

/* mini tablet */
@media screen and (max-width: 767px) {

    .sp { display: none; }
    .pc { display: none; }
    .tb {display: block;}

    .cform th,.cform td {
        width: 100%;
        display: block;
    }
    .cform th {
        border-bottom: none;
    }
}

/* smart phone */
@media screen and (max-width: 599px) {
    .sp { display: block; }
    .pc { display: none; }

    .sp_left {
        text-align: left;
    }

    .sp_left p {
        text-align: left;
    }

    .text-title {
        text-align: left;
    }
    

    .bg-bubble {
        background: url(../img/bubble.png) no-repeat left -20% top 0px/40% auto,url(../img/bubble.png) no-repeat right -20% bottom 30px/40% auto;
    }

    section {
        padding: 0 10px;
    }

    header .nav-button {
        height: 50px;
        width: 50px;
        right: 6px;
    }
    header .drawer{
        top: 50px;/*ヘッダーの高さ*/
        height: calc(100vh - 50px);/* 100vh-ヘッダーの高さ */
    }

    .header .logo {
        padding: 4% 2% 2% 2%;
        z-index: 100;
    }
    
    .header img {
        width: 90px;
    }

    .content-mv h1{
        background: url(../img/mv-sp.png) no-repeat right -6px TOP 100px/20% auto;
        min-height: 600px;
        background-size: contain;
        margin-left: 10%;
    }

    .content-mv::after  {
        background-image: none;
    }

    .content-mv h1 img {
        left: 0%;
        bottom: 50px;
        width: 65%;
    }

    .sm-fb {
        display: block!important;
    }

    .sm-fb .sm-box1 {
        max-width: 100%;
        margin: 0 auto;
    }
    .sm-fb .sm-box2 {
        max-width: 100%;
        margin: 0 auto;
    }
    .sm-fb .sm-box3 {
        max-width: 100%;
        margin: 0 auto;
    }
    .content.content-mainMessage {
        padding-top: 0px;
        background: url(../img/bubble.png) no-repeat left -40% top 0px/50% auto,url(../img/bubble.png) no-repeat right -40% bottom 30px/50% auto;
    }

    .content-mainMessage  .text-mainMessage {
        padding-bottom: 190px;
    }

    .content-mainMessage .img-title {
        padding-top: 180px;
    }

    .content-mainMessage .wrap-content {
        background: url(../img/top_l.png) no-repeat right -10% top 0px/55% auto,url(../img/top_r.png) no-repeat left -10% bottom 20px/55% auto;
    }

    .content-about .sp {
        width: 100%;
    }

    .content-about .wrap-content {
        padding: 10% 5%;
    }

    .content-reqruit {
        padding: 40px 0 80px 0;
    }

    .content-reqruit img{
        width: 95%;
    }
    .content-gallery {
        padding-top: 20px;
    }

    .content-all {
        background: url(../img/bubble.png) no-repeat left -40% top 0px/50% auto,url(../img/bubble.png) no-repeat right -40% bottom 30px/50% auto;
        padding-top: 20px;
    }

    .content-news {
        background: url(../img/bubble.png) no-repeat left -40% top 0px/50% auto,url(../img/bubble.png) no-repeat right -40% bottom 30px/50% auto;
    }


    .content-contact .btn {
        padding-bottom: 40px;
    }

    .footer .sm-fb{
        display: block;
    }

    /* アルタについて */
    .wrap-section-under .text-about {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 1.8rem;
    }

    .content-company table tr {
        text-align: center;
    }

    .content-company table .sm-box1 {
        margin-bottom: 10px;
        padding-left: 20px;
    }

    .content-visionvalue .vision-value01 img {
       width: 100%;
    }
    
    .content-visionvalue .vision-value02 img{
        width: 100%;
    }
    
    .content-visionvalue .vision-value03 img {
        width: 100%;
    }

    .content-faq-about {
        padding-top: 30px;
    }

    .content-message p {
        font-size: 1.6rem;
    }


     /* 保育理念/目標 */
    .content.content-philosophy{
        padding-top: 60px;
    }

    .content.content-target{
        padding-top: 20px;
    }

    .content-philosophy .h2-goal, .content-target .h2-goal {
        margin-bottom: -10px;
    }
    .vision-value01 img, .vision-value02 img, .vision-value03 img {
        width: 100%;
        margin-bottom: 10px;
    }

    .content-target img {
        width: 100%;
    }

     /* アルタのしくみ */
    .sikumi img{
        max-width: 80%;
    }

    .content-system .vision-value01 .t-box1 {
        margin-right: 0px;
    }
    
    .content-system .vision-value02 .t-box1 {
        margin-right: 0px;
    }
    
    .content-system .vision-value03 .t-box1 {
        margin-right: 0px;
    }

    .content-system .text-title {
        text-align: center;
    }

    .content-system .vision-value01,.content-system .vision-value02,.content-system .vision-value03 {
        margin-top: 60px;
    }

    /* 保護者の方へ */
    .content-under.content-menu {
        min-height: 260px;
    }


     /* 保育の流れ */
    .content-schedule table th {
        min-width: 110px;
     }

    .content-event table th {
        width: 24px;
     }

     /* お知らせ/ブログ記事ページ */
    .content-single .wrap-content img {
        max-width: 100%;
     }

    /* 従業員の方へ */
    .employee p {
        text-align: left;
    }


}