html { 
	scroll-behavior: smooth;
}

::selection {
	background: #b4d5fe;
	color: #000000;
}

a, a:hover {
	color: #d85c35;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	font-family: vdl-v7marugothic,sans-serif;
	font-weight: 700;
	font-style: normal;
}

header img {
	height: 60px;
	width: auto;
}

.main-container { background-color: #ffffff; }

@media (max-width: 991px) {
	.main-container {
		margin-left: auto;
		margin-right: auto;
		max-width: 500px;
		box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.9); 
	}
}

.shiny-btn1 {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    background-color: #d85c35;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(176, 74, 42, 1);/*影の色(rgbaの値を変更)*/
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
.shiny-btn1:hover {
    text-decoration: none;
    color: #fff;
}
.shiny-btn1::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}

.shiny-btn1 img {
	max-height: 25px;
	widht: auto;
}

header .shiny-btn1 {
	max-width: 300px;
}

header .orange-tab {
	height: 100%;
	background-color: #e95b37;
}

@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.hero {
	position: relative;
}

.hero-overlay {
	position: absolute;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #d85c3544;
	z-index: 999;
}

.hero-overlay img {
	max-width: 80%;
	height: auto;
}

.hero-overlay .orange-pill {
	background-color: #d85c35;
	width: 250px;
	height: 40px;
	border-radius: 20px;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-overlay .green-pill {
	background-color: #52a542;
	width: 250px;
	height: 40px;
	border-radius: 20px;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-overlay .orange-pill img, .hero-overlay .green-pill img {
	height: 20px;
	width: auto;
}

.hero-overlay .orange-pill span, .hero-overlay .green-pill span {
	flex: 1;
}

@media (max-width: 991px) {
	.hero-overlay img {
		max-width: 100%;
	}
}

.hero .container h1 {
	background-color: #d85c35;
	color: #FFFFFF;
	font-size: 2.2em;
}

@media (max-width: 767px) {
	.hero .container h1 {
		font-size: 1.8em;
	}
}

@media (max-width: 549px) {
	.hero .container h1 {
		font-size: 1.4em;
	}
}

@media (max-width: 500px) {
	.hero .container h1 {
		font-size: 1em;
	}
}

@media (min-width: 445px) {
	.hero-text-mobile img { max-width: 330px; }
}

.story {
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 51%, rgba(233,91,55,1) 51%, rgba(233,91,55,1) 100%);
}

@media (max-width: 991px) {
	.story {
		background: unset;
	}
}

@media (max-width: 525px) {
	.story h6 {
		font-size: 1em;
	}
	
	.story h5 {
		font-size: .8em;
	}
}

.story .bg-orange {
	background-color: #e95b37;
}

.stretch-to-fill {
	height: 100%;
}

.stretch-to-fill img {	
	height: 100% !important;
	width: 100% !important;
}

@media (max-width: 991px) {
	.stretch-to-fill {	
		height: 50px !important;
	}
}

.story .container img {
	height: 100%;
	max-height: 260px;
	width: auto;
}

@media (max-width: 991px) {
	.story .container img {
		width: 25%;
		height: auto;
	}
}

.story h3, .story-overlay h2 {
	color: #FFFFFF;
}

.story h6 {
	color: #00a498;
}

.story h3 { font-size: 2.1rem; }

@media (max-width: 1140px) {
	.story h3 { font-size: 2rem; }
}

@media (max-width: 1100px) {
	.story h3 { font-size: 1.9rem; }
}

@media (max-width: 1070px) {
	.story h3 { font-size: 1.8rem; }
}


@media (max-width: 1032px) {
	.story h3 { font-size: 1.6rem; }
}

@media (max-width: 992px) {
	.story h3 { font-size: 2.1rem; }
}

@media (max-width: 430px) {
	.story h3 { font-size: 1.9rem; }
}

@media (max-width: 395px) {
	.story h3 { font-size: 1.8rem; }
}

@media (max-width: 370px) {
	.story h3 { font-size: 1.7rem; }
}

@media (max-width: 350px) {
	.story h3 { font-size: 1.6rem; }
}

@media (max-width: 333px) {
	.story h3 { font-size: 1.5rem; }
}


.partner-logo {
	max-height: 50%;
	width: auto;
}

.pcs a, .pcs a:hover {
	color: #707070;
	font-size: 1.4em;
}

.works .card {
	boder: none;
	box-shadow: none;
	padding: 0 20px;
}

.works .card h4 {
	color: #d85c35;
}

.banner-half-end::after {
	background-image: linear-gradient(to right,rgba(255,255,255,0) 53%,rgba(216,92,53,.5) 53%) !important;
}

@media (max-width: 767.98px) {
	.banner-half-end::after {
		background-image: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(216,92,53,.5) 0) !important;
	}
}

