@charset "utf-8";
/* おすすめ無料メニューLP
   デザイン(750px)を 1/2 にした値を SP(.disp_sp / 375px) の基準とし、
   PC(.disp_pc / 640px) は 640/375 倍にスケールしている。
   数値は _tmp/build.py の CSS_TMPL から生成。 */
/* ページ内リンク（ナビのアンカー・Scroll to Top）をなめらかにスクロール */
html{ scroll-behavior:smooth; }

.disp_sp body,
.disp_pc body{
  margin:0; padding:0;
  /* columns.css の body と同じ。パンくず等 .free_wrap の外にも効かせる */
  font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* layouts.simple には columns.css のリセットが無いので、共通パーツ分だけ補う */
#topicpath.topic_cp_v{ font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
#topicpath.topic_cp_v p{ margin:0; padding:0; line-height:16px; }
/* Scroll to Top（columns.css と同じ。マークアップはレイアウト側の footer にある） */
footer .scroll_top{ margin:40px 0; }
footer .scroll_top a{
  background:url(https://630hso4ag2.user-space.cdn.idcfcloud.net/top/image/footer/btn_scroll_to_top.svg) no-repeat scroll center center / 87px 88px;
  display:block; width:87px; height:88px; margin:0 auto;
}
.disp_sp .free_wrap{ width:375px; margin:0 auto; font-size:15px; }
.disp_pc .free_wrap{ width:640px; margin:0 auto; }
.free_wrap{
  background:#fff;
  color:#3a3c3c;
  font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* columns.css の body と同じ */
  -webkit-font-smoothing:antialiased;
}
.free_wrap img{ vertical-align:bottom; }
.free_wrap a{ color:inherit; text-decoration:none; }
.free_wrap ul{ list-style:none; }

/* 斜線つき見出し（共通）: 斜線は画像（img は CDN 側なので CSS 単体で完結するよう data URI に埋め込み） */
.free_slash{
  display:flex; justify-content:center; align-items:center;
  text-align:center; font-weight:400;
}
.free_slash::before,
.free_slash::after{ content:""; flex:none; }
.free_slash::before{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAqCAYAAACtMEtjAAABnElEQVR4nLWWgWnDMBBFX45O4K5QMkIpJQu0XsHdIE2zge0NmmSEtCMEr1AyQsgK9QhNkTmDCMSWZOkgkogF3+d7uq/Z82KRARtgBxxJFAI8AAXwA2QphY7ALzADypRCJt66EVapshKdG+Ck631KIRN5N8Ir8EJCoTOw1fVnSiETdTfCHFiSUKhVINDsslRC6ME9xcZdbvy/1nmlBzqZUKO/aLjLwLO+Vk8xcJeBZ1Fxl5HnBveL4l6mFGqtPlhNwV0c9nxbfbBMKRQFd3HcZ1D/0vUhpZCJD53nIbjbQub7/wGPA2BsQ7MSa51pf9uPZHXRfZtQIVeLyENsXwIswrb9TYiQj0XkOheuYEjgmTn79kGZYBG1D+4ywSJaS+wwBoZM/DSVq+1LBItYu+AuESyicbnlSiSLyMduuS5NNQruEtEiaqumy1CbcLGI1tq3u66pq5CrRexu1dTX+HqLKH1r6iNk01WN4N5cZ+8r5GoRxXVNfYVcLaK1atod4hAhc2Z63N8H9vW435t7yF2AkAkb41thsjLd37zM+R95c2kr181dowAAAABJRU5ErkJggg==) no-repeat center / contain; }
.free_slash::after{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAqCAYAAACtMEtjAAABiElEQVR4nLWYgUnDQBSG/z6cQFcIjiAiXUDdQB3h2m5g7AhJRlC6gcQRxBFCVtAVKgcvcITc3bvcvQdtAkn48l6/5D+6udtuoVg3AHYADheaFADfADYATqQIaRhyBtBrgSoAe95/tF+k2I2tnj8qoArAA+9PXamABt62AEYtkHEEOLoHSoIuuQtbBwB/WqDa6aabHyQFna+XTiAFnUct0P2SzhqgzyWdS4OMI4A1DRqgaqYztEA1dzMs6VwKVAF4cd/OWqAmpnMJkGGdzyGdS4AmAY6Bbiq+kXot6M33dvZEhT03GWTv8lWgs3Fupl0DmhYbfUBnb1RQTjynRAUlrM9sfUQE2PuiQgKyM78SCNCEni0JyJ35uDYqKGG12eVEBQUudmd+mxsVJJz5T25UUCGdh1hUUMpqMycqKCOem5SooJUzN6lRMQfthDq3gqjwgqKrzcSo8IIkM5dGhRf0LJy5JCqCoHfedpFuJM8WfKAnoc6TAKGo8Jb9n+GLL46Nwkrwm/rbTPUPPWNrv9Vxj9oAAAAASUVORK5CYII=) no-repeat center / contain; }
.free_nav__title{ gap:14px; }
.ft__cta_title{ gap:14px; line-height:1.3; }

