:root { --site-vw: min(1vw, 4.8px); }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
	box-sizing:border-box;
}
h1,h2,h3,h4,h5,h6{
	color:#2f2f2f;
   font-family: Sawarabi Gothic;
   font-weight:normal;
   transform: rotate(0.001deg);
}
html{
	font-size:62.5%;
}
body {
	font-size:1.6rem;
    line-height:1.6;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "メイリオ", sans-serif;
	color:#3c3c3c;
	overflow-wrap: break-word;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	color:#3c3c3c;
	text-decoration:none;
	box-sizing:border-box;
}

input, select {
    vertical-align:middle;
}

@media all{
html{
	font-size:calc(2.6 * var(--site-vw));
}

}

:focus:not(:focus-visible) {
  outline: none!important;
}

:focus-visible {
  outline: 3px solid #000;
}
body{
	overflow-x:hidden;
  -webkit-text-size-adjust: auto;
  -moz-text-size-adjust: auto;
  -ms-text-size-adjust: auto;
  text-size-adjust: auto;
}

h1{
	font-size:3.6rem;
	margin-bottom:0.5em;
}

h2{
	font-size:3rem;
	margin-bottom:1em;
}

main{
	border-top:1px solid #e5e5e5;
	display:block;
}
header{
	max-width:1150px;
	margin:0 auto;
	display:flex;
	padding:0.8rem 0rem;
	justify-content:space-between;
	align-items:flex-end;
	box-sizing:border-box;
	transition-duration:0.3s;
	background-color:#FFF;
}
header a{
	font-family: 'Sawarabi Gothic', sans-serif;
   transform: rotate(0.001deg);
	text-decoration:none;
}
#header_calbeeroot a{
	font-size:0px;
}
#header_calbeeroot img{
	width:108px;
	height:46px;
}
_:-ms-fullscreen, :root #side_navi li a {
	padding:1.3em 1em 1em 1em;
}
_:-ms-fullscreen, :root #side_navi li.two_line a {
	padding:1em 1em 0.55em 1em;
}
footer{
	margin-top:10rem;
	border-top:0.2rem solid #EB0100;
	padding:3.4rem 0;
}
  #back-top {
             position: fixed;
             bottom: 3rem;
			 right:2rem;
			 z-index:9998;
			 display:none;
  }
  #back-top a {
             width: 5.1rem;
             display: block;
             text-decoration: none;
             color: #bbb;
  }
  #back-top a:hover {
             color: #000;
  }
  #back-top span {
    font-size:0px;
             width: 5.1rem;
             height: 5.1rem;
             display: block;
             background: url(images/common/img/btn_top.png) center center /contain no-repeat;
  }
@media not all{
header{
	padding:0.8rem 1.2rem;
	height:9.1rem;
}
#header_calbeeroot{
	height:auto;
}
  
}
@media all{
html{
	overflow-x:hidden;
}
body{
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
}
main img{
	width:100%;
}
h1{
	font-size:3.2rem;
}
h2{
	margin-bottom:1em;
}
header{
    position: fixed;
    top: 0;
	z-index:100;
	width:100%;
	box-sizing:border-box;
	background-color:#FFF;
	align-items: center;
	height:calc(15 * var(--site-vw));
	padding: 0;
	border-bottom:0;

}
#header_calbeeroot{
	position:relative;
}
#header_calbeeroot img{
	width:calc(25 * var(--site-vw));
	height:auto;
}
footer {
    margin-top: 8rem;
    border-top: 0.2rem solid #EB0100;
    padding: 0 0 2rem 0;
}
#back-top {
    bottom: 8rem;
    right: 1rem;
}

}
@media screen and (orientation: landscape) and (max-width:480px){
 
  #header_calbeeroot {
    height:calc(7 * var(--site-vw));
  }

#back-top {
    bottom: calc(10 * var(--site-vw))!important;
    right: calc(3 * var(--site-vw))!important;
}
#back-top a {
    width: calc(8 * var(--site-vw))!important;
}
#back-top span {
    width: calc(8 * var(--site-vw))!important;
    height: calc(8 * var(--site-vw))!important;
}

}
:root {
  --colorBlack: #000;
  --colorGray: #efefef;
  --colorWhite: #fff;
  --familyMPLUS1: "M PLUS 1", sans-serif;
  --familyMurecho: "Murecho", sans-serif;
}

:root {
		--vw-rem: calc(calc(1 * var(--site-vw)) * 0.5208333333333333);
}

html {
  scroll-behavior: smooth;
  width: 100%;	
}
main {
  display: block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
  sans-serif;
	font-family: var(--familyMurecho);
  font-weight: normal;
  overflow: hidden;
	color: var(--colorBlack);
}
main img {
  max-width: 100%;
	height: auto;
	width: 100%;
}
section {
  display: block;
}
h1, h2 {
  margin-bottom: 0;
}
h2, h3 {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
  sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--colorBlack);
}

@media all {
  main {
    padding-top: 0;
  }
}

@media (hover: hover) {
	main a:hover,
	main button:hover {
		cursor: pointer;
		opacity: 0.7;
	}
}

#tabeyomemanga {
	position: relative
}

.link__btn {
	max-width: calc(18.5 * var(--vw-rem));
	width: 100%;
	height: calc(5.5 * var(--vw-rem));
	background: var(--colorBlack);
	color: var(--colorWhite);
	font-size: calc(2.342 * var(--vw-rem));
	display: flex;
	align-items: center;
	position: relative;
	font-weight: 700;
	padding-left: calc(1 * var(--vw-rem));
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-image: url(images/img/icon-btn-arrow.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	@media all {
		padding-left: 1rem;
	}
}

.scaleup {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.scaleup.active {
  transform: scale(1);
  opacity: 1;
}
#mv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	@media all {
		grid-template-columns: 1fr
	}
}
.site-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
body { margin: 0; }
#back-top {
  right: calc(max(0px, (100% - 480px) / 2) + 1rem);
}
@media screen and (orientation: landscape) and (max-width: 480px) {
  #back-top { right: calc(3 * var(--site-vw)) !important; }
}