@charset "UTF-8";
/* CSS Document */
/*
Theme Name : クリスタルメソッド株式会社
Theme URI: none
Description: クリスタルメソッド オリジナル / crystal-method original theme｜2023年12月21日 リリース版テーマファイルです。｜Designer/Director:Yuya.Kamemoto／HARUNO design.
Version: 1.0
Author: HAURNO design.
Author URI : https://haruno.design
*/ 

html {
	font-size: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	color: #1A1311;
	font-family: 'Noto Sans JP', YuGothic, "Yu Gothic Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
	font-size: 15px;
	line-height: 1;
    font-weight: 400;
}
#wrapper{
	width:100%;
	overflow-x: hidden !important;
}
ul {
	list-style: none;
}
a {
    text-decoration: none;
}
.linkarea {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	z-index: 99999;
}
.effect-fade {
	opacity : 0;
	transform : translate(0, 30px);
	transition: all 1000ms;
}
.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}
.load{
    position: fixed;
    top: 0px;
    left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 99999999;
	background: white;
	opacity: 1;
	transition: 1s;
	overflow: hidden;
    will-change: opacity;
}
.wrapper{
	display: none;
}
.wrapper.on{
	display: block;
}
.load.off{
	animation: 0.1s linear 1s out-area forwards, 0.5s linear 0.5s loadoff forwards;
}
@keyframes out-area {
	0%{transform:translateY(0px);}
	100%{transform:translateY(-100vh);}
}
@keyframes loadoff {
	0%{opacity: 1;}
	100%{opacity: 0;}
}
.nowrap {
    white-space: nowrap;
}
.pc {
    display: block;
}
.sp {
    display: none;
}

main {
	display: flex;
	flex-direction: column;
}
.simple_block {
	padding: 80px 0px;
}

@media screen and (max-width: 800px) {
	.simple_block {
		padding: 40px 0px;
	}
}
.inner_wide {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 1200px;
	width: 92%;
	margin: auto;
}
.title_block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #1F285B;
}
.title_block .eng_label {
	font-weight: bold;
}
.title_block .title {
	position: relative;
	padding-left: 44px;
}
.title_block .title::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 30px;
	width: 24px;
	height: 1px;
	background: #1F285B;
}
.title_block .title.white_color::before {
	background: white;
}
.title_block .title h2 {
	font-size: 42px;
	font-weight: bold;
	line-height: 1.42em;
}
@media screen and (max-width: 800px) {
	.title_block .title h2 {
		font-size: 32px;
	}
}
@media screen and (max-width: 500px) {
	.title_block .title h2 {
		font-size: 28px;
	}
}
.title_block.-white {
	display: flex;
	flex-direction: column;
	gap: 34px;
	color: white;
}
.title_block.-white .eng_label {
	text-align: center;
}
.title_block.-white .title {
	padding-left: 0px;
	text-align: center;
}
.title_block.-white .title::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -24px;
	width: 2px;
	height: 24px;
	background: #1AEDFF;
}
.title_block.-white .title.white_color::before {
	background: white;
}
.description {
	line-height: 2em;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.head_h3 {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.08em;
	line-height: 2em;
}
.head_h3 span {
	letter-spacing: 0px;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgb(46,72,222);
	background: linear-gradient(135deg, rgba(46,72,222,1) 20%, rgba(241,68,157,1) 100%);
	color: white;
	margin-right: 6px;
}

/*---------------------------------------------

カラム構成

---------------------------------------------*/

.column_2 {
	position: relative;
	display: flex;
	gap: 60px;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
@media screen and (max-width: 1024px) {
	.column_2 {
		flex-direction: column;
	}
	.top_make_block .column_2:nth-child(odd) {
		flex-direction: column-reverse;
	}
}
.txt_block {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	flex-shrink: 1;
	margin: auto;
}
.txt_block ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: disc;
}
.txt_block li {
	font-size: 18px;
	font-weight: bold;
	margin-left: 20px;
}

.play_btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80px !important;
	height: 80px !important;
	transition: 0.3s;
}
.js-play2 {
	cursor: pointer;
}
.js-play2:hover .play_btn {
	width: 90px !important;
	height: 90px !important;
	opacity: 0.5;
	transition: 0.3s;
}


