@charset "UTF-8";

/*************************************************************
パーパスジャパン
[css/global.css]
15.12.21
**************************************************************/

/* 目次
-------------------------------------------------------------
1) ヘッダ  [header]
2) グローバルナビゲーション  [nav#global]
3) コンテンツ  [#contents]
4) 相談方法  [aside section#consultation]
5) SNS  [aside section#sns]
6) ページトップへ  [p.pagetop]
7) フッタ 専門店リンク  [footer section#ftLink]
8) フッタ 会社情報  [footer section#ftCompany]
-------------------------------------------------------------*/

/* 1) ヘッダ  [header]
-------------------------------------------------------------*/
header {
	position: relative;
}
	
header h1 {
	padding-top: 17px;
}

header ul.sns {
	display: flex;
	padding-top: 23px;
	padding-left: 25px;
}

header ul.sns li {
	padding: 0 5px;
}
	
header .fright ul {
	padding-top: 8px;
	padding-bottom: 10px;
}

header li.fleft {
	padding-right: 15px;
	margin-right: 15px;
	border-right: #bbb solid 1px;
}

@media screen and (max-width: 860px) {
	header h1 ~ div.fleft {
		float: none;
	}
	header ul.sns {
		float: right;
		display: flex;
		margin-right: 70px;
		padding-top: 12px;
		padding-left: 0;
		width: 90px;
	}
	header ul.sns li {
		padding: 0 3px;
	}
	header h2.f12 {
		font-size: 10px;
	}
	header h1 {
		padding: 5px 0;
		width: 40%;
	}
	header div.fleft + div.fright {
		clear: both;
		float: none;
		width: 100%;
		padding: 0;
	}
	header .fright ul {
		padding: 1px 0;
	}
	header .fright ul li.lh13 {
		width: 50%;
		padding: 2px 0;
		line-height: 1;
		text-align: center;
	}
	header .fright ul li.fleft {
		padding-right: 0;
		margin-right: 0;
		padding: 2px 0;
		border-right: #ccc dotted 1px;
		width: 50%;
	}
	header li span.f16 ,
	header li span.f19 {
		font-size: 13px;
		letter-spacing: 0.025em;
		line-height: 1em;
	}
	header li span.f12 {
		font-size: 10px;
	}
}

/* 2) グローバルナビゲーション  [nav#global]
-------------------------------------------------------------*/
nav#global {
	position: absolute;
	z-index: 500;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
}

nav#global ul {
	margin-left: 26px;
	position: relative;
}

nav#global li {
	float: left;
	height: 50px;
}

nav#global li a {
	display: block;
	line-height: 50px;
	height: 50px;
	padding-left: 25px;
	padding-right: 25px;
}

nav#global li a:first-child {
	padding-left: 27px;
}

nav#global a:hover,
#top li#nvTop a,
#select li#nvSelect a,
#theme li#nvTheme a,
#tourlist li#nvTour a,
#gone li#nvGone a,
#consult li#nvConsult a {
	background-color: rgba(102, 102, 102, 0.8);
}

@media screen and (max-width: 640px) {
	nav#global .f10,
	nav#global .f11,
	nav#global .f12,
	nav#global .f13,
	nav#global .f14,
	nav#global .f15,
	nav#global .f16,
	nav#global .f17,
	nav#global .f18,
	nav#global .f19,
	nav#global .f20,
	nav#global .f21,
	nav#global .f22,
	nav#global .f23,
	nav#global .f24,
	nav#global .f25,
	nav#global .f26,
	nav#global .f27,
	nav#global .f28,
	nav#global .f29,
	nav#global .f30,
	nav#global .f34,
	nav#global .f36,
	nav#global .f38 {
		font-size: 11px!important;
	}
	nav#global {
		box-shadow: none;
	}
	nav#global .container {
		width: 100%;
	}
	nav#global ul {
		margin: 0;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		overflow: hidden;
	}
	nav#global li {
		float: left;
		padding: 0;
		width: 33.3333%;
		height: auto;
	}
	nav#global li:first-child {
		width: 16%;
	}
	nav#global li#nvSelect {
		width: 40%;
	}
	nav#global li#nvTheme {
		width: 44%;
	}

	nav#global li a {
		display: block;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 1em 0;
		line-height: 1;
		height: 3.2em;
		text-align: center;
	}
	nav#global li a:first-child {
	    padding-left: 0;
	}
}
@media screen and (min-width: 641px) and (max-width: 860px) {
	nav#global .f10,
	nav#global .f11,
	nav#global .f12,
	nav#global .f13,
	nav#global .f14,
	nav#global .f15,
	nav#global .f16,
	nav#global .f17,
	nav#global .f18,
	nav#global .f19,
	nav#global .f20,
	nav#global .f21,
	nav#global .f22,
	nav#global .f23,
	nav#global .f24,
	nav#global .f25,
	nav#global .f26,
	nav#global .f27,
	nav#global .f28,
	nav#global .f29,
	nav#global .f30,
	nav#global .f34,
	nav#global .f36,
	nav#global .f38 {
		font-size: 11px!important;
	}
	nav#global {
		box-shadow: none;
	}
	nav#global .container {
		width: 100%;
	}
	nav#global ul {
		margin: 0;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		overflow: hidden;
	}
	nav#global li {
		float: left;
		padding: 0;
		width: 16.666%;
		height: auto;
	}
	nav#global li:first-child {
		width: 12.666%;
	}
	nav#global li#nvSelect {
		width: 18.666%;
	}
	nav#global li#nvTheme {
		width: 18.666%;
	}
	nav#global li a {
		display: block;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 1em 0;
		line-height: 1;
		height: 3.2em;
		text-align: center;
	}
	nav#global li a:first-child {
	    padding-left: 0;
	}
}
/* 3) コンテンツ  [#contents]
-------------------------------------------------------------*/
#contents {
}

