@charset "UTF-8";

@keyframes fuwafuwa {
	0% {
	  transform: translateY(-10%);
	}
	100% {
	  transform: translateY(10%);
	}
}

@keyframes fadein {
	100% {
		opacity: 1;
	}
}

:root {
	--black: #1f1f1f;
	--Gray1: #b2b2b2;
	--Gray2: #C4CCD0;
	--Gray3: #F3F5F6;
	--white: #ffffff;
	--blue: #346DD0;
	--skyblue: #3FBDF3;
	--red: #F9235D;
	--pink: #DD26D5;
	--blue-gradation: linear-gradient(90deg, var(--blue) 0%, var(--skyblue) 100%);
	--red-gradation: linear-gradient(90deg, var(--red) 0%, var(--pink) 100%);
	--darkblue-gradation: linear-gradient(90deg, #193462 0%, #1E5972 100%);
	--orange-gradation: linear-gradient(90deg, #F8760D 0%, #FACB22 100%);
	font-size: 16px;
	text-align: 150%;
}

body {
	font-family: urw-din, "Noto Sans Japanese", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 500;
	color: var(--black);
	background-color: var(--white);
}

/* TpTopボタン */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: var(--blue-gradation);
    border: solid 2px var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
	box-shadow: 0 0 16px rgb(0 0 0 / 25%);
	transition: all 1s ease;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--white);
    border-right: 3px solid var(--white);
    transform: translateY(20%) rotate(-45deg);
	transition : 1s;
}
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        background: var(--skyblue);
		transition : 1s;
    }
}

/*下からフェードイン*/
.fade-in-bottom {
	opacity: 0;
	animation-name: fadein-bottom;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-element {
	opacity: 0;
	transform: translateY(20px);
   	transition: all 1.75s 0.25s ease-out;
}

a {
	color: #333;
	text-decoration: none;
}

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

.wrapper {
	max-width: 1120px;
	margin: 0 auto;
}

.sp {
	display: none;
}

.br-tab {
	display: none;
}

.br-sp {
	display: none;
}

/* テキスト */
.regular {	/* 16px */
	font-size: 1rem;
	font-weight: 400;
	line-height: 150%;
}

.x-small {	/* 12px */
	font-size: 0.75rem;
}

.small {	/* 14px */
	font-size: 0.875rem;
	line-height: 130%;
	padding-left: 1em;
    text-indent: -1em;
}

.medium {	/* 20px */
	font-size: 1.25rem;
	line-height: 130%;
}

.large {	/* 24px */
	font-size: 1.5rem;
}

.x-large {	/* 32px */
	font-size: 2rem;
}

.xx-large {	/* 40px */
	font-size: 2.5rem;
}

h2 {
	color: var(--Black);
	text-align: center;
	/* 48px-Bold テキストスタイル */
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 3rem;

	span {
		display: block;
		color: var(--skyblue);
		text-align: center;
		font-family: "urw-din-condensed";
		font-size: 40px;
		font-style: italic;
		font-weight: 900;
		margin-top: 0.5rem;
	}
}

h3 {
	text-align: center;
	/* 24px-Bold テキストスタイル */
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 130%; /* 33.6px */
	background: var(--blue-gradation);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	margin-bottom: 16px;
}

.blue-title {
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	line-height: 140%;
	background: var(--blue-gradation);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	margin-bottom: 1rem;
}

/* CVボタン */
.cv-button-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.cv-button-a {
	position: relative;
	display: inline-block;
	width: calc(100% / 2 - 16px );
	cursor: pointer;

	&:hover {
		transform: scale(1.05);
		transition-duration: .4s;
	}
	
	.cv-text-top {
		color: var(--white);
		text-align: center;
		/* 24px-Bold テキストスタイル */
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 140%; /* 33.6px */
		margin-bottom: 8px;

		.cv-text-top-large {
			font-size: 2rem;
		}
	}
}

.cv-button {
	color: var(--white);
	padding: 1rem;			
	font-size: 2rem;
	font-weight: bold;
	border-radius: 3rem;
	border: 2px solid var(--white);
	box-shadow: 0px 4px 4px 0px rgba(65, 65, 65, 0.25);
	line-height: 150%;
	text-align: center;

	&:hover {
		transform: scale(1.05);
		transition-duration: .4s;
	}

	.cv-large {
		font-size: 2.5rem;
	}

	.cv-button-text {
		position: relative;
		padding-left: 10%;

		&::before {
			content: '';
			display: block;
			width: 2.5rem; 
			height: 2.5rem;
			background-size: contain;
			background-repeat:no-repeat;
			position:absolute;
			top: 10%;
			left: 10%;
		}
	}
}

.cv-button-right-a {
	position: relative;
	display: block;
	width: calc(100% / 3 );
	margin: 0 auto;

	.cv-button-right-text {
		position: relative;
		padding-right: 6%;

		&::after {
			content: '';
			display: block;
			width: 2rem; 
			height: 2rem;
			background-size: contain;
			background-repeat:no-repeat;
			position:absolute;
			top: 13%;
			right: 2%;
		}
	}
}
.movie::before {
	background-image: url(../img/videocam.svg);
}

.email::before {
	background-image: url(../img/email.svg);
}

.more::after {
	background-image: url(../img/CaretCircleRight_white.svg);
}

.bg-blue {
	background: var(--blue-gradation);
}

.bg-red {
	background: var(--red-gradation);
}

.contact {
	background: var(--darkblue-gradation);
	padding: 3rem 0;
}

.circle-number {
	display: inline-block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--blue-gradation);
	text-align:center;
	line-height: 72px;
	font-family: "urw-din-condensed";
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 900;
	margin-top: 0.5rem;
	color: var(--white);
}