.svg-icon img {
	width: 24px;
	height: auto;
}

.svg-step-icon img {
	height: 40px;
	width: auto;
}

.testimonial .card-img-holder {
	height: 80px;
}

.testimonial h6 {
	color: #e95b37;
}

.text-primary a {
	color: #d85c35 !important;
}

.slick-gallery img {
	width: 100%;
	height: auto;
}

.no-webp .blue-clouds {
	background-image: url('../img/kreativ/blue-clouds.jpg');
}

.webp .blue-clouds {
	background-image: url('../img/kreativ/blue-clouds.webp');
}

.blue-clouds {
	background-size: cover;
	background-position: center;
}

.blue-clouds img {
	width: 100%;
	height: auto;
}

.blue-clouds h3 {
	color: #FFFFFF;
}

.leave-it-to-us .heading img {
	max-height: 200px;
	width: auto;
	
}

.leave-it-to-us .heading h3 {
	color: #d85c35;
	font-size: 1.8em;
}

@media (max-width: 767px) {
	.leave-it-to-us .heading h3 {
		font-size: 1.4em;
	}
}

@media (max-width: 575px) {
	.leave-it-to-us .heading h3 {
		font-size: 1em;
	}
}

.leave-it-to-us .card-title {
	color: #d85c35;
	font-family: vdl-v7marugothic,sans-serif;
	font-weight: 700;
	font-style: normal;
}

.plans {
	font-family: vdl-v7marugothic,sans-serif;
	font-weight: 700;
	font-style: normal;
}

@media (max-width: 992px) {
	.plans {
		font-size: .8rem;
	}
}

@media (max-width: 353px) {
	.plans h3{
		font-size: 1.2rem;
	}
}

.checks {
	list-style-type: none;
	padding: 2px;
	margin: 2px;
}

.checks li {
	background: url('../svg/kreativ/check.svg') no-repeat left top;
	padding-left: 44px;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}

@media (max-width: 991px) {
	.checks li {
		padding-left: 30px;
	}
}

@media (max-width: 430px) {
	.checks li {
		background: unset;
		padding-left: unset;
	}
}

.plans .plan-man-holder {
	position: relative;
}

.plans .plan-man {
	height: auto;
}

@media (max-width: 430px) {
	.plans .plan-man {
		max-width: 100%;
	}
}

.plans .plan-man-arrow {
	position: absolute;
	width: 50%;
	height: auto;
	bottom: 0px;
	right: 0px;
	animation: arrow-float 2s infinite;
}

@keyframes arrow-float {
	0% {
		bottom: 5px;
	}
	50% {
		bottom: 20px;
	}
	100% {
		bottom: 5px;
	}
}

.plans .bg-grey {
	background-color: #c6c6c6;
}

.plans .bg-yellow {
	background-color: #ffc50b;
}

.plans .bg-orange {
	background-color: #d85c35;
}

.plans .bg-orange h3 {
	color: #FFFFFF;
}

.bg-orangish {
	background-color: #fcf3eb;
}

.plans .col {
	border-left: solid 1px #c6c6c6;
	border-bottom: solid 1px #c6c6c6;
}

