@charset "UTF-8";
/* CSS Document */

/*==============================
基本設定
==============================*/

/*全タグ線幅、padding含むサイズ設定*/
*{
	box-sizing: border-box;
}

html{
	width: 100%;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body{
	width: 100%;
	font-family: 'Noto Serif JP', serif;
	font-size: 1.4rem;
	font-weight: 400;
	color: #4D4D4D;
    background: url(../images/common/bg_line.svg) repeat-y left top / 176px 1px,
                url(../images/common/bg_back.jpg) repeat;/*追加*/
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;/*スマホで横持ちした時フォントサイズが変わらないように*/
}

/*リンク設定*/
a:link,
a:visited,
a:hover,
a:active{
	color: #5E6164;
	text-decoration: none;
}

a:hover{
	opacity: 0.8;
}

/*イメージ設定*/
img{
	width: 100%;
	height: auto;
}

#wrapper{
	width: 100%;
}

/*==============================
アニメーション設定
==============================*/


.fadeUpAnime{
	transform: translateY(100px);
	opacity: 0;
}

.fadeUpAnime.action{
	animation: fadeUp 1s forwards ease-out;
}

@keyframes fadeUp{
	0{
		transform: translateY(100px);
		opacity: 0;
	}
	70%{
		transform: translateY(5px);
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}

/*==============================
共通設定
==============================*/

.bp{
	display: block;
}

.more,
.moreW{
	text-align: center;
}

.more a,
.moreW a{
	font-size: 1.4rem;
	font-weight: 600;
	position: relative;
	left: -20px;
}

.more a{
	color: #4D4D4D;
}

.moreW a{
	color: #FFF;
}

.more a::before,
.moreW a::before,
.more a::after,
.moreW a::after{
	content: "";
	display: block;
	height: 24px;
	position: absolute;
	top: 0;
	transition: 0.15s;
}

.more a::before,
.moreW a::before{
	width: 24px;
	right: -50px;
}

.more a::before{
	background: url(../images/common/bg_round.svg) no-repeat center center / cover;
}

.moreW a::before{
	background: url(../images/common/bg_round_white.svg) no-repeat center center / cover;
}

.more a::after,
.moreW a::after{
	width: 39px;
	right: -45px;
}

.more a::after{
	background: url(../images/common/bg_arrow.svg) no-repeat center center / cover;
}

.moreW a::after{
	background: url(../images/common/bg_arrow_white.svg) no-repeat center center / cover;
}

.more a.active::before,
.moreW a.active::before{
	right: -40px;
	transition: 0.3s;
}


.more a.active::after,
.moreW a.active::after{
	right: -65px;
	transition: 0.3s;
}


/*==============================
ヘッダー設定
==============================*/

/*ヘッダー全体*/
#headerWrap{
	width: 100%;
	background: #FFF;
}

/*ヘッダーTOP*/
.headerTop{
	padding: 20px 30px 0;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*ロゴ*/
.headerTop h1{
	width: 285px;
}

/*------------------------------
サブナビゲーション設定
------------------------------*/

/*サブナビ*/
#subNav{
	margin: 5px 0 0 0;
	width: 70px;
}

/*サブナビ SNS*/
#subNav .navInner{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*サブナビ SNS アイコン*/
#subNav li{
	width: 26px;
}

/*------------------------------
ハンバーガーメニュー設定
------------------------------*/

.humbugurMenu{
	display: none;
	visibility: visible;
	overflow: visible;
	cursor: pointer;
	position: absolute;
	right: 15px;
	top: 20px;
	z-index: 999;
}

.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all 0.3s;
}

.menu-trigger {
	position: relative;
	width: 26px;
	height: 26px;
}

.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: #666666;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
	
}
.menu-trigger span:nth-of-type(2) {
	top: calc(50% - 4px /2);
}

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

.menu-trigger.active {
	transform: rotate(0deg);
}

.menu-trigger.active span {
	background: #FFF;
}

.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(11px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
	transform: translateY(0) rotate(45deg);
}

.menu-trigger.active span:nth-of-type(3) {
	opacity: 0;
}

/*------------------------------
グローバルナビゲーション設定
------------------------------*/


/*グローバルナビゲーション全体*/
#globalNav{
	width: 100%;
}

/*グローバルナビゲーション中身*/
#globalNav .navInner{
	margin: 0 auto;
	padding: 30px 0;
	width: 820px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*グローバルナビゲーション リスト*/
#globalNav .navInner li{
	text-align: center;
}

/*グローバルナビゲーション リンク*/
#globalNav .navInner li a{
	color: #4D4D4D;
	font-size: 1.4rem;
	font-weight: 600;
}
#globalNav .navInner li a.active {
	color: #fff;
	background: #4d4d4d;
	padding: 4px 10px;
}

/*==============================
フッター設定
==============================*/

/*フッター全体*/
#footerWrap{
	padding: 100px 0 0 0;
	width: 100%;
	background: #FFF;
	position: relative;
}

