@charset "utf-8";
/* CSS Document */
body {
	background-color: #000;
}
.text-s {
	font-size: 0.9rem;
	font-weight: lighter;
}
/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}
.wh::before{
	background-color: #fff;/*伸びる背景色の設定*/
}
.bl::before{
	background-color: #2548aa;/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/*STRIPE*/
.stripe {
	background-color: #ffffff;
	background-image: url("../images/top/service_back.png");
	background-repeat: repeat-y;
	background-position: center;
	
}


/*動く文字*/
.bbs{

  align-items: center;
  color: #f5f5f5;
  display: flex;
  overflow:hidden;
  width: 100%;
  white-space:nowrap;
  z-index: -1;
}
.bbs ul {
  animation: flowing 20s linear infinite;
  	font-family: "Oswald", sans-serif;
	font-size: 12rem;
  	font-weight:400;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}
.bbs ul li{
  display: inline-block;
  padding-right: 10px;
}
@keyframes flowing {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}

/*TOPWORKS*/
.scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
	margin: 5% 0;
}

.scroll-content {
    display: flex;
    animation: scroll 20s linear infinite;
}

.item {
    flex: 0 0 auto;
    width: 355px;/*お好みの幅に調整*/
    height: 300px;/*お好みの高さに調整*/
    background-color: lightblue;
    margin: 0 10px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 300px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}





@media screen and (max-width: 768px) {
/*動く文字*/
.bbs{

  align-items: center;
  color: #f5f5f5;
  display: flex;
  overflow:hidden;
  width: 100%;
  white-space:nowrap;
  z-index: -1;
}
.bbs ul {
  animation: flowing 20s linear infinite;
  	font-family: "Oswald", sans-serif;
	font-size: 6rem;
  	font-weight:400;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}
.bbs ul li{
  display: inline-block;
  padding-right: 10px;
}

/*WORKS*/
.item {
    flex: 0 0 auto;
    width: 270px;/*お好みの幅に調整*/
    height: 228px;/*お好みの高さに調整*/
    background-color: lightblue;
    margin: 0 10px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 228px;
}

}


/*下層*/
.copy-kasou {
	font-size: 2rem;
}
.tit-blue-kasou, .tit-white-kasou {
	position: relative;
	display: inline-block;
	margin: 1em 0 6% 0;
}
.tit-blue-kasou:before {
  content: '';
  position: absolute;
  top: -10px;
  display: inline-block;
  width: 50px;
  height: 3px;
  left: 20%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #2548aa;
}
.tit-white-kasou:before {
  content: '';
  position: absolute;
  top: -10px;
  display: inline-block;
  width: 50px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #2548aa;
}
.tit-blue-kasou h2, .tit-white-kasou h2 {
	font-family: "Oswald", sans-serif;
	font-size: 2.5rem;
  	font-weight:400;
	margin: 0;
	padding: 0;
}

/*ABOUT*/
.about-message {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 0 7% 0;
	display: flex;
}
.about-message .text {
	width: 50%;
}
.about-message .image {
	width: 45%;
	margin: 0 0 0 5%;
}
.about-message .image img {
	object-fit: cover;
	height: 100%;
}
.outline {
	text-align: center;
	color: #ffffff;
	background-color: #000;
	background-image: url("../images/about/about-shopinfo-img.png");
	background-size: auto 100%;
    background-repeat: no-repeat;
	background-position: right 0% top 0%;
	padding: 5% 0 7% 0;
}
.outline a {
	color: #ffffff;
}
.outline-box {
	width: 90%;
	max-width: 1020px;
	margin: 0 auto;
}
.outline-box dl {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	vertical-align: top;
}
.outline-box dl dt {
	font-weight: 700;
	width: 19%;
	margin: 0 1% 0 0;
	padding: 3% 0;
	border-bottom: 1px solid #ffffff;
}
.outline-box dl dd {
	width: 80%;
	margin: 0;
	padding: 3% 0;
	border-bottom: 1px solid #8c8c8c;
}
.access {
	text-align: center;
	width: 90%;
	max-width: 1020px;
	padding: 5% 0 10% 0;
	margin: 0 auto;
}
.g-map {
	margin: 5% 0 0 0;
	padding: 0;
}

