@charset "UTF-8";

.FV-mock{
background-size:cover;
background-position: center bottom;
background-image:url(../../img/user/fv_back_pc.png);
background-repeat: no-repeat;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}

.index-area{
	max-width: 960px;
	display: flex;
	text-align: center;

}

.index-top{
	text-align: left;
	max-width: 500px;
	margin: 0 auto;
}

h1.index-h1{
	text-align: left;
	font-size: 35px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
	padding-left: .5rem;
}
h1.index-h1 p{
	font-size: 2em;
	font-weight: bold;
	line-height: 1.3;
	margin-left:-.5rem ;
}
/* 文字の上に点 */
span.t-dots{
	background-image: radial-gradient(circle at center, #fff 12%, transparent 12%); /* 点の色とサイズ調整 */
background-position: top right; /* 点の位置 */
background-repeat: repeat-x; /* 横方向に繰り返し */
background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
padding-top: .4em; /* 縦方向の位置調整 */
}

.my-link-create{
padding: 1rem 1rem;
border: 1px solid #dee2e6;
border-radius: 50px;
text-align: center;
display: inline-block;
background: #fff;

}
.my-link-create p{
	display: inline-block;
	font-size: 1.5rem;
	vertical-align: top;
}
.my-link-create i{
	font-size: 2.5rem;
	color: #9f21a3;
	vertical-align: bottom;
}
.my-link-create .form-control{
	border:none;
	display: inline-block;
	padding: 0;
	width: auto;
	font-size: 1.5rem;
	height: auto;
	vertical-align: top;

}
.form-control:focus{
	box-shadow: none;
}

.mock{
	text-align: center;
	margin:0 auto;
}
h2{
	padding-top:3rem;
}
.change-style{
	padding-right: 2px;
}
.change-style img{
	border-radius: 8px;
	margin :1rem 0;
	box-shadow: 0 0 2px 0px rgb(131 136 136 / 47%);
}
/****ここからレスポンシブcss*****/
@media screen and (max-width: 860px){
.index-area{
	display:block;
}
.FV-mock{
background-image:url(../../img/user/fv_back_sp.png);
padding-bottom: 2rem;
padding-top:1rem;
background-position: center center;
}
.index-top{
	margin-bottom: 2rem;
}
}
@media screen and (max-width: 575px){
	.index{
		padding: 0 15px;
	}
	.question, .answer{
		padding: 0;
	}
}
@media screen and (max-width: 640px){
.my-link-create{
padding: 1rem ;
width: 100%;
text-align: left;
}
.my-link-create i{
	font-size: 2.3rem;
	float: right;
}
.my-link-create .form-control{
	text-align: left;
	width: 130px;
	font-size: 1.2rem;
}
.my-link-create p{
	font-size: 1.2rem;
}

h1.index-h1{
	text-align: left;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
	padding-left: .5rem;
}

}
@media screen and (max-width: 400px){
h1.index-h1{
	font-size: 24px;
}
}

@media screen and (max-width: 330px){
.my-link-create .form-control{
	width: 120px;
}
h1.index-h1{
	font-size: 21px;
}
}