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

/*! 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; }
*/

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

.MonthlyBackground .ImgAria {
	background: url("images/img_MonthlyBG_2026_01.jpg") center center / cover no-repeat;
}

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

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

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

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

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

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

img {
	vertical-align: bottom;
}


img, h1, h2, 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 */
}



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

/*body, html {overflow-x: hidden;}*//*なぜかbox3へスクロールできない*/
body {
	ontouchstart="";
	font-family:"Helvetica Neue",
				Arial,
				"Hiragino Kaku Gothic ProN",
				"Hiragino Sans",
				Meiryo,
				sans-serif;
	color: #333333;
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
    overflow-x: hidden;
    height: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* タップ時のハイライトを非表示 */
	tap-highlight-color: rgba(0, 0, 0, 0);
}
    /*background: linear-gradient(-45deg, orange, #E73C7E, #E54CCA, #7E4CE5);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
      0% {background-position: 0% 50%}
     50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

@-moz-keyframes Gradient {
      0% {background-position: 0% 50%}
     50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

@keyframes Gradient {
      0% { background-position: 0% 50%}
     50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}*/
/*!!!!!!!!!!!!!!!スクロールバー!!!!! https://kanoto.info/201908/345/ */





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

#loading {
	width: 100vw;
	height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 19999;
	background: #E54CCA;
	/*background: url("images/loading_c3.jpg") left top /cover no-repeat; ←これだとちらつく */
}
	#loading p {
		display: inline-block;
		margin: 5%;
	    line-height: 1;
		color: #fdfdfd;
		font-family: "Tektur", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-variation-settings:
		"wdth" 100;
		z-index: 1;/* 絵より上 */
		position: relative;
	}
	#loading picture {
		background: #E54CCA;
	}
		#loading img {
		    display: block;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    -webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓（各種条件分岐）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://roroa.roocy.net/322 */

@media screen and (orientation: landscape) {
	#loading .loadingImage_Landscape img {
		width: auto;
		height: 100svh;
	}
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (orientation: portrait) {
	#loading .loadingImage_Portrait img {
		width: 100vw;
		height: auto;
	}
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


.fadeout {
}
header,
.nav01,
.arrow01,
#Hidden,
.scrolldown,
p#TextMenu {
	position: relative;
	top: 0;
	transition: all ease-in-out .35s;
	z-index: 1;
}
.fadeout header,
.fadeout .nav01,
.fadeout .arrow01,
.fadeout #Hidden > img,
.fadeout .scrolldown,
.fadeout p#TextMenu {
	transition: all ease-in-out .35s;
	opacity: 0;
	pointer-events: none;/* なくてもいけそうだけど一応 */
	z-index: -1;
}

#location {
    top: 0;
    position: relative;
}
.fadeout #location {
	z-index: 1;
	opacity:1;
	transition-delay: 0.75s;/* ホバー後に遅れて表示 */
}

.fadeout .MonthlyBackground .ImgAria {
	transform: scale(1.5);
	transition: transform linear 240s;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.move {
}
header,
.nav01,
.arrow01,
#Hidden,
.scrolldown,
p#TextMenu {
}
.move header,
.move .nav01,
.move .arrow01,
.move #Hidden,
.move #location,
.move .scrolldown,
.move p#TextMenu {
	opacity: 0;
	top: -5vh;
	transition: all ease-in-out .35s;
	pointer-events: none;/* なくてもいけそうだけど一応 */
	z-index: -1;
}



.move .MonthlyBackground {

}
			.move .MonthlyBackground .ImgAria {
				-webkit-filter: brightness(0.2) invert(0);
				filter: brightness(0.2) invert(0); /* 明るさ・反転 */
			}

			.move .MonthlyBackground p {
				opacity: 1;
			}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#wrapper {
	opacity: 0;
}
#wrapper {
	position: relative;
	/*z-index: 100;*/
}
.loaded #wrapper {
	opacity: 1;
}
.none {
	display: none;
}
.no-js #loading {
	display: none;
}
.js .none {
	display: none;
}
.js #wrapper {
	opacity: 0;
}
@keyframes fade_out {
	0% { opacity: 1 }
	100% { opacity: 0 }
}
.loading_off #loading {/* html[ロード画面の処理]と秒数合わせる */
	animation: fade_out 2s ease-in-out forwards;
}

@keyframes loaded {
	0% { opacity: 0; /*transform: translate( 0, 50px )*/ }/* ←なぜかtransform書くとleftnaviのfixedが効かなくなる */
	100% { opacity: 1; /*transform: translate( 0, 0 )*/ }
}
.loaded #wrapper {
	animation:loaded .75s ease-in-out forwards;
}

