/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* 25/05 追記 */
h1.PageTitle a {
		/* 翻訳対応、文字折り返し可能に */
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.0;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/*html { font-size: 62.5%; }*/
html { font-size: 100%; }
/*
	↓リフレッシュが無効になってたのはこれかも
	html { overscroll-behavior-y: none; }
*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.flexwrap {
	display: flex;
}
.gridwrap {
	display: grid;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/* ダブルタップしないとタップ扱いにならないとか、ページ全体の挙動がおかしくなったけど、よく分からん… */
/* ↓のdisable-hoverのpointer-events: none;が原因だったのかも?たぶん直ったと思う… */

/* ホバーを無効化するクラス */
.disable-hover {
  /*pointer-events: none;*/
}
/* スクロールを無効化するクラス */
.no-scroll {
	overflow: hidden; /* スクロール禁止 *//* スクロールバー非表示 */
	/*touch-action: none; /* この要素に対する全てのジェスチャーを無効化 */
}
.no-scroll-FG {/* FG=flexbox-gallery */
	/*overflow: hidden; /* スクロール禁止 *//* スクロールバー非表示 */
	/*touch-action: none; /* この要素に対する全てのジェスチャーを無効化 */
}

/* スクロールの幅との兼ね合い */
@media (hover: hover) {
	.no-scroll-FG {
	  /*padding-right: 0.5vw;*/
	}
} @media screen and (max-width: 1024px) and (hover: hover){
	.no-scroll-FG {
	  /*padding-right: 1vw;*/
	}
}
/* flexbox-gallery.css内#fullimageにもwidth:100vw;追記しました */

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

footer #copyright, footer #copyright2
{
	pointer-events: none;/* 画像ドラッグ・右クリックコピー禁止 */
	/* 範囲選択禁止 */
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	     -moz-user-select: none; /* Firefox */
	      -ms-user-select: none; /* Internet Explorer/Edge */
	          user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.stickPan
{
	/* 範囲選択禁止 */
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	     -moz-user-select: none; /* Firefox */
	      -ms-user-select: none; /* Internet Explorer/Edge */
	          user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


	.BackgroundImage {
		position: fixed;
		top: 0;
		left: 0%;/*transform: translate(-50%, 0%);*/
		/*.no-scrollとの兼ね合いで、一旦left:0;にしてみます*/
		z-index: -1;
		width: 100vw;
		height: 100lvh;
		overflow: hidden;
	}
	.BackgroundImage img {/* width,heightはportrait,landscapeに記述 */
		vertical-align: bottom;
		transition: all 0.5s ease 0s;
	}



@media screen and (orientation: portrait) {
	.BackgroundImage img {/* デバイスが縦なら縦長に */
		height: auto;
		min-width: 100vw;
		min-height: 100lvh;
	}
}
@media screen and (orientation: landscape) {
	.BackgroundImage img {/* デバイスが横なら横長に */
		width: auto;
		min-width: 100vw;
		min-height: 100lvh;
	}
}
/*
 中央寄せ
	transform: translate(calc(50vw - 50%),calc(50vh - 50%));
*/


.PROVERB::-webkit-scrollbar-thumb,/* スクロールバーの色 */
.PROVERB .HomePie, .PROVERB h1.PageTitle, .PROVERB .CircleIcon, /*.PROVERB #footBottom,*/
 .TileMenu .proverb .button:after, .TileMenu .proverb .button:before, .TileMenu .proverb a.current
{ background-color: #cf5353; }

.TANKA::-webkit-scrollbar-thumb,
.TANKA .HomePie, .TANKA h1.PageTitle, .TANKA .CircleIcon, /*.TANKA #footBottom,*/
 .TileMenu .tanka .button:after, .TileMenu .tanka .button:before, .TileMenu .tanka a.current
{ background-color: #b0cf53; }

.MUNEKOTOBA::-webkit-scrollbar-thumb,
.MUNEKOTOBA .HomePie, .MUNEKOTOBA h1.PageTitle, .MUNEKOTOBA .CircleIcon, /*.MUNEKOTOBA #footBottom,*/
 .TileMenu .munekotoba .button:after, .TileMenu .munekotoba .button:before, .TileMenu .munekotoba a.current
{ background-color: hotpink; }

.MAXIM::-webkit-scrollbar-thumb,
.MAXIM .HomePie, .MAXIM h1.PageTitle, .MAXIM .CircleIcon, /*.MAXIM #footBottom,*/
 .TileMenu .maxim .button:after, .TileMenu .maxim .button:before, .TileMenu .maxim a.current
{ background-color: slategray; }

.TROUBLE::-webkit-scrollbar-thumb,
.TROUBLE .HomePie, .TROUBLE h1.PageTitle, .TROUBLE .CircleIcon, /*.TROUBLE #footBottom,*/
 .TileMenu .trouble .button:after, .TileMenu .trouble .button:before, .TileMenu .trouble a.current
{ background-color: purple; }/* #9a479a */

.DIARY::-webkit-scrollbar-thumb,
.DIARY .HomePie, .DIARY h1.PageTitle, .DIARY .CircleIcon, /*.DIARY #footBottom,*/
 .TileMenu .diary .button:after, .TileMenu .diary .button:before, .TileMenu .diary a.current
{ background-color: darkorange; }

.FORTUNE::-webkit-scrollbar-thumb, #GALLERY::-webkit-scrollbar-thumb,/* spページ */
.FORTUNE .HomePie, .FORTUNE h1.PageTitle, .FORTUNE .CircleIcon, /*.FORTUNE #footBottom,*/
 .TileMenu .fortune .button:after, .TileMenu .fortune .button:before, .TileMenu .fortune a.current
{ background-color: #4c74e5; }

.ILLUSTRATION::-webkit-scrollbar-thumb,
.ILLUSTRATION .HomePie, .ILLUSTRATION h1.PageTitle, .ILLUSTRATION .CircleIcon, /*.ILLUSTRATION #footBottom,*/
 .TileMenu .illustration .button:after, .TileMenu .illustration .button:before, .TileMenu .illustration a.current
{ background-color: dimgray; }

.EBOOKS::-webkit-scrollbar-thumb,
.EBOOKS .HomePie, .EBOOKS h1.PageTitle, .EBOOKS .CircleIcon, /*.EBOOKS #footBottom,*/
 .TileMenu .ebooks .button:after, .TileMenu .ebooks .button:before, .TileMenu .ebooks a.current
{ background-color: plum; }

.PLAYGROUND::-webkit-scrollbar-thumb,
.PLAYGROUND .HomePie, .PLAYGROUND h1.PageTitle, .PLAYGROUND .CircleIcon, /*.PLAYGROUND #footBottom,*/
 .TileMenu .playground .button:after, .TileMenu .playground .button:before, .TileMenu .playground a.current
{ background-color: cadetblue; }


.RESULT::-webkit-scrollbar-thumb,
.RESULT .HomePie, .RESULT h1.PageTitle, .RESULT .CircleIcon, /*.RESULT #footBottom,*/
 .TileMenu .result .button:after, .TileMenu .result .button:before, .TileMenu .result a.current
{ background-color: #c78dcc }

.UNDER_CONSTRUCTION::-webkit-scrollbar-thumb,
.UNDER_CONSTRUCTION .HomePie, .UNDER_CONSTRUCTION h1.PageTitle, .UNDER_CONSTRUCTION .CircleIcon/*, .UNDER_CONSTRUCTION #footBottom,*/
{ background-color: blueviolet; }


/*
.PROVERB h1.PageTitle:after {background: url("../images/layer01-white.png") center center / contain no-repeat;}
.TANKA h1.PageTitle:after {background: url("../images/layer02-white.png") center center / contain no-repeat;}
.MUNEKOTOBA h1.PageTitle:after {background: url("../images/layer03-white.png") center center / contain no-repeat;}
.MAXIM h1.PageTitle:after {background: url("../images/layer04-white.png") center center / contain no-repeat;}
.TROUBLE h1.PageTitle:after {background: url("../images/layer05-white.png") center center / contain no-repeat;}
.DIARY h1.PageTitle:after {background: url("../images/layer06-white.png") center center / contain no-repeat;}
.FORTUNE h1.PageTitle:after {background: url("../images/layer08-white.png") center center / contain no-repeat;}
.ILLUSTRATION h1.PageTitle:after {background: url("../images/layer10-white.png") center center / contain no-repeat;}
.EBOOKS h1.PageTitle:after {background: url("../images/layer07-white.png") center center / contain no-repeat;}
.RESULT h1.PageTitle:after {background: url("../images/layer11-white.png") center center / contain no-repeat;}
*/
/* footerの色をページカラーにするか、保留 

.PROVERB #footBottom:before { border-bottom-color: #cf5353; }
.TANKA #footBottom:before { border-bottom-color: #b0cf53; }
.MUNEKOTOBA #footBottom:before { border-bottom-color: hotpink; }
.MAXIM #footBottom:before { border-bottom-color: slategray; }
.TROUBLE #footBottom:before { border-bottom-color: #9a479a; }
.DIARY #footBottom:before { border-bottom-color: darkorange; }
.FORTUNE #footBottom:before { border-bottom-color: #4c74e5; }
.ILLUSTRATION #footBottom:before { border-bottom-color: dimgray; }
.EBOOKS #footBottom:before { border-bottom-color: plum; }
.RESULT #footBottom:before { border-bottom-color: #c78dcc }
*/



/*!!!!!!!!!!!!!!!(GoogleAdsence)!!!!!!!!!!!!!!!*/

/*ins {border:1px red solid;}*/

.AdRightTop, .AdRightBottom
{ width: 100%;}
.AdRightTop { height: 20vh; margin-bottom: 1vw; }
.AdRightBottom { height: 55vh; }

/*!!!!!!!!!!!!!!!(GoogleCSE)!!!!!!!!!!!!!!!*/

.GoogleCSE, .GoogleCSERnav {
	width: 100%;max-height: 100%;
}
.GoogleCSE * {
	margin:0 !important;
}
.gsc-input-box {
	padding:0 !important;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.gsc-input {
	padding-right:0 !important;
}
.gsc-search-button-v2 {
	cursor: pointer;
	transition: all 0.3s ease;
}
.gsc-input-box,
.gsc-search-button-v2 {
	height: 35px;
}

.GoogleCSERnav .gsc-input-box {
	height: 50px;
}
.GoogleCSERnav td.gsc-search-button-v2,
.GoogleCSERnav button.gsc-search-button-v2 {
	height: calc(50px + 2px);
}
.GoogleCSERnav .gsc-search-button-v2 {
    width: 70px;
}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
@media screen and (orientation: portrait) {

	.GoogleCSERnav {
		width: 100%;
	}
}
@media screen and (orientation: landscape) {

	.GoogleCSERnav {
		width: 70%;
	}

}

/*-----------------------------------------------------*/


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

/*body, html {overflow-x: hidden;}*/
body {
	font-family: sans-serif;
	color: #333333;
	overflow-x: hidden;
	/*background-image: url("../../munekotoba/images/img_background.jpg");
	background-repeat: repeat;
	background-size: cover;*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* タップ時のハイライトを非表示 */
	tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	transition: all 0.3s ease;
	color: #0000DE;
	text-decoration: none;
}
	a:visited { color: #941D55; }

img {
	vertical-align: bottom;
}

h1,h2,h3,h4,h5,h6 { line-height: 1.2; }
p { line-height: 1.65; }
/*h1 { white-space: nowrap; }*/

/*h1 { font-size: clamp(1.75rem, 1.482rem + 0.42vw, 2rem); } values28-32px,view1024-1980px */
/*h2 { font-size: clamp(1.625rem, 1.357rem + 0.42vw, 1.875rem); } values26-30px,view1024-1980px */
/*h3 { font-size: clamp(1.5rem, 1.232rem + 0.42vw, 1.75rem); } values24-28px,view1024-1980px */
/*h4 { font-size: clamp(1.375rem, 1.107rem + 0.42vw, 1.625rem); } values22-26px,view1024-1980px */
/*h5 { font-size: clamp(1.25rem, 0.982rem + 0.42vw, 1.5rem); } values20-24px,view1024-1980px */
/*h6 { font-size: clamp(1.125rem, 0.857rem + 0.42vw, 1.375rem); } values18-22px,view1024-1980px */

/*p { values16-20px,view1024-1980px 
	font-size: clamp(1rem, 0.732rem + 0.42vw, 1.25rem);
}*/
/*aside { values14-18px,view1024-1980px 
	font-size: clamp(0.875rem, 0.607rem + 0.42vw, 1.125rem);
}*/


.dashes {
	letter-spacing: -0.1em;
	margin-right: 0.1em;
}






/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#wrapper {
	width: 100%;
	height: auto!important;
	min-height: 100dvh;
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
	display: grid;
	/* 0.3fr 1fr 0.3frとすると、troubleのslick.jsが暴走した… */
	grid-template-columns: 17% 62% 17%;/* 96%(gap4%) */
	grid-template-rows: auto;
    gap: 0 2%;	/* 4%分を考慮 */
	padding: 0 2%;
    margin-bottom: 30px;
	position: relative;
}

header {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
#contents {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#rightnavi {
	grid-column: 3 / 4;
	grid-row: 1 / 3;
	padding-top: 30px!important;
}

/*
footer {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
}
*/

/* :::::::::::::::::::::::::::::::::ページヘッダー:::::::::::::::::::::::::::::::::::::::::::::::*/

#headerMobile { display: none; }

header {
	width:100%;
	height: 100dvh;
	z-index: 998;
	position: sticky;
	top: 0;/* 3カラムfooter *//* top:0;だと#wrapperが戻るとき消えちゃう */
}
	header #headerPC {
	    display: grid;
	    grid-template-columns: 50% 50%;
	    grid-template-rows: 120px 50px calc(100dvh - 120px - 50px - 150px) 150px;
	    gap: 0;
	    width: 100%;
	    height: 100%;
	    justify-items: center;
		/*padding-top: 1px; intersection-observer-dummyの分、footerとの高さ合わせ */
	}
	#contents {
		padding-bottom: 150px;/* header(leftnavi)とのstickyの足並みそろえ */
	}

		.headLogoPC {
			width: 100%;
			height: 100%;
			padding: 0 10px;
			grid-column: 1 / 3;
			grid-row: 1 / 2;
			border-bottom: 1px solid #333333;
		}
		.headLogoPC a {
			width: 100%;
			height: 100%;
			display: inline-block;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.headLogoPC img {
			width: auto;
			max-width: 100%;
			max-height: 100%;
		}


	#headMiddle {
		width: 100%;
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#headBottom {
		grid-column: 1 / 3;
		grid-row: 4 / 5;
		/*border: 1px solid #333333;*/
	}
		#headBottom img {
		    width: 100%;
		    height: auto;
		}


/*::::::::::::::::::::::::::::::::::::ページフッター::::::::::::::::::::::::::::::::::::::::: */

	.AdFoot { display: none; border: 1px solid purple; }

			.fadein {/* footAnime用 common2.jsにjQuery記述あり */
				opacity : 0;
				/*transform : translate(0, 100px);下からふんわり*/
				transition : all 1.5s;
			}
			.fadein.active{
				opacity : 1;
				/*transform : translate(0, 0);下からふんわり*/
			}

footer {
    /*background-image: -webkit-linear-gradient(right, #E54CCA, #7E4CE5);
	background-image: linear-gradient(to right, #E54CCA, #7E4CE5);*/
	position: relative;
}
	#footTop {
		width:100%;
		/*height: 25dvh;*/
		display: flex;
		align-items: flex-end;
		justify-content: center;
    }
	#footTop img.footAnime {
		width: clamp(30%, 800px, 100%);
		/*width: 800px;
		max-width: 100%;*/
		height: auto;
		position: relative;
		z-index: 1;
		top: -2px;/* 位置微調整 */
	}
	#footBottom {
	    padding: 1em 2em;
		background-color: rgb(190 0 255 / 50%);
		text-align: center;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1em 0;
		position: relative;
	}
		/* https://saruwakakun.com/html-css/reference/h-design */
		#footBottom:before {/* "ヘリ"のスタイル */
			content: " ";
			position: absolute;
			top: -40px;
			left: 0;
			width: -webkit-calc(100% - 40px);
			width: calc(100% - 40px);
			height: 0;
			border: solid 20px #cd9d9d00;
			border-bottom-color: rgb(190 0 255 / 50%);/* borderの上に書くと効かないなぜ？ */
			-webkit-filter: grayscale(50%);
			-moz-filter: grayscale(50%);
			-ms-filter: grayscale(50%);
			filter: grayscale(50%);
		}

		footer #copyright, footer #copyright2 {
			line-height: 1.3;
			word-break: break-all;
			color: #fdfdfd;
		}
		footer .footerLinks {
			gap: 1em;
		}
			footer .footerLinks a {
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				/*-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				overflow: hidden;*/
			}
				.footerLinksPC {
					display: flex;
				}
					.footerLinksPC a {
						width: auto;
						height: 35px;
					}
						.footerLinksPC img {
						    width: auto;
						    height: 100%;
						}

				.footerLinksSP {
					display: none;
			        flex-wrap: wrap;
			        justify-content: center;
			        align-items: center;
				}
					.footerLinksSP a {
						display: flex;
						align-items: center;
						max-width: 150px;
						/*aspect-ratio: 150 / 50;*/
					}
						.footerLinksSP img {
							width: 100%;
							height: auto;
						}





