@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@700&family=Rubik:wght@400;700&display=swap');

/* general 
-------------------------------------------- */
:root {
    --color-red: #f00;
    --color-blue: #00469b;
    --color-lime: #d8e300;
    --color-yellow: #f4f5c5;
    --color-pale-green: #dbf3ef;
    --color-orange: #ed7700;
    --color-green: #007260;
    --fs-small: 14px;
    --fs-medium: 18px;
    --fs-large: 1.25rem;
    --fs-x-large: 2rem;
    --ff-gothic: 'Rubik','M PLUS 1p',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --ff-hiragino: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
    --ff-yu-go: "Helvetica Neue", Arial,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--ff-rubik: 'Rubik', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {font-size: 16px; scroll-behavior: smooth;}
body {font-family: var(--ff-yu-go); line-height: 1.75;color: #000}
h1, h2, h3, h4, h5, h6, p, a, li, figcaption, dt, dd, th, td, input, textarea, label {
    letter-spacing: 0.05em;
    color: #000
}
h1, h2, h3, h4, h5, h6 {font-weight: 700;font-family: var(--ff-gothic);font-feature-settings: 'palt'}
ol, ul {
    list-style: none;
}
img {max-width: 100%}
a img {transition: .3s;}
a {transition: all .3s ease-in-out;}
a:hover {
	text-decoration: none;
  opacity: 0.8;
  color: inherit;
}
* > p:last-child {margin-bottom: 0}
#wrap {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
@media screen and (min-width: 640px) {
    a[href^="tel"] {pointer-events: none}
}
@media screen and (max-width: 640px) {
	html {font-size: 14px}
}
/* parts
-------------------------------------------- */
.fs-small {font-size: var(--fs-small)}
.fs-medium {font-size: var(--fs-medium)}
.fs-large {font-size: var(--fs-large)}
.fs-x-large {font-size: var(--fs-x-large)}
.ff-gothic {font-family: var(--ff-gothic);}
.ff-hiragino {font-family: var(--ff-hiragino);}
.clr-lime {color: var(--color-lime)}
.clr-red {color: var(--color-red)}
.clr-orange {color: var(--color-orange)}
.font-gothic {font-family: var(--ff-gothic)}
.link-txt {text-decoration: underline}

ul.fineindent {padding-left: 15px}
.fineindent li{text-indent: -1em}
p.fineindet {margin-left: 1em;text-indent: -1em}
.bg-yellow {background-color: var(--color-yellow)}
.bg-wht {background-color: #fff}
.bg-orange {background-color: #fdf0e6;}

@media screen and (max-width: 375px) {
}
/* header
-------------------------------------------- */
header {
    width: 100%;
    margin: 0 auto;
}
.header__iyogin {
    text-align: center;
    background: #fff
}
.header.uk-sticky-fixed.uk-active {
    box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.header__nav {
  display: flex;
  gap: 10px;
  font-family: var(--ff-hiragino);
  font-weight: 700;
  & a:hover {
    color: var(--color-orange);
    opacity: 0.8;
  }
}
.header__nav li::after {
  content: '';
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.467%22%20height%3D%225.648%22%20viewBox%3D%220%200%208.467%205.648%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23ed7700%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%202px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolyline%20class%3D%22cls-1%22%20points%3D%22.707%20.707%204.233%204.233%207.76%20.707%22%2F%3E%3C%2Fsvg%3E')
   no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  display: inline-block;
  width: 1em;
  height: 1em;
}
@media screen and (max-width: 768) {
}
@media screen and (max-width: 640px) {
  .header__iyogin img {
    max-width: 160px
  }
}

/* main 
-------------------------------------------- */
main {
    display: block;
}
main section {
    margin: 0;
    padding: 60px 0
}
[class*="sec__inner"] {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto
}
.sec__inner-small {max-width: 1110px}
.sec__inner-x-small {max-width: 580px}
.sec__inner-xx-small {max-width: }

@media screen and (max-width: 960px) {
    main section {padding: 40px 0}
    [class*="sec__inner"] { padding-left: 10px; padding-right: 10px}
    .sec__inner,.sec__inner-small,.sec__inner-x-small {max-width: 100%}
}
@media screen and (min-width: 750px) {
  #kv__area {
    background: url(../img/i-shinki-2604_kv-bg.png) no-repeat;
    background-size: min(120%, 1500px);
    background-position: center top;
    background-color: var(--color-lime);
    padding: 20px 0 100px;
    position: relative;
  }
  #kv__area::after {
    content: '';
    background: url(../img/i-shinki-2604_kv-coin.png) no-repeat;
    display: block;
    width: 442px;
    height: 374px;
    position: absolute;
    left: calc(50% - 900px);
    bottom: -110px;
  }
}
#kv__area .kv__title {
    margin: 0 auto;
}
.kv__cards {
    position: absolute;
    bottom: -50px;
    bottom: max(-5vw, -50px);
    left: 50%;
    transform: translateX(-50%);
	width: 100%;
	background-size: 100%;
	background-position: center top;
}
@media screen and (min-width: 768px) {
    .kv__title h1 {
    }
    #kv__area .kv__title {
        max-width: 90%
    }
}
@media screen and (max-width: 750px) {
	#kv__area {
    padding: 0;
    background-color: var(--color-yellow);
	}
	#kv__area .kv__title h1{
    margin: 0;
	}
	.kv__cards {
    bottom: min(5vw, 50px);
    width: min(70vw,458px);
	}
	.kv__cards img {
		/* max-width: 80%; */
	}
}
[class^="sec__title"] {
    text-align: center;
    margin-bottom: 40px;
}
.sec__title {
    font-size: 2.5rem;
    font-weight: 700;
}
@media screen and (max-width:640px) {
    .sec__title {font-size: 1.8rem}
}
.sec__title-s {
	font-size: 1.8rem;
    margin-bottom: 50px
}
.sec__title._border {
    margin-bottom: 50px
}
.sec__title._border > span,
.sec__title-s > span {
    border-bottom: 5px solid #333;
    padding-bottom: 10px
}
.lead {
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center
}
.lead2 {
    font-size: 1.2rem;
    text-align: center;
	margin-bottom: 2em
}
@media screen and (max-width:640px) {
    .lead {
        font-size: 1.125rem;
        font-feature-settings: 'palt';
    }
}
.btn {
	text-align: center;
	margin: 30px auto 15px;
	position: relative;
	display: inline-block
}
.btn a {
	display: inline-block;
	background: var(--color-orange);
	border-radius: 2em;
	color: #fff;
	font-family: var(--ff-gothic);
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	margin: auto;
	padding: .5em 2em;
	position: relative;
	z-index: 1;
	transition: all .3s;
    box-shadow: 0 0 3px rgba(0,0,0,.15)
}

