@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
}

.wrapper{
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.wrapper img{
	display: block;
	line-height: 0;
}

.helvetica{
	font-family: "helvetica-neue-lt-pro-cond", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.top{
	width: 90%;
	margin: 15% auto;
}

.top h1{
	text-align: center;
	font-size: 17px;
	line-height: 1.8;
	font-weight: 600;
}

.top p{
	text-align: center;
	font-size: 13px;
	line-height: 2;
	margin: 10% auto;
}

.move-wrap{
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 2% 0 15%;
	column-gap: 10px;
}

.slideshow{
	display: flex;
	column-gap: 10px;
    animation: loop-slide 25s infinite linear 1s both;
}

.slide_content{
	width: 160px;
}

.slide_content img{
	border-radius: 0px;
	box-sizing: border-box;
	/*border: solid 1px #000;*/
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.content{
	margin: 15% auto 5%;
}

.box{
	width: 90%;
	margin: 0 auto 25%;
}

.box_last{
	width: 90%;
	margin: 0 auto 15%;
}

.title{
	text-align: center;
	font-size: 28px;
	margin: 0 auto 5%;
}

.no1:before{
	content: '';
	display: inline-block;
	width: 65px;
	height: 65px;
	background-image: url('../images/no1.jpg');
	background-size: cover;
}

.no2:before{
	content: '';
	display: inline-block;
	width: 65px;
	height: 65px;
	background-image: url('../images/no2.jpg');
	background-size: cover;
}

.no3:before{
	content: '';
	display: inline-block;
	width: 65px;
	height: 65px;
	background-image: url('../images/no3.jpg');
	background-size: cover;
}

.no4:before{
	content: '';
	display: inline-block;
	width: 65px;
	height: 65px;
	background-image: url('../images/no4.jpg');
	background-size: cover;
}

.no5:before{
	content: '';
	display: inline-block;
	width: 65px;
	height: 65px;
	background-image: url('../images/no5.jpg');
	background-size: cover;
}

.title p{
	font-size: 13px;
	font-weight: normal;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.title p:after{
	content: 'tax in';
	font-size: 10px;
	margin-left: 3px;
}

.box a{	
	display: block;	
	width: 30%;	
	margin: 0 auto 10%;
	text-align: center;
	background-color: #000;	
	color: #fff;	
	font-size: 16px;	
	line-height: 1.8;
	text-decoration: none;
	position: relative;
}
.box a:after{	
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

.box h1{
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.8;
	margin: 2% auto;
}

.box h2{
	text-align: center;
	font-weight: normal;
	font-size: 24px;
	margin: 10% auto;
}

.box h2 span{
	background-color: #F3F4EC;
	padding: 2% 5%;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
}


.point_area{
	width:fit-content;
	margin: 5% auto 10%;
}

.point{
	margin-bottom: 5%;
}

.point p{
	font-size: 16px;
	line-height: 1.7;
	display: inline-block;
	position: relative;
	padding-left: 40px;
	margin: 3% 0;
}

.point p:before{
	content: '';
	display: inline-block;
	width: 35px;
	height: 35px;
	background-image: url("https://www.dot-st.com/static/docs/elura/keyword/250704_ase/images/icon.png");
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}

.item{
	margin: 0 auto;
	position: relative;
	background-color: #EFEFF7;
}

.item_img{
	width: 70%;
	margin-left: 30%;
}

.item p{
	font-size: 11px;
	line-height: 1.8;
	margin: 5% 0;
}

.coment1{
	position: absolute;
	left: 5%;
	top: 13%;
}
.coment1{
	position: absolute;
	left: 5%;
	top: 13%;
}

.coment1:before{
	content: "";
	position: absolute;
	bottom: 0; /* 親要素（.text-box）の中央に配置 */
	left: 0;
	width: 185px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
}

.coment2{
	position: absolute;
	left: 5%;
	top: 35%;
}

.coment2:before{
	content: "";
	position: absolute;
	bottom: 0; /* 親要素（.text-box）の中央に配置 */
	left: 0;
	width: 194px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
}

.coment3{
	position: absolute;
	left: 5%;
	top: 53%;
}

.coment3:before{
	content: "";
	position: absolute;
	bottom: 0; /* 親要素（.text-box）の中央に配置 */
	left: 0;
	width: 190px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
}

.coment4{
	position: absolute;
	left: 5%;
	top: 80%;
}

.coment4:before{
	content: "";
	position: absolute;
	bottom: 0; /* 親要素（.text-box）の中央に配置 */
	left: 0;
	width: 200px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
}

.style {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 8px;
	grid-row-gap: 8px;
	margin: 2% auto 10%;
}

.style1{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
	box-sizing: border-box;
	padding-right: 1px;
}

.title .font16{
	font-size: 16px;
}

.title .font16:after{
	content: 'tax in';
	font-size: 13px;
	margin-left: 6px;
}

.coment2_1{
}

.coment2_1:before{
	width: 164px; /* 線の長さ */
}

.coment2_1:after{
	content: "";
	position: absolute;
	bottom: 23px; /* 親要素（.text-box）の中央に配置 */
	left: 150px;
	width: 57px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
	transform: rotate(125deg);
}

.coment2_2{
	top: 38%;
}

.coment2_2:before{
	width: 200px; /* 線の長さ */
}

.coment2_3{
	top: 70%;
}

.coment2_3:before{
	width: 126px; /* 線の長さ */
}

.coment3_1{
	top: 9%;
}

.coment3_1:before{
	width: 157px; /* 線の長さ */
}

.coment3_1:after{
	content: "";
	position: absolute;
	bottom: 23px; /* 親要素（.text-box）の中央に配置 */
	left: 144px;
	width: 57px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
	transform: rotate(125deg);
}

.coment3_2{
	top: 38%;
}

.coment3_2:before{
	width: 200px; /* 線の長さ */
}

.coment3_3{
	top: 70%;
}

.coment3_3:before{
	width: 180px; /* 線の長さ */
}

.coment4_1{
	top: 9%;
}

.coment4_1:before{
	width: 155px; /* 線の長さ */
}

.coment4_1:after{
	content: "";
	position: absolute;
	bottom: 23px; /* 親要素（.text-box）の中央に配置 */
	left: 142px;
	width: 57px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
	transform: rotate(125deg);
}

.coment4_2{
	top: 38%;
}

.coment4_2:before{
	width: 190px; /* 線の長さ */
}

.coment4_3{
	top: 70%;
}

.coment4_3:before{
	width: 200px; /* 線の長さ */
}

.coment5_1{
}

.coment5_1:before{
}

.coment5_2{
	top: 38%;
}

.coment5_2:before{
	width: 220px; /* 線の長さ */
}

.coment5_3{
	top: 70%;
}

.coment5_3:before{
	width: 200px; /* 線の長さ */
}

.all{	
	display: block;	
	width: 80%;	
	margin: 10% auto 20%;
	text-align: center;
	background-color: #000;	
	color: #fff;	
	font-size: 20px;	
	font-weight: 600;	
	line-height: 2.6;
	text-decoration: none;
	position: relative;
}
.all:after{	
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

@media(min-width:750px){

.top{
	width: 100%;
	margin: 15% auto;
}

.top h1{
	font-size: 20px;
	line-height: 2;
}

.top p{
	font-size: 15px;
	line-height: 2;
}

.move-wrap{
	margin: 2% 0 20%;
}

.slide_content{
	width: 190px;
}

.title{
	font-size: 40px;
	white-space: nowrap;
}

.no1:before, .no2:before, .no3:before, .no4:before, .no5:before{
	width: 80px;
	height: 80px;
}

.title p{
	font-size: 15px;
}

.title p:after{
	font-size: 13px;
	margin-left: 5px;
}



.item p{
	font-size: 13px;
	line-height: 1.8;
	margin: 5% 0;
}

.coment1:before{
	width: 270px; /* 線の長さ */
}

.coment2:before{
	width: 310px; /* 線の長さ */
}

.coment3:before{
	width: 260px; /* 線の長さ */
}

.coment4:before{
	width: 290px; /* 線の長さ */
}


.coment2_1:before{
	width: 210px; /* 線の長さ */
}

.coment2_1:after{
	bottom: 33px; /* 親要素（.text-box）の中央に配置 */
	left: 197px;
	width: 90px; /* 線の長さ */
	transform: rotate(135deg);
}

.coment2_2:before{
	width: 250px; /* 線の長さ */
}

.coment2_3:before{
	width: 206px; /* 線の長さ */
}

.coment3_1:before{
	width: 200px; /* 線の長さ */
}

.coment3_1:after{
	content: "";
	position: absolute;
	bottom: 25px; /* 親要素（.text-box）の中央に配置 */
	left: 190px;
	width: 88px; /* 線の長さ */
	height: 1px; /* 線の太さ */
	background-color: black;
	transform: translateY(-50%); /* 縦方向の中央揃え */
	transform: rotate(146deg);
}

.coment3_2:before{
	width: 230px; /* 線の長さ */
}

.coment3_3:before{
	width: 220px; /* 線の長さ */
}

.coment4_1:before{
	width: 200px; /* 線の長さ */
}

.coment4_1:after{
	bottom: 24px; /* 親要素（.text-box）の中央に配置 */
	left: 190px;
	width: 85px; /* 線の長さ */
	transform: rotate(146deg);
}

.coment4_2:before{
	width: 260px; /* 線の長さ */
}

.coment4_3:before{
	width: 250px; /* 線の長さ */
}

.coment5_2:before{
	width: 250px; /* 線の長さ */
}

.coment5_3:before{
	width: 240px; /* 線の長さ */
}

.all{	
	display: block;	
	width: 70%;	
	margin: 10% auto 20%;
	text-align: center;
	background-color: #000;	
	color: #fff;	
	font-size: 20px;	
	font-weight: 600;	
	line-height: 2.6;
	text-decoration: none;
	position: relative;
}
.all:after{	
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}
}