/* [ 福田カメラ・掛川福田スタジオ ] : layout.css */


* { box-sizing: border-box; }


/*======================================================================*
 *  [ base ]
 *======================================================================*/

html, 
body {
	width: 100%;
	min-width: 1150px;
	background: #fff;
}

html {
	font-size: 62.5%; /* 基本サイズ：10px */
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	color: #666;
	/* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", Verdana, sans-serif; */
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6em; /* Chrome対策でremにしない */
	font-weight: 300;
	line-height: 1;
}

@media screen and (max-width: 767px) { /* Smartphone */
	html, 
	body { min-width: 320px; }
	body {
		font-size: 1.4em; /* Chrome対策でremにしない */
		font-weight: 400;
	}
} /* */

/* [ link ] */
a {
	display: inline-block;
	/* color: #00b0ec; */
	color: #666;
	-webkit-transition: background ease .3s, color ease .3s, border-color ease .3s; /* Safari */
	transition: background ease .3s, color ease .3s, border-color ease .3s;
}
a:link, 
a:visited {
}
a:hover,
a:active {
	text-decoration: none;
}

/* [ img ] */
img {
	width: auto;
	max-width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: middle;
}
_:-ms-fullscreen, :root img { width: 100%; }
a img {
	-webkit-transition: opacity ease .3s; /* Safari */
	transition: opacity ease .3s;
}
a:hover img, 
a:active img {
	opacity: 0.7;
}
a:hover img.noop, 
a:active img.noop {
	opacity: 1;
}

/* [ svg ] */
svg {
	max-width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: middle;
}
_:-ms-fullscreen, :root svg { width: 100%; }
a svg {
	-webkit-transition: opacity ease .3s; /* Safari */
	transition: opacity ease .3s;
}

/* [ span / b / em / time / sup / sub ] */
span, b, em, time, sup, sub { display: inline-block; }
em { font-style: normal; }

/* [ table ] */
table {
	border-collapse:collapse;
	border-spacing:0;
	line-height: 1.4;
}

/* [ button ] */
button {
	display: inline-block;
	-webkit-transition: background ease .3s, color ease .3s; /* Safari */
	transition: background ease .3s, color ease .3s;
}

/* [ clearfix ] */
.cf:after {
	content: "";
	clear: both;
	display: block;
}

/* [ pc-none / sp-none ] */
@media screen and (min-width: 768px) { /* PC */
	.pc-none { display: none; }
} /* */

@media screen and (max-width: 767px) { /* Smartphone */
	.sp-none { display: none; }
} /* */


/*======================================================================*
 *  [ siteHeader | ヘッダー ]
 *======================================================================*/

#siteHeader {
	position: relative;
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 115px 0 25px;
	background: #fff;
	z-index: 5000;
	animation-name: fadeInAnimeSiteHeader;
	transition: transform 0.8s linear;
	animation-duration: 2.5s;
	animation-fill-mode: both;
	opacity: 0;
}
#siteHeader::after {
	content: "";
	clear: both;
	display: block;
}
@keyframes fadeInAnimeSiteHeader{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* [ Logo ] */
#siteHeader .logo {
	float: left;
	height: 99px;
	padding: 22px 0;
}
#siteHeader .logo a {
	padding: 10px 0;
}
#siteHeader .logo img { width: 280px; }

/* [ Tel ] */
#siteHeader .tel {
	float: right;
	padding: 18px 15px 15px 0;
	font-size: 2rem;
	font-style: normal;
}
#siteHeader .tel b, 
#siteHeader .tel span { vertical-align: middle; }
#siteHeader .tel b {
	padding-left: 22px;
	background: url(../img/icon_tel_gy.svg) left center no-repeat;
	background-size: 22px 22px;
	line-height: 22px;
}
#siteHeader .tel span { font-size: 1.2rem; }
#siteHeader .tel a {
	color: #666;
	text-decoration: none;
}

@media screen and (max-width: 767px) { /* Smartphone */
	#siteHeader { padding: 0 10px; }
	
	/* [ Logo ] */
	#siteHeader .logo {
		padding: 0;
		height: 55px;
	}
	#siteHeader .logo a { padding: 14px 0; }
	#siteHeader .logo img { width: 220px; }
	
	/* [ Tel ] */
	#siteHeader .tel { display: none; }
} /* */

