/*
	Theme Name: Amplifyour
	Theme URI: http://themeforest.net/user/fuelthemes
	Description: Child theme for werkstatt
	Version: 1.0.0
	Author: fuelthemes
	Template: werkstatt
*/

/* ===================================================
	CONTENTS:

	00. Tweaks
	01. Homepage & About
	02. Portfolio
    03. Contact
	04. Special Content
	05. Web Subscription Plan Landing Page

=================================================== */

/* ------------------------------------------------------
	00. Tweaks
------------------------------------------------------ */

@import url("../werkstatt/style.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&subset=japanese');

/*
html {
  font-size: 18px;
  line-height: 28px;
}
body {
  font-size: 1em;
  line-height: 1.55555556em;
}
h1 {
  font-size: 4.22222222em;
  line-height: 1.10526316em;
  margin-top: 0.36842105em;
  margin-bottom: 0.7368421em;
}
h2 {
  font-size: 2.61111111em;
  line-height: 1.19148936em;
  margin-top: 0.59574468em;
  margin-bottom: 0.59574468em;
}
h3 {
  font-size: 1.61111111em;
  line-height: 1.93103448em;
  margin-top: 0.96551724em;
  margin-bottom: 0em;
}
h4 {
  font-size: 1em;
  line-height: 1.55555556em;
  margin-top: 1.55555556em;
  margin-bottom: 0em;
}
h5 {
  font-size: 1em;
  line-height: 1.55555556em;
  margin-top: 1.55555556em;
  margin-bottom: 0em;
}
p, ul, ol, pre, table, blockquote {
  margin-top: 0em;
  margin-bottom: 1.55555556em;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}*/

h6 { color: #666}

.thb-portfolio .type-portfolio h2 span:not(.next) { line-height: 1em; }
.thb-portfolio .type-portfolio.style1 h2 { margin-bottom: 15px; }
.thb-portfolio .type-portfolio.style1.light-title .thb-categories { font-weight: bold!important; }
.scroll-bottom { position: absolute!important; }
input[type="submit"], .button, .btn, .btn-text {
    font-family: 'futura-pt', 'BlinkMacSystemFont', -apple-system, 'Roboto', 'Lucida Sans';
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) input[type="submit"].thb-border-style,
.light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .button.thb-border-style,
.light-title:not(.midnight_on) .header:not(.hover):not(:hover):not(.style3) .btn.thb-border-style {
    border: 1px solid #FFF;
    color: #FFF;
    background: transparent;
}

.anchor {
	visibility: hidden;
	margin-top: -126px;
	height: 126px;
}
.visible-xs {
	visibility: hidden!important;
}

.overlay-bg { background-blend-mode: overlay; }
.share_screen > .row {
	width: 100%;	
}

.slick-dots li {
    width: 30px;
    height: 6px;
    margin: 0 5px;
	border-radius: 0px;
}

/* Numbering Text Indent tweak */
#wrapper ol li:before { margin-left: -38px; }
#wrapper ol li { margin-left: 38px; }


@media only screen and (max-width: 1024px) {
	.anchor {
		visibility: hidden;
		margin-top: -110px;
		height: 110px;
	}
	
	#wrapper > * > .row > .columns,
	.page > .row > .columns,
	#footer > .row > .columns {
		padding-left: 25px!important;
		padding-right: 25px!important;
	}
}

@media only screen and (max-width: 640px) {
	
	h2 { font-size: 24px; line-height: 1.2em; margin-bottom: 0.75em; }
	h3 { font-size: 20px; line-height: 1.2em; margin-bottom: 0.75em; }
	h4 { font-size: 18px; line-height: 1.2em; margin-bottom: 0.75em; }
	p { font-size: 16px; line-height: 1.45em; margin-bottom: 1em; }
	
	.margin-bottom-xs { margin-bottom: 20px; }
	.hidden-xs { display: none; visibility: hidden!important; }
	.visible-xs { visibility: visible!important; }
}


/* ------------------------------------------------------
	01. Homepage & About
------------------------------------------------------ */

.hero h1 {
	font-weight: 400;
	line-height: 1.1em;
	letter-spacing: -0.01em!important;
}
.hero h1 strong { font-weight: bold; }
:lang(ja) .hero h1 { 
	line-height: 1.35em!important; 
	letter-spacing: -0.03em;
}

.scroll-bottom.style2 { bottom: 90px!important; }

.profile-photo {
	display: block;
	border-radius: 50%;
	max-width: 180px;
	margin: 0 auto;
}

@media only screen and (min-width: 64.0625em) {
	.hero h1 { font-size: 54px; }
	:lang(ja) .hero h1 { font-size: 48px; }
}

.home-main-service {
	text-align: center;
}

.ay-qualities .thb-iconbox figure {
	margin-bottom: 18px!important;
}
.ay-qualities .thb-iconbox h5 {
	font-size: 22px;
	margin-bottom: 12px;
}
.ay-qualities .thb-iconbox p {
	font-size: 18px;
}

.main-service-box {
	text-align: center;
	align-items: center;
}
.home .main-service-box { height: 320px; }

.main-service-box figure,
.main-service-box svg {
	width: 90px!important;
	height: 90px!important;
}
.main-service-box figure {
	margin-bottom: 15px!important;
}
.main-service-box h5 {
	font-size: 24px;
	margin-bottom: 1em;
}

.home .main-service-box:hover svg * {
	stroke: #FFF!important;
}

.main-service-box.simple { border: none; padding: 0; margin: 0 }
.main-service-box.simple:hover { background: transparent; }
.main-service-box.simple:hover h5 {	color: #111; }

.service-box h3 {
    font-size: 20px;
    margin: 0 0 0.25em;
}

.service-box img {
	display: block;
    margin-bottom: 12px!important;
}

.service-box p {
    font-size: 16px;
    line-height: 1.45em;
    margin: 0 0 0.25em;
}

.ay-portfolio .vc_tta-tabs-container { margin-bottom: 30px!important; }

.ay-portfolio .vc_tta-tab.vc_active > a {
    border-bottom: 5px solid #8351a0!important;
    font-weight: bold;
    background: transparent!important;
    color: #111;
}

.ay-portfolio .vc_tta-tab> a {
    border: none!important;
    border-bottom: 5px solid #DDD!important;
    color: #333!important;
    padding: 10px 25px!important;
}

.ay-portfolio .vc_tta-tab> a:hover {
    border-bottom: 5px solid #666!important;
    background: transparent!important;
    color: #111;
}

.thb-testimonials.style1 blockquote p {
	font-size: 17px;
	line-height: 1.45em;
	font-weight: 300;
}

.page-padding.blog-container {
	padding-top: 14vh!important;
}

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

	.scroll-bottom.style2 { bottom: 110px!important; }
	
	.main-service-box { 
		height: 100%!important;
		border: none!important;
		margin-bottom: 5px;
	}
	
	.ay-qualities .thb-iconbox h5 {
		font-size: 19px;
		margin-bottom: 10px;
	}
	.ay-qualities .thb-iconbox p {
		font-size: 15px;
		line-height: 1.45em!important;
	}
	
	.ay-portfolio .type-portfolio.small-12 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	    margin-bottom: 1.25rem!important;
	}
}


