html { height:100%; }



a{/*リンクされた文字*/
    color:#000000;
    font-style:normal;
    text-decoration:underline;
}

a:hover {/*マウスをのせたとき*/
    color:#999999;
    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ここから*/

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

BODY {
	background-image: url("newspaper.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: 'Sawarabi Gothic','メイリオ',sans-serif;
	color: #000000;
	font-feature-settings : "palt";
	letter-spacing:1px;
	MARGIN:auto;
}

.box_big{
    width :100%;
    height:auto;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 1px 10px 1px;
    background-color:#FFFFFF;
}

.box_top {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 10px 0px;
    padding :0px;
    width :100vw;
    height:auto;
    text-align;center;
    margin:auto;
}

.box_top2 {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 0px 0px;
    padding :0px;
    width :100vw;
    height:auto;
    text-align;center;
    margin:auto;
}


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

.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;
}

.box_left {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 0px 0px;
    padding :0px;
    width :15%;
    height:auto;
    text-align;center;
    margin:0px;
    background:rgba(255,0 0,0.5);
    float: left;
}

.box_right {
    padding :0px;
    width :84%;
    height:auto;
    text-align;center;
    background-color:#FFFFFF;
    float: left;
    margin:0px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 0px 0px 10px;
}

/*--ここから正方形を作る--*/
.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;
}

/*--正方形を作るここまで--*/

/*--ここから正方形を作る2--*/

.content2 {
    width: 99%;
    height: 0;
    padding-bottom: 100%;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 0px 1px 1px;
    text-align:center;
}
/*--正方形を作るここまで--*/

.number{
    width: auto;
    height: 100%;
    padding-top :40%;
}

.box_title {
    clear:both;
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 0px 0px 0px 0px;
    width :auto;
    height:auto;
    text-align;center;
    background-color:#FFFFFF;
}

.box {
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    padding :0px;
    width :100%;
    height:100%;
    text-align;center;
    margin:0px;
    background-color:#FFFFFF;
}

.box2 {
    clear:both;
    border-top:20px solid #000000;
    border-bottom:40px solid #000000;
    padding :0px;
    width :100%;
    height:auto;
    text-align:center;
    background-color:#FFFFFF;
    margin:0px;
    overflow: hidden;
}

.box_record {
	WIDTH: 100%;
	HEIGHT:100%;
	position: fixed; top:30%; left:70%; z-index: 1;
}


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

}

img.icon{
	width :20%; height:auto;
	margin: 0px;
	
}
img.icon2{
	width :20%; height:auto;
	margin-bottom: 3%;
}

img.main{
	width :20%; height:auto;
	margin: 2%;
}

img.main2{
	width :30%;
	height:auto;
	margin: 0%;
}

img.jacket{
	width :50%;
	height:auto;
	margin: 0%;
    float: left;
}


h1 {
  font-size: 300%; /* 文字サイズを15px */
  color: #000000;/* 文字色を#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
}

h1.top {
  font-size: 300%; /* 文字サイズを15px */
  color: #FFFFFF;/* 文字色を#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
  text-shadow: 2px 5px 5px #000000; /* 横・縦・ぼかし・色 */
}


h2 {
  font-size: 200%; /* 文字サイズを12px */
  color: #000000;/* 文字色を#666666 */
  MARGIN-TOP: 0px;
  padding:20px;
}

h3 {
  font-size: 120%; /* 文字サイズを12px */
  color: #000000;/* 文字色を#666666 */
  MARGIN: 3%;
}

h3.footer {
  font-size: 90%; /* 文字サイズを12px */
  color: #666666;/* 文字色を#666666 */
  MARGIN-top:10%;
  MARGIN-bottom:10%;
}

p {
  font-size: 100%;
  color: #000000;/* 文字色を#666666 */
  MARGIN: 3%;
  width:auto;
}

p.voice {
  font-size: 100%;
  color: #000000;/* 文字色を#666666 */
  MARGIN: 3%;
  MARGIN-bottom: 8%;
  width:auto;
}

p.pfuture {
  font-size: 120%;
  color: #FF004B;
  MARGIN: auto;
  width:70%;
}


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


.s1 {
	color: #444;
	font-size: 120%;
	display: flex;
	align-items: center;
	width:70%;
	margin-top:3%;
	margin-bottom:3%;

}
.s1:before, .s1:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}

.s1future {
	color: #FF004B;
	font-size: 120%;
	display: flex;
	align-items: center;
	width:70%;
	margin-top:3%;
	margin-bottom:3%;

}
.s1future:before, .s1future:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FF004B;
	display: block;
}
.vertical {
        writing-mode: vertical-rl;
    }

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

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


}/*pc_cssここまで*/


/*モバイル_cssここから*/

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

