@charset "utf-8";

#helpful_tips-index h3{font-size: 16px; line-height: 160%;letter-spacing: 0.1em; color: #fff;}
#helpful_tips-index h3 span{font-size: 48px; font-family: 'Noto-Sans-JP-Bold';display: inline-block; padding: 0 0 10px;}

.helpful_tips_inner{margin: 0 auto; max-width: 1300px; padding: 0 50px;}
.bg_white{background: #FFFFFF; border-radius: 95px;}
/*------------------------------ #helpful_tips ------------------------------*/
#helpful_tips .content{ padding: 66px 0 0;}
#helpful_tips .content h3{font-size: 16px; color: #2952A7; font-family: poppins, sans-serif; font-weight: 600; font-style: normal; line-height: 160%;}
#helpful_tips .content h3 span{font-size: 36px; font-family: 'Noto-Sans-JP-Medium'; line-height: 160%;}
#helpful_tips .content .flex{display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 37px 0 0;}
#helpful_tips .content .flex .box{width: 380px; height: auto; position: relative; margin-right: calc( ( 100% - ( 380px * 3 ) ) / 2 );}
#helpful_tips .content .flex .box:nth-of-type(3n) { margin-right: 0;}

#helpful_tips .content .flex .box:before{ width: 105%; height: 105%; border-radius: 30px; content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(181,207,255,0.3); transition: 0.5s; opacity: 0;}
#helpful_tips .content .flex .box.thumb-hover:before{transition: 0.5s; opacity: 1;}

#helpful_tips .content .flex .box a{position: relative;}

#helpful_tips .content .flex .empty { width: 100%; text-align: center;}

#helpful_tips .content .flex .box p.tt{padding: 0 22px 20px; height: auto; letter-spacing: 0.05em; line-height: 160%; font-size: 20px;}
#helpful_tips .content .flex .box a .img_box{border-radius: 15px; margin: 20px 0 0; overflow: hidden;}
#helpful_tips .content .flex .box a .img_box img{width: 100%; height: auto;}
#helpful_tips .content .flex .box .data_box{padding:18px 22px 0px;}
#helpful_tips .content .flex .box .data_box p.data{letter-spacing: 0.05em; font-size: 14px; border-bottom: 1px solid #D0D0D0; padding: 0 0 20px;}
#helpful_tips .content .flex .box .data_box p.data span{letter-spacing: 0.05em; font-size: 14px; color: #2952A7; display: inline-block; margin: 0 0 0 20px;}
#helpful_tips .content .flex .box .tag_box{display: flex; flex-wrap: wrap; padding: 16px 0 0;}
#helpful_tips .content .flex .box .tag_box li{border: 1px solid #D0D0D0; border-radius: 1000px; letter-spacing: 0.05em; font-size: 14px; line-height: 140%; padding: 10px 21px 11px; margin-bottom: 6px;}
#helpful_tips .content .flex .box .tag_box li:not(:last-child){margin-right: 6px;}
#helpful_tips .content .btn{position: relative; margin: 0 0 48px; }
#helpful_tips .content .btn a{display: block; width: 269px; margin: 76px auto 0; background: #2755B2; border-radius: 31px; font-size: 18px; text-align: center; color: #fff;line-height: 150%;transition: all 0.5s ease-out; padding: 17px 0 18px; position: relative; z-index: 1;}
#helpful_tips .content:not(:last-child) .bdr_bottom{border-bottom: 1px solid #D0D0D0;}
#helpful_tips .content .btn.btn_bgblue a { background: #2755B2;}
#helpful_tips .content .btn.btn_bgred a { background: red;}
#helpful_tips .content .btn.btn_bgorange a { background: #EAB501;}
#helpful_tips .content .btn:before{ content: ""; display: block; width: 289px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #84ADFF; border-radius: 10000px; transition: all 0.5s ease-out; opacity: 0;}
#helpful_tips .content .btn.btn_bgblue:before { background: #2755B2;}
#helpful_tips .content .btn.btn_bgred:before { background: red;}
#helpful_tips .content .btn.btn_bgorange:before { background: #EAB501;}

#helpful_tips .content .btn.thumb-hover:before{opacity: 1; transition: all 0.5s ease-out; }
#helpful_tips #column.content {padding: 66px 0 106px;}

/*------------------------------ #category ------------------------------*/
#category{padding: 63px 0 100px;}
#category .category_inner{width: 1102px; margin: 0 auto;}
#category h3{text-align: center;}
#category h3 span{font-size: 60px; color: #fff; text-align: center; letter-spacing: 0.05em;}
#category ul{display: flex; flex-wrap: wrap; padding: 47px 0 0;}
#category ul li{width: 198px; height: auto; margin: 0 0 21px;}
#category ul li:not(:nth-child(5n)){margin-right: 28px;}
#category ul li{position: relative;}
#category ul li:before{ content: ""; display: block; width: 208px; height: 73px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #C6C6C6; border-radius: 10000px; transition: all 0.5s ease-out; opacity: 0;}

#category ul li.thumb-hover:before{transition: all 0.5s ease-out; opacity: 1;}
#category ul li a{background: #F1F5F8; border-radius: 1000px; text-align: center; font-size: 17px; letter-spacing: 0.05em; line-height: 125%; color: #2952A7; padding: 21px 0; display: block; z-index: 1; position: relative;}


/*------------------------------ #hashtag ------------------------------*/
#hashtag{padding: 63px 0 80px; background: url(../image/helpful_tips/bg_1.jpg) no-repeat center center; background-size: cover;}
#hashtag .hashtag_inner{width: 1110px; margin: 0 auto;}
#hashtag h3{text-align: center;}
#hashtag h3 span{font-size: 60px; color: #fff; text-align: center; letter-spacing: 0.05em;}
#hashtag .list{padding: 80px 0 0;}
#hashtag .list ul{display: flex; flex-wrap: wrap; justify-content: center; }
#hashtag .list ul li{width: auto; height: auto; margin:0 10px 20px 10px; position: relative;}
#hashtag .list ul li:before{ content: ""; display: block; width: 104%; height: 52px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #58A2FF; border-radius: 10000px; transition: all 0.5s ease-out; opacity: 0;}
#hashtag .list ul li.thumb-hover:before{transition: all 0.5s ease-out; opacity: 1;}
#hashtag .list ul li a{ border-radius: 1000px; text-align: center; font-size: 17px; letter-spacing: 0.05em; line-height: 125%; color: #FFFFFF; padding: 10px 19px 9px ; display: block; border: 1px solid #FFFFFF; position: relative; z-index: 1;}



@media only screen and (max-width: 768px) {
		
	.helpful_tips_inner{padding: 0 0;}
	.bg_white{border-radius: 45px;}
	/*------------------------------ #helpful_tips ------------------------------*/
	#helpful_tips .content{ padding: 24px 0 0;}
	#helpful_tips .content:not(:last-child) .bdr_bottom { margin: 0 25px;}
	#helpful_tips .content h3{font-size: 11px;padding: 0 25px 0 43px;}
	#helpful_tips .content h3 span{font-size: 18px; }
	#helpful_tips .content .flex{display: block !important; padding: 18px 0 50px; margin: 0px;}
	#helpful_tips .content .flex .slick-list{padding: 10px 0 10px 25px;}
	#helpful_tips .content .flex .slick-track{display: flex;}
	#helpful_tips .content .flex .box{width: 190px; margin-left: 20px; float: none;}
	#helpful_tips .content .flex .box::before {border-radius: 15px;}
	#helpful_tips .content .flex .box:not(:last-child){margin: 0 20px 0 0;}
	#helpful_tips .content .flex .box p.tt{padding: 0 7px 0; height: auto; font-size: 11px;}
	#helpful_tips .content .flex .box a .img_box{border-radius: 7px; width: 100%; height: auto; margin: 10px 0 0;}
	#helpful_tips .content .flex .box .data_box{padding:11px 7px 0px;}
	#helpful_tips .content .flex .box .data_box p.data{font-size: 12px; padding: 0 0 12px;}
	#helpful_tips .content .flex .box .data_box p.data span{font-size: 11px; margin: 0 0 0 10px;}
	#helpful_tips .content .flex .box .tag_box{padding: 8px 0 0;}
	#helpful_tips .content .flex .box .tag_box li{font-size: 11px; padding: 3px 10px 4px; margin-bottom: 6px;}
	#helpful_tips .content .flex .box .tag_box li:not(:last-child){margin-right: 6px;}
	#helpful_tips .content .flex .slick-dots{bottom: 0px; width: auto; left: 50%; transform: translateX(-50%);}
	#helpful_tips .content .flex .slick-dots li{width: auto; height: auto; margin: 0px 7px;}
	#helpful_tips .content .flex .slick-dots li button{position: 0px; border-radius: 100px; background: #E3E3E3; width: 7px; height: 7px;}
	#helpful_tips .content .flex .slick-dots li.slick-active button{background: #3A6DB8;}
	#helpful_tips .content .flex .slick-dots li button::before{display: none;}
	#helpful_tips .content .btn { margin: 0 0 33px 0;}
	#helpful_tips .content .btn a{width: 158px; margin: 24px auto 0; font-size: 12px;padding: 11px 0 12px;}
	#helpful_tips .content .btn:before{ width: 168px; height: 51px;}
	#helpful_tips #real_estate_information.content {padding:45px 0 30px;}
	#helpful_tips #column.content {padding: 25px 0 20px;}
	
	/*------------------------------ #category ------------------------------*/
	#category{padding: 40px 0 30px;}
	#category .category_inner{width: 90%; margin: 0 auto;}
	#category h3 span{font-size: 26px;}
	#category ul{display: flex; flex-wrap: wrap;align-items: flex-start; padding: 15px 0 0;}
	#category ul li{width: 31%; height: auto; margin: 0 0 4%;}
	#category ul li:not(:nth-child(5n)){margin-right: 3%;}
	#category ul li:nth-child(5n){margin-right: 3%;}
	#category ul li:nth-child(3n){margin-right: 0;}
	#category ul li a{font-size: clamp(0.6rem, calc(1vw + 1.3vw), 11px); padding: 10px 0px; }
	#category ul li:before{ width: 106%; height: 43px; }

	
	/*------------------------------ #hashtag ------------------------------*/
	#hashtag{padding: 40px 0; }
	#hashtag .hashtag_inner{width: 90%; margin: 0 auto;}
	#hashtag h3{text-align: center;}
	#hashtag h3 span{font-size: 26px; }
	#hashtag .list{padding: 15px 0 0;}
	#hashtag .list ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
	#hashtag .list ul:not(:last-child){padding: 0 0 9px;}
	#hashtag .list ul li{width: 23.5%; height: auto;margin: 0 2% 2% 0;}
	#hashtag .list ul li:nth-child(4n){margin: 0 0 4% ;}
	#hashtag .list ul li a{ font-size: clamp(0.5rem, calc(1vw + 1.3vw), 11px); padding: 5px 0px 6px;} 	
	#hashtag .list ul li:before{ width: 106%; height: auto; padding: 16px 0;}

}