/* common--- */
/* ============================================ */
:root {
  --lightgreen: #f5fae7;
}
.wrapper {
  max-width: 666px;
  margin: 0 auto;
}
:root {
  --main-black-color: #222222;
  --main-green-color: #9ece18;
  --main-orange-color: #f2ba00;
}
.banner,
.couple_wrap,
.info {
  background-color: #f5f5f5;
  padding: 60px 0;
}
@media screen and (max-width: 767px) {
  .wrapper {
    padding: 0 15px;
  }
}

/* mv */
/* ============================================ */
.mv .row {
  margin: 0 auto;
  max-width: 1000px;
  max-width: 62.5rem;
  width: 100%;
  padding: 0 0.9375rem;
}
h2 {
  text-align: center;
  font-size: 32px;
  color: var(--main-green-color);
  font-weight: 600;
  margin-bottom: 62px;
  position: relative;
}
h2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50px;
  display: inline-block;
  width: 60px;
  height: 4px;
  transform: translate(-50%);
  background-color: var(--main-green-color);
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 20px;
    margin-bottom: 35px;
  }
  h2::after {
    top: 34px;
  }
}
.mv {
  position: relative;
  height: 400px;
  background: url(/img/top/top_img.png) no-repeat 47% -28px / cover;
  display: flex;
  align-items: center;
  background-attachment: fixed;
}
@media screen and (max-width: 767px) {
  .mv {
    background: url(/img/top/top_img_sp.png) no-repeat 47% top/cover;
    background-attachment: local;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 360px) {
  .mv p {
    font-size: 12px;
  }
}
.mv .catch {
  font-size: 15px;
  width: 27em;
  padding-top: 1.25em;
}
h1 {
  background: url(/img/top/top_text_pc.svg) no-repeat left top;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 159px;
}
.mv_text p small {
  font-size: 12px;
  color: var(--main-black-color);
  color: #666666;
}
@media screen and (max-width: 767px) {
  h1 {
    background: url(/img/top/top_text_sp.svg) no-repeat left top;
    width: calc(100vw - 15px);
    margin-bottom: 30px;
    height: 105px;
    position: absolute;
    top: 60px;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 15px;
  }

  .mv .catch {
    width: 100%;
    padding-top: 17.938em;
  }
}

/* バナー--- */
/* ============================================ */

.banner a,
.banner div {
  line-height: 0;
}
.banner_content > a {
  filter: opacity(1);
  transition: 0.3s;
  border-radius: 5px;
  border: 1px solid #cccccc;
  display: block;
  overflow: hidden;
}

/* キャンペーンバナー 枠線の対応 */
.banner_content > a:first-child {
  border: 1px solid transparent;
}

.banner_content {
  display: flex;
  justify-content: center;
  gap: 2%;
}
.banner_content a img {
  width: 532px;
}

.banner_wrapper {
  padding: 0 30px;
}
.banner_content.trial > a {
  border: 1px solid #ff8e99;
}
.banner_content > a:hover {
  filter: opacity(0.6);
}
.banner_content + .banner_content {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .banner {
    padding: 30px 0;
  }
  .banner_content + .banner_content {
    margin-top: 30px;
  }
  .banner_wrapper {
    padding: 30px 0;
    padding: 0 15px;
  }
}

/* アプリ周知 */
/* ============================================ */
.app-promo {
  background-color: var(--lightgreen);
  margin: 60px auto 0;
  padding: 30px 60px;
  border-radius: 8px;
}
.app-promo .sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .app-promo {
    margin: 15px auto 0;
    padding: 20px 44px;
  }
  .app-promo .sp-only {
    display: block;
  }
}
.app-promo__icon {
  display: flex;
  justify-content: space-between;
}
.app-promo .appstore-icon {
  width: 41%;
}
.app-promo .googleplay-icon {
  width: 52%;
}
.app-promo h2::after {
  display: none;
}
.app-promo h2 {
  font-size: 20px;
  margin-bottom: 0;
}
.app-promo .app-promo--inner {
  max-width: 546px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .app-promo h2 {
    margin-bottom: 15px;
    font-size: 16px;
  }
  .app-promo .app-promo--inner {
    max-width: 256px;
    margin: 0 auto;
  }
}

.app-promo__wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: baseline;
}
@media screen and (max-width: 767px) {
  .app-promo__wrap {
    display: block;
  }
}

