@charset "utf-8";

/* ページ全体の枠組み
---------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	border-top: 10px solid #ffffff;
	font-size: 15px;
	font-family:sans-serif;
	color: #000000;
	background: #fefefe;
	border: none;
	position: relative;
}

#site {
	margin: 0 auto;
	padding: 0 auto;
	width: 600px;	/* サイトの幅は600px */
	border: none;
	background: #ffffff;
}

h1 {
	margin: 0;
	padding: 0;
	font-size: 26px;
	border: none;
	color: #FF1493;
}

#schedule {
	margin: 0;
	padding: 0;
	font-size: 18px;
	border: none;
	color: #4169e1;
}

#grope_detail {
	margin: 0;
	padding: 0;
	font-size: 18px;
	border: none;
	color: #ababab;
}

h1:before {
  content: url("/image/taakun1.gif");
}

<>

a {
    text-decoration:none;
	color: #444;
}

.subtitle {
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
	border: none;
	color: #000000;
}

#taakun_picture {
	position:relative;
	margin: auto;
	padding: auto;
	width: 580px;
	height:435px;
	border: none;
	background: #333;
}

#taakun_picture img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
}

#taakun_picture_fileno {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 0;
	width:80px;
	border: none;
	text-align:center;
	font-size: 12px;
	color: #000000;
	background:#ffffAA;
	border-radius:5px;
}

#taakun_picture_title {
	position: absolute;
	bottom: 5px;
	left: 1px;
	margin: 402px auto auto 10px;
	padding: 0;
	width:560px;
	border: none;
	text-align:center;
	font-size: 17px;
	color: #000000;
	background:#dfefff;
	border-radius:5px;
}

#top_prev1,#top_next1 {
	position: absolute;
	width: 50px;
	height:100px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	font-size: 24px;
	padding: 0 8px 4px;
	cursor: pointer;
	opacity: .5;
}

#top_prev1 {
	left: 0;
	border-radius:0 50px 50px 0;
}
  
#top_next1 {
	right: 0;
	border-radius:50px 0 0 50px;
}

#top_prev1:hover,
#top_next1:hover {
  opacity: .3;
}

.hidden {
	display: none;
}

.taakun_name {
	margin: 16px auto 0;
	padding: 5px auto;
	width: 500px;
	border: none;
	text-align:center;
	font-size: 28px;
}

table {
	margin: 0 auto;
    width: 560px;
    border: 2px #80a0f0 solid;
    border-collapse: collapse;
    border-spacing: 2;
}

td {
    padding: 5px;
    border: 1px #80a0f0 solid;
    border-width: 1px 1px 1px 1px;
    text-align: center;
	font-size: 24px;
	color: #000000;
	background: #ffffff;
}

.font_bred {
	color: #f00;
	font-weight:bold;
}

.font_black {
	color: #000;
}

.font_bblack {
	color: #000;
	font-weight:bold;
}
.font_red {
	color: #f00;
}

.font_blue {
	color: #00f;
}

.font_yellow {
	color: #0ff;
}

.font_pink {
	color: #4169e1;
}

.font_green {
	color: #0f0;
}

.font_cyan {
	color: #000000;
	background: #dfefff;
}

.font_magenta {
	color: #f0f;
}

.font20 {
	font-size: 20px
}
.font24 {
	font-size: 24px
}
#welcome {
	margin: 2px auto;
	padding: 8px 8px;
	width: 520px;
	font-size: 24px;
	color: #000000;
	background: #ffffff;
	border: none;
}

#taakun_intro {
	margin: 10px auto;
	padding: 20px auto;
	width: 560px;
/*	border: 1px #cccccc solid;*/
/*	background: #dfefff;*/
	text-align:center;
	border: none;
	font-size: 20px;
}

#relation_title {
	margin: 0 auto;
	padding: 2px auto;
	width: 500px;
	text-align:center;
	color: #000000;
	border: none;
}

.contents_title {
	margin: 0 auto;
	padding: 2px auto;
	width: 500px;
/*	border: 1px #cccccc solid;*/
	text-align:center;
	color: #000000;
	border: none;
}