/*スクロールトップ*/
.scrollTop{
	width: 18px;
	position: absolute;
	right: 85px;
	top: -130px;
	z-index: 50;
}

/*フッターナビ全体*/
#footerNav{
	margin: 0 auto 145px;
	width: 580px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*フッターナビリスト*/
#footerNav ul li{
	margin: 25px 0 0 0;
}

/*フッターナビリスト 1つ目*/
#footerNav > ul  > li:first-child{
	margin: 0;
}

/*フッターナビ リンク*/
#footerNav a{
	color: #666666;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: left;
}

/*フッターナビ 階層リンク*/
#footerNav .navChild{
	margin: 0 0 0 30px;
}

/*フッターナビ SNS*/
#footerNav .sns{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

/*フッターナビ SNS アイコン*/
#footerNav .sns li{
	margin: 0 15px 0 0;
	width: 26px;
}

/*コピーライト*/
small{
	padding: 30px 0;
	display: block;
	width: 100%;
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
	background: #1F2F50;
}

/*==============================
レスポンシブ設定
==============================*/

/*768px以下の場合*/
@media screen and (max-width:768px){

	 body.active{
	 	height: 100vh;
	 	overflow: hidden;
	 }

	/*==============================
	ヘッダー設定
	==============================*/

	/*ヘッダーTOP*/
	.headerTop{
		padding: 15px 20px 15px 15px;
	}

	/*ロゴ*/
	.headerTop h1{
		width: 220px;
	}

	/*------------------------------
	サブナビゲーション設定
	------------------------------*/

	/*サブナビ*/
	#subNav{
		margin: 5px 40px 0 0;
	}

	/*------------------------------
	ハンバーガーメニュー設定
	------------------------------*/

	.humbugurMenu{
		display: block;
	}

	/*------------------------------
	グローバルナビゲーション設定
	------------------------------*/

	/*グローバルナビゲーション全体*/
	#globalNav{
		width: 100%;
		height: 100vh;
		background: #4D4D4D;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		opacity: 0.8;
		position: absolute;
		z-index: 99;
		top: -120%;
		left: 0;
		transition: 0.15s;
	}

	/*グローバルナビゲーション全体*/
	#globalNav.active{
		top: 0;
		transition: 0.3s;
	}

	/*グローバルナビゲーション中身*/
	#globalNav .navInner{
		padding: 0;
		width: 560px;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
	}

	/*グローバルナビゲーション リンク*/
	#globalNav .navInner li a{
		display: block;
		padding: 30px 0;
		color: #fff;
	}
	#globalNav .navInner li a.active {
		color: #4d4d4d;
		background: #fff;
		padding: 8px 10px;
		width: 80%;
		margin: auto;
	}

	/*==============================
	フッター設定
	==============================*/

	/*フッター全体*/
	#footerWrap{
		padding: 60px 0 0 0;
	}

	/*スクロールトップ*/
	.scrollTop{
		width: 15px;
		right: 50px;
	}

	/*フッターナビ全体*/
	#footerNav{
		margin: 0 auto 60px;
		width: 540px;
	}

	/*コピーライト*/
	small{
		padding: 20px 0;
	}

}


/*580px以下の場合*/
@media screen and (max-width:580px){

	/*==============================
	基本設定
	==============================*/

	body {
		background: url(https://gigaplus.makeshop.jp/38marukatsu/common/bg_line.svg) repeat-y left top / 100px 1px,
		url(https://gigaplus.makeshop.jp/38marukatsu/common/bg_back.jpg) repeat;/*追加*/
	}

	/*==============================
	共通設定
	==============================*/

	.bp{
		display: inline;
	}

	/*==============================
	ヘッダー設定
	==============================*/

	/*ロゴ*/
	.headerTop h1{
		width: 200px;
	}

	/*------------------------------
	サブナビゲーション設定
	------------------------------*/

	/*サブナビ*/
	#subNav{
		margin: 3px 35px 0 0;
		width: 63px;
	}

	/*------------------------------
	ハンバーガーメニュー設定
	------------------------------*/

	.humbugurMenu{
		top: 17px;
	}

	/*==============================
	フッター設定
	==============================*/

	/*フッター全体*/
	#footerWrap{
		padding: 40px 0 0 0;
	}

	/*スクロールトップ*/
	.scrollTop{
		top: 20px;
		right: 30px;
	}

	/*フッターナビ全体*/
	#footerNav{
		margin: 0 auto 40px;
		width: 160px;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
	}

	/*フッターナビリスト 1つ目*/
	#footerNav > ul  > li:first-child{
		margin: 25px 0 0 0;
	}

	/*コピーライト*/
	small{
		padding: 15px 0;
	}



}


/*360px以下の場合*/
@media screen and (max-width:375px){

	/*==============================
	ヘッダー設定
	==============================*/

	.headerTop{
		padding: 15px 20px 15px 8px;
	}



}