/*----------------------------------------------------
**
** WEB COMBO / main.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** web font
**----------------------------------------------------
** font-family:'Bebas Neue',cursive;
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
html:not(.scroll){
	background-color:#f2f2f6 !important;
}
html.menuopen{
	overflow:hidden;
	background-color:#445 !important;
}
html.bottom{
	background-color:#445 !important;
}
html.menuopen body{
	position:fixed;
}
html.menuopen body > .wrap{
	transform:scale(0.95);
	border-radius:10px;
	width:100vw;
	height:100vh;
	overflow:hidden;
	transition:all 0.3s ease;
	border-radius:10px;
}
.menuopen .ie header{
	transition:all 0.3s ease;
	transform:scale(0.95);
	top:18px;
}
div.container{
	background-color:#f2f2f6;
	position:relative;
	z-index:1;
}
.menuopen div.container{
	border-radius:10px;
}
.wrap.unview div.container{
	transition:all 0s ease;
}
section.columnwrap{
	position:relative;
	z-index:1;
}
div.menuoverlay{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100vw;
	height:100vh;
	display:block;
	z-index:2;
	display:none;
	background-color:rgba(0,0,0,0.25);
}
/* loader */
@keyframes loader{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
div.loaderwrap,
div.loader{
	position:fixed;
	z-index:10;
	width:100%;
	height:100vh;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
div.loader{
	background-color:#445;
	opacity:0.25;
}
div.loader::before{
	position:absolute;
	z-index:20;
	content:'loading...';
	font-size:9px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#FFF;
}
div.loader span.waiting{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
div.loader span.waiting span.container{
	width:60px;
	height:60px;
	display:block;
	overflow:hidden;
	border-radius:30px;
	position:relative;
	z-index:1;
	animation:loader 1s linear infinite;
}
div.loader span.waiting span.container span{
	width:30px;
	height:30px;
	display:block;
	float:left;
}
div.loader span.waiting span.container span:nth-child(1){
	background:-webkit-linear-gradient(45deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 100%);
	background:linear-gradient(45deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,1) 100%);
}
div.loader span.waiting span.container span:nth-child(2){
	background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 100%);
	background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 100%);
}
div.loader span.waiting span.container span:nth-child(3){
	background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.5) 100%);
	background:linear-gradient(135deg,rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.5) 100%);
}
div.loader span.waiting span.container span:nth-child(4){
	background:-webkit-linear-gradient(45deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
	background:linear-gradient(45deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 100%);
}
div.loader span.waiting span.container span:nth-child(5){
	width:56px;
	height:56px;
	display:block;
	border-radius:28px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-color:#445;
}
/* h1 (catchcopy) */
@keyframes marquee{
	100%{transform:translateX(-100%)}
}
@keyframes marqueeclose{
	100%{transform:translateX(-200%)}
}
@keyframes marqueestart{
	100%{transform:translateY(0)}
}
div.catchcopy{
	text-align:center;
	background-color:#f2f2f6;
	border-bottom:solid 1px #dbdbdb;
	overflow:hidden;
}
div.catchcopy div.inner{
	display:table;
	margin:0 auto;
}
div.catchcopy div.inner > *{
	display:table-cell;
	color:#445;
	font-weight:700;
	padding:0 0.5em;
	white-space:nowrap;
	line-height:36px;
	font-size:12px;
}
div.catchcopy.marquee div.inner{
	animation:marqueestart 0.6s forwards ease-out;
	transform:translate(0,-100%);
}
div.catchcopy.marquee div.inner > *{
	will-change:transform;
}
div.catchcopy.marquee div.inner h1{
	animation:marquee 10s linear infinite;
	animation-delay:0.8s;
  transform:translateX(0);
}
div.catchcopy.marquee div.inner .catchcopyclose{
	animation:marquee 10s linear infinite;
	animation-delay:0.8s;
  transform:translateX(0);
}
/*----------------------------------------------------
** header
**----------------------------------------------------*/
header{
	width:100%;
	position:sticky;
	top:0;
	right:0;
	left:0;
	z-index:9000;
}
.ie header.scroll{
	position:fixed;
}
header.active.scroll{
	background-color:rgba(242,242,246,0.1);
}
header div.header{
	overflow:hidden;
	position:relative;
	z-index:2;
	box-sizing:border-box;
}
/* logo */
header div.logo{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	overflow:hidden;
}
header div.logo a{
	text-decoration:none;
	display:block;
	pointer-events:none;
	cursor:none;
}
header.active div.logo a{
	pointer-events:auto;
	cursor:pointer;
}
header div.logo a h2{
	font-weight:700;
}
header div.logo div.pagetop{
	cursor:pointer;
}
/* menu button */
.menubtn{
	position:relative;
	z-index:1;
	cursor:pointer;
}
div.header .menubtn.main{
	float:right;
}
div.header .menubtn.contact{
	float:left;
}
div.header .menubtn::before{
	font-size:12px;
	font-weight:300;
	bottom:0;
	left:50%;
}
.menubtn::before{
	display:block;
	white-space:nowrap;
	position:absolute;
	z-index:1;
	color:#445;
	font-family:'Oswald';
}
.menubtn.main::before{
	content:'MENU';
}
.menubtn.contact::before{
	content:'CONTACT';
}
.menubtn div.icon{
	position:relative;
	z-index:1;
	z-index:1;
	background-repeat:no-repeat;
	background-position:center;
}
.menubtn.main div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M6.933 9.2h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM25.067 15.333h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM25.067 22.8h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z" /></svg>');
}
body.ie .menubtn.main div.icon{
	background-image:url(../img/icon/menu_01.png);
}
.menubtn.contact div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M26.667 7.868h-21.333c-0.368 0-0.667 0.299-0.667 0.667v14.399c0 0.368 0.299 0.667 0.667 0.667h6.267v3.601c0 0.278 0.173 0.526 0.432 0.624 0.077 0.029 0.156 0.043 0.235 0.043 0.189 0 0.373-0.080 0.501-0.228l3.534-4.039h10.365c0.368 0 0.667-0.299 0.667-0.667v-14.399c0-0.368-0.299-0.667-0.667-0.667zM26 22.267h-10c-0.192 0-0.375 0.083-0.501 0.228l-2.564 2.931v-2.493c0-0.368-0.299-0.667-0.667-0.667h-6.268v-13.066h20v13.066zM10.667 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM16 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM21.333 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333z" /></svg>');
}
body.ie .menubtn.contact div.icon{
	background-image:url(../img/icon/contact_01.png);
}
header[bg-type="dark"] .menubtn.main div.icon,
header.defdark .menubtn.main div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M6.933 9.2h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM25.067 15.333h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM25.067 22.8h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z" /></svg>');
}
body.ie header[bg-type="dark"] .menubtn.main div.icon,
body.ie header.defdark .menubtn.main div.icon{
	background-image:url(../img/icon/menu_02.png);
}
header[bg-type="dark"] .menubtn.contact div.icon,
header.defdark .menubtn.contact div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M26.667 7.868h-21.333c-0.368 0-0.667 0.299-0.667 0.667v14.399c0 0.368 0.299 0.667 0.667 0.667h6.267v3.601c0 0.278 0.173 0.526 0.432 0.624 0.077 0.029 0.156 0.043 0.235 0.043 0.189 0 0.373-0.080 0.501-0.228l3.534-4.039h10.365c0.368 0 0.667-0.299 0.667-0.667v-14.399c0-0.368-0.299-0.667-0.667-0.667zM26 22.267h-10c-0.192 0-0.375 0.083-0.501 0.228l-2.564 2.931v-2.493c0-0.368-0.299-0.667-0.667-0.667h-6.268v-13.066h20v13.066zM10.667 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM16 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM21.333 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333z" /></svg>');
}
body.ie header[bg-type="dark"] .menubtn.contact div.icon,
body.ie header.defdark .menubtn.contact div.icon{
	background-image:url(../img/icon/contact_02.png);
}
header[bg-type="blue"] .menubtn.main div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230bf" d="M6.933 9.2h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM25.067 15.333h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM25.067 22.8h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z" /></svg>');
}
header[bg-type="blue"] .menubtn.contact div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230bf" d="M26.667 7.868h-21.333c-0.368 0-0.667 0.299-0.667 0.667v14.399c0 0.368 0.299 0.667 0.667 0.667h6.267v3.601c0 0.278 0.173 0.526 0.432 0.624 0.077 0.029 0.156 0.043 0.235 0.043 0.189 0 0.373-0.080 0.501-0.228l3.534-4.039h10.365c0.368 0 0.667-0.299 0.667-0.667v-14.399c0-0.368-0.299-0.667-0.667-0.667zM26 22.267h-10c-0.192 0-0.375 0.083-0.501 0.228l-2.564 2.931v-2.493c0-0.368-0.299-0.667-0.667-0.667h-6.268v-13.066h20v13.066zM10.667 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM16 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM21.333 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333z" /></svg>');
}
body.ie header[bg-type="blue"] .menubtn.main div.icon{
	background-image:url(../img/icon/menu_03.png);
}
body.ie header[bg-type="blue"] .menubtn.contact div.icon{
	background-image:url(../img/icon/contact_03.png);
}

