@charset 'UTF-8';

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

*:focus { /* Chromeで表示される謎の青枠を消す */
	outline: none!important;
}

a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* スマホでボタンやリンクをタップしたときの青い四角を消す */
	outline: none;
	text-decoration: none;
	cursor: pointer;
}

input:-webkit-autofill { /* Chromeでフォームのオートコンプリート使用時に背景色を変更しない */
	box-shadow: 0 0 0 1000px blanchedalmond inset;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	
	_::-webkit-full-page-media, _:future, :root { /* CSS hack for Safari */
		-webkit-tap-highlight-color: transparent; /* Safari的リンクタップ時ハイライトカラー無効化対策 */
		cursor: pointer;
	}
	
}

:root {
	--vw: 1vw;
	
	--cellW1S:    1vw;
	--cellW2768:  1vw;
	--cellW21024: 1vw;
	--cellW31280: 1vw;
	--cellW31600: 1vw;
	
	--cellH1AS:    1vw;
	--cellH2A768:  1vw;
	--cellH2A1024: 1vw;
	--cellH3A1280: 1vw;
	--cellH3A1600: 1vw;
	
	--cellH1BS:    1vw;
	--cellH2B768:  1vw;
	--cellH2B1024: 1vw;
	--cellH3B1280: 1vw;
	--cellH3B1600: 1vw;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
body {
	position: relative;
	z-index: 4;
	max-width: 1920px;
	min-height: 100vh;
	line-height: 1.8;
	margin: 0 auto;
	padding: 0;
	font-size: 13px;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	        text-size-adjust: 100%;
	background-color: floralwhite;
	appearance: none;
	scroll-behavior: smooth;
	
	text-align: justify;       /* テキスト両端揃え                                                 */
	line-break: strict;        /* 厳密な禁則処理をおこなう                                         */
	word-break: normal;        /* 日本語（英語等以外）は表示範囲に合わせて単語の途中でも改行される */
	word-wrap: break-word;     /* 文字数の長い単語がある場合にコンテンツからはみ出さないようにする */
	overflow-wrap: break-word; /* 文字数の長い単語がある場合にコンテンツからはみ出さないようにする */
	
	/* Safari16以上又は AndroidのChromeやFirefoxで、背面にあるコンテンツへのスクロールの伝播や、Pull-to-Refresh機能を抑制する */
	overscroll-behavior-y: none;
	
	/* Safari でクリックされたリンクの背景が灰色になるのを防ぐ */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#root {
	z-index: 6;
}

#of_wrapper {
	z-index: 5;
	position: relative;
	overflow-x: hidden;
}

#upper {
	position: relative;
	z-index: 9;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
}

#middle {
	position: relative;
	z-index: 8;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
}

#lower {
	position: relative;
	z-index: 7;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
}

.contents_0 {
	position: relative;
	z-index: 39;
}

.contents_1 {
	position: relative;
	z-index: 38;
}

.contents_2 {
	position: relative;
	z-index: 37;
}

.contents_3 {
	position: relative;
	z-index: 36;
	min-height: 70vh;
	
	animation: fadeIn .3s forwards;
}

.footer {
	position: relative;
	z-index: 20;
	
	animation: fadeIn 3s forwards;
}

@keyframes fadeIn {

	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@media screen and (max-width: 359px) { /* iPhone5 / 5s / 5c / SE */
	
	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}
	
	/* フォントサイズ */
	.pt8  { font-size:  38.46%; }
	.pt9  { font-size:  46.15%; }
	
	.pt10 { font-size:  53.84%; }
	.pt11 { font-size:  61.53%; }
	.pt12 { font-size:  69.23%; }
	.pt13 { font-size:  76.92%; }
	.pt14 { font-size:  84.61%; }
	.pt15 { font-size:  92.30%; }
	.pt16 { font-size: 100.00%; }
	.pt17 { font-size: 107.69%; }
	.pt18 { font-size: 115.38%; }
	.pt19 { font-size: 123.07%; }
	
	.pt20 { font-size: 130.76%; }
	.pt21 { font-size: 138.46%; }
	.pt22 { font-size: 146.15%; }
	.pt23 { font-size: 153.84%; }
	.pt24 { font-size: 161.53%; }
	.pt25 { font-size: 169.23%; }
	.pt26 { font-size: 176.92%; }
	.pt27 { font-size: 184.61%; }
	.pt28 { font-size: 192.30%; }
	.pt29 { font-size: 200.00%; }
	
	.pt30 { font-size: 207.69%; }
	.pt31 { font-size: 215.38%; }
	.pt32 { font-size: 223.07%; }
	.pt33 { font-size: 230.76%; }
	.pt34 { font-size: 238.46%; }
	.pt35 { font-size: 246.15%; }
	.pt36 { font-size: 253.84%; }
	.pt37 { font-size: 261.53%; }
	.pt38 { font-size: 269.23%; }
	.pt39 { font-size: 276.92%; }
	
	.pt40 { font-size: 284.61%; }
	.pt41 { font-size: 292.30%; }
	.pt42 { font-size: 300.00%; }
	.pt43 { font-size: 307.69%; }
	.pt44 { font-size: 315.38%; }
	.pt45 { font-size: 323.07%; }
	.pt46 { font-size: 330.76%; }
	.pt47 { font-size: 338.46%; }
	.pt48 { font-size: 346.15%; }
	.pt49 { font-size: 353.84%; }
	
	.pt50 { font-size: 361.53%; }
	.pt55 { font-size: 400.00%; }
	.pt60 { font-size: 438.46%; }
	.pt65 { font-size: 476.92%; }
	.pt70 { font-size: 515.38%; }
	.pt75 { font-size: 553.84%; }
	.pt80 { font-size: 592.30%; }
	
}

@media screen and (min-width: 360px) and (max-width: 767px) { /* Galaxy S5 / Android 5.0 */
	
	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}
	
	/* フォントサイズ */
	.pt8  { font-size:  46.15%; }
	.pt9  { font-size:  53.84%; }
	
	.pt10 { font-size:  61.53%; }
	.pt11 { font-size:  69.23%; }
	.pt12 { font-size:  76.92%; }
	.pt13 { font-size:  84.61%; }
	.pt14 { font-size:  92.30%; }
	.pt15 { font-size: 100.00%; }
	.pt16 { font-size: 107.69%; }
	.pt17 { font-size: 115.38%; }
	.pt18 { font-size: 123.07%; }
	.pt19 { font-size: 130.76%; }
	
	.pt20 { font-size: 138.46%; }
	.pt21 { font-size: 146.15%; }
	.pt22 { font-size: 153.84%; }
	.pt23 { font-size: 161.53%; }
	.pt24 { font-size: 169.23%; }
	.pt25 { font-size: 176.92%; }
	.pt26 { font-size: 184.61%; }
	.pt27 { font-size: 192.30%; }
	.pt28 { font-size: 200.00%; }
	.pt29 { font-size: 207.69%; }
	
	.pt30 { font-size: 215.38%; }
	.pt31 { font-size: 223.07%; }
	.pt32 { font-size: 230.76%; }
	.pt33 { font-size: 238.46%; }
	.pt34 { font-size: 246.15%; }
	.pt35 { font-size: 253.84%; }
	.pt36 { font-size: 261.53%; }
	.pt37 { font-size: 269.23%; }
	.pt38 { font-size: 276.92%; }
	.pt39 { font-size: 284.61%; }
	
	.pt40 { font-size: 292.30%; }
	.pt41 { font-size: 300.00%; }
	.pt42 { font-size: 307.69%; }
	.pt43 { font-size: 315.38%; }
	.pt44 { font-size: 323.07%; }
	.pt45 { font-size: 330.76%; }
	.pt46 { font-size: 338.46%; }
	.pt47 { font-size: 346.15%; }
	.pt48 { font-size: 353.84%; }
	.pt49 { font-size: 361.53%; }
	
	.pt50 { font-size: 369.23%; }
	.pt55 { font-size: 407.69%; }
	.pt60 { font-size: 446.15%; }
	.pt65 { font-size: 484.61%; }
	.pt70 { font-size: 523.07%; }
	.pt75 { font-size: 561.53%; }
	.pt80 { font-size: 600.00%; }
	
}

@media screen and (min-width: 768px) and (max-width: 1194px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}
	
	/* フォントサイズ */
	.pt8  { font-size:  53.84%; }
	.pt9  { font-size:  61.53%; }
	
	.pt10 { font-size:  69.23%; }
	.pt11 { font-size:  76.92%; }
	.pt12 { font-size:  84.61%; }
	.pt13 { font-size:  92.30%; }
	.pt14 { font-size: 100.00%; }
	.pt15 { font-size: 107.69%; }
	.pt16 { font-size: 115.38%; }
	.pt17 { font-size: 123.07%; }
	.pt18 { font-size: 130.76%; }
	.pt19 { font-size: 138.46%; }
	
	.pt20 { font-size: 146.15%; }
	.pt21 { font-size: 153.84%; }
	.pt22 { font-size: 161.53%; }
	.pt23 { font-size: 169.23%; }
	.pt24 { font-size: 176.92%; }
	.pt25 { font-size: 184.61%; }
	.pt26 { font-size: 192.30%; }
	.pt27 { font-size: 200.00%; }
	.pt28 { font-size: 207.69%; }
	.pt29 { font-size: 215.38%; }
	
	.pt30 { font-size: 223.07%; }
	.pt31 { font-size: 230.76%; }
	.pt32 { font-size: 238.46%; }
	.pt33 { font-size: 246.15%; }
	.pt34 { font-size: 253.84%; }
	.pt35 { font-size: 261.53%; }
	.pt36 { font-size: 269.23%; }
	.pt37 { font-size: 276.92%; }
	.pt38 { font-size: 284.61%; }
	.pt39 { font-size: 292.30%; }
	
	.pt40 { font-size: 300.00%; }
	.pt41 { font-size: 307.69%; }
	.pt42 { font-size: 315.38%; }
	.pt43 { font-size: 323.07%; }
	.pt44 { font-size: 330.76%; }
	.pt45 { font-size: 338.46%; }
	.pt46 { font-size: 346.15%; }
	.pt47 { font-size: 353.84%; }
	.pt48 { font-size: 361.53%; }
	.pt49 { font-size: 369.23%; }
	
	.pt50 { font-size: 376.92%; }
	.pt55 { font-size: 415.38%; }
	.pt60 { font-size: 453.84%; }
	.pt65 { font-size: 492.30%; }
	.pt70 { font-size: 530.76%; }
	.pt75 { font-size: 569.23%; }
	.pt80 { font-size: 607.69%; }
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.mobile {
		display: none;
	}
	
	.desktop {
		display: block;
	}
	
	/* フォントサイズ */
	.pt8  { font-size:  61.53%; }
	.pt9  { font-size:  69.23%; }
	
	.pt10 { font-size:  76.92%; }
	.pt11 { font-size:  84.61%; }
	.pt12 { font-size:  92.30%; }
	.pt13 { font-size: 100.00%; }
	.pt14 { font-size: 107.69%; }
	.pt15 { font-size: 115.38%; }
	.pt16 { font-size: 123.07%; }
	.pt17 { font-size: 130.76%; }
	.pt18 { font-size: 138.46%; }
	.pt19 { font-size: 146.15%; }
	
	.pt20 { font-size: 153.84%; }
	.pt21 { font-size: 161.53%; }
	.pt22 { font-size: 169.23%; }
	.pt23 { font-size: 176.92%; }
	.pt24 { font-size: 184.61%; }
	.pt25 { font-size: 192.30%; }
	.pt26 { font-size: 200.00%; }
	.pt27 { font-size: 207.69%; }
	.pt28 { font-size: 215.38%; }
	.pt29 { font-size: 223.07%; }
	
	.pt30 { font-size: 230.76%; }
	.pt31 { font-size: 238.46%; }
	.pt32 { font-size: 246.15%; }
	.pt33 { font-size: 253.84%; }
	.pt34 { font-size: 261.53%; }
	.pt35 { font-size: 269.23%; }
	.pt36 { font-size: 276.92%; }
	.pt37 { font-size: 284.61%; }
	.pt38 { font-size: 292.30%; }
	.pt39 { font-size: 300.00%; }
	
	.pt40 { font-size: 307.69%; }
	.pt41 { font-size: 315.38%; }
	.pt42 { font-size: 323.07%; }
	.pt43 { font-size: 330.76%; }
	.pt44 { font-size: 338.46%; }
	.pt45 { font-size: 346.15%; }
	.pt46 { font-size: 353.84%; }
	.pt47 { font-size: 361.53%; }
	.pt48 { font-size: 369.23%; }
	.pt49 { font-size: 376.92%; }
	
	.pt50 { font-size: 384.61%; }
	.pt55 { font-size: 423.07%; }
	.pt60 { font-size: 461.53%; }
	.pt65 { font-size: 500.00%; }
	.pt70 { font-size: 538.46%; }
	.pt75 { font-size: 576.92%; }
	.pt80 { font-size: 615.38%; }
	
}

/* フレックスコンテナ（親要素）------------------------------------------------------------------------------------------------------------------------------------- */
.flexDirectionColumn { /* アイテムを垂直配置 */
	display: flex;
	flex-direction: column;
}

.flexWrap {           /* 折返し */
	flex-wrap: wrap;
}

.flexContainerL {     /* 左寄せ */
	display: flex;
	justify-content: flex-start;
}

.flexContainerC {     /* 水平中央 */
	display: flex;
	justify-content: center;
}

.flexContainerR {     /* 右寄せ */
	display: flex;
	justify-content: flex-end;
}

.flexContainerSA {    /* 水平均等 */
	display: flex;
	justify-content: space-around;
}

.flexContainerSB {    /* 左右寄せ水平均等 */
	display: flex;
	justify-content: space-between;
}

.alignItremsCenter {  /* ★垂直中央★ */
	align-items: center;
}