/* ------------------------------------------------------
	03. Contact
------------------------------------------------------ */

.wpforms-submit-container {
	padding: 4vh 0 0!important;	
}

.form-button {
    background: #111!important;
    color: #FFF!important;
    border: 0!important;
    font-family: 'futura-pt',sans-serif;
    font-weight: bold;
    font-size: 18px!important;
    padding: 20px 35px!important;
    text-transform: uppercase!important;
	transition: all 0.2s ease-in-out;
}
.form-button:hover {
	background: #8351ae!important;	
}

/* Remove unnecessary <br> tags added by Contact Form 7 */
.wpcf7-form br {
    display: none; /* Hides the <br> tag */
}

/* Adjust margin if necessary */
.wpcf7-form p {
    margin-bottom: 40px; /* Adjust this value as needed */
}

.wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap input[type="password"], .wpcf7-form-control-wrap input[type="date"], .wpcf7-form-control-wrap input[type="datetime"], .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="number"], .wpcf7-form-control-wrap input[type="search"], .wpcf7-form-control-wrap input[type="tel"], .wpcf7-form-control-wrap input[type="time"], .wpcf7-form-control-wrap input[type="url"], .wpcf7-form-control-wrap textarea { margin-bottom: 0!important;
}

/* ------------------------------------------------------
	04. Special Content
------------------------------------------------------ */