.app-promo .app-promo__wrap p {
  text-align: center;
  margin-bottom: 15px;
}
.app-promo .app-promo__wrap p small {
  font-size: 11px;
  color: #666666;
  margin-bottom: 15px;
}
.app-promo .txt {
  font-size: 14px;
  text-align: center;
  color: #96c428;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .app-promo .txt {
    font-size: 12px;
  }
}

/* 下段 */
.app-promo__bottom {
  padding: 20px 60px 30px;
}
.app-promo__bottom .app-promo__icon{
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  .app-promo__bottom {
    padding: 15px 10px;
  }
  .app-promo__bottom .app-promo__icon {
    display: block;
    margin-bottom: 0;
  }
  .app-promo__bottom .app-promo__icon .appstore-icon {
    width: 106px;
    margin-bottom: 10px;
  }
  .app-promo__bottom .app-promo__icon .googleplay-icon {
    width: 135px;
  }
}
.app-promo__bottom h2 {
  text-align: left;
  font-size: 24px;
  margin-bottom: 15px;
  white-space: nowrap;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .app-promo__bottom h2 {
    font-size: 20px;
  }
}
.app-promo--inner2 {
  max-width: 504px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .app-promo--inner2 {
    padding: 0;
    max-width: 325px;
  }
}

.app-promo--inner2 .app-mock {
  width: 36%;
}

.app-promo--inner2 .app-promo__bottom--txt {
  width: 62%;
  padding: 50px 0;
}
.app-promo--inner2 .app-promo__bottom--txt p {
  color: #96c428;
  margin-bottom: 15px;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .app-promo--inner2 .app-mock {
    width: 55%;
  }
  .app-promo--inner2 .app-promo__bottom--txt {
    width: 43%;
    padding: 0;
  }
  .app-promo--inner2 .app-promo__bottom--txt p {
    font-size: 12px;
    margin-bottom: 5px;
    padding-top: 10px;
  }
}

@media screen and (max-width: 767px) {
  .app-promo__attend {
    max-width: 325px;
    margin: 0 auto;
  }
  .app-promo__bottom .txt {
    text-align: left;
  }
}

