/*pc + sp*/
.pc   {display:block}
.sp   {display:none}
@media only screen and (max-width:767px) {
.pc   {display:none}
.sp   {display:block}
}

/*htnl*/

html {
  background-color: #313a3d;
  background-attachment: fixed,           fixed;
  background-image: url("images/overlay.png"), url("../img/bg_1k.jpg");
  background-position: top left,          center center;
  background-repeat: repeat,            none;
  background-size: auto,            cover;
}

html.about {
  background-image: url("images/overlay.png"), url("../img/about_1k.jpg");
}

html.service {
  background-image: url("images/overlay.png"), url("../img/service_1k.jpg");
}

html.wordpress {
  background-image: url("images/overlay.png"), url("../img/wordpress_1k.jpg");
}

html.post-type-archive-news ,
html.single-news {
  background-image: url("images/overlay.png"), url("../img/news_1k.jpg");
}

@media only screen and (max-width:767px) {
  html {
    background-color: #313a3d;
    background-attachment: fixed,           fixed;
    background-image: url("images/overlay.png"), url("../img/bg_sp.jpg")!important;
    background-position: top left,          center center;
    background-repeat: repeat,            none;
    background-size: auto,            cover;
  }

  html.about {
    background-image: url("images/overlay.png"), url("../img/about_sp.jpg")!important;
  }

  html.service {
    background-image: url("images/overlay.png"), url("../img/service_sp.jpg")!important;
  }

  html.wordpress {
    background-image: url("images/overlay.png"), url("../img/wordpress_sp.jpg")!important;
  }
  
  html.post-type-archive-news ,
  html.single-news  {
    background-image: url("images/overlay.png"), url("../img/news_sp.jpg")!important;
  }
}


/*common*/
body, input, select, textarea {
	font-family: "Josefin Sans", sans-serif;
}

/*a*/
a  {
	color: rgba(129, 136, 214, 1.0);;
}

a:hover {
	color:rgba(129, 136, 214, 1.0)!important;
}


.displaynone ,
.displaynone img {
	display: none;
}

/*text*/
#footer p.left ,
.main.special p.left ,
.main.special div.left {
	text-align: justify;
}

.large {
	font-size: 110%;
}

.small ,
small {
	font-size: 90%;
}


/*box*/
.box.color2 {
	border: none;
	background-color: rgba(144, 144, 144, 0.075);
	padding: 1.25em;
	box-sizing: border-box;
}


/*header*/
#header .major  {
	padding-top: 5em;
}

#header .major h1 {
	font-size: 11vw;
	line-height: 1;/*
		mix-blend-mode: multiply;*/
	letter-spacing: -0.015em;
	text-shadow: 0 0 20px rgba(120, 120, 120, 0.60);
	color: rgba(255, 255, 255, 1);
}

@media only screen and (max-width:767px) {
	#header .major  {
		padding-top: 2.5em;
		box-sizing: border-box;
	}

	#header .major h1 {
		letter-spacing: 0;
		font-size: 11vw;/**/
	}
}


/*major*/
.major	{
	margin-bottom: 1em;
}

.major h2  {
	font-size: 3vw;
	padding: 0;
	margin: 0;
	line-height: 1.56789;
}

.major h2:after ,
.major h2:before  {
	display: none!important
}

.single-news .major h2  {
	font-size: 2vw;
	text-align: left!important;
}


@media only screen and (max-width:767px) {
	.major h2  {
		font-size: 7vw;
	}

}

/*h3*/
.content section h3 {
	font-size: 1.23456789vw;
	line-height: 1.56789;
	letter-spacing: 0;
}

.content section h3.left {
	text-align: left;
}

.content section h3.center {
	text-align: center;
}

@media only screen and (max-width:767px) {
	.content section h3 {
    font-size: 4.5vw;
		line-height: 1.56789;
	}

}

/*list*/
ul.left ,
ul.left li  {
	text-align: left;
}


/*figure*/
figure {
	margin-bottom: 1em;
}

figure img {
	max-width: 100%;
}

figure.circle img {
	border-radius: 100%;
}




.icon.solid.major img {
	opacity: 0.65;
}



/*btn*/
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: rgba(129, 136, 214, 1.0);
	border: 0;
	box-shadow: none;
	color: #ffffff !important;
}

	input[type="submit"].primary:hover,
	input[type="reset"].primary:hover,
	input[type="button"].primary:hover,
	button.primary:hover,
	.button.primary:hover {
		background-color: rgba(129, 136, 214, 0.750);
	}

	input[type="submit"].primary:active,
	input[type="reset"].primary:active,
	input[type="button"].primary:active,
	button.primary:active,
	.button.primary:active {
		background-color: rgba(129, 136, 214, 1.0);
	}

	input[type="submit"].primary.icon:before,
	input[type="reset"].primary.icon:before,
	input[type="button"].primary.icon:before,
	button.primary.icon:before,
	.button.primary.icon:before {
	color: #fff;
	}

