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

/* -----------------------------------------------------------
	common
------------------------------------------------------------*/
html,body {
height:100%;
}

html {
font-family: 'Noto Sans JP';
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-weight: 400;
color:#555;
line-height:1.5;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}

/* ゴシック系 */
body, table, th, td, p, li, dt, dd, div, span {
font-family:'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
/* 明朝系 */
.min, h2 {
font-family:'Noto Serif CJK JP', "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

h1, h2, h3, h4, h5, h6 {
color:#AC433F;
}
/* La Belle */
.ttl-labelle {
  font-family: 'La Belle Aurore', 'cursive';
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p,li,dt,dd,th,td,div,span,em {
color: #555;
font-size: 16px;
line-height: 1.85;
word-wrap: break-word;
}

ul,ol {
padding:0;
margin:0;
list-style: none;
}
li {
list-style: none;
}
table {
width: 100%;
border-collapse: collapse;
}
a {
  color:#AC433F;
  word-break: break-word;
}
#header a:hover, #footer a:hover {
  text-decoration: none;
}

@media screen and ( min-width: 751px ){
  a {
  -webkit-transition: background  0.3s ease, color 0.3s ease;
  -moz-transition: background  0.3s ease, color 0.3s ease;
  -o-transition: background  0.3s ease, color 0.3s ease;
  transition: background  0.3s ease, color 0.3s ease;
}
	a:hover {
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	opacity: 0.7;
	/* text-decoration: none; */
	color:inherit;
	cursor:pointer;
  transition:opacity 0.3s;
	}

	a:hover img {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	}
	#page-top a:hover {
	    text-decoration: none;
	    opacity: 0.7;
	}

}


img {
line-height: 0;
max-width: 100%;
vertical-align: bottom;
}

article:after,main:after,
clearfix:after {
content: "";
display: block;
clear: both;
}


/* -----------------------------------------------------------
common default
------------------------------------------------------------*/
.ac { margin:auto; }
.tc { text-align:center!important; }
.tl { text-align:left!important; }
.fl { float:left; }
.fr { float:right; }
.bold { font-weight:bold; }

.inline { display:inline-block; }
.block { display:block; }
.super { vertical-align: super; font-size:10px;}


/* -----------------------------------------------------------
page
------------------------------------------------------------*/

.full {
width: 100%;
}
.container {
margin: 0 auto;
max-width:1200px;/* -30=1170 */
}
.container.medium {
max-width:970px;
margin: 0 auto;
}


/* -----------------------------------------------------------
bootstrap reset
------------------------------------------------------------*/

.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}

a:focus, a:active {
outline: none;
outline-offset: 0;
text-decoration: none;
color:inherit;
}
a:focus:hover {
/* color:inherit; */
}
.btn:active, .btn.active {
box-shadow:none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline:none;
}


/* -----------------------------------------------------------
共通ボックス
------------------------------------------------------------*/
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb30 { padding-bottom:30px; }
.pb40 { padding-bottom:40px; }
.pb50 { padding-bottom:50px; }
.pb60 { padding-bottom:60px; }
.pb80 { padding-bottom:80px; }
.pb100 { padding-bottom:100px; }

.pt60 { padding-top:60px; }
.pt70 { padding-top:70px; }
.pt80 { padding-top:80px; }
.pt5 { padding-top:3px; }
.pl10 { padding-left:10px; }
.pl20 { padding-left:20px; }
.mt80 { margin-top:80px; }
.mt100 { margin-top:100px; }
.mt120 { margin-top:120px; }
.mt140 { margin-top:140px; }

.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:60px; }
.mb70 { margin-bottom:70px; }
.mb80 { margin-bottom:80px; }
.mb100 { margin-bottom:100px; }
.mb110 { margin-bottom:110px; }
.mb120 { margin-bottom:120px; }

.mr20 { margin-right:20px; }

.pt30 { padding-top: 30px; }
.pb20 { padding-bottom:20px; }

