@charset "utf-8";

* { 
  touch-action: pan-y;
}


body,div,img {
  margin: 0;
  padding: 0;
  border: 0;

  user-select: none; /* CSS3 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -ms-user-select: none; /* IE10かららしい */

  -webkit-tap-highlight-color:rgba(0,0,0,0);  /*ipadの点滅を止める*/
}

body {
/*  overflow: hidden; */
/* デザイン変更 */  
/*  background-color: #e6ffe6;　*/
  background-image:url("../image/Melamine-wood-005.png");
  background-repeat:repeat;
}

button {
	margin: 20px;
	font-size: 25px;
}

/* -------------------------------------
  コンテンツ全体
------------------------------------- */ 
#wrapper {
  position:relative;
  height: 100%;
}

#wrapper_all {
	position:absolute;
  width:750px;
  height:1104px;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
	margin:0 auto;
}

/* IE用viewport */
@-ms-viewport {
  width:750px;
  height:1104px;
  initial-scale:1.0;
  minimum-scale:1.0;
  maximum-scale:1.0;
  user-scalable:no;
}


/* -------------------------------------
  置換用クラス
------------------------------------- */ 
.back_red, .mark_current {
/* デザイン変更 */
/*  background-color: #ff7473 !important; */
  background-color: #5fd492 !important;
}

.red {
  color: #ff7473 !important;
}



/* -------------------------------------
  btn共通
------------------------------------- */ 
.btn {
  cursor: pointer;
}

/* -------------------------------------
  header
------------------------------------- */ 
.header {
  position: relative;
  width: 100%;
  height: 76px;
  line-height: 76px;
/*  background-color: #78DBA3; */
}

.header>.dakuon_hyo {
  position: absolute;
  left: 650px;
  top: 3px;
  width: 70px;
  height: 70px;
  background-image: url(../image/icon/if_f00a.png);
  background-size: contain;
}
/*
.header>.dakuon_hyo:active {
  background-image: url(../image/icon/if_f00a_tap.png);
}
*/
.header>.page {
  text-align: center;
  line-height: 76px;
}
.header>.page>.mark {
  display: inline-block;
  margin: 0px 8px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
/* デザイン変更 */  
/*  background-color: #c5f0d8; */
  background-color: #fff;
}