/* 4) 相談方法  [aside section#consultation]
-------------------------------------------------------------*/
#consultation {
	margin-top: 30px;
	border: #ddd solid 1px;
}

#consultation h3 {
	border-bottom: #ccc dotted 1px;
}

#consultation section {
	margin: 14px 20px 20px;
}

#consultation h4 span,
#consultation h4 i {
	display: table-cell;
	vertical-align: middle;
}

/* メールでお問い合わせ */
#consultation section.fleft {
	width: 518px;
}

#consultation .fleft p.btn {
	margin: 11px 0 15px;
}

#consultation .fleft li {
	margin-top: 10px;
	padding-left: 1em;
	text-indent: -1em;
}

/* 電話・来社でお問い合わせ */
#consultation section.fright {
	width: 378px;
}

#consultation .fright dt {
	float: left;
	width: 94px;
	clear:left;
	margin-top: 15px;
}

#consultation .fright dd {
	float: left;
	width: 284px;
	line-height: 1.2;
	margin-top: 10px;
}

#consultation .fright .bg_bk06 {
	margin-top: 16px;
	padding: 9px 13px;
}

@media screen and (max-width: 860px) {

	#consultation {
		margin-top: 30px;
		border: #ddd solid 1px;
	}
	#consultation h3 {
		border-bottom: #ccc dotted 1px;
	}
	#consultation section {
		margin: 0;
	}
	#consultation h4 {
		padding: 0.4em 0;
		line-height: 1em;
		font-size: 26px!important;
		text-align: center;
	}
	#consultation h4 span,
	#consultation h4 i {
		display: inline-block;
		vertical-align: middle;
	}
	#consultation h4 span {
		font-size: 18px!important;
		text-indent: 0.6em!important;
	}
	/* メールでお問い合わせ */
	#consultation section.fleft {
		float: none;
		width: 100%;
	}
	#consultation .fleft p.btn {
		margin: 0 auto;
		width: 86%;
	}
	#consultation .fleft ul {
		margin: 0 auto;
		width: 90%;
	}
	#consultation .fleft li {
		margin-top: 1em;
		padding-left: 0;
		line-height: 1.2em;
		text-indent: 0;
	}
	/* 電話・来社でお問い合わせ */
	#consultation section.fright {
		float: none;
		width: 100%;
		text-align: center;
	}
	#consultation .fright dl {
		display: inline-block;
		margin: 0 auto;
		padding: 0 0 5%;
	}
	#consultation .fright dt {
		float: none;
		width: 100%;
		clear: both;
		margin: 0;
		text-align: left;
	}
	#consultation .fright dd + dt {
		padding-top: 5%;
	}
	#consultation .fright dd {
		float: none;
		display: inline-block;
		width: 100%;
		line-height: 1;
		margin: 0;
		text-align: left;
	}
	#consultation .fright dd span.f30.bold.eng.ls1{
		letter-spacing: -0.025em;
	}
	#consultation .fright .bg_bk06 {
		margin-top: 0;
		padding: 1em;
		text-align: left;
	}

}

/* 5) SNS  [aside section#sns]
-------------------------------------------------------------*/
#sns {
	margin-top: 30px;
}

#sns .fright {
	width: 475px;
	height: 248px;
	border: #eee solid 1px;
}
@media screen and (max-width: 860px) {
	#sns {
		display: none;
	}
}
/* 6) ページトップへ  [p.pagetop]
-------------------------------------------------------------*/
p.pagetop {
	margin-right: 50px;
	margin-top: 40px;
}
@media screen and (max-width: 860px) {
	p.pagetop {
		margin: 0;
		padding-top: 15px;
		overflow: hidden;
	}
	p.pagetop a {
		float: right;
		display: block;
		width: 25%;
	}
}
/* 7) フッタ 専門店リンク  [footer section#ftLink]
-------------------------------------------------------------*/
#ftLink {
	padding-top: 18px;
	padding-bottom: 6px;
}

