@charset "utf-8";

/* ==============================================================
   #共通設定
   ============================================================== */
html,
body {
	font-family: "メイリオ", Meiryo, sans-serif;
	color: #231815;
	height: 100%;
}

.vr_viewer {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.vr_viewer iframe, 
.vr_viewer object,  
.vr_viewer embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==============================================================
   #サイトコンテンツ幅調整
   ============================================================== */
.section {
	padding: 1.5rem 0;
}

/* ==============================================================
   #余白
   ============================================================== */

.mb0{ margin-bottom:0 !important; }
.mb5{ margin-bottom:0.5rem !important; }
.mb10{ margin-bottom:1.0rem !important; }
.mb15{ margin-bottom:1.5rem !important; }
.mb20{ margin-bottom:2.0rem !important; }
.mb30{ margin-bottom:3.0rem !important; }

.mt0{ margin-top:0 !important; }
.mt5{ margin-top:0.5rem !important; }
.mt10{ margin-top:1.0rem !important; }
.mt15{ margin-top:1.5rem !important; }
.mt20{ margin-top:2.0rem !important; }
.mt30{ margin-top:3.0rem !important; }

.pb0{ padding-bottom:0 !important; }
.pb5{ padding-bottom:0.5rem !important; }
.pb10{ padding-bottom:1.0rem !important; }
.pb15{ padding-bottom:1.5rem !important; }
.pb20{ padding-bottom:2.0rem !important; }
.pb30{ padding-bottom:3.0rem !important; }

.pt0{ padding-top:0 !important; }
.pt5{ padding-top:0.5rem !important; }
.pt10{ padding-top:1.0rem !important; }
.pt15{ padding-top:1.5rem !important; }
.pt20{ padding-top:2.0rem !important; }
.pt30{ padding-top:3.0rem !important; }

/* ==============================================================
   #テーブル
   ============================================================== */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1rem auto;
}

table,
td,
th {
	border: 1px solid #bbb;
	font-size: 0.8575rem;
}

th{
	background-color: #eee;
	font-weight: normal;
}

/* ==============================================================
   #ヘッダー
   ============================================================== */
header {
	background-color: #FFF;
	height:50px;
	margin: auto;
	text-align: center;
}
#logo {
	display: inline-block;
	vertical-align: middle;
	height: 50px;
	margin: auto;
}
#logo a {
	display: block;
	padding: 7px 0 7px 15px;
}
#logo img {
	height: 36px;
	display: block;
	width: auto;
	margin: auto;
}
@media screen and (min-width: 768px) { /*--- 1200px ---*/
header {
	height: 60px;
	position: inherit;
}
#logo {
	height: 60px;
}
#logo a {
	padding: 12px 0;
}
#logo img {
	height: 36px;
}
}

/* =============================================================
   #フッター
   ============================================================== */
#site-list {
	margin:  1rem auto;
	padding: 0;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: flex;
	-ms-flex-wrap: wrap;/*--- IE10用 ---*/
	-webkit-flex-wrap: wrap;/*--- safari（PC）用 ---*/
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
}
#site-list li {
	background-color:  #FFF;
	display: block;
	text-align: center;
	line-height: 1.2;
	width: 100%;
	border: #DDD solid 1px;
	margin: auto;
}
#site-list li + li {
	margin: -1px 0 0 0;
}
@media (min-width: 768px) {
#site-list li {
	width: 50%;
}
#site-list li + li {
	margin: 0 0 0 -1px;
}
}
#site-list li a {
	display: block;
	padding: 1rem 0;
	color: #F76F00;
	text-decoration: none;
	font-family: Gothic-B;
}
#site-list li a:hover {
	background-color: #F76F00;
	color: #FFF;
}
#site-list li a span {
	font-size: 12px;
	display: block;
}
#site-list li a span + span {
	font-size: 16px;
}
@media (min-width: 768px) {
#site-list li a {
	display: block;
	padding: 2rem 0;
}
#site-list li a span {
	font-size: 14px;
}
#site-list li a span + span {
	font-size: 20px;
}
}
   
footer {
	background-color: #FFF;
	border-top: #DDD solid 1px;
	color: #888;
	overflow: hidden;
}

#footer-logo {
	width: 100%;
	max-width: 220px;
	margin: auto;
}

.footer-info {
	text-align: center;
}
.footer-info p {
	font-size: 0.875rem;
	line-height: 1.6;
}
.footer-info p strong {
	display: block;
	margin-bottom: 5px;
}
@media screen and (min-width: 1200px) {
.footer-info {
	text-align: left;
}
}

#copyright {
	font-size: 11px;
	text-align: center;
	line-height: 40px;
	margin: auto auto 1rem;
}
#copyright span {
	display: inline-block;
}

/*外部リンクアイコン*/
.external {
	background-image: url(../imgs/theme/link.svg);
	background-position: center;
	background-size: 10px auto;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	right: -1rem;
}
.external.white {
	background-image: url(../imgs/theme/link_white.svg);
}

/* ==============================================================
   #page-top
   ============================================================== */

#page-top {
	background-color: #F76F00;
	border-radius: 4px;
display: block;
    height: 44px;
    width: 44px;
	position: fixed;
	right: 5px;
    /*bottom: 20px;*/
	z-index: 300;
}
#page-top:hover {
	background-color: #F76F00;
}
#page-top > i {
	width: 20px;
	height: 20px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#page-top > i::after {
	content: "";
	border-top: #FFF solid 3px;
	border-left: #FFF solid 3px;
	width: 14px;
	height: 14px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin: auto;
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	bottom: 0;
	transition: ease-out .2s;
	-webkit-transition: ease-out .2s;
}
#page-top:hover > i::after {
	top: -5px;
}
@media screen and (min-width: 768px) {
	#page-top {
    height: 60px;
    width: 60px;
		position: fixed;
		right: 20px;
	}
}