/* -------------------------------------
  flipsnap
------------------------------------- */ 
.viewport {
    width: 750px;
    height: 1028px;
    overflow: hidden;
}
.flipsnap {
    width: 3750px; /* 320px(item) * 3(item count) */
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.item {
		position: relative;
    float: left;
    width: 750px;
    height: 1028px;
}

/* -------------------------------------
  注意
------------------------------------- */ 
.wrapper_caution {
	display: none;
  position:absolute;
  left: 0;
  top: 0;
  width: 750px;
  height: 1104px;
  background-color: rgba(255, 255, 255, 0.7);
}

.wrapper_caution>.caution {
	position: absolute;
	left: 75px;
	top: 130px;
	width: 600px;
	height: 700px;
	border-radius: 10px;
  border: 2px solid #9fa0a0;
	background-color: #ffffff;
}
.wrapper_caution>.btn.close {
  position: absolute;
  left: 591px;
  top: 150px;
  width: 64px;
  height: 64px;
  background-image: url(../image/icon/if_Close.png);
}
.wrapper_caution>.btn.close:active {
  background-image: url(../image/icon/if_Close_tap.png);
}


/* -------------------------------------
  カード
------------------------------------- */ 
.btn.anime {
  position: absolute;
  left: calc(140px - 26px);
  top: calc(650px - 91px);
  width: 80px;
  height: 80px;
  background-image: url(../image/icon/if_play-circle.png);
}
.btn.anime:active {
  background-image: url(../image/icon/if_play-circle_tap.png);
}

.front>.btn.sound {
  left: calc(530px - 26px);
  top: calc(650px - 91px);
}

.reverse>.btn.sound {
  left: calc(332px - 26px);
  top: calc(910px - 91px);
}


.btn.sound {
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url(../image/icon/if_volume-up.png);
}
.btn.sound:active {
  background-image: url(../image/icon/if_volume-up_tap.png);
}
.btn.caution {
  position: absolute;
  left: calc(63px - 26px);
  top: calc(998px - 91px);
  width: 65px;
  height: 65px;
  background-image: url(../image/icon/if_exclamation-circle_brown.png);
}
.btn.caution:active {
  background-image: url(../image/icon/if_exclamation-circle_brown_tap.png);
}
.btn.rotation {
  position: absolute;
  left: calc(622px - 26px);
  top: calc(998px - 91px);
  width: 65px;
  height: 65px;
  background-image: url(../image/icon/if_f021.png);
}
.btn.rotation:active {
  background-image: url(../image/icon/if_f021_tap.png);
}
.btn.prev {
  position: absolute;
  left: calc(60px - 26px);
  top: calc(373px - 91px);
  width: 48px;
  height: 48px;
  background-image: url(../image/icon/arrow_back.png);
}
.btn.prev:active {
  background-image: url(../image/icon/arrow_back_tap.png);
}
.btn.next {
  position: absolute;
  left: calc(640px - 26px);
  top: calc(373px - 91px);
  width: 48px;
  height: 48px;
  background-image: url(../image/icon/arrow_forward.png);
}
.btn.next:active {
  background-image: url(../image/icon/arrow_forward_tap.png);
}

/*
.card>img.moji_anime {
  display: block;
  position: absolute;
  left: calc(137px - 26px);
  top: calc(159px - 91px);
  width: 476px;
  height: 476px;
}
*/
.card>img.moji_anime {
  display: block;
  position: absolute;
  left: calc(135px - 26px);
  top: calc(157px - 91px);
  width: 480px;
  height: 480px;
  border: 2px solid #727171;
  background-color: #ffffff;
}
.card>.moji_anime_cross {
  position: absolute;
  left: calc(135px - 26px);
  top: calc(157px - 91px);
  width: 480px;
  height: 480px;
  background-size: contain;
  background-image: url(../image/bg_cross.svg);

}
.card>.moji_font1 {
  position: absolute;
  left: calc(135px - 26px);
  top: calc(768px - 91px);
  width: 200px;
  height: 200px;
  border: 2px solid #727171;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}
.card>.moji_font2 {
  position: absolute;
  left: calc(417px - 26px);
  top: calc(768px - 91px);
  width: 200px;
  height: 200px;
  border: 2px solid #727171;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

.card>.illust {
  position: absolute;
  left: calc(135px - 26px);
  top: calc(157px - 91px);
  width: 480px;
  height: 480px;
  border: 2px solid #727171;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card>.kotoba {
  position: absolute;
  left: calc(34px - 26px);
  top: calc(688px - 91px);
  width: 680px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
}

.card{
  position:absolute;
  left:26px;
  top:15px;
  width:712px;
  height:1012px;
/* デザイン変更 */
/*  background-image: url(../image/bg_card.svg); */
  background-image: url(../image/bg_card.png);
 
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -moz-transition:-moz-transform 0.8s ease;
  -webkit-transition:-webkit-transform 0.8s ease;
  -o-transition:-o-transform 0.8s ease;
  -ms-transition:-ms-transform 0.8s ease;
  transition:transform 0.8s ease;
}

/* 20170203 windows10 + ie11 のため.cardから分離 */
.transition {
  -moz-transition:-moz-transform 0.8s ease;
  -webkit-transition:-webkit-transform 0.8s ease;
  -o-transition:-o-transform 0.8s ease;
  -ms-transition:-ms-transform 0.8s ease;
  transition:transform 0.8s ease;
}

.front{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.reverse{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.rotateshow{
  -moz-transform: rotateY(360deg) !important;
  -webkit-transform: rotateY(360deg) !important;
  -o-transform: rotateY(360deg) !important;
  -ms-transform: rotateY(360deg) !important;
  transform: rotateY(360deg) !important;
  opacity:1 !important;
}

.rotatehide{
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}