.button-a {
	position: relative;

	.button-text {
		font-size: 1.25rem;
		font-weight: bold;
		text-align: right;
		padding: 8px 36px 0 0;
		background: var(--blue-gradation);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		&::before {
			content: '';
			display: block;
			width: 2rem; 
			height: 2rem;
			background-image: url(../img/CaretCircleRight.svg);
			background-size: contain;
			background-repeat:no-repeat;
			position:absolute;
			top: 8%;
			right: 0;
			/*アニメーションの指定*/
			transition: all .3s;
		}

		&:hover::before {
			right: -1.5%;
		}
	}
}

.balloon {
	position: relative;
	display: inline-block;
	margin: 2rem;
	padding: 1rem 2rem;
	min-width: 120px;
	max-width: 100%;
	font-weight: bold;
	border-radius: 0.5rem;

	&::before {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -10px;
		border: 0.5rem solid transparent;
  	}
  
	p {
		margin: 0;
		padding: 0;
	}
} 

.black {
	background-color: var(--black);
	color: var(--white);

	.balloon&::before {
		border-top: 1rem solid var(--black);
	}
}

/* header */
.navigation {
	.btn{
		font-size: 12px;
	}
}

.navigation__brand-logo {
	font-size: 21px;
}

.drop-down-menu{
	font-size: 14px;
}
.navigation__main-menu .container-lg .navigation__menu-list .menu-list__item.drop-down-menu>.sub-menu li a {
    font-size: 14px;
}

ul li.menu-list__item a {
	font-size: 14px;
}
.main-footer-menu .footer-middle-links ul li {
    margin-bottom: 8px;
}
.main-footer-menu .footer-middle-links ul li a {
    font-size: 13px;
}

.all-contents {
	.navigation__menu-list .menu-list__item > a {
		font-size: 15px;
	}
	.sp-menu-social-links{
		li{
			a {
				font-size: 20px;
			}
		}
	}
}
.all-contents.footer-sp {
	.navigation__menu-list {
		.menu-list__item {
			> a {
				font-size: 15px;
			}
		}
		.icon-only {
			a {
				font-size: 20px;
			}
		}
	}

	.sp-menu-social-links {
		li {  
			a {
				font-size: 20px;
			}
		}
	}

	.contact-btn-list {  
		.btn {
		f	ont-size: 15px;
		}
		.business {
			padding: 0.75em 0;
		}
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.navigation {
		li.menu-list__item {
			a {
				font-size: 12px;
			}
		}
		.drop-down-menu>.sub-menu li a {
			font-size: 11px;
		}
	}
}

@media screen and (max-width: 767px) {
	.navigation .navigation__main-menu {
        padding: 20px 0;
    }
	.business.btn {
        font-size: 15px !important;
	}
}
/* headerここまで

/* footer */
footer {
	a {
		font-size: 12px;
	}
	.small {
		text-indent: 0;
	}
}
  
.main-footer-menu {
	.footer-middle-links {
		margin-top: 15px;
		@media screen and (max-width: 1280px) {
			gap: 15px;
		}
		p.fw-bold {
			font-size: 14px;
			margin-bottom: 14px;
		}
		ul {
			li {
				a {
					font-size: 13px;
				}
			}
		}   
	}

	.footer-social-links {
		li.menu-list__item a {
			font-size: 18px !important;
		}
	}

	.footer-company-links {
		a {
			font-size: 13px;
		}
	}

	.contact-btn-list {
		.business {
			font-size: 15px;
		}
	}
}
.sub-footer-menu {
	vertical-align: middle !important;
	.text-center {
		vertical-align: middle !important;
		a {
			vertical-align: middle !important;
			.copy {
				vertical-align: middle !important;
			}
		}
	}
}  
.sp-floating-banner {
	.floating-btn {
		font-size: 15px;
	}
}
  
@media screen and (max-width: 767px) {
	footer {
		a {
			font-size: 10px;
		}
	}
} 
/* footerここまで */

/* KV */
.kv_section {
	background-image: url(../img/kv-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	padding-bottom: 6.5rem;
	margin-top: 61px;
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
        width: 100%;
		height: 200px;
		background: url(../img/bg01.png) center no-repeat;
		background-size: cover;
		z-index: 0;
	}

	.kv-movie {
		position: absolute;
		top: -100px;
        right: -580px;
        width: 90%;
        height: 100%;
		z-index: -1;
	}	

	.kv-top {
		display: flex;

		.kv-left {
			width: 65%;

			.catch {
				font-style: italic;
				color: var(--white);

				.catch-top {
					margin-top: 4.5rem;
					margin-bottom: 1rem;
					font-size: 2.5rem;
					font-weight: 600;

					span {
						font-size: 4rem;
					}
				}

				.catch-large {
					font-size: 6.5rem;
					font-weight: 700;

					.catch-middle {
						font-size: 5rem;
					}
				}
			}

			img {
				width: 90%;
				margin-top: 2rem;
                margin-bottom: 1.5em;
			}
		}

		.kv-right {
			position: relative;
			width: 100vw;
            margin-right: calc(50% - 50vw);
			flex: 1;
			.kv-balloon {
				background-color: var(--white);
				filter: drop-shadow(4px 4px 4px rgba(52, 109, 208, 0.25));
				border-radius: 80px;
				color: var(--blue);
				font-weight: 700;
				font-size: 22px;
				text-align: center;
				padding: 1rem 1.5rem;
				display: inline-block;
				animation: fuwafuwa 1.8s ease-in-out infinite alternate-reverse;
		
				&::before {
					content: "";
					position: absolute;
					top: 100%;
					left: 50%;
					margin-left: -10px;
					border: 0.5rem solid transparent;
					border-top: 0.75rem solid var(--white);
				}
			}

			.kv-balloon01 { /* 社内交流会 */
				position: absolute;
				top: 74px;
                left: 10%;
			}

			.kv-balloon02 { /* 集客 */
				position: absolute;
				top: 160px;
                left: 5%;
			}

			.kv-balloon03 { /* 地域交流 */
				position: absolute;
				top: 47px;
                left: 30%;
			}

			.kv-balloon04 { /* 学校行事 */
				position: absolute;
				top: 64px;
                left: 58%;
			}

			.kv-balloon05 { /* 販促 */
				position: absolute;
				top: 145px;
                left: 69%;
			}
		}
	}

	.solution_title {
		color: var(--white);
		text-align: center;
		font-size: 3rem;
		font-weight: 700;
		margin: 4rem 0 2rem;
	}

	.solution_ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.solution-balloon {
		position: relative;
		display: inline-block;
		background-color: var(--white);
		box-shadow: 0px 0px 16px 0px rgba(31, 31, 31, 0.15);
		padding: 1rem;
		margin-bottom: 2rem;
		width: calc(100% / 3 - 40px );
		font-size: 1.4rem;
		font-weight: bold;
		border-radius: 1rem;
		line-height: 150%;
		text-align: center;
		z-index: 1;

		&::before {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -10px;
			border: 0.5rem solid transparent;
			border-top: 1rem solid var(--white);
		}
	}
}
@supports (background-image: url(../img/webp/kv-bg.webp)) {
	.kv_section {
		background-image: url(../img/webp/kv-bg.webp);
	}
}

/* お悩み */
.worry {
	background-color: var(--Gray3);
	padding-top: 1rem;
	padding-bottom: 0;
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: -260px;
		left: 50%;
		transform: translate(-40%);
		width: 60px;
		height: 129px;
		background: url(../img/arrow.svg) center top no-repeat;
	}
}
.worry-bg {
	margin-top: 0;
	background: url(../img/bg02.svg) center top no-repeat;
	width: 100%;
	height: 200px;
	background-size: cover;
}