header[bg-type="orange"] .menubtn.main div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23f90" d="M6.933 9.2h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM25.067 15.333h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM25.067 22.8h-18.133c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h18.133c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z" /></svg>');
}
header[bg-type="orange"] .menubtn.contact div.icon{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23f90" d="M26.667 7.868h-21.333c-0.368 0-0.667 0.299-0.667 0.667v14.399c0 0.368 0.299 0.667 0.667 0.667h6.267v3.601c0 0.278 0.173 0.526 0.432 0.624 0.077 0.029 0.156 0.043 0.235 0.043 0.189 0 0.373-0.080 0.501-0.228l3.534-4.039h10.365c0.368 0 0.667-0.299 0.667-0.667v-14.399c0-0.368-0.299-0.667-0.667-0.667zM26 22.267h-10c-0.192 0-0.375 0.083-0.501 0.228l-2.564 2.931v-2.493c0-0.368-0.299-0.667-0.667-0.667h-6.268v-13.066h20v13.066zM10.667 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM16 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333zM21.333 17.068c0.736 0 1.333-0.596 1.333-1.333 0-0.738-0.597-1.333-1.333-1.333s-1.333 0.595-1.333 1.333c0 0.737 0.597 1.333 1.333 1.333z" /></svg>');
}
body.ie header[bg-type="orange"] .menubtn.main div.icon{
	background-image:url(../img/icon/menu_04.png);
}
body.ie header[bg-type="orange"] .menubtn.contact div.icon{
	background-image:url(../img/icon/contact_04.png);
}