/* 比較 comparison--- */
/* ============================================ */
.comparison {
  padding: 60px 0;
}
.compare-table__item_graycolor p {
  color: #666666;
}
.comparison p:first-of-type {
  text-align: center;
  font-weight: 700;
  margin: auto;
}
.comparison p:first-of-type span {
  color: white;
  font-weight: 600;
}
.comparison {
  position: relative;
}
.couple_wrap {
  position: relative;
}
.info {
  position: relative;
  background-color: white;
  padding-bottom: 0;
}
@media screen and (max-width:767px){
  .info{
    margin-bottom: 45px;
  }
}
.comparison table {
  margin: 0 auto;
}
.compare-table {
  max-width: 666px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
  font-size: 16px;
}
.compare-table__group {
  width: 32.5%;
  color: #333;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}
@media screen and (min-width: 48em) {
  .compare-table__group {
    font-size: 16px;
    line-height: 20px;
  }
}
.compare-table__group.is-white {
  border: 3px solid var(--main-green-color);
  border-radius: 10px;
  box-shadow: 0 0 10px 4px #ededed;
}
@media screen and (min-width: 48em) {
  .compare-table__group.is-white {
    border: 3px solid var(--main-green-color);
  }
}
.compare-table__group.is-gray {
  border: 2px solid #eee;
  border-radius: 10px;
  color: #666;
}
@media screen and (min-width: 48em) {
  .compare-table__group.is-gray {
    border: 3px solid #eee;
  }
}
.compare-table__heading--none {
  height: 45px;
  background-color: white;
}
.compare-table__heading--none p {
  height: 76px;
}
@media screen and (min-width: 48em) {
  .compare-table__heading--none {
    height: 76px;
  }
}
.compare-table__heading--lightgreen {
  background-color: var(--main-green-color);
  height: 45px;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  border-radius: 5px 5px 0 0;
  display: flex;
  color: white;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  border: 2px solid var(--main-green-color);
}
.compare-table__heading--lightgreen p {
  color: white;
}
@media (max-width: 360px) {
  .compare-table__heading--lightgreen {
    font-size: 10px;
    font-size: 2.66667vw;
    line-height: 10px;
  }
}
@media screen and (min-width: 767px) {
  .compare-table__heading--lightgreen {
    height: 76px;
    font-size: 16px;
    line-height: 20px;
  }
}
.compare-table__heading--gray {
  background-color: #eee;
  border-radius: 5px 5px 0 0;
  height: 45px;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  color: #666666;
}
@media (max-width: 360px) {
  .compare-table__heading--gray {
    font-size: 10px;
    font-size: 2.66667vw;
    line-height: 10px;
  }
}
@media screen and (min-width: 767px) {
  .compare-table__heading--gray {
    height: 76px;
    font-size: 16px;
    line-height: 20px;
  }
}
.compare-table__item {
  height: 45px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media screen and (min-width: 767px) {
  .compare-table__item {
    height: 76px;
  }
}
.compare-table__item:last-child {
  border-radius: 0 0 10px 10px;
}
.compare-table__item p {
  font-size: 13px;
  line-height: 13px;
  font-weight: 700;
}
@media screen and (min-width: 767px) {
  .compare-table__item p {
    font-size: 16px;
    line-height: 22px;
  }
}
.compare-table__item--lightgreen {
  background-color: #f5fae7;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  font-weight: 600;
}
/* 文字参照 */
.ficon-bn-circle-o:before {
  content: url(/img/top/circle.svg);
  vertical-align: middle;
  display: inline-block;
  transform: scale(2);
}
.ficon-bn-circle-o_gray {
  content: url(/img/top/circle_gray.svg);
  vertical-align: middle;
  display: inline-block;
  transform: scale(2);
}
.ficon-bn-circle-x:before {
  content: url(/img/top/cross.svg);
  vertical-align: middle;
  display: inline-block;
  transform: scale(2);
}
@media screen and (max-width: 767px) {
  .ficon-bn-circle-o:before {
    transform: scale(1);
  }
  .ficon-bn-circle-o_gray {
    transform: scale(1);
  }
  .ficon-bn-circle-x:before {
    transform: scale(1);
  }
}
@media screen and (min-width: 48em) {
  .compare-table__item--lightgreen {
    height: 76px;
  }
}
.compare-table__item--lightgreen:nth-child(2) {
  border-radius: 10px 10px 0 0;
}
.compare-table__item--lightgreen:last-child {
  border-radius: 0 0 10px 10px;
}
.compare-table__item--lightgray {
  background-color: #fbfbfb;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  font-weight: 600;
}
@media screen and (min-width: 48em) {
  .compare-table__item--lightgray {
    height: 76px;
  }
}
.compare-table__item--lightgray i.ficon-bn-circle-o {
  line-height: 20px;
}
@media screen and (min-width: 48em) {
  .compare-table__item--lightgray i.ficon-bn-circle-o {
    line-height: 30px;
  }
}
.compare-table__item--lightgray i.ficon-bn-close {
  font-size: 28px;
  line-height: 28px;
}
@media screen and (min-width: 48em) {
  .compare-table__item--lightgray i.ficon-bn-close {
    font-size: 40px;
    line-height: 40px;
  }
}
.compare-table__item i.ficon-bn-circle-o {
  line-height: 20px;
}
@media screen and (min-width: 48em) {
  .compare-table__item i.ficon-bn-circle-o {
    line-height: 30px;
  }
}
.compare-table__item i.ficon-bn-close {
  font-size: 28px;
  line-height: 28px;
}
@media screen and (min-width: 48em) {
  .compare-table__item i.ficon-bn-close {
    font-size: 40px;
    line-height: 40px;
  }
}
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
  float: left;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

/* 結婚・交際したカップル--- */
/* ============================================ */
.couple_inner {
  max-width: 1060px;
  margin: 0 auto;
}

.couple_conateiner_flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.couple_conateiner_flex_inner {
  width: 32%;
  display: inline-block;
  text-align: left;
  filter: drop-shadow(1px 1px #eee);
}
.couple_conateiner_flex_inner a {
  background-color: white;
  padding: 27px;
  border-radius: 12px;
  transition: 0.3s;
}
.couple_conateiner_flex_inner a:hover {
  filter: opacity(0.6);
}
.couple_conateiner_flex_inner p:first-of-type {
  font-weight: bold;
  margin-bottom: 1rem;
}
.couple_conateiner_flex_inner p:nth-of-type(n + 2) {
  color: #5aa9ff;
  line-height: 30px;
}
.couple_conateiner_flex_inner p:nth-of-type(n + 3) {
  color: #ff669d;
  line-height: 30px;
}
.couple_conateiner_flex_inner img {
  max-width: 213px;
  height: auto;
  border-radius: 50%;
  display: flex;
  margin: 0 auto 10px auto;
}
.couple_conateinertext {
  padding: 0 20px;
  text-align: left;
}

.couple_inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 30px;
}
.new{
  position:relative;
}
.new:before,
.new:after{
	display:block;
	position:absolute;
	left:-10px;
}
.new:before{
	content:"";
	border:6px solid transparent;
	border-top-color:#CC527E;
	border-right-color:#CC527E;
	top:34px;
}
.new:after{
	content:"NEW";
	background:#F26195;
	color:#FFFAFC;
	padding:0 24px;
	height:26px;
	line-height:26px;
	top:8px;
	z-index:10;
}
@media screen and (max-width: 767px) {
  .couple_inner {
    padding: 0 15px;
  }
  .couple_conateiner_flex {
    margin-bottom: 40px;
  }
  .couple_conateiner_flex_inner p:nth-of-type(n + 2) {
    font-size: 14px;
  }
  .couple_conateiner_flex_inner p:nth-of-type(n + 3) {
    font-size: 14px;
  }
  .couple_conateiner_flex_inner a {
    padding: 1rem;
  }
}
@media screen and (max-width: 428px) {
  .couple_conateiner_flex_inner {
    width: 96%;
    margin: 0 auto;
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 360px) {
  #couple_conateiner_flex {
    font-size: 13px;
  }
  .couple_conateiner_flex_inner p:first-of-type {
    margin-bottom: 0;
  }
  .couple_conateiner_flex_inner p:nth-of-type(n + 2) {
    font-size: 3.5vw;
  }
}
#couple_more {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 60px;
}
#couple_more a {
  font-size: 16px;
  line-height: 26px;
  background-color: white;
  transition: 0.3s;
}
#couple_more a:hover {
  background-color: var(--main-green-color);
  color: white;
}
#couple_more a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 1.26rem;
  border-top: 1px solid var(--main-green-color);
  border-right: 1px solid var(--main-green-color);
  border-top-right-radius: 2px;
  transform: rotate(45deg);
}
#couple_more a:hover::after {
  border-top: 1px solid white;
  border-right: 1px solid white;
}
@media screen and (max-width: 767px) {
  #couple_more {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 428px) {
  .couple_conateiner_flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 360px) {
  #couple_more {
    padding-right: 0;
    padding-left: 0;
  }
  #couple_more a::after {
    display: none;
  }
}

