@charset "utf-8";
/*----------------------------------------------------
  CSSリセット
----------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align:baseline;background:transparent;}body { line-height: 1; }article, aside, dialog, figure, footer, header, hgroup, nav,section{ display: block; }nav ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before,blockquote:after, q:before, q:after {content: '';content: none;}a{margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;background: transparent;}ins {background-color: #ff9;color: #000;text-decoration: none;}mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold;}del { text-decoration: line-through; }abbr[title], dfn[title]{border-bottom: 1px dotted #000;cursor: help;}table {border-collapse:collapse;border-spacing: 0;}hr {display: block;height: 1px;border: 0;border-top: 1px solid #cccccc;	margin:1em0;padding: 0;}input, select { vertical-align: middle; }
/*----------------------------------------------------
  basic
----------------------------------------------------*/
html, body {
	height: auto;
}
body {
	color: #000;
	font-family: sans-serif;
	font-size: 17px;
	letter-spacing: .03em;
	line-height: 1.7;
	word-wrap: break-word;
	overflow-x: hidden;
}
body > .wrap {
	width: 100%;
	min-height: 100%;
	position: relative;
	height: auto !important;
}
.pr {
	display: block;
	font-size: 9px;
	color: #bbb;
	text-align: right;
	margin: 4px 0;
}
img {
	display: block;
	width: 100%;	
	max-width: 600px;
	margin: 20px auto;
}
p {
	margin: 0 auto;
}
a {
	color: #0066cc;
}
.red {
	color: #ff0000;
}
.red2 {
	color: #ff0066;
}
.pink {
	color: #fa57cc;
}
.purple {
	color: #9933ff;
}
.mk_y {
	background: #ffff00;
	margin: 4px 0;
}
.mk_y2 {
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 70%, #ffff00 0%) repeat scroll 0 0;
}
.mk_bk {
	background: #000;
	margin: 4px 0;
}
.uline {
	display: inline;
	border-bottom: 1px solid;
	padding-bottom: 1px;
	margin-bottom: 2px;
}
.uline2 {
	display: inline;
	border-bottom: 2px solid;
	padding-bottom: 1px;
	margin-bottom: 2px;
}

 .shake {
  animation: shake 3s infinite;
}
 .img-shadow {
  /*影の指定。水平方向の距離｜垂直方向の距離｜ぼかし距離｜広がり距離｜影の色。
   rgba色は r=Red、g=Green、b=Blue、a=Alpha透明度。rgbは0から255まで。aは0から1まで。*/
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.3);
  /*画像真ん中寄せ。左寄せにする場合は、0 auto 0 0;　右寄せにする場合は、0 0 0 auto */
  margin: 0 auto;
  /*画像の角を丸くする場合は下記数値を入力ください*/
  border-radius: 0px;
}
@keyframes shake {
  0% {
    transform: translate(4px, 0px);
  }

  5% {
    transform: translate(-4px, 0px);
  }

  10% {
    transform: translate(4px, 0px);
  }

  15% {
    transform: translate(-4px, 0px);
  }

  20% {
    transform: translate(4px, 0px);
  }

  25% {
    transform: translate(-4px, 0px);
  }

  30% {
    transform: translate(0px, 0px);
  }
}

 h1 {
  /*▼フォントサイズ指定*/
  font-size: 22px;
  /*▼フォントカラー指定*/
  color: #000;
  /*▼テキストの行間調整*/
  line-height: 1.3em;
  /*▼テキストの字間調整*/
  letter-spacing: .02em;
  /*▼配置箇所外側の間隔調整・上-右-下-左の順で指定可能*/
  /*▼以下は上下に5px間隔・左右は0で指定*/
  margin: 5px 0;
}

 h3 {
  /*文字サイズ*/
  font-size: 21px;
  /*線の色をカラーコードで変更できます*/
  border-color: #1bb4d3 !important;
  /*線の太さ、種類を指定できます*/
  border-left: 4px solid;
  /*文字の太さ。太字はbold、標準の太さはnormal*/
  font-weight: bold;
  padding: 0.7em 0.7em 0.8em;
  letter-spacing: 0.05em;
}



 .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: #ff69b4;
}
 .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%, #ff69b4 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ff69b4 50%) top right/50% 100% no-repeat;
}