.plans .mobile-plan .col {
	border-right: solid 1px #c6c6c6;
	border-bottom: solid 1px #c6c6c6;
}

.plans .row-cols-3 .col:nth-child(3) {
	border-right: solid 1px #c6c6c6;
}

.plans .mobile-plan img, .plans .desktop-plan img {
	height: 30px;
	width: auto;
}

.plans .orange {
	color: #d85c35;
}

.plans .title-row {
	background-color: #f4f4f4;
}

.footnotes h4 span {
	font-size: 1rem;
}

.black-circle {
	background-color: #000000;
	height: 24px;
	width: 24px;
	border-radius: 12px;
}

.orange-circle {
	background-color: #d85c35;
	height: 24px;
	width: 24px;
	border-radius: 12px;
}

.extra-charge img {
	height: 30px;
	width: auto;
}

ul.step {
	margin-block-end: 0;
}

.line-pill-button, .line-pill-button:hover {
	background-color: #52a542;
	color: #FFFFFF;
	height: 50px;
	border-radius: 25px;
	max-width: 220px;
}

.line-pill-button img {
	height: 25px;
	width: auto;
}

.line-pill-button h5 {
	color: #FFFFFF;
	font-size: 1em;
}

.faq img {
	max-height: 150px;
	width: auto;
}

@media (max-width: 767px) {
	.faq img {
		max-height: 120px;
		width: auto;
	}
}

.faq .accordion { background-color: #ffffff; }

.faq .accordion-button:not(.collapsed) {
    color: #d85c35;
    background-color: #fcf3eb;
	
}


.faq .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d85c35'%3E%3Cpath d='M5.5,13a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z'/%3E%3C/svg%3E");
}


.faq .accordion-collapse {
	background-color: #fcf3eb;
}

a.accordian-button::after {
	color: #000000 !important;
}



.mail-pill-button, .mail-pill-button:hover {
	background-color: #d85c35;
	color: #FFFFFF;
	height: 50px;
	border-radius: 25px;
}

.mail-pill-button img {
	height: 20px;
	width: auto;
}

.mail-pill-button h5 {
	color: #FFFFFF;
	font-size: 1em;
}

.profiles .card {
	box-shadow: none;
	background-color: unset;
	max-width: 350px;
}

.profiles .card hr {
	border: solid 1px #000000;
	opacity: 1;
	width: 100px;
}

.profiles p {
	font-size: .8em;
}

@media (max-width: 767px) {
	.contact-form .card {
		box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.9); 
	}
	
	.profiles p {
		font-size: 1em;
	}
}

.form-control-lg {
	
}

