#c_body_black{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index:100000001;
	background-color: black;
	display: none;
}
#c_body{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:100000000;
	overflow:hidden;
	margin:0;
	font-family:sans-serif;
	display: none;
}
#p_body.from_d{
	background: linear-gradient(0deg, #000, #494354);
	height: 100%;
}
#c_body.Y{
}
div{
	margin: 0;
}
/* X用説明エリア */
#setsumei_X{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display: flex;
	align-items:center;
	justify-content:center;
	z-index: 100000009;
}
.Y #setsumei_X{
	display: none;
}
#setsumei_X img.smh{
	transform:scale(0.4);
}

#setsumei_Y{
	width: 100%;
}
/* 読了アラート */
#alert_read{
	background-color:rgba(228, 67, 94, 1);
	color:white;
	z-index:100000009;
	position:fixed;
	bottom:5%;
	left:0%;
	display:none;
}
/*クリックエリア*/
#click_area{
	width:100%;
	height:100%;
	position:absolute;
	top:0%;
	left:0%;
	z-index:100000000;
	display:flex;
	opacity:0.5;
}
.Y #click_area, .Y #click_area div{
	display:none;
}
#click_next{
	flex-grow:1;
	/* background-color:yellow; */
}

#click_menu{
	flex-grow:2;
	/* background-color:green; */
}
#click_pre{
	flex-grow:1;
	/* background-color:yellow; */
}
/*メニュー*/
#menu{
	position:fixed;
	z-index:100000005;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:none;
}
.Y #menu{
	background-color:transparent;
	height: auto;
	display:block !important;
}
.Y_m#menu{
	background-color:rgba(0,0,0,0.5) !important;
	height: 100% !important;
}

#menu_header{
	position:fixed;
	top:0%;
	height:10%;
	width:100%;
	background-color:black;
	display:flex;
	justify-content:space-between;
}

.mh_button,#ex_doc div{
	height: 100%;

}
.mh_button img{
	height: 100%;
	width: auto;
}
#ex_doc,#ex_menu{
	/* flexが無いほうがchromeのスマホ版では画像が伸びない。再検証 */
	display:flex;
	justify-content: center;
	align-items:center;
}
#menu_back{
	/* background-color:skyblue; */
	height: 100%;
}
.pro{
	/* background-color:orange; */
	visibility: hidden;
}
.epi{
	/* background-color:green; */
	visibility: hidden;
}
#menu_change{
	/* background-color:pink;
	width:30px;
	height:30px; */
}
#menu_range{
	/* background-color:purple;
	width:30px;
	height:30px; */
	visibility: hidden;
}
.Y #menu_range{
	visibility: visible;
}
#menu_cont{
	position:fixed;
	top:10%;
	height:80%;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
}
.Y #menu_cont{
	display: none;
	opacity: 0;
}
#menu_bottom{
	position:fixed;
	bottom:0%;
	height:10%;
	min-height: 80px;
	width:100%;
	background-color:black;
	text-align: center;
	display:flex !important;
	flex-direction: column;
}
#menu_bottom span{
	text-align:center;
	color:whitesmoke;
	font-size:0.8em;
	padding:2px;
}
.X #menu_bottom span{
	display: block;
}
.X #menu_bottom{
	justify-content:center;
	align-items:center;
}
.Y #menu_bottom{
	opacity: 1;
	width: 100px;
	height: 93%;
	right: 0;
	top: 10%;
	background: rgba(0, 0, 0, 0.5);
}
.Y #menu_bottom.hide_b{
	display:none !important;
	opacity:0;
}
/* -----------------レンジ----------------- */

#pages_r{
		margin:20px;
		transform:rotate(180deg);
}
.X #pages_r{
		width:80% !important;
}
.Y #pages_r{
	transform:rotate(90deg);
    width: 350px;
    margin-left: -125px;
    margin-top: 175px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 14.3px 0;
	background-color: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(255, 99, 125, 1);
  border-radius: 4.4px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(255, 99, 125, 1);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(255, 99, 125, 1);
  border-radius: 4.4px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(255, 99, 125, 1);
  border: 0.2px solid #010101;
  border-radius: 8.8px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgba(255, 99, 125, 1);
  border: 0.2px solid #010101;
  border-radius: 8.8px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background: #ffffff;
  cursor: pointer;
  height: 11.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(255, 99, 125, 1);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(228, 67, 94, 1);
}

/* -----------------ページレイアウト----------------- */
#p_body{
		top:0px;
}
.Y #p_body {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page{
		width:100%;
		height:100%;
		position:absolute;
		z-index:10000000;
		top:0px;
		display: flex;
		/* display: flex;
		justify-content:center;
		align-items:stretch; */
}
.page img.p_i{
	/* safariの表示バグ対策 */
	/* align-items: flex-start; */
	height: 100%;
}
div.p_i{
	height: 100%;
	display: inline-block;
}
.X.single .page img.p_i{
	width: 100%;
	object-fit: contain;
}
.X.double .page img.p_i{
	width: 50%;
	object-fit: contain;
}
.X.double .page img.p_i:first-of-type{
	object-position: right;
}
.page_01{
	object-position: right !important;
}
.X.double .page img.p_i:last-of-type{
	object-position: left;
}
.Y .page{
	position:static;
	width:100%;
	max-width: 717px;
	height:auto;
	text-align:center;
	margin: 50px 0;
}
.next_page{
		/* background-color:red; */
		left:-100%;
		z-index:100000001;
}
.now_page{
		/* background-color:gray; */
		left:0%;
}
.pre_page{
		/* background-color:blue; */
		left:100%;
}

