@charset "UTF-8";

/* CSS Document */
:root {
	--background:linear-gradient(90deg, rgb(179,209,52), rgb(87,196,230));
	--bgallow:linear-gradient(90deg, rgb(139,204,139), rgb(134,203,142));
    --white: #FFF;
    --black: #4a5568;
    --yellow: #ffff00;
	--red:#f9142d;
	--green:#4abfaa;
}

@font-face {
  font-family: "flower";
  src:
    local("flower"),
    url("../fonts/flower.ttf") format("opentype") tech(color-COLRv1),
}
@font-face {
  font-family: "TimesNewRomanMTStd";
  src:
    local("TimesNewRomanMTStd"),
    url("../fonts/TimesNewRomanMTStd.otf") format("opentype") tech(color-COLRv1),
}

/* レスポンシブ */
@media (min-width: 429px){
	.pc{
		display:inline!important;
	}
	.sp{
		display:none!important;
	}	
}
@media (max-width: 428px){
	.pc{
		display:none!important;
	}
	.sp{
		display:inline!important;
	}	
}

/* font */
.w100	 {
	font-weight:100;
	}
 
.w300	 {
	font-weight:300;
	}
 
.w400	 {
	font-weight:400;
	}
 
.w500	 {
	font-weight:500;
	}
 
.w600	 {
	font-weight:600;
	}
 
.w700	 {
	font-weight:700;
	}
 
.w900	 {
	font-weight:900;
	}

h2{
	font-size:32px;
	text-align:center;
	line-height:1.2;
	letter-spacing:.1em;
}
h3{
	font-size:24px;
}

strong{
	font-size:1.8em;
}
.caption-text{
	text-align:center;
}

img{
	display:block;
	vertical-align: middle;
}

ul{
	list-style:none;
	padding:0;
}

@media (max-width: 428px){
	h2{
		font-size:20px;
	}
	strong{
		font-size:1.1em;
	}
}

/* html */

html,body{
	margin:0;
	padding:0;
}

body{
	font-family:'Montserrat', 'Noto Sans JP', sans-serif;
	font-size:18px;
	font-weight:400;
	color:var(--black);
	line-height:1.6;
}

img{
	max-width:100%;
}

section{
	width:100%;
	padding:40px 0;
}
section .content{
	max-width: 1000px;
	width:100%;
	margin:auto;
}

@media (max-width: 428px){
	html, body{
		width:100%;
	}
	body{
		font-size:16px;
		width:100%;
	}
		section .content{
			max-width: 428px;
			width:calc(100% - 40px);
			margin:auto;
			padding-right:10px;
			padding-left:10px;
			overflow-x: hidden;
		}
}


/* ファーストビュー */

section.hero{
	position:relative;
	overflow:hidden; 
	background: var(--background);
}
	section.hero .content{
		display:flex;
		align-items: center;
		height:700px;
	}
		section.hero .content::before{
			content:"";
			position:absolute;
			top:0;
			right:-10%;
			background:url("../images/dra-images/hero_bg.png") no-repeat;
			background-position:right;
			background-size:auto 100%;
			width:100%;
			height:780px;
			z-index:1;
		}
		section.hero .content::after{
			content:"";
			position:absolute;
			top:10%;
			right:-10%;
			background:url("../images/dra-images/hero_image.png") no-repeat;
			background-position:right;
			background-size:cover;
			width:820px;
			height:466px;
			z-index: 2;
		}
	section.hero .content .hero_text{
		z-index:3;

	}
		section.hero .content .hero_text img{
			max-width:720px;
		}
@media (max-width: 428px){
	section.hero .content{
		overflow-x: hidden;
		align-items:flex-start;
		height:570px;
		padding-top:80px;
	}
		section.hero .content::before{
			height:650px;
		}
		section.hero .content::after{
			top:auto;
			right:-20%;
			bottom:60px;
			width:428px;
			height:243px;
		}
			section.hero .content .hero_text{
				width:100%;
			}
				section.hero .content .hero_text img{
					max-width:100%;
				}
}

/* こんなお悩みはありませんか？ */