.worry_title {
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	padding: 48px 0;
	background: var(--blue-gradation);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

/* サポート上 */
.support_top {
	margin: 80px 0;
	ul {
		width: fit-content;
    	margin: auto;
	}
	li {
		font-size: 2rem;
		font-weight: bold;
		margin: 2rem 0 0 3rem;
		position: relative;
		&::before {
			content: '';
			display: block;
			width: 2.5rem; 
			height: 2.5rem;
			background-image: url(../img/CheckCircle.svg);
			background-size: contain;
			background-repeat:no-repeat;
			position:absolute;
			top: -0.2rem;
			left: -3rem;
		}
	}
}

.support_title {
	margin: 5rem auto;
	width: 100%;
	text-align: center;
	font-size: 48px;
	font-weight: bold;

	.underline {
		position: relative;
	  
		&::before {
			background-image: var(--red-gradation);
			content: '';
			position: absolute;
			bottom: 1px;
			display: inline-block;
			width: 100%;
			height: 1.5rem;
			transform:skewX(-25deg);
			z-index: -1;
	  	}
	}
}

/* HADOとは */
.what-hado {
	margin: 8rem 0 2rem;
	position: relative;

	.what-hado-title {
		width: 220px;
		position: absolute;
		top: -20%;
  		left: 1%;
	}

	.what-hado-innner {
		display: flex;
		width: 100%;
		background: var(--white);
		border-radius: 16px;
		box-shadow: 0px 0px 16px 0px rgba(31, 31, 31, 0.15);

		p {
			padding: 0 2rem 0 0;
		}
	}

	img {
		margin: 0 2rem 0 0;
		width: 420px;
		border-radius: 16px 0 0 16px;
	}

	p {
		display: flex;
		align-items: center;
		height: 240px;
	}
}

/* サポート下 */
.support-list {
	display: flex;
	justify-content: space-around;
    width: 100%;
    margin: 0 0 160px;

	li {
		width: calc(100% / 3 - 50px);
		text-align: center;
	}

	p {
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 140%;
		margin-top: 16px;
	}
}

/* 利用シーン */
.scene {
	background: url("../img/scene_background.jpg");
	background-size: cover;
	width: 100%;
	padding: 8rem 0;

	.scene-card {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.scene-icon {
		width: 200px;
		position: absolute;
		height: 4rem;
		top: -18%;
		left: calc(100% / 2 - 2rem);
	}

	.scene-card-list {
		background-color: rgba(255,255,255,0.75);
		box-shadow: 0px 0px 16px 0px rgba(31, 31, 31, 0.15);
		border-radius: 16px;
		width: calc(100% / 2 - 70px);
		padding: 2rem;
		margin-bottom: 4rem;
		position: relative;
	}

	.scene-ul {
		display: flex;
		flex-wrap: wrap;
	}

	.scene-list {
		background: url(../img/CheckCircle.svg) no-repeat left center / auto 1em;  /* 背景画像でアイコンを入れる */
  		padding: 0 0 0 1.4rem;  /* アイコン画像分 + 適度な間隔 */
		font-size: 1.25rem;
		padding-right: 2rem;
		margin-bottom: 0.75rem;
	}
}
@supports (background-image: url(../img/webp/scene_background.webp)) {
	.scene {
		background-image: url(../img/webp/scene_background.webp);
	}
}
/* コンテンツ */
.contents {
	padding-top: 7.5rem;
	padding-bottom: 2rem;

	.contents-wrapper {
		display: flex;
		justify-content: space-between;
		padding: 40px;
		margin: auto;
	}

	.contents-img {
		width: 710px;
		height: auto;
		cursor: pointer;

		
	}

	.reverse{
		flex-direction: row-reverse;
	}

	.contnts-innner {
		width: 48%;
	}

	.contents-outside-right {
		width: 100%;
  		height: auto;
	}

	/*右側へ要素を広げる（2カラム）*/
	.contents-outside-right{
		flex: 1;
		margin-right: calc(50% - 50vw);
		margin-left: 4%;
	}

	/*左側へ要素を広げる（2カラム）*/
	.contents-outside-left{
		flex: 1;
		margin-left: calc(50% - 50vw);
		margin-right: 4%;
	}

	.contents-tag {
		margin: 0.25rem 0 0.5rem 0;
		color: var(--blue);
		/* 18px-Bold テキストスタイル */
		font-size: 1rem;
		font-weight: 700;
		line-height: 140%;
		text-align: center;

		.contents-li {
			padding-right: 1rem;
			display: inline;
		}
	}
}

/* ポップアップ */
input {
	display: none;
}

/* ポップアップwindow部分 */
#overlay, #overlay-hmb, #overlay-shoot {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 70;
	width: 100%;
	height: 100%;
}
/* オーバーレイの背景部分 */
#bg_gray {
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 80;
}
/* ウィンドウ部分 */
#window, #window-hmb, #window-shoot {
	width: 50%;
	padding: 20px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.6);
	z-index: 90;
	opacity: 0;
}
/* 閉じるボタン */
#btn_cloth {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--black);
	border-radius: 50%;
	z-index: 100;
	cursor: pointer;
}
#btn_cloth:hover {
	opacity: 0.7;
}
#btn_cloth span,
#btn_cloth span::before {
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #fff;
}
#btn_cloth span {
	transform: rotate(45deg);
}
#btn_cloth span::before {
	content: "";
	position: absolute;
	bottom: 0;
	transform: rotate(-90deg);
}

