/* CSS Document */

/*font*/
@import url('css2-NotoSerifJPwght600_swap.css');
@import url("https://www.doggyman.com/font.css?a");

/*chrome*/
*:focus {outline: none;}
body{
-webkit-text-size-adjust: none;
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
font-weight: 600;
letter-spacing: 0px;
line-break: strict;
}

picture{ display: block; line-height: 0;}

html{scroll-behavior: smooth; }

header,main,footer,#pagetop{ display: none; }
/*==============================================================*/
/* loading */
/*==============================================================*/
#loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; z-index: 9999; }
#loader { display: none; position: fixed; top: 50%; left: 50%;
	transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
	 width: 250px; height: 59px;  text-align: center; z-index: 11; }
#loader img { margin: 0 auto ; }
/* */
.blinking { -webkit-animation: blink .5s ease-in-out infinite alternate; -moz-animation: blink .5s ease-in-out infinite alternate; animation: blink .5s ease-in-out infinite alternate; }
@-webkit-keyframes blink {
 0% {opacity:0;}
 100% {opacity:1;}
}
@-moz-keyframes blink {
 0% {opacity:0;}
 100% {opacity:1;}
}
@keyframes blink {
 0% {opacity:0;}
 100% {opacity:1;}
}

/*==============================================================================*/
/*hover */
/*==============================================================================*/
header li a,#pagetop a,footer a,a{	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;}
	
header a:hover,#pagetop a:hover,#lineup li a:hover,#conceptBtn li a:hover{ 
	 filter: alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; }

/*==============================================================================*/
/*header */
/*==============================================================================*/
header{ box-sizing: border-box; position: relative; z-index: 2; box-sizing: border-box; }

#logo{ position: absolute; left:50% ;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);}

header .innerBox{ display: flex;  justify-content: space-between; }

/*==============================================================================*/
/*content */
/*==============================================================================*/
main{ position:relative; z-index: 1; }

ol{ list-style: none; }
.innerBox{margin: 0 auto; box-sizing: border-box; }


/*==============================================================================*/
/* footer
============================================================================== */
#pagetop a{  z-index: 1; display: block; position: fixed; }

footer{	background-position: center 0; background-repeat: repeat-x;
	/*background-size: cover;*/
	text-align: center;position: relative; }

footer dl ul{ display: flex; justify-content: center; }
footer dl li:last-child{ margin-left: -10px; }

#footerlogo{ position: absolute; }

/*=========================================================*/
/*sp-----------------------------------------------------*/
@media screen and (min-width: 1601px) {
	.innerBox{width:1600px;max-width: 90%; }
}

@media screen and (max-width: 1600px) {
body{ width: 100%; }
.innerBox{width:92%; }
}

@media screen and (min-width: 1351px) {
#logo{ top:5px }
#headerlogo img{ width: 50%; max-width: 276px; }
}

@media screen and (max-width: 1350px) {
#logo img{ width: 100%; }
}
@media screen  and (min-width: 1081px) and (max-width: 1350px) {
	#logo{ width: 27%; top: 21%;}
	.drawercontainer { width: 33%; }
	#headerlogo img, .drawercontainer img{ width: 100%; }
	#headerlogo { width: 10%; height: 100%;}
}

/*pc-----------------------------------------------------*/
@media (min-width: 1081px) {
	header{  padding-top: 30px; }
	header .nav-inner ul{ display: flex; }
	header .nav-inner li:not(:last-child){ margin-right: 20px; }
	/*.innerBox{width:980px;max-width: 90%; }*/
}

@media (min-width: 751px) and (max-width: 1080px) {
header{  padding-top: 30px; }
#headerlogo img{ width: 50%; }
#logo{ top: 10px; }
.pc {display: block !important; }
.menu-btn {	top: 5px; right: 2%;width: 81px; height: 93px; }
}


@media screen and (max-width: 1080px) {
/*drawer*/
html.fixed {height: 100%;overflow: hidden;  }
header .innerBox,.nav{ height: 0; } 
.nav {	opacity: 0;	pointer-events: none;  }
.nav.active {
	opacity: 1;
	pointer-events: auto;
	transition: 0.3s ease transform, 0.3s ease opacity;
	background: rgba(33, 2, 3, 0.8);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
  }
  .nav .nav-inner {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .nav .nav-inner ul li {margin-bottom: 16px;  }
  .nav .nav-inner ul li:last-child {margin-bottom: 0;  }
  
  .menu-btn {
	position: fixed;
	z-index: 999;
	background: url(../image/hexisagon.png) 0 0 no-repeat;
	cursor: pointer;
  }
  .menu-btn span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 30px;
	height: 1px;
	background: #bea364;
	transition: 0.3s ease transform, 0.3s ease opacity;
  }
  .menu-btn span:first-child {transform: translate(-50%, -10px);  }
  .menu-btn span:last-child {transform: translate(-50%, 9px);  }
  .menu-btn.active span:first-child {transform: translate(-50%, 0) rotate(45deg);  }
  .menu-btn.active span:nth-child(2) {	opacity: 0;  }
  .menu-btn.active span:last-child {
	transform: translate(-50%, 0) rotate(-45deg);  }
  
  .container {
	max-width: 600px;
	margin: 0 auto;
	padding: 30px;
	line-height: 2;
  }
}