@media (max-width: 767px) {
	.form-control {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.form-control-lg {
		min-height: unset;
	}
}

.footer-contact, .footer-contact h6 {
	color: #FFFFFF;
	background-color: #d85c35;
}

.footer-contact a, .footer-contact a:hover {
	color: #FFFFFF;
}

.footer-gallery img {
	height: 60px;
	width: auto;
	padding-right: 20px;
	padding-left: 20px;
}

.sticky {
  position: fixed;
  bottom: 0;
  z-index: 9999999;
}

/* Mobile contact bar */
.btn-orange, .btn-orange:hover {
	background-color: #d85c35;
	color: #FFFFFF;
	flex: 1;
}

.btn-green, .btn-green:hover {
	background-color: #52a542;
	color: #FFFFFF;
	flex: 1;
}

.btn-green img, .btn-orange img {
	height: 30px;
	width: auto;
}

/* ***************** */

footer {
	background-color: #d85c35;
}

footer h5 {
	color: #FFFFFF;
}

/* Testimonials Block */

.testimonial { border-top: solid 2px #e95b37; border-bottom: solid 2px #e95b37; }
.testimonial .card { border: solid 2px #e95b37; }

.swiper-pagination-bullet-active::before, .swiper-pagination-bullet-active:hover::before { background-color: #e95b37 !important; }
.swiper-pagination-bullet-active, .swiper-pagination-bullet-active:hover { border-color: #e95b37 !important; }
.text-primary { color: #e95b37 !important;  }

/* FAQ Block */ 

.faq { background-color: #f9f9f9; border-bottom: solid 2px #e95b37; }
.faq .accordion { overflow: hidden; border: solid 2px #e95b37; border-radius: 10px; }
.faq .accordion .accordion-item:first-child { margin-top: -25px; }

/* Features Block */

.features { background-color: #f9f9f9; border-top: solid 2px #e95b37; }
.features .card { border: solid 2px #e95b37; }
.features .form-control { border: solid 1px #e95b37; }

/* Story Block */

.story { border-top: solid 2px #e95b37; }

/* Partners Block */

.partners { border-top: solid 2px #e95b37; }
.partners .partners-mobile img { max-width: 75%; }

/* Contact Form */ 

.contact-form .card { border: solid 2px #e95b37; }
.contact-form .form-control { border: solid 1px #e95b37; }

/* Profiles Block */

.profiles .card hr { border: solid 1px #e95b37; }

/* Steps Block */

.steps img {
	width: 100%;
	height: auto;
}

/* ***************************************
Animated background styling for iPad
**************************************** */

/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}

@media (min-width: 500px) and (max-width: 992px) { 
	
	body.main {
		
	  /* img size is 50x50 */
	  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
		
	  -webkit-animation: bg-scrolling-reverse 3s infinite;
	  /* Safari 4+ */
	  -moz-animation: bg-scrolling-reverse 3s infinite;
	  /* Fx 5+ */
	  -o-animation: bg-scrolling-reverse 3s infinite;
	  /* Opera 12+ */
	  animation: bg-scrolling-reverse 3s infinite;
	  /* IE 10+ */
	  -webkit-animation-timing-function: linear;
	  -moz-animation-timing-function: linear;
	  -o-animation-timing-function: linear;
	  animation-timing-function: linear;
		
	}
	
}

/* Contact form styling */

.contact-form-loader, .contact-form-completed { 
	display: none;
}

.contact-form-loader .inner { 
	position: absolute; 
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%; height: 100%;
	background:rgba(255,255,255,0.65);
	font-size: 1.75rem;	
}


.contact-form-completed .inner { 
	position: absolute; 
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%; height: 100%;
	background:rgba(255,255,255,0.9);
	font-size: 1.75rem;
}

.contact-form-completed iframe { width: 100%; height: 100%; }

.contact-form-success {
	
	font-size: 1.75rem;
	width: 100%; height: 100%; 
	
}

.contact-form {
	position: relative;
	z-index: 10;
}

.shape-container  {
	z-index: 1;
}

.shape-container  .shape {
	color: #d85c35 !important;
}
	
/* Main Carousel Block */ 

@keyframes movebase {
	  0% {
		  transform: translate3d(0%, 0, 0);
		  visibility: visible;
	  }
      50% {
		  transform: translate3d(-100%, 0, 0);
	  }
	  100% {
		  transform: translate3d(-100%, 0, 0);
		}
	}
	
	@keyframes movefirst {
	  0% {
		  transform: translate3d(100%, 0, 0);
	  }
      50% {
		  transform: translate3d(0%, 0, 0);
	  }
	  100% {
		  transform: translate3d(-100%, 0, 0);
	  }
	}
	
	@keyframes movelast {
	 
      0% {
		  transform: translate3d(100%, 0, 0);
	  }
	  50% {
		  transform: translate3d(0%, 0, 0);
	  }
	  100% { 
		  transform: translate3d(-100%, 0, 0);
		}
	}
		
	.hero-carousel { 
		position: relative;
		width: 100%;
	    overflow: hidden;

	}

	.no-webp .works-block {
		background: url("../img/kreativ/landing-page-hero-tinypng.jpg");
	}

	.webp .works-block{
		background: url("../img/kreativ/landing-page-hero-tinypng.webp");
	}

	.works-block { 
		background-repeat: repeat; 
		background-size: cover !important; 
		background-position: left center; 
		
		position: absolute; top: 0; right: 0;
		width: 100%; 
	}
	
	.works-block:nth-child(1) {
		animation: movebase 32s linear;
		visibility: hidden;
	}
	
	.works-block:nth-child(2) {
		animation: movefirst 32s infinite linear;
		background-position: right center; 
	}
	
	.works-block:last-child { 
		animation: movelast 32s infinite linear;
		animation-delay: 16s;
		transform: translateX(100%);
	}
	
	/* 6 x 2 */
	.works-block, .hero-carousel { 
		height: calc(100vw / 4 * 1);
	}

	/* 4 x 2 */
	@media (min-width: 992px) and (max-width: 1600px) { 
		.works-block, .hero-carousel { 
		  height: calc(100vw / 2.67 * 1);
		}	
	}

	/* 2 x 2 */
	@media (min-width: 500px) and (max-width: 991px) { 
		.works-block, .hero-carousel { 
		  height: calc(100vw / 2.67 * 1);
		}	
	}

	/* 1 x 1 */
	@media (min-width: 0px) and (max-width: 499px) { 
		.works-block, .hero-carousel { 
		  height: calc(100vw / 1.33 * 1);
		}	
	}

/* CTA Block */

.cta-block { 

	background: repeating-linear-gradient(
	  -45deg,
	  #fcf3eb,
	  #fcf3eb 20px,
	  #ffffff 20px,
	  #ffffff 40px
	);
	
	border-top: solid 2px #e95b37; border-bottom: solid 2px #e95b37;

}

/* Subscribe Block */

.subscribe-block { 

	background: 
	  #d85c35
	;
	
	border-top: solid 2px #e95b37; border-bottom: solid 2px #e95b37; 

} 

.input-card { border: solid 1px #e95b37; }


/* Works Block */

.nav.nav-link-gray .nav-link.active, .nav.nav-link-gray .nav-link:hover { color: #e95b37}

/* Other */

.btn-primary, .btn-primary:hover, .btn-primary:visited, .btn-primary:link, .btn-primary:active { 
	color: #fff;
    background-color: #d85c35;
    border-color: #d85c35;
}

.btn-success, .btn-success:hover, .btn-success:visited, .btn-success:link, .btn-success:active { 
	color: #fff;
    background-color: #468781;
    border-color: #468781;
}

/* Concerns Block */

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-15px);
	}
	100% {
		transform: translatey(0px);
	}
}

.float { animation: float 2.5s ease-in-out infinite; }

/* Success Block */

.success-block img { max-width: 350px; height: auto; }

/* Staff Block */

.banner-bottom-end-n3rem::after { background-color: #d85c3530; }

@media (min-width: 0px) and (max-width: 992px) { 

	.banner-bottom-end-n3rem::after { display: none; }

}

/* Profile Block */

.profile-single { 
	width: 275px; 
	height: 275px;
	position: relative; 
}

.profile-card {
	width: 275px;
	height: 275px;
	-webkit-transform-style: preserve-3d;
    -webkit-transition: 1.2s;
}
		
.profile-card img { 
	width: 275px;
	height: 275px; 
}

.profile-single:hover .profile-card {
    -webkit-transform: rotateY(180deg);
}
		
.profile-card .face {
    position: absolute;
    -webkit-backface-visibility: hidden;
	z-index: 10;
}

.profile-single .profile-card .back {
    -webkit-transform: rotateY(180deg);
}
		
.profile-single:hover .profile-card .front {
    z-index: 0;
}

/* Form Validation */
.contact_form_validator .is-valid { border: solid 2px #198754; }
.contact_form_validator .is-invalid { border: solid 2px #dc3545; }

/* Button Shadows */

.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary:hover { 
	box-shadow: 0 4px 11px rgb(216 92 53 / 35%);		
}

/* Header logo */

@media (min-width: 0px) and (max-width: 992px) {
	
	.d-lg-none .logo { margin-left: 15px; }
	
}