@charset "UTF-8";
/*
 * index.css
 *
 */


/*==================================
          Font Style
===================================*/
.
@media screen and (max-width: 768px){
.p-top-abouts {
    top: -5.33vh;
    left: 4.67vw;
}
}
/*==================================
          Font Style End
===================================*/
.sectionLv01{
	
	margin-top:120px;
    position: relative;
	width:1100px;
}
.sectionLv01 h3{
	color:black;
	font-size:33px;
	margin-bottom: 6vw;
}
.sectionLv02 h2{
	font-size:45px;
	text-align:center;
	margin-bottom:9%;
	color:#000000;
	border-bottom: solid 3px #cce4ff;
}
.sectionLv04{
	margin-bottom:70px;
	width:1100px;
}
.sectionLv04 p{
	text-align:left;
	padding:0px 7vw;
	margin-bottom:20px;
	
}
/*==================================
          sectionLv05
===================================*/
.sectionLv05{
	width:1100px;
	margin-top:22px;
}
.sectionLv05 p{
	font-size:17px;
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";

}
.boxs img{
	  box-sizing: border-box;
}
.red{
	color:#FF0000;
}
* {
  position: relative;

}

.iframely-embed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: white;
}

#app {
  // opacity: 0;
  // visibility: hidden;
 

  &:hover {
    opacity: 0.5;
  }
}

#app {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  padding-bottom: 4vmin;
  padding-bottom:5vw;
  padding-top:3vw;
  
  width: 100%;
  color: #3a3535;
}



@import url("https://fonts.googleapis.com/css2?family=Prata&display=swap");

.title {
   
  grid-column: 1 / -1;
  grid-row: 1;
  padding:20px 20px;
  width:50%;
  left:42px;
  background-color: rgba(255,255,255,0.9);
  font-family: "Prata", serif;
  font-size: 32px;
  z-index: 2;
  
  // start

  > .title-inner {
    display: inline-block;
  }

}

.title2{
   
  grid-column: 1 / -1;
  grid-row: 1;
  padding:20px 20px;
  width:50%;
  left:40%;
  background-color: rgba(255,255,255,0.9);
  font-family: "Prata", serif;
  font-size: 32px;
  z-index: 2;
  
  // start

  > .title-inner {
    display: inline-block;
  }

}


@keyframes text-clip {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes outer-left {
  from {
    transform: translateX(50%);
  }
  to {
    transform: none;
  }
}

@keyframes inner-left {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: none;
  }
}
/*
.cafe,
.mozart {
  animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
  // outline: 1px solid red;
}

// [class*='inner'] {
//   outline: 1px solid blue;
// }

.title-inner {
  display: inline-block;
  animation: inner-left 1s 1s ease both;
}*/

.cafe-inner {
  display: inline-block;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	border-bottom: 2px solid #0066ff;
	color: #0066ff;
    font-weight: bold;
    font-size: 30px;
	margin-bottom:15px;
}

.mozart-inner {
	font-size:24px;
}
/*
.title {
  animation: outer-left 3s 1s ease both;
}

.cafe {
	margin-bottom:30px;
  // start
  > .cafe-inner {
    display: inline-block;
	
  }
  
}*/

.mozart {
  display: inline-block;
}