/* ページ本体（img,div） */
.p_i{
}
.Y .p_i{
	width: 100%;
	height:100%;
}

/* Xモード見開き補正 */
#p_body.Xd .page{
	align-items:center !important;
}
/* .double #p_body.Xd .p_i{
	width: 50%;
	height: auto;
} */
.single #p_body.Xd .p_i{
	width: 100%;
	height: auto;
}

/*アニメーション*/
.act_next.next_page{
		left:0% !important;
		transition: all 600ms 0s ease;
		/* ↑アニメーション指定 */
}
.act_next.now_page{
		left:100% !important;
		transition: all 600ms 0s ease;
		/* ↑アニメーション指定 */
}
.act_pre.pre_page{
		left:0% !important;
		transition: all 600ms 0s ease;
		/* ↑アニメーション指定 */
}
.act_pre.now_page{
		left:-100% !important;
		transition: all 600ms 0s ease;
		/* ↑アニメーション指定 */
}

/*カーソル設定*/
#c_body,#m_form{
	cursor : url('../../../image/cursor/cursor_main.png'), default !important;
}
#click_next{
	cursor : url('../../../image/cursor/cursor_nex.png') 0 21, pointer;
}
#click_pre{
	cursor : url('../../../image/cursor/cursor_pre.png') 39 21, pointer;
}
img.p_i{
	cursor : url('../../../image/cursor/cursor_nex_Y.png') 42 20 , pointer;
}
#click_menu{
	cursor : url('../../../image/cursor/to_menu.png') 50 0, pointer;
}
#menu_cont{
	cursor : url('../../../image/cursor/close_menu.png') 15 12, pointer;
}
#menu_back{
	cursor : url('../../../image/cursor/cursor_back.png') 0 20, pointer;
}
#menu_change, .pro, .epi, #pages_r,#alert_yes,#alert_no,input{
	cursor : url('../../../image/cursor/cursor_active.png') 20 0, pointer;
}

/*アニメーション*/
.pochi{
	animation: pochi 1s ease 0s 1 normal none running;
}
@keyframes pochi {
	0% {
		opacity:1;
	}
	25% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	60% {
		opacity:0;
	}
	70% {
		opacity:1;
	}
	80% {
		opacity:0;
	}
	90% {
		opacity:1;
	}
	95% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

/* 縦型の場合すべて倍に */
/* 縦長 */
@media screen and (orientation: portrait) {
  div.loader{
    transform: scale(3,3);
    top: calc(50% - 96px) !important;
  }
  div.loading_text{
    font-size: 3em !important;
    left: calc(50% - 100px) !important;
    width: 200px;
  }
}
.loader {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
.loading_text{
    font-family: 'makinas','sans-serif' !important;
    position: absolute;
    top: calc(50% - -50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 50px;
    text-align: center;
    font-size: 1em;
    text-align: center;
    line-height: 0.95em;
    color: #FFF;
    text-shadow: 0 0 0.05em #F06292, 0 0 0.1em #F06292, 0 0 0.15em #F06292, 0 0 0.3em #F06292;
    filter: saturate(80%);
}

/* --------------------------閲覧完了-------------------------- */
#alert_read_2{
  border-top: solid 2px black;
  border-bottom: solid 2px black;
	background-color:rgba(100, 100, 100, 0.8);
	color:white;
	height:auto;
	font-size:18px;
	width:80%;
	overflow:auto;
	text-align: center;
	font-size:2.5vh;
}
#alert_read_2.none_read{
	visibility: hidden;
}
.double #alert_read_2{
	margin-bottom:2em;
}

#alert_read_2 .ar2{
	margin: 0.3em;
}
.ar2 div:first-child{
	margin-bottom: 0.5em;
}
#alert_read_2 h2 {
	font-size: 7vh;
	margin: 0em;
	font-family: serif;
}
#alert_yes,#alert_no,#kansou{
	display: inline;
	width:10%;
	height: auto;
	padding: 0.3em;
	border-radius: 9px;
}
#alert_yes{
	background: #08c3bd;
	padding-left: 1em;
	padding-right: 1em;
}
#alert_no{
	background-color: gray;
}
/* --------------------------メールフォーム-------------------------- */
#m_form{
  color:whitesmoke;
	margin-bottom: 2em;
  text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 230px;
}
#m_form form,#m_form div{
  display: flex;
  justify-content: center;
  align-items:center;
  height: 100%;
  flex-direction:column;
}
#m_form textarea,#m_form input{
  display: block;
  font-size: 16px;
  width:20em;
  margin:0.2em;
}
#m_form input{
  background: linear-gradient(#df78aa, #df78aa);
  color: whitesmoke;
  border: 1px gray solid;
  border-radius: 5%;
}
#m_form p{
  background: rgba(100, 100, 100, 0.8);
  padding:0.2em;
  line-height:1.5em;
  border-top:black 2px solid;
  border-bottom:black 2px solid;
	font-size:2.5vh;
	margin: 5px 0px 0px 0px;
}