.nav {
	margin: 20px 0px 20px 0px;
    width: 100%;						 /* 横幅の指定 */
 /*   border-top: 1px solid #dfefff; */ 	 /* 上部の線の色を指定 */
 /*   border-bottom: 1px solid #dfefff;*/    /* 下部の線の色を指定*/
    border-top: 1px solid #888;  	 /* 上部の線の色を指定 */
    border-bottom: 1px solid #888;    /* 下部の線の色を指定*/
    margin-bottom: 5px; 				 /* 下部マージン */
    overflow: hidden;					 /* おまじない */
	background: #dfefff;

}

.nav ul {
    width: 95%;						/* 横幅の指定 */
    margin-left: 0;						/* 左端から20%右側に動かす */
}

.nav li {
    width: calc(24% - 2px);				/* 横幅の指定（線の分をマイナスする）*/
    border-left: 1px solid #888;		/* 線を描く */
    text-align: center;					/* 文字を中央に */
    float: left;						/* 左から並べる */
	list-style: none;

}

.nav li:last-child{
    border-right: 1px solid #888;		/* li要素の最後の物は右側に線を描く */
}

.nav a {
    display: block;						/* 1つのli全体にリンクを有効にする */
    text-decoration: none;				/* ブラウザ標準のリンク装飾をオフに */
    color:#313131;						/* 文字色の変更 */
    font-size: 22px;					/* フォントサイズの指定 */
    letter-spacing: 5px;				/* 文字と文字の間隔をあける */
    font-weight: 400px;					/* 文字の太さを調整 */
    line-height: 70px;					/* 行間の指定（ナビボタンの高さ指定）*/
	font-weight:bold;
}

.nav a:hover{
    background-color: #05f;				/* 背景色の指定 */
    color: #ffffff;						/* 文字色の変更 */
	font-size: 24px;
	font-weight:nomal;
    transition: 0.3s;					/* ホバー時の動きをなめらかにする */
}

#contents {
	margin: 0 auto;
	padding: 0 auto;
	width: 600px;
	text-align:center;
	border: none;
}


#site #map {
	margin: 10px auto;
	padding: 0 auto;
	display: block;
}

#site #hokkaidomap {
	margin: 2px auto;
	width: 500px;
	border: none;display: block;
}