/* 導入文 / 〆の文章（文字サイズ・行間は columns 準拠: SP 15px / PC 16px、1.6em） */
.free_intro p,
.free_outro p{ margin:0; text-align:left; line-height:1.6em; }
.disp_sp .free_intro,
.disp_sp .free_outro{ font-size:13px; }
.disp_pc .free_intro,
.disp_pc .free_outro{ font-size:16px; }

/* ナビ */
.free_nav{ text-align:center; }

/* 占い師ブロック */
.ft__hero img{ width:100%; height:auto; }
.ft__name{
  display:flex; justify-content:center; align-items:center;
  line-height:1.3; font-weight:400;
}
.ft__name::before,
.ft__name::after{
  content:""; flex:none;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAFXklEQVRYhe2YS2yUVRTH/53pEwttQeq1BaUSjMrjKhRSqhjBB4khGBPZmPhIjPnUhMSNCxduXLhxoSuTG2Ni4kqjG+MrKAY1YBQNfKCIYIUqj88Hz5ah06c58vuSL9XO1HHY9SaTmX5z7rn/+z/nf86ZSjNrZs2skqtGVVhJHOUk3STpSkl/SjrmfDhbDd/muBprnqR6SbN4b6+SX9VWyU+zpLNEpCipaSrDJI46Ja2WdEbSV86HocvKYHIpvHdLauPgMUlDSRytnGRXm8TRPZLGSQMDtimJo+aKASZxNDeJI5/E0YISZk2S9ktqkPQJzy4QbvNheSnnw6jzYZukbkkt7Bl0PgxWJJIkjuyAXmzGeB12PpyYZLdI0r2SPpa0UNIVpM4vkvZIWgVrtm8ZAF+D9QHnw7uVMjiPg+w1wbMbYLQzE97Zkj6TlJfUL+kHSd9IulZSB6H/XtJaST9Kel3SHZKGDVwSR7a/IpGcNEBcwsJ3XlKBPS6Jo3WSjvDcwjQbkLXYj/L8gKQtvD8k6SDPJ7hgoSIGLWcAWSSn6gmf51kfzi0F5khagd1yGN8Diw9LOi6pR1IdtdI+77R9zoexigCyDsJGEdUNEb48z/KSlnLoXljbB0g7eAk+TKnzJR3lErvs7OkU85IAYdGYSm9pLA5LughjBUnfSbpKUqOkO+koxs5tMPappC4uVkDBo6nK/3erQ81PSNrBAXWZyxXJudm8D5IWxthGGL8IIPv+GKqeBevG4HuSYsj47wABuSSj5tslfWklQpcOKpBTxvLPsDVCWbES9AclZR+gjOlOQt2VYfO0pDclfZEFW7aTUOlHyDdbH8HMBuqaAHEjKWCC+Rbgjfxt79ezr5589IBsIEXs+5ckvVC2zCD/a7hZEzc9zi3Xw+AHAN9EXm4DsHWIzRxsjDpAXQBEjufLucTVRKPVjiYl/gnQeiWF1ZMrOVgzx4eod0OZ8BqDNeSQ7Wsm/1IF21oJW/0AOY6Pbj4vxnaupFOo3sqT/i3EC6hb5qwWVtKadzOOcwwEjdz2mKS7UO5iDrXivZvvLAKHYaUNn4vY3w74Npg0pt+S9OJUIR6HmQYcGTvbM0JoAmgKytrXMhgwQA9wyXMZADs5uAu7boQ2hm0/4X5+qrErCzAPmCFKSdrWchTYpfTZZkRhtz/LBHM/TA2SZ1+j3F7sc6i6i270k6TgfLCCXXJlQ3yUojtASMYBfQ5x9FGcj2BrjX+Mxt9HLfwdAO18V0PuOvIxHWhbpwNuyjqYxFENbKYTzRpJnwO6BzDXwd6qTEvrpNbtoKvk+dvULi67AFE96HzYWxHASWDX4NgT9tO87NBeFNhPAa/HNofvNsTUQW6vJkLmZ7/zYWu586cz8huA32BjIcKwwx/NDBLtgIyxsVy7lc+3ZObCQfbavi3ptF0xwCSO0kl5E8IZ5XUfTNQimA0w2kYXSaeaImlSJC0K2LQANlQMMImjOUwij5NTh2DxZGY4/ZUcM1bWUQvXko8tADoAKHGhAUCbmHrKsViKwRXUpjwO00PM8XOSXkGdDbS3M6i/iNqtvDzmfLALfghjHewfBKxF5cmKRZLE0UZ68kmK7z7KjInB1gQN/hR5WAdIGxx2OR+eneTvaUlPYVfH/s3Ohz2VMCiGzN3k1XbnwyHnw4jzwfpz0flQQKUDmYGgB/benuzM+fAyv3NeZQLfWgpcSQaZaFozbW+I2nje+TCRsVvPj6FaFN+M6h8p91+D6axyIc5x4N/TsvNheAq792FvfvrbxPnwjC73/2acD+O0qnLrBLWvhXHrDVVpVeu/W+/QQfJcyEb3mTWzNI31F7BnwNhrZcM9AAAAAElFTkSuQmCC) no-repeat center / contain;
}
.ft__lead{ text-align:center; }
.ft__badge_wrap{ text-align:center; }
.ft__badge{
  display:inline-flex; align-items:center;
  border:1px solid #1f2121; background:#fffed0;
  color:#1f2121; font-weight:700; line-height:1;
}
.ft__badge::before{
  content:""; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAACe0lEQVQ4jd2UTUgUYRjHn/d9Z2bd1XVjV0NxLcxCOtihJNhFt0OrYhYFkQhFRMcOe+joIYkKOgd1cMFDCJGXBEOwzHDUHTH6sFNGQbN+FMnqZM3szjsfb4xbYeuuLR77H2bgmf/v/34986JIONTo8bBBTUMNHg9b1DR0WUxIY5BHkXAoaruEfqzToO0S5rFOu0jDgeCLjja1vrdnFVVWWr6Xr13dtTW1o/LC4nIO3MQIeZZqb/GvnI4ibJgVwsrqCZzJoD3d576D32/ByQ4VLl1YF1wCexIJh4Kb4CDjuaerx0PC+tFDYHlLYS3SBFineznHwG08s+o6+wM+ybx3WnKPRcKhw07NFvgx9WC9V2k+8sfHCNl4c/nWejWmkIUlrk5O8oOaLYCxO1C3ciaaJXKE8xU5jsHNaymB51kbcKT98/lTwu8Riwpw5PPZzn7wWrSJs0o9UEi44BcAONaSBr1x33YW2Dag3GuD7SnZeUAxwv9JALN3QDKWDSAE6NJy3obcVkJKAYYxxTzPBu72+ahpoqJhZFlQMTJBGUcGnL8xlkzy8p17u6xiAyqGn1v815SMqRHDYkJS0xnUOj7hVoeGy/4J+2bmwPv2nYqp0eqw2CmKCUmmFHX29Zebr964CsLuj0kIjIomMq1Oh/nrGMWENAUAV67fChj5NpVPKVD14LHheH55t/bBuDgTtxnEe3oDVM1OLmvK6FB9f4gixuKTk9PxzcyWRtJ1FFO+kdkbt/2G7fSHzaDq4YhBtPQsMsxYrn/LLSEvLLKa6tpHawq5uKaQsvdzNnPNy18wNVrEhJTO9Rc8/Eg4tN9dwqacKw1Ro1lMSB/yGX8C1+IIQcMUYJQAAAAASUVORK5CYII=) no-repeat center / contain;
}
.ft__points{ padding:0; text-align:center; }
.ft__points li::before{ content:"・"; }
.ft__sample{ display:block; height:auto; margin-left:auto; margin-right:auto; }
.ft__menu{
  padding:0; border:1px solid #1f2121; overflow:hidden;
}
.ft__menu li + li{ border-top:1px dashed #1f2121; }
.ft__menu a{ position:relative; display:block; color:#1f2121; }
.ft__tag{
  display:block; margin:0 auto; border:1px solid #1f2121;
  font-weight:700; text-align:center;
  position:relative; /* 右パディング分ずらして枠の中央へ */
}
.ft__tag--self{ background:#baffd8; }
.ft__tag--love{ background:#ffc9fd; }
.ft__title{ display:block; }
.ft__btn{
  position:absolute; top:50%;
  display:flex; align-items:center; justify-content:center; line-height:1;
  border-radius:50%; background:#1f2121; color:#fff;
  text-align:center; white-space:nowrap;
}
.ft__btn::after{
  content:""; display:inline-block; margin-left:1px;
  border-top:1px solid #fff; border-right:1px solid #fff;
  transform:rotate(45deg); vertical-align:1px;
}

/* ================= SP (375px) ================= */
/* ---------- ナビ ---------- */
.disp_sp .free_nav{
  background:#f3f6f8;
  padding:13px 0 12px;
  margin-bottom:11px;
}
.disp_sp .free_nav__title{
  font-size:15px; line-height:1.5;
}
.disp_sp .free_nav__title small{
  display:block; font-size:13px;
}
.disp_sp .free_nav__title::before,
.disp_sp .free_nav__title::after{ width:13px; height:21px; }
.disp_sp .free_nav__list{
  display:flex; justify-content:space-between;
  width:339px; margin:13px auto 0; padding:0; list-style:none;
}
.disp_sp .free_nav__item{ flex:1 1 0; min-width:0; }
.disp_sp .free_nav__item a{
  display:block; text-align:center;
  font-size:11px; line-height:1; white-space:nowrap;
}
.disp_sp .free_nav__item img{
  display:block; width:44px; height:44px; margin:0 auto; border-radius:50%;
}
/* 名前は列幅より長いので左右にはみ出させて中央揃え */
.disp_sp .free_nav__item span{ display:block; margin:5px -10px 0; line-height:1.3; }
.disp_sp .free_nav__item a::after{
  content:""; display:block; width:5px; height:5px; margin:4px auto 0;
  border-right:1px solid #3a3c3c; border-bottom:1px solid #3a3c3c;
  transform:rotate(45deg);
}

/* ---------- 導入文 / 〆の文章 ---------- */
.disp_sp .free_intro{ padding:20px 14px 24px; }
.disp_sp .free_intro p + p{ margin-top:16px; }
.disp_sp .free_outro{ padding:0 14px 40px; }
.disp_sp .free_outro p + p{ margin-top:16px; }

/* ---------- 占い師ブロック ---------- */
.disp_sp .ft{ padding-bottom:40px; }
.disp_sp .ft__name{
  gap:10px; margin-top:24px; font-size:18px;
}
.disp_sp .ft__name::before,
.disp_sp .ft__name::after{ width:20px; height:20px; }
.disp_sp .ft__lead{
  margin:20px 14px 0; font-size:15px; line-height:22px;
}
.disp_sp .ft__badge{
  gap:4px; height:22px; padding:0 12px; margin-top:29px;
  border-radius:11px; font-size:12px;
}
.disp_sp .ft__badge::before{ width:9px; height:13px; }
.disp_sp .ft__points{
  margin:16px 14px 0; font-size:15px; line-height:23px;
}
.disp_sp .ft__sample{ width:335px; margin-top:17px; }
.disp_sp .ft__cta_title{ margin-top:32px; font-size:16px; }
.disp_sp .ft__cta_title::before,
.disp_sp .ft__cta_title::after{ width:13px; height:21px; }
.disp_sp .ft__menu{ margin:12px 20px 0; border-radius:8px; }
.disp_sp .ft__menu a{ padding:12px 60px 14px 16px; }
.disp_sp .ft__tag{
  width:58px; height:17px; border-radius:9px;
  font-size:11px; line-height:15px; left:22px;
}
.disp_sp .ft__title{ margin-top:5px; font-size:15px; line-height:21px; }
.disp_sp .ft__btn{
  right:14px; width:36px; height:36px; margin-top:-18px;
  font-size:11px;
}
.disp_sp .ft__btn::after{ width:4px; height:4px; }

/* ================= PC (640px) ================= */
/* ---------- ナビ ---------- */
.disp_pc .free_nav{
  background:#f3f6f8;
  padding:22px 0 20px;
  margin-bottom:18px;
}
.disp_pc .free_nav__title{
  font-size:20px; line-height:1.5;
}
.disp_pc .free_nav__title small{
  display:block; font-size:17px;
}
.disp_pc .free_nav__title::before,
.disp_pc .free_nav__title::after{ width:22px; height:35px; }
.disp_pc .free_nav__list{
  display:flex; justify-content:space-between;
  width:578px; margin:22px auto 0; padding:0; list-style:none;
}
.disp_pc .free_nav__item{ flex:1 1 0; min-width:0; }
.disp_pc .free_nav__item a{
  display:block; text-align:center;
  font-size:15px; line-height:1; white-space:nowrap;
}
.disp_pc .free_nav__item img{
  display:block; width:75px; height:75px; margin:0 auto; border-radius:50%;
}
/* 名前は列幅より長いので左右にはみ出させて中央揃え */
.disp_pc .free_nav__item span{ display:block; margin:8px -17px 0; line-height:1.3; }
.disp_pc .free_nav__item a::after{
  content:""; display:block; width:8px; height:8px; margin:6px auto 0;
  border-right:1px solid #3a3c3c; border-bottom:1px solid #3a3c3c;
  transform:rotate(45deg);
}

/* ---------- 導入文 / 〆の文章 ---------- */
.disp_pc .free_intro{ padding:34px 23px 40px; }
.disp_pc .free_intro p + p{ margin-top:27px; }
.disp_pc .free_outro{ padding:0 23px 68px; }
.disp_pc .free_outro p + p{ margin-top:27px; }

/* ---------- 占い師ブロック ---------- */
.disp_pc .ft{ padding-bottom:68px; }
.disp_pc .ft__name{
  gap:17px; margin-top:40px; font-size:24px;
}
.disp_pc .ft__name::before,
.disp_pc .ft__name::after{ width:34px; height:34px; }
.disp_pc .ft__lead{
  margin:34px 23px 0; font-size:20px; line-height:30px;
}
.disp_pc .ft__badge{
  gap:6px; height:37px; padding:0 20px; margin-top:49px;
  border-radius:18px; font-size:16px;
}
.disp_pc .ft__badge::before{ width:15px; height:22px; }
.disp_pc .ft__points{
  margin:27px 23px 0; font-size:20px; line-height:31px;
}
.disp_pc .ft__sample{ width:571px; margin-top:29px; }
.disp_pc .ft__cta_title{ margin-top:54px; font-size:21px; }
.disp_pc .ft__cta_title::before,
.disp_pc .ft__cta_title::after{ width:22px; height:35px; }
.disp_pc .ft__menu{ margin:20px 34px 0; border-radius:13px; }
.disp_pc .ft__menu a{ padding:20px 102px 23px 27px; }
.disp_pc .ft__tag{
  width:98px; height:29px; border-radius:15px;
  font-size:15px; line-height:20px; left:37px;
}
.disp_pc .ft__title{ margin-top:8px; font-size:20px; line-height:28px; }
.disp_pc .ft__btn{
  right:23px; width:61px; height:61px; margin-top:-30px;
  font-size:15px;
}
.disp_pc .ft__btn::after{ width:6px; height:6px; }

/* ---------- PC 個別指定 ---------- */
.disp_pc .free_nav__item a{ font-size:15px; }
/* 文字倍率(0.8)で行間が縮んで縦位置がずれるので、枠の高さに合わせる */
.disp_pc .ft__tag{ line-height:25px; }