/*@font-face {
	font-family: 'akabara-cinderella';
	src: url('common/font/akabara-cinderella.ttf') format('truetype');
}*/

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

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

h1,h2,h3,h4,h5,h6,p { line-height: 1.65; }

.box {
	color: #fdfdfd;
	width: 100%;
	height: auto;
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr 150px 1fr;
}
.shadow {
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
	             -1px 1px 0 #000, 1px -1px 0 #000,
	              0px 1px 0 #000,  0 -1px 0 #000,
	              -1px 0 0 #000, 1px 0 0 #000;
}


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

	.box h1 {
		    padding-left: 0.5em;
		    margin: 0;
	}
	.box h2 {
	   padding-left: 0.5em;
	    border-left: solid 10px;
	}
	.contents {
	    padding: 5%;
	}
	.box article p, .box article p.preface, .box article aside, .box2 article section ul, #contents_box5 article .box5-ul li, #contents_box5 article .box5-ul {
	    padding: 0 0.5em;
	}
	.box article p, .box article aside, .box2 article section ul, #contents_box5 article .box5-ul {
		margin: 1em 0;
	}
		.box2 article section ul li p { margin-top: 9px; }
		.box article aside, .box article aside p { margin-top: 0; }
		.box2 article section ul { margin-bottom: 0; }
	.box article p.preface, .box article section, #contents_box3 .contact div, #contents_box3 .account div {
		margin: 1em 0;
	}
	.box article a.next {
		margin:  0 0.5em;
	}
	footer {
		gap: 1em 0;
	}
	footer .footer_links {
		gap: 0 1em;
	}
	.SNSLink {
		gap: 1.5em;
	}
	.box2 article section ul li img {
		width: 1em;
		height: 1em;
		margin-right: 0.5em;
	}

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

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!section1!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	#section1 {
		height: 100svh;
		position: relative;
	}
		/*
			height: 100lvh;
			高さが常に「最大のビューポート高さ（アドレスバーが完全に消えた状態）」に固定される
			スクロールによってアドレスバーが表示・非表示になっても、背景画像の表示サイズは変化しない
			つまりスクロールによるレイアウトのガタつきや「ビヨンッ」と伸びる動きは起きない

			height: 100vh;
			初期状態では「見えている高さ」を100%として表示
			スクロールしてアドレスバーが消えると 高さが拡張されて見た目がビヨンと伸びる

			height: 100svh;
			常に「アドレスバーが最大に表示されているときの高さ」に固定される
			アドレスバーが消えてもその分は 余白になる（隙間ができる）
		*/

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------------.box1-------------------------*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.MonthlyBackground {
		/*grid-column: 1 / 4;
		grid-row: 1 / 4; これやると#section1に上下paddingつけたときに空白が出る */
	    width: 100%;
	    height: 100%;/* 親の#section1いっぱいに表示 */
		position: absolute;
		left: 0;top: 0;
	}
		.MonthlyBackground .ImgAria, .MonthlyBackground p {
			transition: all ease-in-out .35s;
		}
			.MonthlyBackground .ImgAria {
			    width: 100%;
			    height: 100%;
			}

			.MonthlyBackground p {
				opacity: 0;
				color: #fdfdfd;
				position: absolute;
				bottom: 0%;
				left: 50%;
				-webkit-transform : translateX(-50%);
				transform : translateX(-50%);
				/* 隠れてるときIのカーソルが出るので↓追記 */
				-webkit-user-select: none; /* Safari */
				-moz-user-select: none;    /* Firefox */
				-ms-user-select: none;     /* IE10+ */
				user-select: none;         /* Standard */
				cursor: default;
			}

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

	header {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
		/*display: flex;
		align-items: center;
		justify-content: center;*/
	}

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

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

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

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

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

		.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 running;
			-webkit-animation: linear 0s infinite normal running;
		}
		.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;
	}
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


	.nav01 {
		grid-column: 1 / 4;
		grid-row: 2;
	}

	/*p#TextMenu {
	    grid-column: 2 / 3;
	    grid-row: 2 / 3;
	    text-align: center;
	    line-height: 2;
	}
	*/
	#select_menu {
	    width: 100%;
	    display: grid;
	    justify-content: center;
	}
		#select_menu li {
			list-style: none;
		}

	/*拡大時もぐり対策*/
	.button-wrapper { z-index: 1; }

	.button-wrapper {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	    display: block;
	    border: 1px solid #E54CCA;
	    transition: all .15s ease-in-out .15s;
	}
		.button {
			width: 100%;
		    height: 100%;
			margin: 0 auto;
			padding: 7.5px;
			background: #fdfdfd;
			border: none;
			cursor: pointer;
			display: block;
			position: relative;
			overflow: hidden;
			transition: all .35s ease-in-out .35s;
			text-align: center;
		}
		.button a {
			width: 100%;
			height: 100%;
			padding: 5px;
			font-weight: bold;
			border: 1px solid #E54CCA;
			background: #fdfdfd;
			color:  #E54CCA;
			z-index: 100;
			position: relative;
			transition: all .35s ease-in-out .35s;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
		}
		.button a h1 {
			line-height: 1;
			margin: 0;
			padding: 0 8px;
		}
			.button img {
				width: auto;
				display: block;
			}

		.button .new:after {
			content: "NEW!";
			background: crimson;
			color: #fdfdfd;
			border-radius: 3px;
			position: absolute;
			bottom: 4%;
			right: 3%;
	    }
		.button .caution:after {
			content: "";
			background: url('common/images/caution_icon.png') center center / 100% 100% no-repeat;
			position: absolute;
			bottom: 4%;
			right: 3%;
		}

	.button:after {
	    bottom: -100%;
	    right: -100%;
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    /*background: #E54CCA;*/
	    transition: all .35s ease-in-out .5s;
	}
	.button:before {
	    top: -100%;
	    left: -100%;
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    /*background: #E54CCA;*/
	    transition: all .35s ease-in-out .5s;
	}

	.button .exLink {/* 外部リンクアイコン */
		display: inline-block;
		background: url('common/images/exLink_icon(pink).png') center center / 100% 100% no-repeat;
		transition: all .35s ease-in-out .35s;
	}

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

	#BG-operation {
		grid-column: 1 / 4;
		grid-row: 3;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
		#location {
			color: #fff;
			opacity: 0;
			word-break: keep-all;
			transition:all ease-in-out .35s;
			transition-delay: 0s;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
		#location.active {
		}
		#Hidden {
		    cursor:pointer;
		    background: url("images/icon_OpenEyes2.png") center center /cover no-repeat;
		}
		#Hidden img {
			width:100%;
			height:100%;
		}
		/*#Hidden:hover + .wrapper_box1 {opacity:0;}←JavaScriptで設定 (index.html:192)
		.wrapper_box1 {transition: all ease-in-out .35s;}*/

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

	#MORE {
		width:100%;
		padding: 2em 1em;
		background: #fdfdfd;
		box-shadow: inset -5px -5px 10px 0px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
	/*	position: sticky;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 0;*/
	}


		#MORE ul {
			width: 100%;
		    min-height: 3em;
			display: flex;
			flex-wrap:wrap;
			justify-content: center;
		    align-items: center;
		    align-content: center;
			gap: 0.75em 1em;
		}
		#MORE ul li {
			list-style: none;
			line-height: 1;
		}
		#MORE ul li a {
			width:100%;
			position: relative;
			display: inline-block;
			text-decoration: none;
			color: #333333;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

		#MORE ul li a:after {
			position: absolute;
			bottom: -4px;
			left: 0;
			content: '';
			width: 100%;
			height: 2px;
			background: #333;
			transform: scale(0, 1);
			transform-origin: left top;
			transition: transform .3s;
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
		/* https://coco-factory.jp/ugokuweb/move01/9-1-2/ */

		@keyframes cirlemovehide {/*上から下にかけて丸が透過→不透明→透過する*/
		      0% { opacity: 0 }
		     50% { opacity: 1; }
		     80% { opacity: 0.9; }
			100% { opacity: 0; }
		}
		.scrolldown {
			grid-column: 2 / 3;
			grid-row: 3;
			display: flex;
			justify-content: center;
		}
		.scrolldown a {
			color: #fff;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.scrolldown a:visited {
			color: #fff;
		}

		.scrolldown div {
			flex: 1;
			/* 
				例：
				.parent {
				  display: flex;
				  flex-direction: column;
				  height: 100px;
				}
					.child1 {
					  height: 30px;
					}
					.child2 {
					  height: 100%; ← これ、一見残り70pxに見える
					}
					↑このとき、.child2 が ちょうど残りの 70px になっているように見えるのは、
						.parent に高さが固定されていて、
						.child1 の高さが先に確定しており、
						.child2 に height: 100% を指定しているから。
					でもこれはたまたま条件が揃っているだけで、.child2 の中身が多ければ overflow が起きるし、他の要素との連携（例えば 2つの子で半分ずつ）には対応できません。
				結論：
				フレックスレイアウトで「残りを占める」挙動を確実にさせたいなら flex: 1 を使うべきです。
				height: 100% は、親要素に明示的な高さがあるときのみ有効で、柔軟性は低いです。
				より正確なレイアウトを作るためには、flex を選ぶのが安全です。
			*/
			display: flex;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			justify-content: center;
	    }

		.scrolldown .scroll{/* Scrollテキスト */
			color: #eee;
			/*縦書き設定*/
			-ms-writing-mode: tb-rl;
		    -webkit-writing-mode: vertical-rl;
		    writing-mode: vertical-rl;
		}
			.scrolldown .scroll.dummy {
				opacity: 0;
			}
		.scrolldown .VlineCircle {/* 縦線 */
			position: relative;
			height: 100%;
			background:#eee;
		}
			.scrolldown .VlineCircle:before {/* 丸 */
				content: "";
				background: #eee;
				position: absolute;
				bottom: 0%;
				left: 50%;
				border-radius: 50%;
				-webkit-transform : translate(-50%,0%);
				transform : translate(-50%,0%);
			    /*丸の動き1.6秒かけて透過し、永遠にループ*/
				animation:
					circlemove 1.6s ease-in-out infinite,
					cirlemovehide 1.6s ease-in-out infinite;
			}

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


	/* なんか出来てるっぽいけどこれしなくても
		.no-webp .box1 {
			background: url("images/img_background_box1_Dec.jpg") center center / cover no-repeat;
		}
		.webp .box1 {
			background: url("images/img_background_box1_Dec.jpg.webp") center center / cover no-repeat;
		}
	*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!section2!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	/*#section2 {display:none;}*/

	.box2, .box3, .box4, .box5 {
		text-align: left;
		position: relative;
		/*z-index: 0;*/
	}

	.contents {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
	}

	.arrow {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}

	.box article {
		text-align:justify;
	}
		.box article p {
			word-break: break-all;
		}

	.box article a {
		color:#fff;
		margin: 0;
		-webkit-transition: all 0.3s ease;
		   -moz-transition: all 0.3s ease;
		     -o-transition: all 0.3s ease;
		        transition: all 0.3s ease;
	}
	.box article a:visited {color:#fff;}
	.box article a.next {
		text-decoration: underline;
	}

	.box article aside p {
		padding-left: 1em;
		text-indent: -1em;
		color: black;
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------------.box2-------------------------*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.box2 {
		background-color: #c940ab;
		background-image: linear-gradient(-45deg, #c940ab, #8ecbe6);
	}
	.box2 h1 {
	    background-image: linear-gradient(-45deg, transparent 0%, #c940ab 100%);
	}
	.box2 article h2 {
	    border-color: #c766b3;
	}

	.box2 article section ul li {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
		.box2 article section ul li p {
			width: 100%;
			padding: 0;
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
		/*------------------左上ナビ------------------*/
		#g-nav {display: none;}
		/* じゃまかも、一旦なしで *//* HOME.js の上スクロール下スクロール時の処理にもあり*/
		/*
		#g-nav {
			font-size:2rem;
			line-height:1.5;
			border-spacing: 0.5vw 1.5vw;
			z-index:5; box追加するごとに一つずつあげないと隠れる（何故かはわからない）
			margin-left: 3rem;
			position:fixed;
			top:0%;
			left:0%;
		}

		#g-nav li {
			display: inline-block;
			margin: 1.4rem 0.2rem;
			list-style: none;
		}
		#g-nav li a {
			display: inline-block;
			margin: 0;
			padding: 0.35rem 0.8rem 0.25rem;
			background: #fff;
			color: #333333;
			border: 1px solid #333333;
			border-radius: 2rem;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
			opacity:0.5;
		}
		#g-nav li a.current,
		#g-nav li a.current:hover,
		#g-nav li a.current:visited:hover {
			color: #fff;
			background: rgba(0,0,0,1);
			opacity:1;
		}
		#g-nav li a:hover, #g-nav li a:visited:hover {
			color:#fff;
			background: rgba(0,0,0,1);
			opacity:1;
		}
		*/

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------------.box3-------------------------*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.box3 {
		background-color: #c74242;
		background-image: linear-gradient(-45deg, #c74242 0%, #e49298 100%);
	}
	#contents_box3 h1 {
	    background-image: linear-gradient(-45deg, transparent 0%, #c74242 100%);
	}
	#contents_box3 article h2 {
	    border-color: #c75454;
	}

	#contents_box3 .contact span {
		border: 8px double #fff;
		display: inline-block;
	}
	#contents_box3 .btn-text-3d {
		line-height: 1;
		font-weight: bold;
		color: #fdfdfd;
		text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
		display: block;
		padding: 1.5625rem 1.125rem;
		position: relative;
		text-decoration: none;
		-webkit-transition: initial;
		-moz-transition: initial;
		-o-transition: initial;
		transition: initial;
	}
	#contents_box3 .btn-text-3d:active {/* hover機種であろうがなかろうが共通 */
		top: 3px;
		text-shadow: none;
	}

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

	.SNSLink {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
	}
		.SNSLink a {
			-webkit-transition: all 0.3s ease;
		    -moz-transition: all 0.3s ease;
		    -o-transition: all 0.3s ease;
		    transition: all 0.3s ease;
		    -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;
		}
	#contents_box3 .account img {
		width: 100%;
		height: auto;
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------------.box4-------------------------*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.box4 {
		background-color: #366e69;
		background-image: linear-gradient(-45deg, #366e69 0%, #cdd445 100%);
	}
		#contents_box4 h1 {
		    background-image: linear-gradient(-45deg, transparent 0%, #366e69 100%);
		}
		#contents_box4 article h2 {
		    border-color: #6d9a66;
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------------.box5-------------------------*/
	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.box5 {
		grid-template-rows: auto 12dvh auto;
		background-color: #1351a4;
		background:linear-gradient(-45deg, #1351a4 0%, #8589c3 100%);
	}
		#contents_box5 h1 {
		    background-image: linear-gradient(-45deg, transparent 0%, #1351a4 100%);
		}
		#contents_box5 article h2 {
		    border-color: #3364a6;
		}
		#contents_box5 article .box5-ul {
			margin: 0.4375rem 0;
		}
		#contents_box5 article .box5-ul li {
			list-style: none;
			text-indent: -1.125em;
		}

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

	footer {background: #333;
		grid-column: 1 / 4;
		grid-row: 3 / 4;
		padding: 1em 2em;
		border-top: 1px solid #fdfdfd;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
		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;
						}


	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	/*------------------.scroll-arrow------------------*/

	.arrow {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.arrow a {
	    color: #fff;
	    width: 100%;
	    height: 100%;
	    display: block;
	    position: relative;
	}


	.arrow a span {
		z-index: 1;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-animation-name: sdb;
		-webkit-animation-duration:2s;
		-webkit-animation-direction:normal;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function:ease-in-out;
		animation-name: sdb;
		animation-duration:2s;
		animation-direction:normal;
		animation-iteration-count:infinite;
		animation-timing-function:ease-in-out;
		box-sizing: border-box;
	}

	span.arrow1, span.arrow2 { position: absolute; transition: all 0.3s ease;}
	.arrow.down a {
		padding-bottom:0;
	}
	.arrow.down a span.arrow1, .arrow.down a span.arrow2,
	.arrow.up a span.arrow1, .arrow.up a span.arrow2 {
		left: 50%;
	}
	.arrow.up {position:relative;/*bottom:12.5%;*/}
	.arrow.up a {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
	}
	.arrow.down a span {
		border-right: none!important;
		border-top: none!important;
	}
	.arrow.up a span {
		border-left: none!important;
		border-bottom: none!important;
	}

	/*------------------.scroll-arrow------------------*/

	.scrolldown div {
		/*padding-bottom: 10px;*/
	}
	.scrolldown .VlineCircle:before {/* 丸 *//* @keyframes circlemoveも調整 */
	    width: 12.5px;
	    height: 12.5px;
	}
	.scrolldown .VlineCircle {/* 縦線 *//* @keyframes circlemoveも調整 */
		width: 2.5px;
	}

	.arrow a span {
	    width: 50px;
	    height: 50px;
	    margin-left: -25px;
	}

	.arrow.down a span, .arrow.up a span {
		border: 3px solid #fdfdfd;
	}
		.arrow.down a span.arrow1 {
		   border-bottom: 6px solid #fdfdfd;
		   top: 25px;
		}
		.arrow.down a span.arrow2 {
			border-left: 6px solid #fdfdfd;
			top: 10px;
		}
		.arrow.up a span.arrow1 {
			border-right: 6px solid #fdfdfd;
			bottom: 35px;
		}
		.arrow.up a span.arrow2 {
			border-top: 6px solid #fdfdfd;
			bottom: 20px;
		}

	@-webkit-keyframes sdb {
		  0% { transform: rotate(-45deg) translate(0, 0); }
		 50% { transform: rotate(-45deg) translate(-6.25px, 6.25px); }
		100% { transform: rotate(-45deg) translate(0, 0); }
	}
	@keyframes sdb {
		  0% { transform: rotate(-45deg) translate(0, 0); }/* 12.5÷2 */
		 50% { transform: rotate(-45deg) translate(-6.25px, 6.25px); }
		100% { transform: rotate(-45deg) translate(0, 0); }
	}


	/*!!!!!!!!!!.arrowの調整↓!!!!!!!!!!*/

	/*.box { 312行、横幅150px
		grid-template-columns: 1fr 150px 1fr;
	}*/

	.box2, .box3, .box4, .box5 {/* 縦幅100px */
		grid-template-rows: auto 100px;
	}
	.contents {
		min-height: calc(100dvh - 100px);
	}
	.arrow a {/* 文字の高さ */
		line-height: 40px;
	}





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

	/* 共通設定：最初は透明 */
	#About h1 span, #Contact h1 span, #Disclaimer h1 span, #PrivacyPolicy h1 span {
		display: inline-block;
		opacity: 0;
		transform: translateX(30px);
	}
		/* 初期位置 */
		.inview h1 .part1 {
			animation: fadeInRight .5s forwards 0.2s;
		}
		.inview h1 .part2 {
			animation: fadeInRight .5s forwards 0.25s;
		}
		.inview h1 .part3 {
			animation: fadeInRight .5s forwards 0.3s;
		}
		.inview h1 .part4 {
			animation: fadeInRight .5s forwards 0.35s;
		}
		.inview h1 .part5 {
			animation: fadeInRight .5s forwards .4s;
		}
		.inview h1 .part6 {
			animation: fadeInRight .5s forwards .45s;
		}
		.inview h1 .part7 {
			animation: fadeInRight .5s forwards .5s;
		}
		.inview h1 .part8 {
			animation: fadeInRight .5s forwards .55s;
		}
		.inview h1 .part9 {
			animation: fadeInRight .5s forwards .6s;
		}
		.inview h1 .part10 {
			animation: fadeInRight .5s forwards .65s;
		}
		.inview h1 .part11 {
			animation: fadeInRight .5s forwards .7s;
		}
		.inview h1 .part12 {
			animation: fadeInRight .5s forwards .75s;
		}
		.inview h1 .part13 {
			animation: fadeInRight .5s forwards .8s;
		}
			/* アニメーション */
			@keyframes fadeInRight {
				to {
					transform: translateX(0);
					opacity: 1;
				}
			}

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

	#loading p {
		font-size: clamp(0.625rem, 14vw, 3.5rem);/* 56px */
	}

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

	.box h1 {/* About Contact Dis...... */
		font-size: 1.875rem; /* 30px */
	}
	.box h2 {
		font-size: 1.5rem;   /* 24px */
	}
	.box article aside p {
	    font-size: 1rem;     /* 16px */
	}
	.box article, footer #copyright, footer #copyright2, #location {
	    font-size: 1.125rem; /* 18px */
	}

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

	.arrow a {
		font-size: 1.125rem; /* 18px */
	}

	
	.scrollgress .textAria:after, .scrollgress .scrollTop, .scrollgress .scrollTop:visited {
	    font-size: 16px;
	}

	.MonthlyBackground p { /* 大MORE */
	    font-size: 80px;
	}
		#MORE ul {/* About Contact Dis...... */
			font-size: 1.5rem;   /* 24px */
		}

	#contents_box3 .btn-text-3d {
		font-size: 1.75rem;  /* 28px */
	}

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

			.scrolldown .scroll {/* Scrollテキスト */
			    letter-spacing: 2px;
			}

		.button img {

    	}
		.button .new:after {
			font-size: clamp(0.625rem, 3vw, 12px);/* 12px */
			padding: 2px 4px;
		}
		.button .exLink {/* 外部リンクアイコン */

		}
		.button .caution:after {
			width: 12.5%;
			aspect-ratio: 1 / 0.9;
		}

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


		#Hidden {
	        height: 60%;
	        aspect-ratio: 1;
	    }

	.SNSLink a {
		width: calc((100% - 1.5em* 4) / 5);
	}