.DivLink .picture {
	position:relative;
	margin: auto;
	padding: auto;
	width: 186px;
	height:140px;
	float:left;
	text-align: center;
	border: none;
	border: 1px #000000 solid;
	background: #444;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.DivLink img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}

/* Newマーク */
.DivLink .newbox {
	position:absolute;
	padding: 0;
	width: 40px;
	height:15px;
	text-align: center;
	border: 1px #ababab solid;
	background: #fff800;
   	border-radius: 4px;
	font-size: 12px;
	color: #00000;
	text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.DivLink .title {
	margin: 0 0;
	padding: 0 0;
	width:390px;
	height:140px;
	float:left;
	text-align:left;
	border: none;
}

.DivLink .subtitle {
	margin: 5px 0px 5px 20px;
	padding: 0px 0px;
	width: 390px;
	height:20px;
	font-family:sans-serif;
	text-align:left;
	color: #4169e1;
	font-size: 22px;
	border: none;
}

.MorePage {
	/*position: relative;*/
	display: block;
	font-size: 20px;
	font-weight: bold;
	padding: 2em 10em;
	margin:  auto;
	text-decoration: none;
	font-family:sans-serif;
	border-left: solid 4px #668ad8;
	border-right: solid 4px #668ad8;
	color: #668ad8;
	background: #e1f3ff;
	transition: .2s;
}

.MorePage:hover {
  box-shadow: 0px 4px 8px #575;
}

.DivLink .maintitle {
	margin: 2px 0px 4px 8px;
	padding: 0 0;
	width: 380px;
	height: 60px;
	text-align: left;
	font-size: 22px;
	border: none;
}

.DivLink .no {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 70px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ffffcc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.DivLink .place {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ffcccc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.DivLink .area {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ddffdd;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.DivLink .categorys {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #dfefff;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.DivLink .subtitle {
	margin: 0px 10px 2px 20px;
	padding: 0 0;
	width: 380px;
	text-align: left;
	font-size: 14px;
	border: none;
	color: #FF1493;
}

.DivLink .datetime {
	margin: 0 0;
	padding: 0px 10px 10px 20px;
	width: 220px;
	border: 1px #cccccc solid;
	text-align:left;
	font-size: 14px;
	border: none;
	color: #888;
}

.clearboth {
	clear:both;
}

#fooder {
	margin: 15px auto;
	padding: 0px 0px;
	width: 600px;
	text-align:center;
	font-size: 12px;
	border: none;
}

.DivLink {
	margin: 15px auto;
	padding: 0px;
    position:relative;
	width: 580px;
	height: 140px;
	border: 2px #8888cc solid;
	background: #ffffff;
	color: #000000;
   	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

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

.DivLink:hover {
	background-color: #acf;
	color: #000000;
	transition: background-color .3s;
}

.DivLink img:hover {
	transform: scale(1.05); /* 拡大 */
}

#TripPanels {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 20px;
}

.TripPanel {
	margin: 10px auto;
	padding: 0px;
    position:relative;
	width: 188px;
	height: 190px;
	border: 2px #8888cc solid;
	color: #000000;
	background: #ffffff;
   	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.TripPanel_Empty {
	margin: 5px;
	padding: 0px;
    position:relative;
	width: 188px;
	height: 190px;
	border: 0px #ffffff solid;
	background: #ffffff;
}

.TripPanel .picture2 {
	position:relative;
	margin: auto;
	padding: auto;
	width: 186px;
	height:140px;
	float:left;
	text-align: center;
	border: none;
	border: 1px #000000 solid;
	background: #444;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

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

.TripPanel img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}

.TripPanel img:hover {
	transform: scale(1.05); /* 拡大 */
}

.TripPanel .title2 {
	margin: 0 0;
	padding: 0;
	width:100%;
	height:50px;
	float:left;
	text-align:center;
	border: none;
	font-family:sans-serif;
	font-size: 18px;
}

.TripPanel .subtitle2 {
	margin: 0 0;
	padding: 2px 0px 0px 4px;
	width:100%;
	float:left;
	text-align:left;
	border: none;
	font-family:sans-serif;
	font-size: 12px;
	color:#ff6666
}

.TripPanel:hover {
	background-color: #acf;
	color: #000000;
	transition: background-color .3s;
}



.LinkPanelTitle {
	margin: 20px auto 10px auto;
	padding: 0 auto;
	width: 100%;
	color: #000000;
	text-align:center;
	border: none;
	font-family:sans-serif;
	font-size: 26px;
}

.LinkPanel {
	margin: 10px auto;
	padding: 0px;
    position:relative;
	width: 580px;
	height: 50px;
	border: 2px #8888cc solid;
	color: #000000;
	background: #ffffff;
   	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.LinkPanel .picture2 {
	position:relative;
	margin: auto;
	padding: auto;
	width: 125px;
	height:50px;
	float:left;
	text-align: center;
	border: none;
	border: 1px #000000 solid;
	background: #444;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

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

.LinkPanel img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}

.LinkPanel .title2 {
	margin: 0 0;
	padding: 8px 0px 0px 12px;
	width:390px;
	height:50px;
	float:left;
	text-align:left;
	border: none;
	font-family:sans-serif;
	font-size: 16px;
}

.LinkPanel .tripicon {
	width: 250px;
	height: 200px;
}

#CharacterPanels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


#CharacterPanels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.CharacterPanel {
	margin: 10px auto;
	padding: 0px;
    position:relative;
	width: 188px;
	height: 190px;
	border: 2px #8888cc solid;
	background: #ffffff;
   	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.CharacterPanel_Empty {
	margin: 5px;
	padding: 0px;
    position:relative;
	width: 188px;
	height: 190px;
	border: 0px #ffffff solid;
	background: #ffffff;
}

.CharacterPanel .picture3 {
	position:relative;
	margin: auto;
	padding: auto;
	width: 186px;
	height:140px;
	float:left;
	text-align: center;
	border: none;
	border: 1px #000000 solid;
	background: #444;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

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

.CharacterPanel img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
   	border-radius: 8px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}

.CharacterPanel .title3 {
	margin: 0 0;
	padding: 0;
	width:100%;
	height:50px;
	float:left;
	text-align:center;
	border: none;
	font-family:sans-serif;
	font-size: 14px;
}

.CharacterPanel:hover {
	background-color: #acf;
	color: #000000;
	transition: background-color .3s;
}

.CharacterPanel img:hover {
	transform: scale(1.05); /* 拡大 */
}

#pagetitlebar {
	margin: 0 0;
	padding: 0 0;
	width: 560px;
	height: 30px;
	border: none;
}

#pagetitlebar img {
	border: none;
	width: 590px;
	/*height: 30px;*/
}

#site #title {
	margin: 0 auto;
	padding: 0px 0px;
	width: 100%;
	font-size: 26px;
	font-family:sans-serif;
	font-weight:bold;
	color: #000000;
	border: none;
}

#fileno {
	float: left;
	margin: 0 2px 10px 0;
	padding: 0;
	width: 100px;
	font-family:sans-serif;
	text-align:center;
	color: #000000;
	font-size: 14px;
	background: #ffffcc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

#place {
	float: left;
	margin: 0 2px 10px 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 14px;
	background: #ffcccc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

#area {
	float: left;
	margin: 0 2px 10px 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 14px;
	background: #ddffdd;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.categorys2 {
	float: left;
	margin: 0 2px 10px 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 14px;
	background: #dfefff;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}


#update {
	margin: 0 auto;
	padding: 0px 0px;
	width: 100%;
	font-size: 14px;
	font-family:sans-serif;
	color: #888888;
	border: none;
}

#site #context {
	clear:both;
	margin: 22px auto;
	padding: 0px 0px;
	width: 100%;
	font-size: 22px;
	font-family:sans-serif;
	color: #000000;
	border: none;
}

#site #subtitle2 {
	margin: 0 0;
	padding: 0;
	font-size: 22px;
	font-family:sans-serif;
	color: #FF1493;
	border: none;
}