section.problems{
	z-index:0;
	position:relative;
	color:var(--white);
	height:590px;
}
	section.problems::before{
		content:"";
		position:absolute;
		top:0;
		background:url("../images/dra-images/problems_bg.png") no-repeat;
		background-position:center;
		background-size:auto 100%;	
		width:100%;
		height:670px;
		z-index:-1;
	}
	section.problems .content{
		display:flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height:100%;
		z-index:1;
	}
		section.problems .content h2{
			text-align:center;
		}
		section.problems .content ul{
			width:fit-content;
			margin:40px auto;
		}
			section.problems .content ul li{
				background:url(../images/dra-images/problems_mark.png) no-repeat 0 0;
				background-size:auto 20px;
				padding-left: 30px;
				margin:15px 0;
			}

@media (max-width: 428px){
	section.problems .content ul li{
		background-position: 0 50%;
	}
}

/* 全て解決できます！ */

section.solution{
	position:relative;
	background: var(--background);
	color:var(--white);
	margin-top:0;
    padding-top: 100px;
	z-index:-1;
}
	section.solution .content p{
		vertical-align: middle;
		text-align:center;
	}
		section.solution .content p img.logo{
			display:inline-block;
			width:280px;
			margin-right:5px;
		}
			section.solution .content p strong span{
				color:var(--yellow);
			}

/* Deep Research Agentが選ばれる3つの理由 */
section.reason{
	position:relative;
	background: var(--white);
	color: var(--black);
	overflow-y: hidden;
	z-index:0;
}
	section.reason::before{
		content:"";
		position:absolute;
		top:0;
		right:-10%;
		background:url("../images/dra-images/white_bg.png") no-repeat;
		background-position:right;
		background-size:auto 100%;
		width:100%;
		height:100%;
		z-index:1;
	}
	section.reason::after{
		content:"";
		position: absolute;
		top:-25px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		background: var(--bgallow);
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		width:50px;
		height:50px;
		margin:auto;
		z-index:1;
	}

	section.reason .content{
		z-index:2;
		position:relative;
	}
		section.reason .content h2 strong span{
			color: var(--red);
		}
		section.reason .content ul{
			position:relative;
			display:flex;
			justify-content: center;
			align-items: stretch;
			margin-top:120px;
			padding:0;
		}
			section.reason .content ul::before{
				content:"";
				position:absolute;
				top:-65px;
				border: var(--green) 1px solid;
				border-bottom:none;
				border-radius:10px;
				width:calc(100% - 100% / 3);
				height:80px;
			}
				section.reason .content ul li{
					position:relative;
					border: var(--green) 1px solid;
					border-radius:10px;
					background-color: var(--white);
					width:calc(100% / 3 - 20px);
					margin:0 10px;
					padding:0;
				}
						section.reason .content ul li::before{
							content:"";
							position:absolute;
							top:-60px;
							left: 50%;
							transform: translateX(-50%);
							-webkit-transform: translateX(-50%);
							-ms-transform: translateX(-50%);
							background:var(--green);
							width:1px;
							height:60px;
						}
							section.reason .content ul li:nth-child(2)::before{
								top:-120px;
								height:120px;
							}
					section.reason .content ul li dt{
						position:relative;
						border-radius:10px 10px 0 0;
						background: var(--background);
						color: var(--white);
						padding:20px 0;
						overflow:hidden;
					}
						section.reason .content ul li dt::before{
							content:"";
							position:absolute;
							top:-20%;
							right:0;
							width:120px;
							height:300px;

						}
							section.reason .content ul li:nth-child(1) dt::before{
								background:url("../images/dra-images/reson_list01.png") no-repeat;
								background-size:100% auto;
							}
							section.reason .content ul li:nth-child(2) dt::before{
								background:url("../images/dra-images/reson_list02.png") no-repeat;
								background-size:100% auto;
							}
							section.reason .content ul li:nth-child(3) dt::before{
								background:url("../images/dra-images/reson_list03.png") no-repeat;
								background-size:100% auto;
							}
						section.reason .content ul li dt h3{
							line-height:1.4;
							text-align:center;
							text-shadow:0 0 5px #555;
							margin:0;
						}
						section.reason .content ul li dt h3 span{
							font-family:"flower";
							font-size:.5em;
							color:var(--red);
							text-shadow:none;
						}
					section.reason .content ul li dd{
						text-align:center;
					}

@media (max-width: 428px){
	section.reason .content ul{
		flex-direction: column;
		margin-top:20px;
	}
		section.reason .content ul li{
			width:100%;
			margin:20px auto;
		}
			section.reason .content ul li::before, section.reason .content ul::before{
				display:none;
			}
}

