@charset "UTF-8";

/*-----------------------------------------------
  GENERIC
  -----------------------------------------------*/
html
{ height:100%;  font-size:62.5%; }
body
{ background-color:#fff;  font-family:'Noto Sans JP','游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;  font-weight:300;  color:#000;  line-height:1;  letter-spacing:0.01em;  font-feature-settings:"palt"; }
form input, form textarea
{ font-family:'Noto Sans JP','游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;  font-weight:300;  color:#000; }

.off
{ overflow:hidden; }

.loading-dot
{ position:fixed;  top:60px;  right:30px;  display:none;  background-color:#000;  width:10px;  height:10px;  box-shadow:0 0 0 2px rgba(255,255,255,1);  border-radius:50%;  z-index:100;  animation:switching .3s infinite; }
.loading-dot.app
{ display:block; }
@keyframes switching {
	0%
	{ opacity:0; }
	50%
	{ opacity:1; }
	100%
	{ opacity:0; }
}

*::selection
{ background-color:#fae9ea; }

.show-pc
{ display:block !important; }
.show-sp
{ display:none !important; }

strong
{ font-weight:500; }

a
{ color:#000;  -webkit-transition:0.3s color linear;  transition:0.3s color linear; }
a:hover
{ text-decoration:none;  color:#c01920; }

a.link-more
{ position:relative;  display:inline-block;  padding:0 12px 18px 0;  font-family:Arimo, sans-serif;  font-weight:700;  text-decoration:none;  overflow:hidden; }
a.link-more .link-more-arrow
{ position:absolute;  bottom:0;  left:0;  display:block;  width:calc(100% - 12px);  height:3px;  background-color:#000; }
a.link-more .link-more-arrow::after
{ content:'';  position:absolute;  bottom:0;  right:-12px;  width:0;  height:0;  border-style:solid;  border-width:8px 0 0 12px;  border-color:transparent transparent transparent #000; }
a.link-more:hover
{ color:#000; }
a.link-more:hover .link-more-arrow
{ animation:arrow .8s ease-in-out; }
@keyframes arrow {
	0%
	{ transform:translateX(0); }
	49%
	{ transform:translateX(calc(100% + 13px)); }
	49.1%
	{ transform:translateX(calc(-100% - 13px)); }
	100%
	{ transform:translateX(0); }
}


/*  HEADER  */
header
{ position:fixed;  top:0;  left:0;  bottom:0;  width:170px;  background-color:#fff; }
header h1
{ position:fixed;  top:30px;  left:40px; }
header h1 a
{ display:block;  width:90px; }
header h1 a img
{ width:100%;  height:auto;  opacity:1;  -webkit-transition:opacity .2s;  transition:opacity .2s; }
header h1 a:hover img
{ opacity:0.8; }
header nav
{ position:fixed;  top:50%;  left:85px; }
header nav ul
{ -webkit-transform:translateX(-50%) translateY(-50%);  transform:translateX(-50%) translateY(-50%); }
header nav li
{ font-family:Arimo, sans-serif;  font-weight:700;  font-size:1.8rem;  list-style:none; }
header nav li + li
{ margin:30px 0 0; }
header nav li a
{ position:relative;  display:inline-block;  text-decoration:none; }
header nav li a::after
{ content:'';  position:absolute;  bottom:-6px;  left:0;  width:100%;  height:2px;  background:#000;  transform:scale(0, 1);  transform-origin:right top;  transition:transform .4s; }
header nav li a:hover
{ color:#000; }
header nav li a:hover::after
{ transform-origin:left top;  transform:scale(1, 1); }
header .sns
{ position:fixed;  bottom:20px;  left:20px;  display:flex;  visibility:hidden;  opacity:0;  -webkit-transition:opacity 0.2s ease-in, visibility 0.3s;  transition:opacity 0.2s ease-in, visibility 0.3s; }
header .sns li
{ margin:0 10px;  list-style:none; }
header .sns a
{ display:block;  overflow:hidden;  text-indent:100%;  white-space:nowrap; }
header .sns .tw a
{ background-image:url(../images/twitter.svg);  background-size:contain;  width:24px;  height:19px; }
 

/*  NAV  */
.nav-menu-position
{ display:none;  position:absolute;  top:9px;  right:9px;  z-index:11; }
.nav-menu
{ position:relative;  display:block;  padding:38px 0 0;  width:52px;  height:52px;  text-decoration:none; }
.nav-menu::before
{ content:'MENU';  position:absolute;  bottom:5px;  left:0;  width:100%;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:1rem;  text-align:center; }
.nav-menu.is-active::before
{ content:'CLOSE'; }
.nav-menu:hover
{ color:#000; }
.nav-menu span
{ position:absolute;  top:19px;  left:11px;  right:11px;  display:block;  height:3px;  background-color:#000; }
.nav-menu span::before,
.nav-menu span::after
{ content:"";  position:absolute;  left:0;  display:block;  width:100%;  height:3px;  background-color:#000; }
.nav-menu span::before
{ top:-9px; }
.nav-menu span::after
{ bottom:-9px;  width:80%; }

.nav-toggle-switch span
{ -webkit-transition:background 0s 0.3s;  transition:background 0s 0.3s; }
.nav-toggle-switch span::before
{ -webkit-transition-duration:0.3s, 0.3s;  transition-duration:0.3s, 0.3s;  -webkit-transition-delay:0.3s, 0s;  transition-delay:0.3s, 0s; }
.nav-toggle-switch span::after
{ -webkit-transition-duration:0.3s, 0.3s, 0.3s;  transition-duration:0.3s, 0.3s, 0.3s;  -webkit-transition-delay:0.3s, 0.3s, 0s;  transition-delay:0.3s, 0.3s, 0s; }
.nav-toggle-switch span::before
{ -webkit-transition-property:top, -webkit-transform;  transition-property:top, transform; }
.nav-toggle-switch span::after
{ -webkit-transition-property:bottom, width, -webkit-transform;  transition-property:bottom, width, transform; }

.nav-toggle-switch.is-active span
{ background:none; }
.nav-toggle-switch.is-active span::before
{ top:0;  -webkit-transform:rotate(45deg);  transform:rotate(45deg); }
.nav-toggle-switch.is-active span::after
{ bottom:0;  width:100%;  -webkit-transform:rotate(-45deg);  transform:rotate(-45deg); }
.nav-toggle-switch.is-active span::before
{ -webkit-transition-delay:0s, 0.3s;  transition-delay:0s, 0.3s; }
.nav-toggle-switch.is-active span::after
{ -webkit-transition-delay:0s, 0s, 0.3s;  transition-delay:0s, 0s, 0.3s; }

/*  FOOTER  */
footer
{ margin:0 0 0 170px;  padding:0 30px 30px;  width:calc(100% - 170px); }
footer .footer-contact
{ margin:0 0 110px; }
footer .footer-contact a
{ display:block;  padding:50px 0;  background-color:#000;  color:#fff;  text-align:center;  text-decoration:none; }
footer .footer-contact .footer-contact-txt
{ margin:0 0 30px;  font-size:2.2rem;  font-weight:500; }
footer .footer-contact .footer-contact-link
{ position:relative;  display:inline-block;  padding:0 12px 18px 0;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:2.2rem;  text-decoration:none;  overflow:hidden; }
footer .footer-contact .footer-contact-link .link-arrow
{ position:absolute;  bottom:0;  left:0;  display:block;  width:calc(100% - 12px);  height:3px;  background-color:#fff; }
footer .footer-contact .footer-contact-link .link-arrow::after
{ content:'';  position:absolute;  bottom:0;  right:-12px;  width:0;  height:0;  border-style:solid;  border-width:8px 0 0 12px;  border-color:transparent transparent transparent #fff; }
footer .footer-contact a:hover .link-arrow
{ animation:arrow .8s ease-in-out; }
footer h2
{ margin:0 auto 30px;  width:220px; }
footer h2 img
{ width:100%;  height:auto; }
footer .sns
{ display:flex;  justify-content:center; }
footer .sns li
{ margin:0 10px;  list-style:none; }
footer .sns a
{ display:block;  overflow:hidden;  text-indent:100%;  white-space:nowrap;  opacity:1;  -webkit-transition:opacity .2s;  transition:opacity .2s; }
footer .sns a:hover
{ opacity:0.8; }
footer .sns .tw a
{ background-image:url(../images/twitter.svg);  background-size:contain;  width:24px;  height:19px; }
footer small
{ display:block;  margin:50px 0 0;  font-family:Arimo, sans-serif;  font-weight:400;  font-size:1rem;  line-height:1;  text-align:center; }

/*  404  */
.error
{ display:grid;  padding:0 30px;  height:calc(100vh - 170px);  min-height:500px;  place-items:center; }
.error-text
{ text-align:center; }
.error-text .jp
{ margin:0 0 7px;  font-size:3.4rem;  line-height:1.5;  font-weight:500; }
.error-text .en
{ margin:0 0 30px;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:2.4rem;  line-height:1.5; }
.error-text .link
{ font-size:2.4rem; }


/*  CONTENT  */
article
{ margin:0 0 0 170px;  width:calc(100% - 170px);  min-width:1000px; }

@media only screen and (max-width: 1023px) {
	.loading-dot
	{ top:90px;  right:20px;  width:8px;  height:8px; }

	.show-pc
	{ display:none !important; }
	.show-sp
	{ display:block !important; }
	
	a.link-more
	{ padding:0 12px 14px 0; }
	
	header
	{ position:fixed;  top:0;  left:0;  bottom:auto;  width:100%;  height:70px;  box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.3);  z-index:10;  -webkit-transition:height .5s ecubic-bezier(.86,0,.07,1) .2s;  transition:height .5s cubic-bezier(.86,0,.07,1) .2s; }
	header.is-active
	{ height:100vh;  -webkit-transition:height .5s cubic-bezier(.86,0,.07,1);  transition:height .5s cubic-bezier(.86,0,.07,1); }
	header h1
	{ top:15px;  left:15px; }
	header h1 a
	{ width:57px; }
	header nav
	{ position:fixed;  top:50%;  left:20px;  visibility:hidden;  opacity:0;  -webkit-transition:opacity .3s, visibility .4s;  transition:opacity .3s, visibility .4s; }
	header.is-active nav
	{ visibility:visible;  opacity:100;  -webkit-transition:opacity .1s;  transition:opacity .1s; }
	header nav ul
	{ -webkit-transform:translateY(-50%);  transform:translateY(-50%); }
	header nav li
	{ font-size:4rem;  overflow:hidden; }
	header nav li + li
	{ margin:30px 0 0; }
	header nav li a
	{ -webkit-transform:translateY(100%);  transform:translateY(100%);  -webkit-transition:transform .3s ease-in-out;  transition:transform .3s ease-in-out; }
	header.is-active nav li a
	{ -webkit-transform:translateY(0);  transform:translateY(0);  -webkit-transition:transform .4s ease-in-out .3s;  transition:transform .4s ease-in-out .3s; }
	header.is-active nav li:nth-child(2) a
	{ -webkit-transition-duration:.5s;  transition-duration:.5s; }
	header.is-active nav li:nth-child(3) a
	{ -webkit-transition-duration:.7s;  transition-duration:.7s; }
	header.is-active nav li:nth-child(4) a
	{ -webkit-transition-duration:.9s;  transition-duration:.9s; }
	header nav li a::after
	{ content:none; }
	header.is-active .sns
	{ visibility:visible;  opacity:1;  -webkit-transition:opacity .3s .5s;  transition:opacity .3s .5s; }
	
	.nav-menu-position
	{ display:block; }

	footer
	{ margin:0;  padding:0 0 30px;  width:100%; }
	footer .footer-contact
	{ margin:0 0 60px; }
	footer .footer-contact a
	{ padding:30px 0; }
	footer .footer-contact .footer-contact-txt
	{ margin:0 0 20px;  font-size:1.8rem; }
	footer .footer-contact .footer-contact-link
	{ padding:0 12px 14px 0;  font-size:1.8rem; }
	footer h2
	{ margin:0 auto 20px;  width:170px; }
	footer .sns li
	{ margin:0 6px; }
	footer small
	{ margin:30px 0 0; }
	
	.error
	{ padding:0 20px;  height:calc(94vh - 140px);  min-height:inherit; }
	.error-text
	{ margin:70px 0 0; }
	.error-text .jp
	{ margin:0 0 5px;  font-size:2.8rem; }
	.error-text .en
	{ margin:0 0 30px;  font-size:2rem; }
	.error-text .link
	{ font-size:2rem; }
	
	article
	{ margin:0 auto;  width:100%;  min-width:inherit; }
}
@media only screen and (max-width: 768px) {
	a
	{ -webkit-tap-highlight-color:rgba(0,0,0,0.05); }
}


/*-----------------------------------------------
  INDEX
  -----------------------------------------------*/
.index-visual
{ margin:30px 0 150px; }
.index-visual .visual-area
{ position:relative;  padding:20px;  width:100%;  height:calc(100vh - 30px);  min-height:600px;  background-color:#000;  overflow:hidden; }
.index-visual .visual-area img
{ position:absolute;  top:50%;  left:50%;  width:auto;  height:90%;  opacity:0;  -webkit-transform:translateX(-50%) translateY(-50%);  transform:translateX(-50%) translateY(-50%); }
.index-visual .visual-area img.on
{ animation:index-appimg .8s ease-in-out .4s;  animation-fill-mode:forwards; }
@keyframes index-appimg {
	0%
	{ height:90%;  opacity:0; }
	100%
	{ height:85%;  opacity:1; }
}
.index-visual .visual-area p
{ position:absolute;  bottom:20px;  left:20px;  font-family:Arimo, sans-serif;  font-weight:400;  font-size:1.2rem;  color:#fff; }
.index-visual .scroll
{ position:fixed;  bottom:20px;  left:84px;  display:block;  width:8px;  height:60px;  visibility:visible;  opacity:1;  -webkit-transition:opacity .2s;  transition:opacity .2s; }
.index-visual .scroll:hover
{ opacity:0.8; }
.index-visual .scroll.out
{ visibility:hidden;  opacity:0;  -webkit-transition:opacity 0.2s ease-in, visibility 0.3s;  transition:opacity 0.2s ease-in, visibility 0.3s; }
.index-visual .scroll .scroll-line
{ position:relative;  display:block;  width:100%;  height:100%;  overflow:hidden; }
.index-visual .scroll .scroll-line::before
{ content:'';  position:absolute;  top:0;  left:3px;  display:block;  width:2px;  height:100%;  background-color:#000; }
.index-visual .scroll .scroll-dot
{ position:absolute;  top:0;  left:0;  width:100%;  height:100%;  background-position:0 0;
  animation:scroll 1.6s cubic-bezier(.86,0,.07,1) infinite; }
@keyframes scroll {
	0%
	{ transform:translateY(-10%) }
	100%
	{ transform:translateY(100%) }
}
.index-visual .scroll .scroll-dot::before
{ content:"";  position:absolute;  top:0;  left:0;  display:block;  width:8px;  height:8px;  background-color:#000;  border-radius:50%; }
.index-about
{ margin:0 auto 150px;  padding:0 30px; }
.index-about h2
{ margin:0 0 40px;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:3.2rem; }
.index-about h2 .num
{ position:relative;  display:inline-block;  padding:0 42px 0 0;  font-size:1.2rem;  vertical-align:super; }
.index-about h2 .num::after
{ content:"";  position:absolute;  top:0;  right:20px;  display:block;  width:2px;  height:100%;  background-color:#c01920; }
.index-about .index-about-lead
{ margin:0 0 30px;  font-size:3.6rem;  line-height:1.7;  font-weight:500; }
.index-about .index-about-link
{ margin:0 0 110px;  font-size:2.2rem; }
.index-about .index-about-pic
{ display:flex;  align-items:flex-start;  margin:0 -6px;  width:100%; }
.index-about .index-about-pic li
{ position:relative;  margin:0 6px;  width:25%;  list-style:none;  vertical-align:top; }
.index-about .index-about-pic li:nth-child(2)
{ margin-top:-70px; }
.index-about .index-about-pic li:nth-child(3)
{ margin-top:40px; }
.index-about .index-about-pic li:nth-child(4)
{ margin-top:-30px; }
.index-about .index-about-pic li img
{ width:100%;  height:auto; }
.index-about .index-about-pic li span
{ position:absolute;  padding:10px 20px;  background-color:#fff;  font-size:1.8rem;  line-height:1.5;  font-weight:500; }
.index-about .index-about-pic li:nth-child(1) span, .index-about .index-about-pic li:nth-child(3) span
{ bottom:-2.9rem;  right:0; }
.index-about .index-about-pic li:nth-child(2) span
{ top:-2.9rem;  right:0; }
.index-about .index-about-pic li:nth-child(4) span
{ top:0;  right:0; }
.index-works
{ margin:0 auto 150px;  padding:0 0 0 30px; }
.index-works h2
{ margin:0 0 40px;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:3.2rem; }
.index-works h2 .num
{ position:relative;  display:inline-block;  padding:0 42px 0 0;  font-size:1.2rem;  vertical-align:super; }
.index-works h2 .num::after
{ content:"";  position:absolute;  top:0;  right:20px;  display:block;  width:2px;  height:100%;  background-color:#c01920; }
.index-works .index-works-category
{ display:flex;  flex-wrap:wrap;  margin:0 0 38px;  width:100%; }
.index-works .index-works-category li
{ position:relative;  width:calc(50% - 1px);  list-style:none;  vertical-align:top; }
.index-works .index-works-category li:nth-child(odd)
{ margin:0 1px 2px 0; }
.index-works .index-works-category li:nth-child(even)
{ margin:0 0 2px 1px; }
.index-works .index-works-category .index-works-img
{ overflow:hidden; }
.index-works .index-works-category .index-works-img::after
{ content:"";  position:absolute; top:0;  left:0;  background-image:-webkit-linear-gradient(0, rgb(0,0,0) 0%, rgba(0,0,0,0) 70%);  background-image:linear-gradient(0, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 70%);  width:100%;  height:100%; }
.index-works .index-works-category .index-works-img img
{ width:100%;  height:auto;  -webkit-transition:transform .5s ease-in-out;  transition:transform .5s ease-in-out; }
.index-works .index-works-category li:hover .index-works-img img
{ transform:scale(1.05, 1.05); }
.index-works .index-works-category h3
{ position:absolute;  bottom:20px;  left:20px;  font-family:Arimo, sans-serif;  font-weight:700;  font-size:4.8rem;  color:#fff; }
.index-works .index-works-category .index-works-jp
{ display:block;  margin:3px 0 0;  font-family:'Noto Sans JP','游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;  font-size:2rem;  font-weight:500; }
.index-works .index-works-category p
{ position:absolute;  bottom:20px;  right:20px;  font-size:1.2rem;  color:#fff; }
.index-works .index-works-link
{ font-size:2.2rem;  text-align:center; }
.index-news
{ margin:0 auto 150px;  padding:0 30px; }
.index-news h2
{ margin:0 0 40px;  font-family:Arimo, sans-serif;  font-size:3.2rem;  font-weight:700; }
.index-news h2 .num
{ position:relative;  display:inline-block;  padding:0 42px 0 0;  font-size:1.2rem;  vertical-align:super; }
.index-news h2 .num::after
{ content:"";  position:absolute;  top:0;  right:20px;  display:block;  width:2px;  height:100%;  background-color:#c01920; }
.index-news ul li
{ list-style:none; }
.index-news ul li + li
{ margin:40px 0 0; }
.index-news .index-news-date
{ margin:0 0 5px;  font-size:1.4rem;  font-weight:500; }
.index-news h3
{ margin:0 0 5px;  font-size:1.8rem;  line-height:1.7;  font-weight:500; }
.index-news .index-news-txt
{ font-size:1.5rem;  line-height:1.7; }
.index-news .index-news-twitter
{ margin:70px auto 0;  padding:10px;  max-width:520px;  width:100%;  background-color:#f2f2f2; }

@media only screen and (max-width: 1023px) {
	.index-visual
	{ position:relative;  margin:70px 0 80px; }
	.index-visual .visual-area
	{ padding:10px;  height:calc(94vh - 70px);  min-height:inherit; }
	.index-visual .visual-area img
	{ width:100%;  height:auto; }
	@keyframes index-appimg {
		0%
		{ width:105%;  height:auto;  opacity:0; }
		100%
		{ width:100%;  height:auto;  opacity:1; }
	}
	.index-visual .visual-area p
	{ bottom:15px;  left:15px;  font-size:1.1rem; }
	.index-visual .scroll
	{ position:absolute;  bottom:20px;  left:auto;  right:23px;  width:6px;  height:40px; }
	.index-visual .scroll.out
	{ visibility:visible;  opacity:1; }
	.index-visual .scroll .scroll-line::before
	{ left:2px;  background-color:#fff; }
	.index-visual .scroll .scroll-dot::before
	{ width:6px;  height:6px;  background-color:#fff; }
	.index-about
	{ margin:0 auto 80px;  padding:0 20px; }
	.index-about h2
	{ margin:0 0 25px;  font-size:2.6rem; }
	.index-about h2 .num
	{ padding:0 32px 0 0;  font-size:1.1rem; }
	.index-about h2 .num::after
	{ right:15px; }
	.index-about .index-about-lead
	{ margin:0 0 20px;  font-size:2.8rem; }
	.index-about .index-about-link
	{ margin:0 0 40px;  font-size:1.8rem; }
	.index-about .index-about-pic
	{ flex-wrap:wrap;  margin:0; }
	.index-about .index-about-pic li
	{ width:70%; }
	.index-about .index-about-pic li:nth-child(1)
	{ margin:0 0 20px; }
	.index-about .index-about-pic li:nth-child(2)
	{ margin:0 0 20px 30%; }
	.index-about .index-about-pic li:nth-child(3)
	{ margin:0 0 20px; }
	.index-about .index-about-pic li:nth-child(4)
	{ margin:0 0 0 30%; }
	.index-about .index-about-pic li span
	{ padding:8px 15px;  font-size:1.6rem; }
	.index-about .index-about-pic li:nth-child(1) span, .index-about .index-about-pic li:nth-child(2) span, .index-about .index-about-pic li:nth-child(3) span, .index-about .index-about-pic li:nth-child(4) span
	{ top:auto;  bottom:-1.5rem;  right:0; }
	.index-works
	{ margin:0 auto 80px;  padding:0 0 0 20px; }
	.index-works h2
	{ margin:0 0 25px;  font-size:2.6rem; }
	.index-works h2 .num
	{ padding:0 32px 0 0;  font-size:1.1rem; }
	.index-works h2 .num::after
	{ right:15px; }
	.index-works .index-works-category
	{ margin:0 0 28px; }
	.index-works .index-works-category li
	{ width:100%; }
	.index-works .index-works-category li:nth-child(odd)
	{ margin:0 0 2px; }
	.index-works .index-works-category li:nth-child(even)
	{ margin:0 0 2px; }
	.index-works .index-works-category h3
	{ bottom:15px;  left:15px;  font-size:4rem; }
	.index-works .index-works-category .index-works-jp
	{ font-size:1.6rem; }
	.index-works .index-works-category p
	{ bottom:15px;  right:15px;  font-size:1rem; }
	.index-works .index-works-link
	{ font-size:1.8rem; }
	.index-news
	{ margin:0 auto 80px;  padding:0 20px; }
	.index-news h2
	{ margin:0 0 25px;  font-size:2.6rem; }
	.index-news h2 .num
	{ padding:0 32px 0 0;  font-size:1.1rem; }
	.index-news h2 .num::after
	{ right:15px; }
	.index-news ul li + li
	{ margin:30px 0 0; }
	.index-news .index-news-date
	{ font-size:1.2rem; }
	.index-news h3
	{ font-size:1.6rem; }
	.index-news .index-news-txt
	{ font-size:1.3rem; }
	.index-news .index-news-twitter
	{ margin:50px auto 0; }
}


/*-----------------------------------------------
  ABOUT
  -----------------------------------------------*/
.about-introduction
{ margin:0 0 150px;  padding:120px 0 0; }
.about-introduction h2
{ position:relative;  margin:0 0 60px 30px;  padding:0 0 25px;  font-family:Arimo, sans-serif;  font-size:4.2rem;  font-weight:700; }
.about-introduction h2::after
{ content:"";  position:absolute;  bottom:0;  left:0;  display:block;  width:20px;  height:3px;  background-color:#c01920; }
.about-introduction .introduction-visual
{ position:relative;  padding:50px 6%;  height:540px;  background-color:#000;  overflow:hidden; }
.about-introduction .introduction-visual img
{ width:auto;  height:100%;  opacity:0; }
.about-introduction .introduction-visual.on img
{ animation:about-appimg .8s ease-in-out .4s;  animation-fill-mode:forwards; }
@keyframes about-appimg {
	0%
	{ transform: scale(1.05);  opacity:0; }
	100%
	{ transform: scale(1);  opacity:1; }
}
.about-introduction .introduction-visual p
{ position:absolute;  top:50%;  left:52%;  padding:0 15px 0 0;  font-size:3rem;  line-height:1.7;  font-weight:500;  color:#fff;  -webkit-transform:translateY(-50%);  transform:translateY(-50%);  opacity:0; }
.about-introduction .introduction-visual.on p
{ animation:about-text .8s ease-in-out .6s;  animation-fill-mode:forwards; }
@keyframes about-text {
	0%
	{ -webkit-transform:translateX(4%) translateY(-50%);  transform:translateX(4%) translateY(-50%);  opacity:0; }
	100%
	{ -webkit-transform:translateX(0) translateY(-50%);  transform:translateX(0) translateY(-50%);  opacity:1; }
}
.about-service
{ margin:0 0 150px;  padding:0 30px; }
.about-service h3
{ margin:0 0 50px;  font-family:Arimo, sans-serif;  font-size:3.2rem;  font-weight:700;  text-align:center; }
.about-service .about-service-pic
{ display:flex;  flex-wrap:wrap;  align-items:flex-start;  width:100%; }
.about-service .about-service-pic li
{ position:relative;  width:calc(50% - 10px);  list-style:none;  vertical-align:top; }
.about-service .about-service-pic li:nth-child(odd)
{ margin:0 10px 50px 0; }
.about-service .about-service-pic li:nth-child(even)
{ margin:50px 0 50px 10px; }
.about-service .about-service-pic li img
{ width:100%;  height:auto; }
.about-service .about-service-pic li span
{ position:absolute;  right:0;  bottom:-45px;  padding:10px 20px;  width:380px;  background-color:#fff; }
.about-service .about-service-pic li h4
{ margin:0 0 5px;  font-size:2.1rem;  font-weight:500;  line-height:1.7; }
.about-service .about-service-pic li p
{ font-size:1.5rem;  line-height:1.7; }
.about-profile
{ margin:0 0 150px;  padding:0 30px; }
.about-profile h3
{ margin:0 0 50px;  font-family:Arimo, sans-serif;  font-size:3.2rem;  font-weight:700;  text-align:center; }
.about-profile table
{ margin:0 auto;  width:900px;  border-collapse:collapse;  border-spacing:0;  border-top:solid 1px #000; }
.about-profile table th
{ padding:25px 10px;  width:240px;  font-size:1.6rem;  line-height:1.7;  font-weight:500;  text-align:left;  vertical-align:top;  border-bottom:solid 1px #000; }
.about-profile table td
{ padding:25px 10px;  font-size:1.6rem;  line-height:1.7;  border-bottom:solid 1px #000; }

@media only screen and (max-width: 1023px) {
	.about-introduction
	{ margin:0 0 80px;  padding:120px 0 0; }
	.about-introduction h2
	{ margin:0 0 30px 20px;  padding:0 0 15px;  font-size:3.4rem; }
	.about-introduction h2::after
	{ width:16px; }
	.about-introduction .introduction-visual
	{ position:relative;  padding:30px 20px 35px;  width:100%;  height:auto;  text-align:center; }
	.about-introduction .introduction-visual img
	{ width:70%;  height:auto; }
	.about-introduction .introduction-visual p
	{ position:static;  margin:30px 0 0;  padding:0;  font-size:2.4rem;  text-align:left;  -webkit-transform:inherit;  transform:inherit; }
	@keyframes about-text {
		0%
		{ -webkit-transform:translateY(3%);  transform:translateY(3%);  opacity:0; }
		100%
		{ -webkit-transform:translateY(0);  transform:translateY(0);  opacity:1; }
	}
	.about-service
	{ margin:0 0 80px;  padding:0; }
	.about-service h3
	{ margin:0 0 30px;  font-size:2.6rem; }
	.about-service .about-service-pic li
	{ position:relative;  width:calc(100% - 20px); }
	.about-service .about-service-pic li:nth-child(odd)
	{ margin:0 20px 50px 0; }
	.about-service .about-service-pic li:nth-child(even)
	{ margin:0 0 50px 20px; }
	.about-service .about-service-pic li span
	{ position:absolute;  right:0;  bottom:-35px;  padding:10px 0;  width:85%;  background-color:#fff; }
	.about-service .about-service-pic li:nth-child(odd) span
	{ padding-left:15px; }
	.about-service .about-service-pic li:nth-child(even) span
	{ left:0;  right:auto;  padding-right:15px; }
	.about-service .about-service-pic li h4
	{ margin:0 0 2px;  font-size:1.8rem; }
	.about-service .about-service-pic li p
	{ font-size:1.4rem; }
	.about-profile
	{ margin:0 0 80px;  padding:0 20px; }
	.about-profile h3
	{ margin:0 0 30px;  font-size:2.6rem; }
	.about-profile table
	{ width:100%;  max-width:900px; }
	.about-profile table th
	{ padding:15px 5px;  width:33%;  font-size:1.4rem; }
	.about-profile table td
	{ padding:15px 5px;  font-size:1.4rem; }
}


/*-----------------------------------------------
  WORKS
  -----------------------------------------------*/
.works-introduction
{ margin:0 0 150px;  padding:120px 30px 0; }
.works-introduction h2
{ position:relative;  margin:0 0 60px;  padding:0 0 25px;  font-family:Arimo, sans-serif;  font-size:4.2rem;  font-weight:700; }
.works-introduction h2::after
{ content:"";  position:absolute;  bottom:0;  left:0;  display:block;  width:20px;  height:3px;  background-color:#c01920; }
.works-introduction p
{ font-size:2.4rem;  line-height:1.7;  font-weight:500; }
.works-category
{ margin:0 0 120px;  padding:0 0 0 30px; }
.works-category:last-of-type
{ margin:0 0 150px; }
.works-category h3
{ margin:0 0 50px;  font-family:Arimo, sans-serif;  font-size:3.2rem;  font-weight:700; }
.works-category h3 .jp
{ font-family:'Noto Sans JP','游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;  font-size:1.6rem;  font-weight:500; }
.works-category h4
{ margin:0 0 20px;  font-size:1.5rem;  font-weight:500; }
.works-category ul + h4
{ margin-top:30px; }
.works-category .works-category-picup
{ display:flex;  flex-wrap:wrap;  align-items:flex-start;  width:100%; }
.works-category .works-category-picup li
{ width:calc(33.33% - 2px);  list-style:none; }
.works-category .works-category-picup li:nth-child(2n+1)
{ margin:0 2px 30px 0; }
.works-category .works-category-picup li:nth-child(2n)
{ margin:0 1px 30px; }
.works-category .works-category-picup li:nth-child(3n)
{ margin:0 0 30px 2px; }
.works-category .works-category-picup a
{ display:block;  text-decoration:none; }
.works-category .works-category-picup a:hover
{ color:#000; }
.works-category .works-category-picup a .picup-pic
{ position:relative;  display:block;  overflow:hidden; }
.works-category .works-category-picup a .picup-pic .icon
{ position:absolute;  bottom:10px;  right:10px;  display:block;  width:33px;  height:33px;  background-color:rgba(118, 118, 118, 0.4); }
.works-category .works-category-picup a .picup-pic .icon::before
{ content:"";  position:absolute;  top:15px;  left:9px;  display:block;  width:15px;  height:3px;  background-color:#fff; }
.works-category .works-category-picup a .picup-pic .icon::after
{ content:"";  position:absolute;  top:9px;  left:15px;  display:block;  width:3px;  height:15px;  background-color:#fff; }
.works-category .works-category-picup a .picup-name
{ display:block;  padding:10px;  font-size:1.5rem;  line-height:1.7; }
.works-category .works-category-picup a img
{ width:100%;  height:auto;  vertical-align:bottom;  -webkit-transition:transform .5s ease-in-out;  transition:transform .5s ease-in-out; }
.works-category .works-category-picup a:hover img
{ transform:scale(1.05, 1.05); }
.works-category .works-category-name
{ display:flex;  flex-wrap:wrap;  margin:0 30px 0 0;  width:calc(100% - 30px); }
.works-category .works-category-name li
{ margin:-1px 0 0;  padding:20px;  width:25%;  font-size:1.4rem;  line-height:1.7;  list-style:none;  border-top:solid 1px #e7e7e7;  border-bottom:solid 1px #e7e7e7; }


@media only screen and (max-width: 1023px) {
	.works-introduction
	{ margin:0 0 10px;  padding:120px 20px 0; }
	.works-introduction h2
	{ margin:0 0 30px;  padding:0 0 15px;  font-size:3.4rem; }
	.works-introduction h2::after
	{ width:16px; }
	.works-introduction p
	{ font-size:2rem; }
	.works-category
	{ margin:0;  padding:70px 0 0 20px; }
	.works-category:last-of-type
	{ margin:0 0 80px; }
	.works-category h3
	{ margin:0 0 30px;  font-size:2.6rem; }
	.works-category h3 .jp
	{ font-size:1.2rem; }
	.works-category h4
	{ margin:0 0 15px;  font-size:1.2rem; }
	.works-category ul + h4
	{ margin-top:20px; }
	.works-category .works-category-picup
	{ margin:0 0 10px; }
	.works-category .works-category-picup li
	{ width:100%;}
	.works-category .works-category-picup li:nth-child(2n+1)
	{ margin:0 0 5px; }
	.works-category .works-category-picup li:nth-child(2n)
	{ margin:0 0 5px; }
	.works-category .works-category-picup li:nth-child(3n)
	{ margin:0 0 5px; }
	.works-category .works-category-picup a .picup-name
	{ padding:8px 10px;  font-size:1.4rem; }
	.works-category .works-category-name
	{ margin:0 20px 0 0;  width:calc(100% - 20px); }
	.works-category .works-category-name li
	{ padding:15px 10px;  width:50%;  font-size:1.2rem; }
}


/*-----------------------------------------------
  CONTACT
  -----------------------------------------------*/
.contact-form
{ margin:0 0 150px;  padding:120px 30px 0; }
.contact-form h2
{ position:relative;  margin:0 0 60px;  padding:0 0 25px;  font-family:Arimo, sans-serif;  font-size:4.2rem;  font-weight:700; }
.contact-form h2::after
{ content:"";  position:absolute;  bottom:0;  left:0;  display:block;  width:20px;  height:3px;  background-color:#c01920; }
.contact-form .contact-txt
{ font-size:2.4rem;  line-height:1.7;  font-weight:500; }
.contact-form .small
{ font-size:1.2rem; }
.contact-form dl
{ margin:100px auto 0;  width:700px; }
.contact-form dl dt
{ margin:0 0 15px;  font-size:1.6rem;  font-weight:500; }
.contact-form dl dd
{ margin:0 0 40px; }
.contact-form .form-submit
{ margin:80px auto 0;  width:700px; }
.contact-form .form1
{ padding:12px 15px;  width:100%;  background-color:#eee;  font-size:2.2rem;  line-height:1.7; }
.contact-form .form1:focus
{ outline:solid 1px #000; }
.contact-form .form2
{ width:0 auto;  padding:12px 15px;  width:100%;  background-color:#000;  font-size:2.2rem;  line-height:1.7;  color:#fff;  -webkit-transition:background .2s;  transition:background .2s; }
.contact-form .form2:hover
{ background-color:#333; }
.contact-form .wpcf7-not-valid
{ background-color:#fbdcde; }
.contact-form .wpcf7-not-valid-tip
{ display:block;  margin:10px 0 0;  font-size:1.4rem;  color:#c01920; }
.contact-form .screen-reader-response
{ display:none; }
.contact-form .wpcf7-response-output
{ margin:20px auto 0;  width:700px;  font-size:1.6rem;  color:#c01920;  font-weight:500;  text-align:center; }

@media only screen and (max-width: 1023px) {
	.contact-form
	{ margin:0 0 80px;  padding:120px 20px 0; }
	.contact-form h2
	{ margin:0 0 30px;  padding:0 0 15px;  font-size:3.4rem; }
	.contact-form h2::after
	{ width:16px; }
	.contact-form .contact-txt
	{ font-size:2rem; }
	.contact-form .small
	{ font-size:1rem; }
	.contact-form dl
	{ margin:40px auto 0;  width:100%;  max-width:700px; }
	.contact-form dl dt
	{ margin:0 0 10px;  font-size:1.4rem; }
	.contact-form dl dd
	{ margin:0 0 30px; }
	.contact-form .form-submit
	{ margin:40px auto 0;  width:100%;  max-width:700px; }
	.contact-form .form1
	{ padding:8px 10px;  font-size:1.8rem; }
	.contact-form .form2
	{ padding:10px;  font-size:1.8rem; }
	.contact-form .wpcf7-not-valid-tip
	{ margin:8px 0 0;  font-size:1.2rem; }
	.contact-form .wpcf7-response-output
	{ margin:10px auto 0;  width:100%;  max-width:700px;  font-size:1.3rem;  line-height:1.4; }
}