@charset "utf-8";
/*----------------------------------------------------------------------------------------
	mypage.css
----------------------------------------------------------------------------------------*/
html { scroll-behavior: smooth;}
.mypage > article{margin-bottom: 6rem; float: left;}
.pc_dnone{display:none;}
main.cont-w.clearfix.mypage.wp-single::after {
    content: "";
    clear: both;
    display: block;
}

/** メインビジュアル ***************************************************************************/
.mypage_subhead_outer{
  width: 100%;
  background: #f8f4ed;
  margin-bottom: 5rem;
}
.mypage_subhead{
    margin-left: auto;
    background: url(/images/mypage/subhead_bk.jpg) no-repeat right 0 top 0 #fff;
    overflow: hidden;
    position: relative;
    height: 460px;
}
.mypage_subhead h2{display: none;}
.mypage_subhead .mypage_btn {width: 300px;}
.balloon-shadow-line {
  position: absolute;
  top: 44px;
  left: 0;
}
@media screen and (max-width:480px) {
  .balloon-shadow-line {
    top: 25px;
    left: 15px;
}
  .mypage > article{
    margin: 0 1rem 3rem;
    width: auto !important;
    padding: 0;
    float: none;
  }

  .mypage_subhead{
    background: url(/images/mypage/subhead_bk_sp.jpg) no-repeat right 0 top 0 #fff;
    height: 556px;
    background-size: cover;
    width: 375px;
    margin: auto;
  }
  .mypage_subhead_outer {
  	margin-bottom: 2rem;
  }
  .pc_dnone{display:block;}
}
/** 吹き出し ***************************************************************************/
.balloon-shadow-line strong {
  position: relative; /* 三角の位置を固定するために設定 */
  margin: 0 auto 40px; /* 上 左右 下のマージン */
  padding: 10px 20px; /* ふきだし内の余白 */
  background: #414042; /* 背景色 */
  border: 2px solid #fff;
  text-align: center; /* テキストの揃え */
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
}
.balloon-shadow-line strong::before,
.balloon-shadow-line strong::after {
  content: '';
  width: 11px; /* 影をつけるために線幅で設定せずにboxを使用する */
  height: 11px;
  transform: rotate(45deg);
  position: absolute;
  left: 55%;
  margin-left: -86px;
}
.balloon-shadow-line strong::before {
  background: #fff; /* 吹き出しの線と同じ色 */
  bottom: -8px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.balloon-shadow-line strong::after {
  background: #414042; /* 吹き出しの地と同じ色 */
  bottom: -6px; /* 線の太さだけずらす */
}
 /** 緑 ボタン ***************************************************************************/
 .mypage_subhead .mypage_btn {
  position: absolute;
  left: 0;
  bottom: 46px;
}
.mypage_btn {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 3px #6f6857;
  background-color: #73bd37;
  color: #fff;
  font-size: 24px;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
}
.mypage_btn a {color: #fff;}
.mypage_btn:hover {
  transition: all .3s;
  transform: translate(2px, 2px);
  opacity: 0.9;
  box-shadow: 0 0;
}
@media screen and (max-width:480px) {
	.mypage_btn {
		margin: 0 3rem;
		font-size: 19px;
	}
	.mypage .mypage_h2{font-size: 30px !important;}
	.mypage h2 span{font-size: 17px !important;}


}
/** 見出し ***************************************************************************/
.mypage h2{font-size: 34px;text-align: center;line-height: 1.4;}
.mypage h2 span{font-size: 24px;}
.mypage h2 em{color: #beaf87;}

/** マイページ3つの特典 ***************************************************************************/
#benefits3btn_area{
  background: #fff;
  padding: 0 100px 40px;
  margin-top: 60px;
}
#benefits3btn_area h2{
background: #beaf87;
  width: 100%;
  line-height: 60px;
  margin-top: -30px;
  margin-bottom: 40px;
  color: #fff;
}
#benefits3btn_area article{
  display: flex;
  justify-content: space-between;
}
#benefits3btn_area article section{
  border: 2px solid #beaf87;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  display: flex;
  flex-flow: column;
  width: 100%;
}
#benefits3btn_area article section:not(:last-child){margin-right: 26px;}
#benefits3btn_area article section img{
  margin-bottom: 15px;
  width: 272px;
}
#benefits3btn_area article section p{
  margin-bottom: 15px;
  padding: 0 20px;
  font-size: 18px;
  line-height: 1.4;
}
#benefits3btn_area article section div a{
  margin: 0 20px 30px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: #beaf87;
  position: relative;
  text-align: center;
  padding-bottom: 1.5rem;
  display: block;
}
#benefits3btn_area article section a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10px;
  right: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateX(-50%) rotate(135deg);
}
#benefits3btn_area article section div a:hover{
  transition: all .3s;
  transform: translate(2px, 2px);
  opacity: 0.9;
}
@media screen and (max-width:480px) {
	#benefits3btn_area h2{
		margin:-30px 0 20px;
		width: auto;
		font-size: 22px;
	}
	#benefits3btn_area {
		padding: 0;
		margin: 60px auto 0;
		width: 90% !important;
	}
	#benefits3btn_area article section {
		border: none;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		display: flex;
		width: 100%;
		padding: 1rem;
	}
	#benefits3btn_area article{
		flex-flow: column;
		margin-bottom: 3rem;
	}
	#benefits3btn_area article section:not(:last-child) {
		margin-bottom: 1rem;
		border-bottom: 1px solid #ccc;
	}
	#benefits3btn_area article section img {
		margin-bottom: 15px;
		width: 100%;
		height: 100%;
	}
	#benefits3btn_area article section p,#benefits3btn_area article section div a{font-size: 14px;}
	#benefits3btn_area article section p{padding: 0 10px;}
	#benefits3btn_area article section div a{margin: 0 10px 10px;}
}