.alignContentCenter { /* ★複数行を垂直中央★ */
	display: flex;
	align-content: center;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.leftEdge {  /* 左寄せ */
	text-align: left;
}

.centering { /* 中央寄せ */
	text-align: center;
}

.rightEdge { /* 右寄せ */
	text-align: right;
}

.inlineBlock {
	display: inline-block;
}

.floatLeft { /* 回り込み */
	float: left;
}

.cl { /* 解除- */
	clear: left;
}

.cb { /* 解除- */
	clear: both;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.pl_0 { /* ブロック全体を０文字インデント */
	padding-left: 0rem;
}

.pl_1 { /* ブロック全体を１文字インデント */
	padding-left: 1rem;
}

.pl_2 { /* ブロック全体を２文字インデント */
	padding-left: 2rem;
}

.pl_3 { /* ブロック全体を３文字インデント */
	padding-left: 3rem;
}

.pl_4 { /* ブロック全体を４文字インデント */
	padding-left: 4rem;
}

.pl_5 { /* ブロック全体を５文字インデント */
	padding-left: 5rem;
}

.pl_6 { /* ブロック全体を６文字インデント */
	padding-left: 6rem;
}

.pl_7 { /* ブロック全体を７文字インデント */
	padding-left: 7rem;
}

.pl_8 { /* ブロック全体を８文字インデント */
	padding-left: 8rem;
}

.pl_9 { /* ブロック全体を９文字インデント */
	padding-left: 9rem;
}

.pl_10 { /* ブロック全体を１０文字インデント */
	padding-left: 10rem;
}

.pl_11 { /* ブロック全体を１１文字インデント */
	padding-left: 11rem;
}

.pl_12 { /* ブロック全体を１２文字インデント */
	padding-left: 12rem;
}

.pl_13 { /* ブロック全体を１３文字インデント */
	padding-left: 13rem;
}

.pl_14 { /* ブロック全体を１４文字インデント */
	padding-left: 14rem;
}

.pl_15 { /* ブロック全体を１５文字インデント */
	padding-left: 15rem;
}

.pl_16 { /* ブロック全体を１６文字インデント */
	padding-left: 16rem;
}

.pl_17 { /* ブロック全体を１７文字インデント */
	padding-left: 17rem;
}

.pl_18 { /* ブロック全体を１８文字インデント */
	padding-left: 18rem;
}

.pl_19 { /* ブロック全体を１９文字インデント */
	padding-left: 19rem;
}

.pl_20 { /* ブロック全体を２０文字インデント */
	padding-left: 20rem;
}

.pl_21 { /* ブロック全体を２１文字インデント */
	padding-left: 21rem;
}

.pl_22 { /* ブロック全体を２２文字インデント */
	padding-left: 22rem;
}

.pl_23 { /* ブロック全体を２３文字インデント */
	padding-left: 23rem;
}

.pl_24 { /* ブロック全体を２４文字インデント */
	padding-left: 24rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ti_0 { /* １行目のみインデント無 */
	text-indent: 0rem;
}

.ti_1 { /* １行目のみ－１文字インデント（２行目以降を１文字インデントにする） */
	text-indent: -1rem;
}

.ti_2 { /* １行目のみ－２文字インデント（２行目以降を２文字インデントにする） */
	text-indent: -2rem;
}

.ti_3 { /* １行目のみ－３文字インデント（２行目以降を３文字インデントにする） */
	text-indent: -3rem;
}

.ti_4 { /* １行目のみ－４文字インデント（２行目以降を４文字インデントにする） */
	text-indent: -4rem;
}

.ti_5 { /* １行目のみ－５文字インデント（２行目以降を５文字インデントにする） */
	text-indent: -5rem;
}

.ti_6 { /* １行目のみ－６文字インデント（２行目以降を６文字インデントにする） */
	text-indent: -6rem;
}

.ti_7 { /* １行目のみ－７文字インデント（２行目以降を７文字インデントにする） */
	text-indent: -7rem;
}

.ti_8 { /* １行目のみ－８文字インデント（２行目以降を８文字インデントにする） */
	text-indent: -8rem;
}

.ti_9 { /* １行目のみ－９文字インデント（２行目以降を９文字インデントにする） */
	text-indent: -9rem;
}

.ti_10 { /* １行目のみ－１０文字インデント（２行目以降を１０文字インデントにする） */
	text-indent: -10rem;
}

.ti_11 { /* １行目のみ－１１文字インデント（２行目以降を１１文字インデントにする） */
	text-indent: -11rem;
}

.ti_12 { /* １行目のみ－１２文字インデント（２行目以降を１２文字インデントにする） */
	text-indent: -12rem;
}

.ti_13 { /* １行目のみ－１３文字インデント（２行目以降を１３文字インデントにする） */
	text-indent: -13rem;
}

.ti_14 { /* １行目のみ－１４文字インデント（２行目以降を１４文字インデントにする） */
	text-indent: -14rem;
}

.ti_15 { /* １行目のみ－１５文字インデント（２行目以降を１５文字インデントにする） */
	text-indent: -15rem;
}

.ti_16 { /* １行目のみ－１６文字インデント（２行目以降を１６文字インデントにする） */
	text-indent: -16rem;
}

/* サイズ（percent基準）-------------------------------------------------------------------------------------------------------------------------------------------- */
.pw00 {
	margin: 0 auto;
	max-width: 0;
}

.pw10 {
	margin: 0 auto;
	max-width: 10%;
}

.pw20 {
	margin: 0 auto;
	max-width: 20%;
}

.pw30 {
	margin: 0 auto;
	max-width: 30%;
}

.pw40 {
	margin: 0 auto;
	max-width: 40%;
}

.pw50 {
	margin: 0 auto;
	max-width: 50%;
}

.pw60 {
	margin: 0 auto;
	max-width: 60%;
}

.pw70 {
	margin: 0 auto;
	max-width: 70%;
}

.pw80 {
	margin: 0 auto;
	max-width: 80%;
}

.pw90 {
	margin: 0 auto;
	max-width: 90%;
}

.pw100 {
	margin: 0 auto;
	max-width: 100%;
}

/* サイズ（percent基準）-------------------------------------------------------------------------------------------------------------------------------------------- */
.Pw100 {
	width: 100%;
}

/* サイズ（viewport基準）------------------------------------------------------------------------------------------------------------------------------------------- */
.vw00 {
	margin: 0 auto;
	width: 0vw;
}

.vw10 {
	margin: 0 auto;
	width: 10vw;
}

.vw20 {
	margin: 0 auto;
	width: 20vw;
}

.vw30 {
	margin: 0 auto;
	width: 30vw;
}

.vw40 {
	margin: 0 auto;
	width: 40vw;
}

.vw50 {
	margin: 0 auto;
	width: 50vw;
}

.vw60 {
	margin: 0 auto;
	width: 60vw;
}

.vw70 {
	margin: 0 auto;
	width: 70vw;
}

.vw80 {
	margin: 0 auto;
	width: 80vw;
}

.vw90 {
	margin: 0 auto;
	width: 90vw;
}

.vw100 {
	margin: 0 auto;
	width: 100vw;
}

/* サイズ（pixel基準）---------------------------------------------------------------------------------------------------------------------------------------------- */
.ph100 {
	height: 100px;
}

.ph200 {
	height: 200px;
}

.ph300 {
	height: 300px;
}

.ph400 {
	height: 400px;
}

.ph500 {
	height: 500px;
}

/* パディング ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.paddingLR1rem {
	padding: 1rem;
}

.paddingB10 {
	padding-bottom: 10px;
}

.paddingT_2rem {
	padding-top: 2rem;
}

.paddingT_3rem {
	padding-top: 3rem;
}

.paddingT_4rem {
	padding-top: 4rem;
}

.paddingB_3rem {
	padding-bottom: 3rem;
}

.paddingTB_3rem {
	padding: 3rem 0;
}

.paddingTB_5rem {
	padding: 5rem 0;
}

/* スペーサ -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.spacer_A, .spacer_B, .spacer_C, .spacer_D {
	display: flex;
	justify-content: center;
	align-items: center;
}

.spacer_A {
	height: 5vw;
	max-height: 50px;
}

.spacer_B {
	height: 10vw;
	max-height: 100px;
}

.spacer_C {
	height: 20vw;
	max-height: 200px;
}

.spacer_D {
	height: 30vw;
	max-height: 300px;
}

/* コンテンツ基礎 -------------------------------------------------------------------------------------------------------------------------------------------------- */
.presentation_A { /* トップページのプレゼンテーション */
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.contentsHeader {
	display: flex;
	justify-content: center;
	align-items: center;
}
	
.contents {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 359px) { /* iPhone5 / 5s / 5c / SE */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 4rem;
	}
	
	.presentation_A p {
		font-size: 130.76%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 8px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 8px 100px 8px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 70px;
	}
	
	.leftBox {
		flex-basis: 50%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 4%;
	}
	
	.rightBox {
		flex-basis: 46%;
	}
	
}

@media screen and (min-width: 360px) and (max-width: 374px) { /* Galaxy S5 / Android 5.0 */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 5rem;
	}
	
	.presentation_A p {
		font-size: 138.46%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 10px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 10px 100px 10px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 80px;
	}
	
	.leftBox {
		flex-basis: 48%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 4%;
	}
	
	.rightBox {
		flex-basis: 48%;
	}
	
}

@media screen and (min-width: 375px) and (max-width: 389px) { /* iPhone6 / 6s / 7 / 8 / SE Gen2 / X / XS / 11 Pro / 12 mini */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 5rem;
	}
	
	.presentation_A p {
		font-size: 138.46%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 10px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 10px 100px 10px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 80px;
	}
	
	.leftBox {
		flex-basis: 45%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 4%;
	}
	
	.rightBox {
		flex-basis: 51%;
	}
	
}

@media screen and (min-width: 390px) and (max-width: 413px) { /* iPhone12 Pro */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 5.5rem;
	}
	
	.presentation_A p {
		font-size: 138.46%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 10px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 10px 100px 10px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 80px;
	}
	
	.leftBox {
		flex-basis: 44%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 4%;
	}
	
	.rightBox {
		flex-basis: 52%;
	}
	
}

@media screen and (min-width: 414px) and (max-width: 427px) { /* iPhone / 6Plus / 6sPlus / 7Plus / 8Plus / XR / 11 / 11 Pro Max / XS Max */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 6rem;
	}
	
	.presentation_A p {
		font-size: 138.46%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 12px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 12px 100px 12px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 90px;
	}
	
	.leftBox {
		flex-basis: 41%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 56%;
	}
	
}

@media screen and (min-width: 428px) and (max-width: 767px) { /* iPhone12 Pro Max */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 2rem 7rem;
	}
	
	.presentation_A p {
		font-size: 138.46%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 5px;
		padding-left: 14px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		margin: 0 5px 5px 5px;
		padding: 0 14px 100px 14px;
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.contentsHeader {
		height: 90px;
	}
	
	.leftBox {
		flex-basis: 40%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 5%;
	}
	
	.rightBox {
		flex-basis: 55%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 809px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 0;
	}
	
	.presentation_A p {
		font-size: 146.15%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 10px;
		padding-left: 14px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 14px 100px 14px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 10px;
		padding: 0 14px 100px 14px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 130px;
	}
	
	.leftBox {
		flex-basis: 23%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 64%;
	}
	
}

@media screen and (min-width: 810px) and (max-width: 819px) { /* iPad Gen7 */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 10px;
	}
	
	.presentation_A p {
		font-size: 146.15%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 10px;
		padding-left: 18px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 18px 100px 18px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 10px;
		padding: 0 18px 100px 18px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 130px;
	}
	
	.leftBox {
		text-align: right;
		flex-basis: 22%;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 65%;
	}
	
}

@media screen and (min-width: 820px) and (max-width: 833px) { /* iPad Air Gen4 */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 10px;
	}
	
	.presentation_A p {
		font-size: 146.15%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 10px;
		padding-left: 16px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 16px 100px 16px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 10px;
		padding: 0 16px 100px 16px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 130px;
	}
	
	.leftBox {
		flex-basis: 22%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 65%;
	}
	
}

