@charset "UTF-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Arial, sans-serif !important;
	margin: 0;
	background-color: #eee;
}
.all{
	background-color: #fff;
	padding: 10px 20px;
}
.wrapper{
	margin: 0 auto;
	width: 620px;

}
@media screen and (max-width:700px) {
	.all{
		padding: 10px;
	}
	.wrapper{
		width: 100%;
	}
}
p{
	font-size: 19px;
	color: #000000;
	line-height: 1.5;
}
b{
	font-weight: bold;
}
.mark {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffffaf 70%, #ffffaf 100%);
	height: 80%;
	vertical-align: bottom;
}
.pc{
    display: block ;
}
.sp{
    display: none ;
}
.fwB{
    font-weight: bold;
}
.taC{
	text-align: center!important;
}
.taL{
	text-align: left!important;
}
.taR{
	text-align: right!important;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.fsM{
	font-size: 21px;
}
.fsL{
	font-size: 25px;
}
.fcR{
	color: rgb(255, 0, 0);
}
.fcB{
	color: rgb(17, 85, 204);
}
.fcP{
	color: rgb(245, 72, 159);
}
.fcK{
	color: rgb(0, 194, 201);
}
.mt0{
	margin-top: -10px !important;
}
.mtb20{
	margin: 20px 0;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px;
}
.mb20{
	margin-bottom: 20px;
}
.mb60{
	margin-bottom: 60px;
}
.mb0{
	margin-bottom: 0!important;
}
.small {
    /*文字サイズ*/
    font-size: 12px;
    color: #999;
    text-align: right;
    /*行間調整*/
    line-height: 1.2;
    /*下側の余白*/
    margin-bottom: 1em;
  }
img {
	width: 100%;
	margin: 0 auto;
	vertical-align: bottom;
}
video{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}
footer {
    font-size: 13px;
    padding: 5%;
    background: #ECECEC;
    text-align: center;
    margin-top: 10px;
}



/* こまごま追加 */
/* 吹き出し */
.balloon1-left {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 15px 20px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #e0edff;
	border-radius: 5px;
  }
  
  .balloon1-left:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #e0edff;
  }
  
  .balloon1-left p {
	margin: 0;
	padding: 0;
  }

  /* 矢印 */
  .downArrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .downArrow>span {
	/* 矢印の大きさの設定 */
	width: 100px;
	height: 65px;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .downArrow>span::before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 50%;
	height: 40%;
	/* 矢印の色の設定 */
	background: #ffc8c8;
  }
  
   .downArrow>span::after {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* 矢印の色の設定 */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
	background: linear-gradient(to top right, transparent 49%, #ffc8c8 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ffc8c8 50%) top right/50% 100% no-repeat;
  }
  
  
  
  /*動きの速さを変更する場合は、複数あるanimation-durationの1.5s(=1.5秒)の時間を変更
  動きの回数を変更する場合は、複数あるanimation-iteration-countのinfinite（=無限,               3=3回など）を変更*/
  .movebtn {
	-webkit-animation-name: btnAnime02;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-name: btnAnime02;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	align-items: flex-start;
	justify-content: center;
  }
  
  @-webkit-keyframes btnAnime02 {
  
	/*初期位置*/
	0% {
	  /*1番目の値はX方向, 2番目の値はY方向*/
	  -webkit-transform: translate(0, 0);
	}
  
	/*animation-durationで設定した値の半分の時間（50%）の時の位置*/
	50% {
	  -webkit-transform: translate(0, -8px);
	}
  
	/*animation-durationで設定した値になった（100%）時の位置*/
	100% {
	  -webkit-transform: translate(0, 0);
	}
  }
  
  /*上記の「@-webkit-keyframes btnAnime02」と同様の値にしてください*/
  @-moz-keyframes btnAnime02 {
	0% {
	  -moz-transform: translate(0, 0);
	}
  
	50% {
	  -moz-transform: translate(0, -8px);
	}
  
	100% {
	  -moz-transform: translate(0, 0);
	}
  }

/* スライダー */


/*スライダー部分の設定*/
.swiper {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	width: 100%;
	max-width: 800px;
	margin: 0 auto 20px;
  }
  
   .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	transform: translate3d(0, 0, 0);
	transition-property: transform;
	box-sizing: content-box;
  }
  
   .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
   .swiper-slide img {
	vertical-align: bottom;
  }
  
  
  
  /*スライダー内の画像の設定*/
  .swiper-slide img {
	width: 100%;
  }
  
   .swiper-slide img.lazyload:not(.loaded) {
	width: auto;
	max-width: 100%;
  }
  
  
  
  /*矢印の設定*/
  .swiper-button-next,
   .swiper-button-prev {
	position: absolute;
	top: 50%;
	cursor: pointer;
  }
  
  
  
  /*右側の矢印の設定*/
  .swiper-button-next {
	right: 10px;
	left: auto;
	outline: none;
  }
  
  
  
  /*左側の矢印の設定*/
  .swiper-button-prev {
	left: 10px;
	right: auto;
	outline: none;
  }
  
  
  
  /*矢印の棒（下）の設定*/
  .swiper-button-next::before,
   .swiper-button-prev::before {
	content: " ";
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 10;
  }
  
  
  
  /*右側の矢印の棒（下）設定*/
  .swiper-button-next::before {
	border-right: solid 8px #ccc;
	transform: translateY(-50%) rotate(45deg);
	right: 0;
  }
  
  
  
  /*左側の矢印の棒（下）設定*/
  .swiper-button-prev::before {
	border-left: solid 8px #ccc;
	transform: translateY(-50%) rotate(-45deg);
	left: 0;
  }
  
  
  
  /*矢印の棒（上）の設定*/
  .swiper-button-next::after,
   .swiper-button-prev::after {
	content: " ";
	width: 50px;
	height: 50px;
	position: absolute;
	top: 5px;
	z-index: 10;
  }
  
  
  
  /*右側の矢印の棒（上）設定*/
  .swiper-button-next::after {
	border-right: solid 8px #ccc;
	transform: translateY(-54%) rotate(-45deg);
	right: 0;
  }
  
  
  
  /*左側の矢印の棒（上）設定*/
  .swiper-button-prev::after {
	border-left: solid 8px #ccc;
	transform: translateY(-54%) rotate(45deg);
	left: 0;
  }
  
   .swiper-button-next,
   .swiper-button-prev {
	color: transparent !important;
  }

  /* 項目 */
  .frame {
	padding: 5px;
	position: relative;
  }
  
   .frame-dotted-middle {
	border: 2.5px dotted;
  }
  
   .radius {
	border-radius: 10px;
  }
  
   .bgBeige {
	background-color: #FFF8ED;
  }

  /* h2 */
  h2 {
	padding: 15px 5px 15px 20px;
	border-left: 6px solid #f68384;
	background-color: #fff1f1;
	margin-top: 40px;
	font-size: 22px;
  }
  
   h2 {
	padding: 10px 5px 10px 10px;
	font-size: 19px;
  }


  /* cta  */
  

/*widget全体のアニメーションの設定*/
.animate69 {
	text-align: center;
	/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜進め方｜実行回数｜*/
	animation: animate69 1s ease-in infinite;
	box-sizing: border-box;
  }
  
   a.a-btn {
	display: inline-block;
	/*飾り*/
	text-decoration: none;
	/*ボタンの最大幅*/
	max-width: 98% !important;
  }
  
  
  /*アニメーションの詳細設定*/
  @keyframes animate69 {
  
	/*スタート時*/
	0% {
	  /*傾斜変形角度*/
	  transform: skewX(9deg);
	}
  
	10% {
	  transform: skewX(-8deg);
	}
  
	20% {
	  transform: skewX(7deg);
	}
  
	30% {
	  transform: skewX(-6deg);
	}
  
	40% {
	  transform: skewX(5deg);
	}
  
	50% {
	  transform: skewX(-4deg);
	}
  
	60% {
	  transform: skewX(3deg);
	}
  
	70% {
	  transform: skewX(-2deg);
	}
  
	80% {
	  transform: skewX(1deg);
	}
  
	90% {
	  transform: skewX(0deg);
	}
  
	100% {
	  transform: skewX(0deg);
	}
  }