/* クリックで表示 */
#popup:checked ~ #overlay,
#popup-hmb:checked ~ #overlay-hmb,
#popup-shoot:checked ~ #overlay-shoot {
	visibility: visible;
}
#popup:checked ~ #overlay #window,
#popup-hmb:checked ~ #overlay-hmb #window-hmb,
#popup-shoot:checked ~ #overlay-shoot #window-shoot {
	animation: fadein 500ms forwards;
	animation-timing-function: ease-in-out;
}

/* コンテンツ部分のスタイル */
#txt_label {
	cursor: pointer;
	display: block;
}

#msg {
	text-align: center;

	.msg-inner {
		width: 80%;
		margin: 0 auto;

		.msg-title {
			background: var(--blue-gradation);
			color: var(--white);
			font-family: "urw-din-condensed";
			font-style: italic;
			padding: 0.25rem 0;
		}
	
		.msg-text {
			display: flex;
			justify-content: center;
			margin: 1rem 0;

			.msg-text-left {
				font-size: 1.25rem;
				font-weight: 700;
				line-height: 2rem;
				background: var(--blue-gradation);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-right: 1.5rem;
			}

			.msg-text-right {
				font-size: 1rem;
				line-height: 2rem;
				align-items:center;
			}
		}

		p {
			display: inline-block;
			text-align: left;
		}
	}
}