@media screen and (min-width: 834px) and (max-width: 1023px) { /* iPad Air Gen3 / iPad Pro10.5 / iPad Pro11 */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 10px;
	}
	
	.presentation_A p {
		font-size: 146.15%; /* 20pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 10px;
		padding-left: 15px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 15px 100px 15px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 10px;
		padding: 0 15px 100px 15px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 130px;
	}
	
	.leftBox {
		flex-basis: 22%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 65%;
	}
	
}

@media screen and (min-width: 1024px) and (max-width: 1194px) { /* iPad Pro (12.9-inch) */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 10px;
	}
	
	.presentation_A p {
		font-size: 161.53%; /* 23pt */
	}
	
	.breadcrumbsList {
		width: 100%;
		margin-left: 10px;
		padding-left: 22px;
		border: none;
	}
	
	.contentsWrapper {
		width: 100%;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 22px 100px 22px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 100%;
		margin: 10px;
		padding: 0 22px 100px 22px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 140px;
	}
	
	.leftBox {
		flex-basis: 18%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 79%;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.presentation_A { /* トップページのプレゼンテーション */
		width: 100%;
		margin: 0;
		padding: 3rem 0;
	}
	
	.presentation_A p {
		font-size: 161.53%; /* 23pt */
	}
	
	.breadcrumbsList {
		width: 1300px;
		margin-top: 10px;
		padding-left: 20px;
		border: none;
	}
	
	.contentsWrapper {
		width: 1300px;
		min-height: 100vh;
		margin: 0 10px 10px 10px;
		padding: 0 100px 100px 100px;
		background-color: oldlace;
		border: none;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.iframe_contentsWrapper {
		width: 1300px;
		margin: 10px;
		padding: 0 100px 100px 100px;
		background-color: oldlace;
		border: none;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.contentsHeader {
		height: 150px;
	}
	
	.leftBox {
		flex-basis: 18%;
		text-align: right;
	}
	
	.centerBox {
		flex-basis: 3%;
	}
	
	.rightBox {
		flex-basis: 79%;
	}
	
}

/* １行１列で画像を表示 -------------------------------------------------------------------------------------------------------------------------------------------- */
.graphics_1 {
	display: flex;
	justify-content: center;
	align-items: flex-start; /* for Safari */
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_1_child { /* 画像 */
		width: auto;
		max-width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 / desktop */
	
	.graphics_1_child { /* 画像 */
		width: auto;
		height: auto;
		margin-bottom: 10px;
	}
	
}

/* １行２列で画像を表示 -------------------------------------------------------------------------------------------------------------------------------------------- */
.graphics_2 {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* for Safari */
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_2 {
		justify-content: space-around;
	}
	
	.graphics_2_child { /* 画像 */
		width: auto;
		max-width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.graphics_2_child { /* 画像 */
		width: calc(50% - 10px * 1 / 2);
		height: auto;
		margin: 0 10px 10px 0;
	}
	
	.graphics_2_child:nth-child(even) { /* ２列（偶数個目） */
		margin-right: 0;
	}
	
}

/* １行３列で画像を表示 -------------------------------------------------------------------------------------------------------------------------------------------- */
.graphics_3 {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* for Safari */
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_3 {
		justify-content: space-around;
	}
	
	.graphics_3_child { /* 画像 */
		width: auto;
		max-width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.graphics_3_child { /* 画像 */
		width: calc(33.33% - 10px * 2 / 3);
		height: auto;
		margin: 0 10px 10px 0;
	}
	
	.graphics_3_child:nth-child(3n + 1) { /* １列（各行の１個目） */
		margin-right: 10px;
	}
	
	.graphics_3_child:nth-child(3n + 2) { /* ２列（各行の２個目） */
		margin-right: 10px;
	}
	
	.graphics_3_child:nth-child(3n + 3) { /* ３列（各行の３個目） */
		margin-right: 0;
	}
	
}

/* １行１列で画像を表示（リンク付き）------------------------------------------------------------------------------------------------------------------------------- */
.graphics_link1 {
	align-items: flex-start; /* for Safari */
	margin-bottom: 10px;
	text-align: center;
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_link1_child { /* ブロック要素 */
		width: auto;
		max-width: 100%;
		height: auto;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 / desktop */
	
	.graphics_link1 {
		height: auto;
	}
	
	.graphics_link1_child { /* ブロック要素 */
		width: 100%;
		height: auto;
	}
	
}

/* １行２列で画像を表示（リンク付き）------------------------------------------------------------------------------------------------------------------------------- */
.graphics_link2 {
	align-items: flex-start; /* for Safari */
	margin: 10px 10px 10px 10px;
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_link2_child { /* ブロック要素 */
		width: auto;
		max-width: 100%;
		height: auto;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.graphics_link2 {
		width: calc(50% - 10px * 1 / 2);
		height: 100%;
		margin: 0 10px 10px 0;
	}
	
	.graphics_link2:nth-child(even) { /* ２列（偶数個目） */
		margin-right: 0;
	}
	
	.graphics_link2_child { /* ブロック要素 */
		width: 100%;
		height: auto;
	}
	
}

/* １行３列で画像を表示（リンク付き）------------------------------------------------------------------------------------------------------------------------------- */
.graphics_link3 {
	align-items: flex-start; /* for Safari */
	margin-bottom: 10px;
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.graphics_link3_child { /* ブロック要素 */
		width: auto;
		max-width: 100%;
		height: auto;
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 */
	
	.graphics_link3 {
		width: calc(33.33% - 10px * 2 / 3);
		height: auto;
	}
	
	.graphics_link3:nth-child(3n + 1) { /* １列（各行の１個目） */
		margin-right: 10px;
	}
	
	.graphics_link3:nth-child(3n + 2) { /* ２列（各行の２個目） */
		margin-right: 10px;
	}
	
	.graphics_link3:nth-child(3n + 3) { /* ３列（各行の３個目） */
		margin-right: 0;
	}
	
	.graphics_link3_child { /* ブロック要素 */
		width: 100%;
		height: auto;
	}
	
}

/* フレックスボックスでコンテンツを左右交互に表示するためのからくり ------------------------------------------------------------------------------------------------ */
.alternately {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem;
}

.alternately:nth-child(2n+0) {
	background-color: bisque;
}

.alternately:nth-child(2n+0) .figure {
	float: left;
	margin-right: 1rem;
	overflow: hidden;
}

.alternately:nth-child(2n+0) .figure img {
	max-width: 400px;
	margin: 0;
	transition: 1s all;
}

.alternately:nth-child(2n+0) .figure img:hover {
	transform: scale(1.1 ,1.1);
	transition: 1s all;
}

.alternately:nth-child(2n+1) {
	background-color: papayawhip;
}

.alternately:nth-child(2n+1) .figure {
	float: right;
	margin-left: 1rem;
	overflow: hidden;
}

.alternately:nth-child(2n+1) .figure img {
	max-width: 400px;
	margin: 0;
	transition: 1s all;
}

.alternately:nth-child(2n+1) .figure img:hover {
	transform: scale(1.1 ,1.1);
	transition: 1s all;
}

/* 透明なボックス -------------------------------------------------------------------------------------------------------------------------------------------------- */
.section_B {
	line-height: 1.5rem;
	margin: 10px 0;
	padding: .4rem 0 .4rem 1rem;
}

.section_C {
	line-height: 1.5rem;
	margin: 10px 0;
	padding: .4rem 0;
}

/* 左側にカラーアクセントのあるボックス ---------------------------------------------------------------------------------------------------------------------------- */
.section_A {
	margin: 10px 0;
	border-left: solid .7rem sandybrown;
	background: linear-gradient(to left, oldlace 1%, navajowhite);
	border-radius: .5rem;
}

.gtc {
	font-family: fmam;
	font-weight: bold;
	color: brown;
}

@media screen and (max-width: 359px) { /* mobile */
	
	.section_A {
		padding: .12rem 0 0 1rem;
	}
	
	.gtc {
		font-size: 146.15%;
	}
	
}

@media screen and (min-width: 360px) and (max-width: 767px) { /* mobile */
	
	.section_A {
		padding: .16rem 0 0 1rem;
	}
	
	.gtc {
		font-size: 153.84%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1194px) { /* mobile */
	
	.section_A {
		padding: .18rem 0 0 1rem;
	}
	
	.gtc {
		font-size: 161.53%;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.section_A {
		padding: .12rem 0 0 1rem;
	}
	
	.gtc {
		font-size: 200.00%;
	}
	
}

/* インデックス ------------------------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width: 1194px) { /* mobile */
	
	.tableOfContents {
		width: 100%;
		padding: 0 5px 100px 5px;
	}
	
	.tableOfContentsSubhead {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tableOfContentsSubhead .title {
		display: inline-block;
		padding: 20px 0;
	}
	
	#index {
		justify-content: flex-start; /* 左寄せ */
	}
	
	#index ul {
		padding-left: 1rem;
		list-style-type: none;
		border-bottom: dotted darksalmon;
	}
	
	#index ul li {
		display: flex;
		align-items: center;
		line-height: 2rem;
	}
	
	#index ul li .section_B {
		-webkit-transition: .5s;
		        transition: .5s;
	}
	
	#index ul li .section_B:hover {
		background-color: rgba(127, 255, 212, .3);
		box-shadow: 0px 0px 16px 16px rgba(127, 255, 212, .3);
		border-radius: 30px;
	}
	
	.ML-3 {
		margin-left: -3rem;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.tableOfContents {
		width: 100%;
		max-width: 1200px;
		padding: 50px 0;
	}
	
	.tableOfContentsSubhead {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tableOfContentsSubhead .title {
		display: inline-block;
		padding: 50px 0;
	}
	
	#index {
		justify-content: flex-start; /* 左寄せ */
	}
	
	#index ul {
		padding-left: 1rem;
		list-style-type: none;
		border-bottom: dotted darksalmon;
	}
	
	#index ul li {
		display: flex;
		align-items: center;
		line-height: 2rem;
	}
	
	#index ul li .section_B {
		-webkit-transition: .5s;
		        transition: .5s;
	}
	
	#index ul li .section_B:hover {
		background-color: rgba(127, 255, 212, .3);
		box-shadow: 0px 0px 16px 16px rgba(127, 255, 212, .3);
		border-radius: 30px;
	}
	
	.ML-3 {
		margin-left: -3rem;
	}
	
}

@media screen and (max-width: 767px) { /* mobile */
	
	#index ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -0.3px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1279px) { /* mobile */
	
	#index ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -1px;
	}
	
}

@media screen and (min-width: 1280px) { /* desktop */
	
	#index ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -1.3px;
	}
	
}

/* Google Map レスポンシブ対応-------------------------------------------------------------------------------------------------------------------------------------- */
.gmapEffect {
	-webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);
	        transition: all .3s cubic-bezier(.215, .61, .355, 1);
}

