html { height:100%; }








/*pc_css��������*/

@media screen and (min-width:900px){

BODY {

	font-family: 'Sawarabi Gothic','���C���I',sans-serif;
	background-color:#97040A;
	color: #FFFFFF;
	font-feature-settings : "palt";
	letter-spacing:1px;
	MARGIN:auto;
	width:100vw;
}

.box_main {
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 10px 10px 10px 10px;
    width:90%;
    height:auto;
    text-align: center;
    margin:auto;
    margin-top:20px;
}

.box_footer {
    border-style: solid;
    border-color: #000000;
    border-width: 10px 0px 0px 0px;
    padding :0px;
    width :100%;
    height:300px;
    text-align;center;
    margin:auto;
    background-color:#FFFFFF;
}

/*--�������琳���`�����--*/
.square-wrapper{
  position:relative;
  width:100%;
    text-align:center;
    vertical-align:middle;
    background:#FFFFFF;
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 10px 0px;
}

.spacer{
  width:100%;
  padding-bottom:100%;
}
.content{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#FFFFFF;
}

/*--�����`����邱���܂�--*/

.box_record {
	margin-left:10vw;
	WIDTH: 80vw;
	HEIGHT:60vw;
	position: absolute;
	top:0px;
	text-align:center;
		z-index: 1;
}

img {
	width :100%;
        height:auto;
	margin:0;
}

img.staff{
	width :80%;
        height:auto;
	margin:0;
}


/*--��]�J���[�̑傫������--*/

img.icon01{
	width :150px;
	height:auto;
	position:absolute;
	left:0px; top:0px;
}

img.icon02{
	width :150px;
	height:auto;
	position:absolute;
	right:0px; top:120px;
}

img.icon03{
	width :150px;
	height:auto;
	position:absolute;
	left:0px; top:120px;
}

img.icon04{
	width :150px;
	height:auto;
	position:absolute;
	right:0px; top:0px;
}

img.manga{
	width :50%;
	height:auto;
	
}

/*--��]�J���[�̑傫������--*/



h1 {
  font-size: 300%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;

}

h2 {
  font-size: 200%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
  text-shadow: 2px 5px 5px #000000; /* ���E�c�E�ڂ����E�F */
}


h3 {
  font-size: 120%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
  text-shadow: 2px 5px 5px #000000; /* ���E�c�E�ڂ����E�F */
}

p {
  font-size: 200%;
  color: #FFFFFF;/* �����F��#666666 */
  MARGIN: 3%;
  width:auto;
  word-break: break-all;
}

.mar {
  MARGIN-bottom: 3%;
}
.mar2 {
  clear: both;
	background: rgba(0,0,0,0.4);
	width: 10px;
	height: 0px;
	padding: 0px;
}

.youtube {
  position: relative;
  width: 80%;
  padding-top: 56.25%;
    margin:auto;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


#arrow {
  position: fixed;
  right: 0;
  bottom: 0;
  padding-right: 0%;
  padding-bottom: 0%;
  width: 200px;
  height: auto;
  z-index: 1;
}

#arrow_img {
  width: 100%;
  height: auto;
  vertical-align: baseline;

}


/*�܂��͂����܂�̃{�b�N�X�T�C�Y�Z�o��borer-box�� */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem�Z�o�����₷�����邽�߂�*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  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;
  border-radius: 0.5rem;
}

/*�{�^�������*/

a.btn--red.btn--cubic {
  border-top: 0.5px solid #ffffff;
  border-bottom: 5px solid #999999;
  background-color:#ffffff;
  color: #FF0000;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #ffffff;
}

a.btn--radius {
  border-radius: 100vh;
}

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