.vt { vertical-align: top; }
.tr { text-align :right; }
.bgfff { background: #fff; }

.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.fs24 { font-size: 24px; }
.fs26 { font-size: 26px; }
.fs28 { font-size: 28px; }
.fs30 { font-size: 30px; }
.fs32 { font-size: 32px; }
.fs34 { font-size: 34px; }
.fs36 { font-size: 36px; }
.fs38 { font-size: 38px; }
.fs40 { font-size: 40px; }

.fa {
line-height: 1;
}
i.far {
margin-left:3px;
}

/* -----------------------------------------------------------
btn
------------------------------------------------------------*/

button {
width: auto;
padding: 0;
margin: 0;
background: none;
border: 0;
font-size: 0;
line-height: 0;
overflow: visible;
cursor: pointer;
}
button:focus {
outline: none;
appearance: none;
}

a.btn01:hover,.btn a:hover, .btn-s a:hover, .second-menu a:hover, .top-menu-btn a:hover {
  text-decoration: none;
}

/* -----------------------------------------------------------
PC MENU
------------------------------------------------------------*/

/* タブレット、PC768以上 */
@media screen and (min-width: 768px) {
a[href^="tel:"] { pointer-events: none; }
.sp {
display:none!important;
}
.spb-br {
  display: none;
}
.scroll-space {
  margin-top:-60px;
  padding-top:60px;
}
br.sp {
  display: none;
}

}

/*-------------------------------------------------------------
header menu
---------------------------------------------------------------*/

header {
  position: relative;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 1;
  background-color: #fff;
  transition: background-color 0.3s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}
.kait-logo {
  max-width:240px;
  position: absolute;
  top:6px;
}


/* -----------------------------------------------------------
footer
------------------------------------------------------------*/
#footer {
  color:#fff;
  position: relative;
  background: #999;
}
p.copyright {
  color:#fff;
  font-size:14px;
  padding:25px 0;
  line-height: 1.2;
  margin:0;
}

/* -----------------------------------------------------------
animation
------------------------------------------------------------*/
.sec{
transition: .5s;
}
.list-mv07{
opacity: 0;
transform: translate(0,60px);
-webkit-transform: translate(0,60px);
transition: .5s;
}
.mv07{
opacity: 1.0;
transform: translate(0,0);
-webkit-transform: translate(0,0);
transition: .5s;
}

@keyframes anime01{
0% { transform: scale(0.9); }
100% { transform: scale(1); }
}

.mv-inner .list-mv07 {
transition-delay: .2s;
}

.ani-img {
opacity: 0;
transition: .5s;
transform: scale(0.1);
}
.mv01 {
  opacity: 1.0;
  transition: 1s;
}
.ani-img.mv01 {
  transition: all 1.5s;
  opacity: 1;
  transform:  scale(1);
}

.ani-left {
  overflow: hidden;
  position: relative;
}

.ani-left.mv02:before {
  animation: ani-left 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fda3a3;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes ani-left {
  100% {
    transform: translateX(100%);
  }
}

.ani-fade {
  opacity: 0;
  transform: translate(-50px,0);
  -webkit-transform: translate(-50px,0);
  transition: 1.5s;
}
.ani-fade.mv03 {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
  transition: 2.5s;
  transition-delay: .5s;
}

.ani-fade-left {
  opacity: 0;
  transform: translate(-100px,0);
  -webkit-transform: translate(-100px,0);
  transition: .5s;
}
.ani-fade-left.mv04 {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
  transition: 1.5s;
}

.ani-fade-bottom {
  opacity: 0;
  transform: translateY(40px);
}
.ani-fade-bottom.mv06 {
  opacity:0;
  animation-name:ani01;
  animation-duration:3s;
  animation-fill-mode: forwards;
}
@keyframes ani01 {
  0% {
   opacity: 0;
   transform: translateY(40px);
  }
  100%{
  opacity: 1;
   transform: translateY(0);
  }
}

.ani-fade-start {
  opacity: 0;
  transform: translateY(60px);
}
.ani-fade-start.mv08 {
  opacity:0;
  animation-name:ani02;
  animation-duration:0.8s;
  animation-fill-mode: forwards;
}
@keyframes ani02 {
  0% {
   opacity: 0;
   transform: translateY(60px);
  }
  100%{
  opacity: 1;
   transform: translateY(0);
  }
}

/*---------------------------------------------
flexbox
-----------------------------------------------*/
/* 天地中央 */
.flex-box {
	display:flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	text-align:center;
	justify-content: center;
	/* align-items: center; */
  /* align-items: flex-start; */
}
.flex-box.max-height {
    align-items: inherit;
}
.flex-box li {
width: 100%;
}
/* IE10以上 */
@media all and (-ms-high-contrast: none) {
	/* \9 IE10以下 */
	.flex-box li {
		flex-shrink: 1\9; /* for IE10 */
	}
}
.container > img { flex:1 1 auto; width: 0%; }

/* -----------------------------------------------------------
index mv
------------------------------------------------------------*/
#mv {
  background-color: #fda3a3;
  background: url(../images/mv-s.jpg)no-repeat center 40%;
  background-size:cover;
  width:100%;
  height: 70vh;
  min-height: 800px;
}
#mv .mv-inner {
display: flex;
display:-webkit-box;
display: -webkit-flex;
display:-ms-flexbox;
text-align:center;
justify-content: start;
align-items: center;
width: 100%;
height: 100%;
flex-wrap: wrap;
 -ms-flex-wrap:wrap;
 overflow: hidden;
 margin:auto;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
	/* \9 IE10以下 */
