body {
	--background-color: #ffffff;					/* White */
	--background-footer-color: #607d8b;				/* Blue Grey 500 */
	
	--navi-button-hover-color: #333;				/* DarkGrey-like */
	
	--color-info-box-ios: #ff5722;					/* Deep Orange 500 */
	--color-info-box-android: #4caf50;				/* Green 500 */
	--color-info-box-watchos: #00bcd4;				/* Cyan 500 */
	--color-info-box-wearos: #2196F3;				/* Blue 500 */
	--color-info-box-letters: #3f51b5;				/* Indigo 500 */
	--color-info-box-guide: #ffc107;				/* Amber 500 */
	
	--color-info-box-apple-article: #03a9f4;		/* Light Blue 500 */
	--color-info-box-android-article: #009688;		/* Teal 500 */
	
	--color-info-box-about: #03a9f4;				/* Light Blue 500 */
	--color-info-box-background: #009688;			/* Teal 500 */
	--color-info-box-biography: #8bc34a;			/* Light Green 500 */
	
	--color-ios-top-area-text: #e64a19;				/* Deep Orange 700 */
	--color-android-top-area-text: #388e3c;			/* Green 700 */
	
	--color-app-jp-number: #e91e63;					/* Pink 500 */
	--color-app-jp-8queens: #ffc107;				/* Amber 500 */
	--color-app-jp-hiragana: #cddc39;				/* Lime 500 */
	--color-app-jp-katakana: #8bc34a;				/* Light Green 500 */
	--color-app-jp-nutrition: #00bcd4;				/* Cyan 500 */
	--color-app-jp-prefecture: #009688;				/* Teal 500 */
	--color-app-jp-100poems: #4caf50;				/* Green 500 */
	--color-app-jp-fish: #3f51b5	;				/* Indigo 500 */
	--color-app-jp-fish2: #673ab7;					/* Deep Purple 500 */
	--color-app-en-alphabet: #f44336;				/* Red 500 */
	--color-app-jp-sake: #f44336;					/* Red 500 */
	--color-app-osaka-metro-k: #b34422;				/* K Line color */
	--color-app-osaka-metro-y: #0074bf;				/* Y Line color */
	--color-app-osaka-metro-m: #dc2314;				/* M Line color */
	--color-app-osaka-metro-n: #bcd400;				/* N Line color */
	--color-app-osaka-metro-c: #0fa63c;				/* C Line color */
	--color-app-osaka-metro-t: #ab1687;				/* T Line color */
	--color-app-osaka-metro-s: #ec74a9;				/* S Line color */
	--color-app-osaka-metro-p: #00a7e3;				/* P Line color */
	--color-app-osaka-metro-i: #f4a000;				/* I Line color */
	
	--color-app-jp-bg: #03a9f4;						/* Light Blue 500 */
	--color-app-jp-m: #9c27b0;						/* Purple 500 */
	--color-app-jp-bj: #ff9800;						/* Orange 500 */
	
	--color-wearos-app-oriental-zodiac: #f44336;	/* Red 500 */
	--color-wearos-app-8queens: #ffc107;			/* Amber 500 */
	--color-wearos-app-reversi: #00bcd4;			/* Cyan 500 */
	
	--color-info-box-app-image: #546e7a;			/* Blue Grey 600 */
	--color-info-box-app-image-dark: #757575;		/* Grey 600 */
	
	--color-google-legal-attribution: #52c7b8;		/* Teal 500-Light */
	--color-apple-legal-attribution: #67daff;		/* Light Blue 500-Light */
}

body.dark-theme {
	--background-color: #121212;					/* Black-like */
	--background-footer-color: #90a4ae;				/* Blue Grey 300 */

	--navi-button-hover-color: #666;				/* LightGrey-like */

	--color-info-box-ios: #ff8a65;					/* Deep Orange 300 */
	--color-info-box-android: #81c784;				/* Green 300 */
	--color-info-box-watchos: #4dd0e1;				/* Cyan 300 */
	--color-info-box-wearos: #64B5F6;				/* Blue 300 */
	--color-info-box-letters: #7986cb;				/* Indigo 300 */
	--color-info-box-guide: #ffd54f;				/* Amber 300 */
	
	--color-info-box-apple-article: #4fc3f7;		/* Light Blue 300 */
	--color-info-box-android-article: #4db6ac;		/* Teal 300 */
	
	--color-info-box-about: #4fc3f7;				/* Light Blue 300 */
	--color-info-box-background: #4db6ac;			/* Teal 300 */
	--color-info-box-biography: #aed581;			/* Light Green 300 */
	
	--color-ios-top-area-text: #ff7043;				/* Deep Orange 400 */
	--color-android-top-area-text: #66bb6a;			/* Green 400 */
	
	--color-app-jp-number: #f06292;					/* Pink 300 */
	--color-app-jp-8queens: #ffd54f;				/* Amber 300 */
	--color-app-jp-hiragana: #dce775;				/* Lime 300 */
	--color-app-jp-katakana: #aed581;				/* Light Green 300 */
	--color-app-jp-nutrition: #4dd0e1;				/* Cyan 300 */
	--color-app-jp-prefecture: #4db6ac;				/* Teal 300 */
	--color-app-jp-100poems: #81c784;				/* Green 300 */
	--color-app-jp-fish: #7986cb;					/* Indigo 300 */
	--color-app-jp-fish2: #9575cd;					/* Deep Purple 300 */
	--color-app-en-alphabet: #e57373;				/* Red 300 */
	--color-app-jp-sake: #e57373;					/* Red 300 */
	--color-app-osaka-metro-k: #f68f6f;				/* K Line color Dark #b37057*/
	--color-app-osaka-metro-y: #4ac0fa;				/* Y Line color Dark #00a6ed*/
	--color-app-osaka-metro-m: #ff7e63;				/* M Line color Dark #fe7f75*/
	--color-app-osaka-metro-n: #cfe163;				/* N Line color Dark*/
	--color-app-osaka-metro-c: #70cc7f;				/* C Line color Dark*/
	--color-app-osaka-metro-t: #c762a9;				/* T Line color Dark*/
	--color-app-osaka-metro-s: #f4c1d9;				/* S Line color Dark*/
	--color-app-osaka-metro-p: #81D2EF;				/* P Line color Dark*/
	--color-app-osaka-metro-i: #F6D350;				/* I Line color Dark*/

	--color-app-jp-bg: #4fc3f7;						/* Light Blue 300 */
	--color-app-jp-m: #ba68c8;						/* Purple 300 */
	--color-app-jp-bj: #ffb74d;						/* Orange 300 */

	--color-wearos-app-oriental-zodiac: #e57373;	/* Red 300 */
	--color-wearos-app-8queens: #ffd54f;			/* Amber 300 */
	--color-wearos-app-reversi: #4dd0e1;			/* Cyan 300 */
	
	--color-info-box-app-image: #78909c;			/* Blue Grey 400 */
	--color-info-box-app-image-dark: #bdbdbd;		/* Grey 400 */

	--color-google-legal-attribution: #00867d;		/* Teal 300-Dark */
	--color-apple-legal-attribution: #0093c4;		/* Light Blue 300-Dark */
}