a{/*�����N���ꂽ����*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:none;
}

a:hover {/*�}�E�X���̂����Ƃ�*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:underline;
}

a.linklink{
MARGIN-left:0px;
color:#000000;
display:block;
width:90%;
padding-top:3px;
padding-bottom:3px;
text-align:center;
border:1px solid;
border-color:#008000 5px;
background:#FFFFFF;
text-decoration: none;
}

a.linklink:hover{
color:#FFFFFF;
background:#008000;
border:1px solid ;
border-color:#FFFFFF;
text-decoration: none;
}



}/*pc_css�����܂�*/


/*���o�C��_css��������*/

@media screen and (max-width:899px) {

BODY {
	font-family: 'Sawarabi Gothic','���C���I',sans-serif;
	color: #000000;
	font-feature-settings : "palt";
	letter-spacing:0.1em;
	MARGIN:0;
	padding:0;
	background-color:#97040A;
	color: #FFFFFF;
}

.box_main {
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 10px 10px 10px 10px;
    width:90%;
    height:auto;
    text-align: center;
    margin:auto;
    margin-top:20px;
}

.box_footer {
    border-style: solid;
    border-color: #000000;
    border-width: 10px 0px 0px 0px;
    width :100vw;
    height:50px;
    text-align;center;
    margin:0px;
    background-color:#FFFFFF;
}

/*--�������琳���`�����--*/
.square-wrapper{
  position:relative;
  width:100%;
    text-align:center;
    vertical-align:middle;
    background:rgba(255,0 0,0.5);
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 1px 0px;

}

.spacer{
  width:100%;
  padding-bottom:100%;
    background:rgba(255,0 0,0.5);
}
.content{
    text-align:center;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
   background:rgba(255,0 0,0.5);
}

/*--�����`����邱���܂�--*/


.box_record {
	margin-left:15vw;
	WIDTH: 70vw;
	HEIGHT:20vw;
	position: absolute;
	top:0px;
	text-align:center;
		z-index: 1;
}

img {
	width :100%;
        height:auto;
	margin-bottom: 0px;
}

img.staff{
	width :80%;
        height:auto;
	margin:0;
}

img.icon01{
	width :50px;
	height:auto;
	position:absolute;
	left:0px; top:20px;
}

img.icon02{
	width :50px;
	height:auto;
	position:absolute;
	right:-50px; top:20px;
}

img.icon03{
	width :50px;
	height:auto;
	position:absolute;
	left:-50px; top:20px;
}

img.icon04{
	width :50px;
	height:auto;
	position:absolute;
	right:0px; top:20px;
}

h1 {
  font-size: 120%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 10px;
  MARGIN-bottom: 10px;

}

h2 {
  font-size: 100%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 10px;
  MARGIN-bottom: 10px;
  text-shadow: 2px 5px 5px #000000; /* ���E�c�E�ڂ����E�F */
}


h3 {
  font-size: 90%; /* �����T�C�Y��15px */
  color: #FFFFFF;/* �����F��#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
  text-shadow: 2px 5px 5px #000000; /* ���E�c�E�ڂ����E�F */
}

p {
  font-size: 100%;
  color: #FFFFFF;/* �����F��#666666 */
  MARGIN: 3%;
  width:auto;
  word-break: break-all;
}
.mar {
  MARGIN-bottom: 3%;
}

.mar2 {
  clear: both;
	background: rgba(0,0,0,0.4);
	width: 1%;
	height: 0px;
	padding: 0px;
}

.youtube {
  margin:auto;
  position: relative;
  width: 80%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#arrow {
  position: fixed;
  right: 0;
  bottom: 0;
  margin:2%;
  padding-right: 0px;
  padding-bottom: 0px;
  width: 20%;
  height: auto;
  z-index: 2;
}

#arrow_img {
  width: 100%;
  height: auto;
  vertical-align: baseline;
  filter: grayscale(0%);
}

a{/*�����N���ꂽ����*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:none;
}

a:hover {/*�}�E�X���̂����Ƃ�*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:underline;
}

/*�܂��͂����܂�̃{�b�N�X�T�C�Y�Z�o��borer-box�� */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem�Z�o�����₷�����邽�߂�*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  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;
  border-radius: 0.5rem;
}

/*�{�^�������*/

a.btn--red.btn--cubic {
  border-top: 0.5px solid #ffffff;
  border-bottom: 5px solid #999999;
  background-color:#ffffff;
  color: #FF0000;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #ffffff;
}

a.btn--radius {
  border-radius: 100vh;
}

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

a{/*�����N���ꂽ����*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:none;
}

a:hover {/*�}�E�X���̂����Ƃ�*/
    color:#FFFFFF;
    font-style:normal;
    text-decoration:underline;
}

a.linklink{
MARGIN-left:0px;
color:#000000;
display:block;
width:90%;
padding-top:3px;
padding-bottom:3px;
text-align:center;
border:1px solid;
border-color:#008000 5px;
background:#FFFFFF;
text-decoration: none;
}

a.linklink:hover{
color:#FFFFFF;
background:#008000;
border:1px solid ;
border-color:#FFFFFF;
text-decoration: none;
}


}/*���o�C��_css�����܂�*/