/* CTA */
section.cta{
	color:var(--white);
}
	section.cta strong{
		font-size:1.2em;
	}

	section.cta .cta-content{
		background:var(--background);
		border-radius:10px;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		align-items:center;
		padding:20px;
	}

		section.cta .cta-btn{
			display:flex;
			justify-content: center;
			align-items:stretch;
			width:100%;
		}
			section.cta .cta-btn a{
				position:relative;
				display:block;
				background: var(--white);
				border-radius:10px;
				box-shadow:0 0 5px #555;
				color: var(--black);
				font-size:1.4em;
				text-align:center;
				text-decoration: none;
				width:calc(100% / 2 - 40px);
				margin:10px;
				padding:20px;
			}
				section.cta .cta-btn a img{
					width:auto;
					height:30px;
					margin:0 auto;
				}
					section.cta .cta-btn a::after{
						content:"";
						position:absolute;
						top: 0;
						right:10px;
						bottom: 0;
						background:url(../images/dra-images/btn_arrow.png) no-repeat;
						background-size:cover;
						width:7px;
						height:14px;
						margin: auto 0;
					}
		section.cta .cta-tel{
			display:flex;
			justify-content: center;
			align-items:center;
			width:100%;
		}
			section.cta .cta-tel div{
				display:block;
				margin:10px;
				padding:20px;
			}
				section.cta .cta-tel div img{
					width:auto;
					height:55px;
				}
@media (max-width: 428px){
	section.cta .cta-btn{
		flex-direction: column;
		align-items: center;
	}
		section.cta .cta-content{
			padding:10px;
		}
			section.cta .cta-btn a{
				font-size:1.2em;
				width:calc(100% - 60px);
			}
				section.cta .cta-btn a img.telicon{
					display:inline-block;
				}
	section.cta .cta-tel{
		display:none;
	}
}

/* Deep Research Agentとは？ */
section.about{
	background:url("../images/dra-images/about_bg.png") no-repeat;
	background-size:cover;
	color:var(--white);
}
	section.about .content h2 strong span{
		color:var(--yellow);
	}
	section.about .content .about-flow{
		text-align:center;
	}
		section.about .content .about-flow h3{
			display:inline-block;
			border:1px solid var(--white);
			border-radius:16px;
			font-size:.9em;
			margin-bottom:40px;
			padding:5px 10px;
		}
	section.about .content .about-flow ul li{
		margin-bottom:40px;
	}
		section.about .content .about-flow ul li img{
			display:block;
			max-width:420px;
			margin:auto;
		}
		section.about .content .about-flow ul li .about-arrow{
			width:30px;
			height:auto;
		}

@media (max-width: 428px){
	section.about .content .about-flow h3{
		font-size:1em;
	}
		section.about .content .about-flow ul li img{
			max-width:100%;
		}
}

/* 3つの特長 */
section.merit{
	position:relative;
	background: var(--white);
	color: var(--black);
	overflow-y: hidden;
	z-index:0;
}
	section.merit::before{
		content:"";
		position:absolute;
		top:0;
		left:-10%;
		background:url("../images/dra-images/white_bg.png") no-repeat;
		background-position:right;
		background-size:auto 100%;
		width:100%;
		height:100%;
		z-index:1;
	}
	section.merit .content h2 strong span{
		font-family:'TimesNewRomanMTStd', sans-serif;
		color: var(--red);
	}

section.merit .content ul li dl{
	display:flex;
	align-items:center;
}

	section.merit .content ul li dl dt{
		max-width:240px;
	}
		section.merit .content ul li dl dt img{
			width:100%;
		}
section.merit .content ul li dl dd{
	position:relative;
	padding-left:100px;
}
	section.merit .content ul li dl dd::before{
		content:"";
		position:absolute;
		left:0;
		font-family:'TimesNewRomanMTStd', sans-serif;
		font-size:150px;
		color: var(--red);

	}
	section.merit .content ul li:nth-child(1) dl dd::before{
		content:"1";
	}
	section.merit .content ul li:nth-child(2) dl dd::before{
		content:"2";
	}
	section.merit .content ul li:nth-child(3) dl dd::before{
		content:"3";
	}