/*:::::::::::::::::::::::::::::::::::leftvaviの装飾:::::::::::::::::::::::::::::::::::::::::::::*/

#leftnaviA {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}
#leftnaviB {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
.TileMenu, .TileMenu ul, .TileMenu ul .button, .TileMenu ul .button a,
.TileMenu .button .flexwrap,
.TileMenu ul .button:after, .TileMenu ul .button:before {
	width: 100%;
	height:100%;
}

.TileMenu {
	z-index: 998;/* #loadingが9999,flexboxgal()が999 */
}

	#leftnaviA.TileMenu ul li, #leftnaviB.TileMenu ul li {
	    width: 100%;
	    height: 20%;
	}
	.TileMenu ul li {
	    list-style: none;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.TileMenu .button {
	    padding: 5px;/* ホバー時に線が走る枠幅 */
	    background: #fdfdfd;
	    border: none;
	    cursor: pointer;
	    display: block;
	    position: relative;
	    overflow: hidden;
	    transition: all .3s ease-in-out .3s;
	}
	/*.TileMenu ul .button:hover {box-shadow:0.3vw 0.3vw 0 rgba(0,0,0,0.3);}*/
	.TileMenu .button a {
		display: block;
		border: 1px solid #f081dc;
		z-index: 100;
		position: relative;
		transition: all .3s ease-in-out .3s;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		background-color: #fdfdfd;
		text-decoration: none;
		cursor: pointer;
		transition: all .3s ease-in-out .3s;
	}
	.TileMenu .button:after {
	    position: absolute;
	    bottom: -100%;
	    right: -100%;
	    content: "";
	    transition: all .3s ease-in-out .5s;
	}
	.TileMenu .button:before {
	    position: absolute;
	    top: -100%;
	    left: -100%;
	    content: "";
	    transition: all .3s ease-in-out .5s;
	}
	.TileMenu .new:after, .TileMenu .caution:after {
	    position: absolute;
	    bottom: 4%;
	    right: 3%;
	}
		.TileMenu .new:after {/* NEW */
			white-space: pre;/* https://saruwakakun.com/html-css/reference/css-break */
			content: "NEW";
		    font-size: 10px;
		    padding: 0 3px;
			background: crimson;
		    color: #fdfdfd;
		}
		.TileMenu .caution:after {/* 工事中マーク */
		    content: "";
			    width: 15px;
			    height: 13px;
		    background: url('../images/caution_icon.png') center center / 100% 100% no-repeat;
		}

	.TileMenu .button .flexwrap {/*上下左右中央寄せ*/
		flex-flow: column;
		justify-content: space-evenly;
		align-items: center; 
	}

		.TileMenu .button h1, .TileMenu .button img, .TileMenu .button .exLink {
			transition: all ease-in-out .3s;
		}

		.TileMenu .button h1 {
			line-height: 1;
			font-weight: normal;
			color: #333;
			text-align: center;
			width: 100%;
			margin: 0;
		}
		.TileMenu .button img {
			width: auto;
			filter: brightness(1);
			max-height: 50%;
		}

		.TileMenu .button .exLink {/* 外部リンクアイコン */
			width: 15px;
			height: 15px;
			margin-left: 3px;
			display: inline-block;
			background: url('../images/exLink_icon(black).png') center center / 100% 100% no-repeat;
		}
			/*#g-navi .exLink {
				background: url('../images/exLink_icon(pink).png') center center / 100% 100% no-repeat;
			}*/



/*:::::::::::::::::::::::::::::::contentsの装飾::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.height-dummy {
	/*background: gray;*/
	opacity:0;
}
#contents {
    display: grid;
    grid-template-columns: 100%;
    /*grid-template-rows: repeat(4, auto);*/
	grid-template-rows: auto;
}
	#intersection-observer-dummy, .height-dummy, .stickPan {
		margin: 30px 0;
	    grid-column: 1;grid-row: 1;
	}