*,
*::before,
*::after {
	box-sizing: border-box;
}

html, 
html * {
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

h1 {
	font-size: 58px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 60px;
}

h2 {
	font-size: 30px;
	font-weight: 200;
	margin-bottom: 23px;
}

h3 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 10px;
}

h4 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 80px;
}

p {
	font-size: 16px;
	font-weight: 400;
}

.button {
	border: 2px #FFFFFF solid;
	padding: 8px 30px;
	border-radius: 5px;
	color: #FFFFFF;
	text-decoration: none;
	transition-duration: 0.5s;
}
.button:hover,
.button:focus {
	background-color: var(--navi-button-hover-color);
	padding: 8px 30px;
	border-radius: 5px;
	color: #FFFFFF;
	text-decoration: none;
}
.button:focus {
	outline-offset: .5rem;
}

.centering-element {
	text-align: center;
}

body {
	line-height: 1.6;
	margin: 0;
	display: grid;
	height: 100vh;
	grid-template-rows: 0 1fr auto;
	background-color: var(--background-color);
	transition-duration: 0.3s;
}

body.dark-theme img.kana_img {
	filter: brightness(.8) contrast(1.1);
	transition-duration: 0.3s;
}

footer {
	color: #ffffff;
	background-color: var(--background-footer-color);
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
}