/* 導入プラン */
.plan {
	padding: 12.5rem 0 0.1rem;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--Gray3);
		transform: skewY(6deg) translateY(90px);
		z-index: -1;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--Gray3);
		transform: skewY(6deg) translateY(90px);
		z-index: -1;
	}

	.plan-inner {
		width: 80%;
		border-radius: 16px;
		background: var(--white);
		box-shadow: 0px 0px 16px 0px rgba(31, 31, 31, 0.15);
		padding: 2.5rem 2.5rem 1rem;
		margin: 0 auto 3.5rem auto;
		display: flex;

		.plan-left {
			width: 50%;
			padding-right: 2rem;

			.plan-img {
				position: relative;
			}

			.plan-balloon-img {
				position: absolute;
				top: -4.5rem;
				right: 0;
				left: 0;
				margin: 0 auto;
				height: 5rem;
			}
		}

		.plan-right {
			text-align: center;
			width: 50%;

			.plan-top-text {
				font-weight: 700;
			}
			
			.plan-text a {
				color: var(--blue);
				border-bottom: 1px solid;
			}

			.plan-title {
				margin: 0.5rem 0 1rem 0;
				font-weight: 700;
				background: var(--blue-gradation);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.plan-price-ul {
				margin: 1.25rem 0 1rem;
				padding: 0.5rem 1rem;
				border-top: 1px solid var(--Gray2);
				border-bottom: 1px solid var(--Gray2);

				.plan-price-list {
					display: flex;
					justify-content: space-between;
					align-items:center;
				}

				.plan-price-list-left {
					text-align: left;
					color: var(--blue);
				}

				.plan-price-list-right {
					text-align: right;

					.plan-price-large-text {
						background: var(--blue-gradation);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
		}
	}
}

/* 選ばれ理由 */
.reason {
	padding: 12.5rem 0 2rem;

	.reason-ul {
		display: flex;
		flex-wrap: wrap;
		
		.reason-list {
			width: calc(100% / 3 - 40px / 3);
			margin-right: 20px;
			margin-bottom: 48px;

			.reason-img {
				position: relative;
				margin-bottom: 8px;
				
				img {
					border-radius: 24px;
				}
			}

			.reason-number {
				position: absolute;
				top: -32px;
				left: 8px;
			}
		}

		.reason-list:nth-of-type(3n) {
			margin-right: 0;
		}
	}
}

/* メディア掲載 */
.media {
	text-align: center;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--Gray3);
		transform: skewY(6deg) translateY(90px);
		z-index: -1;
	}
}

@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
}

.scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
	margin-top: 0.5rem;
	width: 100%;
}
.scroll-infinity__list {
	display: flex;
}
.scroll-infinity__list--left {
	animation: infinity-scroll-left 50s infinite linear 0s both;
}
.scroll-infinity__item {
	width: 10rem;
	height: 75px;
	padding-right: 1rem;
	box-shadow: 0px 0px 12px 0px rgba(31, 31, 31, 0.15);
}
.scroll-infinity__item>img {
	width: 100%;
}

/* 導入事例 */
.case {
	padding: 6rem 0;
	background-color: var(--Gray3);

	.wrapper-case {
		width: 90%;
		margin: 0 auto;
	}
}

/* 導入までの流れ */
.flow {
	padding: 7.5rem 0 2rem;

	.flow-ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		
		.flow-list {
			width: calc(100% / 4 - 288px / 4);
			margin: 48px 72px 48px 0;
			position: relative;

			&::after {
				content: '';
				display: block;
				width: 2rem;
				height: 2rem;
				background-image: url(../img/rigth.svg);
				background-size: contain;
				background-repeat: no-repeat;
				position: absolute;
				top: 40%;
				left: 110%;
			}

			&:last-child::after {
				content: none;
			}

			.flow-img {
				position: relative;
			}

			.flow-number {
				position: absolute;
				top: -3.5rem;
				left: -1rem;
			}

			.flow-tittle {
				color: var(--blue);
				text-align: center;
				/* 24px-Bold テキストスタイル */
				font-size: 1.5rem;
				font-weight: 700;
				line-height: 140%; /* 33.6px */
				margin-bottom: 0.5rem;
			}
		}

		.flow-list:nth-of-type(4n) {
			margin-right: 0;
		}
	}
}

/* よくあるご質問 */
.faq {
	padding: 13rem 0 7.5rem;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--Gray3);
		transform: skewY(-6deg) translateY(90px);
		z-index: -1;
	}

	.faq-wrapper {
		display: grid;
		gap: 1rem;
		max-inline-size: 60rem;
		margin: auto;
		width: 100%;

		/* FAQ content */
		.faq-content {
			width: 100%;
			--accent-color: var(--Black);
			--v-rythm: 1.6em;
			--gap: 1em;
			position: relative;
			background: var(--white);
			box-shadow: 0px 0px 16px 0px rgba(31, 31, 31, 0.15);
			border-radius: 1.5rem;
			cursor: pointer;
			-webkit-user-select: none;
			user-select: none;
		}
		.faq-content:before {
			position: absolute;
			content: '';
			top: 2.5rem;
			right: 25px;
			height: 2px;
			width: 15px;
			background: var(--Gray1);
			transform: rotate(90deg);
			transition: all .3s ease-in-out;
		}
		.faq-content:after {
			position: absolute;
			content: '';
			top: 2.5rem;
			right: 25px;
			height: 2px;
			width: 15px;
			background: var(--Gray1);
			transition: all .3s ease-in-out;
		}
		  
		.faq-content[open]:before {
		transform: rotate(180deg);
		}
		.faq-content[open]:after {
		opacity: 0;
		}

		/* Q */
		.faq-q {
			line-height:  2.5rem;
			display: flex;
			gap: var(--gap);
			padding: 1.25rem 3rem 1.25rem 2rem;
			font-size: 1.25rem;
			font-weight: 700;

			span {
				width: 75%;
			}
		}
		.faq-q::-webkit-details-marker {
			display: none;
		}
		.faq-q:hover {
			color: var(--skyblue);
			transition: 0.5s;
		}
		.faq-q:before {
			content: "Q";
			display: block;
			color: var(--white);
			font-size: 2rem;
			font-family: "urw-din-condensed";
			font-style: italic;
			/* 円 */
			width: 2.5rem;
			height: 2.5rem;
			border-radius: 50%;
			background: var(--black);
			text-align:center;
			line-height: 2.4rem;
		}
		/* A */
		.faq-a {
			margin-left: 0.5rem;
			display: flex;
			gap: 1.05rem;
			padding: 0 4rem 1rem 1.5rem;
			margin-bottom: 1rem;
			/* 16px-Regular テキストスタイル */
			font-size: 1rem;
			font-weight: 400;
			line-height: 150%;

			span {
				width: 80%;
			}
		}
		.faq-a:before {
			content: "A";
			font-weight: bold;
			color: var(--white);
			font-size: 2rem;
			font-family: "urw-din-condensed";
			font-style: italic;
			/* 円 */
			width: 40px;
            height: 40px;
			border-radius: 50%;
			background: var(--pink);
			text-align:center;
			line-height: 2.4rem;
			position: relative;
		}
	}
}