.index #mv .mv-inner {
		flex-shrink: 1\9; /* for IE10 */
	}
}
#mv .mv-inner h1 {
margin:auto;
padding:40px;
line-height: 1;
width:510px;
height: 340px;
max-height: 340px;
background: #fda3a3;
display: flex;
display:-webkit-box;
display: -webkit-flex;
display:-ms-flexbox;
text-align:center;
justify-content: center;
align-items: center;
position: relative;
/* padding:16px; */
}
#mv .mv-inner h1:after {
  content: "";
  position: absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  border:1px solid #fff;
  width:calc(100% - 32px);
  height: calc(100% - 32px);
  margin:auto;
}
#main {
  position: relative;
}
#main {
  background: url(../images/bg-bottom.png) no-repeat center bottom;
  background-size:;
  width:100%;
  height: auto;
}
.message-area {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  /*padding-bottom:25em;*/
}
.message-area .sakura01 {
  position: absolute;
  right:-8%;
  top:0;
  overflow: hidden;
}
.message-area .sakura01 img,
.message-area .sakura02 img {
  width:80%;
}
.message-area .sakura03 img {
  width:70%;
}
.message-area .sakura02 {
  position: absolute;
  left:-4%;
  top:164px;
  overflow: hidden;
}
.message-area .sakura03 {
  position: absolute;
  left:-4%;
  bottom:30%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.4);
  /* transition-delay: 10s; */
}
.message-area .sakura03.mv05 {
  opacity: 1;
  transform: scale(1);
  transition: 1.5s;
  transition-delay: .5s;
}

.message-area h2 {
  font-size:48px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin:1.5em 0 2em;
  /* color:#fb8b93; */
}
.message-area p {
  font-size:21px;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom:4em;
}
.message-area p.signature {
  text-align: right;
  font-size:16px;
  padding-top:2em;
}


/*---------------------------------------------
mv-animation
-----------------------------------------------*/
#mv {
  overflow: hidden;
  position: relative;
}

#mv:before {
  animation: img-wrap 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fda3a3;
  background: #fbc5c5;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


/*---------------------------------------------
桜
-----------------------------------------------*/
#header, header,#footer,.message-area {
  z-index: 2;
  position: relative;
}

#sakura-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top:0;
  z-index: 1;
}

#sakura {
 width:1500px !important;
 height:1500px !important;
 margin-left: calc(50% - 750px);
 opacity: 0.5;
}

@media (max-width:896px){
  #sakura {
   width:1500px !important;
   height:1500px !important;
   margin-left: calc(50% - 750px);
  }
}
@media (max-width:767px){
  #sakura {
   width:767px !important;
   height:767px !important;
   margin-left:0;
  }
}

/*---------------------------------------------
Youtube
-----------------------------------------------*/
.youtube {
	width: 100%;
  max-width: 560px;
	padding: 0;
	box-sizing: border-box;
  margin: 5em auto;
}
.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}
.youtube .inner_text {
	color: #AC433F;
	border: 2px solid #AC433F;
  padding: 1em 3em;
}
.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*---------------------------------------------
フロートボタン
-----------------------------------------------*/
.app-button {
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 998;
  justify-content: center;
}
.app-button.is-active {
  display: flex;
  animation: fadeIn 0.5s linear forwards;
}
.app-button a {
  min-width: 40%;
  width: 40%;
 }
.app-button a:hover {
  opacity: 0.6;
  transition: all 0.4s ease;
 }
.c-button--yellow {
  position: relative;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  max-width: 100%;
  height: auto;
  padding: 2rem;
  color: #fff;
  text-decoration: none;
  border-radius: 4rem;
  background-color: #FFC014;
  box-shadow: rgba(0,0,0,0.24) 0px 3px 8px;
}
.c-button__text {
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-align: center;
  position: relative;
  font-weight: bold;
  font-size: 1.6rem;
  color: #333;
}
@media screen and (min-width: 750px) {
  .app-button {
    padding: 2.5rem;
    -webkit-box-pack: center;
  }
  .app-button a {
    margin: 0 1rem;
  }
}