/*	.AdContentsTop {
	    grid-column: 1;grid-row: 2;
	}*/
	#contents_body {
	    grid-column: 1;/*grid-row: 2;*/
		padding: 5% 2.5%;
		min-height: 100lvh;
		background: #fdfdfd;
	}
/*	.AdgroupContentsBottom {
	    grid-column: 1;grid-row: 4;
	}*/

.stickPan {	
    width: fit-content;
    height: fit-content;
    line-height: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* -webkit-overflow-scrolling: touch; */
    position: sticky;
    top: 0;left: 0;
    display: flex;
    /*align-items: flex-start; ? */
    flex-wrap: nowrap;
}
.stickPan.sticky-on {
    /*width: 100%;←？？*/
}
.stickPan a {
	color: #fdfdfd;
}

/* DevTools見ながら調整、font-sizeによっても変わるのできちっとした数字が分からない */
@keyframes ChangeScaleH1 {/* 小さくなったhiタイトル */
    100% { font-size: 16px; }
}
@keyframes ChangeScaleCircle {/* 球 */
	100% {
	    width: 32px;
	    height: 32px;
	}
}
@keyframes MoveX {/* タイトルの動く量、[HOME<]からの距離(フォントサイズによって調整) */
    100% { transform: translate( 68px, 0% ); }
}
@keyframes AppearL-R {/* [HOME<]の横幅、autoのままだと縦横変化時に見切れたりするので、調整後はそれなりに取ればいいのかも */
    100% { 	width: 100px; }/* MoveXの調整時だけautoに*/
}
	@keyframes HideCircle {/* 球 */
		100% { opacity: 0; }
	}
	@keyframes AppearCircle {/* 球 */
		100% { opacity: 1; }
	}