.gmapEffect:hover {
	background-color: bisque;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .2);
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.gmapWrapper {
		width: 100%;
		margin: 0 10px 10px 10px;
		padding: 0;
	}
	
	.gmap {
		position: relative;
		width: 100%;
		height: 500px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.gmapIframe { /* iframe をレスポンシブ化する */
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		border: 0;
	}
	
	.gmapConveyance {
		width: 100%;
		padding: 5px;
	}
	
	.googleEarth {
		width: 100%;
		height: auto;
		padding: 10px;
	}
	
	.googleEarthFrame {
		margin: 10px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1194px) { /* iPad */
	
	.gmapWrapper {
		width: 100%;
		margin: 0 10px 10px 10px;
		padding-bottom: 14px;
		background-color: oldlace;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.gmap {
		position: relative;
		width: 90%;
		height: 500px;
		margin: 0 auto;
		overflow: hidden;
	}
	
	.gmapIframe { /* iframe をレスポンシブ化する */
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.gmapMsg {
		position: absolute;
		z-index: 2;
		top: 10px;
		left: 10px;
		display: block;
	}
	
	.gmapConveyance {
		width: 100%;
		padding: 0 30px;
		background-color: oldlace;
	}
	
	.googleEarth {
		width: 100%;
		height: auto;
		padding: 10px;
	}
	
	.googleEarthFrame {
		margin: 10px;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.gmapWrapper {
		width: 100%;
		margin: 0 10px 60px 10px;
		padding: 0 8vw;
		background-color: oldlace;
		border: none;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.gmap {
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding-top: 56.25%; /* アスペクト比を指定する */
		/* 9 / 16 * 100 = 56.25 ( 16:9の場合は56.25% ) */
		/* 3 /  4 * 100 = 75.00 (  4:3の場合は75.00% ) */
		/* padding-top: 56.25%; /* アスペクト比を指定する */
		overflow: hidden;
	}
	
	.gmapIframe { /* iframe をレスポンシブ化する */
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.gmapMsg {
		position: absolute;
		z-index: 2;
		top: 10px;
		left: 10px;
		display: block;
	}
	
	.gmapConveyance {
		width: 100%;;
		background-color: oldlace;
	}
	
	.googleEarth {
		width: 100%;
		height: auto;
		padding: 10px;
	}
	
	.googleEarthFrame {
		margin: 0;
		padding: 0 10px 60px 10px;
	}
	
}

/* サイトマップ２ -------------------------------------------------------------------------------------------------------------------------------------------------- */
.siteMapBox2_Wrapper {
	width: 100%;
}

.siteMapBox2 {
	position: relative;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.siteMapBox3 {
	position: relative;
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 2rem 1rem 0 1rem;
}

.mw100 {
	max-width: 100%;
}

@media screen and (max-width: 767px) {
	
	.siteMapBox2 {
		padding: 7rem 5px 0 5px;
	}
	
}

@media screen and (min-width: 768px) {
	
	.siteMapBox2 {
		padding: 11rem 1rem 0 1rem;
	}
	
}

@media screen and (min-width: 1024px) {
	
	.siteMapBox2 {
		padding: 3rem 1rem 0 1rem;
	}
	
}

@media screen and (min-width: 1366px) {
	
	.siteMapBox2 {
		padding: 4rem 1rem 0 1rem;
	}
	
}

@media screen and (min-width: 1600px) {
	
	.siteMapBox2 {
		padding: 8rem 1rem 0 1rem;
	}
	
}

.star_gradation {
	/* 星のスタイル */
	position: relative;
	width: 100%;      /* 星空の横幅 */
	max-width: 1920px;
	height: 100%;     /* 星空の縦幅 */
	min-height: 60vw;
	background-image: linear-gradient(0deg, transparent 7%, skyblue 23%, steelblue 47%, midnightblue); /* 星空の背景色 */
	overflow: hidden; /* 星が枠外にはみ出すのを防ぐ */
}

.star { /* 星のスタイル */
	position: absolute;
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 3px 3px rgba(black, 0.2); /* 星の影 */
}

@keyframes twinkleStars { /* 星がキラキラ光るアニメーション */
	
	0% {
		opacity: 0;
	}
	
	50% {
		transform: scale(1.2);
		opacity: 1;
	}
	
	100% {
		opacity: 0;
		transform: scale(1);
	}
	
}

.siteMap2 {
	width: 190px;
	margin: 5px;
	padding: 1.3rem 0 1.3rem .8rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, .7);
	background-color: rgba(64, 64, 64, .2);
	border: 1px solid rgba(160, 160, 160, .2);
	border-right-color: rgba(128, 128, 128, .2);
	border-bottom-color: rgba(128, 128, 128, .2);
	border-radius: 12px;
	box-shadow: 0 6px 12px rgba(24, 24, 24, .2);
	
	-webkit-transition: 1s;
	        transition: 1s;
}

.siteMap2:hover {
	background-color: rgba(70, 130, 180, .3);
}

.siteMapSubhead2 {
	display: inline-block;
	padding: 0 0 1rem .7rem;
}

.siteMap2 ul {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
}

.siteMap2 ul li {
	text-align: left;
}

.siteMap2 ul li a, .siteMapSubhead2 {
	line-height: 2.2rem;
	
	-webkit-transition: .5s;
	        transition: .5s;
}

.siteMap2 ul li a::before {
	content: ' ';
	padding-right: .5rem;
}

.siteMap2 ul li a:hover, .siteMapSubhead2:hover {
	color: yellow;
}

.blur_1 {
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.blur_2 {
	z-index: 4;
	width: 100%;
	max-width: 1920px;
	height: 0px;
	box-shadow: 0px 0px 88px 77px moccasin;
	background: linear-gradient(transparent 20%, rgba(255, 228, 181, .6), transparent 80%);
}

.SchoolSepia1920 {
	z-index: 3;
	/* background-size: cover; */
	display: flex;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▼▼▼ ここから下はトップページの設定 ▼▼▼ -------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* スライダ -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.sliderBody {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.sliderBox {
		position: relative;
		width: 100%;
		height: 30vh;
	}
	
	.sliderMessage ul li {
		position: absolute;
		top: 15vh;
		left: 50%;
		transform: translate(-100%, -50%);
		list-style-type: none;
		
		animation-iteration-count: infinite;
		animation-duration: 24s;
	}
	
	.sliderMessage ul li img {
		width: 200%;
	}
	
}

@media screen and (min-width: 768px) { /* iPad 以上 */
	
	.sliderBox {
		position: relative;
		width: 100%;
		height: 40vw;
		max-height: 800px;
	}
	
	.sliderMessage ul li {
		position: absolute;
		top: 20vw;
		left: 50%;
		transform: translate(-50%, -50%);
		list-style-type: none;
		
		animation-iteration-count: infinite;
		animation-duration: 24s;
	}
	
	.sliderMessage ul li img {
		width: 100%;
	}
	
}

.slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slider .sliderImage {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: sliderAnimation;
	animation-iteration-count: infinite;
	animation-duration: 24s;
}

/*
@media screen and (max-width: 1023px) { smartphone
	
	.slider .sliderImage:nth-of-type(1) {
		background-image: url('/teijisei/images/topPage/slid1_M_Phone.jpg');
		animation-delay: -3s;
	}
	
}

@media screen and (min-width: 1024px) { iPad
	
	.slider .sliderImage:nth-of-type(1) {
		background-image: url('/teijisei/images/topPage/slid1_M_Pad.jpg');
		animation-delay: -3s;
	}
	
}

@media screen and (min-width: 1600px) { desktop
	
	.slider .sliderImage:nth-of-type(1) {
		background-image: url('/teijisei/images/topPage/slid1.jpg');
		animation-delay: -3s;
	}
	
}
*/

.slider .sliderImage:nth-of-type(1) {
	background-image: url('/teijisei/images/topPage/slid1.jpg');
	animation-delay: -3s;
}

.slider .sliderImage:nth-of-type(2) {
/*	background-image: url('/teijisei/images/topPage/slid2.jpg');*/
	animation-delay: 5s;
}

.slider .sliderImage:nth-of-type(3) {
/*	background-image: url('/teijisei/images/topPage/slid3.jpg');*/
	animation-delay: 13s;
}

@keyframes sliderAnimation {
	
	0% {
		opacity: 0;
	}
	
	20.00% {
		opacity: 1;
	}
	
	33.3% {
		opacity: 1;
	}
	
	45.83% {
		opacity: 0;
	}
	
	100% {
		opacity: 0;
		transform: scale3d(1.2, 1.2, 0);
	}
	
}

/* スライダのメッセージ -------------------------------------------------------------------------------------------------------------------------------------------- */
.sliderMessage {
	position: relative;
	z-index: 99;
}

.sliderMessage ul li:nth-of-type(1) {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: sliderMessage;
	animation-delay: 0s;
}

.sliderMessage ul li:nth-of-type(2) {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: sliderMessage;
	animation-delay: 9s;
	opacity: 0;
}

.sliderMessage ul li:nth-of-type(3) {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: sliderMessage;
	animation-delay: 11s;
	opacity: 0;
}

@keyframes sliderMessage {
	
	0% {
		opacity: 0;
	}
	
	20.00% {
		opacity: 1;
	}
	
	33.33% {
		opacity: 1;
	}
	
	45.83% {
		opacity: 0;
	}
	
	100% {
		opacity: 0;
	}
	
}
/* ギザギザのエッジ ------------------------------------------------------------------------------------------------------------------------------------------------ */
.notches_Dn { /* 下向きのギザギザ */
	width: 1920px;
	height: 25px;
	background-image: url('/teijisei/images/topPage/notches_Dn.png');
	background-repeat: no-repeat;
	
	transform: translateX(0px) translateY(-1px);
}

.notches_Up { /* 上向きのギザギザ */
	width: 1920px;
	height: 25px;
	background-image: url('/teijisei/images/topPage/notches_Up.png');
	background-repeat: no-repeat;
	
	transform: translateX(0px) translateY(1px);
}

/* パララックス ---------------------------------------------------------------------------------------------------------------------------------------------------- */
.sticky_container { /* 固定したい要素は display: block; 又は display: flex; にすること */
	position: -webkit-fixed;
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.sticky {
	height: 100%;
	background-size: 1920px;
	background-repeat: no-repeat;
	background-position: center center;
}

.sticky_img_A {
	background-image: url('/teijisei/images/topPage/gears.jpg');
}

.sticky_img_B {
	background-image: url('/teijisei/images/topPage/circuitBoard.jpg');
}

/* カルーセル・スライダ -------------------------------------------------------------------------------------------------------------------------------------------- */
.carouselSlider {
	display: flex;
	width: 1000px;
	height: auto;
	margin: 10px 10px 0 10px;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}

.carouselSliderLi {
	min-width: 100%;
}

.carouselSliderLi a img {
	position: relative;
	width: 100%;
	height: auto;
	background-color: black;
}

/* カルーセル・スライダー（リンク付き画像１つ） -------------------------------------------------------------------------------------------------------------------- */
.carouselSliderSingleTime {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: carouselSliderAnimationSingle;
	animation-duration: 3s;
	animation-iteration-count: 999;
}

@keyframes carouselSliderAnimationSingle {
	
	0% {
		opacity: .4;
	}
	
	5% {
		opacity: 1;
	}
	
	95% {
		opacity: 1;
	}
	
	100% {
		opacity: .4;
	}
	
}

/* カルーセル・スライダー（リンク付き画像２つ） -------------------------------------------------------------------------------------------------------------------- */
.carouselSliderDoubleTime {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: carouselSliderAnimationDouble;
	animation-duration: 7.5s;
	animation-iteration-count: 999;
}

@keyframes carouselSliderAnimationDouble {
	
	0%, 40% {
		transform: translate3d(0%, 0, 0);
	}
	
	50%, 90% {
		transform: translate3d(-100%, 0, 0);
	}
	
	100% {
		transform: translate3d(-200%, 0, 0);
	}
	
}

/* カルーセル・スライダー（リンク付き画像３つ） -------------------------------------------------------------------------------------------------------------------- */
.carouselSliderTripleTime {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: carouselSliderAnimationTriple;
	animation-duration: 10s;
	animation-iteration-count: 999;
}

@keyframes carouselSliderAnimationTriple {
	
	0%, 25% {
		transform: translate3d(0%, 0, 0);
	}
	
	33%, 58% {
		transform: translate3d(-100%, 0, 0);
	}
	
	66%, 91% {
		transform: translate3d(-200%, 0, 0);
	}
	
	99%, 100% {
		transform: translate3d(-300%, 0, 0);
	}
	
}

/* カルーセル・スライダー（リンク付き画像４つ） -------------------------------------------------------------------------------------------------------------------- */
.carouselSliderQuadrupleTime {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	animation-name: carouselSliderAnimationQuadruple;
	animation-duration: 12.5s;
	animation-iteration-count: 999;
}

@keyframes carouselSliderAnimationQuadruple {
	
	0%, 20% {
		transform: translate3d(0%, 0, 0);
	}
	
	25%, 45% {
		transform: translate3d(-100%, 0, 0);
	}
	
	50%, 70% {
		transform: translate3d(-200%, 0, 0);
	}
	
	75%, 95% {
		transform: translate3d(-300%, 0, 0);
	}
	
	100% {
		transform: translate3d(-400%, 0, 0);
	}
	
}

/* タイトルバー（オレンジからブルーへのグラデーション） ------------------------------------------------------------------------------------------------------------ */
.titleBar {
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin: 0 5vw 2rem 5vw;
	width: 100%;
	height: 1vw;
	max-height: 8px;
	background: linear-gradient(90deg, coral, blue);
	border-radius: 1rem;
}

.titleBarImage {
	z-index: 1;
	display: flex;
	justify-content: center;
	
	min-width: 70vw;
	height: 80px;
	margin: 0 5vw -2rem 5vw;
	background-image: url('/teijisei/images/topPage/fukkouteijiseinomiryoku.png'); /* タイトルバーの画像（福工定時制の魅力） */
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
}

@media screen and (max-width: 743px) { /* mobile */
	
	.titleBarImage {
		margin: 0 5vw -2rem 5vw;
	}
}

.titleBarImageYuraYuraAdd {
	opacity: 1;
	
	animation: titleBarImageYuraYura 3s infinite linear both;
}

@-webkit-keyframes titleBarImageYuraYura {
	
	0% {
		transform: rotate(0deg);
	}
	
	23% {
		transform: rotate(-6deg);
	}
	
	27% {
		transform: rotate(-6deg);
	}
	
	50% {
		transform: rotate(0deg);
	}
	
	73% {
		transform: rotate(6deg);
	}
	
	77% {
		transform: rotate(6deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}

@keyframes titleBarImageYuraYura {
	
	0% {
		transform: rotate(0deg);
	}
	
	23% {
		transform: rotate(-6deg);
	}
	
	27% {
		transform: rotate(-6deg);
	}
	
	50% {
		transform: rotate(0deg);
	}
	
	73% {
		transform: rotate(6deg);
	}
	
	77% {
		transform: rotate(6deg);
	}
	
	100% {
		transform: rotate(0deg);
	}
}

/* トップページの新着情報 ------------------------------------------------------------------------------------------------------------------------------------------ */
.topicsAndInformationsTableBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#topicsAndInformationsTable {
	margin: 20px 10px;
	border-collapse: collapse;
}

.tableHeader {
	line-height: 2rem;
	padding: .1rem 1rem;
	letter-spacing: .5rem;
	background-color: tomato;
	border-radius: 10px 10px 0 0;
}

.tableFooter {
	width: 1000px;
	padding: .1rem 1rem;
	line-height: 2rem;
	letter-spacing: .5rem;
	text-align: right;
	background-color: cadetblue;
	border-radius:  0 0 10px 10px;
}

#topicsAndInformationsTable tr {
	background-color: lightcyan;
	border-bottom: 1px solid darkolivegreen;
	
	-webkit-transition: .3s;
	        transition: .3s;
}

#topicsAndInformationsTable tr:last-child {
	border: none;
}

#topicsAndInformationsTable tr:nth-child(even) {
	background-color: honeydew;
}

#topicsAndInformationsTable tr.topicsAndInformationsList:hover {
	background-color: palegreen;
}

#topicsAndInformationsTable tr.topicsAndInformationsList:hover .green, #topicsAndInformationsTable tr.topicsAndInformationsList:hover .red {
	background-image: linear-gradient(65deg, rgb(255, 0, 0) 0%, rgb(255, 165, 0) 100%);
	transform: scale(1.1);
}

#topicsAndInformationsTable tr .td_1 {
	width: 190px;
	padding: .6rem .5rem 0 1rem;
}

#topicsAndInformationsTable tr .td_2 {
	width: 80px;
	text-align: center;
}

#topicsAndInformationsTable tr .td_3 {
	width: 730px;
	padding: .7rem .6rem .5rem .6rem;
}

.green {
	position: relative;
	top: -1px;
	display: inline-block;
	line-height: 1rem;
	text-decoration: none;
	background-image: linear-gradient(65deg, rgb(46, 139, 87) 0%, rgb(107, 142, 35) 100%);
	-webkit-transition: .4s;
	        transition: .4s;
}

.red {
	position: relative;
	top: -1px;
	display: inline-block;
	line-height: 1rem;
	text-decoration: none;
	background-image: linear-gradient(65deg, rgb(255, 64, 0) 0%, rgb(250, 140, 0) 100%);
	-webkit-transition: .4s;
	        transition: .4s;
}

/* トップページのカード共通設定 ------------------------------------------------------------------------------------------------------------------------------------ */
.cols {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.card_container {
	position: relative;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.front, .back {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: smooth;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-color: floralwhite;
	border-radius: 10px;
	box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .3);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	-webkit-transition: transform .8s cubic-bezier(.5, .3, .3, 1.3);
	        transition: transform .8s cubic-bezier(.5, .3, .3, 1.3);
}

.front {
	background-size: contain;
}

.front::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	content: '';
	background-color: lightcyan;
	border-radius: 10px;
	opacity: .1;
}

.card_container:hover .front, .card_container:hover .back {
	-webkit-transition: transform .8s cubic-bezier(.5, .3, .3, 1.3);
	        transition: transform .8s cubic-bezier(.5, .3, .3, 1.3);
}

.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-size: cover;
	/*background: linear-gradient(45deg, royalblue 0%, deepskyblue 100%);*/
}

.inner {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.front .inner p {
	position: absolute;
	height: 2rem;
	line-height: 2rem;
	font-weight: bold;
}

.card_container .back {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.card_container .front {
	-webkit-transform: rotateY(0deg);
	        transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.card_container:hover .back {
	-webkit-transform: rotateY(0deg);
	        transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.card_container:hover .front {
	-webkit-transform: rotateY(-180deg);
	        transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.back .inner {
	animation: changeColor .5s linear infinite;
}

@keyframes changeColor {
	
	0% {
		border-color: lime;
	}
	
	25% {
		border-color: yellow;
	}
	
	50% {
		border-color: magenta;
	}
	
	75% {
		border-color: yellow;
	}
	
}

/* トップページのカード個別設定 ------------------------------------------------------------------------------------------------------------------------------------ */
.back .inner p::after {
	position: absolute;
	top: 80%;
	left: 50%;
	content: 'Click to Open';
	text-align: center;
	color: yellow;
	background-color: lime;
	
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

@media screen and (max-width: 767px) { /* smartphone */
	
	.card_contents_wrapper {
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
		padding: 0 10px;
	}
	
	.col {
		width: calc(var(--cellW1S));
		margin-bottom: 16px; /* １列 */
		cursor: pointer;
	}
	
	.front, .back {
		height: calc(var(--cellH1AS));
	}
	
	.inner {
		height: calc(var(--cellH1BS));
		
		-webkit-transform: translate3d(0, -50%, 100px) scale3d(.93, 1, 1);
		        transform: translate3d(0, -50%, 100px) scale3d(.93, 1, 1);
	}
	
	.front .inner p {
		top: 3rem;
		font-size: 253.84%; /* pt36 */ 
	}
	
	.back .inner {
		border: solid 2px aqua;
		animation: changeColor 1s linear infinite;
	}
	
	.back .inner p {
		padding: 0 1rem;
		min-height: 4rem;
		line-height: 2rem;
		text-shadow: 0px 0px 2px black;
	}
	
	.back .inner p::after {
		width: 13rem;
		height: 2px;
	}
	
	.card_contents_font {
		font-family: fmam;
		font-size: 115.38%;
		color: white;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1023px) { /* tablet */
	
	.card_contents_wrapper {
		width: 100%;
		margin: 0 auto;
		margin: 40px 0 10px 0;
		padding: 0 20px;
	}
	
	.col {
		width: calc(var(--cellW2768));
		margin: 0px 20px 20px 0px;
		cursor: pointer;
	}
	
	.col:nth-child(even) { /* ２列（偶数個目）*/
		margin-right: 0px;
	}
	
	.front, .back {
		height: calc(var(--cellH2A768));
	}
	
	.inner {
		height: calc(var(--cellH2B768));
		
		-webkit-transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
		        transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
	}
	
	.front .inner p {
		top: 2rem;
		font-size: 223.07%; /* pt30 */ 
	}
	
	.back .inner {
		border: solid 4px aqua;
		animation: changeColor 1s linear infinite;
	}
	
	.back .inner p {
		padding: 0 2rem;
		min-height: 4rem;
		line-height: 2rem;
		text-shadow: 0px 0px 2px black;
	}
	
	.back .inner p::after {
		width: 13rem;
		height: 2px;
	}
	
	.card_contents_font {
		font-family: fmam;
		font-size: 115.38%;
		color: white;
	}
	
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	
	.card_contents_wrapper {
		width: 100%;
		margin: 0 auto;
		margin: 50px 0 20px 0;
		padding: 0 60px;
	}
	
	.col {
		width: calc(var(--cellW21024));
		margin: 0px 30px 30px 0px;
		cursor: pointer;
	}
	
	.col:nth-child(even) { /* ２列（偶数個目）*/
		margin-right: 0px;
	}
	
	.front, .back {
		height: calc(var(--cellH2A1024));
	}
	
	.inner {
		height: calc(var(--cellH2B1024));
		
		-webkit-transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
		        transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
	}
	
	.front .inner p {
		top: 4rem;
		font-size: 292.30%; /* pt38 */ 
	}
	
	.back .inner {
		border: solid 4px aqua;
		animation: changeColor 1s linear infinite;
	}
	
	.back .inner p {
		padding: 0 4rem;
		min-height: 4rem;
		line-height: 2rem;
		text-shadow: 0px 0px 2px black;
	}
	
	.back .inner p::after {
		width: 13rem;
		height: 2px;
	}
	
	.card_contents_font {
		font-family: fmam;
		font-size: 123.07%;
		color: white;
	}
	
}

@media screen and (min-width: 1280px) and (max-width: 1599px) {
	
	.card_contents_wrapper {
		width: 100%;
		margin: 0 auto;
		margin: 50px 0 20px 0;
		padding: 0 75px;
	}
	
	.col {
		width: calc(var(--cellW31280));
		margin: 0px 30px 30px 0px;
		cursor: pointer;
	}
	
	.col:nth-child(3n + 3) { /* ３列（各行の３個目）*/
		margin-right: 0px;
	}
	
	.front, .back {
		height: calc(var(--cellH3A1280));
	}
	
	.inner {
		height: calc(var(--cellH3B1280));
		
		-webkit-transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
		        transform: translate3d(0, -50%, 100px) scale3d(.95, 1.03, 1);
	}
	
	.front .inner p {
		top: 3rem;
		font-size: 269.23%; /* pt35 */ 
	}
	
	.back .inner {
		border: solid 4px aqua;
		animation: changeColor 1s linear infinite;
	}
	
	.back .inner p {
		padding: 0 3rem;
		min-height: 4rem;
		line-height: 2rem;
		text-shadow: 0px 0px 2px black;
	}
	
	.back .inner p::after {
		width: 15rem;
		height: 2px;
	}
	
	.card_contents_font {
		font-family: fmam;
		font-size: 123.07%;
		color: white;
	}
	
}

@media screen and (min-width: 1600px) {
	
	.card_contents_wrapper {
		width: 100%;
		margin: 0 auto;
		margin: 50px 0 20px 0;
		padding: 0 120px;
	}
	
	.col {
		width: calc(var(--cellW31600));
		margin: 0px 30px 30px 0px;
		cursor: pointer;
	}
	
	.col:nth-child(3n + 3) { /* ３列（各行の３個目）*/
		margin-right: 0px;
	}
	
	.front, .back {
		height: calc(var(--cellH3A1600));
	}
	
	.inner {
		height: calc(var(--cellH3B1600));
		
		-webkit-transform: translate3d(0, -50%, 100px) scale3d(.95, 1.02, 1);
		        transform: translate3d(0, -50%, 100px) scale3d(.95, 1.02, 1);
	}
	
	.front .inner p {
		top: 3.8rem;
		font-size: 307.69%; /* pt40 */ 
	}
	
	.back .inner {
		border: solid 5px aqua;
		animation: changeColor 1s linear infinite;
	}
	
	.back .inner p {
		padding: 0 4rem;
		min-height: 4rem;
		line-height: 2rem;
		text-shadow: 0px 0px 2px black;
	}
	
	.back .inner p::after {
		width: 15rem;
		height: 2px;
	}
	
	.card_contents_font {
		font-family: fmam;
		font-size: 138.46%;
		color: white;
	}
	
}

/* トップページの福工定時制の魅力 ---------------------------------------------------------------------------------------------------------------------------------- */
#charm {
	flex-basis: 770px;           /* フレックスアイテム幅 */
	justify-content: flex-start; /* 左寄せ */
}

#charm ul {
	list-style-type: none;
	border-bottom: dotted darksalmon;
}

#charm ul li {
	position: relative;
	padding: 0;
}

#charm ul li span {
	display: inline-block;
	line-height: 3rem;
	
	-webkit-transition: .5s;
	        transition: .5s;
}

#charm ul li span:hover {
	background-color: rgba(127, 255, 212, .3);
	box-shadow: 0px 0px 24px 12px rgba(127, 255, 212, .3);
	border-radius: 30px;
}

@media screen and (max-width: 767px) { /* mobile */
	
	#charm ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -2px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1279px) { /* mobile */
	
	#charm ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -3px;
	}
	
}

@media screen and (min-width: 1280px) { /* desktop */
	
	#charm ul li i.iconTop { /* Font Awesome アイコンのズレを修正 */
		position: relative;
		top: -2px;
	}
	
}

/* 波紋 ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.fiToPoint {
	display: inline-block;
	
	animation-name: fadeinToPoint;
	animation-duration: 1.3s;
}

@keyframes fadeinToPoint {
	
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
	
}

.inner {
	display: flex;
	justify-content: center;
}

.point {
	display: block;
	position: relative;
	margin: 0 20px;
	background-color: floralwhite;
	border-radius: 50%;
}

.point::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	
	animation: ripple 1.7s linear infinite;
}

@keyframes ripple {
	
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: rgba(0, 255, 255, .2);
	}
	
	100% {
		transform: translate(-50%, -50%) scale(9, 9);
		background-color: rgba(0, 255, 255, 0);
	}
}

/* トップページのスクールガイド ------------------------------------------------------------------------------------------------------------------------------------ */
.linkImages_wrapper_A {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}

.linkImage_A {
	position: relative;
}

.linkImage_A img {
	min-width: 300px;
	max-width: 95vw;
	padding: 5px;
}

.linkImage_A .caption { /* クリックでスクールガイドを表示できます */
	padding-top: 31%;
	font-family: fmam; font-size: 200.00%; color: rgb(238, 238, 238); /* 26 point */
	text-align: center;
}

.linkImage_A .Mask_A { /* ぼかし縦 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(31, 20, 11, .3);
	
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	-webkit-transform: rotateX(-180deg);
	        transform: rotateX(-180deg);
	-webkit-transition: all .5s ease;
	        transition: all .5s ease;
	opacity: 0;
}

.linkImage_A:hover .Mask_A {
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 1;
	
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* 工業の専門高校で夢を掴め！ -------------------------------------------------------------------------------------------------------------------------------------- */
.msg {
	max-width: 96vw;
}

/* トップページの学科紹介 ------------------------------------------------------------------------------------------------------------------------------------------ */
.course_wrapper {
	display: flex;
	justify-content: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.course {
	z-index: -1;
	margin: 0 auto;
	border: 5px solid rgba(160, 160, 160, .5);
	border-radius: 30px;
	box-shadow: 0 5px 20px rgba(24, 24, 24, .5);
}

.courseBGC_M {
	background-color: rgba(47, 79, 79, .8);
}

.courseBGC_E {
	background-color: rgba(64, 108, 160, .8);
}

@media screen and (max-width: 359px) { /* iPhone5 / 5s / 5c / SE */
	
	.course_wrapper {
		padding: 20px 10px;
	}
	
	.course {
		padding: 16px;
	}
	
	.img_00 {
		max-width: 151px;
		margin: 0 17px 0 0;
	}
	
}

@media screen and (min-width: 360px) and (max-width: 767px) { /* Galaxy S5 / Android 5.0 / iPhone6 / 6s / 7 / 8 / SE Gen2 / X / XS / 11 Pro / 12 mini */
	
	.course_wrapper {
		padding: 30px 10px;
	}
	
	.course {
		padding: 18px;
	}
	
	.img_00 {
		max-width: 160px;
		margin: 0 17px 0 0;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1023px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 / >iPad Air Gen3 / iPad Pro10.5 / iPad Pro11 */
	
	.course_wrapper {
		padding: 20px 40px;
	}
	
	.course {
		padding: 40px 50px;
		line-height: 1.8rem;
	}
	
	.img_00 {
		max-width: 178px;
		margin: 0 17px 0 0;
	}
	
}

@media screen and (min-width: 1024px) and (max-width: 1194px) { /* iPad Pro (12.9-inch) */
	
	.course_wrapper {
		padding: 30px 60px;
	}
	
	.course {
		padding: 50px 70px;
		line-height: 2rem;
	}
	
	.img_00 {
		max-width: 250px;
		margin: 0 22px 0 0;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.course_wrapper {
		padding: 40px 90px;
	}
	
	.course {
		max-width: 1200px;
		padding: 50px 70px;
		line-height: 2rem;
	}
	
	.img_00 {
		max-width: 220px;
		margin: 0 22px 0 0;
	}
	
}

/* ＱＲコード ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.qrCode_wrapper {
	width: 220px;
	margin: 10px;
}

/* 外部リンク ------------------------------------------------------------------------------------------------------------------------------------------------------ */
.externalLink {
	display: flex;
	margin: 5px;
}

/* 今月の予定コンテンツ -------------------------------------------------------------------------------------------------------------------------------------------- */
#schedule_switch {
	display: none;
}

#schedule_switch:checked ~ #scheduleContents {
	transform: translate3d(-50%, 0, 0);
	opacity: 1;
}

#scheduleContents {
	position: -webkit-fixed;
	position: fixed;
	z-index: 100;
	opacity: 0;
	
	-webkit-transition: 1s cubic-bezier(.8, -0.3, .2, 1.2);
	        transition: 1s cubic-bezier(.8, -0.3, .2, 1.2);
}

#scheduleContents:hover {
	cursor: pointer;
}

@media screen and (max-width: 767px) { /* smartphone */
	
	#scheduleContents {
		top: 0;
		left: 50%;
		width: 99vw;
		height: 100%;
		margin: auto;
		padding: 1vw;
		overflow: scroll;
		
		-webkit-transform: translate3d(-200%, 0%, 0);
		        transform: translate3d(-200%, 0%, 0);
	}
	
	#mobileSchedule_table {
		width: 100%;
		background-color: darkslategray;
	}
	
	#mobileSchedule_table, #mobileSchedule_table tr td {
		line-height: 2rem;
		border-collapse: collapse;
		border: 1px solid darkgray;
	}
	 
	#mobileSchedule_table tr td:nth-child(1) {
		text-align: center;
	}
	
	#mobileSchedule_table tr td:nth-child(2) {
		text-align: center;
	}
	
	#mobileSchedule_table tr td:nth-child(3) {
		padding: 0 .5rem;
		text-align: left;
	}
	
	.bg_ble {
		background-color: steelblue;
	}
	
	.bg_grn {
		background-color: seagreen;
	}
	
	.bg_org {
		background-color: orangered;
	}
	
	.bg_red {
		background-color: firebrick;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1365px) { /* iPad */
	
	#scheduleContents {
		top: 0;
		left: 50%;
		width: 91vw;
		height: 100%;
		margin: auto;
		padding-top: 2rem;
		
		-webkit-transform: translate3d(-50%, -110%, 0);
	            transform: translate3d(-50%, -110%, 0);
	}
	
}

