@charset "utf-8";

a{
	text-decoration: none;
	transition: .5s all;
}

ul li{
	list-style: none;
}

body{
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" ,  Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ;
	font-size: 15px;
	margin: 0;
	padding: 0;
}

p,h1,h2,h3,h4,h5,h6,a{
	margin-top: 0;
	margin-bottom: 0;
	font-family: 'Noto Sans JP', sans-serif, "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" ,  Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" ;
}

:root{
	--white: #fff;
	--grey: #EDEDF5;
	--grad: linear-gradient(90deg, #4798f5 0%, #8891ff 39.41%, #c088ff 63.55%, #ff8dba 100%);
	--blue: #1D2088;
}

/* ====================================================================================== SPレイアウト */

/* --------------------------------------------------------------- 共通*/

.sp-only{
	display: block;
}

.pc-only{
	display: none;
}

section{
	padding: 80px 0;
}

.container{
	width: 90%;
	margin: 0 auto;
}

h2{
	font-size: 28px;
	margin-bottom: 40px;
	text-align: center;
}


/* --------------------------------------------------------------- FV*/

.fv{
	background-image: url(../img/bg_fvSP.png);
	background-size: cover;
	background-position: center;
	color: var(--white);
	text-align: center;
}

.headerLogo{
	position: absolute;
	top: 20px;
	left: 18px;
}

.headerLogo__img{
	width: 120px;
}

.fvHeading{
	font-size: 26px;
	position: relative;
	margin-bottom: 60px;
	letter-spacing: 0.1em;
}

.fvHeading::before{
	position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    content: attr(data-en);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;

}

.cardDesign{
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: clamp(200px, 90%, 400px);
	aspect-ratio: 1.618 / 1;
	margin: 0 auto 48px;
	background: rgba(255, 255, 255, 0.25); /* 透明背景色 */
	border-radius: 20px; /* 角丸 */
	-webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 影 */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 影 */
	-webkit-backdrop-filter: blur(5px); /* ぼかし */
	backdrop-filter: blur(5px); /* ぼかし */
	border: 1.5px solid rgba(255, 255, 255, 0.25); /* ボーダー */
}

.cardDesignText{
	font-family: "roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 32px;
}

.descriptionUpper{
	text-align: left;
}

.fvHeading2{
	margin-bottom: 0;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
}

.descriptionUpper{
	margin-bottom: 40px;
}

.descriptionLower{
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.card{
	width: 100%;
	padding: 7px 0;
	background-color: var(--blue);
	border-radius: 10px;
	font-size: 14px;
}

.card h3{
	font-size: 18px;
}


/* ---------------------------------------------------------------リード */

.lead p{
	margin-bottom: 40px;
	text-align: center;
}

picture img{
    display: block;
	width: 100%;
	max-width: 1200px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------特徴 */

.merit{
	background-color: var(--grey);
}

.list_meritOuter{
	display: flex;
	flex-direction: column;
	row-gap: 12px;
}

.listCard{
	width: 100%;
	padding: 20px;
	background-color: var(--white);
	border-radius: 8px;
	font-size: 14px;
}

.listCard h3{
	display: flex;
	align-items: center;
	column-gap: 10px;
	margin-bottom: 10px;
	font-size: 17px;
}

.imgWrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1 / 1 ;
	height: 48px;
	width: 48px;
}

.listCard h3 img{
	object-fit: contain;
}

.list_meritInner li{
	position: relative;
	margin-left: 16px;
}

.list_meritInner li::before{
	content: "";
	position: absolute;
	top: 0.4rem;
    left: -15px;
    height: 10px;
    width: 10px;
	border-radius: 100%;
	background-color: var(--blue);
}

.btn_cv{
	display: flex;
	align-items: center;
	column-gap: 12px;
    width: fit-content;
	margin-top: 14px;
	padding: 4px 28px 6px;
	border-radius: 500px;
	color: var(--white);
	background-image: var(--grad);
	transition: all ease 0.3s;
}

/* ホバーエフェクト */
.btn_cv:hover{
	opacity: 0.8;
	transition: all ease 0.3s;
}




/* ---------------------------------------------------------------基本情報 */

table{
	width: 100%;
	max-width: 1200px;
    margin: 0 auto;
}

table tr{
	display: flex;
	flex-direction: column;
}

table th{
	padding: 8px 0;
	color: var(--white);
	background-image: var(--grad);
	font-size: 16px;
	font-weight: 400;
}

table td{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px 10px;
	background-color: var(--grey);
}

table img{
	display: block;
	width: 24%;
	margin: 0 auto;
}

.small{
	color: #6A6A6A;
	font-size: 14px;
}

/* ---------------------------------------------------------------活用事例 */

.example{
	position: relative;
	padding-bottom: 200px;
	background-color: var(--grey);
}

.example .flexBox{
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
}

.list_example{
	display: flex;
	flex-direction: column;
	row-gap: 40px;
}

.item_example{
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: 0px 3px 11px rgba(39, 39, 108, 0.16);
}

.item_example img{
	width: 100%;
}

.example_text{
	padding: 20px;
}
.example_text h3{
	margin-bottom: 16px;
	font-size: 21px;
}

.cv{
	position: absolute;
    bottom: -10%;
	left: 50%;
	transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	row-gap: 10px;
    width: 90%;
	max-width: 1200px;
    padding: 40px 20px;
	border-radius: 10px;
    background-image: url(../img/bg.png);
    background-size: cover;
	background-position: center;
    text-align: center;
    color: var(--white);
	font-size: 14px;
}

.cv h3{
	font-size: 18px;
}

.cv em{
	font-style: normal;
	font-size: 32px;
	font-weight: 700;
}



/* ====================================================================================== TAB/PCレイアウト */

@media screen and (min-width:768px) {

	.pc-only{
		display: block;
	}

	.sp-only{
		display:none;
	}

	.flexBox{
		display: flex;
	}

	/* ---------------------------------------------------------------FV */


	.fv .flexBox{
		justify-content: center;
        column-gap: 40px;
	}

	.cardDesign{
		height: fit-content;
		width: clamp(200px, 36vw, 400px);
		margin: 0;
	}

	/* ---------------------------------------------------------------特徴 */

	.list_meritOuter{
		flex-direction: row;
		column-gap: 20px;
		flex-wrap: wrap;
		max-width: 1200px;
        margin: 0 auto;
	}

	.listCard{
		width: calc((100% - 20px) / 2);
	}
	
	
	/* ---------------------------------------------------------------基本情報 */

	table tr{
		flex-direction: row;
		border-bottom: 1px solid #DEDEDE;
	}

	table tr:last-child{
		border-bottom: 0;
	}


	table th{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20%;
	}

	table td{
		align-items: flex-start;
		width: 80%;
	}

	table img{
        height: 40px;
		width: auto;
		margin: 0 auto 0 0 ;
	}
	
	
	/* ---------------------------------------------------------------活用事例 */
	
	.list_example{
		flex-direction: row;
		column-gap: 40px;
	}

	.item_example{
		width: calc((100% - 40px) / 2);
	}

	.cv{
		bottom: -16%;
	}
	
}


/* ====================================================================================== PCレイアウト */

@media screen and (min-width:960px) {


	/* ---------------------------------------------------------------FV */

	.fv{
		background-image: url(../img/bg_fvPC.png);
		background-position: center;
	}

	.headerLogo{
		top: 40px;
		left: 40px;
	}

	.fvHeading{
		font-size: 50px;
	}

	.fvHeading::before{
		font-size: 14px;
	}

	.fv .flexBox{
		justify-content: center;
		column-gap: 40px;
	}

	.descriptionUpper{
		font-size: 16px;
	}

	.fvHeading2{
		font-size: clamp(28px, 2.5vw, 40px);
	}

	.cardDesign {
		padding: 20px 20px;
		height: fit-content;
		width: clamp(200px, 33vw, 400px);
		max-width: 390px;
		margin: 0;
	}

	.descriptionLower{
		flex-direction: row;
		column-gap: 8px;
		word-break: keep-all;
	}

	.card{
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20px 0;
	}
	
}



/*--------------------------------------------------------------------
footer
--------------------------------------------------------------------*/
footer {
	background: #292929;
	color: #fff;
	padding: 190px 0 48px;
  }
  @media screen and (min-width: 768px) {
	footer {
	  padding: 265px 0 60px;
	}
  }
  footer .footermenu {
	padding: 0 7%;
  }
  @media screen and (min-width: 1025px) {
	footer .footermenu {
	  padding: 0;
	  max-width: 1000px;
	  margin: 0 auto;
	}
  }
  footer .footermenu .footermenu__footerlists {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
	padding-bottom: 48px;
	border-bottom: 1px solid #7d7d7d;
  }
  @media screen and (min-width: 768px) {
	footer .footermenu .footermenu__footerlists {
	  margin-bottom: 60px;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-around;
	}
  }
  footer .footermenu a {
	color: #fff;
	font-size: 12px;
  }
  footer .footermenu .footermenu__footer-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 48px;
  }
  @media screen and (min-width: 768px) {
	footer .footermenu .footermenu__footer-logo {
	  margin-top: 60px;
	}
  }
  footer .footermenu .footermenu__footer-logo .footermenu__footer-logo--img {
	width: 180px;
  }
  footer .footermenu .footermenu__footer-logo .footermenu__footer-logo--copyright {
	font-size: 10px;
	margin-top: 12px;
  }
  
  /*# sourceMappingURL=style.css.map */