BODY {
	background-image: url("newspaper.jpg");
	background-size:  cover;
	font-family: 'Sawarabi Gothic','メイリオ',sans-serif;
	color: #000000;
	font-feature-settings : "palt";
	letter-spacing:0.1em;
	MARGIN:0;
	padding:0;
}

.box_top {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 1px 0px;
    padding :0%;
    width :100%;
    height:auto;
    text-align;center;
    margin:0px;
}

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


.box_main {
    clear:both;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 1px 0px 1px;
    padding :0px;
    width :100%;
    height:auto;
    text-align;center;
    margin:0px;
    background-color:#FFFFFF;
}

.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;
}

.box_left {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 0px 0px;
    padding :0px;
    width :15%;
    height:auto;
    text-align;center;
    margin:0px;
    background:rgba(255,0 0,0.5);
    float: left;
}

.box_right {
    border-style: solid;
    border-color: #000000;
    border-width: 0px 0px 0px 1px;
    padding :0px;
    width :84%;
    height:auto;
    background-color:#FFFFFF;
    float: left;
    margin-left:0px;
}

/*--ここから正方形を作る--*/
.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);
}

/*--正方形を作るここまで--*/

/*--ここから正方形を作る2--*/

.content2 {
    width: 99%;
    height: 0;
    padding-bottom: 100%;
    border-style: solid;
    border-color: #000000;
    border-width: 1px 1px 1px 1px;
    text-align:center;
    vertical-align:middle;
}
/*--正方形を作るここまで--*/


.box_title {
    clear:both;
    border-style: solid;
    border-color: #FFFFFF;
    border-width: 0px 0px 0px 0px;
    width :auto;
    height:70%;
    text-align;center;
    background:rgba(255,0 0,0.5);
}

.box {
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    padding :0px;
    width :100%;
    height:100%;
    text-align;center;
    margin:0px;
    background-color:#FFFFFF;
}



.box2 {
    clear:both;
    border-top:10px solid #000000;
    border-bottom:10px solid #000000;
    background:#FFFFFF;
    padding :10%;
    width :100%
    text-align:center;
    margin:0px;
}

.box_record {
	WIDTH: 100%;
	HEIGHT:100%;
	position: fixed; top:10%; left:70%; z-index: 1;
}



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

img.icon{
	width :20%; height:auto;
	margin: 0px;
}

img.icon2{
	width :20%; height:auto;
	margin-bottom: 3%;
}

img.main{
	width :20%; height:auto;
	margin-top: 2%;
	margin-bottom: 0%;
}

img.main2{
	width :50%; height:auto;
	margin: 0%;
}

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

h1 {
  font-size: 100%; /* 文字サイズを15px */
  color: #000000;/* 文字色を#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
}

h1.top {
  font-size: 100%; /* 文字サイズを15px */
  color: #FFFFFF;/* 文字色を#FF99CC */
  MARGIN-TOP: 20px;
  MARGIN-bottom: 20px;
  PADDING-TOP: 50px;
  PADDING-BOTTOM: 50px;
  text-shadow: 2px 5px 5px #000000; /* 横・縦・ぼかし・色 */
}

h1.test{
  font-size: 100%; /* 文字サイズを15px */
  color: #000000;/* 文字色を#FF99CC */
}

h2 {
  font-size: 100%; /* 文字サイズを12px */
  color: #000000;/* 文字色を#666666 */
  MARGIN-TOP: 5%;
  MARGIN-BOTTOM: 5%;
}

h3 {
  font-size: 70%; /* 文字サイズを12px */
  color: #000000;/* 文字色を#666666 */
  MARGIN: 2%;
}

h3.footer {
  font-size: 70%; /* 文字サイズを12px */
  color: #666666;/* 文字色を#666666 */
  MARGIN-top:3%;
  MARGIN-bottom:3%;
}

p {
  font-size: 70%;
  color: #000000;/* 文字色を#666666 */
  MARGIN: 2%;
  width:auto;
}

p.voice {
  font-size: 70%;
  color: #000000;/* 文字色を#666666 */
  MARGIN: 2%;
  MARGIN-bottom: 8%;
  width:auto;
}

p.pfuture {
  font-size: 70%;
  color: #FF004B;
  MARGIN: auto;
  width:70%;
}

.mar {
  MARGIN-bottom: 3%;
}

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


.s1 {
	color: #444;
	font-size: 70%;
	display: flex;
	align-items: center;
	width:70%;
	margin-top:3%;
	margin-bottom:3%;

}
.s1:before, .s1:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}

.s1future {
	color: #FF004B;
	font-size: 70%;
	display: flex;
	align-items: center;
	width:70%;
	margin-top:3%;
	margin-bottom:3%;

}
.s1future:before, .s1future:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FF004B;;
	display: block;
}

.vertical {
        writing-mode: vertical-rl;
}

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

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


}/*モバイル_cssここまで*/