.HomePie, h1.PageTitle, .CircleIcon, .CircleIcon img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.HomePie {
    white-space: nowrap;
    display: flex;/* 指定しておけば、HOME>の高さが親要素に合う */
}
	.HomePie a {

	}
		.HomePie a, h1.PageTitle a {/* 各種サブタイトル */
			padding: 0 8px;
		}
		.sticky-on .HomePie a, .sticky-on h1.PageTitle a {/* 各種サブタイトル */
			padding: 0 4px;
		}


.HomePie {/* [HOME>] */
	font-size: 16px;
	color: #fdfdfd;
	position: absolute;top:0; left:0;
	width: 0;
    overflow: hidden;
}
.HomePie {
	padding-left: 4px;
}
	.sticky-on .HomePie {
		animation: AppearL-R 0.6s ease-out 0.3s normal forwards;
	}

h1.PageTitle {
	line-height: 1.3;
	padding: 24px 24px 24px 16px;
	border-radius: 0 80px 80px 0;
	margin: 0;
	position: relative;
	top: 0;left: 0;
	color: #fdfdfd;
	display: flex;
    align-items: center;
    flex-wrap: wrap;
}
	h1.PageTitle a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
	}
		h1.PageTitle small {
			font-size: 70%;
		}

.sticky-on h1.PageTitle, .sticky-on h1.PageTitle a {
	flex-wrap: nowrap;
}
		.sticky-on h1.PageTitle br {
			display: none;
		}
			.PROVERB .sticky-on h1.PageTitle span,/* おムネ版 */
			.PROVERB .sticky-on h1.PageTitle a small/* 美乳堂編修所 編 */
			{
				display: none;
			}

