@charset "UTF-8";

/*ローディング*/
#loader {opacity: 1;
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: #6f4e2c;
    top: 0;
    left: 0;
}
#loader svg {
  display: none;
}
.blobswaku{ position: absolute; top:30%; left:50%; margin-left:-150px;}
.blobs {
  -webkit-filter: url(#goo);
          filter: url(#goo);
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 70px;
}
.blobs .blob-center {
  position: absolute;
  background: #FFF200;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
          transform: scale(0.9) translate(-50%, -50%);
  -webkit-animation: blob-grow linear 3.4s infinite;
          animation: blob-grow linear 3.4s infinite;
  border-radius: 50%;
  box-shadow: 0 -10px 40px -5px #FFF200;
}

.blob {
  position: absolute;
  background: #FFF200;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  -webkit-animation: blobs ease-out 3.4s infinite;
          animation: blobs ease-out 3.4s infinite;
  -webkit-transform: scale(0.9) translate(-50%, -50%);
          transform: scale(0.9) translate(-50%, -50%);
  -webkit-transform-origin: center top;
          transform-origin: center top;
  opacity: 0;
}
.blob:nth-child(1) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.blob:nth-child(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.blob:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.blob:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.blob:nth-child(5) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
            transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
            transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}

@keyframes blobs {
  0% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
            transform: scale(0) translate(calc(-330px - 50%), -50%);
  }
  1% {
    opacity: 1;
  }
  35%,65% {
    opacity: 1;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
            transform: scale(0) translate(calc(330px - 50%), -50%);
  }
}
@-webkit-keyframes blob-grow {
  0%,  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
  40%, 42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%, 44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%, 46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%, 48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
            transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
            transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%, 70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
            transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
            transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%, 81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%, 83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%, 85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%, 87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%, 91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%, 100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
}
@keyframes blob-grow {
  0%,  39% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
  40%, 42% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  43%, 44% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  45%, 46% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  47%, 48% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  52% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  54% {
    -webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
            transform: scale(1.7, 1.6) translate(-50%, -50%);
  }
  58% {
    -webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
            transform: scale(1.8, 1.7) translate(-50%, -50%);
  }
  68%, 70% {
    -webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
            transform: scale(1.7, 1.5) translate(-50%, -50%);
  }
  78% {
    -webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
            transform: scale(1.6, 1.4) translate(-50%, -50%);
  }
  80%, 81% {
    -webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
            transform: scale(1.5, 1.4) translate(-50%, -50%);
  }
  82%, 83% {
    -webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
            transform: scale(1.4, 1.3) translate(-50%, -50%);
  }
  84%, 85% {
    -webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
            transform: scale(1.3, 1.2) translate(-50%, -50%);
  }
  86%, 87% {
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
            transform: scale(1.2, 1.1) translate(-50%, -50%);
  }
  90%, 91% {
    -webkit-transform: scale(1, 0.9) translate(-50%, -50%);
            transform: scale(1, 0.9) translate(-50%, -50%);
  }
  92%, 100% {
    -webkit-transform: scale(0) translate(-50%, -50%);
            transform: scale(0) translate(-50%, -50%);
  }
}




/*しずく*/
.headslid{ position:relative}
 .loadinga{
    filter:url(#water);
    position: absolute;
    bottom:-95px;
    left:50%;
	margin-left:-5px
  }
 @media screen and (min-width: 540px) { .loadinga{ bottom:-80px;} }
  @media screen and (min-width: 640px) { .loadinga{ bottom:-95px;} }
   @media screen and (min-width: 980px) { .loadinga{ bottom:-85px;} }
  
  .drop{
    position:relative;
    width:64px;
    height:200px;
  }
  .drop > .start{
    position:absolute;
    width:64px;
    height:64px;
    background-color:#ffeb4e;
    border-radius:50%;
  }
  .drop > .start{
    top:0;
  }

  .drop > .mid{
	      position:absolute;
    width:32px;
    height:32px;
    top:16px;
    left:16px;
    background-color:#ffeb4e;
    border-radius:50%;
	-webkit-animation: drop-mid 2s ease-in-out infinite;
    animation: drop-mid 2s ease-in-out infinite;
  }
  .drop > .mid:nth-child(2){
    border-radius:1px solid black;
    animation-delay: 1s;
  }
  
 @-webkit-keyframes drop-mid{
    0%{
      top:32px;
    }
    100%{
      top:calc(100% - 64px);
    }
	}  
 
  @keyframes drop-mid{
    0%{
      top:32px;
    }
    100%{
      top:calc(100% - 64px);
    }
  }



/*----------お知らせ　通信----------*/
time{ font-size:10px; letter-spacing:2px; display:block;}
.hexagon{ float:left;  max-width:80px; width:20%;}
.comeBox{ float:right; width:75%;font-size:13px}
li:nth-child(2) .hexagon{ float:right;  max-width:80px; width:20%;}
li:nth-child(2) .comeBox{ float:left; text-align:right; width:75%;  }

@media screen and (max-width: 470px) {
.comeBox{ float:right; width:70%}
li:nth-child(2) .hexagon{ margin-right:10px}
li:nth-child(2) .comeBox{ width:70% }
}




/*----------headslid----------*/
.headslid{ margin:20px 0; background:url(../img/hati_ten.gif) no-repeat 60% bottom; position:relative}
.headslid .slick02 li{ padding:0 0px}
.headslid .slick02 img{ margin:0 auto; max-width:570px; width:100%} 
.headslid .slick-slider{ margin-bottom:20px}
.headslid .bee{ position:absolute; width:60px; bottom:10%; left:50%; margin-left:100px}

@media screen and (min-width: 800px) {
.headslid{ margin:20px 0; background:url(../img/hati_ten.gif) no-repeat center bottom;}
.headslid .bee{ position:absolute; width:60px; bottom: 10%; left:50%; margin-left:250px}
}


/*----------infomationCont----------*/
.infomationCont { margin:50px 0 60px}
.infomationCont h2{ text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px; margin-bottom:20px}
.infomationCont h3{ font-size:13px}
.infomationCont li{	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; margin-bottom:10px}
.infomationCont li:hover{ background: #f4f4f4 }

/*----------aboutBox----------*/
.nami01{ height:60px; width: 100%}
.aboutBox{ background:#ffeb4e; line-height:2.2em; padding:20px 0 80px}
.aboutBox h2{ text-align:center;width:200px;
  height:86px;
  background: url(../img/top/honey.png) no-repeat;
  background-size:200px 86px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0px auto ;}
.aboutBox .text01{ font-size:18px;text-align:center; font-weight:bold}
.aboutBox .text03{text-align: center}
.aboutBox .text02{ margin:10px auto 40px; max-width:740px }

.aboutBox .pbana{text-align: center}
.aboutBox .pbana a{display:inline-block}
.aboutBox .pbana img{max-width:330px; margin: 0 auto 20px}
.aboutBox .atte{text-align: center ; line-height: 1.5; margin-bottom: 20px; margin-top: 10px}
.aboutBox .atte span{display: block; padding-top: 10px}
.aboutBox ul{ max-width:460px; margin:30px auto 0}
.aboutBox li{background: #fff8bf;     padding: 10px 20px; text-align: center;
    letter-spacing: -1px;
    line-height: 1.5;
    margin-bottom: 8px;
    border-radius: 360px;}



.aboutBox .btncss span{ padding:10px 10px}

/*----------whatCont----------*/
.slick-slide .btncss img{ display:inline}
.whatCont .slick-slider{ margin-bottom:0px}

.whatCont li{ margin-bottom:80px}
.whatCont dt img{ width:100%; max-width:430px}
.whatCont dt{ text-align:center; padding:0 0 0 30px}
.whatCont dfn.wtitle1{
  height:135px;
  background: url(../img/top/what_rinpa.png) no-repeat;
  background-size:150px 133px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0 auto;
  display:block;
  margin-top:-98px; z-index:1; position:relative }

.whatCont dfn.wtitle2{
  height:135px;
  background: url(../img/top/what_hai.png) no-repeat;
  background-size:150px 133px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0 auto;  display:block;
  margin-top:-98px; z-index:1; position:relative }

.whatCont dl{ padding:0 20px}
.whatCont dt img{ margin:0 auto}
.whatCont .text01{font-size:13px}
.whatCont .text02{ font-weight:bold; margin:15px 0 5px}
.whatCont .text03{font-size:11px; margin:0px 0 20px; line-height:1.6em}


/*----------pointCont----------*/
.pointCont{}
.pointCont .pcno980{ text-align:center; background:#e7f0f7}
.pointCont .pcno980 img{ max-width:740px; width:100%}
.pointCont .pcno li{ float:left; width:50%; padding:20px;border-bottom: dashed 1px #65432a; font-size:12px; line-height:1.7em}
.pointCont .pcno li:nth-child(odd){ border-right: dashed 1px #65432a;}
.pointCont .btncss span{ padding:5px 10px}
.pointCont .fe{ font-size:20px; display:inline-block; padding-right:10px }
.pointCont .btncss button{ margin-top:10px}


/*----------planCont----------*/
.planCont{ padding-top:70px}
.planCont h2{text-align:center; font-size:35px; font-weight:bold; letter-spacing:2px; margin-bottom:30px}
.planCont .tit{ text-align:center}
.planCont .tit img{ width:102px; margin:0 auto 15px;}

.planCont a.ninkatu{ display:  block; text-align: center; padding: 8%}
.planCont a.ninkatu img{max-width:330px; margin: 0 auto}


.planCont .menuRinpa{ background: url(../img/bg_line.gif) repeat-x center 5px; text-align:center; padding-bottom:40px;
max-width:1100px; margin:0 auto }
.planCont h3{text-align:center; font-size:15px; font-weight:bold; letter-spacing:2px; margin:0 auto 20px; display:inline-block;
background:#fff; padding:0 10px}
.planCont .h4t{text-align: center; margin-top: -10px}
.planCont a img{-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; display:block}
.planCont a:hover img{transform: translate(0px,5px);}



.planCont h4{ font-size:18px; font-weight:bold ; color: #ff8e8e;}
.planCont h4 span{font-family: 'Quicksand', sans-serif; font-weight:400; display:block; font-size:40px; letter-spacing:2px; margin-bottom:15px ;line-height: 1;}
.planCont .nameBox{transition: all 1s; text-align:right}
.planCont .nameBox:hover{transform: translate(10px,0px);}
.planCont .yaslid, .planCont .yaslid img{ width:38px; display:inline-block;}

.planCont .slick-slider{ margin-bottom:10px}
.planCont .slick04 img { max-width:330px}

.planCont .menuRinpa .text01{ text-align:right; font-size:11px; padding-top:20px; line-height:1.4em; }
.planCont .menuRinpa .text01 a{ text-decoration:underline; color:#ff6f57;	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;}
.planCont .menuRinpa .text01 a:hover{ text-decoration:none}

.planCont .menu01{ position:relative; max-width:450px; margin:0 auto}
.planCont .menu01 .nameBox{position:absolute; bottom:10%; right:0;}

.planCont .menu01a{padding-top: 25px}
.planCont .menu01a{ position:relative; max-width:450px; margin:0 auto}
.planCont .menu01a .nameBox{position:absolute; bottom:10%; right:0;}


.planCont .menu02{ position:relative; max-width:450px; padding-top:25px; margin:0 auto }
.planCont .menu02 .nameBox{position:absolute; bottom:10%; left:0;}
.planCont .menu02 ul {width:330px; float:right}


.planCont .menuHai{ background: url(../img/bg_line.gif) repeat-x center 5px; text-align:center }
.planCont .courseBox{ padding-top:20px}

.aboutBox .icon158{text-align: center}
.aboutBox .icon158 img{max-width:158px }

.planCont .courseBox li{ width:46%; float:left;}
.planCont .courseBox li:first-child{ margin-right:8%}
.planCont .courseBox .slick04 li{ width:auto; }
.planCont .courseBox .slick04 li:first-child{ margin-right: auto}
.planCont .courseBox .slick-dots li{ width:auto; float:none}
.planCont .courseBox .slick-dots li:first-child{ margin-right: auto}

.planCont .courseBox .slick04 img{ width:100%}
.planCont .courseBox  h4 span{ font-size:15px; margin-bottom:0;}
.planCont .courseBox .yaslid, .planCont .courseBox .yaslid img{ margin-top:0px}


.planCont #hikari .tit{margin-top: 60px;}


/*----------planCont----------*/
.voiceCont{ padding-top:70px;}
.voiceCont h2{text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px; margin-bottom:30px}

.voiceCont ul{ background:url(../img/bg_tree_le.png) no-repeat right bottom; background-size:174px 220px}
.voiceCont li{ float:left; width:46%; margin-bottom:20px}
.voiceCont li:nth-child(odd){ margin-right:8%}
.voiceCont li:last-child{ margin-bottom:60px}

.voiceCont h3{ text-align:left; line-height:1.4em}
.voiceCont .comeBox{ text-align:left; width:100%; float:none}
.voiceCont li:nth-child(2) .comeBox{ text-align:left; width:100%; float:none}
.voiceCont .snip1352 img{ width:100%; max-width:290px}



/*----------reasonCont----------*/
.reasonCont{ padding-top:50px; background:#ffe4dc; font-size:13px}
.reasonCont h2{text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px; margin-bottom:30px}
.reasonCont img{ width:100%; max-width:346px; margin-bottom:10px}
.reasonCont li{ float:left; width:46%; margin-bottom:20px; line-height:1.6em}
.reasonCont li:nth-child(odd){ margin-right:8%}
.reasonCont li:last-child{ margin-bottom:60px}




/*----------columnCont----------*/
.columnCont{padding-top:70px;}
.columnCont h2{text-align:center; font-size:25px; font-weight:bold; letter-spacing:2px; margin-bottom:30px}
.columnCont h3{ margin:15px 0}



/*----------instaCont----------*/
.instaCont{padding-top:50px;}
.instaCont h2{ text-align:center; margin-bottom:15px}
.instaCont h2 img{ max-width:230px; width:100%}










@media screen and (max-width: 458px) {
.planCont .menu02 ul{ width:240px}
.planCont .slick04 img{max-width:240px}	
.planCont .menuRinpa .text01 a{ display:block}

.planCont .courseBox  h4 { font-size:15px}

	}

@media screen and (min-width: 530px) {
.comeBox{ width:81%}	
}

@media screen and (min-width: 640px) {
		
.aboutBox h2{ text-align:center;width:296px;
  height:128px;
  background: url(../img/top/honey.png) no-repeat;
  background-size:296px 128px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0 auto }


.whatCont dfn.wtitle1{
  height:184px;
  background: url(../img/top/what_rinpa.png) no-repeat;
  background-size:208px 184px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0 auto;
  display:block;
  margin-top:-100px; z-index:1; position:relative }

.whatCont dfn.wtitle2{
  height:184px;
  background: url(../img/top/what_hai.png) no-repeat;
  background-size:208px 184px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin:0 auto;  display:block;
  margin-top:-100px; z-index:1; position:relative }
  
  
.instaCont h2{ float:left; width:20%}  
.instaCont .wig{ width:75%; float:right}
  
}
 
@media screen and (min-width: 760px) {
 
 .aboutBox li{margin-bottom: 30px}
 
.infomationCont{ position:relative; background:url(../img/bg_tree.gif) no-repeat center bottom; background-size:1196px 350px} 
.infomationCont h2{ position:absolute; left:50%; margin-left:-60px; top:50px} 

.columnCont{ position:relative; background:url(../img/bg_tree.gif) no-repeat center bottom; background-size:1196px 350px} 
.columnCont h2{ position:absolute; left:50%; margin-left:-80px; top:100px; letter-spacing:4px} 

.infoCont ul {width:720px; margin:0 auto}
.infoCont li{ width:33%; float:left; margin-right:3%; max-width:225px;}
.infoCont li:last-child{ margin-right:0}
.infoCont li:nth-child(2){ margin-top:130px}
.infoCont li:nth-child(2) .hexagon{ float:none}
.infoCont li:nth-child(2) .comeBox{width:100%; text-align:left}
.infoCont .hexagon{ float:none}
.infoCont .comeBox{ float:none; width:100%; max-width:225px}
  
.whatCont .slick03{ max-width:720px; margin:0 auto}
 
 

.voiceCont ul{ background:none; max-width:950px;margin:0 auto; width:auto} 
.voiceCont li:nth-child(odd){ margin-right:0}
.voiceCont li{ width:30%; margin-right:5%; max-width:100%}
.voiceCont li:first-child{ margin-right:5%}
.voiceCont .infoCont li:nth-child(2){ margin-top:0; margin-right:5%}

}


@media screen and (min-width: 820px) {
.w950{ max-width:950px; margin:0 auto}
	
.planCont h3{ padding-bottom:40px}

.planCont .menu01{ width:46%; float:left; padding-top: 0}
.planCont .menu02{ width:46%; float: right; padding-top:0}

#hikari .menuleft{ width:66%; float:left }
#hikari .menu01a{ width:47%; float:left ;  padding-top: 0}
#hikari .menu01{ width:47%; float:right}

#hikari .menu02{ width:30%; float: right; padding-top:0}

#hikari .slick04 img{width: 250px}
#hikari h4 span{font-size:30px }

.planCont .menu02 ul{ float:none}
.planCont .menu02 .nameBox{ right:0}


.planCont .courseBox{ padding-top:0; width:46%; float:right }
.planCont .courseBox li{ width:46%; float:left}
.planCont .courseBox li:last-child{ width:46%; float:right}

.reasonCont li{width:30%;margin-right:5% ; min-height: 340px}
.reasonCont li:nth-child(odd),
.reasonCont li:nth-child(3),
.reasonCont li:nth-child(6){margin-right:0%}

.reasonCont li:nth-child(4){ margin-left: 17%; }

.reasonCont li:first-child,
.reasonCont li:nth-child(5){ width:30%; margin-right:5%}
	
}

@media screen and (min-width: 880px) {
.pbana {max-width:330px ; margin: 0 auto;
  gap: 10px; /* 画像間の余白 */
}

.pbana a {
  display: block;
}

.pbana img {
  display: block;
}
}

@media screen and (max-width: 979px) {
.point8a,.point8b{ display:none}
}

@media screen and (min-width: 980px) {

.headslid{ margin-top:-30px !important}

.aboutBox h2{ margin-bottom:10px; margin-top:20px}
.aboutBox .text01 { font-size:30px;}
.aboutBox .text01 span{letter-spacing:3px}
.aboutBox .text02{ text-align:center; margin:38px auto ; line-height:2em; font-size:18px}
.aboutBox .text02 a{font-size: 15px;
    line-height: 1.8;
    margin-top: 15px;}
.aboutBox .text02 span{ display:block}

.aboutBox .harua{line-height: 1.2}
.aboutBox .harua span{font-size: 10px;}


.pbana {max-width:1100px ; }

.infomationCont{ margin:80px 0 110px}
.infomationCont li:hover{transform: translate(0px,5px); background:none}

.infomationCont h2{ font-size:30px; top:70px}
.infoCont ul {width:860px; margin:0 auto}
.infoCont li{max-width:260px; width:30%; margin-right:5%;}
time{ text-align:center; font-size:13px; font-weight:400}
.infoCont .comeBox{ max-width:260px}

.voiceCont h2{ font-size:30px; margin-bottom:50px}
.voiceCont h3{ line-height:1.8em}

.whatCont .slick03{ width:100%; max-width:1100px}
.whatCont dt{ width:40%; float:left; max-width:430px; text-align:left}
.whatCont dd{width:55%; float: right}
.whatCont dt{ padding-left:0}
.whatCont dt img{ margin:0;}
.whatCont dfn.wtitle1{margin-top:0}
.whatCont dfn.wtitle2{margin-top:0}
.whatCont dfn{ float:left; width:38%; }
.whatCont .text01{ float:right; width:60%; font-size:16px; line-height:2.3em; margin-top:30px}
.whatCont .text02{ letter-spacing:2px; font-size:18px; margin:30px 0 10px}
.whatCont .text03{ font-size:16px; letter-spacing:1px; line-height:1.8em;}

.whatCont .slick-prev:before,
.whatCont .slick-next:before{ top:-60px;}
.whatCont .btncss span{ padding:15px 10px}


.planCont h3{ font-size:28px}
.planCont .h4t{margin-top: -50px; margin-bottom: 30px;}

.pointCont{ background:url(../img/top/bg_point.png) no-repeat center top #dbe2e8; padding-top:60px}
.pointCont h2{ text-align:center; margin-bottom:40px;}
.pointCont h2 img{ width:320px }

.pointCont ul li{ max-width:400px; margin-bottom:50px}
.pointCont ul li img{ max-width:400px; width:100%}
.pointCont ul.point8a{ width:40%; float:left}
.pointCont ul.point8b{ width:35%; float:right}
.pointCont ul.point8b li{ max-width:350px;}
.pointCont ul.point8b li img{ max-width:350px; width:100%}

.pointCont ul a{ display:block; transition: all 1s;}
.pointCont ul a:hover{ transform: translate(5px,0px);}

.voiceCont li{ margin-bottom:120px}


.reasonCont{ background:url(../img/reason_bg.png) no-repeat center 60px #ffe4dc; padding-top:100px}
.reasonCont h2{ font-size:30px; margin-bottom:50px}
.reasonCont li{ margin-bottom:60px}
.reasonCont li:nth-child(4){margin-left: 200px}
.reasonCont img{ margin-bottom:20px}
.reasonCont p{ font-size:15px; line-height:1.8em}


.columnCont h2 { font-size:30px; top:140px; }
.infoCont li{-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.infoCont li:hover{transform: translate(0px,5px); background:none}
}



@media screen and (min-width: 1150px) {
.whatCont .text02 { font-size:20px; margin-bottom:19px}
.whatCont .text03{ margin-bottom:30px}
.pointCont ul.point8b{ width:350px}
		
	}



@media screen and (min-width: 1200px) {
.whatCont .slick03{ max-width:1140px}
.pointCont{ background:url(../img/top/bg_point2.png) no-repeat center top #dbe2e8; padding-top:60px}
		
	}