@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

#LP-header {
    padding: 0!important;
}

#video-area {

}

#wrapper h1 {
    letter-spacing: 0.08em;
    font-size: 2.5em;
}

#wrapper {
	display: flex;
    justify-content: center;
    align-items: center;
}

.text-shadow {
    text-shadow: 1px 1px 10px #321520cc;
}

.circle{
    position: relative;
    display: inline-block;
    width: 180px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(-45deg, rgba(238, 119, 82, .8), #e73c7ecc);
    color: #fff;
    line-height: 1.2;
    
  }

  .circle span {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :80%;
    margin: 0 10%;
    text-align:center;
  }


  .triangle {
    background: #a4d3d1;
    height: calc(tan(60deg) * 36px / 2);
    width: 60px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }


.icon-close {
	color: var(--icon-color);
	width: 24px;
	height: 24px;
	position: relative;
}
.icon-close:before,
.icon-close:after {
    content: "";
    position: absolute;
    top: 680%;
    width: 100px;
    left: -150%;
    height: var(--icon-width);
    background-color: currentColor;
}
.icon-close:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-close:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

:root {
	--icon-width: 4px;
	--icon-color: #fff;
}

h1, h2, h3, h4, h5, h6, .color-deepBlue {
    color: #3565A5;
}

.background-color-white {
    background-color: #fff;
}

.background-color-blue-to-green {
    background: linear-gradient(-45deg,rgb(161 181 211), rgb(166 230 207));
}

.bgSquare {
    background: url(https://ai.access-company.com/wp-content/themes/acs_ai/img/bg_square.svg);
}

.q, .a {
	display: flex;
	align-items: center;
	gap: 1em;
}
:is(.q, .a) p {
	width: calc(100% - 3.5em);
}
.q {
    color: #3565A5;
	font-weight: bold;
	margin-bottom: .75em;
}
:is(.q, .a)::before {
	content: "";
	display: block;
	background-size: 2.5em;
	width: 2.5em;
	height: 2.5em;
}
.q::before {
    background: url(/wp-content/themes/acs_ai/img/20240417-LP/SVG/faq_01.svg) left center no-repeat;
}
.a::before {
    background: url(/wp-content/themes/acs_ai/img/20240417-LP/SVG/faq_02.svg) left center no-repeat;
}



#section09 .btn {
    background: linear-gradient(-45deg, rgba(238, 119, 82, .8), #e73c7ecc);
    padding: 1em 2em;
    margin-top: 3%;
}


/*========= 背景色が伸びて出現（左から右） ===============*/
/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}

/*========= 蛍光ペン風ハイライト ===============*/
.text-mark{ 
    background: linear-gradient(transparent 0%, #fff 0%);
    color: #321520;
    margin: 0 0.1em;
}

/*========= body背景色の変化CSS ===============*/

#wrapper {
	width: 100%;
    background:linear-gradient(-45deg, rgba(238, 119, 82, .9), #3566a5bb, rgba(61, 205, 157, .9));
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#LP-header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
} 

#video-area{
    position: absolute;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    /* width: 177.77777778vh; 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}