@media screen and (min-width: 1366px) { /* desktop */
	
	#scheduleContents {
		top: 0;
		left: 50%;
		width: 91vw;
		max-width: 1500px;
		margin: auto;
		padding-top: 0;
		
		-webkit-transform: translate3d(-50%, -110%, 0);
	            transform: translate3d(-50%, -110%, 0);
	}
	
}

/* 今月の予定コンテンツ共通設定 ------------------------------------------------------------------------------------------------------------------------------------ */
.schedule table {
	border-spacing: 0;
	border-collapse: collapse;
	background-color: darkslategray;
}

.schedule table tr td.weeks {
	height: 1rem;
	line-height: 1rem;
	text-align: center;
	vertical-align: middle;
}

.schedule table tr td {
	border: 1px solid #ddd;
	width: calc(91vw / 7);
	height: calc(99vh / 7);
	padding: 3px;
	text-align: center;
	vertical-align: top;
	color: white;
}

.schedule table tr td span.top {
	display: inline-block;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	padding: 0;
	background-color: steelblue;
}

.schedule table tr td:first-child span.top {
	display: inline-block;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	padding: 0;
	background-color: orangered;
}

.schedule table tr td:last-child span.top {
	display: inline-block;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	padding: 0;
	background-color: mediumseagreen;
}

.schedule table tr td span.disabled {
	display: inline-block;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	padding: 0;
	color: black;
}

.nationalHoliday {
	display: inline-block;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
	padding: 0;
	background-color: firebrick;
}

.scheduleCellText {
	display: inline-block;
	width: 100%;
	min-height: 3rem;
	text-align: left;
	color: white;
}

@media screen and (min-width: 768px) and (min-height: 900px) { /* iPad */
	
	#scheduleContents {
		width: 91vw;
	}
	
	.schedule table tr td {
		width: calc(91vw / 7);
	}
	
	.schedule table tr td span.top, .schedule table tr td:first-child span.top, .schedule table tr td:last-child span.top, .schedule table tr td span.sunday, .schedule table tr td span.nationalHoliday, .schedule table tr td span.disabled {
		font-size: 146.15%;
	}
	
	.scheduleCellText {
		min-height: 5rem;
		font-size: 84.61%;
	}
	
}

@media screen and (min-width: 1366px) and (max-width: 1599px) and (min-height: 768px) { /* desktop */
	
	.schedule table tr td span.top, .schedule table tr td:first-child span.top, .schedule table tr td:last-child span.top, .schedule table tr td span.sunday, .schedule table tr td span.nationalHoliday, .schedule table tr td span.disabled {
		font-size: 153.84%;
	}
	
	.scheduleCellText {
		min-height: 4rem;
	}
	
}

@media screen and (min-width: 1366px) and (max-width: 1599px) and (min-height: 900px) { /* desktop */
	
	.scheduleCellText {
		min-height: 5rem;
	}
	
}

@media screen and (min-width: 1600px) and (min-height: 900px) { /* desktop */
	
	.schedule table tr td span.top, .schedule table tr td:first-child span.top, .schedule table tr td:last-child span.top, .schedule table tr td span.sunday, .schedule table tr td span.nationalHoliday, .schedule table tr td span.disabled {
		font-size: 161.53%;
	}
	
	.scheduleCellText {
		min-height: 5rem;
		font-size: 115.38%;
	}
	
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▲▲▲ ここから上はトップページの設定 ▲▲▲ -------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* ヘッダ ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.header {
	z-index: 50;
	width: 100%;
}

.header_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.headerLogo {
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	
	-webkit-transition: all .1s;
	        transition: all .1s;
}

.headerLogoImage_A {
	display: block;
	max-width: 100%;
	height: auto;
	
	-webkit-transform: rotateY(0deg);
	-webkit-transition: .5s;
	        transform: rotateY(0deg);
	        transition: .5s;
}

.headerLogo:hover .headerLogoImage_A {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

.headerLogoImage_B {
	display: block;
	max-width: 100%;
	height: auto;
}

.mobileNavigationIconBox {
	width: 80px;
}

@media screen and (max-width: 743px) { /* mobile */
	
	/* モバイル用ヘッダスペーサ ---------------------------------------------------------------------------------------------------------------------------------------- */
	.mobileHeaderSpacer {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
	}
	
	.header {
		position: -webkit-fixed;
		position: fixed;
	}
	
	.headerLogoImage_A {
		padding: 3px 0;
	}
	
	.headerLogoImage_B {
		padding: 3px 0 ;
	}
	
}

@media screen and (min-width: 744px) and (max-width: 1194px) { /* mobile (iPad Mini Gen6) */
	
	/* モバイル用ヘッダスペーサ ---------------------------------------------------------------------------------------------------------------------------------------- */
	.mobileHeaderSpacer {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80px;
	}
	
	.header {
		position: -webkit-fixed;
		position: fixed;
	}
	
	.headerLogoImage_A {
		padding: 0px;
	}
	
	.headerLogoImage_B {
		padding: 0px;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.header {
		position: relative;
	}
	
	.headerLogo {
		display: flex;
		align-items: center;
		padding: 0 0 0 1rem;
		
		-webkit-transition: all .1s;
		        transition: all .1s;
	}
	
}

/* フッタサイトマップ ---------------------------------------------------------------------------------------------------------------------------------------------- */
#siteMapBox {
	padding: 0 0 20px 0;
	background-color: rgb(80, 80, 88);
}

#siteMap {
	display: flex;
	justify-content: center;
}

.siteMapSubhead {
	position: relative;
	margin: 20px 5px;
	padding: 10px 5px 20px 5px;
	text-align: left;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	border-radius: 4px;
	background-color: darkslategray;
}

#siteMap ul {
	width: 180px;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

#siteMap ul li {
	position: relative;
	padding: 0 0 0 1.9rem;
	text-align: left;
}