.golden-week {
	background-blend-mode: overlay;	
}

.golden-week h1 {
	font-size: 100px;
	line-height: 1em;
	color: #FFF;
}

.golden-week h2 {
	font-size: 30px;
	line-height: 1em;
	color: #FFF;
}

.golden-week p {
	font-size: 15px;
    color: #FFF;
}

:lang(ja) .golden-week h1,
:lang(ja) .golden-week h2,
:lang(ja) .golden-week p {
	font-family: 'Noto Sans JP', sans-serif;
}

:lang(ja) .golden-week h1 {
	margin-bottom: 0.25em;
}

@media only screen and (max-width: 640px) {
	.golden-week h1 {
		font-size: 60px;
		line-height: 0.9em;
		margin-bottom: 0.25em;
		color: #FFF;
	}

	.golden-week h2 {
		font-size: 20px;
		margin-bottom: 0.5em;
		color: #FFF;
	}
}



/* ------------------------------------------------------
	05. Web Subscription Plan Landing Page
------------------------------------------------------ */

.jp-font {
	font-family: 'Noto Sans JP', sans-serif;
}

.websubs--container > div {
	flex: 0 0 80%;
	max-width: 1280px!important;
	margin: 0 auto;
}

.websubs--heading {
	font-size: 72px;
	font-weight: 400!important;
	line-height: 1.1em!important;
	letter-spacing: 0.01em!important;
	text-transform: uppercase;
}
.websubs--heading strong { 
	font-weight: 700!important; 
}

.websubs--subheading {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px!important;
	line-height: 1.2em!important;
	letter-spacing: 0.1em!important;
	margin: 25px 0 50px;
}

.websubs--container
.thb-autotype .thb-autotype-entry {
	color: #222;
}