.column_video {
	width: 100%;
	display: flex;
	float: left;	
}
.column_video video{
	width:30vw;
	
}
@media screen and (max-width: 1024px) {
	.column_2_img{
		width: 100%;
	}
	.column_2_img_2 {
		width: 100%;
	}
}
@media (min-width: 1025px){
	.column_2_img{
		position: relative;
		width: 46%;
		flex-shrink: 0;
	}
	.column_2_img_2 {
		position: relative;
		width: 46%;
		flex-shrink: 0;
	}
}
	


.column_2_img img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 9;
	border-radius: 0px 24px 0px 24px;
}
.column_2_img video {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 200;
	border-radius: 0px 24px 0px 24px;
}

.column_2_img_2 video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.column_2_img::before {
	display: block;
	content: "";
	padding-top: 56.25%;
}
.column_2_img_2 img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
	border-radius: 0px 24px 0px 24px;
}
.column_2_img::after {
	position: absolute;
	content: "";
	background: white;
	border-radius: 0px 24px 0px 24px;
	top: 24px;
	left: -24px;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.space-around {
	justify-content: space-around;
}


/*---------------------------------------------

背景色

---------------------------------------------*/

.bg_white {
	background: white;
}
.bg_lightblue {
	background: #D8F0FC;
}
.bg_gray {
	background: #EFEFF3;
}
.bg_grada {
	background: rgb(252,210,224);
	background: linear-gradient(135deg, rgba(252,210,224,1) 20%, rgba(110,153,230,1) 100%);
}
.bg_dark {
	background-image: url("../img/bg_dark.jpg");
	background-size: cover;
}
.bg_contact {
	background-image: url("../img/bg_contact.jpg");
	background-size: cover;
}

/*---------------------------------------------

文字色

---------------------------------------------*/

.main_color {
	color: #1F285B;
}
.white_color {
	color: white;
}
.blue_color {
	color: #1AEDFF;
}

/*---------------------------------------------

文字の太さ

---------------------------------------------*/

.fw-100 {
	font-weight: 100;
}
.fw-200 {
	font-weight: 200;
}
.fw-300 {
	font-weight: 300;
}
.fw-400 {
	font-weight: 400;
}
.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700 {
	font-weight: 700;
}
.fw-800 {
	font-weight: 800;
}
.fw-900 {
	font-weight: 900;
}

/*---------------------------------------------

画面固定チャットボット

---------------------------------------------*/
.fixed_chatbot > .container {
    margin: 0;
    padding: 0;
    max-width: 100%;
	bottom: -50px; 
}
.container {
    margin-top: 50px;
    position: fixed;
    max-width: 60%; /* または別の値 */
    margin-right: auto;
    margin-left: auto;
    text-align: right;
    bottom: -50px; 
}
.container-fluid{
        margin-right: 10px;
}
.fixed_chatbot {
    position: fixed;
    right:0;
	bottom: 0px;
	width:400px;
    z-index: 999999;
    transition: 0.5s;
}

.fixed_chatbot.hidden {
	opacity: 0;
	pointer-events: none;
	transition: 0.5s;
}
.fixed_chatbot .avatar {
	/* position: fixed; */
	position: relative;
	/* left: 20px;
	bottom: 100px;
	z-index: 999999;
	transition: 0.5s; */
}

.avatar_comment {
	bottom: 20px;
	border-right-width: 120px;
	padding: 20px;
	border-radius: 4px;
	border: 1px solid #9B9B9B;
        margin: 0 20% 0 auto;
        width: 300px;
}
.avatar_comment p {
	margin-bottom: 0px;
        width: 300px;
}
.avatar_comment span {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #1F285B;
}

/*---------------------------------------------

トップ／メインスライダー

---------------------------------------------*/

.main_slider {
	position: relative;
	width: 100%;
	height: 800px;
	border-radius: 0px 0px 160px 160px;
	overflow: hidden;
}
@media screen and (max-width: 1024px) {
	.main_slider {
		border-radius: 0px 0px 80px 80px;
	}
}
.main_slider .item {
	pointer-events: none;
	width: 100%;
	height: 100%;
}
.main_slider .item.view {
	pointer-events: auto;
}
.main_slider .item.view video.fv_pc {
	display: block;
}
.main_slider .item.view video.fv_sp {
	display: none;
}
@media screen and (max-width: 900px) {
	.main_slider .item.view video.fv_pc {
		display: none;
	}
	.main_slider .item.view video.fv_sp {
		display: block;
	}
}
.main_slider .item video {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: 0.3s;
}
.main_slider .item.view video {
	opacity: 1;
	transition: 0.3s;
}
.main_slider .item .msk {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgb(46,72,222);
	background: linear-gradient(0deg, rgba(46,72,222,1) 0%, rgba(46,72,222,0) 100%);
	transition: 0.3s;
}
.main_slider .item.view .msk {
	opacity: 0.5;
	transition: 0.3s;
}
.main_slider .item .txt_inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	max-width: 1200px;
	width: 90%;
	color: white;
	opacity: 0;
	transition: 0.3s;
}
.main_slider .item.view .txt_inner {
	transform: translateX(-50%) translateY(0px);
	opacity: 1;
	transition: 0.5s;
	transition-delay: 0.3s;
}
.main_slider .item .txt_inner .main_copy {
	max-width: 50%;
	font-size: 42px;
	font-weight: bold;
	line-height: 1.42em;
}
.main_slider .item .txt_inner .description {
	max-width: 50%;
}
@media screen and (max-width: 1024px) {
	.main_slider .item .txt_inner .main_copy {
		max-width: 100%;
	}
	.main_slider .item .txt_inner .description {
		max-width: 100%;
	}
}
@media screen and (max-width: 500px) {
	.main_slider .item .txt_inner .main_copy {
		font-size: 28px;
	}
}
.more_btn .inner {
	display: inline-block;
	position: relative;
	font-size: 20px;
	padding: 16px 40px;
	border-radius: 100vh;
	font-weight: bold;
	color: white;
	background: rgb(46,72,222);
	background: linear-gradient(90deg, rgba(46,72,222,1) 0%, rgba(241,68,157,1) 100%);
	filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.2));
	transition: 0.5s;
	transform: translateZ(0);
}
.more_btn .inner::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 100vh;
	opacity: 0;
	background: linear-gradient(90deg, rgba(241,68,157,1) 0%, rgba(241,68,157,1) 100%);
	transition: 0.5s;
}
.more_btn .inner:hover {
	filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4));
	transform: 0.5s;
}
.more_btn .inner:hover::before {
	opacity: 1;
	transition: 0.5s;
}
.more_btn .inner p {
	padding-right: 22px;	
}
.more_btn .inner::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	background-image: url("../img/more_btn_arrow.svg");
	width: 14px;
	height: 14px;
	background-size: contain;
	transition: 0.3s;
}
.more_btn .inner:hover::after {
	right: 32px;
	transition: 0.3s;
}
.color_btn .inner {
	display: inline-block;
	position: relative;
	font-size: 20px;
	padding: 16px 40px;
	border-radius: 100vh;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: white;
	background: rgb(46,72,222);
	background: linear-gradient(90deg, rgba(46,72,222,1) 0%, rgba(241,68,157,1) 100%);
	filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.2));
	transition: 0.3s;
	transform: translateZ(0);
}
.color_btn .inner:hover {
	filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.4));
	transition: 0.3s;
}
.color_btn .inner::before {
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(241,68,157,1);
	opacity: 0;
	border-radius: 100vh;
	z-index: -1;
	transition: 0.3s;
}
.color_btn .inner:hover::before{
	opacity: 1;
	transition: 0.3s;
}
.white_btn .inner {
	display: inline-block;
	position: relative;
	font-size: 20px;
	padding: 16px 40px;
	width: 80%;
	max-width: 400px;
	text-align: center;
	border-radius: 100vh;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: white;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.45));
	transform: translateZ(0);
}
.white_btn .inner::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border-radius: 100vh;
	opacity: 0;
	background: rgb(46,72,222);
	background: linear-gradient(135deg, rgba(46,72,222,1) 0%, rgba(241,68,157,1) 100%);
	z-index: -1;
	transition: 0.3s;
}
.white_btn .inner:hover::before {
	opacity: 1;
	transition: 0.3s;
}
.white_btn .inner p {
	display: inline-block;
	background: rgb(46,72,222);
	background: linear-gradient(135deg, rgba(46,72,222,1) 0%, rgba(241,68,157,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.white_btn .inner:hover p {
	background: white;
	background: rgb(255,255,255);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/*---------------------------------------------

体裁

---------------------------------------------*/

.-right {
	text-align: right;
}
.-center {
	text-align: center;
}

/*---------------------------------------------

ヘッダー

---------------------------------------------*/

.top_header {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateZ(0);
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	width: 92%;
	padding: 12px 20px;
	background: white;
	border-radius: 100vh;
	z-index: 999999;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.14));
}
.top_header .logo {
	position: relative;
	height: 37px;
	width: auto;
}
@media screen and (max-width: 500px) {
	.top_header .logo {
		height: 28px;
	}
}
.top_header .logo img {
	height: 100%;
	width: auto;
}
.top_header nav {
	display: flex;
	gap: 14px;
	margin: auto 0px;
	font-weight: bold;
	letter-spacing: 0.03em;
	white-space: nowrap;
	list-style: none;
	font-size: 14px;
}
@media screen and (max-width: 1024px) {
	.top_header nav {
		display: none;
	}
	.top_header nav.open {
		position: absolute;
		top: 80px;
		right: 0px;
		display: flex;
		flex-direction: column;
		background: white;
		padding: 20px;
		border-radius: 24px;
		overflow: hidden;
		filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.14));
		transform: translateZ(0);
	}
}
.top_header nav li {
	position: relative;
	margin: auto 0px;
	transition: 0.3s;
}
.top_header nav li::before {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0px;
	width: 0%;
	height: 1px;
	background: #1F285B;
	transition: 0.3s;
}
.top_header nav li:hover::before{
	width: 100%;
	transition: 0.3s;
}
.top_header .sp_menu {
	display: none;
	position: relative;
	width: 24px;
	height: 18px;
	margin: auto 12px auto;
	transition: 0.3s;
	cursor: pointer;
}
.top_header .sp_menu span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 2px;
	border-radius: 100vh;
	background: #1F285B;
	transition: 0.3s;
}
.top_header .sp_menu span:nth-child(2) {
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	transition: 0.3s;
}
.top_header .sp_menu span:nth-child(3) {
	top: auto;
	bottom: 0px;
	left: 0px;
	transition: 0.3s;
}
.top_header .sp_menu.open span {
	transform: rotate(45deg);
	top: 50%;
	transition: 0.3s;
}
.top_header .sp_menu.open span:nth-child(2) {
	opacity: 0;
	transition: 0.3s;
}
.top_header .sp_menu.open span:nth-child(3) {
	transform: rotate(-45deg);
	top: 50%;
	transition: 0.3s;
}
@media screen and (max-width: 1024px) {
	.top_header .sp_menu {
		display: block;
	}
}
.top_header nav .document {
	cursor: pointer;
	padding: 8px 24px;
	border-radius: 100vh;
	color: white;
	background: rgb(46,72,222);
	background: linear-gradient(135deg, rgba(46,72,222,1) 0%, rgba(241,68,157,1) 100%);
}
.top_header nav .contact {
	padding: 8px 24px;
	border-radius: 100vh;
	border: 1px solid #1F285B;
	color: #1F285B;
	transition: 0.3s;
}
.top_header nav .contact:hover {
	background: #1F285B;
	color: white;
	transition: 0.3s;
}
.top_header nav .contact:hover::before {
	width: 0%;
}