#siteMap ul li::before {
	position: absolute;
	top: .65rem;
	left: .6rem;
	width: .56rem;
	height: .6rem;
	content: '';
	background-color: lightsalmon;
}

#siteMap ul li a, .siteMapSubhead a {
	line-height: 30px;
	
	-webkit-transition: .4s;
	        transition: .4s;
}

#siteMap ul li a:hover, .siteMapSubhead a:hover {
	color: yellow;
}

/* 著作権表示 ------------------------------------------------------------------------------------------------------------------------------------------------------ */
#copyright_wrapper, #footerText {
	width: 100%;
	text-align: center;
	background-color: rgb(80, 80, 88);
}

.contactWrap {
	padding-bottom: 1rem;
}

@media screen and (max-width: 1024px) { /* mobile */
	
	#copyright_wrapper, #footerText {
		padding: 3rem 5px;
	}
	
	.contact_TF {
		display: inline-block;
		margin: 0 1rem;
		font-size: 107.69%;;
		color: white;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	#copyright_wrapper {
		margin: 0 auto;
		padding: 3rem 0;
	}
	
	.contact_TF {
		display: inline-block;
		margin: 0 1rem;
		font-size: 107.69%;;
		color: white;
	}
	
}

/* デスクトップアコーディオンコンテンツ ---------------------------------------------------------------------------------------------------------------------------- */
#desktopAccordionMenu_switch {
	display: none;
}

#desktopAccordionMenuContents {
	position: -webkit-fixed;
	position: fixed;
	z-index: 80;
	top: 0;
	left: 50%;
	width: 72%;
	min-width: 1180px;
	max-width: 72%;
	height: 100%;
	margin: 0 auto;
	padding-top: 20px;
	overflow: auto;
	
	-webkit-transform: translate3d(-50%, -100%, 0);
	        transform: translate3d(-50%, -100%, 0);
	-webkit-transition: 1s cubic-bezier(.8, -0.3, .2, 1.2);
	        transition: 1s cubic-bezier(.8, -0.3, .2, 1.2);
}

#desktopAccordionMenu_switch:checked ~ #desktopAccordionMenuContents {
	transform: translate3d(-50%, 0, 0);
}

#desktopAccordionMenuSubhead {
	display: flex;
	justify-content: center;
	align-items: center;
}

.desktopAccordionMenuSiteMap {
	display: flex;
	flex-wrap: wrap;
}

.desktopAccordionMenuSiteMapList {
	position: relative;
	margin: 0;
	padding: 20px 0 0 0;
	list-style-type: none;
}

#desktopAccordionMenuSubhead {
	height: 4rem;
	font-family: fmam;
	font-size: 200.00%; /* 26pt */
	color: rgb(255, 255, 255);
	text-shadow: 2px 2px 3px rgb(0, 0, 0);
}

.desktopAccordionMenuSiteMapListSubhead_fs {
	font-size: 138.46%; /* 18pt */
}

.desktopAccordionMenuSiteMapListItem_fs {
	font-size: 76.92%; /* 10pt */
}

.desktopAccordionMenuSiteMapListSubhead {
	font-family: fmam;
	font-size: 138.46%; /* 18pt */
	color: cornsilk;
	text-shadow: 2px 2px 3px rgb(0, 0, 0);
}

#desktopAccordionMenu div.desktopAccordionMenuCategory {
	width: calc(20% - 54px / 5);
	margin: 0 0 9px 9px;
	padding: 40px 10px 30px 20px;
	border: 2px solid thistle;
	background-color: darkslategray;
	border-radius: 20px;
}

.desktopAccordionMenuSiteMapList li {
	line-height: 2rem;
	padding-left: 10px;
	font-family: fmam;
	font-size: 123.07%; /* 16pt */
	color: rgb(255, 255, 255);
	text-shadow: 2px 2px 3px rgb(0, 0, 0);
}

.desktopAccordionMenuSiteMapListSubhead, .desktopAccordionMenuSiteMapList li a {
	-webkit-transition: .6s;
	        transition: .6s;
}

.desktopAccordionMenuSiteMapList li a::before {
	content: ' ';
	padding-right: .2rem;
}

.desktopAccordionMenuSiteMapListSubhead:hover , .desktopAccordionMenuSiteMapList li a:hover {
	color: yellow;
}

/* デスクトップドロップダウンメニュー ------------------------------------------------------------------------------------------------------------------------------ */
#desktop_dropdownMenu_flexContainer {
	position: relative; /* 親要素の position は初期値の static 以外（relative または absolute または fixed） */
	display: flex;
	justify-content: center;
	background: rgb(0, 90, 170);
}

#desktop_dropdownMenu {
	display: flex;
	justify-content: center;
	width: 926px;
	height: 42px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: rgb(0, 90, 170);
}

#desktop_dropdownMenu li {
	position: relative;
	width: 184px;
	text-align: center;
	border-left: 1px solid rgb(0, 0, 0);
}

#desktop_dropdownMenu li a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 42px;
	padding-top: 2px;
	font-family: fmam;
	font-size: 115.38%;
	color: rgb(255, 255, 255);
	
	-webkit-transition: .6s;
	        transition: .6s;
}

#desktop_dropdownMenu li:hover > a {
	background: rgb(30, 144, 255);
}

#desktop_dropdownMenu li:last-child {
	border-right: 1px solid rgb(0, 0, 0);
}

#desktop_dropdownMenu li ul {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#desktop_dropdownMenu li ul li {
	height: 0;
	overflow: hidden;
	
	-webkit-transition: .3s;
	        transition: .3s;
}

#desktop_dropdownMenu li ul li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 184px;
	height: 42px;
	margin: 0;
	padding: 2px 0 0 20px;
	text-align: left;
	background: rgba(64, 64, 64, .8);
}

#desktop_dropdownMenu li:hover ul li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 184px;
	height: 42px;
	border-top: 1px solid rgb(0, 0, 0);
	border-left: none;
	border-right: none;
	overflow: hidden;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▼ フォーム ------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.superimposition {
	width: 100%;
}

.superimposition iframe { /* iframe をレスポンシブ化する */
	width: 100%;
	height: 100%;
	border: none;
}

.messageBox {
	padding: 0 10px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▲ フォーム ------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Ｑ＆Ａ ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.hiddenBox label {
	width: 100%;
}

.hiddenBox label div input {
	display: none;
}

.hiddenBox label:hover {
	cursor: pointer;
}

.hiddenBox label div .answer {
	display: block;
	width: 100%;
	overflow: hidden;
	opacity: 0;
}

.hiddenBox label div input:checked ~ .answer {
	height: auto;
	margin-top: 2rem;
	animation-name: apper;
	animation-delay: .3s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes apper {
	
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
	
}

/* ビデオ ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.video {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 1365px) { /* mobile */
	
	.videoWrap {
		position: relative;
		width: 640px;
		height: auto;
		margin: 5px;
	}
	
}

@media screen and (min-width: 1366px) { /* desktop */
	
	.videoWrap {
		position: relative;
		width: 800px;
		height: auto;
		margin: 0;
	}
	
}
@media screen and (min-width: 1600px) { /* desktop */
	
	.videoWrap {
		position: relative;
		width: 1200px;
		height: auto;
		margin: 0;
	}
	
}

.videoWrap::after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}

.videoWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

/* スクロールしたらフワッと表示 ------------------------------------------------------------------------------------------------------------------------------------ */
.sa, .sb {
	opacity: 0;
	
	-webkit-transition: 1.2s;
	        transition: 1.2s;
}

.sc, .sd, .sr, .sx, .sz {
	opacity: 0;
	
	-webkit-transition: 2s;
	        transition: 2s;
}

.sa.show {
	opacity: 1;
}

/* 回転しながらフェードインさせるための絡繰り ---------------------------------------------------------------------------------------------------------------------- */
.fiRotate {
	display: inline-block;
	
	animation-name: fadeinRotate;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes fadeinRotate {
	
	from {
		opacity: 0;
		-webkit-transform: rotateY(360deg);
		        transform: rotateY(360deg);
	}
	
	to {
		opacity: 1;
	}
	
}

/* スライドしてフェードインさせるための絡繰り ---------------------------------------------------------------------------------------------------------------------- */
.fiToUp {
	display: inline-block;
	
	animation-name: fadeinToUp;
	animation-delay: 0s;
	animation-duration: 1.3s;
	animation-fill-mode: forwards;
}

@keyframes fadeinToUp {
	
	from {
		opacity: 0;
		-webkit-transform: translateY(200px);
		        transform: translateY(200px);
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	
}

.fiToUpSX {
	display: inline-block;
	
	animation-name: fadeinToUpSX;
	animation-delay: .3s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeinToUpSX {
	
	0% {
		opacity: 0;
		-webkit-transform: translateY(300px);
		        transform: translateY(300px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	
}

.fiToDown {
	display: inline-block;
	
	animation-name: fadeinToDown;
	animation-delay: .3s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeinToDown {
	
	from {
		opacity: 0;
		-webkit-transform: translateY(-50px);
		        transform: translateY(-50px);
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
	
}

.fiToRight {
	display: inline-block;
	
	animation-name: fadeinToRight;
	animation-delay: .1s;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}

@keyframes fadeinToRight {
	
	from {
		opacity: 0;
		transform: translateX(-200px);
	}
	
	to {
		opacity: 1;
		transform: translateX(0);
	}
	
}

/* ズームインしてフェードインさせるための絡繰り -------------------------------------------------------------------------------------------------------------------- */
.zoomIn {
	display: inline-block;
	
	animation-name: fadeinZoomIn;
	animation-delay: .3s;
	animation-duration: 1.3s;
	animation-fill-mode: forwards;
}

@keyframes fadeinZoomIn {
	
	from {
		opacity: 0;
		transform: scale(.5, .5);
	}
	
	to {
		opacity: 1;
		transform: scale(1, 1);
	}
	
}

/* ローディング ---------------------------------------------------------------------------------------------------------------------------------------------------- */
.loadingWrap {
	position: -webkit-fixed;
	position: fixed;
	z-index: 300;
	top: calc(50%  - 200px / 2);
	left: calc(50% - 200px / 2);
	width: 200px;
	display: none;
}

.displayBlock {
	display: block;
}

.loadingWrap.hide {
	animation: hideop .6s linear 0s;
	animation-fill-mode: forwards;
}

@keyframes hideop {
	
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
		display: none;
	}
}

.loader, .loader::after {
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

.loader {
	position: relative;
	text-indent: -9999rem;
	border-top: 4px solid rgba(63, 249, 220, 0);
	border-right: 4px solid rgba(63, 249, 220, .3);
	border-bottom: 4px solid rgba(63, 249, 220, .6);
	border-left: 4px solid rgba(63, 249, 220, .9);
	
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
	
	-webkit-animation: loadingIcon 1s infinite linear;
	        animation: loadingIcon 1s infinite linear;
}

@-webkit-keyframes loadingIcon {
	
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@keyframes loadingIcon {
	
	0% {
		-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@media screen and (max-width: 767px) {  /* smartphone */
	
	.progressRate {
		left: 4px;
		top: -171px;
		font-size: 292.30%;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1194px) {  /* iPad */
	
	.progressRate {
		left: 4px;
		top: -172px;
		font-size: 300.00%;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	.progressRate {
		left: 4px;
		top: -172px;
		font-size: 307.69%;
	}
	
}

.progressRate {
	position: relative;
	width: 200px;
	font-family: fmam;
	color: rgba(0, 200, 255, .7);
	font-weight: bold;
	text-align: center;
}

/* ローディングアニメーション ---------------------------------------------------------------------------------------------------------------------------------------*/
.loadingAnimation {
	animation: loadingAnimation .3s ease 0s 1 normal;
}

@keyframes loadingAnimation {
	
	0%   {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

#loaderX {
	position: relative;
	z-index: 9999;
	width: 100%;
}

#loaderX.loaded {
	animation: fadeOutX 2s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

@-webkit-keyframes fadeOutX {
	
	from {
		opacity: 1;
	}
	
	to {
		z-index: 0;
		opacity: 0;
	}
}

@keyframes fadeOutX {
	
	from {
		opacity: 1;
	}
	
	to {
		z-index: 0;
		opacity: 0;
	}
}

.spinner {
	position: -webkit-fixed;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 57px;
	height: 57px;
	margin: auto;
	background-image: url('/teijisei/images/logo/kosyo.png');
	
	transform: translate(-50%, -50%);
	
	-webkit-animation: sk-rotateplane 1.5s infinite cubic-bezier(0.83, 0, 0.17, 1);
	        animation: sk-rotateplane 1.5s infinite cubic-bezier(0.83, 0, 0.17, 1);
}

@-webkit-keyframes sk-rotateplane {

	  0% { -webkit-transform: perspective(1000px) rotateY(0deg);   }
	 50% { -webkit-transform: perspective(1000px) rotateY(180deg); }
	100% { -webkit-transform: perspective(1000px) rotateY(360deg); }
}

@keyframes sk-rotateplane {

	  0% { transform: perspective(1000px) rotateY(0deg);   }
	 50% { transform: perspective(1000px) rotateY(180deg); }
	100% { transform: perspective(1000px) rotateY(360deg); }
}

/*
.spinner {
	position: -webkit-fixed;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 80px;
	height: 80px;
	margin: auto;
	background-color: rgba(255, 0, 32, .3);
	
	transform: translate(-50%, -50%);
	
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	        animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {

	  0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);       }
	 50% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);    }
	100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

@keyframes sk-rotateplane {
	
	  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);       }
	 50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg);    }
	100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
*/


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▼▼▼ ボタンとアイコン ▼▼▼ ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ボタン表示位置 -------------------------------------------------------------------------------------------------------------------------------------------------- */
.buttonBox_300 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 120px;
	padding: 10px;
}

.buttonBox_500 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 120px;
	padding: 10px;
}

/* 質問や相談はこちら！ -------------------------------------------------------------------------------------------------------------------------------------------- */
.invitationMessage {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	left: 8px;
	bottom: 58px;
	height: 38px;
	padding: 0 .5rem;
	line-height: 38px;
	border-radius: 38px;
	background-color: darkcyan;
	cursor: pointer;
	opacity: .8;
	
	-webkit-transition: all .7s;
			transition: all .7s;
}

.invitationMessage:hover {
	box-shadow: 0px 0px 30px aquamarine;
	opacity: 1;
}

.invitationMessageIcon::before {
	position: relative;
	top: -0.1rem;
	content: url(/teijisei/images/logo/phone32.png);
	display: inline-block;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.eraser {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 58px;
	left: 235px;
	content: url(/teijisei/images/logo/eraser.png);
	vertical-align: middle;
}

@media screen and (min-width: 768px) {  /* smartphone */
	
	.invitationMessageIcon::before {
		top: -0.05rem;
	}
	
	.eraser {
		left: 250px;
	}
	
}

@media screen and (min-width: 1200px) { /* desktop */
	
	.invitationMessageIcon::before {
		top: -0.15rem;
	}
	
	.eraser {
		left: 260px;
	}
	
}

/* 今月の予定を確認するボタン -------------------------------------------------------------------------------------------------------------------------------------- */
.scheduleMessage {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 8px;
	left: 8px;
	height: 38px;
	padding: 0 .5rem;
	line-height: 38px;
	border-radius: 38px;
	background-color: indigo;
	cursor: pointer;
	opacity: .8;
	
	-webkit-transition: all .7s;
			transition: all .7s;
}

.scheduleMessage:hover {
	box-shadow: 0px 0px 30px fuchsia;
	opacity: 1;
}

.scheduleMessageIcon::before {
	position: relative;
	top: -0.1rem;
	content: url(/teijisei/images/logo/schedule32.png);
	display: inline-block;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

@media screen and (min-width: 768px) {  /* smartphone */
	
	.scheduleMessageIcon::before {
		position: relative;
		top: -0.05rem;
	}
	
}

@media screen and (min-width: 1200px) { /* desktop */
	
	.scheduleMessageIcon::before {
		position: relative;
		top: -0.15rem;
	}
	
}

/* モバイルヘッダナビゲーションアイコン ---------------------------------------------------------------------------------------------------------------------------- */
.mobileNavigationIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	top: 0;
	right: 1vw;
}

.mobileNavigationIconWrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobileNavigationIcon_motion {
	position: relative;
	width: 32px;
	height: 32px;
}

.mobileNavigationIcon_motion span {
	position: absolute;
	width: 100%;
	height: 6px;
	background-color: rgb(0, 0, 0);
	border-radius: 3px;
}

.mobileNavigationIcon_motion, #mobileNavigationIcon_motion span {
	display: inline-block;
	
	-webkit-transition: all .7s;
	        transition: all .7s;
}

.mobileNavigationIcon_motion span:nth-of-type(1) {
	top: 0;
}

.mobileNavigationIcon_motion span:nth-of-type(2) {
	top: calc(50% - 3px);
}

.mobileNavigationIcon_motion span:nth-of-type(3) {
	bottom: 0;
}

@media screen and (max-width: 359px) { /* iPhone5 / 5s / 5c / SE */
	
	.mobileNavigationIcon {
		top: 6px;
	}
	
}

@media screen and (min-width: 360px) and (max-width: 374px) { /* Galaxy S5 / Android 5.0 */
	
	.mobileNavigationIcon {
		top: 10px;
	}
	
}

@media screen and (min-width: 375px) and (max-width: 413px) { /* iPhone6 / 6s / 7 / 8 / SE Gen2 / X / XS / 11 Pro / 12 mini / iPhone12 Pro */
	
	.mobileNavigationIcon {
		top: 11px;
	}
	
}

@media screen and (min-width: 414px) and (max-width: 743px) { /* iPhone / 6Plus / 6sPlus / 7Plus / 8Plus / XR / 11 / 11 Pro Max / XS Max / iPhone12 Pro Max */
	
	.mobileNavigationIcon {
		top: 13px;
	}
	
}

@media screen and (min-width: 744px) and (max-width: 1111px) { /* iPad mini Gen1-5 / iPad mini Gen1-6 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 iPad Gen7 iPad Air Gen4 iPad Air Gen3 / iPad Pro10.5 / iPad Pro11 / iPad Pro（12.9-inch）/（横）iPad Gen7 */
	
	.mobileNavigationIcon {
		top: 24px;
	}
	
}

@media screen and (min-width: 1112px) and (max-width: 1194px) { /* （横）iPad Pro10.5 / iPad Air Gen3 /（横）iPad Air Gen4 /（横）iPad Pro11 */
	
	.mobileNavigationIcon {
		top: 25px;
	}
	
}

/* モバイルヘッダナビゲーションアイコンの「動作スタイル」----------------------------------------------------------------------------------------------------------- */
.mobileNavigationIcon_motion.active span:nth-of-type(1) {
	background-color: white;
	
	-webkit-transform: translateY(13px) rotate(-315deg);
	transform: translateY(13px) rotate(-315deg);
}

.mobileNavigationIcon_motion.active span:nth-of-type(2) {
	opacity: 0;
}

.mobileNavigationIcon_motion.active span:nth-of-type(3) {
	background-color: white;
	
	-webkit-transform: translateY(-13px) rotate(315deg);
	transform: translateY(-13px) rotate(315deg);
}

/* デスクトップヘッダナビゲーションメニュー ------------------------------------------------------------------------------------------------------------------------ */
#desktopHeaderNavigationMenu {
	display: flex;
	justify-content: flex-end;
	padding-right: 1rem;
}

#desktopHeaderNavigationMenu ul {
	list-style-type: none;
}

#desktopHeaderNavigationMenu ul li {
	display: inline-block;
	padding-top: 5px;
}

#desktopHeaderNavigationMenu ul li a {
	-webkit-transition: .7s;
	        transition: .7s;
}

#desktopHeaderNavigationMenu ul li:not(:last-child)::after { /* 最後の要素だけ適用しない */
	content: '｜';
	font-family: fmam;
	font-size: 123.07%;
	color: black;
}

.headeNavigationFont {
	font-family: fmam;
	font-size: 123.07%;
	font-weight: bold;
	color: darkblue;
}

/* デスクトップハンバーガーナビゲーションアイコン ------------------------------------------------------------------------------------------------------------------------------ */
#desktopNavigationIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 256px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 64px;
	background-color: dodgerblue;
	
	-webkit-transition: all .7s;
	        transition: all .7s;
}

#desktopNavigationIcon:hover {
	box-shadow: 0px 0px 80px blue;
}

#desktopNavigationIcon.active {
	background-color: red;
}

#desktopNavigationIcon.active:hover {
	box-shadow: 0px 0px 80px red;
}

/* デスクトップハンバーガーナビゲーションアイコンの「動作スタイル」 ------------------------------------------------------------------------------------------------ */
#desktopNavigationIcon_motion {
	position: relative;
	width: 32px;
	height: 40px;
	cursor: pointer;
	
	-webkit-transition: .8s cubic-bezier(.65, 0, .35, 1);
	        transition: .8s cubic-bezier(.65, 0, .35, 1);
}

#desktopNavigationIcon_motion span {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: snow;
	border-radius: 2px;
	
	-webkit-transition: .8s cubic-bezier(.22, 1, .36, 1);
	        transition: .8s cubic-bezier(.22, 1, .36, 1);
}

