.category {
   font-size:4em;
   text-align: right;
}

.category a {
   text-decoration: none;        /* リンクの下線を消す */
	color:#dd11bb;
}

.end {
   clear:right;
}

.page {
   position:relative;
   width:96%;
   margin-right:auto;
   margin-left:auto;
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color:#fffbb6;
}

.page .link{
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* category */
.link {
	text-align: center;
}

.link a {
   display: inline-block; 
   width: 42%;
   margin-top: 0.3em;                 
   margin-left: 2%;                 
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #ffeeff;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: left;
   font-size:5em;
   line-height: 1.2;             /* 行の高さを1.2倍にする) */
}

/* area */
.link2 {
	text-align: center;
}

.link2 a {
   display: inline-block; 
   width: 43.5%;
   margin-top: 0.3em;                 
   margin-left: 2%;                 
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #ddffff;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: left;
   font-size:3.5em;
   line-height: 1.2;             /* 行の高さを1.2倍にする) */
}

.link3 {
   text-align: center;
   color: #0000ff;
}

/* visityear */
.link4 {
	text-align: center;
}

.link4 a {
   display: inline-block; 
   width: 19%;
   margin-bottom: 0.3em;                 
   margin-left: 2%;                 
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #ddffdd;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: left;
   font-size:3.5em;
   line-height: 1.2;             /* 行の高さを1.2倍にする) */
}

.link5 {
	text-align: center;
}

.link5 a {
   display: inline-block; 
   width: 80%;                 
   border: 1px solid skyblue;    /* 枠線を加える */   
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #aaeeaa;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: center;
   font-size:4em;
   line-height: 1.4;             /* 行の高さを1.4倍にする) */
}

.link6 {
	text-align: center;
}

.link6 a {
   display: inline-block; 
   width: 90%;
   border-radius: 0.25em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #bbbbff;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: center;
   font-size:5em;
   line-height: 1.2;             /* 行の高さを1.2倍にする) */
}

/* area 選択時*/
.link7 {
	text-align: center;
}

.link7 a {
   display: inline-block; 
   width: 43.5%;
   margin-top: 0.3em;                 
   margin-left: 2%;                 
   border-radius: 0.75em;        /* 枠線の角を丸くする */
   padding: 0.5em;               
   background-color: #ddffff;    
   text-decoration: none;        /* リンクの下線を消す */
   text-align: left;
   font-size:3.5em;
   line-height: 1.2;             /* 行の高さを1.2倍にする) */
}

/* 横画面時 */
@media screen and (orientation: landscape) {

	.wrapper {
		width: 100%;
		display: flex;
	}	

	.main {
      margin-left: 1%;                 
		width: 50vw;
		position: absolute;
		left:20vw;
	}
	
	.main2 {
      margin-left: 2%;                 
		width: 20vw;
		position: absolute;
		left:70vw;
	}
	
	.side {
		background: #666666;
		width: 20vw;
		height: 100vh;
      position: fixed;
   }

   .link a {
      width: 90%;
   }

   .link4 a {
      width: 40%;
      font-size:3em;
   }

   .link7 a {
      width: 90%;
      font-size:3em;
   }

   header {
      position: fixed;
      color:#000000;
      background-color:#bb00bb;
      width: 20vw;
      top:0;
      z-index: 20;
   }

   .link3 a {
      display: inline-block; 
      width: 50%;
      margin-top: 0.3em;                 
      margin-left: 2%;                 
      border-radius: 0.75em;        /* 枠線の角を丸くする */
      padding: 0.5em;               
      background-color: #ffffdd;    
      text-decoration: none;        /* リンクの下線を消す */
      text-align: center;
      font-size:4em;
      line-height: 1.2;             /* 行の高さを1.2倍にする) */
   }
      
}

/* 縦画面時 */
@media screen and (orientation: portrait) {

   header {
      position: fixed;
      color:#000000;
      background-color:#bb00bb;
      width: 100%;
      top:0;
      z-index: 20;
   }

   .link3 a {
      display: inline-block; 
      width: 20%;
      margin-top: 0.3em;                 
      margin-left: 2%;                 
      border-radius: 0.75em;        /* 枠線の角を丸くする */
      padding: 0.5em;               
      background-color: #ffffdd;    
      text-decoration: none;        /* リンクの下線を消す */
      text-align: center;
      font-size:4em;
      line-height: 1.2;             /* 行の高さを1.2倍にする) */
   }
      
}