@charset "utf-8";
/*-----------google広告を最前面にする---------------*/
.google_ads {
	border: 0px #0cf solid;
	text-align: center;
	display: block;
	position: relative;
	z-index: 9999;
	width: 100%;
	height: 280px;
}
@media(max-width: 460px) {
	.google_ads {
		border: 0px #0cf solid;
		text-align: center;
		display: block;
		position: relative;
		z-index: 9999;
		width: 100%;
		height: 345px;
	}
}

.google_ads_312 {
	border: 0px #0cf solid;
	text-align: center;
	width: 100%;
	height: 312px;
}
/*-----------google広告を最前面にする---------------*/



/*----------------------------------------------------*/
/*     暦関係     */
/*----------------------------------------------------*/
/*     開運暦     */
/* ※基本は左詰め */
.R_KoyomiSpm { width: 1200px;   }
#fox543 .RKy { font-size: 12px; }

/*    暦全体     */
/* ※基本は中寄り */
.R_Koyomi  { width: 1200px; }
.R_Koyomi p{
	text-align: center;
	line-height: 140%;
}

/*    万年暦     */
#SunSP    { font-size: 12px;    }
#SunSP .p { text-align: center; }

/*    月齢暦     */
#MoonSP span { font-size: 11px; }

/*    方位神    */
@media only screen and (max-device-width: 480px) {  .R_Houijin { width: 685px; } .Roy_Hou_WD{ width: 100%; }                               }
@media only screen and (min-device-width: 480px) {  .R_Houijin { width: 100%;  } .Roy_Hou_WD{ width: 60%;  } .wpc50_sp100{ width: 100%; }  }
/*----------------------------------------------------*/
/*     暦関係     */
/*----------------------------------------------------*/






/*-----------Instagram-----------*/
img.instagram00{ border-radius: 20%; }
/*-----------Instagram-----------*/



/*-----------メルマガ 有料鑑定の案内 スマホで横幅がずれるのでpaddingは取らない-----------*/
div.royal_info{
	z-index: 0;
/*	padding: 10px 5px 10px 5px;*/
}

div.royal_info > p.link{
	font-size: 15px;
	text-align: left;
}



	@media only screen and (max-device-width: 480px) { .info_c{ flex-basis: 100%; } }
	@media only screen and (min-device-width: 480px) { .info_c{ flex-basis: 33%;  } }
	.flex_info{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border: solid 0px #00d;
	}
	.info_c > p.link{ text-align: left; }
/*-----------メルマガ 有料鑑定の案内-----------*/




/*-----------レスポンスブ広告の高さの固定 280-----------*/
.googleads_height280                            { height: 280px; z-index: 100; }
@media(max-width: 460px) { .googleads_height280 { height: 345px; z-index: 100; } }
/*@media(max-width: 460px) { .googleads_height280 { height: 312px; } }*/
/*-----------レスポンスブ広告の高さの固定 280-----------*/
/*-----------Googleadsenseの300と336の切り替え-----------*/
.ads_300_336                            { width: 300px; height: 250px; z-index: 100; }
@media(min-width: 330px) { .ads_300_336 { width: 336px; height: 280px; z-index: 100; } }
/*-----------Googleadsenseの300と336の切り替え-----------*/



/*-----------関連コンテンツの高さの切り替え-----------*/
.ads_relation                            { height: 360px; }
@media(min-width: 330px) { .ads_relation { height: 400px; } }
/*-----------Googleadsenseの300と336の切り替え-----------*/
/*-----------Link広告高さの切り替え-----------*/
.google_ads_link                            { text-align: center; height: 250px; }
@media(min-width: 460px) { .google_ads_link { text-align: center; height: 100px; } }
/*-----------Link広告高さの切り替え-----------*/



/*-----------pageボタン---------------*/
input.page {
	width:  30px;
	height: 40px;
	font-size: 16px;
	color: #000088;
	border: 1px solid #000088;
	background-color: #ffffff;
}

input.page:hover {
  background: #aaaaff;
  color: #ffffff;
}

input.dis {
	width:  30px;
	height: 40px;
	font-size: 18px;
	border: 1px solid #000088;
	color: #ffffff;
	background-color: #ccccff;
}
/*--------------------------------------------------*/
/*-----------TOPへのボタン便利なのでPCでも----------*/
/*--------------------------------------------------*/
#topback {
	/* ▼表示位置を画面の右下に固定 */
	position: fixed; /* ←表示場所を固定 */
	bottom: 18px;    /* ←下端からの距離 */
	right: 18px;     /* ←右端からの距離 */
	width: 2em;      /* ←横幅 */

	/* ▼最初は非表示にしておく */
	display: none;

	/* ▼配色・配置・文字の装飾など */
	background-color: #008;
	opacity: 0.65;
	border-radius: 50%;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
	font-size: 20px;
	padding: 5px;
	/* 広告よりも後ろにしないといけない */
	z-index: 1;
}

#topback a {
	/* ▼リンクの装飾 */
	color: #fff;
	text-decoration: none;
}
#topback a:hover {
	/* ▼マウスが載ったときの装飾 */
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}
/*--------------------------------------------------*/
/*-----------TOPへのボタン便利なのでPCでも----------*/
/*--------------------------------------------------*/


/*--------------------------------------------------*/
/*-----------誰でもわかる講座の部分-------------*/
/*--------------------------------------------------*/
/*全体*/
.course {
	width: 98%;
	border: solid 0px #00a;
	text-align: left;
	display: inline-block;
}
.course > h3 {
	text-align: left;
}

/*ボタン装飾*/
.course label {
	width: 95%;
	border: solid 0px #008;
	box-sizing: border-box;
	padding: 6px;
	color: #008;
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	text-decoration: underline;
}

/*中身の調整*/
.course_text {
	border: solid 0px #00a;
}
/*ボタンホバー時*/
.course label:hover { }
/*チェックは見えなくする*/
.course input { display: none; }

/*中身を非表示にしておく*/
.course .course_text {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.2s;
}

/*クリックで中身表示*/
.course input:checked ~ .course_text {
	padding: 10px;
	height: auto;
	opacity: 1;
}
/*--------------------------------------------------*/
/*-----------誰でもわかる講座の部分-------------*/
/*--------------------------------------------------*/