/*---------------------------------------------

フッター

---------------------------------------------*/

footer {
	padding: 140px 0px 40px 0px;
	background: white;
}
footer .info_block {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
footer .info_block .logo {
	height: auto;
	max-width: 320px;
	width: 80%;
}
footer .info_block .logo img {
	height: auto;
	width: 100%;
	object-fit: cover;
}
footer .info_block .address {
	position: relative;
	padding-bottom: 12px;
	border-bottom: 1px solid #1F285B;
	line-height: 1.42em;
}
footer .info_block .address p {
	padding-right: 35px;
}
footer .info_block .address::before {
	content: "";
	position: absolute;
	bottom: 12px;
	right: 0px;
	width: 20px;
	height: 20px;
	background-image: url("../img/address_pin.svg");
	background-size: contain;
}
footer .sns {
	display: flex;
	gap: 24px;
}
footer .sns li {
	position: relative;
	width: 30px;
	height: 30px;
}
footer .sns li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.footer_txt {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 50%;
	flex-shrink: 0;
}
.footer_txt .description {
	text-align: right;
}
@media screen and (max-width: 1024px) {
	.footer_txt {
		max-width: 100%;
		width: 100%;
	}
	.footer_txt .description {
		text-align: left;
	}
	.footer_txt .color_btn.-right {
		text-align: center;
	}
}
footer .sitemap {
	display: flex;
	justify-content: center;
	gap: 18px 64px;
	flex-wrap: wrap;
}
footer .sitemap li {
	position: relative;
	white-space: nowrap;
}
footer .sitemap li::after {
	position: absolute;
	content: "";
	top: 0px;
	width: 1px;
	height: 100%;
	right: -32px;
	background: #1F285B;
}
footer .sitemap li:nth-last-child(1)::after {
	display: none;
}
.copyright {
	font-size: 14px;
	text-align: center;
}

/*---------------------------------------------
/*
/* ビデオポップアップ
/*
/*---------------------------------------------*/

.video_popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 999999;
}
.video_popup.view {
    display: block;
}
.video_popup .cl_mask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.8;
    z-index: -1;
}
.video_popup .video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 640px;
    width: 90%;
    height: auto;
}
.video_popup .video::before {
    display: block;
    padding-top: 56.25%;
    content: "";
}
.video_popup .video video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;    
}