#ftLink h3 {
	background: url(../images/global/line01.png) repeat-x center;
	margin-bottom: 14px;
}

#ftLink h3 span {
	padding-left: 20px;
	padding-right: 20px;
}

#ftLink nav h4 {
	border-bottom: #8da2c7 solid 3px;
	margin-bottom: 7px;
}

#ftLink nav ul {
	margin-bottom: 10px;
}

#ftLink div.fleft {
	margin-left: 28px;
}

#ftLink li.fleft {
	margin-left: 26px;
}

#ftLink nav .ml0 {
	margin-left: 0;
}

#ftLink nav li {
	line-height: 1.8;
}

#ftLink nav ul.child li {
	text-indent: 1em;
	background: url(../images/global/line02.png) no-repeat 3px center;
}

#ftLink nav ul.child li:last-child {
	background-image: url(../images/global/line03.png);
}

#ftLink nav li.line2 {
	line-height: 1.2;
	padding-top: 4px;
	padding-bottom:4px;
}

#ftLink nav li img {
	margin-top: 8px;
}

@media screen and (max-width: 860px) {
	#ftLink {
		padding: 0;
	}

	#ftLink h3 {
		background: none;
		margin-bottom: 0;
	}

	#ftLink h3 span {
		display: block;
		padding: 1em 0;
		background: transparent;
		font-size: 18px;
	}
	#ftLink nav {
		border-bottom: 3px solid #8da2c7;
		font-size: 15px;
	}
	#ftLink nav h4 {
		clear: both;
		margin-bottom: 0;
		border-top: 3px solid #8da2c7;
		border-bottom: 0;
		padding: 0.8em;
		cursor: pointer;
	}
	#ftLink nav div.fleft h4:after {
		position: absolute;
		content: "\f13a";
		font-family: FontAwesome;
		right: 10px;
		color: #3a65ae;
	}
	#ftLink nav div.fleft h4.open:after {
		content: "\f139";
	}
	#ftLink nav ul {
		display: none;
		margin-bottom: 0;
		padding: 0.5em 0;
		font-size: 13px;
		overflow: hidden;
	}
	#ftLink nav .ml0 ul li ul {
		padding: 0;
	}
	#ftLink nav ul.open ,
	#ftLink nav ul.open ul {
		display: block;
	}
	#ftLink nav ul.open ul {
		width: 100%;
	}
	#ftLink div.fleft {
		float: none;
		margin: 0;
	}
	#ftLink div.fright {
		float: none;
		margin: 0;
	}
	#ftLink div.fright ul {
		display: block;
		padding: 0 0 1em 1em;
	}
	#ftLink div.ml0 li.fleft {
		margin: 0;
		margin: 0 1% 1%;
		width: 31.333%;
	}

	#ftLink nav .ml0 {
		margin-left: 0;
	}

	#ftLink nav li {
		float: left;
		margin: 0;
		margin: 0 1% 1%;
		width: 48%;
		line-height: 1.4;
	}
	#ftLink nav .ml0 .fleft ul li {
		float: none;
		margin: 0;
		width: 100%;
	}
	#ftLink nav ul.child li {
		width: 100%;
		text-indent: 0;
		background: transparent;
	}
	#ftLink nav ul.child li:before {
		content: "\2502";
		margin-right: 5px;
		color: #b2b2b2;
	}
	#ftLink nav ul.child li:last-child {
		background: transparent;
	}
	#ftLink nav ul.child li:last-child:before {
		content: "\2514";
		margin-right: 5px;
		color: #b2b2b2;
	}
	#ftLink nav li.line2 {
		line-height: 1.2;
		padding-top: 4px;
		padding-bottom:4px;
	}

	#ftLink nav li img {
		display: block;
		margin: 5% auto 0;
		width: 70%;
	}
	#ftLink nav li a {
		display: inline-block;
		padding: 0.3em 0.5em;
	}
	#ftLink nav .ml0 li a {
		padding: 0.3em 0;
	}
	#ftLink nav div.fright li{
		float: none;
		margin: 0;
		width: 100%;
	}
}
/* 8) フッタ 会社情報  [footer section#ftCompany]
-------------------------------------------------------------*/
/* 会社情報 */
#ftCompany .container:first-child {
	padding-top: 17px;
	padding-bottom: 30px;
}

#ftCompany div.fleft {
	margin-right: 68px;
}

#ftCompany div.fleft img {
	margin-top: 13px;
	margin-bottom: 21px;
}