@media screen and (orientation: landscape) {

	#section1 {
		grid-template-rows: 15svh 71svh 10svh;
		gap: 1svh 0;
        padding: 1svh 0;
	}

	#select_menu {
	    height: 65%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.5svh;
        padding: 0 5vw;
	}
		.button a h1 {
			/*font-size: clamp(0.625rem, 2vw, 1.75rem);  */
		}
		.button a h1 {
			font-size: clamp(0.625rem, 2.75svh, 1.75rem);/* SVH可変 */
		}
			.button img {
			    height: 9svh;
			}


	#BG-operation {
		/*padding-right: clamp(0.625rem, 5svh, 25px);*/
		padding-right: calc( 10*0.2svh + 1svh );/* hiddenが60%gap1svhだからたぶん合ってると思うけど… */
	}
		#Hidden {
	        /*width:  clamp(0.625rem, 10svh, 50px);
	        height:  clamp(0.625rem, 10svh, 50px);*/
	    }
	p#TextMenu/* -MENU- */, .scrolldown p/* 小MORE */ {/* SVH可変 */
	    font-size: 2svh;
	}
		.scrolldown .scroll {/* Scrollテキスト *//* SVH可変 */
		    font-size: 1.75svh;
		}


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

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

	#section1 {
        grid-template-rows: 16svh 64svh 16svh;
    }

	#select_menu {
	    height: 100%;
	}

		.button a h1 {
			font-size: clamp(0.625rem, 4svh, 1.75rem);/* SVH可変 */
		}
		    .button img {
		        height: 13svh;
		    }

	#BG-operation {
		padding-right: calc( 16*0.2svh + 1svh );
	}

	p#TextMenu/* -MENU- */, .scrolldown p/* 小MORE */ {/* SVH可変 */
	    font-size: 3svh;
	}
		.scrolldown .scroll {/* Scrollテキスト *//* SVH可変 */
		    font-size: 2.75svh;
		}


} @media screen and (width = 720px) and (orientation: landscape) {/* SurfaceDuo */

    .button a h1 {
        font-size: clamp(0.625rem, 3svh, 1.75rem);
    }

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

	#section1 {
		grid-template-rows: 10svh 76svh 10svh;
		gap: 1svh 0;
        padding: 1svh 0;
	}

	#select_menu {
	    grid-auto-flow: column;/* タイルの順番がHOMEとg-naviで違ってたので追記 */
	    height: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 0.5svh;
        padding: 0 10vw;
	}
		#select_menu li {
		    /*height: calc( (77svh - 0.5*4svh) / 5 );*/
		    /* #select_menuのheightで可変にしたいので、repeat(5, 1fr) */
		}

		.button a h1 {
			font-size: clamp(0.625rem, 2.25svh, 1.75rem);/* SVH可変 */
		}
			.button img {
			    height: 6.5svh;
			}

	#BG-operation {
		padding-right: calc( 10*0.2svh + 1svh );
		/*padding-right: clamp(0.625rem, 5vw, 25px);*/
	}
		#Hidden {
	        /* width:  clamp(0.625rem, 10vw, 50px);
	        height:  clamp(0.625rem, 10vw, 50px); */
	    }
			p#TextMenu/* -MENU- */, .scrolldown p/* 小MORE */ {/* SVH可変 */
			    font-size: 2svh;
			}
				.scrolldown .scroll {/* Scrollテキスト *//* SVH可変 */
				    font-size: 1.75svh;
				}

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


}

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

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

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

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

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

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


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

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

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

	.SNSLink a {
		width: calc((100% - 1.5em* 2) / 3);
	}

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

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


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


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

	.button {
		 padding: 5px;
	 }
	.button a {
		 padding: 0px;
		 gap: 0;
	 }




	
	.scrollgress .textAria:after, .scrollgress .scrollTop, .scrollgress .scrollTop:visited {
	    font-size: 14px;
	}
	/*.scrolldown .scroll {
	    font-size: 12px;
	}*/
	.button .new:after {
	    font-size: 10px;
	}

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

	.SNSLink a {
		width: calc((100% - 1.5em* 2) / 3);
	}

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



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

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

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


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

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

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/





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