/*---------------------------------------------
/*
/* トップページ
/*
/*---------------------------------------------*/

.circle_video {
	position: relative;	
}
@media screen and (max-width: 1024px) {
	.circle_video {
		margin: auto;
	}
}
.circle_video video {
	width: 400px;
	height: 400px;
	border-radius: 100vh;
	object-fit: cover;
}
@media screen and (max-width: 500px) {
	.circle_video video {
		width: 320px;
		height: 320px;
	}
}
.circle_video::after {
	position: absolute;
	content: "";
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 65px;
	height: 65px;
	background-image: url("../img/play_btn.png");
	background-size: contain;
}
.icon_list {
	display: flex;
	gap: 20PX;
}
.icon_list .img {
	width: 80px;
	height: auto;
	margin: auto 0px;
}
.icon_list .icon {
	width: 30px;
	height: 30px;
	margin: auto 0px;
}
.icon_list img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.talk_txt_block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: auto;
}
.talk_txt_block .output_txt {
	display: flex;
	align-items: center;
	height: 220px;
	font-size: 24px;
	font-weight: bold;
}
.talk_txt_block .talk_btn {
	width: 100%;
	text-align: center;
	padding: 28px;
	background: #1AEDFF;
	border-radius: 6px;
	font-size: 24px;
	font-weight: bold;
}
.talk_txt_block .talk_btn div {
	display: inline-block;
	position: relative;
	padding-left: 44px;
}
.talk_txt_block .talk_btn div::before {
	position: absolute;
	content: "";
	width: 34px;
	height: 34px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url("../img/talk_btn_icon.svg");
	background-size: contain;
}
.notice_txt {
	font-size: 14px;
	line-height: 1.42em;
	letter-spacing: 0.03em;
}
.column_arr {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.column_arr li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: Calc((100% - 48px)/3);
}
@media screen and (max-width: 800px) {
	.column_arr {
		gap: 40px;
	}
	.column_arr li {
		width: 100%;
		gap: 12px;
	}
}
.column_arr li .thumbnail {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
}
.column_arr li .thumbnail::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.column_arr li .thumbnail img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
}
.column_arr li:hover .thumbnail img {
	transform: scale(1.1);
	opacity: 0.8;
	transition: 0.3s;
}
.column_arr li .title {
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 1.42em;
	font-weight: bold;
}
.column_arr li:hover .title {
	text-decoration: underline;
}
.column_arr li .desc {
	letter-spacing: 0.08em;
	line-height: 1.42em;
}
.use_case_arr {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	transition: 0.5s;
	left: 0px;
}
.use_case_arr li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: Calc(( 100% - 48px ) / 3);
	flex-shrink: 0;
}
@media screen and (max-width: 800px) {
	.use_case_arr li {
		width: Calc(( 100% - 24px ) / 2);
	}
}
.use_case_arr li .thumbnail {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	filter: drop-shadow(0px 6px 10px rgba(0,0,0,0.2));
	transition: 0.3s;
	transform: translateZ(0);
}
.use_case_arr li .thumbnail::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.use_case_arr li:hover .thumbnail {
	transform: translateY(-6px);
	transition: 0.3s;
}
.use_case_arr li .thumbnail img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.use_case_arr li .label {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	transition: 0.7s;
}
@media screen and (max-width: 800px) {
	.use_case_arr li .label {
		font-size: 16px;
	}
}
.use_case_arr li:hover .label {
	color: #F1449D;
	transition: 0.7s;
}