/* ウィジェット全体 */
.c-baloon-surprise {
  width: 80%;
  max-width: 350px;
  margin: 30px 20px 40px;
  margin-right: auto;
  background-color: #ddd;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
/* 文字の設定 */
.c-baloon-surprise__text {
  font-size: 20px;
  color: #333;
  font-weight: normal;
  margin: 0;
  padding: 10px 20px;
}
/* ギザギザ右 */
.c-baloon-surprise:before {
  width: 10px;
  height: 100%;
  background-image: linear-gradient(135deg, #ddd 25%, transparent 25%), linear-gradient(45deg, #ddd 25%, transparent 25%);
  right: -10px;
  top: 0;
  background-size: 20px 20px;
  background-position: 20px 0, 20px 0;
  background-repeat: repeat;
  position: absolute;
  box-sizing: border-box;
  content: '';
}
/* ギザギザ左 */
.c-baloon-surprise:after {
  width: 10px;
  height: 100%;
  background-image: linear-gradient(225deg, #ddd 25%, transparent 25%), linear-gradient(315deg, #ddd 25%, transparent 25%);
  left: -10px;
  top: 0;
  background-size: 20px 20px;
  background-position: 30px 0, 30px 0;
  background-repeat: repeat;
  position: absolute;
  box-sizing: border-box;
  content: '';
}
/* ギザギザ下 */
.c-baloon-surprise__inner:before {
  width: 100%;
  height: 10px;
  background-image: linear-gradient(135deg, #ddd 25%, transparent 25%), linear-gradient(225deg, #ddd 25%, transparent 25%);
  left: 0px;
  bottom: -10px;
  background-size: 20px 20px;
  background-position: 20px 0, 20px 0;
  background-repeat: repeat;
  position: absolute;
  box-sizing: border-box;
  content: '';
}
/* ギザギザ上 */
.c-baloon-surprise__inner:after {
  width: 100%;
  height: 10px;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(315deg, #ddd 25%, transparent 25%);
  left: 0px;
  top: -10px;
  background-size: 20px 20px;
  background-position: 20px 10px, 20px 10px;
  background-repeat: repeat;
  position: absolute;
  box-sizing: border-box;
  content: '';
}
/* 吹き出しの矢印 */
.c-triangle {
  left: 5px;
  bottom: -40px;
  transform: rotate(45deg);
  border-width: 50px 8px 0 8px;
  border-color: #ddd transparent transparent transparent;
  border-style: solid;
  width: 0;
  height: 0;
  position: absolute;
  content: '';
}
 .c-baloon-surprise__inner {
  position: relative;
  box-sizing: border-box;
}

.cp_arrows {
  position: relative;
  /*widget自体の高さ*/
  height: 50px;
  /*widgetの上余白*/
  margin-top: 0;
  /*widgetの下余白*/
  margin-bottom: 0;
}
/*一個目の矢印*/
.cp_arrows .cp_arrowfirst {
  /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s ease-in-out infinite;
}
/*二個目の矢印*/
.cp_arrows .cp_arrowsecond {
  /*アニメーション設定。
   左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
  animation: arrow-move08 2s 1s ease-in-out infinite;
}
/*共通設定*/
.cp_arrows .cp_arrow {
  position: absolute;
  /*矢印の到着位置　（縦位置）*/
  top: 100%;
  /*矢印の到着位置　（横位置）*/
  left: 45%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  /*透明度（0=透明、1=不透明）*/
  opacity: 0;
}
 .content :first-child {
  margin-top: 0;
}
@keyframes arrow-move08 {
  /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
  0% {
    top: 40%;
    opacity: 0;
  }
  /*2sの70％（1.7秒）時に不透明になる*/
  70% {
    opacity: 1;
  }
  /*2s（2秒）時に透明になる*/
  100% {
    opacity: 0;
  }
}
 .cp_arrows .cp_arrow:before {
  /*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
  transform: rotate(30deg) translateX(-39%);
  /*矢印左の棒の起点。（top left=左上）*/
  transform-origin: top left;
}
 .cp_arrows .cp_arrow:after {
  /*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
  transform: rotate(-30deg) translateX(39%);
  /*矢印右の棒の起点。（top right=右上）*/
  transform-origin: top right;
}
 .cp_arrows .cp_arrow:before,
 .cp_arrows .cp_arrow:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /*矢印の棒の横の長さ*/
  width: 40px;
  /*矢印の棒の縦の長さ*/
  height: 3px;
  content: '';
  /*矢印の色*/
  background: #E91E63;
}
 .cp_arrows *,
 .cp_arrows *:before,
 .cp_arrows *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 .cp_arrows *,
 .cp_arrows *:before,
 .cp_arrows *:after {
  box-sizing: border-box;
}

 .a-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }
  50%,
  70% {
    transform: scale(0.95);
  }
}

 .balloon {
  position: relative;
  /*吹き出し周りの余白。上｜右｜下｜左*/
  margin: 1em 0 1em 40px;
  /*吹き出し内側の余白*/
  padding: 15px;
  /*背景色*/
  background-color: #fff0c6;
  /*吹き出しの角を丸くする*/
  border-radius: 30px;
  box-sizing: border-box;
}

 .balloon:before {
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  /*左の小さな丸い吹き出し色*/
  background-color: #fff0c6;
  border-radius: 50%;
}

 .balloon:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  /*真ん中の丸い吹き出し色*/
  background-color: #fff0c6;
  border-radius: 50%;
}

 .balloon p {
  margin: 0;
  padding: 0;
}


 .balloon2 {
  position: relative;
  /*吹き出し内側の余白*/
  padding: 15px;
  /*吹き出しの背景色*/
  background-color: #fdd;
  /*角を丸くする指定*/
  border-radius: 10px;
  /*吹き出し周りの余白。上｜左右｜下*/
  margin: 10px 10px 40px;
  box-sizing: border-box;
}

 .balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 15px;
  /*三角部分の色変更は下記#から始まるカラーコードを変更ください*/
  border-right: 12px solid #fdd;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}
 .balloon2 {
  position: relative;
  /*吹き出し内側の余白*/
  padding: 15px;
  /*吹き出しの背景色*/
  background-color: #fdd;
  /*角を丸くする指定*/
  border-radius: 10px;
  /*吹き出し周りの余白。上｜左右｜下*/
  margin: 40px 10px;
  box-sizing: border-box;
}

 .balloon2::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 15px;
  /*三角部分の色変更は下記#から始まるカラーコードを変更ください*/
  border-right: 12px solid #fdd;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

 p {
  margin: 0;
  padding: 0;
}

 .reflection-img {
  width: 90%;
  height: auto;
  position: relative;
  overflow: hidden;
}

 .reflection {
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@-webkit-keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@-moz-keyframes reflection {
  0% {
    -moz-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -moz-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -moz-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@-o-keyframes reflection {
  0% {
    -o-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -o-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -o-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -o-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

 .btn {
  background: #4e4e4e;
  color: #fff;
  text-align: center;
  width: 200px;
  padding: 1em 2em;
  margin: 1em;
}








 .comment__area {
  width: calc(100% - 20px);
  height: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 3px 3px 2px #F4D2DE;
  padding: 10px 10px 15px;
  margin-top: 30px;
  position: relative;
}

 .comment__head {
  position: absolute;
  top: 0;
  left: 0;
  background: #ff80bf;
  border-radius: 5px;
  padding: 3px 5px;
  box-shadow: 2px 2px 2px #888;
}

 .comment__head .head {
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px #888;
}

 .comment__img {
  width: 100%;
  height: auto;
}

 .comment__img img {
  width: 100%;
  height: auto;
}

 .comment__detail {
  margin-top: 10px;
}

 .comment__detail .name {
  font-size: 20px;
}

 .comment__detail .text {
  font-size: 20px;
}

 .comment__detail .name+.text {
  margin-top: 1em;
}

 .comment__detail .text+.text {
  margin-top: 1em;
}

 .comment__detail .text .bold {
  font-weight: bold;
}

 .comment__detail .text .underline {
  position: relative;
}

 .comment__detail .text .underline:before {
  content: '';
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffff00 71%, #ffff00 100%);
}

 .comment__detail .attention {
  font-size: 10px;
  color: #666;
  margin-top: 1.4em;
}

 .comment__detail .attention+.attention {
  margin-top: 1em;
}



/* ウィジェット全体 */
.l-ollist__box {
  /* 最大横幅 */
  max-width: 100%;
  /* 横幅 */
  width: 820px;
  /* 文字サイズ */
  font-size: 21px;
  /* 背景色 */
  background: #fff9e5;
  /* 内側余白|上下|左右| */
  padding: 0.5rem 1.1rem;
  /* 外側余白|上下|左右| */
  margin: 2rem 0;
  /* 枠線|タイプ|太さ|色| */
  border: solid 3px #f7931e;
  /* 角の丸み */
  border-radius: 0.5rem;
  position: relative;
  box-sizing: border-box;
}



/* 右の折り目 */
.l-ollist__box:after {
  /* 右からの距離 */
  right: -3px;
  /* 上からの距離 */
  top: -3px;
  /* 大きさ */
  border-width: 0 30px 30px 0;
  /* 色 */
  border-color: #f7931e #fff #f7931e;
  border-style: solid;
  /* シャドウ|水平方向の距離|垂直方向の距離|ぼかし|色| */
  box-shadow: -1px 1px 1px rgb(0 0 0 / 15%);
  position: absolute;
  content: "";
  box-sizing: border-box;
}



/* 全体タイトル */
.l-ollist__box__ttl {
  /* 文字色 */
  color: #f7931e;
  /* 文字サイズ */
  font-size: 1.25rem;
  /* 文字の太さ|bold=太い|normal=普通| */
  font-weight: bold;
  /* 下線|タイプ(dotted=ドット,solid=直線)|太さ|色| */
  border-bottom: dotted 3px #f7931e;
  /* 外側下余白 */
  margin-bottom: 0.8rem;
  /* 内側余白|上|左右|下| */
  padding: 0 1rem 0.5rem 2rem;
  /* 行間 */
  line-height: 1.4;
  position: relative;
  box-sizing: border-box;
}

 .l-ollist__box__ttl:before,
 .l-ollist__box__ttl:after {
  position: absolute;
  content: "";
}



/* チェックマークの丸 */
.l-ollist__box__ttl:before {
  /* 横幅 */
  width: 20px;
  /* 縦幅 */
  height: 20px;
  /* 色 */
  background: #f7931e;
  /* 角の丸み */
  border-radius: 50%;
  /* 左からの距離 */
  left: 5px;
  /* 上からの距離 */
  top: 5px;
}



/* チェックマーク */
.l-ollist__box__ttl:after {
  /* 横幅 */
  width: 10px;
  /* 縦幅 */
  height: 5px;
  /* 左の線|太さ|タイプ|色| */
  border-left: 2.5px solid #fff;
  /* 右の線|太さ|タイプ|色| */
  border-bottom: 2.5px solid #fff;
  /* 左からの距離 */
  left: 8px;
  /* 上からの距離 */
  top: 10px;
  transform: rotate(315deg);
}



/* リスト全体 */
.l-ollist__box__ol {
  /* 外側余白|上|左右|下| */
  margin: 0.5rem 0 0.7rem;
  /* 内側余白|上下左右| */
  padding: 0;
  list-style-type: none;
  counter-reset: number;
  box-sizing: border-box;
}



/* リストそれぞれ */
.l-ollist__box__ol__item {
  /* 内側余白|上|右|下|左| */
  padding: 0.5em 0 0.5em 34px;
  /* 行間 */
  line-height: 1.5em;
  position: relative;
  box-sizing: border-box;
}



/* リスト数字マーク */
.l-ollist__box__ol__item:before {
  /* 横幅 */
  width: 25px;
  /* 縦幅 */
  height: 25px;
  /* 外側余白 */
  margin: 0;
  /* 文字色 */
  color: #fff;
  /* 背景色 */
  background: #f7931e;
  /* フォント */
  font-family: Quicksand, sans-serif;
  /* 文字サイズ */
  font-size: 15px;
  /* 文字の太さ(700=太い,400=普通) */
  font-weight: 700;
  /* 左からの距離 */
  left: 0;
  /* 角の丸み */
  border-radius: 50%;
  /* 行間 */
  line-height: 25px;
  text-align: center;
  vertical-align: middle;
  content: counter(number);
  counter-increment: number;
  display: inline-block;
  position: absolute;
}



/* 強調部分 */
.l-ollist__box__ol__item>strong {
  /* 文字の太さ(700=太い,400=普通) */
  font-weight: 700;
  display: block;
  margin: 0;
  padding: 0;
}

 .l-ollist__box__ol__item>p {
  margin: 0;
  padding: 0;
}

 content div:after,
 .content p:after {
  clear: both;
}
 .content div :after,
 .content p:after {
  display: block;
  content: "";
  clear: both;
}


 h4 {
  /*縦線の色*/
  border-color: #ffa103;
  /*背景色*/
  background-color: #ffeac7;
  /*縦線の太さを４番目の数値で変更できます*/
  border-width: 0 0 0 6px;
  /*文字の太さ。太字はbold、標準の太さはnormal*/
  font-weight: 600;
  padding: 12px 20px;
  margin: 0.5em 0;
  overflow-wrap: break-word;
  border-style: solid;
  border-radius: 4px;
  letter-spacing: 0.04em;
  box-sizing: border-box;
}


.movebtn {
	-webkit-animation-name: btnAnime02;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-name: btnAnime02;
	-moz-animation-duration: 1.0s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	align-items: flex-start;
	justify-content: center;
}
@-webkit-keyframes btnAnime02 {
	0% {
	-webkit-transform: translate(0, 0);
  }
	50% {
	-webkit-transform: translate(0, -8px);
  }
	100% {
	-webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes btnAnime02 {
	0% {
    -moz-transform: translate(0, 0);
  }
	50% {
    -moz-transform: translate(0, -8px);
  }
	100% {
	-moz-transform: translate(0, 0);
  }
}








 .continue {
  display: flex;
  justify-content: center;
}
 .continue span {
  display: block;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 100vh;
  margin: 10px 0;
}
 .continue .dot-1,
 .continue .dot-2,
 .continue .dot-3 {
  -webkit-animation: continue 1s infinite;
  -moz-animation: continue 1s infinite;
}
 .continue .dot-1 {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
}
 .continue .dot-2 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
}
 .continue .dot-3 {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
}
@-webkit-keyframes continue {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes continue {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
 .box {
  max-width: 580px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
}
 .in:first-child {
  margin-top: 1em;
}
 .in {
  position: relative;
  list-style: none;
  margin-bottom: 2em;
  padding: 12px;
  border: 1px solid #ffc7d3;
  background: #fff;
  border-radius: 6px;
}
 .in .icon {
  position: absolute;
  top: -15px;
  left: -3px;
  padding-top: 10px;
  width: 60px;
  height: 60px;
  background-color: #0086ff;
  border-radius: 2em;
  background-size: 100% auto;
}
 .in .icon .unit {
  font-size: 10px;
  display: block;
  color: #fff;
  line-height: 1;
}
 span {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 .in .icon .number {
  line-height: 1;
  font-size: 30px;
  display: block;
  position: absolute;
  color: #fff;
  top: 35%;
  left: 20%;
}
 img {
  max-width: 100%;
  margin-bottom: 1em;
  height: auto;
  width: 100%;
  height: auto;
  margin: 20px auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 .in p {
  margin-bottom: 0;
  text-align: left;
}
 span {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 .span-color {
  color: #e50055;
  font-weight: bold;
}
 p.right {
  text-align: right;
}
 .review {
  max-width: 580px;
  line-height: 1.5;
  margin: 0 auto;
  box-sizing: border-box;
}
 .in {
  box-sizing: border-box;
  position: relative;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 3px 3px #ffc7d3;
}
 .speech-bubble {
  background-color: #ff7ba1;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  position: absolute;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  top: 0;
  left: 0;
  color: #fff;
  font-weight: 600;
  text-shadow: 1px 2px 3px #808080;
  letter-spacing: .05em;
  max-width: 100%;
  box-sizing: border-box;
  width: auto;
}
 .speech-bubble:after {
  content: "";
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: -7px;
  left: 70%;
  border-color: #ff7ba1;
  border-width: 7px;
  border-style: solid;
}
 .kuchikomi {
  margin: 12px 0;
}
 .speech-bubble p {
  margin: 0;
}

/*----------------------------------------------------
  footer
----------------------------------------------------*/
 footer {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #f5f1f1;
}

 footer .wrap {
  width: 600px;
  margin: 0 auto;
  padding: 10px 10px;
  font-size: 14px;
}
}/*----------------------------------------------------
  article
----------------------------------------------------*/
article {
	background: #fff;
}
article section {
	width: 620px;
	margin: 0 auto;
	padding: 0 8px;
}
@media(max-width:1023px) {
header .wrap { width: 95%; }
aside .wrap, article > section, footer .wrap {
	width: 90%;
	padding: 2.5%;
}