/* footerCVT */
.contact_bottom {
	background: var(--darkblue-gradation);
	padding: 7.5rem 0;
	text-align: center;

	.contact_bottom-ttl {
		font-size: 3rem;
		font-weight: bold;
		line-height: 140%;
		margin-bottom: 2.5rem;
		background: var(--orange-gradation);
		-webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
	}
	
	.contact_bottom a {
		display: block;
	}
}

@media screen and (max-width:1900px){
	.kv_section {
		.kv-movie {
			top: -280px;
			right: -450px;
		}
		.kv-top {
			.kv-right {
				margin: 0 calc(35% - 31vw);
	
				.kv-balloon01 {
					left: 10%;
				}
				.kv-balloon03 {
					left: 40%;
				}
				.kv-balloon04 {
					left: 68%;
				}
				.kv-balloon05 {
					left: 80%;
				}
			}
		}
	}
}

@media screen and (max-width:1610px){
	.kv_section {
		.kv-top {
			.kv-right {	
				.kv-balloon01 {
				}
				.kv-balloon02 {
					left: 0;
				}
				.kv-balloon03 {
				}
				.kv-balloon04 {
				}
				.kv-balloon05 {
				}
			}
		}
	}
}

@media screen and (max-width:1500px){
	.kv_section {
		.kv-top {
			.kv-right {	
				.kv-balloon01 {
					left: 0;
				}
				.kv-balloon02 {
					left: -15%;
				}
				.kv-balloon03 {
				}
				.kv-balloon04 {
				}
				.kv-balloon05 {
					left: 79%;
				}
			}
		}
	}
}

/* 以下は画面サイズが1440px以下になったら適応されます */
@media screen and (max-width:1400px){
	.kv_section {
		.kv_section {
			.kv-movie {
				top: -330px;
				right: -310px;
			}
		}
		.kv-top {
			.kv-right {
				.kv-balloon {
					font-size: 18px;
				}
				.kv-balloon01 {
					left: -10%;
				}
				.kv-balloon02 {
					left: -25%;
				}
				.kv-balloon03 {
					left: 32%;
				}
				.kv-balloon04 {
				}
				.kv-balloon05 {
					left: 75%;
				}
			}
			.kv-movie {
				top: -370px;
				right: -440px;
				width: 125%;
			}
		}
	}
}

@media screen and (max-width:1300px){
	.kv_section {
		.kv-top {
			.kv-right {
				.kv-balloon01 {
					left: -15%;
				}
				.kv-balloon02 {
					left: -30%;
				}
				.kv-balloon03 {
					left: 28%;
				}
				.kv-balloon04 {
					left: 65%;
				}
				.kv-balloon05 {
					left: 75%;
				}
			}
		}
	}
}

@media screen and (max-width:1200px){
	.kv_section {
		.kv-top {
			.kv-right {
				.kv-balloon01 {
					left: -15%;
				}
				.kv-balloon02 {
					left: -50%;
				}
				.kv-balloon03 {
					left: 15%;
				}
				.kv-balloon04 {
					left: 65%;
				}
				.kv-balloon05 {
					left: 75%;
				}
			}
		}
	}
}

