@charset "utf-8";

/******************************************/
/*  共通項  */
/******************************************/

body{
	padding:0;
	margin:0;
	overflow-x: hidden;
	overflow-y: hidden;
}

.blindbg{
	width:100vw;
	height:85vh;
	opacity:0.9;
	background-image:url(https://qrkuji.com/100kuji/img/atntion.png);
	background-repeat:repeat;
}

main {
	width: 100%;
	display:block;
	vertical-align: top;
	margin:auto;
	font-family: "M PLUS 1p";
	/*
	font-family: "Sawarabi Mincho";
	*/
}

h1{
	text-align:center;
}
h1 img.mikuji_img{
	width:45%;
	margin:5px 0;
}

h2{
}

img.logos{
	display:block;
	width:60%;
	margin:0 auto;
}

img.logos2{
	display:block;
	width:10%;
	margin:0 auto;
}

.rndm{
	display:block;
	width:100%;
	text-align:center;
	margin:0;
}

/* おみくじの数字の大きさ*/
.rndm span#rnd{
	font-size:10em;
	line-height:0.5em;
	padding:0;
	text-align:center;
}

.divlock{
	display:block;
	width:100%;
	text-align:center;
	margin:0;
}

.divlock span#rnd{
	font-size:10em;
	line-height:1em;
	padding:0;
	text-align:center;
}

 
.imgarea {
	min-height: 150px;
	width: calc(40% - 6px);
	display: inline-block;
	margin:20px 0 50px 0;
}

.imgarea_new{
	display:block;
	width:100vw;
	text-align:center;
	padding:0;
}

div.imgarea_new span{
	font-size:300%;
	font-family:"Sawarabi Mincho";
}

.copyright{
	display:block;
	width:100%;
	font-size:x-small;
	position: fixed;
	bottom:0;
	z-index:999;
	text-align:center;
}

p.lost{
	display:block;
	width:28%;
	margin:10px 0 0 10px;
	padding:10px;
	
	border-radius: 15%;
	box-sizing: border-box;
  	
	background:#e0ebaf;
	font-size:medium;
	position: fixed;
	z-index:888;
	text-align:left;
	color:#7b8d42;
}

p.lost:before{
	content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0ebaf;
  z-index: 0;
}

.notes_txt{
	display:block;
	width:90%;
	border:#d3381c 1px dashed;
	margin:10px auto;
	padding:5px;
	background:rgba(231,231,231,0.5);
	color:#333;
	font-size:x-small;
	text-align:left;
}

.notes_txt h4{
	border-bottom:1px #C00 solid;
	margin:0;
	padding:3px;
}

#demo_door{
	/* ドアの外枠
	overflow-x: hidden;
	overflow-y: auto;
	*/
	position: relative;
    background: #fff;
    width: 80%;
    height: 45vh;
    display: flex;
	margin:20px auto 5px auto;
	border:#ddbb99 10px solid;
	
	overflow-y:auto;
	overflow-x:hidden;
	
	transition: 1.2s;
	/*1.2秒かけて表示させる*/
	
}

.blind_kuji_door{
	opacity:0;
	/*最初はブラインド*/
}

.demo_l, .demo_r{
	/* 障子柄CSS */
	background-size: 32px 32px;
	background-position: 51% 49%;
	background-image:
  repeating-linear-gradient(
    90deg,
    #ebe1a9 ,
    #ebe1a9 2px,
    transparent 2px,
    transparent 32px
  ),
  repeating-linear-gradient(
    0deg,
    #ebe1a9 ,
    #ebe1a9 2px,
    #FEFBEB 2px,
    #FEFBEB 32px
  );
}

.demo_l{
	position: absolute;
	transition: all 2000ms 2s ease; /* 開ける速度（ミリ秒）、開けるのを待つ秒数 */
	width: 50%;
	height: 45vh;
	top: 0;
	left: 0;
  border-right:8px solid #ebe1a9;
}
.demo_l.open{
	margin-left: -52%;
}
.demo_r{
	position: absolute;
	transition: all 2000ms 2s ease;
	width: 50%;
	height: 45vh;
	top: 0;
	left: 50%;
  border-left:8px solid #ebe1a9;
}
.demo_r.open{
	margin-left: 51%;
}



body.medetaibg{
	background-color:#9FD9F6;
}


#animation{
	text-align:center;
}


div.imgarea_new span,
.yashirocover span,
.yashirocover h3
{
	font-size:300%;
	font-family:"Sawarabi Mincho";
}

/* 鈴緒 */

.btn-suzu{
	height:25vh;
	/*  泥でオレンジのリンク線を消す */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
	margin:30px auto 0px;
}

body.suzubg{
	background-image:url(../../common/img/svg/oyashiro_suzu.svg);
	background-repeat: no-repeat;
	background-position:top;
	background-color:#7b8d42;
	background-size:auto 100vh;
}

.suzu_opa{
	/*opacity: 0.8;*/
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	filter: grayscale(50%);
}

/* お稲荷 */