#context .picture {
	width: 100%;
    height: auto;
	margin: 0 auto;
	padding: 0px 0px;
	border: 1px #cccccc solid;
}

.privious_button  {
	width: 298px;
	height:80px;
	margin: 10px 0 20px 0;
	float:left;
	line-height: 80px;
	font-family:sans-serif;
	font-size: 20px;
	text-align:center;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
/*	background: #ffc0cb;*/
	background: #dfefff;
	color: #444;
	box-shadow: 0px 2px 4px #575;
}

.next_button {
	width: 298px;
	height:80px;
	margin: 10px 0 20px 0;
	float:right;
	line-height: 80px;
	font-family:sans-serif;
	font-size: 20px;
	text-align:center;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
/*	background: #ffc0cb;*/
	background: #dfefff;
	color: #444;
	box-shadow: 0px 2px 4px #575;
}

.privious_button:hover {
  box-shadow: 0px 4px 8px #575;
}

.next_button:hover {
  box-shadow: 0px 4px 8px #575;
}

#back_button0 {
	/*clear:both;*/
	width: 600px;
	margin: 1px auto;
	padding: 0 0;
    height: 60px;
	line-height: 60px;
	text-align:center;
	font-size: 20px;
	font-family:sans-serif;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	/*background: #dfefff;*/
	background: #ffe6f1;
	color: #444;
	box-shadow: 0px 2px 4px #575;
}

#back_button1 {
	/*clear:both;*/
	width: 600px;
	margin: 20px auto;
	padding: 0 0;
    height: 120px;
	line-height: 120px;
	text-align:center;
	font-size: 24px;
	font-family:sans-serif;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	/*background: #dfefff;*/
	background: #ffe6f1;
	color: #444;
	box-shadow: 0px 2px 4px #575;
}

#back_button2 {
	/*clear:both;*/
	width: 600px;
	margin: 20px auto;
	padding: 0 0;
    height: 120px;
	line-height: 120px;
	text-align:center;
	font-size: 24px;
	font-family:sans-serif;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	/*background: #dfefff;*/
	background: #ffe6f1;
	color: #444;
	box-shadow: 0px 2px 4px #575;
}

#back_button3 {
	/*clear:both;*/
	width: 600px;
	margin: 20px auto;
	padding: 0 0;
    height: 120px;
	line-height: 120px;
	text-align:center;
	font-size: 24px;
	font-family:sans-serif;
	display: inline-block;
	padding: 0 0;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	/*background: #dfefff;*/
	background: #ffe6f1;

	color: #444;
	box-shadow: 0px 2px 4px #575;
}

#back_button1:hover {
  box-shadow: 0px 4px 8px #575;
}

#back_button2:hover {
	box-shadow: 0px 4px 8px #575;
}