#desktopNavigationIcon_motion span:nth-of-type(1) {
	top: 2px;
}

#desktopNavigationIcon_motion span:nth-of-type(2) {
	top: 18px;
}

#desktopNavigationIcon_motion span:nth-of-type(3) {
	bottom: 2px;
}

#desktopNavigationIcon_motion.active {
	width: 46px;
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

#desktopNavigationIcon_motion.active > span:nth-of-type(1) {
	height: 6px;
	border-radius: 3px;
	
	-webkit-transform: translateY(16px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
}

#desktopNavigationIcon_motion.active > span:nth-of-type(2) {
	opacity: 0;
}

#desktopNavigationIcon_motion.active > span:nth-of-type(3) {
	height: 6px;
	border-radius: 3px;
	
	-webkit-transform: translateY(-16px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
}

/* モバイル・デスクトップ共通アコーディオンコンテンツ -------------------------------------------------------------------------------------------------------------- */
#mobileAccordionMenu_switch {
	display: none;
}

.accordionMenuShadow {
	position: -webkit-fixed;
	position: fixed;
	z-index: 70;
	top: 0;
	left: 0;
	width: 100%;
	height: 2000px;
	background-color: rgb(0, 0, 0);
	overflow: hidden;
	opacity: 0;
	
	-webkit-transition: all .6s;
	        transition: all .6s;
}

.accordionMenuShadow_on {
	opacity: .8;
}

#mobileAccordionMenuContents {
	position: -webkit-fixed;
	position: fixed;
	z-index: 80;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 200px;
	overflow: scroll;
	
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: .6s cubic-bezier(.65, 0, .35, 1);
	        transition: .6s cubic-bezier(.65, 0, .35, 1);
}

#mobileAccordionMenu_switch:checked ~ #mobileAccordionMenuContents {
	transform: translateX(0);
}

#mobileAccordionMenuSubhead {
	display: flex;
	justify-content: center;
	align-items: center;
}

#mobileAccordionMenu {
	display: flex;
	flex-wrap: wrap;
}

.mobileAccordionSiteMapList {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

@media screen and (max-width: 359px) { /* iPhone5 / 5s / 5c / SE */
	
	#mobileAccordionMenuSubhead {
		height: 50px;
		font-family: fmam;
		font-size: 123.07%; /* 16pt */
		color: rgb(255, 255, 255);
	}
	
	.mobileAccordionSiteMapListSubhead_fs {
		font-size: 115.38%; /* 15pt */
	}
	
	.mobileAccordionSiteMapListSubhead {
		font-family: fmam;
		font-size: 115.38%; /* 15pt */
		color: cornsilk;
	}
	
	#mobileAccordionMenu div.mobileAccordionMenuSiteMap {
		width: calc(50% - 18px / 2);
		margin: 0 0 6px 6px;
		padding: 10px;
		border: 2px solid thistle;
		background-color: darkslategray;
		border-radius: 10px;
	}
	
	.mobileAccordionSiteMapList li {
		line-height: 2rem;
		font-family: fmam;
		font-size: 100.00%; /* 13pt */
		color: rgb(255, 255, 255);
	}
	
}

@media screen and (min-width: 360px) and (max-width: 413px) { /* Galaxy S5 / Android 5.0 */
	
	#mobileAccordionMenuSubhead {
		height: 60px;
		font-family: fmam;
		font-size: 138.46%; /* 18pt */
		color: rgb(255, 255, 255);
	}
	
	.mobileAccordionSiteMapListSubhead_fs {
		font-size: 123.07%; /* 16pt */
	}
	
	.mobileAccordionSiteMapListSubhead {
		font-family: fmam;
		font-size: 123.07%; /* 16pt */
		color: cornsilk;
	}
	
	#mobileAccordionMenu div.mobileAccordionMenuSiteMap {
		width: calc(50% - 18px / 2);
		margin: 0 0 6px 6px;
		padding: 10px;
		border: 2px solid thistle;
		background-color: darkslategray;
		border-radius: 10px;
	}
	
	.mobileAccordionSiteMapList li {
		line-height: 2rem;
		font-family: fmam;
		font-size: 107.69%; /* 14pt */
		color: rgb(255, 255, 255);
	}
	
}

@media screen and (min-width: 414px) and (max-width: 767px) { /* iPhone / 6Plus / 6sPlus / 7Plus / 8Plus / XR / 11 / 11 Pro Max / XS Max */
	
	#mobileAccordionMenuSubhead {
		height: 68px;
		font-family: fmam;
		font-size: 146.15%; /* 19pt */
		color: rgb(255, 255, 255);
	}
	
	.mobileAccordionSiteMapListSubhead_fs {
		font-size: 130.76%; /* 17pt */
	}
	
	.mobileAccordionSiteMapListSubhead {
		font-family: fmam;
		font-size: 130.76%; /* 17pt */
		color: cornsilk;
	}
	
	#mobileAccordionMenu div.mobileAccordionMenuSiteMap {
		width: calc(50% - 18px / 2);
		margin: 0 0 6px 6px;
		padding: 10px;
		border: 2px solid thistle;
		background-color: darkslategray;
		border-radius: 10px;
	}
	
	.mobileAccordionSiteMapList li {
		line-height: 2rem;
		font-family: fmam;
		font-size: 115.38%; /* 15pt */
		color: rgb(255, 255, 255);
	}
	
}

@media screen and (min-width: 768px) { /* iPad mini Gen1-5 / iPad Gen1-4/ iPad Air / iPad Air Air2 / iPad Pro9.7 / iPad Pro (12.9-inch) */
	
	#mobileAccordionMenuSubhead {
		height: 100px;
		line-height: 100px;
	}
	
	.mobileAccordionSiteMapListSubhead {
		font-family: fmam;
		font-size: 138.46%; /* 18pt */
		color: cornsilk;
	}
	
	#mobileAccordionMenu div.mobileAccordionMenuSiteMap {
		width: calc(33.333% - 36px / 3);
		margin: 0 0 9px 9px;
		padding: 20px;
		border: 2px solid thistle;
		background-color: darkslategray;
		border-radius: 20px;
	}
	
	.mobileAccordionSiteMapList li {
		line-height: 2rem;
		font-family: fmam;
		font-size: 123.07%; /* 16pt */
		color: rgb(255, 255, 255);
	}
	
}

/* 戻るボタン（モバイル）------------------------------------------------------------------------------------------------------------------------------------------- */
.mobileNavigationGoBackIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 5px;
	right: 5px;
	width: 48px;
	height: 48px;
	background-image: url('/teijisei/images/logo/goBack.png');
	background-repeat: no-repeat;
	opacity: .5;
}

/* 戻るボタン（デスクトップ）--------------------------------------------------------------------------------------------------------------------------------------- */
.desktopNavigationGoBackIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 96px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 64px;
	background-color: gold;
	background-image: url('/teijisei/images/logo/back.png');
	background-repeat: no-repeat;
	cursor: pointer;
	
	-webkit-transition: all 1s;
	        transition: all 1s;
}

.desktopNavigationGoBackIcon:hover {
	box-shadow: 0px 0px 80px yellow;
}

/* ページトップへのスクロールボタン（モバイル）----------------------------------------------------------------------------------------------------------------------- */
.mobileNavigationScrollToTopIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 80px;
	right: 5px;
	width: 48px;
	height: 48px;
	background-image: url('/teijisei/images/logo/goTop.png');
	background-repeat: no-repeat;
	visibility: hidden; /* フォーカスが当たらないようにするため */
	overflow: hidden;
	opacity: 0;
	
	-webkit-transition: 1s;
	        transition: 1s;
}

/* ページトップへのスクロールボタン（デスクトップ）----------------------------------------------------------------------------------------------------------------- */
.desktopNavigationScrollToTopIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 176px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 64px;
	background-color: seagreen;
	background-image: url('/teijisei/images/logo/up.png');
	background-repeat: no-repeat;
	cursor: pointer;
	visibility: hidden; /* フォーカスが当たらないようにするため */
	overflow: hidden;
	opacity: 0;
	
	-webkit-transition: 1s;
	        transition: 1s;
}

.desktopNavigationScrollToTopIcon:hover {
	box-shadow: 0px 0px 80px green;
}

.arrow {
	visibility: visible;
	opacity: 1;
}

.rotateArrow {
	display: inline-block;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
	transform-style: preserve-3d;
	
	animation: rotateArrowAnimation 2s forwards;
}