/*---------------------------------------------
mediaQuery レスポンシブ
-----------------------------------------------*/
@media screen and (max-width:1300px) {
  #mv .mv-inner h1 {
      padding: 4%;
      line-height: 1;
  }
  .message-area h2 {
      font-size: 40px;
  }
  .message-area .sakura01 img, .message-area .sakura02 img,.message-area .sakura03 img {
    width: 60%;
  }
  .message-area .sakura01 {
      right: -15%;
    }
}
@media screen and (max-width:1000px) {
  .message-area h2 {
      font-size: 40px;
  }
  .message-area .sakura01 img,
  .message-area .sakura02 img {
    width:50%;
  }
  .message-area .sakura03 img {
    width:50%;
  }
  .message-area .sakura01 {
    right:-28%;
    z-index: 0;
  }
  .message-area .sakura02,.message-area .sakura03 {
    left:-10%;
    z-index: -1;
  }
}

@media screen and (min-width:768px) and (max-width:1400px) {
  #mv .mv-inner h1 {
    height: 300px;
    width:35%;
  }
}
@media screen and (min-width:768px) and (max-width:1200px) {
  #mv .mv-inner h1 {
    height: 260px;
    width:35%;
  }
}
@media screen and (min-width:768px) and (max-width:1000px) {
  #mv .mv-inner h1 {
    height: 250px;
    width:45%;
  }
}

@media screen and (max-width: 850px)  {
  .message-area h2 {
    font-size: 30px;
    }
    .message-area p {
    font-size: 18px;
    }
    .message-area {
    padding-bottom: 10em;
  }
  #main {
      background: url(../images/bg-bottom.png) no-repeat center bottom;
      background-size: contain;
    }
    .message-area .sakura01 {
        right: -35%;
      }
}


  /*--------------------------------------------------
767px以下
  /*--------------------------------------------------*/

@media screen and (max-width: 767px) {
.pc {
display:none!important;
}
.col-12.img {
  text-align: center;
  margin:auto;
  width:80%;
}

p, li, dt, dd, th, td, div, span, em {
font-size:14px;
}
.text-right {
text-align: center!important;
}
.col-md-4 {
text-align: center;
}
.col-12 img {
  margin:0 auto 20px;
}

.col-12 .sp-table img {
    margin: 0 auto;
}

.col-md-4 p, .col-md-4 li, .col-md-4 span,
.col-md-4 h2,.col-md-4 h3,.col-md-4 h4,.col-md-4 h5,.col-md-4 dl,.col-md-4 dt,.col-md-4 dd {
text-align: left;
}

#main h2+h3 {
margin-top:40px !important;
}
.kait-logo {
    max-width: 180px;
    top: 5px;
}
#mv {
  height: 500px;
  min-height: 500px;
}
#mv .mv-inner {
    align-items: flex-start;
  }
#mv .mv-inner h1 {
    margin: auto;
    padding: 2%;
    line-height: 1;
    width: 45%;
    height:200px;
  }
#mv .mv-inner h1 img {
    max-width: 90%;
}
#mv .mv-inner h1:after {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}
.message-area h2 {
    font-size: 22px;
}
.message-area h3 {
    font-size: 22px;
}
.message-area p, .message-area p.signature {
    font-size: 14px;
  }
.message-area p.signature {
  line-height: 1.6;
  font-size:13px;
}
.message-area p {
  margin-bottom:2em;
}



/* -----------------------------------------------------------
SP-MENU スマホ版メニュー
------------------------------------------------------------*/
header {
  height:50px;
}
#header {
  height: inherit;
}
#page { min-width: initial; }

}



/* ====================================================== */

@media screen and (max-width: 680px) {
  .message-area .sakura01 img, .message-area .sakura02 img, .message-area .sakura03 img {
      width: 35%;
  }
  .message-area .sakura01 {
    right: -45%;
  }
}

@media screen and (max-width: 640px) {
  .message-area .sakura01 {
    right: -55%;
  }
  #mv .mv-inner h1 {
    height: 160px;
  }
}


/* sm サイズ*/

@media screen and (max-width: 575px) {
  #mv .mv-inner h1 img {
      max-width: 80%;
  }

  .message-area .sakura01 {
    right: -65%;
}
}
@media screen and (min-width: 481px) {
  .pc-br {
    display: block;
  }
  .sp-br {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .pc-br {
    display: none;
  }
  .message-area p br {
    /*display: none;*/
  }
  .message-area p.signature br {
    display: block;
  }
  .message-area .sakura01 {
    right: -90%;
  }
  .message-area .sakura01 img, .message-area .sakura02 img, .message-area .sakura03 img {
      width: 25%;
  }
  .message-area h2 {
      font-size: 20px;
  }
  .message-area h3 {
      font-size: 20px;
  }
  .message p {
    letter-spacing: 0.15em;
  }
  #mv .mv-inner h1 {
    width:70%;
    height: 160px;
  }
}

@media screen and (max-width: 400px) {
#mv .mv-inner h1 {
  width:70%;
}
}