@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/
html {
	width:100%;
	font-size:90%;
}
body {
	-webkit-print-color-adjust: exact;
	background-color:#1F1F1F !important;
}

/*loading*/
#showloading {
	width:100vw;
	height:100vh;
    height: -webkit-fill-available;
	background-color:#1F1F1F;
}
.loading {
	width: 100%;
	z-index:300;
	position:fixed;
	top:0;
}
#showloading:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 49%;
    left: 50%;
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border-radius: 50%;
    border: 3px solid lightgrey;
    border-top-color: #595757;
    -moz-animation: spinner 1s linear infinite;
    -webkit-animation: spinner 1s linear infinite;
    -o-animation: spinner 1s linear infinite;
    -ms-animation: spinner 1s linear infinite;
    animation: spinner 1s linear infinite;
	z-index:300;
}

@-moz-keyframes spinner {
    to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}

@-o-keyframes spinner {
    to {-o-transform: rotate(360deg);}
}

@-ms-keyframes spinner {
    to {-ms-transform: rotate(360deg);}
}
@keyframes spinner {
    to {transform: rotate(360deg);}
}


/*main*/
.gridContainer {
	width: 100vw;
	margin: auto;
	clear: none;
	float: none;
	letter-spacing:0.1rem;
	color:#fff;
	text-align:center;
	font-family:"游ゴシック", "Roboto", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow: hidden;
	font-variant-ligatures: no-common-ligatures;
	/*font-size:16px;*/
}
/*header*/
.headerContents {
	width:100vw;
	height:calc(100vh - 7rem);
	margin:3.5rem auto;
}
.header__imgWrap {
	position:relative;
	width:100%;
	height:calc(100vh - 230px);
	margin:0 auto;
	z-index:-1;
}
.header__imgWrap .header__img {
	width:100%;
	height:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
.header__imgWrap img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.header__imgWrap span {
	position:absolute;
	top:-0.5%;
	left:0;
	width:100%;
	height:101%;
	background-color:#1F1F1F;
    -webkit-transform-origin:right;
    transform-origin:right;
    -moz-animation: slideX 1s ease-in 0s forwards;
    -webkit-animation: slideX 1s ease-in 0s forwards;
    -o-animation: slideX 1s ease-in 0s forwards;
    -ms-animation: slideX 1s ease-in 0s forwards;
    animation: slideX 1s ease-in 0s forwards;
}
.header__title {
	width:80%;
	height:25vh;
	margin:-2.5rem 10% 0 10%;
	text-align:left;
}
.header__title .en {
	margin:auto auto 1rem auto;
	color:#807F80;
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	font-size:2rem;
	letter-spacing:0;
	line-height:2.3rem;
}
.header__title .Ja {
	font-size:1.4rem;
	font-weight:normal;
}
.header__title .icon {
	width:1.8rem;
	margin:-0.3rem 0.5rem auto auto;
}

.main {
	position:relative;
	margin:0;
	padding:0;
}
section {
	width:100%;
	margin:0% auto;
	padding:0;
}

ul {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
	text-align:justify;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/*display*/
.dp-s { display:block; }
.dp-t { display:none; }
.dp-p { display:none; }
.dp-st { display:block; }
.dp-tp { display:none; }
.dp-sp { display:block; }


/*link*/
a {
	text-decoration: none;
	outline: none;
}
a:link	{
	color : #000000;
	text-decoration: none;
	outline: none;
}
a:active	{
	color : #000000;
	text-decoration: none;
	outline: none;
} 
a:hover {
	color : #000000;
	text-decoration: none;
	outline: none;
 opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
a:visited	{
	color : #000000;
	text-decoration: none;
	outline: none;
} 
a.tel, a:link.tel, a:active.tel, a:hover.tel, a:visited.tel {
	text-decoration: none;
	outline: none;
}


/*color*/
.colorB {
	color:#000000 !important;
}
.colorW {
	color:#ffffff !important;
}
.colorDB {
	color:#1F1F1F !important;
}
.colorLB {
	color:#323130v !important;
}
.colorRe {
	color:#CF000E !important;
}
.colorBl {
	color:#22A6BD !important;
}
.colorOr {
	color:#ED6D0F !important;
}
.colorGr {
	color:#00A856 !important;
}
.colorG8 {
	color:#807F80 !important;
}
.colorG5 {
	color:#B5B5B6 !important;
}


/*font*/
h3 {
	text-align:justify;
}
h4 {
	font-size:1.4rem;
	font-weight:400;
	text-align:justify;
}
p {
	line-height:1.8rem;
	text-align:justify;
	letter-spacing:0rem;
}

.txt-C {
	text-align:center;
}
.txt-L {
	text-align:left;
}
.txt-R {
	text-align:right;
}

.kome {
	padding-left:1rem;
	position:relative;
}
.kome::before {
	content:"※";
	position:absolute;
	left:0;
	top:0;
}





/*title*/
.titleA {
	text-align:left;
}
.titleA .en {
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:7vw;
	color:#807F80;
}

.titleB {
	text-align:justify;
}
.titleB .en {
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	font-size:1.9rem;
	line-height:2.2rem;
	color:#B5B5B6;
}
.titleB .ja {
	margin:0.5rem auto;
	font-size:1rem;
	font-weight:normal;
	color:#fff;
}


/*box*/
.txtA {
	width:66%;
	margin:auto 10%;
	padding:6% 7% 2% 7%;
	background-color:rgba(255,255,255,0.85);
	color:#000;
	text-align:justify;
}
.txtA .readtxt {
	position:relative;
	margin-bottom:1.5rem;
	padding-bottom:1.5rem;
	font-size:1.1rem;
	line-height:2rem;
}
.txtA .readtxt::after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:50px;
	height:1px;
	background-color:#000;
}


/*btn*/
.buttonA .btn {
	display: table;
	position: relative;
	width:55%;
	max-width:250px;
	min-width:160px;
	min-height:36px;
	margin:10px auto 20px auto;
	padding:0;
}
.buttonA .btnbase {
	display: table-cell;
	position: relative;
	width:100%;
	padding: 1rem;
	border-radius:0;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-weight:700;
	font-size:0.8rem;
	letter-spacing:0.1rem;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
	outline: none;
	overflow: hidden;
}
.buttonA .btnbase::after {
	content: "＞";
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -7px;
	color: #000;
	font-size:0.7rem;
}
.buttonA .btnbase::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:inline-block;
	background: linear-gradient(-45deg, #bdffff, #e1daff, #fff, #fff);
	background-size: 400% 400%;
	z-index:-1;
	-moz-animation: btnA-grada 10s linear infinite;
	-webkit-animation: btnA-grada 10s linear infinite;
	-o-animation: btnA-grada 10s linear infinite;
	-ms-animation: btnA-grada 10s linear infinite;
	animation: btnA-grada 10s linear infinite;
}
}
@keyframes btnA-grada {
0%,100% {background-position: 0% 0%;}
25% {background-position: 0% 100%;}
50% {background-position: 100% 100%;}
75% {background-position: 100% 0%;}
}
@-moz-keyframes btnA-grada {
0%,100% {background-position: 0% 0%;}
25% {background-position: 0% 100%;}
50% {background-position: 100% 100%;}
75% {background-position: 100% 0%;}
}
@-webkit-keyframes btnA-grada {
0%,100% {background-position: 0% 0%;}
25% {background-position: 0% 100%;}
50% {background-position: 100% 100%;}
75% {background-position: 100% 0%;}
}
@-o-keyframes btnA-grada {
0%,100% {background-position: 0% 0%;}
25% {background-position: 0% 100%;}
50% {background-position: 100% 100%;}
75% {background-position: 100% 0%;}
}
@-ms-keyframes btnA-grada {
0%,100% {background-position: 0% 0%;}
25% {background-position: 0% 100%;}
50% {background-position: 100% 100%;}
75% {background-position: 100% 0%;}
}
.buttonA .btnbase:hover::before {
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
}

.buttonB .btn, .buttonB-W .btn {
	display: table;
	width:100%;
	min-height:36px;
	margin:20px auto;
	padding:0;
	overflow: hidden;
}
.buttonB .btnbase {
	display: table-cell;
	position: relative;
	width:100%;
	padding: 1rem 0;
	border-radius:0;
	border-bottom:solid 1px #000;
	color: #000;
	font-size:0.9rem;
	font-weight:bold;
	letter-spacing:0.1rem;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
	outline: none;
}
.buttonB-W .btnbase {
	display: table-cell;
	position: relative;
	width:100%;
	padding: 1rem 0;
	border-radius:0;
	border-bottom:solid 1px #fff;
	color: #fff;
	font-size:0.9rem;
	font-weight:bold;
	letter-spacing:0.1rem;
	text-align: left;
	text-decoration: none;
	vertical-align: middle;
	outline: none;
}
.buttonB .btnbase::before, .buttonB-W .btnbase::before {
	content: "＞";
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -7px;
	font-size:0.7rem;
	-moz-animation: btnB-arrow 8s linear infinite;
	-webkit-animation: btnB-arrow 8s linear infinite;
	-o-animation: btnB-arrow 8s linear infinite;
	-ms-animation: btnB-arrow 8s linear infinite;
	animation: btnB-arrow 8s linear infinite;
}
@-moz-keyframes btnB-arrow {
  0%,35%,60%,100%{ opacity: 0.3;}
  25%{ opacity: 1;}
  50%{ opacity: 0.7;}
  75%{ opacity: 1;}
}
@-webkit-keyframes btnB-arrow {
  0%,35%,60%,100%{ opacity: 0.3;}
  25%{ opacity: 1;}
  50%{ opacity: 0.7;}
  75%{ opacity: 1;}
}
@-o-keyframes btnB-arrow {
  0%,35%,60%,100%{ opacity: 0.3;}
  25%{ opacity: 1;}
  50%{ opacity: 0.7;}
  75%{ opacity: 1;}
}
@-ms-keyframes btnB-arrow {
  0%,35%,60%,100%{ opacity: 0.3;}
  25%{ opacity: 1;}
  50%{ opacity: 0.7;}
  75%{ opacity: 1;}
}
@keyframes btnB-arrow {
  0%,35%,60%,100%{ opacity: 0.3;}
  25%{ opacity: 1;}
  50%{ opacity: 0.7;}
  75%{ opacity: 1;}
}
.buttonB .btnbase::after, .buttonB-W .btnbase::after {
	content: "";
	position: absolute;
	left:0;
	bottom:0;
	width:20%;
	height:1px;
	background-color:#000;
	-moz-animation: btnB-square 2s ease infinite;
	-webkit-animation: btnB-square 2s ease infinite;
	-o-animation: btnB-square 2s ease infinite;
	-ms-animation: btnB-square 2s ease infinite;
	animation: btnB-square 2s ease infinite;
}
.buttonB-W .btnbase::after {
	background-color:#fff;
}
@-moz-keyframes btnB-square {
  0% { -moz-transform: translateX(0); opacity: 0;}
  1% { opacity: 1;}
  24% { opacity: 0.7;}
  25% { -moz-transform: translateX(500%); opacity: 0;}
  100% { -moz-transform: translateX(0); opacity: 0;}
}
@-webkit-keyframes btnB-square {
  0% { -webkit-transform: translateX(0); opacity: 0;}
  1% { opacity: 1;}
  24% { opacity: 0.7;}
  25% { -webkit-transform: translateX(500%); opacity: 0;}
  100% { -webkit-transform: translateX(0); opacity: 0;}
}
@-o-keyframes btnB-square {
  0% { -o-transform: translateX(0); opacity: 0;}
  1% { opacity: 1;}
  24% { opacity: 0.7;}
  25% { -o-transform: translateX(500%); opacity: 0;}
  100% { -o-transform: translateX(0); opacity: 0;}
}
@-ms-keyframes btnB-square {
  0% { -ms-transform: translateX(0); opacity: 0;}
  1% { opacity: 1;}
  24% { opacity: 0.7;}
  25% { -ms-transform: translateX(500%); opacity: 0;}
  100% { -ms-transform: translateX(0); opacity: 0;}
}
@keyframes btnB-square {
  0% { transform: translateX(0); opacity: 0;}
  1% { opacity: 1;}
  24% { opacity: 0.7;}
  25% { transform: translateX(500%); opacity: 0;}
  100% { transform: translateX(0); opacity: 0;}
}
.buttonB .btnbase:hover::after, .buttonB-W .btnbase:hover::after {
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}

.animeSlideX {
    -moz-animation: slideX 1s ease-in 0s forwards;
    -webkit-animation: slideX 1s ease-in 0s forwards;
    -o-animation: slideX 1s ease-in 0s forwards;
    -ms-animation: slideX 1s ease-in 0s forwards;
    animation: slideX 1s ease-in 0s forwards;
}
@-moz-keyframes slideX {  
  0% { -moz-transform: scaleX(1); }
  100% { -moz-transform: scaleX(0); }
}
@-webkit-keyframes slideX {  
  0% { -webkit-transform: scaleX(1); }
  100% { -webkit-transform: scaleX(0); }
}
@-o-keyframes slideX {  
  0% { -o-transform: scaleX(1); }
  100% { -o-transform: scaleX(0); }
}
@-ms-keyframes slideX {  
  0% { -ms-transform: scaleX(1); }
  100% { -ms-transform: scaleX(0); }
}
@keyframes slideX {  
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.animeSlideY {
    -moz-animation: slideY 1s ease-in 0s forwards;
    -webkit-animation: slideY 1s ease-in 0s forwards;
    -o-animation: slideY 1s ease-in 0s forwards;
    -ms-animation: slideY 1s ease-in 0s forwards;
    animation: slideY 1s ease-in 0s forwards;
}
@-moz-keyframes slideY {  
  0% { -moz-transform: scaleY(1); }
  100% { -moz-transform: scaleY(0); }
}
@-webkit-keyframes slideY {  
  0% { -webkit-transform: scaleY(1); }
  100% { -webkit-transform: scaleY(0); }
}
@-o-keyframes slideY {  
  0% { -o-transform: scaleY(1); }
  100% { -o-transform: scaleY(0); }
}
@-ms-keyframes slideY {  
  0% { -ms-transform: scaleY(1); }
  100% { -ms-transform: scaleY(0); }
}
@keyframes slideY {  
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

@-moz-keyframes alpha {
    0%{ opacity: 0; }
    100%{ opacity: 100; }
}
@-webkit-keyframes alpha {
    0%{ opacity: 0; }
    100%{ opacity: 100; }
}
@-o-keyframes alpha {
    0%{ opacity: 0; }
    100%{ opacity: 100; }
}
@-ms-keyframes alpha {
    0%{ opacity: 0; }
    100%{ opacity: 100; }
}
@keyframes alpha {
    0%{ opacity: 0; }
    100%{ opacity: 100; }
}

.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}


@media print, screen and (min-width: 481px) {

/*display*/
.dp-s { display:none; }
.dp-t { display:block; }
.dp-p { display:none; }
.dp-st { display:block; }
.dp-tp { display:block; }
.dp-sp { display:none; }


/*font*/

/*header*/
.headerContents {
	height:calc(100vh - 8rem);
	margin:4em auto;
}
.header__title {
	width:70%;
	margin:-2.5rem 15% 0 15%;
}
.header__txtWrap {
	width:70%;
	margin:9% 15%;
}
.header__txtWrap img {
	width:17rem;
}

/*content*/

/*title*/
.titleA .en {
	font-size:2.5rem;
}

/*box*/
.txtA {
	width:56%;
	margin:5% 15%;
	padding:5% 7% 2% 7%;
}

/*btn*/
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

@media print {
.headerContents {
	height: 600px;
	background-color:#1F1F1F !important;
}
.header__imgWrap {
	height: 550px;
	z-index:1;
}
.header__title {
	position:relative;
	z-index:5;
}
.header__title .en {
	color:#807F80 !important;
}
.header__title .Ja {
	color:#fff !important;
}


h3 .colorW {
	color:#000 !important;
}
.txtA {
	background-color:rgba(255,255,255,0.85) !important;
	color:#000 !important;
}
}



@media only screen and (min-width: 769px) {
	
/*font*/
p {
	font-size:calc(0.9rem + 0.1vw);
	line-height:calc(2rem + 0.1vw);
}


/*btn*/

/*display*/
.dp-s { display:none; }
.dp-t { display:none; }
.dp-p { display:block; }
.dp-st { display:none; }
.dp-tp { display:block; }
.dp-sp { display:block; }


/*header*/
.headerContents {
	position:relative;
	height:calc(100vh - 12rem);
	margin:6em 0;
}
section.serviceSurvey {
	margin-bottom:10%;
}
.header__imgWrap {
	width:80%;
	height:100%;
	margin:0% 0 0% 20%;
}
.header__imgWrap img {
	width:100%;
	height:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	object-fit: cover;
	border:solid 3px #1F1F1F;
}
.header__title {
	position:absolute;
	top:60%;
	left:0%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	margin-bottom:0;
	padding-bottom:0;
}
.header__title .en {
	margin:auto auto 1rem auto;
	font-size:calc(1.5rem + 1vw);
	line-height:3rem;
}

/*content*/

/*title*/
.titleA .en {
	font-size:calc(2.5rem + 0.7vw);
}

/*box*/
.txtA {
	padding:8% 10% 4% 10%;
}

.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}
}