/**************************
/* くるっと回転（手前に）
**************************/

/*== ボタン共通設定 */
.btn02 {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width:100%;
    max-width: 250px;
    height: 50px;
    line-height: 50px;
    outline: none;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

/*ボタン内側の設定*/
.btn02 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転（手前に） */

/* 回転前 */
.rotatefront span:nth-child(1) {
	background: #e3e3e3;
	background: -moz-linear-gradient( #ffffff 0%, #e3e3e3 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e3e3));
	background: -webkit-linear-gradient( #ffffff 0%, #e3e3e3 100%);
	background: -o-linear-gradient( #ffffff 0%, #e3e3e3 100%);
	background: linear-gradient( #ffffff 0%, #e3e3e3 100%);
	opacity: 0.9;
	color: #000;
	transform: rotateX(0deg);/*はじめは回転なし*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
    transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotatefront span:nth-child(2) {
	background: #969696;
	background: -moz-linear-gradient( #333333 0%, #969696 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#969696));
	background: -webkit-linear-gradient( #333333 0%, #969696 100%);
	background: -o-linear-gradient( #333333 0%, #969696 100%);
	background: linear-gradient( #333333 0%, #969696 100%);
	opacity: 0.9;
	color: #fff;
	transform: rotateX(90deg);/*はじめはX軸に90度回転*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}


/*************
/* 横回転リンクボタン
*************/

.btn,
a.btn,
button.btn {
  font-size: 12px;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  background-image: none;
  border-radius: 0.5rem;
}

a.btn-3d-flip {
  display: block;

  max-width: 200px;
  margin: 9px auto;
  padding: 1px;

  -webkit-perspective: 600px;

  perspective: 600px;
}

a.btn-3d-flip:hover .btn-3d-flip-box {
  -webkit-transform: translateY(-50%) rotateX(90deg);
  transform: translateY(-50%) rotateX(90deg);
}

a.btn-3d-flip.btn-3d-flip2:hover .btn-3d-flip-box2 {
  -webkit-transform: translateX(-50%) rotateY(-90deg);
  transform: translateX(-50%) rotateY(-90deg);
}

.btn-3d-flip-box {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;
  margin: auto;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  text-decoration: none;
  text-transform: uppercase;

  color: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

.btn-3d-flip-box2 {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;
  margin: auto;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  text-decoration: none;
  text-transform: uppercase;

  color: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

.btn-3d-flip-box-face {
  display: block;
  position: relative;

  width: 100%;
  padding: 0.3rem 0;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  color: #fff;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;
}

.btn-3d-flip-box-face--front {
  background: #eb6100;
}

.btn-3d-flip-box-face--back {
  position: absolute;
  top: 100%;
  left: 0;

  -webkit-transform: translateY(-1px) rotateX(-90deg);

  transform: translateY(-1px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;

  background: #dc5b00;
}

.btn-3d-flip-box-face--front2 {
  color: #333;
  border:1px solid #ebebeb;
  box-sizing: border-box;
  background: #ebebeb;
}

.btn-3d-flip-box-face--back2 {
  position: absolute;
  top: 0;
  left: 70%;

  -webkit-transform: translateX(-1px) rotateY(90deg);

  transform: translateX(-1px) rotateY(90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

  color: #fff;
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  background: #333;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

/*************
/* 次のページ　リンクボタン
*************/

a.btn-next {
  display:block;
  width:200px;
  margin:18px auto;
  text-align: center;
  border: 1px solid #ccc;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
}

a.btn-next:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

/*************
/* トップに戻るボタン
*************/

#page-top {
	position: fixed;
	bottom: 0px;
	right: 0px;
	font-size: 100%;
	font-weight:bold;
	z-index:1;
	opacity: 0.8;
}

#page-top a {
	text-decoration: none;
	color: #fff;
	padding: 0;
	text-align: center;
	display: block;
	border-radius: 1px;
}

#page-top img {
	width: 80px;
}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:650px){

#page-top {
	bottom: 9px;
	right: 9px;
}

#page-top img {
	width: 60px;
}

	}

#page-top a:hover {
	
}


/*************
画像　ふわふわ
*************/

/* ふわふわさせたいものに fuwaクラスを付与 */
.fuwa {
	-webkit-animation-name:fuwa; /* fuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:4s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwa;
	-moz-animation-duration:4s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
@-webkit-keyframes fuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -20px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -20px);}
	100% {-moz-transform:translate(0, 0);}
}




/*-------------------------------------*/
/* 見出し装飾 */
/*-------------------------------------*/


.chapter1{
	padding-bottom: 2px;
	padding-left: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	font-size: 14px;
	
}

.chapter2{
	padding-bottom: 4px;
	border-bottom: 1px solid #696969;
	font-weight: none;
	font-size: 16px;
	padding-left: 20px;
	text-shadow: 2px 2px 5px #A9A9A9;
}

.chapter3{
	padding-bottom: 4px;
	border-bottom: 3px solid #333;
	font-size: 14px;
	font-weight: bold;
}
.chapter4{
	padding-bottom: 4px;
	border-bottom: 3px solid #333;
	font-size: 16px;
	font-weight: bold;
}
.chapter5{
	padding: 6px 8px;
	background: #efefef;
	color: #111;
	font-size: 14px;
	font-weight: bold;
}
.chapter6{
	padding: 6px 8px;
	background: #ccc;
	color: #111;
	font-size: 14px;
	font-weight: bold;
}
.chapter7{
	padding: 6px 8px;
	background: #666;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}
.chapter8{
	padding: 6px 18px;
	background: #444;
	color: #fff;
	font-size: 16px;
	
}

.chapter9{
	padding: 6px 8px;
	background: #c00;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

.chapter10{
	padding: 6px 8px;
	background: #900;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}
.chapter11{
	padding: 12px;
	border-top: 2px solid #696969;
	border-bottom: 2px solid #696969;
	color: #666;
	font-size: 16px;
	
}

.chapter12{
	padding: 6px 8px;
	background: #F5F6E4;
	color: #333;
	font-size: 14px;
	font-weight: bold;
}
.chapter13{
	padding: 6px 8px;
	background: #F9EBF8;
	color: #900;
	font-size: 14px;
	font-weight: bold;
}

.chapter14{
	padding: 6px 8px;
	background: #BEA581;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

.chapter15{
	font-size: 14px;
	font-weight: bold;
}

.chapter16{
	font-size: 16px;
	font-weight: bold;
}

.chapter17{
	margin-bottom:10px;
	padding:10px 20px;
	border-left:5px solid #e4e4e4;
	background: #fff;
	color:#000000;
	font-size:16px;
}

.chapter18{
	border-top: 1px solid #ebebeb;
	padding-left: 20px;
	margin-bottom:36px;
	font-size: 16px;
	font-weight: bold;

}