/*
Theme Name:Tabiato Biz - Albatros Child
Theme URI:
Description:Albatrosの子テーマ
Template:albatros
Author:Ogino
Version:0.2
*/

/* ここに子テーマのカスタマイズを追加 */
@import "./fonts/font.css";

/* ninja forms用*/
.nf-form-fields-required {
	display: none;
}


* {
	font-family: "Montserrat", 'Noto Sans Japanese', sans-serif;
	/*
	font-family:'Noto Sans Japanese', "Montserrat", "M PLUS 1p", sans-serif;
	font-family: "Montserrat", "Noto Sans JP", "M PLUS 1p", sans-serif;
	*/
	font-weight: 400;
	font-optical-sizing: auto;
	font-style: normal;
}

@keyframes bg-slider {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -4138px 0;
	}
}

:root {
	--width: min(100vw, 42rem);
	--angle: -5deg;
	--abs-angle: max(var(--angle), var(--angle) * -1);
	--tan-alpha: tan(var(--abs-angle));
	--skew-padding: calc(var(--width) * var(--tan-alpha) / 2);
	--color-blue: #05187E;
	--color-sky: #00AAC8;

}
.mb-60 {
	margin-bottom: 60px !important;
}

.fuwatAnime {
	animation-fill-mode:both;
	animation-duration:1s;
	animation-name: fuwatAnime;
	visibility: visible !important;
}
@keyframes fuwatAnime {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

body.page-biz a.navbar-item:hover {
    --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
    --bulma-navbar-item-background-a: 0;
}

/* body.page-biz */
body.page-biz nav a img {
	max-height: 52px;
	width: auto;
}
body.page-biz {
	font-family: "Montserrat", 'Noto Sans Japanese', sans-serif;
	background-color: #fff;
	color: #2D2A22;
	font-size: 16px;
}

body.page-biz h1 {
    font-weight: 500;
}

body.page-biz h2 {
	font-size: 32px;
	line-height: 1.5;
	text-align: center;
	font-weight: 500;
}
body.page-biz h3 {
	font-weight: 500;
}
body.page-biz h4 {
	font-weight: 500;
}

body.page-biz section {
	padding: 70px 50px;
}
@media all and (max-width: 768px) {
	body.page-biz section {
		padding: 40px 30px;
	}
}

body.page-biz section .container {
	max-width: 1080px !important;
}


body.page-biz .head {
	background-image: url(./assets/top_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
}
body.page-biz section.hero {
	padding-top: 0;
	padding-bottom: 0;
}

body.page-biz .navbar {
	background: none;
}

body.page-biz .hero .hero-body {
	padding: 30px 0;
}
body.page-biz .hero h1 {
	margin-top: 70px;
	margin-bottom: 40px;
	color: #fff;
	font-size: 44px;
}
body.page-biz .hero .image-sample {
	position: relative;
}
body.page-biz .hero .image-sample video {
	position: absolute;
	top: 55.4%;
	left: 8.5%;
	width: 55.2%;
}

@media all and (max-width: 768px) {
	body.page-biz .hero h1 {
		margin-top: 10px;
		margin-bottom: 40px;
		font-size: 25px;
		line-height: 1.5;
	}
	body.page-biz .hero .img {
		text-align: center;
	}
	body.page-biz .hero .img img {
		margin-top: 0;
		width: 75%;
	}
}
body.page-biz .hero .tags {
	margin-bottom: 40px;
}
body.page-biz .hero .tags .tag {
	color: var(--color-sky);
}
@media all and (max-width: 768px) {
	body.page-biz .hero .tags .tag {
		font-size: 13px;
	}
}
body.page-biz .hero .button {
	color: #fff;
	background-color: var(--color-blue);
}
@media all and (max-width: 768px) {
	body.page-biz .hero .button {
		display: block;
	}
}



body.page-biz .tags {
	margin-bottom: 40px;
}

body.page-biz .tags .tag {
	color: var(--color-sky);
}

body.page-biz .hero .button {
	color: #fff;
	background-color: var(--color-blue);
}
@media all and (max-width: 768px) {
	body.page-biz .hero .button {
		display: block;
	}
}


body.page-biz section.section-head-logos  {
	padding: 60px 0;
}


@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
.scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
}
.scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0
}
.scroll-infinity__list--left {
	animation: infinity-scroll-left 250s infinite linear 0.5s both;
}
.scroll-infinity__item {
	width: calc(100vw / 7);
	text-align: center;
}
.scroll-infinity__item > img {
	height: 60px;
}

