@charset "UTF-8";
/* PC版サイト */
@media screen and (min-width:507px) {
 :root {
  --rightwidth: 280px;
  --smallsize: 32px;
  --bigsize: 48px;
  --space: 2px;
  --fontsize: 10px;
  --titlesize: 50px;
  --mtop: 100px;
  --bodyheight: auto;
 }

}

/* スマホ（横）サイト */
@media screen and (max-height:376px) {
 :root {
  --rightwidth: 29.256vw;
  --smallsize: 3.339vw;
  --bigsize: 5.01168vw;
  --space: 0.20882vw;
  --fontsize: 0.795vw;
  --titlesize: 5.2205vw;
  --mtop: 10vh;
  --bodyheight: 110vh;
 }
}

/* スマホ（縦）サイト */
@media screen and (max-width:507px) {
 :root {
  --rightwidth: 55.2vw;
  --smallsize: 6.3vw;
  --bigsize: 9.456vw;
  --space: 0.394vw;
  --fontsize: 1.5vw;
  --titlesize: 9.85vw;
  --mtop: 1vw;
  --bodyheight: auto;
 }
}

body {height: var(--bodyheight);}

a:link {color:#88cc88 ;} 
a:visited {color:#88cc88;}
a {
	font-size: var(--fontsize);
	line-height:10px;
	display:block;
}

.aiueaoi {font-size: var(--titlesize);}
.disnon {display: none;}
.btn {cursor: pointer;}
.pic {width: 90%;}
.small {width: var(--smallsize);}
.big {width: var(--bigsize);}

.mainbox {
	border-collapse:separate; 
	border-spacing:var(--space);
	margin-right: auto;
 	margin-left: auto;
	margin-top: var(--mtop);
}

.rightbox {
	width: var(--rightwidth);
	text-align : center;
	vertical-align:top;
}

.leftbox {
	text-align : center;
	vertical-align:top;
}

.list {
	border-collapse:separate; 
	border-spacing:var(--space);
}

.list img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}