/*

	.PROVERB h1.PageTitle a { flexだとbrが効かないっぽい
		display: block;縦並び(flex-direction:columnだと、span(おムネ版)まで次の行に行ってしまう) 
	}
		.PROVERB h1.PageTitle a small {
			display: block;
			margin-top: 4px;
		}

*/
.sticky-on h1.PageTitle {
	padding: 0 12px 0 0;
	line-height: 2;
	font-weight: normal;
	animation: ChangeScaleH1 0s ease-out 0s normal forwards,
				MoveX 1s ease-out 0.3s normal forwards;
}
	.sticky-on h1.PageTitle small {/* 各種サブタイトル */
		animation: ChangeScaleH1 0.3s ease-out 0s normal forwards;
		display: none;
	}


.CircleIcon, .CircleIcon img {}
.CircleIcon {/* 球 */
    width: 65px;
    height: 65px;
            aspect-ratio: 1;
    border-radius: 50%;
    margin: auto 0 auto 8px;
    position: relative;
}
.CircleIcon img {/* アイコン */
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}
	.sticky-on .CircleIcon {/* 球 */
		animation: ChangeScaleCircle 0s ease-out 0s normal forwards, 
					HideCircle 0.3s ease 0s normal forwards,
					AppearCircle .75s ease 1.5s normal forwards,
					MoveX 0s ease-out 0.3s normal forwards;
		margin-left: 4px;
	}

	/* .sticky-on .CircleIcon img {球の中のアイコン
		animation: ChangeScaleA 0.3s ease-out 0s normal forwards;

	球も一緒に縮小、移動パターン
	.sticky-on .CircleIcon {
		animation: ChangeScaleCircle 0.3s ease-out 0s normal forwards, MoveX 1s ease-out 0.3s normal forwards;
		margin-left: 0.25rem;
	}

	} */


/*:::::::::::::::::::::::::::::::rightnaviの装飾::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#rightnavi {
    display: flex;
    flex-flow: column;
    gap: 10px 0;
}
/* jsで処理
.stickRight {
	position: sticky;
	top: 1.5vw;
	left: 0;
}
*/
.stickRight img {width: 100%;}/*underconstサンプル用*/

/*--------------.SNSLinkの装飾--------------*/

.SNSLink {

}
.SNSLink a {
	width: 90%;
	display: block;
	margin: 7.5px auto;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
	/*-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden*/ /* カクつく*/
}
	.SNSLink img {
		width: 100%;
		height: auto;
	}

/*--------------RightNavi時計の装飾--------------*/
/* share-tech-mono-regular - latin */
/* 全体を囲うコンテナー */
.ClockContainer {
  width: 100%;
  min-height: 100px;
  padding: 15px 0;
  /*background-color: #15151e;*/
  background-color: #e54cca47;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 時計の共通スタイル */
.clock {
  font-family: 'Share Tech Mono';
  color: #daf6ff;
  /*text-shadow: 0 0 20px #0aafe6;*/
  text-shadow: 0 0 20px #e60ab7;
  text-align: center;
}
.clock p {
  line-height: 1;
}

/* 日付のスタイル */
.clock-date {
  font-size: 20px;
  margin-bottom: 5px;
}

/* 時間のスタイル */
.clock-time {
  font-size: 45px;
}

	/*-------------.Info-------------*/

	.Info {
		width: 100%;
	}
		.InfoRight {
			margin-bottom: 10px;
		}

		.InfoOpt {
			margin: 15px auto;
		}
	.InfoOpt table {

	}
	.InfoOpt caption {

	}
	.InfoOpt td {

	}
	.InfoOpt td a {

	}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	#headerMobile {
		z-index: 997;
	}

	.stickPan {	
		z-index: 997;
	}
	.overlay {
		z-index: 997;
	}
	.Rnav {
		z-index: 998;
	}
	.Menu-trigger, .drawer-trigger {
	    z-index: 1000;
	}
	.menu-wrap {
		z-index: 999;
	}
    .MenuIcon {
        z-index: 999;
    }