.websubs--usp .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.websubs--usp .thb-iconbox {
	align-items: center;
	flex: 0 0 calc(50% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid;
}

.websubs--usp .thb-iconbox h5 {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.websubs--usp .thb-iconbox p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.25em;
	margin-bottom: 0;
}

.websubs--usp img { width: 100%; }

.websubs--usp .thb-iconbox:hover { background: #111; }
.websubs--usp .thb-iconbox:hover * { color: #FFF; }
.websubs--usp .thb-iconbox:hover img { filter: invert(100%); }

.websubs--usp-container {
	
}

.websubs--usp-heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.websubs--usp-heading > figure {
	display: block;
	max-width: calc(100% - 84px);
	text-align: left;
}

.websubs--usp-heading h5 {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.websubs--usp-heading h5 > strong {
    display:inline-block;
    margin-right: 12px;
    padding: 3px 8px;

	font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    background: #8351A0;
	background: linear-gradient(135deg, #8351a0, #472f91);
    color: #FFF;
}

.websubs--usp-heading h2 {
    font-family: 'Noto Sans JP', sans-serif!important;
	font-weight: bold;
}

.websubs--usp-heading > p {
	display: block;
	width: 64px;
	margin: 0 20px 0 0;
}

.websubs--usp-content {
    max-width: 360px;
    margin: 0 auto 60px!important;
}

.websubs--usp-content img {
    max-height: 150px;
}

.websubs--usp-content h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    line-height: 1.25em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.75em;
}

.websubs--usp-content p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
}

.websubs--usp-price {
	max-width: 720px;
	margin: 0 auto;
}
.websubs--usp-price dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: space-between;
	font-size: 30px; 
	line-height: 1.2em;
}
.websubs--usp-price dl > dt { font-weight: normal; }
.websubs--usp-price dl > dd { position: relative; }
.websubs--usp-price dl > dd.cross:after {
    position: absolute;
    display: block;
    width: 100%;
    content: "";
    border-bottom: 4px double #F00;
    top: 50%;
    transform: translate(0,-50%);
}

.websubs--flatrate dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	background: #F3F6F8;
    margin: 0 auto;
    padding: 25px;
    max-width: 600px;
}
.websubs--flatrate dl > dt {
	font-size: 30px; 
	font-weight: normal;
	line-height: 1.2em;
	margin: 0 50px 0 0!important;
}
.websubs--flatrate dl > dd {
	font-size: 48px;
	font-weight: bold;
	line-height: 1em;
	color: #8351A0;
	
	background: linear-gradient(135deg, #8351a0, #472f91);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.websubs--flatrate dl > dd small { font-size: 60% }

.websubs--sidenote {
	max-width: 800px;
	margin: 0 auto;
}

.websubs--sidenote > figure {
	font-family: "Noto Sans JP", sans-serif;
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	line-height: 1.25em;
	margin: 8px auto!important;
    color: #111;
}
.websubs--sidenote > figure > div:first-child { width: 30px; }
.websubs--sidenote > figure > div:last-child { width: calc(100% - 30px); }

.websubs--rank-frame {
    overflow: auto;
    background: #FFF;
    border-radius: 30px;
}

.websubs--rank-frame > img {
    display: block;
    width: 100%;
    min-width: 960px;
}

.websubs--rank-content {
	max-width: 540px;
	margin: 0 auto;
}

.websubs--rank-content h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    line-height: 1.25em;
    font-weight: bold;
    margin-bottom: 0.75em;
	background: linear-gradient(135deg, #8351a0, #472f91);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.websubs--rank-content p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
}

.websubs--rank-content dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    border-radius: 50px;
    padding: 5px 10px;
	font-family: "Noto Sans JP", sans-serif;
}

.websubs--rank-content dt {
    width: 65px;
    text-align: right;
    margin: 0;
    color: #8351A0;
	font-family: "Noto Sans JP", sans-serif;
}

.websubs--rank-content dd {
    width: calc(100% - 75px);
	font-family: "Noto Sans JP", sans-serif;
	color: #111;
}

.websubs--qa {
    margin-bottom: 40px;
}

.websubs--qa dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 15px 20px;
    border-radius: 30px
}

.websubs--qa dl.q { background: #F3F6F9; }
.websubs--qa dl.q dd {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4em;
}

.websubs--qa dt {
    width: 30px;
    height: 30px;
    margin: 0;

    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    background: #8351A0;
	background: linear-gradient(135deg, #8351a0, #472f91);
    color: #FFF;
    border-radius: 50%;
}

.websubs--qa dd {
    width: calc(100% - 42px);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    color: #111;
}

@media only screen and (max-width: 1024px) {
	.websubs--container > div {	flex: 0 0 100% }
	.websubs--heading { font-size: 54px; }
	.websubs--subheading { font-size: 23px!important; }
	
	.websubs--usp .thb-iconbox { 
		flex: 0 0 calc(50% - 20px);
    	margin-bottom: 20px;
		padding: 20px 
	}
	.websubs--usp .thb-iconbox.left figure { margin-right: 20px; }
	
	.websubs--usp .thb-iconbox p {
		font-size: 18px;
	}
	
	.websubs--usp-price dl,
	.websubs--flatrate dl > dt {
		font-size: 24px; 
		line-height: 1.2em;
	}

	.websubs--flatrate dl > dd {
		font-size: 32px;
		line-height: 1em;
	}
	
	.websubs--rank-frame { border-radius: 30px 30px 0 0; }
	
	
}
@media only screen and (max-width: 640px) {
	.websubs--heading strong { font-size: 48px; }
	.websubs--heading { font-size: 36px; line-height: 1.2em!important;}
	.websubs--container .scroll-bottom.style2 { display: none!important }
	
	.websubs--usp .thb-iconbox { flex: 0 0 100% }
	
	.websubs--usp-price dl,
	.websubs--flatrate dl > dt {
		font-size: 16px; 
		line-height: 1.2em;
	}
	
	.websubs--flatrate dl > dt {
		margin: 0 20px 0 0!important;
	}
	
	.websubs--flatrate dl > dd {
		font-size: 24px;
		line-height: 1em;
	}
	
	.websubs--qa dl.q dd {
		font-size: 16px;
		line-height: 1.4em;
	}
	
	.websubs--qa dd {
		font-size: 14px;
		line-height: 1.75em;
	}
	

}