.nav_prev_arrow,
.nav_next_arrow {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 40px;
	height: 40px;
	transform: translateY(-50%) rotate(180deg);
	background-image: url("../img/nav_arrow_wh.svg");
	background-size: contain;
	cursor: pointer;
	z-index: 999999;
}
@media screen and (max-width: 800px) {
	.nav_prev_arrow,
	.nav_next_arrow {
		width: 28px;
		height: 28px;
	}
}
.nav_next_arrow {
	left: auto;
	right: 0px;	
	transform: translateY(-50%) rotate(0deg);
}
.nav_prev_arrow::before,
.nav_next_arrow::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.8);
	border-radius: 100vh;
	background: white;
	opacity: 0.4;
	transition: 0.3s;
}
.nav_prev_arrow:hover::before,
.nav_next_arrow:hover::before {
	transition: 0.3s;
	transform: translate(-50%,-50%) scale(2);
	opacity: 0.8;
}


/*---------------------------------------------

DeepAI LP

---------------------------------------------*/

main {
	padding-right: 0px;
}

.lp_header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
}
.lp_header .inner_wide {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}
.lp_header .inner_wide .logo {
	width: 70px;
	height: auto;
	object-fit: contain;
}
.lp_header .inner_wide .logo img {
	width: 100%;
	height: auto;
}
.lp_header nav ul {
	display: flex;
	gap: 20px;
}