.btn:hover a{
	transform: translateY(-2px);
    box-shadow: 0 0 5px rgba(0,0,0,.25)
}

/*-- テーブル --*/
.uk-table th {
    text-transform: none
}
.uk-table tbody tr {
	border-bottom: 1px solid #333;
}
.uk-table tr > * {
    vertical-align: middle
}
.table-layout tbody tr td {
    border-left: 1px solid #333
}
.uk-table tbody tr th {
  color: #000;
	font-size: 1em
}
.uk-table-divider {background: #fff}
.uk-table-divider > :first-child > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > tr:not(:first-child) {
    border-top: 1px solid #333;
}
.table-layout thead th:last-child {
  border-right: 1px solid #333;
}
.table-layout thead th {
  color: #fff;
  text-align: center;
  font-weight: 700;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
}
.table-layout thead th:nth-child(2) {
  background: var(--color-green);
}
.table-layout thead th:nth-child(3) {
  background: #debe10;
  color: #000;
}
.table-layout tbody tr :where(th, td):first-child {
  border-left: 1px solid #333;
}
.table-layout tbody tr :where(th, td):last-child {
  border-right: 1px solid #333;
}
.list-bullet > li {
  position: relative;
  padding-left: 20px;
}
.list-bullet > li::before {
  position: absolute;
  top: .5em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #037461;
  content: "";
}
@media screen and (max-width: 640px) {
    .uk-table-responsive.uk-table tr > *:not(:last-child) {
        border-right: none
    }
    .uk-overflow-auto table{min-width: 640px;}
    /*スクロールバー全体の高さ*/
    .uk-overflow-auto::-webkit-scrollbar {
      height: 4px;
    }
    /*スクロールバー全体の背景*/
    .uk-overflow-auto::-webkit-scrollbar-track {
      background: #eee;
    }
    /*スクロールバーの動く部分*/
    .uk-overflow-auto::-webkit-scrollbar-thumb {
      background: #aaa;
      border: none;
    }
    /*スクロールバーの動く部分のホバー（マウスオーバー）*/
    .uk-overflow-auto::-webkit-scrollbar-thumb:hover {
      background: #999;
    }

}

/* キャンペーン内容
-------------------------------------------- */
.campaign {
  background: var(--color-yellow);
  margin-top: -40px;
}
@media screen and (min-width:750px) and (max-width:1200px) {
  .campaign {
    margin-top: max(-2vw,-30px);
  }
}
@media screen and (max-width:750px) {
    #kv__area + .campaign {
    margin-top: min( 5vw, -80px);
  }
}
.campaign__img > div:first-child:after {
	content: '';
	background: url("../img/i-shinki-2210_arrow.svg") no-repeat;
	background-size: contain;
	display: inline-block;
	width: 62px;
	height: 54px;
	position: absolute;
	top: 40%;
	right: -75px
}
.campaign__img {
  position: relative;
  margin-bottom: 80px;
}
.campaign__img::after {
  content: '';
  background: var(--color-blue);
  width: 100px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  left: calc(50% - 50px);
  bottom: -65px;
}
@media screen and (max-width:640px) {
	.campaign__img > div:first-child {
		margin-bottom: 70px
	}
	.campaign__img > div:first-child:after {
		top: unset;
		right: unset;
		left: 46%;
		transform: rotate(90deg);
		bottom: -90px
	}
}