/*service
.service .content img {
  filter: grayscale(100%);
}

*/
/*single*/
.single-news img {
	max-width: 100%;
	height: auto; /* microCMSの本文画像は width/height 付きで出力されるため、縦横比を保つ */
}


/*footer-sitemap*/
.footer-sitemap li.left {
	text-align: left;
}

.footer-sitemap li.left a  {/*
	color: rgba(129, 136, 214, 1.0);;
	*/
	font-size: 0.8rem;
}


/*loading */
.loader-bg {
  width: 100vw;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 123456789;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  font-size: 10px;
  margin: auto;
  text-indent: -9999em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before {
  width: 50%;
  height: 50%;
  background: #fff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}



/*gnav*/
  #navArea  {
    display:block;
  }

  nav.gnav  {
    display:block;
    position:fixed;
    top:0;
    right:-55%;
    bottom:0;
    width:55%;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:all .5s;
    opacity:0;
    background-color: #252c2e;
    z-index: 1234567890123456789;
  }

  .open nav.gnav  {
    right:0;
    opacity:1
  }

  nav.gnav .inner {
    padding: 18px
  }

  nav.gnav .inner ul  {
    list-style:none;
    padding:9px ;
  }

  nav.gnav .inner ul li {
    position:relative;
    margin:0;
    text-align:left
  }

  nav.gnav .inner ul li a     {
    display:block;
    color:rgba(255,255,255,1)!important;
    box-sizing:border-box;
    font-size:calc(16px / 1.17);
    font-weight: 500;
    padding:20.25px 9px;
    text-decoration:none;
    transition-duration:0.2s;
    border-bottom:0.75px solid rgba(255,255,255,0.25);
  }

    nav.gnav .inner ul li a:hover,
    nav.gnav .inner ul li a:focus {
      color:rgba(255,255,255,0.75)!important;
    }

  /*toggle__btn*/
  .toggle__btn {
    display:block;
    position:fixed;
    top:18px;
    right:18px;
    width:30px;
    height:30px;
    transition:all .5s;
    cursor:pointer;
    z-index: 123456789012345678901
  }

  .toggle__btn span {
    display:block;
    position:absolute;
    right:0;
    width:40px;
    height:2px;
    background-color:#fff;
    border-radius:0;
    transition:all .5s;
  }

    .toggle__btn.active span {
      background-color:#fff;
    }

  .toggle__btn span:nth-child(1) {
    top:4px
  }

  .toggle__btn span:nth-child(2) {
    top:12px;
    width:30px;
  }

  .open .toggle__btn span {
    background-color:#fff
  }

  .open .toggle__btn span:nth-child(1) {
    -webkit-transform:translateY(8px) rotate(-315deg);
    transform:translateY(8px) rotate(-315deg)
  }

  .open .toggle__btn span:nth-child(2) {
    -webkit-transform:translateY(-8px) rotate(315deg);
    transform:translateY(0px) rotate(315deg);
    width:40px;
  }

  .toggle__btn__label {
    display: block;
    font-size:10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin:20.5px auto auto;
    margin-left: -7.25px;
    width:40px;
  }

  .open .toggle__btn__label {
    display: none;
  }

  .gnav .parent__menu__sp .child__menu__sp  {
    margin-top: -4.5px!important;
  }

  .gnav .parent__menu__sp a.label {
    pointer-events: none;
    color: rgba(255,255,255,0.55)!important;
    font-size: 12px!important;
    margin-bottom: 0!important;
    padding-top: 36px!important;
    padding-bottom: 0!important;
    border-bottom: none!important;
  }

  .gnav .child__menu__sp {
    padding-left: 0!important;
  }

  /*topbar__contact__list*/
  .topbar__contact__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
  }

  .topbar__contact__list li {
    flex-basis: 100%;
    margin: 4.5px auto!important;
  }

  .topbar__contact__list li.line a.btn {
    background-color: #fff;
    border: 1px solid #fff;
    color: #fff!important;
  }

    .topbar__contact__list li.line a.btn:hover,
    .topbar__contact__list li.line a.btn:focus  {
      color: #fff!important;
    }

@media only screen and (max-width:767px) {
  nav.gnav  {
    right:-100%;
    width:100%;
  }

  .toggle__btn span {
    background-color:#252c2e;
  }

  .toggle__btn.active span {
    background-color:#252c2e;
  }

}