/*
	.flip {
		z-index: 999;
	}
*/
	.globalNavi2 {
		z-index: 998;
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


	h1.PageTitle {
		font-size: clamp(0.625rem, 7vw, 2rem);/* 32px */
	}

	footer #copyright, footer #copyright2 {
		font-size: 1.125rem;
	}

	.TileMenu .button h1 {
		font-size: clamp(0.625rem, 4.5vw, 1.125rem);/* 18px */
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (orientation: landscape) {

	.footerLinksSP a {
		width: calc((100% - 1em* 3) / 4);
	}

}

@media screen and (orientation: portrait) {

	.footerLinksSP a {
		width: calc((100% - 1em* 1) / 2);
	}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {

	header #headerPC {
	    grid-template-rows: 120px 50px calc(100dvh - 120px - 50px - 300px) 300px;
	}
		#contents {
			padding-bottom: 300px;/* header(leftnavi)とのstickyの足並みそろえ */
		}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */

	.AdFoot { display: block; }

	#headMiddle, #headBottom, #rightnavi {
		display: none;
	}

	.headLogoPC {
		padding: 0;
	}

	.footerLinksPC {
		display: none;
	}
	.footerLinksSP {/* 出現 */
		display: flex;
	}


/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {

    #wrapper {
		grid-template-columns: 21% 77%;/* 98%(gap2%) */
	}

	header #headerPC {
		grid-template-rows: 13dvh 3dvh 60dvh 24dvh;
	}
		#contents {
			padding-bottom: 24dvh;/* header(leftnavi)とのstickyの足並みそろえ */
		}

/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {

    #wrapper {
        grid-template-columns: 15% 83%;/* 98%(gap2%) */
	}

	header #headerPC {
		grid-template-rows: 10dvh 0 44dvh 44dvh;/* 残りvh分、#contentsにpadding-bottom */
	}
		#contents {
			padding-bottom: 2dvh;/* header(leftnavi)とのstickyの足並みそろえ */
		}

	#leftnaviA {
	    grid-column: 1 / 3;
	    grid-row: 3 / 4;
	}
	#leftnaviB {
	    grid-column: 1 / 3;
	    grid-row: 4 / 5;
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */

	header #headerPC { display: none; }
	#headerMobile { display: grid; }/* 出現 */

	#contents {
		padding-bottom: 0;/* header(leftnavi)とのstickyの足並みそろえのやつ０に */
	}
	#rightnavi {
		display: none;
	}

		.footerLinksPC {
			display: none;
		}
		.footerLinksSP {/* 出現 */
			display: flex;
		}

	/* ------ヘッダー固定表示にしたいときfixedに------ */

		header {
			position: static;/*position: fixed;*/
		}
		.Menu, .Menu-trigger/*,.drawer-trigger*/
		{
			position: absolute;/*position: fixed;*/
		}
		/*.stickPan {
			top: 9lvh;
		}*/

	/*-------------------------------------------------*/

	#wrapper {
	    padding: 0;
	    grid-template-columns: 100%;
	    grid-template-rows: 70px auto;
	}
	#contents {
		padding: 0 2.5%;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}

	.head-out {
		transform: translateY(-100%)!important;/*headermobile.js(136)との兼ね合い*/
		transition: .3s!important;
	}
	.head-in {
		transform: translateY(0%)!important;/*headermobile.js(136)との兼ね合い*/
		transition: .3s!important;
	}
	header {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		width: 100%;
		height: 100%;
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

		.headLogoMobile {/* ロゴと球との間隔 */
			gap: 0 6px;
			padding: 0 6px;
		}
			.object-wrap {/* 球の間隔 */
				gap: 0 6px;
			}
				.headBG .object {/* 球の大きさ */
					width: 12px;
				}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.headLogoMobile {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
	}

	.headLogoMobile a {
		width: auto;
		height: 100%;
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
	}
	.headLogoMobile a img {
	    width: auto;
	    height: 90%;
	}

	.object-wrap {
		display: flex;
		align-items: center;
	}

	.headBG .object {
		height: auto;
		max-width: 100%;/* 入れないとOptionはみ出す、なぜ?? */
		/*
			この「14px」という指定は「元画像サイズに依存する相対的なサイズ」です。
			width が 14px でも、max-width がないと「画像が表示可能な最大幅」に広がってしまうことがあります（特にflexやgrid内での挙動が複雑な場合）。
			ブラウザによっては「中の画像はコンテンツとしてフローの外に出てもいい」と解釈され、親の幅を無視してはみ出すことがあるんです。
		*/
		animation: linear 0s infinite normal paused;
		-webkit-animation: linear 0s infinite normal paused;
	}
	.headBG .object.is-scrolling, .headBG.hovering .object/*, .headBG.tapping .object*/ {/*https://fuuno.net/cani/cani11/cani11.html*/
		animation-play-state: running;
	}
/* ↓その時球のいる位置からアニメーションしたいが分からない */
	.headBG .object.is-stopped {
		animation-name: head-ani-default;
		animation-play-state: running;
		animation-iteration-count: 1;
		animation-duration: 1s;
	}
/* ↑#PageTopが何回もクリックされてうまくいかない気がする(不明) */
/* ↑#Triggerは何となくいけてる気もする */
	.headBG .objectA {grid-column:1;
		animation-name: head-ani;
		/*animation-duration: 3.3s;*/
		animation-duration: 4s;
	}
	.headBG .objectB {grid-column:2;
		animation-name: head-ani-rev;
		/*animation-duration: 2.8s;*/
		animation-duration: 4s;
	}
	.headBG .objectC {grid-column:3;
		animation-name: head-ani;
		/*animation-duration: 3s;*/
		animation-duration: 4s;
	}
	.headBG .objectD {grid-column:1;
		animation-name: head-ani-rev;
		/*animation-duration: 3.2s;*/
		animation-duration: 4s;
	}
	.headBG .objectE {grid-column:2;
		animation-name: head-ani;
		/*animation-duration: 3.1s;*/
		animation-duration: 4s;
	}
	.headBG .objectF {grid-column:3;
		animation-name: head-ani-rev;
		/*animation-duration: 2.9s;*/
		animation-duration: 4s;
	}
	@keyframes head-ani {
		0%,100% { transform: translate(0, 0) scale(1, 1); }
		25% { transform: translate(0, 5px) scale(1, 1); }/* calc(4vh - 7.5px) */
			/*26% { transform: translate(0, 1.25vh) scale(1, 1); }*//* calc(4vh - 7.5px) *//* scale(1.5, 0.25) */
		50% { transform: translate(0, 0) scale(1, 1); }
		75% { transform: translate(0, -5px) scale(1, 1); }/* calc(-4vh + 7.5px) */
			/*76% { transform: translate(0, -1.25vh) scale(1, 1); }*//* calc(-4vh + 7.5px) *//* scale(1.5, 0.25) */
	}
	@keyframes head-ani-default {
	0% {
			 transform: scale(1, 1);/* 止まっているところでどこにいるかをJSで取得して入れないといけないのかも、あきらめた */
 		}
		50% {
			  transform: translate(0, 0) scale(0, 0);
 		}
	0%,100% {
			 transform: translate(0, 0) scale(1, 1); 
 		}
	}
	@keyframes head-ani-rev {
		0%,100% { transform: translate(0, 0) scale(1, 1); }
		25% { transform: translate(0, -5px) scale(1, 1); }/* calc(-4vh + 7.5px) */
			/*26% { transform: translate(0, -1.25vh) scale(1, 1); }*//* calc(-4vh + 7.5px) *//* scale(1.5, 0.25) */
		50% { transform: translate(0, 0) scaleY(1) scaleX(1); }
		75% { transform: translate(0, 5px) scale(1, 1); }/* calc(4vh - 7.5px) */
			/*76% { transform: translate(0, 1.25vh) scale(1, 1); }*//* calc(4vh - 7.5px) *//* scale(1.5, 0.25) */
	}
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*表示がおかしくなる対策*/
	.headBG .object {
	  animation-play-state: running; /* ←これをデフォで入れておく *//*もしくは .is-scrolling をJavaScriptで初期表示時に必ず一度付与する。*/
	}
    .headBG-R .object-wrap {/* ロゴ裏に隠れるようになった */
		 justify-content: flex-end;
	}
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


	#intersection-observer-dummy, .height-dummy, .stickPan {
		grid-column: 1;
		grid-row: 1;
	}