.image {
  grid-row: 1;
  grid-column: 2;
  margin-left: -2rem;
  opacity: 0.7;

  animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 2s backwards;

  @keyframes image-in {
    from {
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.image2 {
	right:45.8%;
  grid-row: 1;
  grid-column: 2;
  margin-left: -2rem;
  opacity: 0.7;

  animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 2s backwards;

  @keyframes image-in {
    from {
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
// Replay animation!
body:active * {
  animation: none ;
}


.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
	text-align:left;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/*========= 1文字ずつ出現させるためのCSS ===============*/
/*
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  100% {opacity:0;}
  100% {opacity:1;}
}*/

/*==================================
          sectionLv05 End
===================================*/
.strong{
	background:white;
	border: 2px solid #0066ff;
}
.strong h4{
	color:#0000CC;
	font-size:24px;
	padding: 20px 44px;
	font-weight:800;
}
.sectionLv01 p{
	padding:0px 75px;
	text-align:left;
}
section{
	width:1100px;
}
.sectionLv02 img{
	
}
/*==================================
          strengths
===================================*/
.boxs img{
	box-shadow: 10px 10px 10px rgb(0 0 0 / 40%);
    border-radius: 30px;
    margin-bottom: 40px;
    border: 5vw solid white;
	
}
.box_strength {
	margin-top:100px;
	width: 100%;
	padding-bottom: 60px;
	text-align: left;
	position:relative;
	counter-reset: number;
}

.box_strength .strengthbox {
	border: 1px solid #0066ff;
	padding: 1em;
	margin-bottom: 20px;
}
.box_strength .strengthbox .left_strengthbox {
	width: 50%;
	float: left;
}
.box_strength .strengthbox .right_strengthbox {
	background: #59d73a;
    width: 310px;
    float: right;
    left: -2%;
	
	
}
@media screen and (max-width: 768px) {
.box_strength .strengthbox .left_strengthbox {
	width: 100%;
	float: none;
	margin-bottom: 10px;
}
.box_strength .strengthbox .right_strengthbox {
	width: 80%;
	float: none;
}
}

.box_strength .strengthbox .left_strengthbox p {
	line-height: 1.6em;
	text-align: inherit;
	margin-top:7%;
}
.box_strength .strengthbox .left_strengthbox p a {
	color: #37419a;
	text-decoration: underline;
}

.box_strength .strengthbox .catch01 {
	font-size: 1.3em;
	line-height: 1.5em;
	font-weight: bold;
	color: #044892;
	position: relative;/*c?，a￣?a??c?R*/
	padding-left: 1.8em;
	text-align:start;
}
@media screen and (max-width: 768px) {
.box_strength .strengthbox .catch01 {
	font-size: 1.1em;
	line-height: 1.4em;
	padding-left: 2em;
}
.sectionLv05 p{
	font-size:2.5vw;

}
.title {
	font-size:4vw;
}
.cafe-inner {
	font-size:28px;
}
}

.box_strength .strengthbox .catch01:before {
	display: inline-block;
	position: absolute;/*cμ¶a￣?a??c?R*/
	counter-increment: number;
	content: counter(number);
	font-size: 1em;/*a?μa??a?o*/
	left: 0;
	color: #ffffff;
	background-color: #044892;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align:center;
	/*a≫\a，? a，?a，?a，-a?Ra￣?a??a?Ra??a??*/
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.btn,
.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}



@media screen and (max-width: 600px) {
.box_strength .strengthbox .right_strengthbox {
	width: 82vw;
	float: none;
}
.sectionLv05 p{
	font-size:2.5vw;

}
.title {
	font-size:4vw;
}
.mozart-inner {
    font-size: 13px;
}
.cafe-inner {
    font-size: 20px;
}

}



/*==================================
         strengths　渡邊追記
===================================*/
.page_ttl {
	margin:0 auto 50px;
	padding:60px 0 37px;
	background-image:url(../img/strengths_ttl.jpg);
	background-position:50% 85%;
	background-repeat:no-repeat;
	background-size:100% auto;
}
.page_ttl::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,55,127,0.6) 100%);
}
.sectionLv01 {
    margin-top:84px;
    position: relative;
    width:100%;
}
.sectionLv01 h2 {
	font-size:1.7vw;
	font-weight:bold;
	color:#fff;
	line-height:3em;
}
.ttl_en {
	margin:0 0 20px;
    font-size: 3vw;
    color: #FFFFFF;
    letter-spacing: 15px;
    vertical-align: middle;
    font-weight: bolder;
	border-bottom:#fff solid 2px;
}

@media screen and (max-width: 600px) {

.page_ttl {
	padding:5vw 0 20px;
	
	
}
.sectionLv01 h2 {
padding:0px;
}
.ttl_en {
    letter-spacing: 2vw;
	font-size: 5vw;

}
.sectionLv01 h2 {
	font-size:3vw;
}
}
.strengths_list {
	margin:50px auto;
}
.strengths_list li {
	margin:0 auto 60px;
	padding:40px 0;
	background-image:url(../img/strong2.jpg);
	background-position:right;
	background-repeat:no-repeat;
	background-size:500px 335px;
}
.strengths_list li:nth-of-type(2) {
	background-image:url(../img/strong02.jpg);
}
.strengths_list li:nth-of-type(3) {
	background-image:url(../img/strong03.png);
}
.strengths_list li:nth-of-type(4) {
	background-image:url(../img/strong04.jpg);
}
.strengths_no,
.strengths_copy,
.strengths_list li img {
	display:inline-block;
	vertical-align:top;
}
.strengths_list li img {
	width:33%;
	height:auto;
}
.strengths_no {
	width:5%;
}
.strengths_no p {
	font-size:36px;
	font-weight:bold;
	color:#003692;
}
.strengths_copy {
	width:65%;
}
.strengths_copy h3 {
	margin:0 auto;
	padding:20px;
	text-align:left;
	border-left:#003692 solid 3px;	
	background-color:#fff;
	background: rgba(255,255,255,0.9);
}
.strengths_list li:nth-of-type(2) h3 {
	border-left:#00AD8D solid 3px;	
}
.strengths_list li:nth-of-type(3) h3 {
	border-left:#88C121 solid 3px;	
}
.strengths_list li:nth-of-type(4) h3 {
	border-left:#5192CE solid 3px;	
}
.strengths_list li:nth-of-type(2) .strengths_no p {
	color:#00AD8D;
}
.strengths_list li:nth-of-type(3) .strengths_no p {
	color:#88C121;
}
.strengths_list li:nth-of-type(4) .strengths_no p {
	color:#5192CE;
}
.strengths_copy p {
	padding:20px;
	border-left:#A7A39F solid 3px;
	text-align:left;
	background-color:#fff;
	background: rgba(255,255,255,0.9);	
}
.strengths_chart {
	width:700px;
	height:auto;
	margin:30px auto 50px;
	display:block;
}
.kokoro .title2 {
    padding: 30px;
}
.kokoro .slideAnimeLeftRight {
    font-weight: bold;
}