/*

Champagne CSS

The width of the ul is equal to the number of columns times li width
and the height of the ul is equal to the number of rows times li height.

Don't forget to account for margin, padding, and borders!

*/
/* line 17, champagne/champagne.scss */
.champagne {
  background: #fff;
  border: 0 solid #dddddd;
  border-left-width: 1px;
  border-top-width: 1px;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  clear: both;
  font-size: 17px;
  font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  font-weight: bold;
  height: 1308px;
  list-style: none;
  margin: 30px auto;
  padding: 0;
  position: relative;
  width: 936px;
}
/* line 36, champagne/champagne.scss */
.champagne:after,
.champagne:before {
  bottom: 10px;
  content: "";
  height: 55%;
  position: absolute;
  width: 70%;
  z-index: -1;
}
/* line 46, champagne/champagne.scss */
.champagne:after {
  -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.1);
  right: 10px;
  -webkit-transform: skew(4deg) rotate(2deg);
  -moz-transform: skew(4deg) rotate(2deg);
  transform: skew(4deg) rotate(2deg);
}
/* line 56, champagne/champagne.scss */
.champagne:before {
  -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.1);
  box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.1);
  left: 10px;
  -webkit-transform: skew(-4deg) rotate(-2deg);
  -moz-transform: skew(-4deg) rotate(-2deg);
  transform: skew(-4deg) rotate(-2deg);
}
/* line 65, champagne/champagne.scss */
.champagne > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  vertical-align: middle;
  text-align: center;
}

/* box1 */
.box1 {
  background-color: #bfdfff;
  text-align: left;
  padding: 70px 10px 0px;
}

#box-main {
  width: 480px;
  height: 70px;
}

#penguin {
  margin: 10px;
}

.box1 p {
  text-align: left;
}

#first {
  width: 500px;
  font-size: 27px;
}

#second {
  width: 500px;
  font-size: 18px;
}

/* box2 */
.box2 {
  background-color: #ff9999;
}

.box2 a {
  display: block;
  float: left;
  padding: 83px 10px 0px 10px;
  text-decoration: none;
  text-align: left;
  height: 135px;
  width: 198px;
}

/* box3 */

/* box4 */

/* box5 */

/* box6 */
.box6 {
  text-align: left;
}

.box6 a {
  display: block;
  text-decoration: none;
  padding: 75px 10px 0px 10px;
  text-align: left;
  font-size: 14px;
  height: 143px;
}

/* box7 */
.box7 {
  background-color: #ccff99;
  text-align: left;
}

.box7 a {
  display: block;
  text-decoration: none;
  padding: 85px 10px 0px 10px;
  text-align: left;
  font-size: 16px;
  height: 133px;
}

/* box8 */
.box8 {
  text-align: left;
}

.box8 a {
  display: block;
  text-decoration: none;
  padding: 83px 10px 0px 10px;
  text-align: left;
  font-size: 14px;
  height: 135px;
}

/* box9 */

/* box10 */

/* box11 */
.box11 {
  background-color: #bfdfff;
  text-align: left;
}

.box11 a {
  display: block;
  text-decoration: none;
  padding: 85px 10px 0px 10px;
  text-align: left;
  font-size: 14px;
  height: 133px;
}

/* box12 */
.box12 {
  background-color: #5cc1c9;
  text-align: left;
}

.box12 a {
  display: block;
  text-decoration: none;
  padding: 85px 10px 0px 10px;
  text-align: left;
  font-size: 14px;
  height: 133px;
}

/* box13 */
.box13 {
  background-color: #ffcfbf;
  text-align: left;
}

.box13 a {
  display: block;
  text-decoration: none;
  padding: 90px 10px 0px 10px;
  text-align: left;
  height: 128px;
}

/* box14 */
.box14 {
  background-color: #fff;
}

#name-yoshida {
  text-align: right;
  font-size: 18px;
  padding: 25px 10px 0px 0px;
}

ruby.yoshida {
  ruby-position: before;
}

#intro-yoshida {
  padding: 10px;
  font-size: 13px;
  text-align: left;
  font-weight: normal;
}

/* box15 */
/* box16 */
/* box17 */
.bottom-link {
  font-size: 14px;
}

.box17 a {
  display: block;
  text-decoration: none;
  height: 50px;
  padding: 22px 10px 0px 10px;
  text-align: right;
  font-size: 18px;
}

.champagne li a:hover {
  background-color: #ff55aa;
  color: #fff;
}

.left {
  height: 16.666%;
  width: 53.4%;
}

.question {
  padding: 0px 10px 0px 15px;
  margin: 10px 0px;
  float: left;
}

.left-bottom {
  height: 16.666%;
  width: 46.6%;
}

.right {
  height: 16.666%;
  width: 23.3%;
}

.small {
  width: 218px;
}

.large {
  width: 500px;
}

/* line 79, champagne/champagne.scss */
.champagne div.hidden {
  display: none;
}
/* line 83, champagne/champagne.scss */
.champagne div.visible {
  display: block;
  -webkit-animation: scaleIn 0.6s ease;
  -moz-animation: scaleIn 0.6s ease;
  animation: scaleIn 0.6s ease;
}

@-webkit-keyframes scaleIn {
  /* line 92, champagne/champagne.scss */
  from {
    -webkit-transform: scale(0);
  }

  /* line 93, champagne/champagne.scss */
  66% {
    -webkit-transform: scale(1.1);
  }

  /* line 94, champagne/champagne.scss */
  to {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes scaleIn {
  /* line 98, champagne/champagne.scss */
  from {
    -webkit-transform: scale(0);
  }

  /* line 99, champagne/champagne.scss */
  66% {
    -webkit-transform: scale(1.1);
  }

  /* line 100, champagne/champagne.scss */
  to {
    -webkit-transform: scale(1);
  }
}

@-o-keyframes scaleIn {
  /* line 104, champagne/champagne.scss */
  from {
    -webkit-transform: scale(0);
  }

  /* line 105, champagne/champagne.scss */
  66% {
    -webkit-transform: scale(1.1);
  }

  /* line 106, champagne/champagne.scss */
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes scaleIn {
  /* line 110, champagne/champagne.scss */
  from {
    -webkit-transform: scale(0);
  }

  /* line 111, champagne/champagne.scss */
  66% {
    -webkit-transform: scale(1.1);
  }

  /* line 112, champagne/champagne.scss */
  to {
    -webkit-transform: scale(1);
  }
}