#ftCompany p span.f34 {
	vertical-align: middle;
}
/* リンクとコピーライト */
#ftCompany .bg_bk12 {
	padding-top: 13px;
	padding-bottom: 25px;
}
	
#ftCompany li {
	display: inline;
	padding-left: 9px;
	padding-right: 5px;
	border-left: #999 solid 1px;
}

#ftCompany ul li:first-child {
	border-left: none;
}

#ftCompany ul {
	margin-right: 3px;
	margin-bottom: 22px;
}

@media screen and (max-width: 860px) {
	#ftCompany .container:first-child {
		display: none;
	}
	#ftCompany .bg_bk12 {
		padding: 1em 0 0;
	}
	#ftCompany .bg_bk12 .container {
		display: block;
		padding: 0;
	}
	#ftCompany .bg_bk12 .container ul {
		padding-bottom: 1em;
	}
	#ftCompany .bg_bk12 .container ul li ,
	#ftCompany .bg_bk12 .container ul li:first-child {
		border: 0;
	}
	#ftCompany .bg_bk12 .container ul li {
		float: left;
		display: block;
		width: 50%;
		padding: 0;
	}
	#ftCompany .bg_bk12 .container ul li:last-child {
		display: none;
	}
	#ftCompany .bg_bk12 .container ul li a {
		display: block;
		padding: 0.5em;
		text-align: left;
		font-size: 14px;
	}
	#ftCompany .bg_bk12 .container p {
		clear: both;
		padding: 3em 0;
	}
}

.js_overlay ,
.side-menu {
	display: none;
}

@media screen and (max-width: 860px) {

/* 01) グローバルナビゲーション・ヘッダ
-------------------------------------------------------------*/
/*---------- グローバルナビゲーション ----------*/
/* サイドオープン時にメインコンテンツを覆う部分 */
.overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 3;
}
.side-open .overlay {
	visibility: visible;
	background: rgba(0,0,0,.6);
	-webkit-transform: translate3d(-260px, 0, 0);
	transform: translate3d(-260px, 0, 0);
}
.side-open .overlay::after {
	visibility: visible;
	color: rgba(255,255,255,.8);
}

/* ドロワーメニュー */
.side-open .side-menu {
	display: block;
}
.side-menu {
	position: fixed;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 260px;
	height: 100%;
	padding-top: 60px;
	text-align: left;
	font-size: 18px;
	background: #fff;
	z-index: 1;
}
.side-menu_ul {
	width: 100%;
	height: 100%;
	display: block;
	overflow: auto;
}
.side-menu_ul li a {
	position: relative;
	display: block;
	padding: 11px 0 11px 55px;
	color: #000;
}
.side-menu_ul li a:before {
	content: '';
	display: block;
	position: absolute;
	top: 14px;
	left: 22px;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-size: 17px 17px;
}
.side-menu_ul li:nth-child(1) a:before { background-image: url(../sp/images/icon_home.png); }
.side-menu_ul li:nth-child(2) a:before { background-image: url(../sp/images/icon_area.png); }
.side-menu_ul li:nth-child(3) a:before { background-image: url(../sp/images/icon_theme.png); }
.side-menu_ul li:nth-child(4) a:before { background-image: url(../sp/images/icon_tour.png); }
.side-menu_ul li:nth-child(5) a:before { background-image: url(../sp/images/icon_report.png); }
.side-menu_ul li:nth-child(6) a:before { background-image: url(../sp/images/icon_consult.png); }
.side-menu_ul li:nth-child(7) a:before { background-image: url(../sp/images/icon_corp.png); }
.side-menu_ul li:nth-child(8) a:before { background-image: url(../sp/images/icon_PC.png); }

/* 開閉ボタン */
.side-menu-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 48px;
	z-index: 4;
	background: #000 url(../sp/images/menu.png) no-repeat center 34px;
	background-size: 36px auto;
}
.toggle {
	position: relative;
	width: 26px;
	height: 21px;
	margin: 9px 17px 0;
}
.toggle span {
	position: absolute;
	display: block;
	width: 100%;
	border-bottom: #fff solid 3px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.toggle span:nth-child(1) {top:0}
.toggle span:nth-child(2) {top:9px}
.toggle span:nth-child(3) {top:18px}
.side-open span:nth-child(1) {
	top: 9px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
.side-open span:nth-child(2) ,
.side-open span:nth-child(3) {
	top: 9px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg)
}
/*
.side-open { position: fixed; }
*/
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;}
.side-open .wrapper {
	-webkit-transform: translate3d(-260px, 0, 0);
	transform: translate3d(-260px, 0, 0);
}

header.spb {
	margin-bottom: 10px;
	width: 100%;
	height: 48px;
	background: #fff;
	box-shadow: 0 0 5px #ccc;
}
header.spb h1 {
	float: left;
	width: 165px;
	padding: 8px 0 0 5px;
}

}