body.page-biz .section-head-logos .scroll-infinity {
	margin-bottom: 30px;
}

body.page-biz .section-stats h2 {
	font-size: 24px;
}
@media all and (max-width: 768px) {
	body.page-biz .section-stats h2 {
		font-size: 18px;
	}
}

body.page-biz .section-stats .note {
	font-size: 12px;
}

body.page-biz .section-stats h3 {
	font-size: 64px;
	color: var(--color-sky);
	font-weight: bold;
}

body.page-biz .section-stats h4 {
	font-size: 24px;
	color: var(--color-sky);
	font-weight: bold;
}

body.page-biz .section-benefits {
	position: relative;
	padding: var(--skew-padding) 0;
	margin-top: -1px;
	padding-bottom: 60px;
}

body.page-biz .section-benefits:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50px;
	right: 0;
	bottom: 0;
	transform: skewY(var(--angle));
	transform-origin: 50% 0;
	outline: 1px solid transparent;
	backface-visibility: hidden;
	background-color: var(--color-sky);
	;
}

body.page-biz .section-benefits h2 {
	font-size: 24px;
	color: #fff;
	background-color: var(--color-blue);
	border-radius: 40px;
	display: inline-block;
	padding: 16px 32px;
}

body.page-biz .section-benefits .box {
	box-shadow: 0px 16px 32px -8px #0C0C0D66;
	border: 3px solid var(--color-sky);
	padding: 24px;
	border-radius: 8px;
}
body.page-biz .section-benefits .columns {
	margin-bottom: 40px;
}

body.page-biz .section-benefits .box h3 {
	font-size: 32px;
	font-weight: normal;
}
body.page-biz .section-benefits .box h3 span {
	font-weight: bold;
	position: relative;
	z-index: 1;
}
body.page-biz .section-benefits .box h3 span::after {
	/*
	transition: width 2s;
	text-decoration: underline;
	text-decoration-thickness: 20px;
	text-decoration-color: var(--color-sky);
	text-underline-offset: -0.2em;
	text-decoration-skip-ink: none;
	font-weight: bold;
	*/
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: 0%;
	height: 20px;
	background: var(--color-sky);;
	z-index: -1;
	transition: all 0.8s;
}
body.page-biz .section-benefits .box h3 span.gyuinAnime::after {
	width: 100%;
}

body.page-biz .section-benefits .box p {
	font-size: 16px;
	font-weight: normal;
}

@media all and (max-width: 768px) {
	body.page-biz .section-benefits .columns {
		margin: 0;
	}
	body.page-biz .section-benefits .column.is-3 {
		text-align: center;
	}
	body.page-biz .section-benefits .column.is-3 img {
		width: 60%;
	}
	body.page-biz .section-benefits .column.is-8 {
		margin: 8px;
	}
	body.page-biz .section-benefits .box h3 {
		font-size: 29px;
	}
}


body.page-biz .section-howto h2 {
	color: var(--color-blue);
}

body.page-biz .section-howto .column {
	position: relative;
}
body.page-biz .section-howto span {
	position: absolute;
	padding: 8px 24px;
	border-radius: 30px;
	border: 1px solid var(--color-sky);
	background-color: #fff;
	font-size: 16px;
	color: var(--color-sky);
	text-align: center;
	font-weight: bold;
	top: -7px;
	left: 0px;
}