@media (max-width: 428px){
	section.merit::before{
		left:0;
	}
		section.merit .content ul li dl{
			flex-direction: column;
		}
		section.merit .content ul li dl dd{
			display:flex;
			flex-direction: column;
			width;100%;
			margin:0;
			padding-left:0;
		}
			section.merit .content ul li dl dd::before{
				right:auto;
				left:auto;
				font-size:100px;
				text-align:center;
				width:100%;
			}
			section.merit .content ul li dl dd h3{
				text-align:center;
				margin-top:120px;
			}
}

/* ここがすごい */
section.great{
	background:url("../images/dra-images/great_bg.png") no-repeat;
	background-size:cover;
	color:var(--white);
}
	section.great .content h2{
		text-shadow:0 0 5px #5edb9c;
	}
	section.great .content ul{
		display:flex;
		justify-content: space-between;
		width:100%;
		flex-wrap: wrap;
	}
		section.great .content ul li{
			border-radius:10px;
			background:var(--white);
			box-shadow:0 0 5px #555;
			color:var(--black);
			width:calc(100% / 2 - 60px);
			margin:10px;
			padding:20px;
		}
			section.great .content ul li h3{
				text-align:center;
			}
				section.great .content ul li h3 span{
					color:var(--red);
				}
			section.great .content ul li p{
				text-align:center;
			}
			section.great .content ul li img{
				display:block;
				max-width:240px;
				margin:auto;
			}
				section.great .content ul li:nth-child(2) img{
					max-width:100%;
					width:100%;
				}

@media (max-width: 428px){
	section.great{
		background-position:bottom;
	}
	section.great .content ul{
		flex-direction: column;
		align-items: center;
	}
		section.great .content ul li{
			width:calc(100% - 30px);
		}
}

/* 活用例 */
section.utilize{
	background:url("../images/dra-images/utilize_bg.png") no-repeat;
	background-size:cover;
}
	section.utilize h2 img{
		display:block;
		width:200px;
		height:auto;
		margin:0 auto 20px auto;
	}
	section.utilize ul{
		display:flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
		section.utilize ul li{
			width:calc(100% / 2 - 50px);
			margin:10px;
			padding:0;
		}
			section.utilize ul li h3{
				font-weight:400;
				text-align:center;
				margin-bottom:0;
			}
				section.utilize ul li h3 span{
					font-family:'TimesNewRomanMTStd', sans-serif;
					color:var(--red);
				}
			section.utilize ul li img{
				width:100%;
				height:240px;
				object-fit: cover;
			}
		section.utilize ul li .utilize_text{
			position:relative;
			border-radius:0 0 10px 10px;
			box-shadow:0 0 5px #555;
			background:var(--white);
			width:100%;
		}
		section.utilize ul li .utilize_text h4{
			position:absolute;
			top:-30px;
			left:0;
			background:var(--white);
			width:40%;
			height:30px;
			padding:10px;
		}
			section.utilize ul li .utilize_text h4::after{
				content:"";
				position:absolute;
				top:0;
				right:-15px;
				border-radius:0 100px 0 0;
				background:var(--white);
				width:10px;
				height:30px;
				padding:10px;
			}
					section.utilize ul li .utilize_text h4 img{
						width:auto;
						height:30px;
					}
		section.utilize ul li .utilize_text h5{
			line-height:1.4;
			margin:0;
			padding:20px 0 0 20px;
		}
			section.utilize ul li .utilize_text h5 strong{
				font-weight:500;
			}
				section.utilize ul li .utilize_text h5 strong span{
					color:var(--red);
				}
		section.utilize ul li ul, section.utilize ul li ul li{
			width:100%;
			margin:0;
		}
			section.utilize ul li ul{
				width:100%;
				padding:10px 0 20px 20px;
			}
				section.utilize ul li ul li{
					background: url("../images/dra-images/utilize_check.png") no-repeat 0 5px;
					background-size: auto 15px;
					box-shadow:none;
					font-size:.8em;
					width:calc(100% - 10px);
					padding-left: 30px;
					margin:0 0 10px 0;
				}
@media (max-width: 428px){
	section.utilize ul{
		flex-direction: column;
		align-items: center;
	}
		section.utilize ul li{
			width:calc(100% - 20px);
	}
		section.utilize ul li h3 span{
			font-size:1.8em;
		}
		section.utilize ul li .utilize_text h4{
			width:50%;
		}
			section.utilize ul li .utilize_text h4::after{
			}
				section.utilize ul li ul{
					padding:10px;
				}
		section.utilize ul li .utilize_text h5{
			font-size:1.2em;
		}
}