/** 特典コンテンツ 共通 ***************************************************************************/
.benefits_cont h2{
  font-size: 32px;
  color: #fff;
  text-align: center;
  background: #beaf87;
  padding: 1.5rem;
  margin-bottom: 4rem;
}
.benefits_cont h2 span{
  font-size: 24px;
  color: #beaf87;
  background: #fff;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  padding: 5px 40px;
  display: table;
  margin: 0 auto .5rem;
}
.benefits_cont h3{
  font-size: 24px;
  text-align: center;
  margin-bottom: 3rem;
}
.benefits_cont h3 em{color: #beaf87;}
.benefits_cont img{
  margin: 3rem auto;
  display: block;
}
.benefits_cont{
  background: #fff;
  box-shadow: 0px 2px 15px 1px rgba(0,0,0,0.1);
}
.benefits_cont article{
  width: 880px;
  margin: 0 auto;
}
.benefits_cont .mypage_btn {
  width: 389px;
  margin: 0 auto 6rem;
}

/** 特典1　周辺エリアの売出し情報を分析できる ***************************************************************************/
#benefits1 article{
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
}
#benefits1 article section{
  background: #f8f4ed;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 30px;
  width: 100%;
}
#benefits1 article section:not(:last-child),#benefits3 article section:not(:last-child){margin-right: 40px;}
#benefits1 article section h4{
  font-size: 30px;
  color: #beaf87;
  margin-bottom: .5rem;
}
#benefits1 article section p,#benefits1 article section li,#benefits3 article section li{
  font-size: 20px;
  line-height: 1.6;
}
@media screen and (max-width:480px) {
  .benefits_cont{padding-bottom: 20px;}
  .benefits_cont div{padding: 0 20px 20px;}
  .benefits_cont article{
    width: 100%;
  }
  #benefits1 article {
    flex-flow: column;
    margin-bottom: 20px;
  }
  .benefits_cont .mypage_btn {
    width: 100%;margin: 0 auto;
  }
  .benefits_cont h3 {
    font-size: 16px;}
#benefits1 article section h4 {
    font-size: 18px;
}
#benefits1 article section p, #benefits1 article section li, #benefits3 article section li {
    font-size: 14px;
}
#benefits1 article section {
    padding: 20px;
}
#benefits1 article section:not(:last-child), #benefits3 article section:not(:last-child) {
    margin-right: 0;
    margin-bottom: 1rem;
}
.benefits_cont h2 {
  font-size: 20px;
  margin-bottom: 2rem;
}
#benefits3 img + h3{margin-bottom: 1rem;}
#benefits3 img + h3:not(:first-child){font-size: 19px !important;}
#benefits3 article {
  margin-bottom: 20px !important;
}
}
/** 特典3　自然に知識が身に付く、不動産売却ノウハウセミナーメール ***************************************************************************/
#benefits3 h2 + h3 {line-height: 1.4;}
#benefits3 img + h3:not(:first-child){font-size: 30px;}
#benefits3 article{
  display: flex;
  justify-content: space-between;
  margin-bottom: 45px;
}
#benefits3 article section{
  width: 100%;
  padding-left: 1.5rem;
}
#benefits3 article section li {
  padding-left: 1em;
  text-indent: -1.3em;
  line-height: 1.4;
}
#benefits3 article section li::before {
  padding-right: .5rem;
  font-size: 2.4rem;
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  color: #beaf87;
  font-weight: 700;
}

/** 会員登録後、すぐに無料でご利用いただけます！ ***************************************************************************/
#mypage_form h2{
  background: #73bd37;
  padding: 3.5rem 1rem;
}
#mypage_form h3{font-size: 30px;line-height: 1.4;}
#mypage_form h3 em{display: block;}
.mypage_form_btn {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #beaf87;
  font-size: 24px;
  padding: 10px 0;
  font-weight: bold;
  text-align: center;
  width: 480px;
  margin: 0 auto 6rem;
}
.mypage_form_btn a{color: #fff;}

@media screen and (max-width:480px) {
  .mypage_form_btn {
    width: 100%;
    font-size: 18px;
    margin: 0 auto 1rem;
  }
  #mypage_form h2 {
    padding: 1rem;
}
}