@charset "UTF-8";

/* ==================================================
ヘッダー
================================================== */

.header {
	width: 100vw;
	height: 76px;
	text-align: center;
	background-image: url('../images/back.png');
    background-repeat: repeat;
	z-index: 999;
	color: rgba(0, 0, 0, 1.0);
}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
}

.pc_header_menu {
	display: none;
}
.sp_header_menu {
	display: block;
}
.pc_menu {
	display: none;
}
.sp_menu {
	display: block;
}
.header .logo_area {
	padding-top: 0;
	padding-bottom: 0;
	width: 100%;
	height: 100%;
}
.header .logo_area ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
	align-items: center;
}
.header .logo_area ul li span {
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
}
.header .logo_area .logo_sub_area ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
	align-items: center;
}
.header .logo_area .logo_sub_area ul li span {
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	padding-right:40px;
}
.header .logo_area .header_logo_size {
	padding: 5px;
	width: 70px;
}
.header .logo_area .header_phone_size {
	width: 20px;
}
.header .logo_area .header_phone_text_size {
	width: 20px;
}
.header .logo_name {
	width: 150px;
}
.header .sns_ico_size {
	width: 24px;
}
.header .design_line {
	height: 3px;
	background-color: #c2A2DA;
}


/* ハンバーガーボタン
-------------------------------------------------- */
#navToggle {
    display: none; /*通常時は非表示にしておきます*/
    position: absolute; /*bodyに対しての絶対位置指定です*/
    right: 20px;
    top: 13px;
    width: 30px;
    height: 25px;
    cursor: pointer;
	z-index: 5;
}

#navToggle div {
	position: relative
} /*spanの絶対位置指定の親にします*/

#navToggle span {
    display: block;
    position: absolute; /*#navToggle div に対して*/
    width: 100%;
    border-bottom: solid 3px #777;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out
}

#navToggle span:nth-child(1) {
	top:5px
}

#navToggle span:nth-child(2) {
	top:16px
}

#navToggle span:nth-child(3) {
	top:27px
}

/*header menu*/
/*nav要素は絶対位置指定にして、ビューの外側に置いて見えなくします。
  nav の中の ul li は横並びを解除して縦組みにレイアウトし直します。*/
.header nav {
    position: absolute; /*bodyに対しての絶対位置*/
    right:0;
    /*top: -500px;*/ /*通常時はビュー外*/
	right: -1200px; /*通常時はビュー外*/
	top: 0px;
    background: rgba(255, 255, 255, 0.92);
    width: 40%;
    padding: 0 5px;
    -webkit-transition: .5s ease-in-out; /*transitionで動きを*/
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    text-align: left;
	z-index: 4;
	border: solid 1px #ccc;
}
.header nav ul {
	margin: 0
    line-height: 1;
	color: #222;
}
.header nav ul li {
    display: block;
	margin-left: 3px;
    border-bottom: dotted 1px #222;
    line-height: 3
}
.header nav ul li a {
	display: block;
	font-size: 14px;
	color: inherit
}
.header nav ul li a img {
	display: block;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	color: inherit
}
.header nav ul li::after {
	content: ''
}
.header nav ul li:last-child {
	border-bottom: none
}

.menu_logo {
	width: 80px;
}

.icon_size {
	width: 30px;
	vertical-align: middle;
}

/* Toggle(Button) */
/*display:noneだったボタンを display:blockにして表示します*/
#navToggle {
	display:block
}

/* Click Toggle(Button) */
/*ここから jQueryで header要素に付けた「.openNav」を利用します*/
/*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
/*最初のspanをマイナス45度に*/
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)
}

/*2番目と3番目のspanを45度に*/
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
    top: 11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)
}

/*header menu*/
/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
.openNav nav {
	/*
    -moz-transform: translateY(551px);
    -webkit-transform: translateY(551px);
    transform: translateY(551px)
	*/
	-moz-transform: translateX(-1200px);
    -webkit-transform: translateX(-1200px);
    transform: translateX(-1200px)
}


/* ==================================================
フッター
================================================== */

.footer_fixed {
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 30px;
	padding: 0;
	background-image: url('../images/back.png');
	text-align: center;
	z-index: 999;
}

.footer {
	width: 100vw;
	height: 30px;
	text-align: center;
	/*background-color: rgba(0, 66, 37, 1.0);*/
	/*background-color: #FFFFFF;*/
	background-image: url('../images/back.png');
    background-repeat: repeat;
	/*background-size: cover;*/
	z-index: 999;
	color: rgba(0, 0, 0, 1.0);
}

/*
.footer_fixed {
	position: fixed;
	top: 100vh;
	left: 0;
}
*/

.footer_design_line {
	height: 3px;
	background-color: #c2A2DA;
}



/* 上はスマホに適用するスタイルを書く*/
@media screen and (min-width:820px) and ( max-width:959px) {
	.pc_header_menu {
		display: block;
	}
	.sp_header_menu {
		display: none;
	}
	.pc_menu {
		display: block;
	}
	.sp_menu {
		display: none;
	}
	/*
	.header {
		height: 100px;
	}
	.header .logo_area ul {
	    display: flex;
	}
	.header .logo_area ul li:first-of-type {
		margin-right: auto;
	}
	.header .logo_area .header_logo_size {
		margin-left: 20px;
		width: 100px;
	}
	*/
}
@media screen and (min-width:960px) and ( max-width:1280px) {
	.pc_header_menu {
		display: block;
	}
	.sp_header_menu {
		display: none;
	}
	.pc_menu {
		display: block;
	}
	.sp_menu {
		display: none;
	}
	/*
	.header {
		height: 100px;
	}
	.header .logo_area ul {
	    display: flex;
	}
	.header .logo_area ul li:first-of-type {
	    margin-right: auto;
	}
	.header .logo_area .header_logo_size {
		margin-left: 20px;
		width: 100px;
	}
	*/
}
@media screen and (min-width:1281px) {
	.pc_header_menu {
		display: block;
	}
	.sp_header_menu {
		display: none;
	}
	.pc_menu {
		display: block;
	}
	.sp_menu {
		display: none;
	}
}