@-webkit-keyframes rotateArrowAnimation {
	
	0% {
		-webkit-transform: rotate3d(0, 1, 0, 360deg);
	}
	
}

@keyframes rotateArrowAnimation {
	
	0% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
	
}

/* ホームページへのジャンプボタン（デスクトップ）------------------------------------------------------------------------------------------------------------------- */
.desktopNavigationGoHomeIcon {
	position: -webkit-fixed;
	position: fixed;
	z-index: 90;
	bottom: 16px;
	right: 16px;
	width: 64px;
	height: 64px;
	border-radius: 64px;
	background-color: crimson;
	background-image: url('/teijisei/images/logo/home.png');
	background-repeat: no-repeat;
	cursor: pointer;
	
	-webkit-transition: all 1s;
	        transition: all 1s;
}

.desktopNavigationGoHomeIcon:hover {
	box-shadow: 0px 0px 80px red;
}

/* ボタン３色 ------------------------------------------------------------------------------------------------------------------------------------------------------ */
a.btnGray {
	padding: 12px 20px;
	font-family: fmam;
	font-size: 130.76%;
	color: rgb(240, 230, 176);
	font-weight: bold;
	text-shadow: 0px 1px 3px rgb(0, 0, 0);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(190, 190, 190)), to(rgb(64, 64, 64)));
	background: -moz-linear-gradient(top, rgb(190, 190, 190), rgb(64, 64, 64));
	background: linear-gradient(top, rgb(190, 190, 190), rgb(64, 64, 64));
	border-radius: 32px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
	
	transition-property: border-radius, padding;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

a.btnGray:hover {
	padding: 16px 20px;
	border-radius: 32px;
}

a.btnBlue {
	padding: 12px 20px;
	font-family: fmam;
	font-size: 130.76%;
	color: white;
	font-weight: bold;
	text-shadow: 0px 1px 3px rgb(0, 0, 0);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 228, 228)), to(rgb(0, 90, 90)));
	background: -moz-linear-gradient(top, rgb(0, 228, 228), rgb(0, 90, 90));
	background: linear-gradient(top, rgb(0, 228, 228), rgb(0, 90, 90));
	border-radius: 32px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
	
	transition-property: border-radius, padding;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

a.btnBlue:hover {
	padding: 16px 20px;
	border-radius: 32px;
}

a.btnRed {
	padding: 12px 20px;
	font-family: fmam;
	font-size: 130.76%;
	color: white;
	font-weight: bold;
	text-shadow: 0px 1px 3px rgb(0, 0, 0);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 210, 40)), to(rgb(180, 50, 20)));
	background: -moz-linear-gradient(top, rgb(250, 210, 40), rgb(180, 50, 20));
	background: linear-gradient(top, rgb(250, 210, 40), rgb(180, 50, 20));
	border-radius: 32px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
	
	transition-property: border-radius, padding;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

a.btnRed:hover {
	padding: 16px 20px;
	border-radius: 32px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ▲▲▲ ボタンとアイコン ▲▲▲ ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* 緊急のお知らせ -------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ポップアップ */
.cautionBox {
	width: 100%;
	visibility: hidden;
}

.cautionFadeIN {
	position: -webkit-fixed;
	position: fixed;
	z-index: 108;
	display: inline-block;
	background-color: yellow;
	border-radius: 30px;
	box-shadow: 2px 2px 20px 2px #000;
	opacity: 1;
	
	-webkit-animation: cautionFadeIN .7s ease 0s 1 normal;
	        animation: cautionFadeIN .7s ease 0s 1 normal;
}

.cautionFadeOUT {
	position: -webkit-fixed;
	position: fixed;
	z-index: 108;
	display: inline-block;
	background-color: yellow;
	border-radius: 30px;
	box-shadow: 2px 2px 20px 2px #000;
	opacity: 0;
	
	-webkit-animation: cautionFadeOUT 1s ease 0s 1 normal;
	        animation: cautionFadeOUT 1s ease 0s 1 normal;
}

@-webkit-keyframes cautionFadeIN { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cautionFadeIN { 0% { opacity: 0; } 100% { opacity: 1; } }

@-webkit-keyframes cautionFadeOUT { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cautionFadeOUT { 0% { opacity: 1; } 100% { opacity: 0; } }

#caution_checkbox {
	display: none;
}

#cautionSadow {
	position: -webkit-fixed;
	position: fixed;
	z-index: 107;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0);
	opacity: 0;
	
	-webkit-transition: all .3s ease-in-out 0s;
	        transition: all .3s ease-in-out 0s;
}

#caution_checkbox:checked ~ #shadow {
	display: block;
	opacity: .7;
}

/* 緊急のお知らせの内容 -------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {  /* smartphone */
	
	#caution p[class~='cautionSubheadFont'] {
		font-family: fmam;
		font-size: 130.76%; /* 20pt */
		font-weight: bold;
		color: black;
	}
	
	#caution p[class~='cautionFont'] {
		font-family: fmam;
		font-size: 107.69%; /* 16pt */
		color: black;
	}
	
	.cautionFadeIN {
		padding: 20px;
	}
	
	.cautionFadeOUT {
		padding: 20px;
	}
	
	.cautionWrapper {
		width: 1100px;
		margin: 5px;
		padding: 2rem;
		background-color: yellow;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.cautionWrapper p[class~='cautionWrapperSubheadFont'] {
		font-family: fmam;
		font-size: 130.76%; /* 20pt */
		font-weight: bold;
		color: black;
	}
	
	.cautionWrapper p[class~='cautionWrapperFont'] {
		font-family: fmam;
		font-size: 107.69%; /* 16pt */
		color: black;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1194px) {  /* iPad */
	
	#caution p[class~='cautionSubheadFont'] {
		font-family: fmam;
		font-size: 223.07%; /* 30pt */
		font-weight: bold;
		color: black;
	}
	
	#caution p[class~='cautionFont'] {
		font-family: fmam;
		font-size: 146.15%; /* 20pt */
		color: black;
	}
	
	.cautionFadeIN {
		padding: 30px;
	}
	
	.cautionFadeOUT {
		padding: 30px;
	}
	
	.cautionWrapper {
		width: 1100px;
		margin: 5px;
		padding: 2rem;
		background-color: yellow;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.cautionWrapper p[class~='cautionWrapperSubheadFont'] {
		font-family: fmam;
		font-size: 223.07%; /* 30pt */
		font-weight: bold;
		color: black;
	}
	
	.cautionWrapper p[class~='cautionWrapperFont'] {
		font-family: fmam;
		font-size: 146.15%; /* 20pt */
		color: black;
	}
	
}

@media screen and (min-width: 1195px) { /* desktop */
	
	#caution p[class~='cautionSubheadFont'] {
		font-family: fmam;
		font-size: 230.76%; /* 30pt */
		font-weight: bold;
		color: black;
	}
	
	#caution p[class~='cautionFont'] {
		font-family: fmam;
		font-size: 153.84%; /* 20pt */
		color: black;
	}
	
	.cautionFadeIN {
		padding: 50px;
	}
	
	.cautionFadeOUT {
		padding: 50px;
	}
	
	.cautionWrapper {
		width: 1100px;
		margin: 5px;
		padding: 2rem;
		background-color: yellow;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
	}
	
	.cautionWrapper p[class~='cautionWrapperSubheadFont'] {
		font-family: fmam;
		font-size: 230.76%; /* 30pt */
		font-weight: bold;
		color: black;
	}
	
	.cautionWrapper p[class~='cautionWrapperFont'] {
		font-family: fmam;
		font-size: 153.84%; /* 20pt */
		color: black;
	}
	
}

/* index.htmlでイメージを先読み -------------------------------------------------------------------------------------------------------------------------------------*/
#i00 {
	background-image: url('/teijisei/images/logo/kosyo.png');
}

#i01 {
	background-image: url('/teijisei/images/logo/FukuyamaTechnicalHighSchoolPart-timeCourse.png');
}

#i10 {
	background-image: url('/teijisei/images/topPage/slid1.jpg');
}

#i11 {
	background-image: url('/teijisei/images/topPage/message1.png');
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.img_wrapper_1 { /* img をレスポンシブ化する */
	position: relative;
	padding-top: 56.25%; /* アスペクト比を指定する */
	/* 9 / 16 * 100 = 56.25 ( 16:9の場合は56.25% ) */
	/* 3 /  4 * 100 = 75.00 (  4:3の場合は75.00% ) */
}

.img_wrapper_1 > img { /* img をレスポンシブ化する */
	width: 100%;
	height: auto; /* img タグには heigit: auto; が使える */
	max-width: 30vw;
}

.if_responsible { /* iframe をレスポンシブ化する */
	height: 0;
	padding-top: 56.25%; /* アスペクト比を指定する */
	position: relative;
	/* 9 / 16 * 100 = 56.25 ( 16:9の場合は56.25% ) */
	/* 3 /  4 * 100 = 75.00 (  4:3の場合は75.00% ) */
	overflow: hidden;
}

.if_responsible iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* 基本色 -----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.darkslategray {  /* 黒板のような深緑 */
	background-color: darkslategray;
}

.dimgray {        /* 深いグレー */
	background-color: dimgray;
}

.whitesmoke {     /* うっすらグレー */
	background-color: whitesmoke;
}

.teal {           /* 深みのあるパステルグリーン */
	background-color: teal;
}

.seagreen {       /* 落ち着いたパステル調のグリーン */
	background-color: seagreen;
}

.lightsteelblue { /* パステル調の淡い青 */
	background-color: lightsteelblue;
}

.lavender {       /* うっすら青 */
	background-color: lavender;
}

.snow {           /* ほぼ白 */
	background-color: snow;
}

.floralwhite {    /* 白に近いうっすらアイボリー */
	background-color: floralwhite;
}

.bisque {         /* うっすら桃 */
	background-color: bisque;
}

.oldlace {        /* ベージュに近いうっすら桃 */
	background-color: oldlace;
}

.papayawhip {     /* 明るいベージュ */
	background-color: papayawhip;
}

.navajowhite {    /* ベージュっぽい */
	background-color: navajowhite;
}

.darkorange {     /* パステル調の落ち着いたオレンジ */
	background-color: darkorange;
}

.tomato {         /* パステル調の落ち着いた赤 */
	background-color: tomato;
}

/* 表示制御 -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.whiteSpacePreWrap {
	white-space: pre-wrap; /* 連続で入力した空白文字（半角・全角）や改行をブラウザでの表示に反映させる */
}

.displayNone {
	display: none;
}

.displayBlock {
	display: block;
}

/* テキストエリアのリサイズを禁止 ---------------------------------------------------------------------------------------------------------------------------------- */
textarea {
	resize: none;
}

/* 太字 ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.bold {
	font-weight: bold;
}

/* テキストの影 ---------------------------------------------------------------------------------------------------------------------------------------------------- */
.tsw {
	text-shadow: 1px 1px 2px dimgray;
}

/* あれやこれやの影 ------------------------------------------------------------------------------------------------------------------------------------------------ */
.shadow {
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2);
}

/* マーカー -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.marker {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, aquamarine 33%, rgba(255, 255, 255, 0) 50%);
	background-position: bottom left;
	background-size: 0%;
	background-repeat: no-repeat;
	
	-webkit-transition: all 1.3s cubic-bezier(.45, 0, .55, 1);
	        transition: all 1.3s cubic-bezier(.45, 0, .55, 1);
}

.marker.show {
	background-size: 100%;
}

/* アンダーライン -------------------------------------------------------------------------------------------------------------------------------------------------- */
.underline1 {
	border-bottom: 1px solid lightsalmon;
}

.underline2 {
	border-bottom: 2px solid lightsalmon;
}

.headerSeparator {
	border-bottom: 4px solid firebrick;
}

/* Font Awesome ---------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
	font-family: 'awesome';
	src: url('/teijisei/fonts/fa/awesome.woff?qyctz7') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

#siteMapBox2 div ul li i {
	position: relative;
	top:  -0.05rem;
	left: 0rem;
}

.fa {
	position: relative;
	top: 0;
	
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'awesome' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fc_white {
	color: white;
}

.fc_aqua {
	color: aqua;
}

.fc_forestgreen {
	color: forestgreen;
}

.fc_yellow {
	color: yellow;
}

.fc_darkorange {
	color: darkorange;
}

.fc_red {
	color: red;
}

.fc_lightsalmon {
	color: pink;
}

.fa-feather-alt::before { /* 羽 */
	content: '\e901';
}

.fa-bullseye::before { /* 二重丸 */
	content: '\e902';
}

.fa-check::before { /* チェック */
	content: '\e903';
}

.fa-play::before { /* 右三角 */
	content: '\e904';
}

.fa-circle::before { /* 丸 */
	content: '\e905';
}

.fa-greater-than::before { /* 左大なり */
	content: '\e906';
}

.fa-stop::before { /* 四角 */
	content: '\e907';
}

.fa-phone-alt::before { /* 受話器 */
	content: '\e908';
	color: orangered;
}

.fa-question::before { /* ハテナ */
	content: '\e909';
}

.fa-seedling::before { /* 双葉 */
	content: '\e90a';
}

.fa-star::before { /* 星 */
	content: '\e90c';
}

.fa-th-large::before { /* ４分割の四角 */
	content: '\e90d';
}

.fa-location-arrow::before { /* 弓矢 */
	content: '\e90e';
}

.fa-leaf::before { /* 葉っぱ */
	content: '\e91d';
}

.fa-envelope::before { /* メール */
	content: '\e916';
}

.fa-paperclip::before { /* クリップ */
	content: '\e922';
}

.fa-search::before { /* 虫眼鏡 */
	content: '\e926';
}

/* 画像の体裁 ------------------------------------------------------------------------------------------------------------------------------------------------------ */
img {
	vertical-align: bottom;
	border-style: none;
}

/* Anchor Style ---------------------------------------------------------------------------------------------------------------------------------------------------- */
a:active {
	color: rgb(255, 255, 34);
}

/* カーソルＯＮで背景色を変化させる -------------------------------------------------------------------------------------------------------------------------------- */
.cursorOn {
	display: inline-block;
	
	-webkit-transition: .5s;
	        transition: .5s;
}

.cursorOn:hover {
	background-color: rgba(127, 255, 212, .3);
	box-shadow: 0px 0px 16px 16px rgba(127, 255, 212, .3);
	border-radius: 30px;
}

/* フォント -------------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
	font-family: fmam;
	
	/* Kosugi Maru */
	src: url('/teijisei/fonts/KosugiMaru.woff2') format('woff2'), url('/teijisei/fonts/KosugiMaru.woff') format('woff');
}

.k {
	font-family: fmam;
	color: black;
}

.b {
	font-family: fmam;
	color: dodgerblue;
}

.g {
	font-family: fmam;
	color: teal;
}

.w {
	font-family: fmam;
	color: white;
}

.y {
	font-family: fmam;
	color: navajowhite;
}

.o {
	font-family: fmam;
	color: saddlebrown;
}

.r {
	font-family: fmam;
	color: red;
}