@charset "UTF-8";
/* CSS Document */

/*文字サイズ*/
h1{
	font-size: 2rem;
}
h2{
	font-size: 1.5rem;
}
p{
	font-size: 1.3rem;
}
ul{
	text-align: left;
}
li{
	font-size: 1.3rem;
}
.title{
	margin: 50px auto;
}
@media screen and (max-width: 800px){
	 h1{
	font-size: 1.4rem;
}
	h2{
		font-size: 1.3rem;
	}
	 p{
		font-size: 1.2rem;
		 line-height: 2rem;
	}

}
/*文字サイズここまで*/

/*タイトル*/
.heading05 {
	position: relative;
	padding-bottom: 50px;
	font-size: 26px;
	text-align: center;
	background-color: rgba
}

.heading05::before {
	content: attr(data-en);
	display: block;
	color: #e04272;
	font-size: 20px;
	font-style: italic;
	text-transform: uppercase;
}

.heading05::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%) rotate(30deg);
	width: 1px;
	height: 40px;
	background-color: #e04272;
}

/*タイトルここまで*/
.background-bk {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 5%);
    background-blend-mode: multiply;
    padding: 100px 0px 0;
    margin-top: 50px;
}



/*黒背景*/



.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* 背景動画をコンテンツの後ろに配置 */
  filter: blur(3px); /* ぼかし効果を適用 */
}

.bg-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* 黒い半透明のフィルター */
  z-index: 0; /* フィルターを動画の上に配置 */
}




.hp-top {
	max-width: 1200px;
  width: 90%;
  margin: 50px auto 0;
  position: relative;
  z-index: 1; /* コンテンツを前面に表示 */
  color: white;
  text-align: center;
	background-color: rgba(0,0,0,0.6);
	padding: 15px ;
}

.hp-top h1 {
  color: #4DA3FC;
  line-height: 3.5rem;
  letter-spacing: -0.05em; /* 数値を調整して好みの間隔に */
}

.hp-top span {
  color: #FFC132;
}

.hp-top p {
  margin-top: 30px;
  font-size: 1.2rem;
  line-height: 3rem;
}
@media screen and (max-width: 800px){


	.hp-top p{
		text-align: left;
		
	}
}
/*マイナスイメージの例*/
.background-whi{
	background-color: #C9C9C9;
	padding: 100px 20px;
}

.background-gradation{
	margin: 50px auto 0;
    background-image: linear-gradient(194deg, rgba(54, 126, 185, 1), rgba(207, 253, 157, 1));
	padding: 2%;
}
.minus-image{
	padding: 2%;
	width: 100%;
	margin: 30px auto;
	border-radius: 20px;
	background-color: #fff;
	color: #333;
	max-width: 1100px;
}
.minus-image h1{
	margin: 20px 0;
	color: #172a88;
}

.minus-image-text{
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
.minus-image h2{
	color: #0093d7;
	border-bottom: solid #0093d7;
}
.minus-image p{
	margin-bottom: 30px;
}

.minus-image {
  position: relative;
}

.minus-image h1, .minus-image h2, .minus-image p {
  opacity: 0; /* 初期状態で非表示 */
  transform: translateY(50px); /* 下から出てくるようにする */
  transition: opacity 1s ease, transform 1s ease; /* アニメーションをスムーズに */
}

.minus-image.visible h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* h1が最初に表示 */
}

.minus-image.visible h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; /* h2が次に表示 */
}

.minus-image.visible p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s; /* pが最後に表示 */
}
@media screen and (max-width: 800px){
	.minus-image h1{
	font-size: 1.4rem;
}
	.minus-image h2{
		font-size: 1.3rem;
	}
	.minus-image p{
		font-size: 1rem;
	}
}

/*マイナスイメージの例ここまで*/

/*ユーザー目線でのHPの存在価値*/
.user-mesen{

	margin: 0px auto　50px;
	padding: 20px;
	text-align: left;

}
.user-mesen h3{
	text-align: center;
}
.user-mesen{
	width: 100%;
}
	


/*吹き出し*/
.user-mesen-hukidashi {
	margin: 0px auto ;
  background-color: #fff;

  position: relative; /* 吹き出しの三角形を配置するための基準 */
	border-radius: 15px;
	max-width: 1100px;
	padding: 35px 20px;
	
	
}

.user-mesen-hukidashi::after {
  content: "";
  position: absolute;
  bottom: -20px; /* 吹き出しの三角形を下に配置 */
  left: 50%; /* 吹き出しの中央に配置 */
  transform: translateX(-50%); /* 中央揃え */
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff; /* 吹き出しの色 */
}
/*吹き出しここまで*/
.user-mesen-text{
	background-color: rgba(0,0,0,0.6);
	
	max-width: 1000px;
	margin: 40px auto 0;
	padding: 10px 15px;
}

.user-mesen-hukidashi h1{
	color: #0093d7;
	text-align: center;
}
.user-mesen-hukidashi h2{
	color: #F87E47;
	width: 85%;
	margin:  15px auto 5px;
	
}
.user-mesen-hukidashi ul{
	width: 80%;
	margin: 0 auto ;
	color: #333;
}
.user-mesen-hukidashi li{
	font-size: 1.5rem;
	
}
.user-mesen h5 {
    font-size: 2rem;
    margin-top: 50px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	color: #fff;
}
.user-mesen p{
	line-height: 2rem;
	color: #fff;
	text-align: center;
	width: 80%;
	margin: 15px auto;
}
@media screen and (max-width: 800px){
	.user-mesen p{
		width: 90%;
	}
}

/*マーカー*/
.marker {
  background:linear-gradient(transparent 80%, #faee00 40%);
  display: inline;
	padding: 5px;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 1.5s;
}
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}
/*マーカーここまで*/