/* お知らせ */
/* ============================================ */
.info_container_flex {
  display: flex;
  justify-content: space-between;
}
.info_container_flex dt {
  width: 20%;
  line-height: 64px;
}
.info_container_flex dd {
  width: 70%;
}
.info_container_flex dd a {
  line-height: 64px;
}
@media screen and (max-width: 767px) {
  .info_container_flex dt {
    display: none;
  }
  .info_container_flex dd {
    font-size: 16px;
  }
  .info_container_flex dd {
    width: 100%;
  }
}
.info_container_flex {
  border-top: dotted 2px #eeeeee;
  padding-left: 0;
  font-size: 16px;
  line-height: 6;
}
.info_container_flex dd {
  line-height: 64px;
}
.info_container_flex:last-of-type {
  border-bottom: dotted 2px #eeeeee;
}
.info_container_flex dd a {
  text-decoration: underline;
}
/* お知らせ 既存のclassに反映*/
#top-news-static li {
  display: flex;
  justify-content: space-between;
  border-top: dotted 2px #eeeeee;
  line-height: 64px;
}
#top-news-static li:last-of-type {
  border-bottom: dotted 2px #eeeeee;
}
#top-news-static li span {
  width: 20%;
}
#top-news-static li a {
  width: 70%;
}
.hide-small {
  line-height: 64px;
}
@media screen and (max-width: 767px) {
  #top-news-static li {
    display: block;
    line-height: 1.6;
    padding: 10px 0;
  }
  .medium-10 {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  #top-news-static li a {
    width: 100%;
  }
}

/* newのタグ */
.new-tag {
  display: none;
}
/* 既存のボタンの調整 */
.top_btn_width {
  max-width: 470px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .top_btn_wrapper {
    padding: 0 15px;
  }
}
.bar-margin-l {
  margin-bottom: 0;
}