/* 以下は画面サイズが1024px以下になったら適応されます */
@media screen and (max-width:1024px){
	.wrapper {
		padding: 0 1.5rem;
	}

	.br-tab {
		display: block;
	}

	.regular {
		font-size: 0.95rem;
	}

	.medium {
		font-size: 1.15rem;
	}

	.large {
		font-size: 1.25rem;
	}

	.x-large {
		font-size: 1.65rem;
	}

	.xx-large {
		font-size: 1.75rem;
	}

	.kv_section {
		& .kv-top {
			& .kv-left {
				& .catch {
					.catch-top {
						margin-top: 4.5rem;
						font-size: 2rem;
						span {
							font-size: 3rem;
						}
					}
					.catch-large {
						font-size: 4.8rem;
						.catch-middle {
							font-size: 4rem;
						}
					}
				}

				img {
					margin-bottom: 2rem;
				}
			}
			.kv-right {
				margin-right: calc(10% - 60vw);

				.kv-balloon {
					font-size: 0.95rem;
				}

				.kv-balloon02 {
					left: -17%;
				}

				.kv-balloon03 {
					left: 10%;
				}

				.kv-balloon04 {
					left: 27%;
				}

				.kv-balloon05 {
					left: 30%;
				}
			}
		}
		.kv-movie {
			right: -450px;
            width: 145%;
		}
		.solution-balloon {
			font-size: 1rem;
		}
	}

	.cv-button {
		font-size: 1.25rem;

		.cv-large {
			font-size: 1.65rem;
		}

		.cv-button-text {
			&::before {
				top: -10%;
				left: 5%;
			}
		}
	}

	.cv-button-a {
		.cv-text-top {
			font-size: 1.4rem;
		}
	}

	.support_title {
        .underline-support {
            display: none;
        }
    }

	h3 {
		font-size: 1.15rem;
	}

	.worry {
		padding-top: 0;
		&::after {
			bottom: -140px;
		}
		.worry_title {
			padding: 0px 0 48px;
		}
	}

	.worry-bg {
		height: 80px;
	}

	.support {
		.what-hado {
			& .what-hado-innner {
				p {
					margin-top: 1rem;
                    margin-bottom: 1rem;
				}
			}
		}
	
		.support_top {
			li {
				font-size: 1.75rem;
			}
		}
		.support-list {
			p {
				font-size: 1.25rem;
			}
		}
	}

	.scene {
		.scene-card-list {
			width: calc(100% / 2 - 18px);
		}
		.scene-icon {
			width: 180px;
		}
	}

	.contents {
		.contents-img {
			width: 50vw;
		}

		.contents-tag {
			font-size: 0.95rem;
		}

		#window, #window-hmb, #window-shoot {
			width: 80%;
		}
	}

	.button-a {
		.button-text {
			font-size: 1rem;
		}
	}

	.plan {
		& .plan-inner {
			& .plan-left {
				.plan-balloon-img {
					height: 4rem;
				}
			}
		}	
		.plan-price-ul {
			padding: 0.7rem 0.25rem 0.5rem;
	
			.medium {
				font-size: 1rem;
				line-height: 90%;
			}
		}
	}

	.cv-button-right-a {
		width: calc(100% / 2 );
		& .cv-button-right-text {
			&::after {
				top: 0%;
			}
		}

	}
	.reason {
		.circle-number {
			width: 60px;
			height: 60px;
			line-height: 60px;
			font-size: 2rem;
		}
	}

	.flow {
		padding: 7.5rem 0 0rem;
		& .flow-ul {
			.flow-list {
				width: calc(100% / 4 - 190px / 4);
				margin: 48px 56px 24px 0;
				.flow-tittle {
					font-size: 1.25rem;
				}
				.circle-number {
					width: 60px;
					height: 60px;
					line-height: 60px;
					font-size: 2rem;
				}
			}
		}
	}

	.contact_bottom-ttl {
		font-size: 2.3rem;
	}
	
	.faq-wrapper {
		padding: 0 0.5rem;
		box-sizing: border-box;
	}
}

@media screen and (max-width:800px){
	.kv_section {
        .kv-movie {
            right: -420px;
            width: 150%;
        }
    }
	.kv_section {
        & .kv-top {
            & .kv-left {
                & .catch {
                    .catch-large {
                        font-size: 4.7rem;
                    }
                }
            }
        }
    }
	.what-hado {
		p {
			height: auto;
		}
	}
}

@media screen and (max-width: 700px) {
    .kv_section {
        .kv-movie {
            width: 190%;
        }
    }
}