/* iyoca入会
-------------------------------------------- */
.cta-join {
    background: var(--color-blue);
    text-align: center;
    padding: 30px 0
}
.cta-join p {
    color: #fff;
    margin: 0 auto;
    font-weight: 700
}
/* キャンペーン概要
-------------------------------------------- */
.summary-tbl {
  border: 1px solid #333;
}
.summary-tbl tr > * {vertical-align: top}
.summary-tbl th {
  background: var(--color-yellow);
  font-weight: 700;
}
.summary-tbl td p,
.summary-tbl td ul{
    margin: 0
}

.gp-w-020per {width: 20%}
.gp-w-030per {width: 30%}

@media screen and (min-width: 640px) {
	.summary-tbl th { white-space: nowrap}
}

/*　ポイントをためる・交換する
-------------------------------------------- */
.point__situation .uk-card {font-feature-settings: 'palt';padding: 40px 30px}

.point__situation .uk-card {
	display: flex;
	flex-direction: column;
}
.point__situation .uk-card .img {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center
}


@media screen and (max-width: 640px) {
	.point__situation .uk-card {padding: 20px}
	.point__situation {
		margin-left: -20px
	}
	.point__situation > div {
	  padding-left: 20px;
	}
}

/* IYOCAについて
-------------------------------------------- */
#about_iyoca {}
.about_iyoca__title {
    background: #ececec;
    position: relative;
    font-size: 1rem;
    line-height: 1.25;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40px;
}
* + .about_iyoca__title {
    margin-top: 60px
}
/* .about_iyoca__title span {
    background: var(--color-green);
    color: #fff;
    font-family: var(--ff-rubik);
    font-size: 2rem;
    font-weight: 700;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.about_iyoca__title {
  background: var(--color-lime);
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
  font-size: 1.125rem;;
}
.about_iyoca__title > div {
    font-family: var(--ff-yu-go);
    padding: 10px 0 10px 10px;
    width: calc(100% - 60px)
}
.about_iyoca__title strong {
    font-family: var(--ff-gothic);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.025em
}
@media screen and (min-width: 768px) {
    .about_iyoca__title {
        max-height: 60px;
    }
}
@media screen and (max-width: 767px) {
    .about_iyoca__title {
        min-height: 52px
    }
    .about_iyoca__title span {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
    }
    .about_iyoca__title > div {
        width: calc(100% - 50px);
        margin-left: 50px
    }
}
.about_iyoca__text {
    font-size: 1.125rem
}
@media screen and (min-width: 768px) {
    .about_iyoca__text {
    margin-inline: 50px;
    }
}
.about_iyoca__text ul li {
    font-size: .875rem
}
.about_iyoca__text .border-box {
    border: 1px solid var(--color-orange);
    border-radius: 10px;
    font-feature-settings: 'palt';
    overflow: hidden;
    padding: 20px;
}
.about_iyoca__text .border-box h3 {
    background: var(--color-orange);
    color: #fff;
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 1.5rem;
    padding: 3px 5px;
    margin: -20px -20px 20px;
    text-align: center;
}
.point-box > div:first-child::after {
  content: '';
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.037%22%20height%3D%2231.037%22%20viewBox%3D%220%200%2031.037%2031.037%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23ed7700%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%205px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cline%20class%3D%22cls-1%22%20y1%3D%2215.519%22%20x2%3D%2231.037%22%20y2%3D%2215.519%22%2F%3E%20%3Cline%20class%3D%22cls-1%22%20x1%3D%2215.519%22%20y1%3D%2231.037%22%20x2%3D%2215.519%22%20y2%3D%220%22%2F%3E%3C%2Fsvg%3E')
  no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  right: -50px;
  top: calc(50% - 16px);
}
@media screen and (min-width: 640px) {
  .point-box > div:last-child::after {
    content: '';
    background: url(../img/i-shinki-2604_icn-coin.svg) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    display: block;
    width: 97px;
    height: 92px;
    position: absolute;
    right: -19px;
    top: -30px;
  }
}
@media screen and (max-width: 768px) {
  .point-box > div:first-child::after {
    width: 20px;
    height: 20px;
    right: calc(50% - 20px);
    top: calc(100% + 10px);
  }
}
.condition {
}
.condition .bg-orange {
  padding: 20px;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.196rem + 0.24vw, 1.375rem);
  font-feature-settings: 'palt';
}
.condition .bg-orange img {
  vertical-align: text-bottom;
  display: inline-block;
  margin-right: 2px;
}
@media screen and (max-width: 640px) {
  .condition .bg-orange {
    max-width: 80%;
    margin-inline: auto;
  }
  .condition .bg-orange img {
    width: 1.35em;
    height: auto;
  }
}

#contact {
	/* padding: 60px 0 0 */
}
#contact h3 {
	display: inline-block
}
#contact h3 + p {
	margin: 10px auto 10px;
	font-size: 1.25rem;
}

