@charset "UTF-8";
.page, .single {
  /*青いボックスで「POINT」　が入る*/
  /*赤いボックスで「SPAN」タグで自由なタイトルが表示出来る*/
  /*吹き出し*/ }
  .page .box1, .single .box1 {
    background: #E1E0FF;
    padding: 20px 20px 20px;
    position: relative;
    border-radius: 0;
    margin-bottom: 80px;
    margin-top: 40px; }
    .page .box1:before, .single .box1:before {
      content: 'POINT';
      font-size: 0.7em;
      background: #8E8AFF;
      padding: 3px 10px;
      position: absolute;
      left: 0;
      top: -15px;
      color: white;
      font-weight: bold; }
  .page .box2, .single .box2 {
    background: #FCEAEA;
    border: 2px solid #FFC4C5;
    border-radius: 4px;
    padding: 20px;
    position: relative;
    margin-bottom: 80px;
    margin-top: 40px; }
    .page .box2 span, .single .box2 span {
      position: absolute;
      top: -15px;
      background: #FF0004;
      color: white;
      font-weight: bold;
      padding: 0 20px;
      border-radius: 4px; }
  .page .btn1, .single .btn1 {
    text-align: center;
    margin: 20px 0 40px;
    cursor: pointer; }
    .page .btn1 a, .single .btn1 a {
      font-weight: bold;
      padding: 10px 40px;
      text-decoration: none;
      color: white;
      background: #FF0004;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
      transition: 0.3s;
      opacity: 1; }
      .page .btn1 a:hover, .single .btn1 a:hover {
        opacity: 0.5;
        transition: 0.3s; }
  .page .fuki, .single .fuki {
    position: relative;
    border-radius: 10px;
    border: 1px solid #27323F;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    width: calc(100% - 130px);
    z-index: 1;
    margin-bottom: 80px;
    box-shadow: 0 0 3px #aaaaaa;
    /*以下、キャラクター増えたら画像追加*/ }
    .page .fuki:before, .single .fuki:before {
      position: absolute;
      content: ".";
      color: white;
      top: 20px;
      z-index: 1;
      border-right: 1px solid #27323F;
      border-top: 1px solid #27323F;
      width: 13px;
      height: 10px; }
    .page .fuki:after, .single .fuki:after {
      position: absolute;
      background: #111111;
      width: 100px;
      height: 100px;
      background-size: cover;
      top: 0;
      content: '';
      border-radius: 50%;
      border: 1px solid #eeeeee; }
    .page .fuki.fuki-r:before, .single .fuki.fuki-r:before {
      transform: rotate(45deg);
      right: -8px;
      background: inherit; }
    .page .fuki.fuki-r:after, .single .fuki.fuki-r:after {
      right: -130px; }
    .page .fuki.fuki-l, .single .fuki.fuki-l {
      margin-left: 130px; }
      .page .fuki.fuki-l:before, .single .fuki.fuki-l:before {
        transform: rotate(230deg);
        left: -8px;
        background: inherit; }
      .page .fuki.fuki-l:after, .single .fuki.fuki-l:after {
        left: -130px; }
    .page .fuki.man1, .single .fuki.man1 {
      background: #EEF2FF; }
      .page .fuki.man1:after, .single .fuki.man1:after {
        background-image: url(../images/figure/man1.png); }
    .page .fuki.woman1, .single .fuki.woman1 {
      background: #FFEBEC; }
      .page .fuki.woman1:after, .single .fuki.woman1:after {
        background-image: url(../images/figure/woman1.png); }