header path{
	fill:#445;
}
header[bg-type="dark"] path,
header.defdark path{
	fill:#FFF;
}
header[bg-type="blue"] path{
	fill:#0bf;
}
header[bg-type="orange"] path{
	fill:#f90;
}
header div.pagetop{
	background-color:inherit;
	transition:all 0.6s ease;
	opacity:0;
	display:none;
}
header div.pagetop::before{
	content:'PAGE TOP';
	font-family:'Oswald';
	font-size:12px;
}
header[bg-type="dark"] .menubtn::before,
header.defdark .menubtn::before,
header[bg-type="dark"] div.pagetop::before{
	color:#FFF;
}
header.defdark div.pagetop::before{
	color:rgba(0,0,0,0);
}
header[bg-type="blue"] .menubtn::before,
header[bg-type="blue"] div.pagetop::before{
	color:#0bf;
}
header[bg-type="orange"] .menubtn::before,
header[bg-type="orange"] div.pagetop::before{
	color:#f90;
}
/*----------------------------------------------------
** footer
**----------------------------------------------------*/
footer{
	background-color:#445;
	position:relative;
	z-index:2;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	text-align:center;
}
footer::after{
	content:'';
	display:block;
	width:100%;
	height:1px;
	position:relative;
	z-index:1;
}
body.safari footer::after{
	height:115px;
}
footer::before{
	content:'';
	display:block;
	width:100%;
	position:absolute;
	z-index:3;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:-webkit-linear-gradient(top, rgba(68,68,85,0) 0%,rgba(68,68,85,1) 70%,rgba(68,68,85,1) 100%);
	background:linear-gradient(to bottom, rgba(68,68,85,0) 0%,rgba(68,68,85,1) 70%,rgba(68,68,85,1) 100%);
}
footer > div{
	position:relative;
	z-index:4;
}
footer div.footer{
	box-sizing:border-box;
}
footer div.footer::before{
	content:'';
	display:block;
	width:100%;
	position:absolute;
	z-index:2;
	top:0;
	right:0;
	bottom:0;
	left:0;
	box-sizing:border-box;
	background: radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0);
	background-position:0px 0,3px 3px;
	background-size:6px 6px;
}
footer div.footertop{
	position:sticky;
	text-align:center;
	z-index:2;
}
.ie footer div.footertop{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}
footer figure.symbol{
}
footer figure.symbol svg{
	opacity:0.1;
}
footer figure.symbol svg path{
	fill:#fff;
}
footer figure.symbol svg,
footer figure.symbol svg path{
	transition:all 0.3s ease;
}
html.end footer figure.symbol svg{
	opacity:1;
}
html.end footer figure.symbol svg path{
	fill:#0bf;
}
footer div.company h3{
	color:#FFF;
	font-weight:700;
}
footer div.company h3::after{
	color:#FFF;
	font-family:'Oswald';
	content:'GRANTEST Inc. SINCE 2008';
	display:block;
}
footer div.footercontents p,
footer div.footercontents a{
	color:#FFF;
}
footer div.footercontents div.menubtn{
	background-color:#FFF;
	border-radius:10px;
	color:#445;
	position:relative;
	z-index:1;
	display:table;
	margin:0 auto;
}
footer div.footerbottom{
	position:absolute;
	bottom:0;
}
footer div.bottomlink{
	display:flex;
	justify-content:center;
}
footer div.bottomlink div{
	padding:0 0.25em;
	white-space:nowrap;
}
footer div.bottomlink div::after{
	content:'|';
	color:#fff;
}
footer div.bottomlink div:last-child::after{
	display:none;
}
footer div.sns{
	display:flex;
	justify-content:center;
}
footer div.sns > div{
	display:block;
	width:40px;
	height:40px;
	margin:0 5px;
}
footer div.sns a{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	display:block;
	box-sizing:border-box;
	border-radius:20px;
	width:40px;
	height:40px;
}
footer div.sns a img{
	width:100%;
	opacity:0;
}
.ie footer div.sns a img{
	opacity:1;
}
/*
footer div.sns > div.twitter a{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M0 0v32h32v-32h-32zM23.15 12.334c0.013 0.16 0.013 0.32 0.013 0.481 0 4.875-3.712 10.496-10.498 10.496-2.090 0-4.031-0.606-5.665-1.658 0.298 0.035 0.581 0.045 0.892 0.045 1.725 0 3.312-0.581 4.579-1.575-1.621-0.033-2.981-1.095-3.45-2.558 0.229 0.033 0.459 0.058 0.698 0.058 0.332 0 0.662-0.045 0.971-0.125-1.692-0.343-2.958-1.828-2.958-3.622v-0.046c0.492 0.275 1.062 0.446 1.667 0.468-0.994-0.662-1.644-1.793-1.644-3.072 0-0.686 0.183-1.313 0.502-1.861 1.817 2.239 4.546 3.7 7.606 3.86-0.057-0.274-0.092-0.56-0.092-0.846 0-2.032 1.646-3.69 3.69-3.69 1.062 0 2.021 0.446 2.695 1.167 0.833-0.16 1.633-0.468 2.341-0.892-0.275 0.857-0.857 1.577-1.622 2.032 0.743-0.080 1.462-0.287 2.125-0.57-0.502 0.732-1.132 1.381-1.851 1.907z" /></svg>');
}
footer div.sns > div.facebook a{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M0 0v32h32v-32h-32zM20.178 10.795h-1.231c-1.214 0-1.591 0.752-1.591 1.524v1.833h2.709l-0.434 2.823h-2.275v6.825h-3.052v-6.825h-2.479v-2.823h2.479v-2.153c0-2.447 1.458-3.799 3.69-3.799 1.069 0 2.186 0.191 2.186 0.191v2.404z" /></svg>');
}*/
footer div.bottomlink a{
	text-decoration:none;
	color:#FFF;
	margin:0 0.75em 0 0.25em;
}
footer div.copyright{
	text-align:center;
	padding:20px 0 40px 0;
	height:20px;
}
footer div.copyright a{
	display:inline-block;
	line-height:20px;
	margin:0 auto;
	text-decoration:none;
	color:#FFF;
	font-family:'Oswald';
}
footer div.video{
	position:absolute;
	z-index:1;
	overflow:hidden;
	opacity:0.3;
	top:0;
}
footer div.video video{
	position:relative;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/*----------------------------------------------------
** header menu
**----------------------------------------------------*/
.headermenu{
	opacity:0;
	position:fixed;
	background-color:#f2f2f6;
	transition:all 0.3s ease;
	z-index:3;
	display:none;
}
.headermenu.view{
	transition:all 0.3s ease;
	display:block;
}
.headermenu.active{
	opacity:1;
}
.headermenu .inner{
	overflow-x:auto;
	padding:50px 0 0 0;
	box-sizing:border-box;
}
.headermenu > .inner::after{
	display:block;
	content:'';
	clear:both;
	overflow:hidden;
	width:100%;
	height:30px;
}
body.safari .headermenu > .inner::after{
	display:block;
	content:'';
	clear:both;
	overflow:hidden;
	width:100%;
	height:177px;
}
.headermenu.active{
	transform:translate3d(0,0,0) !important;
	overflow:hidden;
}
.headermenu div.header{
	position:absolute;
	top:0;
	width:100%;
	background-color:rgba(255,255,255,0.9);
	border-radius:10px 10px 0 0;
}
.headermenu div.header{
	position:absolute;
	z-index:9999;
	top:0;
	width:100%;
	border-bottom:solid 1px #dbdbdb;
}
.headermenu div.title{
	line-height:50px;
	text-align:center;
	font-size:15px;
	font-weight:700;
	color:#445;
}
.headermenu div.closebtn{
	position:absolute;
	right:0;
	top:0;
	z-index:2;
	color:#39F;
	line-height:50px;
	padding:0 12px;
	cursor:pointer;
}
.headermenu.main ul{
	list-style:none;
	list-style-position:outside;
	background-color:#FFF;
	padding:0 10px;
	border-bottom:solid 1px #dbdbdb;
}
.headermenu.main ul li{
	border-bottom:solid 1px #dbdbdb;
	line-height:1;
}
.headermenu.main ul li:last-child{
	border:none;
}
.headermenu.main ul li a{
	display:block;
	text-decoration:none;
	color:#445;
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M14.271 25.428c-0.313 0.313-0.722 0.468-1.132 0.468s-0.818-0.156-1.132-0.469c-0.624-0.624-0.624-1.636 0-2.261l7.166-7.166-7.165-7.167c-0.624-0.624-0.624-1.636 0-2.26 0.626-0.626 1.637-0.626 2.262-0.001l9.428 9.428-9.428 9.428z" /></svg>');
	background-repeat:no-repeat;
	background-position:right center;
	background-size:20px 20px;
	line-height:49px;
	font-size:14px;
	padding:0 40px 0 20px;
}
.headermenu p.text{
	padding:15px;
}
.headermenu#contactmenu > div.inner > *:not(.text){
	border-top:solid 1px #dbdbdb;
	position:relative;
	z-index:1;
}
.headermenu#contactmenu div.faqlink{
	border:none !important;
	padding:0 0 30px 0;
	text-align:center;
}
.headermenu#contactmenu div.faqlink a{
	display:block;
	width:300px;
	margin:0 auto;
	text-decoration:none;
	background-color:#445;
	color:#FFF;
	position:relative;
	z-index:1;
}
.headermenu#contactmenu div.faqlink a::before{
	position:absolute;
	z-index:2;
	content:'よくある質問';
	font-size:16px;
	font-weight:700;
	color:#fff;
	display:inline-block;
	line-height:16px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.headermenu#contactmenu div.faqlink a picture,