/* footer 
-------------------------------------------- */
footer {margin-bottom: 160px;padding-top: 30px;}
footer .sec__inner {padding-top: 30px; padding-bottom: 30px}
.footer__copyright {font-size: 12px;margin-bottom: 30px}
.footer__bnr {
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    padding: 20px 10px
}
.footer__logo img {max-width: 200px}

@media screen and (max-width: 640px) {
    .footer__copyright {font-size: 12px}
    .footer__bnr {padding: 10px 0}
    footer {margin-bottom: 90px}
}
@media screen and (max-width: 375px) {
    .footer__copyright {font-size: 10px;margin-top: 40px;}
}
/* topへ戻る
-------------------------------------------- */
#totop {
  transition: ease 0.3s all;
  position: fixed;
  bottom: 190px;
  right: 80px;
  z-index: 100;
}
#totop a {
  display: block;
  z-index: 100;
  width: 82px;
  height: 102px;
  background: url(../img/totop.png) center / contain;
  background-repeat: no-repeat;
  /* filter: drop-shadow(0 0 1px rgba(255,255,255,0.5)); */
}
@media screen and (max-width: 640px) {
  #totop {
    /* display: none !important; */
    right: 7px;
    z-index: 1000;
  }
  #totop a {
    width: 75px;
    height: 90px;
  }
}
/* floatバナー 
-------------------------------------------- */
#float-bnr {
  opacity: 0;
}
#float-bnr.is-show {
  position: fixed;
  opacity: 1;
  transition: opacity 2s;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
#float-bnr .cta-join {
}
@media screen and (max-width: 640px) {
    #float-bnr .cta-join {
    padding: 10px 0;
    }
    #float-bnr .cta-join .btn {
        margin-bottom: 10px;
    }
    #float-bnr .cta-join p {
        font-size: 13px;
        font-feature-settings: 'palt'
    }
}
@media screen and (max-width: 413px) {
    #float-bnr .cta-join p {
        font-size: 12px
    }
}