/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {


} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */


/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {


} @media screen and (width <= 480px) and (orientation: portrait) {


		.CircleIcon {/* 球 */
		    width: 15vw;
		    height: 15vw;
		}


} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */


} @media screen and (width < 375px) and (orientation: portrait) {


} @media screen and (width <= 320px) and (orientation: portrait) {


}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

@media (hover: hover) {

	/*!!!!!!!!!!!!!!!スクロールバー!!!!! https://kanoto.info/201908/345/ */

	/* スクロールの幅の設定 */
	::-webkit-scrollbar {
		width: 12px;
	}
	/* スクロールのつまみ部分の設定 */
	::-webkit-scrollbar-thumb {
		border-radius: 24px;
	}
	/* スクロールの背景の設定 */
	::-webkit-scrollbar-track {
		background: #333;
	}

	/* スクロールのつまみの色は独自CSSで指定しています */

	a:hover { color: #E54CCA; }
	a:visited:hover { color: #E54CCA; }

	.footerLinks a:hover {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}

	.TileMenu .proverb .button:hover a { background-color: #cf5353; }
	.TileMenu .tanka .button:hover a { background-color: #b0cf53; }
	.TileMenu .munekotoba .button:hover a { background-color: hotpink; }
	.TileMenu .maxim .button:hover a { background-color: slategray; }
	.TileMenu .trouble .button:hover a { background-color: purple; }/* #9a479a */
	.TileMenu .diary .button:hover a { background-color: darkorange; }
	.TileMenu .fortune .button:hover a { background-color: #4c74e5; }
	.TileMenu .illustration .button:hover a { background-color: dimgray; }
	.TileMenu .ebooks .button:hover a { background: plum; }
	.TileMenu .playground .button:hover a { background: cadetblue; }

	/*.TileMenu .youtube .button:hover a { background: #E54C4C; }
	.TileMenu .result .button:hover a { background: #c78dcc }*/

	.TileMenu .button:hover a {
		border: 1px solid #fdfdfd;
		transition: all .3s ease-in-out .3s;
	}
		.TileMenu .button:hover:after {
		    right: 0;
		    bottom: 0;
		    transition: all ease-in-out .3s;
		}
		.TileMenu .button:hover:before {
		    left: 0;
		    top: 0;
		    transition: all ease-in-out .3s;
		}

	.TileMenu .button:hover h1, .TileMenu .button:hover img, .TileMenu .button:hover .exLink {
		transition: all ease-in-out .3s;
	}
	.TileMenu .button:hover h1, .TileMenu .button a.current h1 {
		color: #fdfdfd;
	}
	.TileMenu .button:hover img, .TileMenu .button a.current img {
		filter: brightness(5);
	}
	.TileMenu .button:hover .exLink {/* 外部リンクアイコン */
		background: url('../images/exLink_icon(white).png') center center / 100% 100% no-repeat;
	}

	.stickPan a:hover { color:#333; }
	.stickPan a:visited:hover { color:#333; }

	.SNSLink a:hover {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}


/*
	.IndexRight td a:hover
	{
		color: #fdfdfd;
	}
	.IndexRight.maxim td a:hover {color: #fdfdfd;background-color: #8d0002;opacity: 0.75;}
	.IndexRight.tanka table td a:hover {background-color:#b0cf53;}
	.IndexRight.tanka.spring tr a:hover {background-color: #d474b6;}
	.IndexRight.tanka.summer tr a:hover {background-color: #709de0;}
	.IndexRight.tanka.autumn tr a:hover {background-color: #bf861f;}
	.IndexRight.tanka.winter tr a:hover {background-color: #999;}
	.IndexRight.tanka.etc tr a:hover {background-color: #b0cf53;}

	.IndexOpt td a:hover {
		opacity: 0.5;
	}
	.IndexOpt.maxim td a:hover {color: #fdfdfd;background-color: #8d0002;opacity: 0.75;}
	.IndexOpt.tanka table td a:hover {background-color:#b0cf53;}
	.IndexOpt.tanka.spring tr a:hover {background-color: #d474b6;}
	.IndexOpt.tanka.summer tr a:hover {background-color: #709de0;}
	.IndexOpt.tanka.autumn tr a:hover {background-color: #bf861f;}
	.IndexOpt.tanka.winter tr a:hover {background-color: #999;}
	.IndexOpt.tanka.etc tr a:hover {background-color: #b0cf53;}
*/
}

/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	a:active { color: #E54CCA; }
	a:visited:active { color: #E54CCA; }

	.footerLinks a:active {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}

	.TileMenu .proverb .button a { background-color: #cf5353; }
	.TileMenu .tanka .button a { background-color: #b0cf53; }
	.TileMenu .munekotoba .button a { background-color: hotpink; }
	.TileMenu .maxim .button a { background-color: slategray; }
	.TileMenu .trouble .button a { background-color: #9a479a; }
	.TileMenu .diary .button a { background-color: darkorange; }
	.TileMenu .fortune .button a { background-color: #4c74e5; }
	.TileMenu .illustration .button a { background-color: dimgray; }
	.TileMenu .ebooks .button a { background: plum; }
	.TileMenu .playground .button a { background: cadetblue; }
	
	/*.TileMenu .youtube .button a { background: #E54C4C; }
	.TileMenu .result .button a { background: #c78dcc }*/

	   /* .TileMenu ul .button:has(.current)::before {
	        left: 0;
	        top: 0;
	    }*/

	.TileMenu .button {
	    padding: 1px;
	}
		.TileMenu ul .button a {
			border: none;
		}

	.TileMenu .button h1 {
		color: #fdfdfd;
	}
		.TileMenu .button a.current h1,
		.TileMenu .button a:active h1,
		.TileMenu .button a:visited:active h1 {
			color: #333;
		}
			.TileMenu ul .button a:active, .TileMenu ul .button a:visited:active {
				background: #fdfdfd;
				transition: initial;
			}

	.TileMenu ul .button:active a {
		border:1px solid #fdfdfd;
		transition: all 0s ease-in-out 0s;
	}
	.TileMenu ul .button:active:after {
	    right: 0;
	    bottom: 0;
	    transition: all ease-in-out 0s;
	}
	.TileMenu ul .button:active:before {
	    left: 0;
	    top: 0;
	    transition: all ease-in-out 0s;
	}
	.TileMenu ul .button:active h1, .TileMenu ul .button:active img, .TileMenu ul .button:active .exLink {
		transition: all ease-in-out 0s;
	}
	.TileMenu .button img {
		filter: brightness(5);
	}
	.TileMenu .button:active img, .TileMenu .button a.current img {
		filter: brightness(1);
	}
	.TileMenu .button:active .exLink {/* 外部リンクアイコン */
		background: url('../images/exLink_icon(white).png') center center / 100% 100% no-repeat;
	}

	.stickPan a:active { color:#333; }
	.stickPan a:visited:active { color:#333; }


	.SNSLink a:active {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}

/*
	.IndexRight td a:active
	{
		color: #fdfdfd;
	}
	.IndexRight.maxim td a:active {color: #fdfdfd;background-color: #8d0002;opacity: 0.75;}
	.IndexRight.tanka table td a:active {background-color:#b0cf53;}
	.IndexRight.tanka.spring tr a:active {background-color: #d474b6;}
	.IndexRight.tanka.summer tr a:active {background-color: #709de0;}
	.IndexRight.tanka.autumn tr a:active {background-color: #bf861f;}
	.IndexRight.tanka.winter tr a:active {background-color: #999;}
	.IndexRight.tanka.etc tr a:active {background-color: #b0cf53;}
	.IndexOpt td a:active {
		opacity: 0.5;
	}
	.IndexOpt.maxim td a:active {color: #fdfdfd;background-color: #8d0002;opacity: 0.75;}
	.IndexOpt.tanka table td a:active {background-color:#b0cf53;}
	.IndexOpt.tanka.spring tr a:active {background-color: #d474b6;}
	.IndexOpt.tanka.summer tr a:active {background-color: #709de0;}
	.IndexOpt.tanka.autumn tr a:active {background-color: #bf861f;}
	.IndexOpt.tanka.winter tr a:active {background-color: #999;}
	.IndexOpt.tanka.etc tr a:active {background-color: #b0cf53;}


*/

}