@charset "UTF-8";

.top_message{text-align: center;margin: 80px 0 60px;}
.top_message h3{font-weight: bold;font-size: 30px;position: relative;line-height: 1;max-width: 745px;margin: 0 auto 30px;}
.top_message h3:before,.top_message h3:after{content:"";position: absolute;top: -40%;}
.top_message h3:before{    background: url(../images/bg_h3_title_left.png) no-repeat;width: 57px;height: 56px;left: 0;}
.top_message h3:after{    background: url(../images/bg_h3_title_right.png) no-repeat;width: 57px;height: 56px;}
.top_message h3 .gold{color: #c2a400;font-size: 34px;}
.top_message h3 .green{font-size: 34px;color: #2ca453;}
.top_message .text{color: #778273;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;margin-bottom:20px;}
.btn a{border-image: linear-gradient(272deg,rgb(44,164,83)0%, rgb(89,179,84)50%, rgb(134,194,85)90%) 1/0 0 2px 0;border-style:solid;
text-decoration: none;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;position: relative;padding: 10px 5px;font-weight: bold;color: #778273;font-size: 15px;max-width: 180px;display: block;margin: 0 auto;text-align: start;transition: all 0.3s;}
.btn a:after{content: "";width: 5px;height: 5px;border-right: 1px solid #778273;border-top: 1px solid #778273;display: inline-block;transform: rotate(45deg);right: 10px;position: absolute;top: 40%;transition: all 0.3s;}
.btn a:hover{color: #c2a400;}
.btn a:hover:after{border-color: #c2a400;}

.img_message .wrapper{display:flex;padding-bottom: 114px;position:relative;}
.img_message .wrapper:after{content:"";background-image:linear-gradient(-45deg, rgb(247,250,233) 0%,rgb(251,247,229) 100%);right:0;bottom:4%;position: absolute;width: 670px;height: 560px;z-index: -1;}
.img_message .wrapper .box{z-index:5;}

/***/
.top_esthetic_about h3{font-size: 36px;/*font-weight: bold;*/text-align: center;line-height: 1;margin-bottom: 30px;}
.top_esthetic_about .about_text{text-align: center;color: #778273;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;margin-bottom: 60px;}
.top_esthetic_about .wrapper{display: flex;justify-content: center;
  background-image:linear-gradient( 45deg, rgb(247,250,233) 0%, rgb(251,247,229) 100%);padding: 0 0 80px;background-size: 100% 500px;background-repeat: no-repeat;background-position: bottom;}
.top_esthetic_about .wrapper .box{max-width: 380px;transition: all 0.5s;position: relative;background: #fff;display: flex;flex-wrap: wrap;flex-direction: column;}
.top_esthetic_about .wrapper .box:nth-of-type(2){margin:0 50px;}
.top_esthetic_about .wrapper .box:after{content:"";position: absolute;height: 62px;left: -40px;top: -20px;}
.top_esthetic_about .wrapper .box:nth-of-type(1):after{background: url(../images/esthetic_box_01.png) no-repeat;width: 178px;}
.top_esthetic_about .wrapper .box:nth-of-type(2):after{background: url(../images/esthetic_box_02.png) no-repeat;width: 135px;}
.top_esthetic_about .wrapper .box:nth-of-type(3):after{background: url(../images/esthetic_box_03.png) no-repeat;width: 178px;height: 73px;}
.top_esthetic_about .wrapper .box:hover{box-shadow: 0px 4px 21px -10px rgba(168,182,82,6)}

.top_esthetic_about .box .img{background: #fff;}
.top_esthetic_about .title{font-size: 22px;text-align: center;line-height: 1;margin: 30px 0 20px;}
.top_esthetic_about .text{font-size: 15px;color: #778273;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;line-height: 1.867;padding: 0 30px;}
.top_esthetic_about .link.btn{margin-top: auto;text-align: center;margin-bottom: 30px;}
.top_esthetic_about .link.btn a{width:180px;/* margin: 0 auto; */}

/*****/
.top_nail{display:flex;justify-content: center;padding: 85px 0 116px;align-items: center;}
.top_nail .text_box{padding-right: 55px;}
.top_nail .text_box h3{margin-bottom: 35px;font-size: 36px;font-weight: bold;line-height: 1;}
.top_nail .text_box .text{font-size: 16px;color: #778273;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;line-height: 2.125;}
.top_nail .img_wrapper{display: flex;}
.top_nail .img{height: 380px;display: flex;position: relative;}
.top_nail .img:first-of-type{margin-right:20px;}
.top_nail .img:first-of-type img{align-self: flex-start;}
.top_nail .img:last-of-type img{align-self: flex-end;}
.top_nail .btn a{margin: 30px 0 0 0;}
.top_nail .img:last-of-type:after{content:"";position: absolute;height: 62px;right: -40px;background: url(../images/nail_img_title.png) no-repeat;width: 182px;}


/*****/
.top_news{background-image:linear-gradient( 45deg, rgb(247,250,233) 0%, rgb(251,247,229) 100%);padding: 110px 30px 60px;    position: relative;}
.top_news h3{position: absolute;top: -50px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);}

.top_news .news_wrapper{background:#fff;max-width: 1080px;margin:0 auto;padding: 0 60px;}
.top_news .news_wrapper .news_box{border-bottom:1px dotted #dcdcdc;padding: 25px 0;}
.top_news .news_wrapper .news_box:last-of-type{border-bottom:none;}
.top_news .news_box .date{font-size: 16px;color:#c2a400;margin-bottom:12px;line-height: 1;}
.top_news .news_box .title{font-size: 20px;color:#596156;margin-bottom:20px;line-height: 1;font-weight: bold;}
.top_news .news_box .text{font-size: 15px;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;color:#778273;}

/*****/
.top_list_link{padding:60px 20px;}
.top_list_link .page_link_list{display: flex;justify-content: center;padding:0 0 15px;}
.top_list_link .page_link_list li:nth-of-type(2){padding:0 15px;}
.top_list_link .sns_link_list{display: flex;justify-content: center;}
.top_list_link .sns_link_list li{padding:0 10px;}

.top_list_link .page_link_list li a,.top_list_link .sns_link_list li a{display:block;}




/********** レスポンシブル SP********/
@media screen and (max-width:630px){.top_nail .img{height:360px;}}
@media screen and (max-width:600px){.top_nail .img{height:345px;}}
@media screen and (max-width:565px){.top_nail .img{height:320px;}}
@media screen and (max-width:540px){.top_nail .img{height:300px;}}
@media screen and (max-width:500px){.top_nail .img{height:280px;}}
@media screen and (max-width:460px){.top_nail .img{height:265px;}}
@media screen and (max-width:450px){.top_nail .img{height:250px;}}
@media screen and (max-width:420px){.top_nail .img{height:240px;}}
@media screen and (max-width:400px){.top_nail .img{height:225px;}}
@media screen and (max-width:370px){.top_nail .img{height:210px;}}
@media screen and (max-width:340px){.top_nail .img{height:200px;}}



@media screen and (max-width:767px){

	.top_message{margin: 55px 0 50px;}
	.top_message h3{font-size: 23px;max-width: 100%;line-height: 1.2;}
	.top_message h3 .gold,.top_message h3 .green{font-size: 23px;}
	.top_message h3:before{left: 5px;}
	.top_message h3:after{right:0;}
	.top_message h3:before, .top_message h3:after{top: -7%;}
	.top_message .text{text-align: left;}
	.img_message .wrapper .box img{max-width:345px !important;}
	.img_message .wrapper:after{right:0;bottom: 40%;width: 100%;height: 150px;}
	.img_message .wrapper{padding-bottom:50px;}
	.top_esthetic_about h3{font-size:23px;}
	.top_esthetic_about .about_text{margin-bottom: 55px;padding: 0 25px 0;    text-align: left;}
	.top_esthetic_about .wrapper{padding: 0 25px 50px !important;}
	.top_esthetic_about .title{font-size: 20px;margin-bottom: 20px;}
	.top_esthetic_about .text{font-size: 13px;}
	.top_esthetic_about .wrapper .box:after{content:"";position: absolute;height: 55px;left: -10px;top: -20px;}
	.top_esthetic_about .wrapper .box:nth-of-type(1):after{width: 130px;background-size: contain;}
	.top_esthetic_about .wrapper .box:nth-of-type(2):after{width: 100px;background-size: contain;}
	.top_esthetic_about .wrapper .box:nth-of-type(3):after{width: 130px;background-size: contain;}
	.top_esthetic_about .link.btn {margin-top: 20px;}
	.top_nail{padding: 50px 20px 80px;}
	.top_nail .text_box h3 {margin-bottom: 20px;font-size: 23px;}
	.top_nail .text_box .text {font-size: 13px;}
	.top_nail .img:first-of-type {margin-right: 10px;}
	.top_nail .img:last-of-type:after{height: 50px;right: -10px;width: 140px;background-size: contain;}
	.top_nail .btn a{margin: 30px auto 0;}
	.top_news{padding: 70px 15px 50px !important;}
	.top_news .news_wrapper {padding: 0 15px;max-height: 700px;overflow: scroll;}

.top_news .news_box .title {font-size: 15px;margin-bottom: 15px;}
.top_news .news_box .text {font-size: 13px;}
	
	
	.top_list_link {padding: 30px 20px !important;}
	.top_list_link .page_link_list{text-align: center;display:block;    padding: 0 0 10px;}
	.top_list_link .page_link_list li{padding: 0 0 20px !important;}
	.top_list_link .sns_link_list{flex-wrap: wrap;justify-content: space-between;}
	.top_list_link .sns_link_list li { padding: 0;width: 49%;}


}
@media screen and (max-width: 375px) {
.img_message .wrapper .box img{max-width:300px !important;}
}
/********** レスポンシブル PC********/
@media only screen and (min-width: 768px) {
.top_list_link .sns_link_list li:first-of-type{padding:0 10px 0 0px;}
.top_list_link .sns_link_list li:last-of-type{padding: 0 0 0 10px;}
.top_message .text,.top_esthetic_about .about_text{line-height: 2.125;}
}
@media screen and (max-width:945px) {
.top_message{padding: 0 20px;}
.img_message .wrapper:after{}
.top_news{padding: 110px 20px 60px;}
.top_list_link{padding: 60px 20px;}
}

@media screen and (max-width:980px) {
.top_esthetic_about .wrapper .box{ margin: 0 auto;    width: auto;}
.top_esthetic_about .wrapper{display: block;    background-size:100% 98%;}
.top_esthetic_about .wrapper .box:nth-of-type(2){    margin: 50px auto;}
}
@media screen and (max-width:1024px) {
.top_nail{flex-wrap: wrap;}
.top_nail .text_box{padding:0 0 50px;}
.top_esthetic_about .wrapper{padding:0 20px 80px;}

.img_message .wrapper{display:block;}

.img_message .wrapper .box:last-of-type{text-align: end;}
.img_message .wrapper .box img{max-width: 410px;}
}
@media only screen and (min-width: 985px) and (max-width: 1024px) {
.img_message .wrapper:after{right: 35%;bottom: 40%;width: 335px;height: 280px;}
.top_esthetic_about .wrapper .box{width:33%;}
.top_esthetic_about .wrapper .box:nth-of-type(2){margin:0 20px;}

}