/*SERVICE*/
.service-copy {
	text-align: center;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.service-main-image {
	position: relative;
	z-index: 2;
	width: 90%;
	height: 450px;
	max-width: 1400px;
	margin: 5% auto 0 auto;
}
.service-main-image img {
	object-fit: cover;
	height: 100%;
}
.service-imagetext {
	font-family: "Oswald", sans-serif;
	font-size: 13vw;
  	font-weight:400;
	text-align: center;
	color: #ffffff;
	background-color: #f5f5f5;
	padding: 240px 0 3% 0;
	margin: -220px 0 0 0;
	line-height: 100%;
}
.service-list {
	background-color: #f5f5f5;
	padding: 1% 0 5% 0;
}
.service-box {
	display: flex;
	justify-content: space-between;
	width: 84%;
	max-width: 1400px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.11);
	padding: 3%;
	margin: 0 auto 5% auto;
}
.service-text {
	width: 50%;
	padding: 0;
	margin: 0;
}
.service-img {
	width: 45%;
}
.service-img img {
	object-fit: cover;
	height: 100%;
	border-radius: 10px;
}
.tit-tag {
	color: #ffffff;
  position: relative;
  padding: 1em 1em 1em 2em;
	margin: 0;
  border-radius: 10px;
  background-image: linear-gradient(90deg, rgba(20, 25, 125, 1), rgba(37, 72, 170, 1));
}
.tit-tag::before {
  position: absolute;
  content: '●';
  left: 0.5em;
  color: #aa9664;
}
.tit-tag .en {
	font-family: "Oswald", sans-serif;
	font-size: 0.8rem;
  	font-weight:400;
}
.service-flow {
	text-align: center;
	padding: 7% 0 10% 0;
}
.flow-box {
	width: 90%;
	max-width: 1020px;
	margin: 0 auto;
	display: flex;
	padding: 0;
}
.flow-icon {
	width: 30%;
	max-width: 230px;
	margin: 0 3% 0 0;
}
.flow-text {
	width: 70%;
	text-align: left;
	margin: 0;
	padding: 0;
}
.flow-text .flow-p {
	margin: 3% 0;
}
.flow-tit {
	font-size: 1.2rem;
	border-bottom: 1px solid #e0e0e0;
	margin: 0;
	padding: 0 0 2% 0;
}
.flow-tit .no {
	color: #2548aa;
	font-family: "Oswald", sans-serif;
	font-size: 1.2rem;
  	font-weight:400;
	margin: 0 10px 0 0 ;
}
.flow-arrow {
	width: 50%;
	max-width: 365px;
	margin: 3% auto;
}

/*WORKS*/
.works {
	width: 90%;
	max-width: 1400px;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	margin: 0 auto;
	padding: 0 0 10% 0;
}
.work-list {
	width: 48%;
	margin: 0;
	padding: 0 0 5% 0;
}
.work-list img {
	margin: 3% 0;
}
.work-list ul li, .privacy-box  ul li {
	position: relative;
	padding: 0 0 0 2em;
}
.work-list ul li::before, .privacy-box  ul li::before {
  position: absolute;
  content: '●';
  left: 0.5em;
  color: #2548aa;
}