@media print { /* Print */
	#siteHeader { padding: 0 25px; }
	
	/* [ Logo ] */
	#siteHeader .logo {
		height: 77px;
		padding-top: 0;
	}
	
	/* [ Tel ] */
	#siteHeader .tel { padding: 22px 0 0 0; }
} /* */

/*======================================================================*
 *  [ globalNav | グローバルナビゲーション ]
 *======================================================================*/

.globalNav {
	float: right;
	width: 620px;
}
.globalNav ul {
	display: -webkit-flex;
	display: flex;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
}
.globalNav li {
	/* width: 22%; */
	width: 25%;
	border-left: 1px solid #ddd;
}
/* .globalNav li.rental,
.globalNav li.aboutus {
	width: 17%;
} */
/* .globalNav li:nth-child(4),
.globalNav li:nth-child(5) {
	width: 17%;
} */
.globalNav a {
	display: block;
	padding: 16px 0 11px;
	/* color: #579b5d; */
	color: #666;
	border-bottom: 5px solid transparent;
	text-decoration: none;
}
.globalNav a:hover, 
.globalNav a:active { border-color: #A7B5A8; }

/* [ CONTACT US ] */
.globalNav .contact {
	position: absolute;
	top: 0;
	right: 25px;
	width: 90px;
	border-left: none;
	font-size: 1.2rem;
	/* font-family: Arial, sans-serif; */
	line-height: 1.4;
	z-index: 100;
}
.globalNav .contact a {
	height: 130px;
	padding: 72px 10px 0;
	border: none;
	/* background: url(../img/icon_mail_wh.svg) center 25px no-repeat #A7B5A8; */
	background: url(../img/icon_sp_wh.svg) center 25px no-repeat #A7B5A8;
	background-size: 36px 36px;
	color: #fff;
}
.globalNav .contact a:hover, 
.globalNav .contact a:active { background-color: #8a9a8b; }

/* [ Button ] */
.globalBtn { display: none; }

@media screen and (max-width: 767px) { /* Smartphone */
	.globalNav {
		display: none;
		position: absolute;
		top: 55px;
		right: 0;
		left: 0;
		width: 100%;
		background: #A7B5A8;
		z-index: 200;
	}
	.globalNav ul {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		border-top: 1px solid rgba(255,255,255,0.5);
		font-size: 1.4rem;
	}
	.globalNav li {
		width: 100% !important;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		border-left: none;
	}
	.globalNav a {
		color: #fff;
		padding: 25px 10px;
		border: none;
	}
	.globalNav a:hover, 
	.globalNav a:active { background-color: #8a9a8b; }
	
	/* [ CONTACT US ] */
	.globalNav .contact {
		position: static;
		padding: 20px 10px;
	}
	.globalNav .contact a {
		max-width: 220px;
		margin: 0 auto;
		height: auto;
		padding: 15px 10px;
		background: #fff;
		color: #666;
	}
	.globalNav .contact a:hover, 
	.globalNav .contact a:active { background-color: #e0e0e0; }
	.globalNav .contact a::before {
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-right: 10px;
		/* background: url(../img/icon_mail_gy.svg) center center no-repeat; */
		background: url(../img/icon_sp_gy.svg) center center no-repeat;
		background-size: contain;
		vertical-align: middle;
		content: "";
	}
	.globalNav .contact a br { display: none; }
	
	/* [ Button ] */
	.globalBtn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 55px;
		height: 55px;
		background-color: #A7B5A8;
		background-image: url(../img/gnav_open.svg);
		background-position: center center;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		cursor: pointer;
	}
	.globalBtn:hover, 
	.globalBtn:active { background-color: #8a9a8b; }
	.globalBtn.active { background-image: url(../img/gnav_close.svg); }
} /* */

@media print { /* Print */
	.globalNav { display: none; }
} /* */

/*======================================================================*
 *  [ mainImg | メインイメージ ]
 *======================================================================*/

.mainImg {
	position: relative;
	max-width: 1150px;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	/* animation-name: fadeInAnimeMainImg; */
	/* transition: transform 0.8s linear; */
	/* animation-duration: 2.5s; */
	/* animation-fill-mode: both; */
	/* opacity: 0; 【メモ】BlueGriffonで編集するため記載しない */
}

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

/* [ 画像 ] */
.mainImg img {
	width: 100%;
	height: calc(100vh - 165px);
	object-fit: cover;
}
.mainImg.wide img {
	height: auto;
}

/* [ タイトル ] */
.mainImg p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 300px;
	height: auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-filter: drop-shadow( 0 0 2px #000 ); 
	filter: drop-shadow( 0 0 2px #000 );
	color: #fff;
	font-family: serif;
	/* font-family: 'Outfit', sans-serif; */
	font-size: 2.6rem;
	/* font-weight: 400; */
	letter-spacing: 0.12em;
	text-align: center;
	text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}
.mainImg p::before {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	font-size: 1.4rem;
	letter-spacing: 0;
	content: "KAKEGAWA FUKUDA STUDIO";
}
.mainImg p.right { right: 0; left: auto; }
.mainImg p.left { left: 0; }

@media screen and (max-width: 767px) { /* Smartphone */
	/* [ 画像 ] */
	.mainImg img {
		height: calc(100vh - 260px);
		max-height: calc(100vw * 1.2);
	}
	.mainImg.wide img {
		height: 65vw;
		max-height: 65vw;
	}
	
	/* [ タイトル ] */
	.mainImg p { display: none; }
} /* */

/*======================================================================*
 *  [ topicPath | パンくずリスト ]
 *======================================================================*/

.topicPath {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	max-width: 1100px;
	margin: 15px auto;
	animation-name: fadeInAnimeTopicPath;
	transition: transform 0.8s linear;
	animation-duration: 2.5s;
	animation-fill-mode: both;
	/* opacity: 0; 【メモ】BlueGriffonで編集するため記載しない */
}

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

/* [ リスト ] */
.topicPath ol {
	display: -webkit-flex;
	display: flex;
	list-style: none;
	color: #707070;
	font-size: 1.2rem;
	font-weight: bold;
}
.topicPath li + li::before {
	display: inline-block;
	margin: 0 5px;
	font-weight: normal;
	content: ">";
}
.topicPath li a {
	color: #707070;
	font-weight: normal;
	text-decoration: none;
}

/* [ LINEボタン ] */
.lineBtn {
	padding: 6px 10px 4px 7px;
	border: 1px solid #A7B5A8;
	border-radius: 20px;
	background: rgba(255,255,255,0.75);
	color: #8a9a8b;
	font-weight: bold;
	text-decoration: none;
}
.lineBtn::before {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 10px;
	background: url(../img/icon_ln_lgn.svg) center center;
	background-size: 100% 100%;
	vertical-align: middle;
	content: "";
}

@media screen and (max-width: 767px) { /* Smartphone */
	.topicPath {
		position: absolute;
		width: 100%;
		padding: 5px 10px;
		margin: 0;
		background: rgba(255,255,255,0.75);
		-webkit-backdrop-filter: blur(60px);
		backdrop-filter: blur(60px);
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		z-index: 100;
	}
	
	/* [ リスト ] */
	.topicPath ol { font-size: 1.1rem; }
	.topicPath li:nth-last-of-type(1) { display: none; }
	
	/* [ LINEボタン ] */
	.lineBtn { padding: 5px 7px 3px 5px; }
	.lineBtn::before { margin-right: 5px; }
	.lineBtn span { display: none; }
} /* */

@media print { /* Print */
	.topicPath { display: none; }
} /* */

/*======================================================================*
 *  [ contactInfo | お問合せ・ご予約 ]
 *======================================================================*/

.contactInfo {
	padding: 40px 25px;
	/* background: #666; */
	background: #7b7b7b;
	color: #fff;
	text-align: center;
}
.contactInfo a { text-decoration: none; }

/* [ Title ] */
.contactInfo h2 {
	margin-bottom: 20px;
	font-size: 2.5rem;
	font-weight: normal;
	font-family: Century Gothic, 'Muli', sans-serif;
}
.contactInfo h2::before, 
.contactInfo h2::after {
	display: inline-block;
	width: 30px;
	height: 1px;
	margin-bottom: 3px;
	background: #d1d1d1;
	vertical-align: middle;
	content: "";
}
.contactInfo h2::before { margin-right: 10px; } 
.contactInfo h2::after { margin-left: 10px; } 
.contactInfo h2 + p {
	margin-bottom: 35px;
	line-height: 1.2;
}

.contactInfo ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	list-style: none;
}
.contactInfo li {
	width: 385px;
	margin: 0 15px;
}

/* [ Tel ] */
.contactInfo .tel a { color: #fff; }
.contactInfo .tel b {
	padding-left: 30px;
	background: url(../img/icon_tel_wh.svg) left center no-repeat;
	background-size: 30px 30px;
	font-size: 3.5rem;
}
.contactInfo .tel span { font-size: 1.4rem; }

/* [ LINE ] */
.contactInfo .line a {
	display: block;
	padding: 18px 0;
	background: url(../img/arrow_nl_gy.svg) right 15px center no-repeat #fff;
	background-size: 9px 16px;
	color: #666;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1;
}
.contactInfo .line a:hover, 
.contactInfo .line a:active { background-color: #e0e0e0; }
.contactInfo .line a:before {
	display: inline-block;
	margin-right: 0.5em;
	width: 1.4em;
	height: 1.4em;
	background: url(../img/icon_line_gy.png) center center / contain no-repeat;
	vertical-align: middle;
	content: "";
}

@media screen and (max-width: 767px) { /* Smartphone */
	.contactInfo { padding: 30px 10px; }
	
	/* [ Title ] */
	.contactInfo h2 { font-size: 1.8rem; }
	.contactInfo h2 + p { font-size: 1.1rem; }
	
	.contactInfo ul { display: block; }
	.contactInfo li {
		width: 100%;
		margin: 0;
	}
	
	/* [ Tel ] */
	.contactInfo .tel b {
		padding-left: 22px;
		background-size: 22px 22px;
		font-size: 2.4rem;
	}
	.contactInfo .tel span {
		display: block;
		margin-top: 5px;
		font-size: 1.1rem;
	}
	
	/* [ LINE ] */
	.contactInfo .line { margin-bottom: 30px; }
	.contactInfo .line a {
		max-width: 280px;
		margin: 0 auto;
		padding: 15px 0;
		background-size: 8px 13px;
		font-size: 1.8rem;
	}
} /* */

/*======================================================================*
 *  [ studioInfo | お店情報 ]
 *======================================================================*/

.studioInfo {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	background: #A7B5A8;
	color: #fff;
}

/* [ Image ] */
.studioInfo figure { width: 50%; }
.studioInfo figure img { width: 100%; }

/* [ Text ] */
.studioInfo div {
	width: 50%;
	padding: 20px 25px 20px 75px;
}
.studioInfo h2 {
	margin-bottom: 20px;
	font-size: 2rem;
}
.studioInfo dl {
	margin-bottom: 20px;
	padding: 0 5px;
	font-size: 1.4rem;
	font-weight: 400;
} 
.studioInfo dl:after {
	content: "";
	clear: both;
	display: block;
}
.studioInfo dt, 
.studioInfo dd {
	float: left;
	margin: 5px 0;
}
.studioInfo dt { clear: both; }
.studioInfo dt::after { content: "："; }

/* [ Button ] */
.studioInfo .btn {
	padding: 10px 38px;
	border: 1px solid #fff;
	background: url(../img/icon_map_wh.svg) left 11px center no-repeat,
				url(../img/arrow_nl_wh.svg) right 10px center no-repeat;
	background-size: 18px 18px, 6px 10px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 400;
	text-decoration: none;
}
.studioInfo .btn:hover, 
.studioInfo .btn:active { background-color: #8a9a8b; }

@media screen and (max-width: 767px) { /* Smartphone */
	.studioInfo { display: block; }
	
	/* [ Image ] */
	.studioInfo figure { width: 100%; }
	
	/* [ Text ] */
	.studioInfo div {
		width: 100%;
		padding: 30px 10px;
		text-align: center;
	}
	.studioInfo h2 { font-size: 1.4rem; }
	.studioInfo dl {
		display: inline-block;
		margin-bottom: 10px;
		font-size: 1.3rem;
		text-align: left;
	}

	/* [ Button ] */
	.studioInfo .btn {
		padding: 8px 32px;
		background-size: 16px 16px, 6px 10px;
		font-size: 1.3rem;
	}
} /* */

/*======================================================================*
 *  [ siteFooter | フッター ]
 *======================================================================*/

#siteFooter {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 25px;
}

/* [ Copy Right ] */
#siteFooter .copy {
	display: block;
	padding: 60px 0 30px;
	font-size: 1.1rem;
	text-align: center;
}

@media screen and (max-width: 767px) { /* Smartphone */
	#siteFooter { padding: 0 10px; }
	
	/* [ Copy Right ] */
	#siteFooter .copy {
		padding: 0  0 80px;
		font-size: .9rem;
	}
} /* */

/*======================================================================*
 *  [ followBox | SNSフォロー ]
 *======================================================================*/

.followBox {
	padding: 100px 0;
	text-align: center;
}

/* [ Title ] */
.followBox p {
	margin-bottom: 40px;
	font-size: 1.8rem;
	font-weight: bold;
	font-family: Century Gothic, 'Muli', sans-serif;
}
.followBox p::before, 
.followBox p::after {
	display: inline-block;
	margin: 0 5px;
	content: "......";
}
.followBox p::before {
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
}
.followBox p::after {
	-webkit-transform: rotate(-35deg);
	transform: rotate(-35deg);
}

/* [ Icon ] */
.followBox ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style: none;
	font-size: 1.2rem;
}
.followBox li + li { margin-left: 20px; }
.followBox a {
	display: block;
	width: 72px;
	color: #666;
	text-decoration: none;
}
.followBox a:hover, 
.followBox a:active { color: #a3a3a3; }
.followBox img {
	display: block;
	margin: 0 auto 12px;
	width: 36px;
	height: 36px;
}

@media screen and (max-width: 767px) { /* Smartphone */
	.followBox { padding: 40px 0; }
	
	/* [ Title ] */
	.followBox p {
		margin-bottom: 25px;
		font-size: 1.5rem;
	}
	
	/* [ Icon ] */
	.followBox ul { font-size: 1rem; }
	.followBox a { width: 60px; }
	.followBox img {
		width: 28px;
		height: 28px;
	}
} /* */

@media print { /* Print */
	.followBox { display: none; }
} /* */

/*======================================================================*
 *  [ siteMap | サイトマップ ]
 *======================================================================*/

.siteMap {
	display: -webkit-flex;
	display: flex;
	line-height: 1.2;
}
.siteMap > div {
	padding: 0 25px;
	border-right: 1px solid #b2b2b2;
}
.siteMap .studio {
	width: 50%;
	border-left: 1px solid #b2b2b2;
}
.siteMap .shop, 
.siteMap .other { width: 25%; }
.siteMap a {
	color: #666;
	text-decoration: none;
}
.siteMap a:hover, 
.siteMap a:active {
	color: #505050;
	text-decoration: underline;
}

/* [ Title ] */
.siteMap > div > p {
	margin-bottom: 20px;
	/* padding-top: 15px; */
	/* background: url(../img/color.svg) left top no-repeat; */
	background-size: 44px 6px;
	font-size: 1.4rem;
	font-weight: 500;
}
.siteMap > div > ul + p { margin-top: 30px; }

/* [ List ] */
.siteMap > div > ul {
	list-style: none;
	font-size: 1.2rem;
}
.siteMap > div > ul li:first-child { margin-top: -5px; }
.siteMap > div > ul a {
	padding: 5px 0;
	color: #666;
}
.siteMap > div > ul a:hover, 
.siteMap > div > ul a:active { color: #505050; }
.siteMap .studio ul {
	float: left;
	width: calc(50% - 13px);
}
.siteMap .studio ul + ul { margin-left: 25px; }

@media screen and (max-width: 767px) { /* Smartphone */
	.siteMap {
		display: block;
		margin: 0 -10px;
		border-top: 1px solid #d1d1d1;
	}
	.siteMap > div {
		width: 100% !important;
		padding: 0;
		border: none !important;
	}
	
	/* [ Title ] */
	.siteMap > div > p {
		margin: 0 !important;
		padding-top: 0;
		border-bottom: 1px solid #d1d1d1;
		background: none;
		font-size: 1.2rem;
		font-weight: normal;
	}
	.siteMap > div > p a {
		display: block;
		padding: 12px 20px;
		background: url(../img/arrow_nl_lgy.svg) right 14px center no-repeat;
		background-size: 6px 8px;
	}
	
	/* [ List ] */
	.siteMap > div > ul { display: none; }
} /* */

@media print { /* Print */
	.siteMap { display: none; }
} /* */

/*======================================================================*
 *  [ shareBox | SNSシェア ]
 *======================================================================*/

.shareBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin: 30px 0 10px;
}

/* [ Title ] */
.shareBox p { font-size: 1.3rem; }
.shareBox p::after {
	display: inline-block;
	width: 1.3em;
	margin-left: 5px;
	font-size: 1rem;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	content: "▲";
}

/* [ Icon ] */
.shareBox ul {
	display: -webkit-flex;
	display: flex;
	list-style: none;
	margin-left: 15px;
}
.shareBox li + li { margin-left: 10px; }
.shareBox img {
	width: 32px;
	height: 32px;
}

@media screen and (max-width: 767px) { /* Smartphone */
	.shareBox {
		-webkit-justify-content: center;
		justify-content: center;
		margin: 20px 0;
	}
	
	/* [ Title ] */
	.shareBox p { font-size: 1.1rem; }
	
	/* [ Icon ] */
	.shareBox ul { margin-left: 10px; }
} /* */

/*======================================================================*
 *  [ siteNav | サイトナビゲーション（主にスマホ） ]
 *======================================================================*/

.siteNav ul {
	display: none;
	list-style: none;
}

/* [ Pagetop ] */
.pageTop {
	display: block;
	position: fixed;
	right: -65px;
	bottom: -65px;
	width: 130px;
	height: 130px;
	background-color: #b2b2b2;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 100;
}
.pageTop:hover, 
.pageTop:active { background-color: #666; }
.pageTop img {
	position: absolute;
	top: 55px;
	left: 15px;
	width: 24px;
	height: 24px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.pageTop:hover img, 
.pageTop:active img { opacity: 1; }

@media screen and (max-width: 767px) { /* Smartphone */
	.siteNav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background: #a7b5a8;
		z-index: 2000;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: -webkit-transform ease .3s; /* Safari */
		transition: transform ease .3s;
	}
	.siteNav.active {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.siteNav ul {
		display: -webkit-flex;
		display: flex;
		border-top: 1px solid rgba(255,255,255,0.5);
		font-size: 1.1rem;
		font-family: Arial, sans-serif;
		text-align: center;
	}
	.siteNav li { width: 25%; }
	.siteNav li + li { border-left: 1px solid rgba(255,255,255,0.5); }
	.siteNav li a {
		display: block;
		padding: 15px 5px;
		background-color: #a7b5a8;
		color: #fff;
		text-decoration: none;
	}
	.siteNav li a:hover, 
	.siteNav li a:active { background-color: #8a9a8b; }
	.siteNav .pt a { background: #bdbdbd; }
	.siteNav .pt a:hover, 
	.siteNav .pt a:active { background: #989898; }
	.siteNav li img {
		width: 20px;
		height: 20px;
	}
	.siteNav li a:hover img, 
	.siteNav li a:active img { opacity: 1; }
	.siteNav li span {
		display: block;
		margin-top: 5px;
	}
	
	/* [ Pagetop ] */
	.pageTop { display: none; }
} /* */

@media print { /* Print */
	/* [ Pagetop ] */
	.pageTop { display: none; }
} /* */