@media (hover: hover) {


		/* スクロールの幅の設定 */
		::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}
		/* スクロールの背景の設定 */
		::-webkit-scrollbar-track {
		  border-radius: 3px;
		  box-shadow: 0 0 3px #aaa inset;
		  background: none;
		}

		/* スクロールのつまみ部分の設定 */
		::-webkit-scrollbar-thumb {
		  background: #7f4ce5;
		  border-radius: 3px;
		}


	@keyframes circlemove {/* マウス、下から上に球が移動 */
		0% { bottom: calc( 100% - 6.25px ); }/* 球12.5px */
		100% { bottom: calc( -6.25px ); }
	}

	#section1 {
		width: 100%;/* スクロールバー0.5vw分横幅狭い */
	}

	#Hidden:hover > img { opacity:0; }
	#Hidden img {
		transition: all ease-in-out .35s;
	}

	#select_menu .button img {
	    transition: all .35s ease-in-out .35s;
	}
		#select_menu .button:hover img {
			filter: brightness(5);
		}
	#select_menu .proverb .button:hover a { background-color: #cf5353; }
	#select_menu .tanka .button:hover a { background-color: #b0cf53; }
	#select_menu .munekotoba .button:hover a { background-color: hotpink; }
	#select_menu .maxim .button:hover a { background-color: slategray; }
	#select_menu .trouble .button:hover a { background-color: purple; }/* #9a479a */
	#select_menu .diary .button:hover a { background-color: darkorange; }
	#select_menu .fortune .button:hover a { background-color: #4c74e5; }
	#select_menu .illustration .button:hover a { background-color: dimgray; }
	#select_menu .ebooks .button:hover a { background: plum; }
	#select_menu .playground .button:hover a { background: cadetblue; }

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

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


	/*拡大時もぐり対策*/
	.button-wrapper:hover { z-index: 2; }

	.button-wrapper:hover {
		box-shadow:5px 5px 5px rgba(0,0,0,0.3);
		-moz-transform: scale(1.1,1.1);
		-webkit-transform: scale(1.1,1.1);
		-o-transform: scale(1.1,1.1);
		-ms-transform: scale(1.1,1.1);
	    opacity:1;
	}
	.button:hover a {
		border:1px solid #fff;
		/*background: #E54CCA;*/
		color: #fdfdfd;
		transition: all .35s ease-in-out .35s;/* 遅延の記述注意all .35s ease */
	}

	.button:hover:after {
	    right: 0;
	    bottom: 0;
	    transition: all ease-in-out .35s;
	}

	.button:hover:before {
	    left: 0;
	    top: 0;
	    transition: all ease-in-out .35s;
	}

	.button:hover .exLink {/* 外部リンクアイコン */
		background: url('common/images/exLink_icon(white).png') center center / 100% 100% no-repeat;
	}


		#MORE ul li a:hover::after {
			transform: scale(1, 1);
		}

	.box article a:hover {color:#445361;}
	.box article a:visited:hover {color: #445361;}


	#contents_box3 .account a:hover {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}


	.arrow a:hover { color:#333; }

	.arrow.down a:hover span, .arrow.up a:hover span {
		border-color:#333;
	}



}



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

@media (hover: none) {

	@keyframes circlemove {/* スワイプ、下から上 */
		0% { bottom: calc( -6.25px ); }/* 球12.5px */
		100% { bottom: calc( 100% - 6.25px ); }/
	}

	#section1 {
		width: 100vw;/* スクロールバー関係なし */
	}


	#select_menu .button img {
	    transition: all 0s ease-in-out 0s;
	}
		#select_menu .button:active img {
			filter: brightness(5);
		}
	#select_menu .proverb .button:active a { background-color: #cf5353; }
	#select_menu .tanka .button:active a { background-color: #b0cf53; }
	#select_menu .munekotoba .button:active a { background-color: hotpink; }
	#select_menu .maxim .button:active a { background-color: slategray; }
	#select_menu .trouble .button:active a { background-color: purple; }/* #9a479a */
	#select_menu .diary .button:active a { background-color: darkorange; }
	#select_menu .fortune .button:active a { background-color: #4c74e5; }
	#select_menu .illustration .button:active a { background-color: dimgray; }
	#select_menu .ebooks .button:active a { background: plum; }
	#select_menu .playground .button:active a { background: cadetblue; }

	/*#select_menu .youtube .button:active a { background: #E54C4C; }
	#select_menu .result .button:active a { background: #c78dcc }*/

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

	/*拡大時もぐり対策*/
	.button-wrapper:active { z-index: 2; }

	.button-wrapper, .button, .button a, .button a h1, .button:active a, .button:after, .button:active:after, .button:before, .button:active:before, .button .exLink {
	    transition: all 0s ease-in-out 0s;
	}


	.button-wrapper:active {
		box-shadow:5px 5px 5px rgba(0,0,0,0.3);
		-moz-transform: scale(1.1,1.1);
		-webkit-transform: scale(1.1,1.1);
		-o-transform: scale(1.1,1.1);
		-ms-transform: scale(1.1,1.1);
	    opacity:1;
	}
	.button:active a {
		border:1px solid #fff;
		/*background: #E54CCA;*/
		color: #fdfdfd;
	}

	.button:active:after {
	    right: 0;
	    bottom: 0;
	}

	.button:active:before {
	    left: 0;
	    top: 0;
	}

	.button:active .exLink {/* 外部リンクアイコン */
		background: url('common/images/exLink_icon(white).png') center center / 100% 100% no-repeat;
	}


		#MORE ul li a:active::after {
			transform: scale(1, 1);
		}

	.box article a:active {color:#445361;}
	.box article a:visited:active {color: #445361;}


	#contents_box3 .account a:active {
	    -webkit-filter: none;
	    -moz-filter: none;
	    -ms-filter: none;
	    -o-filter: none;
	    filter: none;
	}

	.arrow a:active { color:#333; }

	.arrow.down a:active span, .arrow.up a:active span {
		border-color:#333;
	}

}




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

	/*#select_menu .youtube .button:before, #select_menu .youtube .button:after
	 { background: #E54C4C; }
	#select_menu .result .button:before, #select_menu .result .button:after
	 { background: #c78dcc }*/