#back_button3:hover {
	box-shadow: 0px 4px 8px #575;
}

#sitemap a {
	text-decoration: none;
	color: #000;
}
#sitemap a:hover {
	text-decoration: underline;
	color: #000;
}

#sitemap a:visited {
	text-decoration: none;
	color: #000;
}

#sitemap .fileno {
	margin: 0 2px 10px 0;
	padding: 0;
	width: 100px;
	font-family:sans-serif;
	text-align:center;
	color: #000000;
	font-size: 12px;
	background: #ffffcc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

#sitemap .place {
	margin: 0 2px 10px 0;
	padding: 1px 2px;
	width: 100px;
	font-family:sans-serif;
	text-align:center;
	color: #000000;
	font-size: 12px;
	background: #ffcccc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

#sitemap .area2 {
	margin: 0 2px 10px 0;
	padding: 1px 2px;
	width: 100px;
	font-family:sans-serif;
	text-align:center;
	color: #000000;
	font-size: 12px;
	background: #ddffdd;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

#sitemap .update {
	margin: 0 2px 10px 0;
	padding: 1px 2px;
	width: 100px;
	font-family:sans-serif;
	text-align:center;
	color: #a0a0a0;
	font-size: 12px;
	border: none;
}

#sitemap .powertitle {
	color:#FF1493;
}

/* たあ君タグ  */
#taakuntag {
	position: fixed;
	margin:0;
	padding:0;
	right: 0px;
	top: 0px;
	/*top:calc(100vh - 50px);*/
	width:	270px;
	height:	50px;
	display:flex;
}

#taakuntag img {
	display:inline-block;
	margin:0;
	padding:0;
}

#taakuntag_text {
	margin:0;
	padding:0;
	text-align:center;
	font-size: 22px;
	color: black;
	line-height: 50px;
	background: #dfefff;
	width:100%;
}

#taakuntag:hover {
	opacity: 60%;
}

#taakuntag:active {
	opacity: 40%;
}

@media (max-width: 1199px) {

/* フルスクリーンボタン  */
#fullscreen_button {
	position: fixed;
	margin:0 auto;
	padding:0;
	right: 0px;
	left:0px;
	top:calc(100vh - 80px);
	width:	600px;
	height:	80px;
	display:flex;
	justify-content: space-between;
}

#fullscreen_button #fullscreen_button_left {
	margin:0px;
	padding:0;
	width:49.5%;
	background: #dfefff;
	color: #444;
	text-align:center;
	line-height: 80px;
	border-radius: 10px;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	box-shadow: 0px 2px 4px #575;
	font-size:18px;
}
#fullscreen_button #fullscreen_button_left:hover {
	background: #dfefff;
}

#fullscreen_button #fullscreen_button_left:active {
	transform: translate(0,2px);
	box-shadow: 0px 0px 4px #575;
}

#fullscreen_button #fullscreen_button_right {
	margin:0px;
	padding:0;
	width:49.5%;
	background: #dfefff;
	color: #444;
	text-align:center;
	line-height: 80px;
	border-radius: 10px;
	text-decoration: none;
	font-weight:bold;
	border: 1px;
	box-shadow: 0px 2px 4px #575;
	font-size:18px;
}

#fullscreen_button #fullscreen_button_right:hover {
	background: #dfefff;
}

#fullscreen_button #fullscreen_button_right:active {
	transform: translate(0,2px);
	box-shadow: 0px 0px 4px #575;
}

}

@media (min-width: 1200px) {

/* スタイルの設定 */
	#fullscreen_button {
		position: fixed;
		margin:0;
		padding:0;
		left:0px;
		bottom: -100px;
		width:	10px;
		height:	10px;
	}

}

 /* コンテナをフレックスボックスに設定 */
.photos_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

/* 各ボックスを2列にする */
.photos_box {
	position: relative;   /* ←ココをimgから移動 */
	box-sizing: border-box;
	padding: 1px;
	text-align: center;
}

/* 画像のサイズを自動調整 */
.photos_box img {
	width: 100%; /* 各ボックスの幅に合わせる */
	height: auto; /* 縦横比を維持 */
	border-radius: 5px; /* オプション：角を丸める */
	position: block; /* ホバー時のテキスト配置に必要 */
}