/*連携・レスポンシブ等*/
.hp-koumoku-00{
	padding: 150px 20px 100px;
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	justify-content: center;
	color: #333;
	
}
.hp-koumoku{
	background-color: #fff;
	border-radius: 15px;
	width: 45%;
	max-width: 700px;
	min-width: 400px;
	padding: 20px;
}
.hp-koumoku h1{
	margin-top: 15px;
	margin-bottom: 10px;
	color:  #0093d7;
	font-size: 1.7rem;
	border-bottom: solid #0093d7;
	text-align: left;
}
.hp-koumoku h2{
	color: #F87E47;
	text-align: left;
	margin: 5px 0 0;
}
.hp-koumoku p{
	width: 95%;
	text-align: left;
	line-height: 2rem;
	margin: 10px auto ;
}
.hp-koumoku ul{
	width: 80%;
	margin: 10px auto;
}
/*レスポンシブ*/
.responsive{
	background-color: #FFF3B3;
	border-radius: 15px;
	padding: 10px;
}
.hp-koumoku img {
    max-width: 400px;
    width: 70%;
    margin-left: auto;
    margin-right: 20px;
    display: block; /* 画像をブロック要素にして、左右にマージンを設定できるようにする */
}

.responsive h1{
	font-size: 1.5rem;
	margin: 0px;
	padding: 10px;
	color: #F87E47;
	border-bottom: none;
}
.responsive p{
	margin-top: 0px;
}

@media screen and (max-width: 1000px){
	.hp-koumoku{
		width: 90%;
	}
}

/*知って欲しいポイント*/

.point-bg{
	background-color: rgba(215,215,215,0.3);
	padding: 50px 0;
}
.point{
	width: 60%;
	margin: 0 auto;
}
.point h1{
	font-size: 2rem;
	margin: 20px auto;
}

.point h2{
 color: #FFF33F;
}
.point p{
	margin-bottom: 30px;
}
.point-text {
  text-align: left;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 軽い影をつける */
}


@media screen and (max-width: 1000px){
	.point{
	width: 90%;
	margin: 0 auto;
}
}
 


/* 制作する前に検討すること */
.kentou{
	margin: 100px auto;
}
.hp-kentou00 {
  margin: 0 auto;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.hp-kentou {
  background-color: #333;
  border: solid  #E7F07B;
  width: 20%;
	min-width: 250px;
  padding: 20px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  opacity: 0; /* 初期状態は非表示 */
  transform: translateY(50px); /* 初期位置で下に設定 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* スムーズに表示と移動 */
}
.hp-kentou h2{
	font-size: 1.4rem;
	
}

.hp-kentou ul {
  font-size: 1.2rem;
  padding: 10px;
  margin: 0 auto;  /* 水平方向に中央寄せ */
  width: fit-content;  /* 内容に合わせて幅を調整 */
 
}


.hp-kentou.show {
  opacity: 1; /* スクロールで表示 */
  transform: translateY(0); /* スクロールで元の位置に移動 */
}

/* 各要素に遅延時間を設定 */
.hp-kentou:nth-child(1).show {
  transition-delay: 0.1s;
}

.hp-kentou:nth-child(2).show {
  transition-delay: 0.3s;
}

.hp-kentou:nth-child(3).show {
  transition-delay: 0.5s;
}

.hp-kentou:nth-child(4).show {
  transition-delay: 0.7s;
}

.kentou-img {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.kentou-img img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1100px){
	.hp-kentou{
		width: 45%;
	}
}
@media screen and (max-width: 800px){
	.hp-kentou{
		width: 80%;
	}
}

/*どう活用すれば良いのか*/
.katsuyou {
  width: 85%;
  margin: 0 auto;
}
.katsuyou h1{
	font-size: 1.6rem;
	color:  #E7F07B;
	margin:50px auto 5px;
}

.katduyou-rei {
  margin: 0px auto 30px;
  background-color: rgba(222, 222, 222, 0.4);
  padding: 30px;
  text-align: left;
  border-radius: 5px;
}

.accordion-title {
  margin: 10px auto;
  font-size: 2rem;
  border-bottom: solid #E7F07B;
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px; /* 矢印とタイトルの間隔 */
  
}
.accordion-title h1{
	color: #fff;
}

/* ホバー時の色変化 */
.accordion-title h1:hover {
  color: #E7F07B;
}

/* 矢印アイコンのスタイル */
.arrow {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  padding: 0;
}

.accordion-content.open {
  padding: 10px 0;
}

/* 矢印を上向きにする */
.accordion-title.open .arrow {
  transform: rotate(120deg);
}

.katduyou-rei h1 {
  font-size: 2rem;
  margin: 0;
}

.katduyou-rei h2 {
  margin-top: 15px;
  font-size: 1.5rem;
  color: #E7F07B;
}

.katduyou-rei p {
  font-size: 1.2rem;
  line-height: 1.6;
}




/*運用に関して弊社が行うこと*/

.running ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	width: 80%;
	margin: 0 auto;
}
.running li{
	text-align: center;
	font-weight: 600;
	width: 45%;
	padding: 7px 10px;
	border-radius: 15px;
	 background-image: linear-gradient(300deg, rgba(89, 173, 241, 1), rgba(74, 124, 246, 1) 94%);
}

.copy-text{
	margin-top: 80px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 2rem;
	line-height: 4rem;
}
@media screen and (max-width: 800px){
	.running li{
		width: 90%;
	}	
	
	.copy-text{
		font-size: 1.5rem;
		width: 80%;
		text-align: center;
		margin: 50px auto;
		line-height: 3.5rem;
		
	}
}