body.page-biz .section-howto h3 {
	font-size: 24px;
}

body.page-biz .section-howto .blue-box {
	border: 1px solid var(--color-sky);
	max-width: 710px;
	padding: 30px 48px;
	border-radius: 8px;
	margin: auto;
	position: relative;
}
body.page-biz .section-howto .blue-box h4 {
	background: var(--color-sky);
	color: #fff;
	font-size: 16px;
	border-radius: 30px;
	display: inline-block;
	padding: 8px 32px;
	position: absolute;
	top: -18px;
	right: 0;
	left: 0;
	margin: auto;
	max-width: 390px;
}
body.page-biz .section-howto .blue-box h5 {

	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}
@media all and (max-width: 768px) {
	body.page-biz .section-howto .column {
		margin-bottom: 40px;
	}
	body.page-biz .section-howto .column img {
		width: 80%;
	}
	body.page-biz .section-howto .blue-box h4 {
		width: 90%;
	}
	body.page-biz .section-howto .blue-box {
		padding-top: 60px;
	}
}

body.page-biz .section-ota {
	background-image: url(./assets/ota.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 480px;
	padding-top: 100px;
}

body.page-biz .section-ota .box {
	padding: 50px 30px;
	opacity: 0.95;
}

body.page-biz .section-voice .columns img {
	margin: auto;
	width: 60%;
	border-radius: 6px;
}

body.page-biz .section-voice .columns .box {
	border: 1px solid var(--color-sky);
	box-shadow: none;
	position: relative;
	padding: 45px 30px 30px;
}

body.page-biz .section-voice .columns .box h4 {
	background: var(--color-sky);
	color: #fff;
	font-size: 16px;
	border-radius: 30px;
	display: inline-block;
	padding: 8px 32px;
	position: absolute;
	top: -18px;
	right: 0;
	left: 0;
	margin: auto;
	max-width: 380px;
	text-align: center;
	font-weight: bold;
}

body.page-biz .section-voice .columns .box .content {
	margin: auto;
	font-size: 14px;
	line-height: 2;
}
@media all and (max-width: 768px) {
	body.page-biz .section-voice .columns .box h4 {
		width: 90%;
	}
	body.page-biz .section-voice .columns img {
		margin-bottom: 20px;
	}
	body.page-biz .section-voice .columns .box {
		padding-top: 60px;
	}
}

body.page-biz .section-logos {
	background-color: #e8f6f9;
}
body.page-biz .section-logos .columns .column img {
	margin-bottom: 8px;
}
body.page-biz .section-logos .columns .column .content {
	font-size: 12px;
	color: #333333;
	text-align: center;
}
body.page-biz .section-price {
	background-color: #00AAC8;
}
body.page-biz .section-price h2 {
	color: white;
}
body.page-biz .section-price .box {
	box-shadow: none;
	border: none;
	border-radius: 16px;
	padding: 50px 70px;
}
body.page-biz .section-price .box .price {
	color: #00AAC8;
	font-size: 64px;
	font-weight: bold;
}
body.page-biz .section-price .box .price small {
	margin-left: 5px;
	font-size: 32px;
	font-weight: bold;
}
body.page-biz .section-price .box .notice {
	text-align: left;
	font-size: 16px;
	line-height: 2;
}
body.page-biz .section-price .box .notice img {
	width: 19px;
	vertical-align: text-bottom;
}
@media all and (max-width: 768px) {
	body.page-biz .section-price .box {
		padding: 20px;
	}
	body.page-biz .section-price .box .price {
		font-size: 50px;
	}
	body.page-biz .section-price .box .price small {
		font-size: 20px;
	}
	body.page-biz .section-price .box .notice {
		padding: 10px 50px;
	}
}

body.page-biz .nf-form-cont {
	max-width: 500px;
	margin: auto;
}

body.page-biz .section-form .container {
	max-width: 600px !important;
}