.photos_box a.photo_title {
	display: block;
	font-size: 12px;       /* 12px指定 */
	color: #444;           /* グレー */
	text-decoration: none; /* 下線なし */
	text-align: left;      /* 左寄せ */
	padding: 2px 8px 0;    /* 画像との間に余白 */
}


.MorePagePhotos {
	display: block;
	font-size: 20px;
	font-weight: bold;
	padding: 2em 10em;
	margin:  auto;
	text-decoration: none;
	font-family:sans-serif;
	border-left: solid 4px #668ad8;
	border-right: solid 4px #668ad8;
	color: #668ad8;
	background: #e1f3ff;
	transition: .2s;
}

.ARGridBox {
	margin: 15px auto;
	padding: 0px;
    position:relative;
	width: 590px;
	height: 140px;
	border: 2px #8888cc solid;
	background: #ffffff;
   	border-radius: 10px;
}

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

.ARGridBox .Rank{
    position: relative;
 	top: 0;
    left: 0;
    width: 20px;
    height: 100%;
	color: #000;
	float:left;
	line-height: 140px;   /* 高さと同じにする */
	text-align: center;
	border-top-left-radius: 10px;     /* 左上だけ丸める */
	border-bottom-left-radius: 10px;  /* 左下だけ丸める */
	background: #F2F2F2;
	font-size: 20px;
}

.ARGridBox .Rank1 {
		background: #E5CD90; /* 金色 */
}

.ARGridBox .Rank2 {
		background: #C7CDD9; /* 銀色 */
}

.ARGridBox .Rank3 {
		background: #C9BEB8; /* 銅色 */
}

.ARGridBox .picture {
	position:relative;
	margin: auto;
	padding: auto;
	width: 186px;
	height:140px;
	float:left;
	text-align: center;
	border: none;
	border: 1px #000000 solid;
	background: #444;
	border-top-right-radius: 10px;     /* 左上だけ丸める */
	border-bottom-right-radius: 10px;  /* 左下だけ丸める */
}

.ARGridBox img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
	margin:auto;
	padding: 0;
	border: none;
	border-top-right-radius: 10px;     /* 左上だけ丸める */
	border-bottom-right-radius: 10px;  /* 左下だけ丸める */
}

/* Newマーク */
.ARGridBox .newbox {
	position:absolute;
	padding: 0;
	width: 40px;
	height:15px;
	text-align: center;
	border: 1px #ababab solid;
	background: #fff800;
   	border-radius: 4px;
	font-size: 12px;
	color: #00000;
	text-align: center;
	border-radius: 10px;
}

.ARGridBox .title {
	margin: 0 0;
	padding: 0 0;
	width:380px;
	height:140px;
	float:left;
	text-align:left;
	border: none;
}

.ARGridBox .subtitle {
	margin: 5px 0px 5px 20px;
	padding: 0px 0px;
	width: 380px;
	height:20px;
	font-family:sans-serif;
	text-align:left;
	color: #4169e1;
	font-size: 22px;
	border: none;
}


.ARGridBox .maintitle {
	margin: 2px 0px 4px 8px;
	padding: 0 0;
	width: 370px;
	height: 60px;
	text-align: left;
	font-size: 22px;
	border: none;
}

.ARGridBox .no {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 74px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ffffcc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.ARGridBox .place {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ffcccc;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.ARGridBox .area {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #ddffdd;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.ARGridBox .categorys {
	float: left;
	margin: 0 1px 0 0;
	padding: 0px 5px 0px 5px;
	width: 60px;
	border: 1px #cccccc solid;
	font-family:sans-serif;
	text-align:center;
	font-size: 15px;
	background: #dfefff;
	border: none;
   	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;	
}

.ARGridBox .subtitle {
	margin: 0px 10px 2px 20px;
	padding: 0 0;
	width: 370px;
	text-align: left;
	font-size: 14px;
	border: none;
	color: #FF1493;
}

.ARGridBox .datetime {
	margin: 0 0;
	padding: 0px 10px 10px 20px;
	width: 220px;
	border: 1px #cccccc solid;
	text-align:left;
	font-size: 14px;
	border: none;
	color: #888;
}

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

.ARGridBox:hover {
	background-color: #acf;
	color: #000000;
	transition: background-color .3s;
}

.ARGridBox img:hover {
	transform: scale(1.05); /* 拡大 */
}