@media screen and (min-width: 751px) {
	header{ background: url(../image/header.jpg) center 0 repeat-x ;  height: 100px;}
	.sp{ display: none; }

/*footer*/
	footer{	background-image:url(../image/footerarea.jpg) ; height: 350px; padding:32px 3% 0;}
	#footerlogo{right: 50px; bottom: 20px; width: 15%; max-width: 276px;}
	#footerlogo img{ width: 134px; }
	footer dd{ margin-bottom: 44px; }
	#pagetop a { width: 108px;  height: 108px;  right: 10px; }

}
	
@media screen and (min-width: 481px)  and (max-width: 750px) {
.menu-btn span:first-child {transform: translate(-75%, -12px);  }
.menu-btn span{ transform: translate(-75%, 0px) }
.menu-btn span:last-child {transform: translate(-75%, 11px);  }

.menu-btn.active span:first-child {	transform: translate(-75%, -1px) rotate(45deg);  }
.menu-btn.active span:last-child {	transform: translate(-75%, -1px) rotate(-45deg);  }
}

@media screen and (min-width: 641px)  and (max-width: 750px) {
.menu-btn{ top: 10px;}
footer{ padding:4vw 2% 11vw;}
}

@media screen and (max-width: 750px) {
	header{ background: url(../image/header_sp.jpg) center 0 repeat-x ; background-size: 100%; padding: 6.5vw 0;}
	#headerlogo{ position: absolute; top: 34%;width: 15%; }
	.pc{ display: none; }
	#logo{ top: 18%; }
	.menu-btn {	width: 15%;max-width: 81px;	height: 73px; background-size: 80%; right: 0%;}
	
	/*footer*/
	footer{ background-image:url(../image/footerarea_sp.png) ; /*height: 501px;*/}
	footer dt{ /*margin-bottom: 10px;*/ width: 90%; margin: 0 auto ;}
	footer dd{ margin-bottom: 14%; }

	.copyright,
	#footerlogo{  right:50%; 
		transform: translate(50%, -50%);
		-webkit-transform: translate(50%, -50%);
		-ms-transform: translate(50%, -50%); }
#footerlogo{bottom: 10%; }
.copyright{bottom: 0; position: absolute; width: 80%;}	
#pagetop a { width: 90px;  right: 1%; bottom: 20px;}
#pagetop a img{ width: 100%; }

}
	

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

#headerlogo{ top:22% }
#logo {top: 10%;}

footer{ padding: 3vw 2% 10vw; background-size: 100%;}
footer dl ul{ width: 49%; margin: auto; }
#footerlogo { width: 26%; }
footer dt{ width: 78%; margin-top: 1%;}
}

@media screen and (min-width: 481px) and (max-width: 640px) {
header{ background-size: 94%; padding: 6.2vw 0; }
.menu-btn { top: 5px; right: 1%; }
.menu-btn span:first-child {transform: translate(-23px, -11px);  }
.menu-btn span{ transform: translate(-23px, 0px); width: 30px; }
.menu-btn span:last-child {transform: translate(-23px, 10px);  }

.menu-btn.active span:first-child {	transform: translate(-23px, -3px) rotate(45deg);  }
.menu-btn.active span:last-child {	transform: translate(-23px, -3px) rotate(-45deg);  }
footer dt{ margin-bottom: 1%}
}

@media screen and (max-width: 580px) {
#logo {	top: 5px; width: 52%; }
footer{ padding:3% 2% 9vw; background-size: 110%;}
footer dl ul{ width: 60%; }
}

@media screen and (max-width: 480px) {
.menu-btn {	top: 7px; width: 60px;}
.menu-btn span:first-child {transform: translate(-16px, -17px);  }
.menu-btn span{ transform: translate(-16px, -10px); width: 20px; }
.menu-btn span:last-child {transform: translate(-16px, -3px);  }

.menu-btn.active span:first-child {	transform: translate(-16px, -10px) rotate(45deg);  }
.menu-btn.active span:last-child {	transform: translate(-16px, -10px) rotate(-45deg);  }
header{	background-size: 105%;	padding: 6.9vw 0;}
#logo {	top: 23%;}
#headerlogo {top: 32%;  }
#pagetop a { width: 17%; right: 5px;}
}

/**/
@media screen and (max-width: 375px) {
header{background-size: 132%; padding: 8.7vw 0;}
.menu-btn span:first-child {transform: translate(-16px, -18px);  }
.menu-btn span{ transform: translate(-16px, -10px);  }
.menu-btn span:last-child {transform: translate(-16px, -2px);  }

.menu-btn.active span:first-child {	transform: translate(-16px, -12px) rotate(45deg);  }
.menu-btn.active span:last-child {	transform: translate(-16px, -12px) rotate(-45deg);  }

footer {padding-bottom: 16vw;}
footer dl ul {width: 56%;  }
#footerlogo {bottom: 15%; }
}