.switch-coffee {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.coffee {
	padding-top: 8px;
	padding-left: 30px;
}


.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.style-logo-large {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 360px;
	margin-bottom: 50px;
}

.bonnyloch-logo {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 150px;
	margin-bottom: 30px;
}
.bonnyhajime-logo {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 126px;
	margin-bottom: 30px;
}
.app-icon {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 150px;
	border-radius: 10px;
	margin-bottom: 30px;
}
.moji-image {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 124px;
	margin-bottom: 30px;
}
.how-to-image {
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 240px;
	margin-bottom: 30px;
	background-color: #FFFFFF
}
.app-image {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 240px;
}
.google-badge-image {
	margin-left: auto;
	margin-right: auto;
	display: center;
	width: 200px;
}
.google-badge-text {
	color: var(--color-google-legal-attribution);
}
.app-store-qr-image {
	margin-left: auto;
	margin-right: 10px;
	display: center;
	width: 150px;
}
.app-store-badge-image {
	margin-left: 10px;
	margin-right: auto;
	display: center;
	width: 200px;
}
.app-store-badge-text {
	color: var(--color-apple-legal-attribution);
}



.icon {
	display: none;
}
.dropdown {
	display: none;
}

/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
/*			Background image				*/
/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/

/*		Top page - main photo area -		*/
.hajime {
	background-image: url(images/top_image.jpg);
	background-size: cover;
	padding: 180px 20px 60px 20px;
	color: #FFFFFF;
	text-align: center;
}

/*		About page - photo area -			*/
.about-hajime {
	background-image: url(images/about_image.jpg);
	background-size: cover;
	padding: 180px 20px 60px 20px;
	color: #FFFFFF;
	text-align: center;
}

/*iOS app page - photo area -*/
.ios-page-top {
	background-image: url(images/ios_apps_image.jpg);
	background-size: cover;
	padding: 180px 20px 60px 20px;
	color: #607d8b;		//var(--color-footer-box);
	text-align: center;
}
.ios-page-top p {
	color: #FFFFFF;
}

/*		Android app page - photo area -		*/
.android-page-top {
	background-image: url(images/android_apps_image.jpg);
	background-size: cover;
	padding: 180px 20px 60px 20px;
	color: #607d8b;		//var(--color-footer-box);
	text-align: center;
}
.android-page-top p {
	color: #FFFFFF;
}

/*		Guide page - photo area -			*/
.guide-page-top {
	background-image: url(images/guide/DSC_2420.jpg);
	background-size: cover;
	padding: 180px 20px 60px 20px;
	color: #FFFFFF;
	text-align: center;
}
.guide-page-top p {
	color: #FFFFFF;
}


/*	@@@@@@@@@@@@@@@@@@@@@@@@@		*/
/*			Color Tile area				*/
/*	@@@@@@@@@@@@@@@@@@@@@@@@@		*/

/*		Top page - color tile area -			*/
.info-box-ios {
	background-color: var(--color-info-box-ios);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-ios-screenshot-bottom {
	background-color: var(--color-info-box-apple-article);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}

.info-box-android {
	background-color: var(--color-info-box-android);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-android-screenshot-bottom {
	background-color: var(--color-info-box-android-article);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}

.info-box-watchos {
	background-color: var(--color-info-box-watchos);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-wearos {
	background-color: var(--color-info-box-wearos);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-watchos-screenshot-bottom {
	background-color: var(--color-info-box-apple-article);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}
.info-box-wearos-screenshot-bottom {
	background-color: var(--color-info-box-android-article);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}

.info-box-letters {
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-guide {
	background-color: var(--color-info-box-guide);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-travel {
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 5px;
	text-align: center;
}
.info-box-travel-bottom {
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}
.info-box-travel-japan-bottom {
	background-color: var(--color-info-box-biography);
	color: #FFFFFF;
	padding: 30px;
	text-align: center;
}

/*		About page - color tile area -		*/
.info-box-about {
	background-color: var(--color-info-box-about);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}
.info-box-background {
	background-color: var(--color-info-box-background);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}
.info-box-biography {
	background-color: var(--color-info-box-biography);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}
.info-box-biography ul {
	padding: 0px;
	text-align: center;
}
.info-box-biography ul a {
	display: inline-block;
	margin: 5px;
}

.info-box-email {
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}

/*			Apps page			*/
.info-box-app-jp-number {
	background-color: var(--color-app-jp-number);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-number ul {
	padding: 0px;
}
.info-box-app-jp-number ul a {
	margin: 5px;
}


.info-box-app-jp-8queens {
	background-color: var(--color-app-jp-8queens);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-8queens ul {
	padding: 0px;
}
.info-box-app-jp-8queens ul a {
	margin: 5px;
}

.info-box-app-jp-hiragana {
	background-color: var(--color-app-jp-hiragana);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-hiragana ul {
	padding: 0px;
}
.info-box-app-jp-hiragana ul a {
	margin: 5px;
}

.info-box-app-jp-katakana {
	background-color: var(--color-app-jp-katakana);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-katakana ul {
	padding: 0px;
}
.info-box-app-jp-katakana ul a {
	margin: 5px;
}

.info-box-app-jp-nutrition {
	background-color: var(--color-app-jp-nutrition);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-nutrition ul {
	padding: 0px;
}
.info-box-app-jp-nutrition ul a {
	margin: 5px;
}

.info-box-app-jp-prefecture {
	background-color: var(--color-app-jp-prefecture);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-prefecture ul {
	padding: 0px;
}
.info-box-app-jp-prefecture ul a {
	margin: 5px;
}

.info-box-app-jp-100poems {
	background-color: var(--color-app-jp-100poems);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-100poems ul {
	padding: 0px;
}
.info-box-app-jp-100poems ul a {
	margin: 5px;
}

.info-box-app-jp-fish {
	background-color: var(--color-app-jp-fish);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-fish ul {
	padding: 0px;
}
.info-box-app-jp-fish ul a {
	margin: 5px;
}

.info-box-app-jp-fish2 {
	background-color: var(--color-app-jp-fish2);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-fish2 ul {
	padding: 0px;
}
.info-box-app-jp-fish2 ul a {
	margin: 5px;
}

.info-box-app-en-alphabet {
	background-color: var(--color-app-en-alphabet);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-en-alphabet ul {
	padding: 0px;
}
.info-box-app-en-alphabet ul a {
	margin: 5px;
}

.info-box-app-jp-sake {
	background-color: var(--color-app-jp-sake);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-sake ul {
	padding: 0px;
}
.info-box-app-jp-sake ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-k {
	background-color: var(--color-app-osaka-metro-k);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-k ul {
	padding: 0px;
}
.info-box-app-osaka-metro-k ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-y {
	background-color: var(--color-app-osaka-metro-y);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-y ul {
	padding: 0px;
}
.info-box-app-osaka-metro-y ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-m {
	background-color: var(--color-app-osaka-metro-m);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-m ul {
	padding: 0px;
}
.info-box-app-osaka-metro-m ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-n {
	background-color: var(--color-app-osaka-metro-n);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-n ul {
	padding: 0px;
}
.info-box-app-osaka-metro-n ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-c {
	background-color: var(--color-app-osaka-metro-c);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-c ul {
	padding: 0px;
}
.info-box-app-osaka-metro-c ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-t {
	background-color: var(--color-app-osaka-metro-t);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-t ul {
	padding: 0px;
}
.info-box-app-osaka-metro-t ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-s {
	background-color: var(--color-app-osaka-metro-s);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-s ul {
	padding: 0px;
}
.info-box-app-osaka-metro-s ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-p {
	background-color: var(--color-app-osaka-metro-p);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-p ul {
	padding: 0px;
}
.info-box-app-osaka-metro-p ul a {
	margin: 5px;
}

.info-box-app-osaka-metro-i {
	background-color: var(--color-app-osaka-metro-i);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-osaka-metro-i ul {
	padding: 0px;
}
.info-box-app-osaka-metro-i ul a {
	margin: 5px;
}



.info-box-app-jp-bg {
	background-color: var(--color-app-jp-bg);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-bj {
	background-color: var(--color-app-jp-bj);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-app-jp-m {
	background-color: var(--color-app-jp-m);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}

/*wearOS apps */
.info-box-wearos-app-oriental-zodiac {
	background-color: var(--color-wearos-app-oriental-zodiac);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-wearos-app-oriental-zodiac ul {
	padding: 0px;
}
.info-box-wearos-app-oriental-zodiac ul a {
	margin: 5px;
}

.info-box-wearos-app-8queens {
	background-color: var(--color-wearos-app-8queens);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-wearos-app-8queens ul {
	padding: 0px;
}
.info-box-wearos-app-8queens ul a {
	margin: 5px;
}

.info-box-wearos-app-reversi {
	background-color: var(--color-wearos-app-reversi);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: center;
}
.info-box-wearos-app-reversi ul {
	padding: 0px;
}
.info-box-wearos-app-reversi ul a {
	margin: 5px;
}



/*SUZURI image*/
.info-box-suzuri-ios {
	background-color: var(--color-info-box-ios);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: left;
}
.info-box-suzuri-watchos {
	background-color: var(--color-info-box-watchos);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: left;
}
.info-box-suzuri-android {
	background-color: var(--color-info-box-android);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: left;
}
.info-box-suzuri-image {
	background-color: var(--color-info-box-app-image);
	color: #FFFFFF;
	padding: 20px 10px 20px;
	text-align: center;
}
.info-box-suzuri-image-dark {
	background-color: var(--color-info-box-app-image-dark);
	color: #FFFFFF;
	padding: 20px 10px 20px;
	text-align: center;
}


/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
/*		BackgroundColor for Images on App / Guide page				*/
/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
.info-box-app-image, .info-box-map-image {
	background-color: var(--color-info-box-app-image);
	color: #FFFFFF;
	padding: 40px 10px 40px;
	text-align: center;
}
.info-box-app-image-dark, .info-box-map-image-dark {
	background-color: var(--color-info-box-app-image-dark);
	color: #FFFFFF;
	padding: 40px 10px 40px;
	text-align: center;
}


/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
/*				App Introduction page					*/
/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
.info-box-ios-app-introduction, .info-box-watchos-app-introduction {
	background-color: var(--color-info-box-apple-article);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}
.info-box-android-app-introduction, .info-box-wearos-app-introduction {
	background-color: var(--color-info-box-android-article);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}
.info-box-how-to-draw-introduction {
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 40px 20px 60px;
	text-align: left;
}


/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/
/*				Travel Pages						*/
/*	@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@		*/

/*Travel page - photo area -*/
.sweden {
	background-image: url(images/2006_sweden/sweden_top_photo.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.sweden-stockholm {
	background-image: url(images/2006_sweden/stockholm/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.sweden-skovde {
	background-image: url(images/2006_sweden/skovde/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.sweden-spiken {
	background-image: url(images/2006_sweden/spiken/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.sweden-otterstad {
	background-image: url(images/2006_sweden/otterstad/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.sweden-gothenburg {
	background-image: url(images/2006_sweden/gothenburg/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.france07 {
	background-image: url(images/france07/france07_top_photo.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-marseille {
	background-image: url(images/france07/marseille/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-avignon {
	background-image: url(images/france07/avignon/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-orange {
	background-image: url(images/france07/orange/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-lyon {
	background-image: url(images/france07/lyon/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-annecy {
	background-image: url(images/france07/annecy/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france07-paris {
	background-image: url(images/france07/paris/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.belgium-luxembourg08 {
	background-image: url(images/belgium_luxembourg08/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-luxembourg {
	background-image: url(images/belgium_luxembourg08/luxembourg/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-vianden {
	background-image: url(images/belgium_luxembourg08/vianden/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-namur {
	background-image: url(images/belgium_luxembourg08/namur/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-ostend {
	background-image: url(images/belgium_luxembourg08/ostend/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-bruges {
	background-image: url(images/belgium_luxembourg08/bruges/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-antwerp {
	background-image: url(images/belgium_luxembourg08/antwerp/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.belgium-luxembourg08-brussels {
	background-image: url(images/belgium_luxembourg08/brussels/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.france09 {
	background-image: url(images/france09/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france09-bordeaux {
	background-image: url(images/france09/bordeaux/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france09-saint-emilion {
	background-image: url(images/france09/saint_emilion/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.france09-paris {
	background-image: url(images/france09/paris/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.scotland {
	background-image: url(images/scotland/scotland_top_photo.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-anstruther {
	background-image: url(images/scotland/anstruther/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-aberdeen {
	background-image: url(images/scotland/aberdeen/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-balvaird_castle {
	background-image: url(images/scotland/balvaird_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-blair_castle {
	background-image: url(images/scotland/blair_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.scotland-cairn_o-mount {
	background-image: url(images/scotland/cairn_o-mount/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-commando_memorial {
	background-image: url(images/scotland/commando_memorial/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-craigievar_castle {
	background-image: url(images/scotland/craigievar_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-crathes_castle {
	background-image: url(images/scotland/crathes_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.scotland-doune_castle {
	background-image: url(images/scotland/doune_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-edinburgh {
	background-image: url(images/scotland/edinburgh/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-edradour {
	background-image: url(images/scotland/edradour/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-eilean_donan_castle {
	background-image: url(images/scotland/eilean_donan_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.scotland-falkland_palace_and_garden {
	background-image: url(images/scotland/falkland_palace_and_garden/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-fort_augustus {
	background-image: url(images/scotland/fort_augustus/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-glamis_castle {
	background-image: url(images/scotland/glamis_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-glasgow {
	background-image: url(images/scotland/glasgow/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-glencoe {
	background-image: url(images/scotland/glencoe/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-highland_gathering {
	background-image: url(images/scotland/highland_gathering/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-house_of_dun {
	background-image: url(images/scotland/house_of_dun/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-isle_of_skye {
	background-image: url(images/scotland/isle_of_skye/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-kenmore {
	background-image: url(images/scotland/kenmore/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-kinnoull_hill {
	background-image: url(images/scotland/kinnoull_hill/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-loch_leven {
	background-image: url(images/scotland/loch_leven/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-lunan_bay {
	background-image: url(images/scotland/lunan_bay/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-perth {
	background-image: url(images/scotland/perth/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-perth-college {
	background-image: url(images/scotland/perth_college/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-queens_view {
	background-image: url(images/scotland/queens_view/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-royal_highland_show {
	background-image: url(images/scotland/royal_highland_show/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-scone_palace {
	background-image: url(images/scotland/scone_palace/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-st_andrews {
	background-image: url(images/scotland/st_andrews/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-stirling_castle {
	background-image: url(images/scotland/stirling_castle/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-the_hill_house {
	background-image: url(images/scotland/the_hill_house/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.scotland-the_national_wallace_monument {
	background-image: url(images/scotland/the_national_wallace_monument/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


.england {
	background-image: url(images/england/england_top_photo.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.england-london {
	background-image: url(images/england/london/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

.england-windsor {
	background-image: url(images/england/windsor/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}



/*					Travel page - title area -					*/
.about-sweden {
	background-image: url(images/2006_sweden/DSCN3325.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-france07 {
	background-image: url(images/france07/DSCN3667.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-belgium-luxembourg {
	background-image: url(images/belgium_luxembourg08/DSCN6005.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-france09 {
	background-image: url(images/2009_france/DSCN6339.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-scotland {
	background-image: url(images/scotland/scotland_top_photo.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}

/*Guide photo page - title area -*/
.about-kyoto {
	background-image: url(images/guide/kyoto/kyoto_title_image.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-hyogo {
	background-image: url(images/guide/hyogo/hyogo_title_image.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-nara {
	background-image: url(images/guide/nara/nara_title_image.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.about-osaka {
	background-image: url(images/guide/osaka/osaka_title_image.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}


/*					Guide page KYOTO - photo area -					*/
.kyoto-arasiyama {
	background-image: url(images/guide/kyoto/arasiyama/DSC_2480.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-chionin {
	background-image: url(images/guide/kyoto/chionin/DSC_2421.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-genkouan {
	background-image: url(images/guide/kyoto/genkouan/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-ginnkaku_ji {
	background-image: url(images/guide/kyoto/ginnkaku_ji/IMGP0372.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-heian_shrine {
	background-image: url(images/guide/kyoto/heian_shrine/DSC_2428.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-heian_shrine_garden {
	background-image: url(images/guide/kyoto/heian_shrine_garden/IMGP0232.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-husimi {
	background-image: url(images/guide/kyoto/husimi/IMGP0458.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-husimi_inari {
	background-image: url(images/guide/kyoto/husimi_inari/DSC_0926.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-jingoji {
	background-image: url(images/guide/kyoto/jingoji/top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-kamogawa {
	background-image: url(images/guide/kyoto/kamogawa/DSC_2387.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-kennin_ji {
	background-image: url(images/guide/kyoto/kennin_ji/DSC_2392.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-kinkaku_ji {
	background-image: url(images/guide/kyoto/kinkaku_ji/DSC_0877.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-kiyomizu_dera {
	background-image: url(images/guide/kyoto/kiyomizu_dera/IMGP0317.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-kyoto_gosyo {
	background-image: url(images/guide/kyoto/kyoto_gosyo/IMGP0443.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-nanzen_ji {
	background-image: url(images/guide/kyoto/nanzen_ji/IMGP0240.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-nijo_jo_castle {
	background-image: url(images/guide/kyoto/nijo_jo_castle/DSC_0887.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-ponto {
	background-image: url(images/guide/kyoto/ponto/IMGP0195.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-ryoanji {
	background-image: url(images/guide/kyoto/ryoanji/DSC_2467.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-sanjusangendo {
	background-image: url(images/guide/kyoto/sanjusangendo/DSC_0906.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-takasegawa {
	background-image: url(images/guide/kyoto/takasegawa/DSC_2437.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-tetugaku {
	background-image: url(images/guide/kyoto/tetugaku/IMGP0251.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-uji {
	background-image: url(images/guide/kyoto/uji/DSC_1665.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-yasaka {
	background-image: url(images/guide/kyoto/yasaka/IMGP0377.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.kyoto-station {
	background-image: url(images/guide/kyoto/jr_kyoto_station/jr_kyoto_station_top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}



/*					Guide page NARA - photo area -					*/
.nara-horyuji {
	background-image: url(images/guide/nara/horyuji/DSC_2637.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-kasugataisha {
	background-image: url(images/guide/nara/kasugataisha/DSC_2697.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-kohfukuji {
	background-image: url(images/guide/nara/kohfukuji/DSC_2706.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-park {
	background-image: url(images/guide/nara/park/DSC_1029.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-todaiji {
	background-image: url(images/guide/nara/todaiji/DSC_1025.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-toshodaiji {
	background-image: url(images/guide/nara/toshodaiji/DSC_2668_top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}
.nara-yakushiji {
	background-image: url(images/guide/nara/yakushiji/DSC_2661_top.jpg);
	background-size: cover;
	padding: 250px 20px 100px 20px;
	color: #FFFFFF;
	text-align: center;
}







.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

.col{
	width: 100%;
}

.col-kana{
	float: left;
	width: 50%;
}

.kana_img, .city_img,  .flower_img, .travel_img, 
.japan_map_img, .guide_area_pref_img, .suzuri_img {
	max-width:100%;
	max-height:100%;
}


/*			   Toggle Switch 			  */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("images/baseline_light_mode_red_24dp.png");
  background-position: 90% 50%;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-color: #90caf9;	/* Blue200 */
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-image: url("images/baseline_dark_mode_yellow_24dp.png");
  background-position: 10% 50%;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-color: #b39ddb;	/* DeepPurple200 */
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*  Navigation menu - Top page icon - */
.style-logo {
	width: 45px;
}


/*				Modal View				*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  border-radius: 10px;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1500px;
}
.modal-content-phone {
  border-radius: 10px;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 600px;
}
.modal-content-watch {
  border-radius: 10px;
  margin: auto;
  display: block;
  max-width: 368px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, .modal-content-phone, .modal-content-watch, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 500px){
  .modal-content {
    width: 80%;
  }
}

/* Screenshot Images */
#screenshot_01, 
#screenshot_02,
#screenshot_03,
#screenshot_04,
#screenshot_05,
#screenshot_06,
#screenshot_07,
#screenshot_08,
#screenshot_09,
#screenshot_10,
#screenshot_11, 
#screenshot_12,
#screenshot_13,
#screenshot_14,
#screenshot_15,
#screenshot_16,
#screenshot_17,
#screenshot_18,
#screenshot_19,
#screenshot_20,
#screenshot_21, 
#screenshot_22,
#screenshot_23,
#screenshot_24,
#screenshot_25,
#screenshot_26,
#screenshot_27,
#screenshot_28,
#screenshot_29,
#screenshot_30,
#screenshot_31, 
#screenshot_32,
#screenshot_33,
#screenshot_34,
#screenshot_35,
#screenshot_36,
#screenshot_37,
#screenshot_38,
#screenshot_39,
#screenshot_40,
#screenshot_41, 
#screenshot_42,
#screenshot_43,
#screenshot_44,
#screenshot_45,
#screenshot_46,
#screenshot_47,
#screenshot_48,
#screenshot_49,
#screenshot_50,
#screenshot_51, 
#screenshot_52,
#screenshot_53,
#screenshot_54,
#screenshot_55,
#screenshot_56,
#screenshot_57,
#screenshot_58,
#screenshot_59,
#screenshot_60
{
	border-radius: 5px;
	cursor: pointer;
	transition: 0.5s;
}

#screenshot_01:hover, 
#screenshot_02:hover,
#screenshot_03:hover,
#screenshot_04:hover,
#screenshot_05:hover,
#screenshot_06:hover,
#screenshot_07:hover,
#screenshot_08:hover,
#screenshot_09:hover,
#screenshot_10:hover,
#screenshot_11:hover, 
#screenshot_12:hover,
#screenshot_13:hover,
#screenshot_14:hover,
#screenshot_15:hover,
#screenshot_16:hover,
#screenshot_17:hover,
#screenshot_18:hover,
#screenshot_19:hover,
#screenshot_20:hover,
#screenshot_21:hover, 
#screenshot_22:hover,
#screenshot_23:hover,
#screenshot_24:hover,
#screenshot_25:hover,
#screenshot_26:hover,
#screenshot_27:hover,
#screenshot_28:hover,
#screenshot_29:hover,
#screenshot_30:hover,
#screenshot_31:hover, 
#screenshot_32:hover,
#screenshot_33:hover,
#screenshot_34:hover,
#screenshot_35:hover,
#screenshot_36:hover,
#screenshot_37:hover,
#screenshot_38:hover,
#screenshot_39:hover,
#screenshot_40:hover,
#screenshot_41:hover, 
#screenshot_42:hover,
#screenshot_43:hover,
#screenshot_44:hover,
#screenshot_45:hover,
#screenshot_46:hover,
#screenshot_47:hover,
#screenshot_48:hover,
#screenshot_49:hover,
#screenshot_50:hover,
#screenshot_51:hover, 
#screenshot_52:hover,
#screenshot_53:hover,
#screenshot_54:hover,
#screenshot_55:hover,
#screenshot_56:hover,
#screenshot_57:hover,
#screenshot_58:hover,
#screenshot_59:hover,
#screenshot_60:hover
{
	opacity: 0.7;
}


/*  Flex */
.how-to-draw-area {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.how-to-draw-area > * {
	flex: 1 1 360px;
	background-color: var(--color-info-box-letters);
	color: #FFFFFF;
	padding: 40px 20px 40px;
	text-align: left;
}

body {
	overfow-x: hidden;
}

.mobile-navigation {
	display: none;
}



/*	@@@	Extra small devices (phones, 700px and down)		@@@	*/
@media only screen and (max-width: 700px) {
	
/*	Label for Discontinued App	*/
.discontinued-label {
	position: absolute;
	margin: 0;
	top:50px;
	right: 0px;
}
	
.scotland-aberdeen, .scotland-scone_palace {
	background-position: 15% 0%;
}
.scotland-doune_castle, 
.scotland-st_andrews, .scotland-the_national_wallace_monument, .scotland-falkland_palace_and_garden,
.about-kyoto, .kyoto-heian_shrine, .kyoto-heian_shrine_garden, .kyoto-ryoanji, .kyoto-sanjusangendo, .nara-yakushiji {
	background-position: 20% 0%;
}
.scotland, .sweden, .about-sweden, .about-france07, .scotland-anstruther, 
.belgium-luxembourg08-namur, .france07-paris, .scotland-royal_highland_show,
.about-osaka, .kyoto-arasiyama, .kyoto-chionin, .kyoto-husimi, .kyoto-kiyomizu_dera, 
.kyoto-nanzen_ji, .kyoto-nijo_jo_castle, .kyoto-station, .nara-kasugataisha, .nara-park {
	background-position: 30% 0%;
}
.guide-page-top, 
.scotland-edinburgh, .scotland-glasgow, .scotland-highland_gathering, .scotland-cairn_o-mount,
.scotland-kinnoull_hill, .scotland-blair_castle, .belgium-luxembourg08, .belgium-luxembourg08-vianden,
.kyoto-husimi_inari, .kyoto-kamogawa, .kyoto-kennin_ji, .kyoto-kinkaku_ji, .kyoto-tetugaku, .nara-toshodaiji {
	background-position: 35% 0%;
}
.scotland-stirling_castle {
	background-position: 40% 0%;
}
.ios-page-top, 
.scotland-balvaird_castle, .scotland-crathes_castle, .scotland-glamis_castle, .scotland-perth-college,
.scotland-glencoe, .scotland-highland_gathering, .scotland-queens_view, .england-london, .france09, .france07-orange,
.scotland-loch_leven, .scotland-perth, .scotland-the_hill_house, .scotland-house_of_dun, .belgium-luxembourg08-luxembourg,
.about-hyogo, .kyoto-ginnkaku_ji, .kyoto-kyoto_gosyo, .kyoto-ponto, .kyoto-yasaka, .about-nara, .nara-todaiji {
	background-position: 50% 0%;
}
.england-windsor, .scotland-kenmore,
.sweden-skovde, .sweden-otterstad, .sweden-gothenburg, 
.france07, .belgium-luxembourg08-ostend, .france07-lyon, .france07-annecy,
.kyoto-takasegawa, .kyoto-uji {
	background-position: 60% 0%;
}
.android-page-top, .scotland-eilean_donan_castle, .belgium-luxembourg08-bruges {
	background-position: 65% 0%;
}
.scotland-craigievar_castle {
	background-position: 70% 0%;
}
.scotland-fort_augustus, .sweden-stockholm, .about-hajime {
	background-position: 75% 0%;
}
.scotland-isle_of_skye {
	background-position: 85% 0%;
}

.how-to-draw-area {
	gap: 0px;
}

.navigation_menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1; /* Sit on top */
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

.navigation_menu li {
	float: left;
}

.navigation_menu a {
	display: block;
	padding: 10px 50px;
	color: #546e7a;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.5s;
}

.mobile-navigation a.active,
.navigation_menu li a.active {
	color: white;
}

.navigation_menu a:hover:not(.active),
.navigation_menu a:focus:not(.active) {
	color: white;
	background-color: var(--navi-button-hover-color);
	transition-duration: 0.5s;
}
.navigation_menu li a:focus {
	outline-offset: -.4rem;
}
.navigation_menu li a:focus:not(.active) {
	outline-style: none;
}


.mobile-nav-toggle:focus {
	transition-duration: 0.5s;
	outline-offset: .2rem;
}

.main_contents {
	margin-top:50px;
	margin-left:0%;
}

footer {
	margin-left:0%;
}

.navigation_menu li:not(:first-child) {
	display: none;
}


.navigation_menu li.dropdown {
	display: none;
}

/*				Animated Slide Mobile Menu　ここから				*/
.mobile-navigation {
	display: flex;
	position: fixed;
	list-style: none;
	inset: 0 0 0 30%;	
	flex-direction: column;
	padding-top: min(20vh, 10rem);
	transform: translateX(100%);
	transition: transform 350ms ease-out;
}
@supports (backdrop-filter: blur(5px)) {
	.mobile-navigation {
		backdrop-filter: blur(5px);
	}
}
	
.mobile-navigation[data-visible="true"] {
	transform: translateX(0%);
}

.mobile-navigation a {
	text-decoration: none;
	text-align: left;
	font-size: 1.2rem;
	line-height: 2;
	display: block;
}

.mobile-nav-toggle {
	padding: 0;
	margin-right: 30px;
	cursor: pointer;
	border: none;
	z-index: 100;
	background: url("images/menu.png") no-repeat center;
	width: 25px;
	height: 25px;
	aspect-ratio: 1;
}
.mobile-nav-toggle[aria-expanded="true"] {
	background: url("images/close.png") no-repeat center;
}
/*				Animated Slide Mobile Menu　ここまで				*/

/*				DropDown Menu　ここから
.dropdown-mobile {
	float: right;
	position: relative;
	display: inline-block;
}

.dropdown-content-mobile {
	display: none;
	position: absolute;
	right: 0;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content-mobile a {
	text-align: left;
	color: #546e7a;
	padding: 12px 50px;
	text-decoration: none;
	display: block;
}

.dropdown-content-mobile a.active {
	color: white;
}

.dropdown-mobile a:focus {
	outline-offset: -.4rem;
}
.dropdown-mobile a:focus:not(.active) {
	outline-style: none;
}

.dropdown-mobile:hover .dropdown-content-mobile,
.dropdown-mobile:focus-within .dropdown-content-mobile {
	display: block;
	position: fixed;
	width: 100%;
}
				DropDown Menu　ここまで				*/
}



/*	@@@	Small devices (phones and tablets, 700px and up)	@@@	*/
@media only screen and (min-width: 700px) {
	
/*	Label for Discontinued App	*/
.discontinued-label {
	position: absolute;
	margin: 0;
	top:50px;
	right: 30px;
}	

.ios-page-top,
.scotland-glencoe, .scotland-edinburgh, .scotland-kinnoull_hill, .scotland-royal_highland_show,
.belgium-luxembourg08, .belgium-luxembourg08-vianden, .belgium-luxembourg08-namur, .france07-paris,
.about-osaka, .about-hyogo, .kyoto-husimi_inari, .kyoto-kyoto_gosyo, .kyoto-ponto, .nara-todaiji {
	background-position: 30% 0%;
}
.scotland-aberdeen, .scotland-blair_castle, .france09, .france07-orange, .scotland-cairn_o-mount, .scotland-stirling_castle,
.sweden-otterstad, .sweden-gothenburg, .about-hajime {
	background-position: 40% 0%;
}
.android-page-top,
.scotland-balvaird_castle, .scotland-crathes_castle, .scotland-glamis_castle, .england-london, .scotland-the_hill_house,
.france07, .belgium-luxembourg08-luxembourg, .scotland-kenmore, .scotland-loch_leven, .scotland-perth-college,
.scotland-glasgow, .scotland-perth, .scotland-queens_view, .scotland-house_of_dun, .england-windsor, 
.sweden-skovde,
.kyoto-takasegawa, .kyoto-uji, .kyoto-yasaka {
	background-position: 50% 0%;
}
.belgium-luxembourg08-ostend, .belgium-luxembourg08-bruges, .france07-lyon, .france07-annecy {
	background-position: 60% 0%;
}
.scotland-craigievar_castle, .scotland-eilean_donan_castle, .scotland-fort_augustus, .sweden-stockholm {
	background-position: 70% 0%;
}
.scotland-isle_of_skye {
	background-position: 85% 0%;
}

.style-logo {
	width: 48px;
}
.main_contents {
	max-width: 1200px;
}

h1 {
	font-size: 40px;
	margin-bottom: 90px;
}
	
.col-md-one-half{
	width: 50%;
}

.col-md-one-half-kana{
	width: 25%;
}
	
.col{
	float: left;
	padding: 0px 7px 14px;
}


.mobile-nav-toggle {
	display: none;
}

.navigation_menu {
	z-index: 1; /* Sit on top */
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	transition-duration: 0.8s;
}

.navigation_menu li {
	float: left;
}


.navigation_menu li a, .dropbtn {
	display: block;
	padding: 10px 40px;
	color: #607d8b;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.5s;
}

.navigation_menu li a.active {
	color: white;
}

.navigation_menu li a:hover:not(.active),
.navigation_menu li a:focus:not(.active),
.dropdown:hover .dropbtn {
	color: white;
	background-color: var(--navi-button-hover-color);
	transition-duration: 0.5s;
}
.navigation_menu li a:focus {
	outline-offset: -.4rem;
}
.navigation_menu li a:focus:not(.active) {
	outline-style: none;
}

.main_contents {
	margin-top:50px;
	margin-left: 3%;
	margin-right: 3%;
}

footer {
	margin-left:0%;
}

.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a.active {
	color: white;
	background-color: #03a9f4;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
	display: block;
}

.navigation_menu li.app_menu {
	display: none;
}

.navigation_menu li.dropdown {
	display: block;
}

.navigation_menu li a {
	text-align: left;
}

.dropdown-mobile {
	display: none;
}
}

/*	@@@	Desktop (tablets and desktop, 1305px and up)		@@@	*/
@media only screen and (min-width: 1305px) {
	
/*	Label for Discontinued App	*/
.discontinued-label {
	position: absolute;
	margin: 0;
	top:50px;
	right: 70px;
}
	
.main_contents {
	max-width: 1400px;
}

.col-lg-one-fourth {
	width: 25%;
}

.col-lg-one-fourth-kana {
	width: 12.5%;
}

.col{
	float: left;
	padding: 0px 7px 14px;
}

.navigation_menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	transition-duration: 0.8s;
}

.navigation_menu li {
	float: left;
}

.navigation_menu li a {
	display: block;
	padding: 10px 50px;
	color: #607d8b;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.5s;
}

.navigation_menu li a.active {
	color: white;
}

.navigation_menu li a:hover:not(.active),
.navigation_menu li a:focus:not(.active) {
	color: white;
	background-color: var(--navi-button-hover-color);
	transition-duration: 0.5s;
}
.navigation_menu li a:focus {
	outline-offset: -.4rem;
}
.navigation_menu li a:focus:not(.active) {
	outline-style: none;
}

.main_contents {
	margin-top:50px;
	margin-left: 5%;
	margin-right: 5%;
}

footer {
	margin-left:0%;
}

.navigation_menu li.app_menu {
	display: block;
}

.navigation_menu li.dropdown {
	display: none;
}
}


/*	@@@	Desktop (desktop, 1500px and up)			@@@	*/
@media only screen and (min-width: 1500px) {
	
/*	Label for Discontinued App	*/
.discontinued-label {
	position: absolute;
	margin: 0;
	top:0px;
	right: 0px;
}
	
.style-logo {
	width: 56px;
}

.col-lg-one-fourth {
	width: 25%;
}

.col-lg-one-fourth-kana {
	width: 12.5%;
}

.navigation_menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 20%;
	position: fixed;
	height: 100%;
	transition-duration: 0.8s;
}

.navigation_menu li {
	clear: left;
	width: 100%;
}

.navigation_menu li a {
	display: block;
	color: #607d8b;
	padding: 20px 60px;
	font-size: 1.2rem;
	text-align: left;
	text-decoration: none;
}

.navigation_menu li a.active {
	color: white;
	transition-duration: 0.5s;
}

.navigation_menu li a:hover:not(.active),
.navigation_menu li a:focus:not(.active) {
	background-color: var(--navi-button-hover-color);
	color: white;
	transition-duration: 0.5s;
}
.navigation_menu li a:focus {
	outline-offset: -.4rem;
}
.navigation_menu li a:focus:not(.active) {
	outline-style: none;
}

.main_contents_left_margin {
	margin-left:20%;
	padding-left: 1%;
	padding-right: 1%;
}

.main_contents {
	max-width: 1600px;
	margin-top:15px;
    	margin-left: auto;
	margin-right: auto;
}

footer {
	margin-left:20%;
}
}