.headermenu#contactmenu div.faqlink a img{
	width:100%;
	position:relative;
	z-index:1;
}
.headermenu#contactmenu p.subtitle{
	position:absolute;
	z-index:1;
	top:0;
	left:50%;
	display:inline-block;
	padding:0 2em;
	line-height:2em;
	border-radius:1em;
	border:solid 1px #dbdbdb;
	background-color:#FFF;
	transform:translate(-50%,-50%);
	white-space:nowrap;
}
.headermenu#contactmenu div.tel{
	background-color:#FFF;
	padding:45px 0 60px;
}
.headermenu#contactmenu div.tel dt{
	text-align:center;
}
.headermenu#contactmenu div.tel dt a{
	font-family:'Oswald';
	display:inline-block;
	text-decoration:none;
	color:rgba(68,68,85,0);
	position:relative;
	z-index:1;
	margin:0 auto;
	white-space:nowrap;
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230bf" d="M23.026 21.241c-0.819-0.393-1.614-0.826-2.382-1.3-0.276-0.171-0.671-0.182-0.944-0.034-0.448 0.244-0.903 0.474-1.366 0.691-0.298 0.14-0.607 0.126-0.873-0.025-1.257-0.715-2.407-1.595-3.423-2.61s-1.895-2.166-2.61-3.423c-0.151-0.265-0.164-0.575-0.025-0.874 0.218-0.463 0.448-0.918 0.691-1.366 0.148-0.272 0.135-0.665-0.034-0.943-0.473-0.769-0.908-1.564-1.3-2.382-0.286-0.596-1.038-0.626-1.407-0.29-0.629 0.572-1.185 1.222-1.649 1.937 0.483 3.543 2.13 6.721 4.542 9.133s5.588 4.059 9.132 4.543c0.716-0.465 1.366-1.021 1.937-1.65 0.336-0.37 0.307-1.122-0.289-1.407zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16c8.837 0 16-7.164 16-16s-7.163-16-16-16zM16 30.667c-8.1 0-14.667-6.566-14.667-14.667s6.566-14.667 14.667-14.667c8.101 0 14.667 6.566 14.667 14.667s-6.564 14.667-14.667 14.667z" /></svg>');
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	width:280px;
	height:45px;
}
.headermenu#contactmenu div.tel dt a::before{
	content:'0877-43-2555';
	color:#0bf;
	position:absolute;
	z-index:-1;
	top:50%;
	right:0;
	transform:translate(0,-50%);
	white-space:nowrap;
	font-size:44px;
	padding-bottom:0.1em;
}
.headermenu#contactmenu div.tel dd{
	display:flex;
	justify-content:space-between;
	margin:0 auto;
	padding:10px 0 0 0;
	max-width:285px;
}
.headermenu#contactmenu div.tel dd p{
	display:flex;
}
.headermenu#contactmenu div.tel dd span{
	font-size:14px;
	line-height:20px;
	height:20px;
	display:inline-block;
}
.headermenu#contactmenu div.tel dd span.title{
	border-radius:10px;
	background-color:#445;
	color:#f2f2f6;
	font-size:12px;
	padding:0 0.75em;
}
.headermenu#contactmenu div.tel dd span:nth-of-type(2){
	padding:0 0 0 0.5em;
}
.headermenu#contactmenu div.tel dd span.number{
	font-family:'Oswald';
}
.headermenu#contactmenu div.mail{
	background-color:#FFF;
	padding:30px 0 0 0;
	text-align:center;
}
.headermenu#contactmenu div.mail p.text{
	font-size:12px;
}
.headermenu#contactmenu div.mail div.changemenu{
	background-color:#f2f2f6;
}
.headermenu#contactmenu div.mail div.changetarget{
	margin:15px 0 0 0;
	text-align:left;
}
.headermenu#contactmenu div.mail div.changetarget > div{
	border-top:solid 1px #dbdbdb;
	background-color:#f2f2f6;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dt{
	padding:30px 15px 10px 15px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dt > *{
	display:inline-block;
	line-height:24px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dt::before{
	content:'任意';
	font-size:12px;
	background-color:rgba(68,68,85,0.2);
	margin:0 0.5em 0 0;
	padding:0 1em;
	display:inline-block;
	line-height:24px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl.required dt::before{
	content:'必須';
	background-color:#0bf;
	color:#FFF;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd{
	border-top:solid 1px #dbdbdb;
	background-color:#fff;
	border-bottom:solid 1px #dbdbdb;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd input[type="text"],
.headermenu#contactmenu div.mail div.changetarget form > dl dd input[type="email"]{
	height:50px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd div.filewrap{
	padding:5px 0 5px 5px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd div.filewrap input[type="text"]{
	height:40px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd div.checkarea{
	margin:10px 15px;
}
.headermenu#contactmenu div.mail div.changetarget form > dl dd textarea{
	min-height:80px;
}
.headermenu#contactmenu div.mail div.changetarget form > div.btnarea{
	padding:30px 0;
	background-color:#f2f2f6;
}
.headermenu#contactmenu div.mail div.changetarget form > div.btnarea input{
	display:block;
	width:200px;
	margin:0 auto;
	line-height:50px;
	border-radius:5px;
	color:#FFF;
	background-color:#445;
	padding:0 20px;
}
.headermenu#contactmenu div.mail > dl{
	background-color:#f2f2f6;
	padding:0 15px;
}
.headermenu#contactmenu div.mail > dl dt{
	font-size:14px;
	font-weight:700;
}
.headermenu#contactmenu div.mail > dl dd{
	font-size:14px;
	color:rgba(68,68,85,0.7);
	text-align:left;
}
/*----------------------------------------------------
** page header
**----------------------------------------------------*/
div.pageheader{
	position:relative;
	z-index:1;
	overflow:hidden;
}
div.pageheader div.inner{
	position:absolute;
	z-index:4;
	display:flex;
	justify-content:space-between;
	box-sizing:border-box;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	border-bottom:solid 1px #dbdbdb;
}
div.pageheader div.inner > *{
	white-space:nowrap;
}
div.pageheader a{
	display:inline-block;
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M17.729 6.572c0.313-0.313 0.722-0.468 1.132-0.468s0.818 0.156 1.132 0.469c0.624 0.624 0.624 1.636 0 2.261l-7.166 7.166 7.165 7.167c0.624 0.624 0.624 1.636 0 2.26-0.626 0.626-1.637 0.626-2.262 0.001l-9.428-9.428 9.428-9.428z" /></svg>');
	background-repeat:no-repeat;
	background-position:left center;
	background-size:20px 20px;
	padding:0 0 0 20px;
	box-sizing:border-box;
	max-width:50%;
	overflow:hidden;
	text-overflow:ellipsis;
}
div.pageheader.dark a{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M17.729 6.572c0.313-0.313 0.722-0.468 1.132-0.468s0.818 0.156 1.132 0.469c0.624 0.624 0.624 1.636 0 2.261l-7.166 7.166 7.165 7.167c0.624 0.624 0.624 1.636 0 2.26-0.626 0.626-1.637 0.626-2.262 0.001l-9.428-9.428 9.428-9.428z" /></svg>');
}
div.pageheader.dark div.inner > *{
	background-color:rgba(0,0,0,0);
	color:#FFF;
}
div.pageheader.light div.inner > *{
	background-color:rgba(255,255,255,0);
	color:#445;
}
div.pageheader h3{
	font-weight:700;
	text-align:right;
}
div.pageheader div.video{
	position:relative;
	z-index:1;
	overflow:hidden;
}
div.pageheader div.video video{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/*----------------------------------------------------
** Retina Display
**----------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	div.catchcopy{
		border-bottom-width:0.9px;
	}
	.headermenu div.header{
		border-bottom-width:0.9px;
	}
	.headermenu#login .formarea{
		border-top-width:0.9px;
		border-bottom-width:0.9px;
	}
	.headermenu#login div.formbox_02{
		border-width:0.9px;
	}
	.headermenu.main ul,
	.headermenu.main ul li{
		border-bottom-width:0.9px;
	}
	.headermenu#searchmenu div.wrap_01{
		border-top-width:0.9px;
	}
	div.pageheader{
		border-bottom-width:0.9px;
	}
}
@media screen and (max-width:320px){
	.headermenu#contactmenu div.mail > dl dt,
	.headermenu#contactmenu div.mail > dl dd{
		font-size:13px;
	}
	body.safari footer::after{
		height:1px;
	}
	body.safari .headermenu > .inner::after{
		height:0;
	}
}
@media screen and (max-width:767px){
	header + *{
		margin-top:-50px;
	}
	/*----------------------------------------------------
	** header
	**----------------------------------------------------*/
	header div.header{
		padding:10px;
		height:50px;
	}
	/* logo */
	header div.logo{
		padding:5px 0;
	}
	header div.logo,
	header div.logo h2,
	header div.logo a,
	header div.logo svg{
		width:210px;
		height:20px;
	}
	header div.logo{
		perspective:90px;
	}
	/* menu button */
	div.header .menubtn{
		width:30px;
		height:30px;
	}
	div.header .menubtn::before{
		line-height:10px;
		transform:translate(-50%,0) scale(0.7);
	}
	div.header .menubtn div.icon{
		width:20px;
		height:20px;
		margin:0 5px 10px 5px;
		background-size:24px 24px;
	}
	/* pagetop */
	header div.pagetop{
		width:80px;
		height:6px;
		border-radius:3px;
		text-align:center;
		position:absolute;
		bottom:0;
		left:50%;
		transform:translate3d(-50%,0,0);
		line-height:0;
	}
	.scrollup header div.pagetop{
		transform:translate3d(-50%,11px,0);
		opacity:1;
	}
	header div.pagetop::before{
		transform:scale(0.7);
		line-height:6px;
		display:block;
	}
	/*----------------------------------------------------
	** footer
	**----------------------------------------------------*/
	footer{
		background-image:url(../img/bg/footer_mobile.jpg);
	}
	footer div.copyright a{
		font-size:18px;
	}
	footer div.footer{
		padding:60px 0 0 0;
	}
	footer div.footertop{
		top:60px;
	}
	footer figure.symbol{
	}
	footer figure.symbol svg{
		width:30vw;
	}
	footer div.company h3{
		padding:10px 0 0 0;
		font-size:21px;
	}
	footer div.company + div{
	}
	footer div.footercontents{
		margin:30px 15px 0 15px;
	}
	footer div.footerbottom{
		width:100%;
	}
	footer div.video{
		width:100%;
		overflow:hidden;
	}
	footer div.video video{
		width:auto;
	}
	footer div.sns{
		padding:20px 0 0 0;
	}
	footer div.company h3::after{
		font-size: 12px;
		font-weight: 400;
		line-height: 20px;
	}
	footer div.footercontents div.menubtn{
		font-size:12px;
		line-height:20px;
		padding:5px 60px;
		margin:10px auto 0 auto;
	}
	footer div.footercontents div.menubtn span{
		font-size:18px;
		font-weight:700;
		line-height:20px;
	}
	/*----------------------------------------------------
	** header menu
	**----------------------------------------------------*/
	.headermenu{
		width:100vw;
		height:calc( 100vh - 26px );
		border-radius:10px 10px 0 0;
		top:26px;
		transform:translate(0,100%);
	}
	.headermenu .inner{
		width:100vw;
		height:calc( 100vh - 26px );
	}
	/*----------------------------------------------------
	** page header
	**----------------------------------------------------*/
	div.pageheader{
		min-height:80px;
	}
	div.pageheader div.inner{
		width:100%;
		padding:0 10px 5px 10px;
	}
	div.pageheader div.inner > *{
		line-height:30px;
	}
	div.pageheader div.inner > a{
		line-height:30px;
	}
}
@media screen and (min-width:768px) and (max-width:1099px){
	header div.header{
		height:70px;
		padding:15px;
	}
	header div.logo,
	header div.logo h2,
	header div.logo a,
	header div.logo svg{
		width:420px;
		height:40px;
	}
	/* menu button */
	div.header .menubtn{
		width:40px;
		height:40px;
	}
	div.header .menubtn::before{
		line-height:12px;
		transform:translate(-50%,0);
	}
	div.header .menubtn div.icon{
		width:26px;
		height:26px;
		margin:0 7px 14px 7px;
		background-size:36px 36px;
	}
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
	header + *{
		margin-top:-80px;
	}
	header div.header{
		width:1100px;
		height:80px;
		margin:0 auto;
		padding:20px 0;
	}
	header div.logo,
	header div.logo h2,
	header div.logo a,
	header div.logo svg{
		width:420px;
		height:40px;
	}
	/* menu button */
	div.header .menubtn{
		width:40px;
		height:40px;
	}
	div.header .menubtn::before{
		line-height:12px;
		transform:translate(-50%,0);
	}
	div.header .menubtn div.icon{
		width:26px;
		height:26px;
		margin:0 7px 14px 7px;
		background-size:36px 36px;
	}
	/*----------------------------------------------------
	** footer
	**----------------------------------------------------*/
	footer{
		background-image:url(../img/bg/footer_large.jpg);
		overflow:hidden;
	}
	body.edge footer,
	body.chrome footer,
	body.firefox footer{
		background-image:url(../img/bg/footer_large.webp);
	}
	footer div.footer{
		padding:100px 0 0 0;
	}
	footer div.footertop{
		top:100px;
		width:1100px;
		margin:0 auto;
		display:flex;
	}
	footer figure.symbol svg{
		width:22vw;
	}
	footer div.company h3{
		padding:20px 0 0 0;
		font-size:38px;
	}
	footer div.company h3::after{
		font-size:20px;
		font-weight:400;
		line-height:20px;
	}
	footer div.footerbottom{
		display:flex;
		width:1100px;
		flex-direction:row-reverse;
		justify-content:space-between;
		left:calc(( 100vw - 1100px ) / 2 );
	}
	footer div.bottomlink{
		text-align:right;
		line-height:40px;
		padding:0 0 40px 0;
	}
	footer div.sns{
		margin:0 10px 0 auto;
	}
	footer div.footercontents{
		width:720px;
		text-align:center;
	}
	footer div.footercontents div p{
		font-size:18px;
		padding:60px 0 20px 0;
	}
	footer div.footercontents div div.menubtn{
	}
	footer div.copyright{
		text-align:left;
		line-height:40px;
		padding:0 0 40px 0;
	}
	footer div.copyright a{
		font-size:18px;
	}
	/*----------------------------------------------------
	** header menu
	**----------------------------------------------------*/
	.headermenu{
		width:30vw;
		height:calc( 100vh - 40px );
		top:20px;
		bottom:20px;
	}
	.headermenu.lefttype{
		left:0;
		border-radius:0 10px 10px 0;
		transform:translate(-100%,0);
	}
	.headermenu.righttype{
		right:0;
		border-radius:10px 0 0 10px;
		transform:translate(100%,0);
	}
	.headermenu .inner{
		width:30vw;
		height:calc( 100vh - 40px );
	}
	/*----------------------------------------------------
	** page header
	**----------------------------------------------------*/
	div.pageheader{
		min-height:110px;
	}
	div.pageheader div.inner{
		width:1100px;
		bottom:0;
		left:50%;
		transform:translateX(-50%);
	}
	div.pageheader div.inner > *{
		line-height:30px;
	}
}
/*----------------------------------------------------
** Internet Explorer
**----------------------------------------------------*/