/*PRICE*/
.price-main-image {
	position: relative;
	z-index: 2;
	width: 90%;
	max-width: 1400px;
	margin: 5% auto 0 auto;
}
.price-imagetext {
	background-color: #f5f5f5;
	padding: 240px 0 3% 0;
	margin: -220px 0 0 0;
	line-height: 100%;
}
.price-imagetext p {
	font-size: 0.9rem;
	width: 90%;
	max-width: 1400px;
	margin: 0 auto 3% auto;
	line-height: 160%;
}
.price-area {
	padding: 0 0 5% 0;
	background-color: #f5f5f5;
}
.price-box {
	width: 84%;
	max-width: 1400px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.11);
	padding: 3%;
	margin: 0 auto 5% auto;
}
.price-box .text-s {
	margin: 30px 0 0 0;
	padding: 0;
}
.price-box .text-s li {
	margin: 20px 0 0 0;
}
.tb01{
  	border-collapse: collapse;
  	width: 100%;
	margin: 0;
}
.top5 {
	margin: 5% 0 0 0;
}
.top2 {
	margin: 2% 0 0 0;
}
.tb01 .left {
	width: 20%;
}
.tb01 th, .tb01 td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.tb01 .price-bk {
  background: #333333;
  color: #fff;
}
.price-service {
	background-color: #ebebeb;
}
.text-blue {
	color: #2548aa;
	margin: 4% 0 2% 0;
	padding: 0;
}
.indent {
	font-size: 0.9rem;
	font-weight: lighter;
	text-indent: -1em;
  	padding-left: 1em;
	margin: 2% 0;
}



.contact-p {
	text-align: center;
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}


/*PRIVACY*/
.privacy {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 0 10% 0;
}
.privacy-box {
	margin: 7% 0 0 0;
}
.privacy-box a {
	color: #000000;
}
.privacy-tit {
	font-size: 1.2rem;
	border-bottom: 1px solid #e0e0e0;
	padding: 0 0 2% 0;
	margin: 0 0 3% 0;
}
.privacy-box ul {
	margin: 3% 0 0 0;
}
.privacy-box ul li {
	margin: 1% 0;
}

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

/*下層*/
.tit-blue-kasou, .tit-white-kasou {
	position: relative;
	display: inline-block;
	margin: 1em auto 3% auto;
}
.tit-blue-kasou:before {
  left: 50%;
}
.tit-white-kasou:before {
  left: 50%;
}
.tit-blue-kasou h2, .tit-white-kasou h2 {
	font-family: "Oswald", sans-serif;
	font-size: 2.5rem;
  	font-weight:400;
	margin: 0;
	padding: 0;
}
/*ABOUT*/
.about-message {
	text-align: center;
	display: block;
	padding: 0 0 5% 0;
}
.about-message .text {
	width: 100%;
	margin: 0 0 5% 0;
}
.about-message-text{
	text-align: left;
}
.about-message .image {
	width: 100%;
	margin: 0 ;
}

/*SERVICE*/
.flow-box {
	padding: 3% 0;
}

/*WORKS*/
.works {
	display: block;
}
.work-list {
	width: 100%;
	margin: 0;
	padding: 0 0 5% 0;
}

/*PRICE*/
.tb01 .head{
    display:none;
  }
  .tb01 {
    width: 100%;
  }
.tb01 .left {
	width: 100%;
}
  .tb01 td,
  .tb01 th{
    display: block;
    width: 100%;
    border-top:none;
  box-sizing:border-box;

  }
  .tb01 td{
    padding: 0px 12px 0 0;
    display: block;
    width: 100%;
    line-height: 2.5;
    text-align:left;
  }
  .tb01 td:before{
	  width: 30%;
    content: attr(data-label);
    font-weight: bold;
    padding: 0px 10px;
    display: inline;
    background-color: #ebebeb;
    margin-right: 10px;
    float: left;
  }
.price-service {
	color: #ffffff;
	background-color: #333333;
}
	
}


@media screen and (max-width: 1020px) {
	
/*下層*/
.copy-kasou {
	font-size: 1.4rem;
}

/*SERVICE*/
.service-main-image {
	height: 250px;
}
.service-imagetext {
	padding: 135px 0 3% 0;
	margin: -125px 0 0 0;
}
.service-imagetext {
	font-family: "Oswald", sans-serif;
	font-size: 15vw;
}

.service-box {
	display: block;
	padding: 6% 3%;
}
.service-text {
	width: 90%;
	padding: 0;
	margin: 0 auto 5% auto;
}
.service-img {
	width: 90%;
	margin: 0 auto;
}
	

/*PRICE*/
.price-imagetext p {
	font-size: 0.8rem;
}

	
}