@charset "utf-8";

/* Navigation 固定
----------------------------------------------------------------------------------------------------*/
.header_box {
	top: 0;
	right: 0;
	z-index: 9999;
	position: fixed;
	width: 100%;
}
.header_box a {
	text-decoration: none;
	transition: .3s;
}
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
} 
@media screen and (max-width: 1199px){
	.header {
		width: 92.30769230769231%;
		padding-top: 3rem;
	}
}
@media screen and (min-width: 1200px){
	.header {
		width: 94.44444444444444%;
		padding-top: 4rem;
	}
}
/*logo*/
.header-logo{
	font-size: 1rem;
	z-index: 999999;
	line-height: 1;
}
.header-logo a{
	display: block;
}
.header-logo a:hover {
	opacity: 0.6;
}
.header-logo .logo-color,.logo-G{
	fill: #fff;
	transition: .3s;
}
.view .logo-G{
	fill: #b4b4b5;
}
.view .header-logo .logo-color{
	fill: #000;
}
.fixed .view .header-logo .logo-color,.fixed .view .logo-G{
	fill: #fff;
}
.header-logo svg{
	max-width: 100%;
	height: auto;
}
@media screen and (max-width: 1199px){
	.header-logo a{
		width: 13.6rem;
		padding-left: 1.388888888888889%;
	}
}
@media screen and (min-width: 1200px){
	.header-logo a{
		width: 22rem;
	}
}
/*header-menu-wrap*/
.header-menu-wrap{
	max-width: 32.8rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.header-menu-sns{
	width: 11rem;
	margin-right: 3rem;
	z-index: 999999;
	display: flex;
	justify-content: flex-end;
}
.header-menu-sns a{
	transition: .3s;
	display: block;
}
.header-menu-sns a:not(:last-of-type){
	margin-right: 1.5rem;
	min-width: 2.7rem;
}
.header-menu-sns a:hover{
	opacity: 0.6;
}
.header-menu-sns .sns-icon-color{
	fill: #fff;
	transition: .3s;
}
.view .header-menu-sns .sns-icon-color{
	fill: #000;
}
.fixed .view .header-menu-sns .sns-icon-color{
	fill: #fff;
}
.header-menu-sns svg{
	max-width: 100%;
	height: auto;
}
/*youtube*/
.header-menu-sns .sns-icon-color-youtube1,.header-menu-sns .sns-icon-color-youtube1{
	transition: .3s;
}
.header-menu-sns .sns-icon-color-youtube{
	fill: #fff;
}
.view .header-menu-sns .sns-icon-color-youtube{
	fill: #282828;
}
.fixed .view .header-menu-sns .sns-icon-color-youtube{
	fill: #fff;
}

/* -PC menu
--------------------------------------------------------------------------------------------- */
@media screen and (max-width: 575px){
	.header-menu-contact{
		display: none;
	}
}
@media screen and (min-width: 576px){
	.header-menu-contact{
		margin-right: 3rem;
		flex: 1;
		width: 11rem;
		line-height: 3.4rem;
		font-size: 1.4rem;
		z-index: 999999;
	}
	.header-menu-contact a{
		display: block;
		background-color: #fff;
		color: #313131;
		border-radius: 1.7rem;
		transition: .3s;
	}
	.header-menu-contact a:hover{
		background-color: #313131;
		color: #fff;
	}
	.view .header-menu-contact a{
		background-color: #313131;
		color: #fff;
		-webkit-filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
		        filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
	}
	.view .header-menu-contact a:hover{
		background-color: #fff;
		color: #313131;
	}
	.fixed .view .header-menu-contact a{
		background-color: #fff;
		color: #313131;
	}
	.fixed .view .header-menu-contact a:hover{
		background-color: #313131;
		color: #fff;
	}
}

/* -togglemenu.css
--------------------------------------------------------------------------------------------- */
.scroll_tgl_wrap {
	display: block;
	position: relative;
	top: 0;
	right: 0;
	z-index: 99999;
	width: 4.8rem;
	height: 4.8rem;
}
	/*Toggle*/
.Toggle {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	cursor: pointer;
	z-index: 6666;
}
.Toggle span {
	display: block;
	position: absolute;
	height: 1px;
	transition: background.3s, transform .3s ease-in-out;
	right: 0;
	width: 100%;
	background-color: #fff;
}
.view .Toggle span{
	background-color: #000;
}
.fixed .view .Toggle span{
	background-color: #fff;
}
.Toggle span:nth-child(1) {
	top: 37.5%;
}
.Toggle span:nth-child(2) {
	top: 58.33333333333333%;
}
/*Toggle.tgl-active*/
.Toggle.tgl-active span:nth-child(1) {
	top: 49%;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	max-width: 3.6rem;
	right: 1.4rem;
}
.Toggle.tgl-active span:nth-child(2) {
	top: 49%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	max-width: 3.6rem;
	right: 1.4rem;
}
/*togglewrap*/
.togglewrap {
	position: fixed;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: 0.6s ease-in-out;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
.togglewrap::-webkit-scrollbar{
	display: none;
}
/*togglewrap.active*/
.togglewrap.active {
	opacity: 1;
	visibility: visible;
}
/*body.fixed*/
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
/*tgl-contact-wrap*/
.tgl-contact-wrap {
	display: flex;
}
.tgl-contact-menu-wrap{
	flex: 1;
}
@media screen and (min-width:991px) and (max-width:1199px){
	.tgl-contact-wrap{
		height: 100%;
		align-items: center;
	}
}
@media screen and (max-width: 1199px){
	.tgl-contact-menu-pc-img{
		display: none;
	}
	.tgl-contact-menu-wrap{
		padding-right: 8.974358974358974%;
		padding-left: 8.974358974358974%;
		padding-top: 17rem;
		padding-bottom: 15rem;
		width: 100%;
	}
	.tgl-contact-menu-main{
		padding-bottom: 3rem;
	}
}
@media screen and (min-width: 1200px){
	.tgl-contact-wrap {
		align-items: flex-start;
	}
	.tgl-contact-menu-pc-img{
		width: 38.88888888888889%;
		position: sticky;
		min-height: 100vh;
		background-image: url("../images/tgl-contact-menu-pc-img.webp");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		top: 0;
	}
	.tgl-contact-menu-wrap{
		padding-right: 8.833333333333333%;
		padding-left: 8.833333333333333%;
		padding-top: 31.5rem;
		padding-bottom: 13.2rem;
	}
	.tgl-contact-menu-main{
		padding-bottom: 23rem;
	}
}

/* tgl contents
--------------------------------------------------------------------------------------------- */
/*header/footer共通*/
.common-header-footer-menu-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.common-header-footer-menu-wrap a,.header-footer-privacy-copy-wrap a{
	transition: .3s;
}
.common-header-footer-menu-wrap a:hover,.header-footer-privacy-copy-wrap a:hover{
	color: #fff;
}
.chfmw-dl{
	margin-bottom: 6rem;
}
.chfmw-dt{
	margin-bottom: 2rem;
	line-height: 1.5;
}
.chfmw-dd{
	line-height: 1.4;
}
.chfmw-dd:not(:last-of-type){
	margin-bottom: 1rem;
}
.chfmw-dd:last-of-type{
	margin-bottom: 0;
}
.header-footer-privacy{
	margin-bottom: 4rem;
}
@media screen and (max-width: 575px){
	.chfmw-dl:nth-of-type(odd){
		min-width: 15rem;
	}
	.chfmw-dl:nth-of-type(even){
		min-width: 14rem;
	}
}
@media screen and (min-width:575px) and (max-width:767px){
	.chfmw-dl:not(:last-of-type){
		padding-right: 2.4rem;
	}
}
@media screen and (min-width: 768px){
	.header-footer-privacy-copy-wrap{
		text-align: right;
	}
}
@media screen and (max-width: 1199px){
	.chfmw-dt{
		font-size: 1.6rem;
	}
}
@media screen and (min-width: 1200px){
	.chfmw-dt{
		font-size: 1.8rem;
	}
}

/**********************
固定ページ ヘッダー
**********************/
/*font*/
.head-bfont{
	line-height: 1;
	margin-bottom: 0.3428571428571429em;
}
.head-jfont{
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}
@media screen and (max-width: 767px){
	/*font*/
	.head-jfont{
		font-size: 2rem;
	}
}
@media screen and (min-width:768px) and (max-width:1199px){
	/*font*/
	.head-jfont{
		font-size: 2.8rem;
	}
}
@media screen and (max-width: 991px){
	.page-head-wrap{
		padding-top: 6.4rem;
	}
}
@media screen and (min-width: 992px){
	.page-head-wrap{
		padding-top: 11rem;
	}
}
@media screen and (max-width: 1199px) {
	/*font*/
	.head-bfont{
		font-size: 4rem;
	}
	.head-jfont{
		font-size: 1.3rem;
		padding-bottom: 3.2rem;
	}
}
@media screen and (min-width: 1200px) {
	/*font*/
	.head-bfont{
		font-size: 7rem;
	}
	.head-jfont{
		font-size: 1.5rem;
		padding-bottom: 5.6rem;
	}
}
/*下層基本*/
@media screen and (max-width: 1199px) {
	.phw-post{
		padding-top: 5.5rem;
	}
}
@media screen and (min-width: 1200px) {
	.phw-post{
		padding-top: 7.21rem;
	}
}

/*******************************
パンクズ
*******************************/
#pls {
	position: relative;
	z-index: 1;
	line-height: 1.2;
	color: #000;
}
#pan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#pan > span {
	display: block;
	margin-top: 0.8rem;
}
#pan a {
	color: #969696;
	text-decoration: none;
	transition: .3s;
}
#pan a:hover {
	opacity: 0.6;
}
.pan-punctuation {
	position: relative;
}
.pan-punctuation::before {
	content: " ";
	height: 1px;
	position: absolute;
	display: block;
	background-color: rgba(150,150,150, 0.25);
	top: 50%;
}
@media screen and (max-width: 1199px) {
	#pls{
		padding-bottom: 4.8rem;
	}
	#pan {
		font-size: 1.2rem;
	}
	.pan-punctuation {
		width: 10%;
		max-width: 4rem;
  }
  .pan-punctuation::before {
	  width: calc(100% - 2rem);
	  left: 1rem;
  }
}
@media screen and (min-width: 1200px) {
	#pls{
		padding-bottom: 8rem;
	}
	#pan {
		font-size: 1.4rem;
	}
	.pan-punctuation {
		width: 5.194%;
		max-width: 8rem;
	}
	.pan-punctuation::before {
		width: 62.5%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
  }
}