/* SP用コーディング */
@media screen and (max-width:599px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.br-sp {
		display: block;
	}

	.cv-button {
        margin-bottom: 1.45rem;

		.cv-button-text {
			&::before {
				left: 3%;
				width: 2rem;
            	height: 2rem;
			}
		}
    }

	.balloon {
		margin: 2rem 2rem 1.5rem 2rem;
	}

	.cv-button-a {
		width: 100%;
	}
	.kv_section {
		background-image: url(../img/kv-bg-sp.png);
		padding-bottom: 0;
		margin-top: 70px;

			&::after {
			height: 100px;
			}

		.kv-movie {
			top: 40px;
            right: -360px;
            width: 180%;
		}

		.kv-top {
			display: block;

			.kv-left {
				width: 100%;
	
				img {
					width: 100%;
					margin-top: 1.5rem;
				}
				.catch {
                    .catch-large {
                        font-size: 3rem;
						.catch-middle {
							font-size: 2.5rem;
						}
					}
					.catch-top {
						font-size: 1.4rem;
						margin-top: 2rem;
						span {
							font-size: 2.75rem;
						}
					}
				}
            }
			.kv-right {
				.kv-balloon {
					font-size: 1rem;
					padding: 0.75rem 1.25rem;
				}
				.kv-balloon01 {
					top: 26px;
					left: 15%;
				}
				.kv-balloon02 {
					top: 90px;
					left: 25%;
				}
				.kv-balloon03 {
					top: -30px;
					left: 40%;
				}
				.kv-balloon04 {
					top: 6px;
                    left: 66%;
                }
				.kv-balloon05 {
                    top: 75px;
                    left: 77%;
                }
			}
		}

		.cv-button-list {
			flex-direction: column-reverse;
		}

		.top-cv {
			margin-top: 16rem;
		}

		.solution {
			.solution_title {
				font-size: 2rem;
				line-height: 130%;
				margin: 2rem 0 1.6rem;
			}
			.solution-balloon {
				width: calc(100% / 2 - 18px);
				font-size: 0.9rem;
				padding: 0.75rem 0.4rem;
				margin-bottom: 1.5rem;
			}
		}
	}
	.worry{
		&::after {
			bottom: -150px;
			left: 49%;
		}
		.worry_title {
			font-size: 1.55rem;
			padding: 2rem 0 1.25rem;
		}
	}

	.worry-bg {
		height: 88px;
	}

	.support {
		.support_top {
			margin: 64px 0;
	
			li {
				font-size: 1.25rem;
				margin: 1.25rem 0 0 2rem;
				line-height: 130%;
	
				&::before {
					width: 2rem;
					height: 2rem;
					left: -2.5rem;
				}
			}
		}
	}

	.support_title {
		margin: 0 auto 3rem;
		width: 100%;

		img {
			max-width: 86%;
		}

		.underline-small {
			font-size: 2.5rem;
		}

		.underline-support {
			display: inline-block;
    		margin-top: 0.75rem;
		}
	}

	.what-hado {
		margin: 6rem 0 2rem;

		.what-hado-title {
			top: -7%;
		}
		.what-hado-innner {
			display: block;

			p {
				padding: 0.5rem 1.5rem;
			}
		}
		img {
			width: 100%;
			border-radius: 16px 16px 0 0;
			margin: 0;
		}
	}
	
	.underline-support {
		display: inline-block;
        font-size: 2.5rem;
		margin-top: 0px;
	}

	.support-list {
		display: block;
		margin: 0 0 80px;

		li {
			width: 80%;
			margin: 0 auto 2.25rem;
		}
	}

	h2 {
		font-size: 2rem;
		line-height: 110%;
		margin-bottom: 2.5rem;
		span {
			font-size: 1.8rem;
		}
	}

	.button-text {
        font-size: 1.15rem;
    }

	.scene {
		padding: 5rem 0;

		.scene-card {
			display: block;
			margin-top: 4rem;

			.scene-card-list {
				width: 100%;
				padding: 1.25rem;
				box-sizing: border-box;

				img {
					max-width: 25%;
				}

				.scene-icon {
					top: -25%;
				}

				.scene01 {
					top: -15%;
				}

				.scene03 {
					top: -25%;
				}

				.scene04 {
					top: -15%;

					img {
						max-width: 35%;
					}
				}
			}

			.blue-title {
				font-size: 1.75rem;
			}

			.scene-list {
				padding: 0 0 0 1.2rem;
				font-size: 1.1rem;
				padding-right: 1rem;
			}
		}
	}

	.contents {
		& .contents-img {
			& #modal-video {
				iframe {
					width: 88vw;
					height: 49vw;
				}
			}
		}

		.contents-wrapper {
			display: block;
			padding: 0;
		}
		.reverse {
			margin: 4rem 0;
		}
		.contents-movie-img {
			margin: 1rem 0;
		}
	}

	#msg {
		.msg-inner {
			width: 100%;
			& .msg-text {
				.msg-text-right {
					font-size: 0.9rem;
				}
			}
		}
	}

	.plan {
		padding: 9rem 0 0;
		
		.plan-inner {
			width: 100%;
			padding: 2.5rem 1.5rem 1rem;
			display: block;
			box-sizing: border-box;

			.plan-left {
				width: 100%;
				padding-right: 0;

				img {
					margin-bottom: 1rem;
				}
			}

			.plan-right {
				width: 100%;
				.plan-price-ul {
					padding: 0.5rem;
				}
			}
		}
	}

	.reason {
		padding: 9rem 0 0rem;

		.reason-ul {
			display: block;

			.reason-list {
				width: 100%;
				margin-right: 0;
			}
		}
	}

	.media {
		.x-large {
			font-size: 1.5rem;
			line-height: 130%;
		}
		.scroll-infinity__item {
			width: 128px;
			height: 60px;
			padding-right: 0.5rem;
		}
	}

	.case {
		padding: 5rem 0 3rem;

		h2 {
			margin-bottom: 1.5rem;
		}

		.cv-button-right-a {
			width: 100%;
		}

		& .cv-button-right-text {
			&::after {
				top: 0;
			}
		}
	}

	.flow {
		padding: 7.5rem 0 0rem;

		.flow-ul {
			display: block;
	
			.flow-list {
				width: 80%;
				margin: 0 auto 8rem;

				&:nth-of-type(4n) {
					margin: 0 auto;
				}

				&::after {
					top: 110%;
					left: 45%;
					transform: rotate(90deg);
				}
			}
		}
	}

	.faq {
		padding: 10rem 0 6rem;

		h2 {
			margin-bottom: 1rem;
		}

		.faq-wrapper {
			.faq-q {
				line-height: 1.25rem;
				font-size: 1rem;
			}

			.faq-a {
				font-size: 0.9rem;
			}
		}
	}

	.contact_bottom {
		padding: 5rem 0;

		.contact_bottom-ttl {
			font-size: 1.4rem;
			margin-bottom: 2rem;
		}
	}

	@supports (background-image: url(../img/webp/kv-bg-sp.webp)) {
		.kv_section {
			background-image: url(../img/webp/kv-bg-sp.webp);
		}
	}
}

@media screen and (max-width: 550px) {
    .kv_section {
        .kv-movie {
            top: -200px;
            right: -280px;
        }
    }
}

#modal-video {
	/* cursor: pointer; */
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,80%);
	transition: .5s;
	&.close {
		filter: opacity(0);
		visibility: hidden;
	}
	&.open {
		filter: opacity(1);
		visibility: visible;
	}
	iframe {
		width: 64vw;
		height: 36vw;
	}
}

/* hado-officialのslickのcssb削除 */
.slick-slider .slick-prev:before {
    content: " ";
}

.slick-slider .slick-next:before {
    content: " ";
}

/* *{
    outline: 2px red solid;
} */