body.oyashirobg{
	background-image:url(https://qrkuji.com/common/img/svg/oyashiro04.svg);
	background-repeat:no-repeat;
	background-position:top;
	background-size:auto 100vh;
	background-color:#0CF;
	background-position:fixed;
	background-attachment:fixed;
}

.btn-yashiro{
	height:25vh;
	/*  泥でオレンジのリンク線を消す */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
	margin:30px auto 0px;
}

.yashirocover{
	display:block;
	margin:0 auto;
	padding:0 !important;
	text-align:center;
	background-color:#fff;
	width:80%;
	max-height:55vh;
	overflow-x: hidden;
	overflow-y: auto;
	border:5px #c9171e solid;
}



.bf_journal{
	display:none;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}


/* 打ち出の小槌用　くるっとまわる */

body.kodutibg{
	background-color:#E8C64E;
}

.rotate_koduti{
    transform: rotate3d(0, 0, 1, -730deg);
	-webkit-transform: rotate3d(0, 0, 1, -730deg);
	transform-origin: center center; 
	transition: all 2.0s cubic-bezier(0.680,-0.550,0.265,1.550) 0s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all 2.0s cubic-bezier(0.680,-0.550,0.265,1.550) 0s;

	position:fixed;
	top: 50px;
	z-index:99;
}

.undercover_koduti {
      display: none;
      width: 100vw;
	  height: 65vh;
	  padding:150px 0 0 0 ;
	  margin:0 !important;
	  background-image:url(../../common/img/svg/kodutibg.svg);
	  background-repeat: no-repeat;
	  background-position:top 0%;
	  background-color:#DB0010;
      /*background: rgba(232,236,239,0.8);*/
      position:fixed;
      bottom: 0;
      z-index:3;
	  text-align: center;
	  color:#fff;
}


.btn-koduti{
	width:30vw;
	/*  泥でオレンジのリンク線を消す */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
	position: absolute;
	top: 1em;
	left: 0;
	right: 0;
	margin: auto;
	z-index:999;
}

.rotate_box{
    transform: rotate3d(0, 0, 1, -145deg);
	-webkit-transform: rotate3d(0, 0, 1, -145deg);
	transform-origin: center center; 
	transition: all 0.8s ease 0s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all 0.8s ease 0s;
    }
	
	
.rotate_utide{
    transform: rotate3d(0, 0, 1, -90deg);
	-webkit-transform: rotate3d(0, 0, 1, -90deg);
	transform-origin: center center; 
	transition: all 0.8s ease 0s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all 0.8s ease 0s;
    }
	

.undercover {
      display: none;
      width: 100vw;
	  height: 80vh;
	  padding:0 !important;
	  margin:0 !important;
	  background:url(../../common/img/new/p0074_m-min.png);
      /*background: rgba(232,236,239,0.8);*/
      position:fixed;
      bottom: 0;
      z-index:999;
	  text-align: center;
}

/* 目出鯛用　くるっとまわる */
.rotate_medetai{
    transform: rotate3d(0, 0, 1, -430deg);
	-webkit-transform: rotate3d(0, 0, 1, -430deg);
	transform-origin: center center; 
	transition: all 0.8s ease 0s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all 0.8s ease 0s;
	position:fixed;
	top: 50px;
	z-index:99;
}

.undercover_medetai {
      display: none;
      width: 100vw;
	  height: 65vh;
	  padding:150px 0 0 0 ;
	  margin:0 !important;
	  background-image:url(../../common/img/svg/nami01.svg);
	  background-repeat: no-repeat;
	  background-position:top 0%;
	  background-color:#004680;
      /*background: rgba(232,236,239,0.8);*/
      position:fixed;
      bottom: 0;
      z-index:3;
	  text-align: center;
	  color:#fff;
}


.btn-tai{
	width:30vw;
	/*  泥でオレンジのリンク線を消す */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
	position: absolute;
	top: 1em;
	left: 0;
	right: 0;
	margin: auto;
	z-index:999;
}


/* おみくじ用　くるっとまわる */

body.omikujibg2{
	background-color:#0f2350;
}



body.omikujibg{
	width: 100%;
	height: 315px;
	background-color: #eebbcb;
	background-image:
	 repeating-linear-gradient(-45deg,
	 #ebf6f7, #ebf6f7 8px,
	 transparent 0, transparent 15px);
}

.rotate_omikuji{
    transform: rotate3d(0, 0, 1, -145deg);
	-webkit-transform: rotate3d(0, 0, 1, -145deg);
	transform-origin: center center; 
	transition: all 0.8s ease 0s;
	-webkit-transform-origin: center center; 
	-webkit-transition: all 0.8s ease 0s;

	position:fixed;
	top: 50px;
	z-index:99;
}

.undercover_omikuji {
      display: none;
      width: 100vw;
	  height: 65vh;
	  padding: 75px 0 0 0;
	  margin:0 auto;
	  background-image:url(../../common/img/new/washi_bg.gif);
	  background-repeat: repeat;
	  background-color:#fff;
      /*background: rgba(232,236,239,0.8);*/
      position:fixed;
      bottom: 0;
      z-index:3;
	  text-align: center;
	  color:#543f32;
	  border-top:50px #DB0010 double;
}


.btn-omikuji, .btn-omikuji_new{
	width:30vw;
	/*  泥でオレンジのリンク線を消す */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
	position: absolute;
	top: 2em;
	left: 0;
	right: 0;
	margin: auto;
	z-index:999;
}


.omikuji_opa{
	/*opacity: 0.8;*/
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	filter: grayscale(50%);
}