.white_box {
	padding: 40px;
	border-radius: 12px;
	background: white;
}
.topics_list {
	display: flex;
	flex-direction: column;
}
.topics_list li {
	position: relative;
	display: flex;
	gap: 24px;
	padding: 24px 0px;
	border-bottom: 1px solid #B2D9ED;
}
.topics_list li .date {
	font-size: 14px;
	margin: auto 0px;
	color: #5C5C5C;
}
.topics_list li .title {
	margin: auto 0px;
	font-weight: bold;
	line-height: 1.4em;
	transition: 0.3s;
}
.topics_list li:hover .title {
	text-decoration: underline;
	color: #246C91;
	transition: 0.3s;
}

.fv {
    position: relative;
    padding: 90px;
    width: 100%;
    margin-top: 80px;
}
@media screen and (max-width: 1250px) {
    .fv {
        padding: 90px 40px;
    }
}
@media screen and (max-width: 1050px) {
    .fv {
        padding: 90px 40px 340px;
    }
}
@media screen and (max-width: 790px) {
    .fv {
        padding: 90px 40px;
    }
}
@media screen and (max-width: 650px) {
    .fv {
        padding: 90px 40px 340px;
    }
}
.fv_back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.fv_back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fv_person {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 900px;
    height: auto;
}
@media screen and (max-width: 1200px) {
    .fv_person {
        width: 750px;
    }
}
.fv_person img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fv_badge {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 200px;
    height: 174px;
}
@media screen and (max-width: 1050px) {
    .fv_badge {
        top: auto;
        bottom: 40px;
        left: 40px;
        right: auto;
    }
}
@media screen and (max-width: 790px) {
    .fv_badge {
        top: 40px;
        bottom: auto;
        left: auto;
        right: 40px;
    }
}
@media screen and (max-width: 650px) {
    .fv_badge {
        top: auto;
        bottom: 40px;
        left: 40px;
        right: auto;
    }
}
.fv_badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fv_textblcok {
    position: relative;
    z-index: 99;
}
.fv_textblcok h2 {
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 1.6px;
    line-height: 50px;
    margin-bottom: 14px;
}
@media screen and (max-width: 900px) {
    .fv_textblcok h2 {
        font-size: 28px;
        line-height: 40px;
    }
}
.fv_textblcok .fv_p1 {
    display: inline-block;
    font-size: 20px;
    padding: 5px 16px;
    color: white;
    background: #202020;
    margin-bottom: 34px;
}
.fv_textblcok .fv_p2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
}
.fv_textblcok .fv_p3 {
    font-size: 14px;
    line-height: 20px;
    color: #777777;
}
.cv_btn {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    padding: 16px 30px;
    color: white;
    margin-bottom: 10px;
}
.cv_btn p {
    position: relative;
    transform: none;
    z-index: 2;
    top: -4px;
}
.cv_btn::before,
.cv_btn::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #3DBABA;
    z-index: 1;
    border-radius: 8px;
}
.cv_btn::before {
    top: -4px;
}
.cv_btn::after {
    z-index: 0;
    background: #218E8E;
}
.cv_btn:hover {
    cursor: pointer;
}

.cv_btn:hover p {
    top: 0px;
    transition: 0.3s;
}
.cv_btn:hover::before {
    top: 0px;
    transition: 0.3s
}


/*スマホサイズのCSS
---------------------------------------------*/
@media screen and (max-width: 800px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
        #avatar-iframe{
                height: 400px;
      }
}