@charset "UTF-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
}
body{
	font-family: Hiragino Sans, 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;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.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;
}
footer a{
	color: #4682b4;
}


/* こまごま追加 */
h1{
	margin: 0;
}
h2 {
	padding: 2.5%;
	border-left: 6px solid #f29400;
	background-color: #fff8ee;
	margin-top: 40px;
	font-size: 25px;
  }
  h3 {
	/*文字サイズ*/
	font-size: 25px;
	border-bottom: 4px dotted #00C2C9;
	line-height: 1.5;
	font-weight: bold;
	padding: 5px 10px;
	margin: 5px 0;
  }

  .orange{
	color: #f29400;
  }
  
  
   .fsS {
	font-size: 13px;
  }
  
   .sp {
	display: none;
  }
  
  @media screen and (max-width:699px) {
	 .sp {
	  display: block;
	}
  }

/* 矢印 */
.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: #f29400;
  }
  
   .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%, #f29400)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #f29400)) top right/50% 100% no-repeat;
	background: linear-gradient(to top right, transparent 49%, #f29400 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #f29400 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);
	}
  }

  /* PICUP */
  .mybox {
	box-sizing: border-box;
	justify-content: space-around;
	position: relative;
	padding: 45px 20px 20px;
	margin: 2.5em auto;
	width: 100%;
	box-shadow: 0 1px 2px #999;
  }
  
   .mybox:before {
	border: 1px solid #fff;
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
  }
  
   .mybox:after {
	background-color: rgb(152 230 221);
	background-position: 0 0, 8px 8px;
	background-size: 15px 15px;
	border-left: 2px dotted rgba(0, 0, 0, 0.1);
	border-right: 2px dotted rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	content: 'Pick Up';
	display: block;
	padding: 5px 20px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
  }
  
   .mybox p {
	font-size: 19px;
	text-align: left;
  }
  
  
   .mybox img {
	margin-top: 20px !important;
	width: 100%;
  }
  
   .anno {
	color: #999999;
	font-size: 12px !important;
	text-align: right !important;
  }
  
   .fsL {
	font-size: 25px;
  }
  
   .blue {
	color: #1155CC;
  }

  /* 口コミっぽいやつ */
  .balloon01 {
	margin: 1em 0;
	overflow: hidden;
	display: flex;
  }
  
   .chatting01 {
	width: auto;
  }
  
   .faceicon01 {
	display: inline-block;
	width: 55px;
	min-width: 55px;
	height: auto;
	position: relative;
  }
  
   .faceicon01 img {
	border: solid 3px #DFEFFF;
	box-sizing: border-box;
	width: 55px;
	max-width: 55px;
	height: 55px !important;
	object-fit: cover;
	border-radius: 50%;
  }
  
   .name01 {
	margin-top: -10px;
	font-size: 10px;
	color: #808080;
	text-align: center;
  }
  
   .says01 {
	display: block;
	position: relative;
	margin: 0 0 0 20px;
	padding: 12px;
	border-radius: 10pt;
	background-color: #DFEFFF;
  }
  
   .says01:before {
	content: "";
	position: absolute;
	top: 12px;
	left: -26px;
	border: 11pt solid transparent;
	border-right: 11pt solid #DFEFFF;
  }
  
   .says01 p {
	margin: 0;
	padding: 0;
	letter-spacing: -0.01em;
	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: 80% !important;
  }
  
   img {
	/* width以下の表示サイズになった場合、max-width の値が適用されます*/
	/*横幅*/
	width: 100%;
	/*高さ*/
	height: auto;
  }
  
  /*アニメーションの詳細設定*/
  @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);
	}
  }