@charset "UTF-8";

/* general 
-------------------------------------------- */
:root {
    --color-red: #f00;
	--green-rgb: 194,233,191; /* 緑 */
    --color-green: #daf2d9; /*緑の50%*/
    --color-orange: #ff7b00;
	--yellow-rgb: 255,224,0; /* 黄色 */
    --color-yellow: #fff6d6; /* 黄色の50% */
	--color-yellow-deep: #fff18c;
	--color-gray: #f7f5ed;
	--color-btn: #ffcf00;
    --fs-small: 14px;
    --fs-medium: 20px;
    --fs-large: 24px;
    --ff-gothic: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", 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;
}

* {
  -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:hover {
	text-decoration: none
}
* > 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}
	.uk-container {
		max-width: 1000px;
	}
}
@media screen and (max-width: 640px) {
	html {font-size: 15px}
}
/* 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: 3rem}

.clr-red {color: var(--color-red)}
.font-gothic {font-family: var(--ff-gothic)}
.link-txt {text-decoration: underline}
:is(ol, ul).fineindent {padding-left: 15px}
.fineindent li{text-indent: -1em}
p.fineindent {margin-left: 1em;text-indent: -1em}
.list-kome {
	padding-left: 0;
}
.list-kome li {
	margin-left: 1em;
	text-indent: -1em;
}
.list-kome li::before{
	content: '';
	background: url(../img/u203b.svg) no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	display: inline-block;
	width: 1em;
	height: 1.25em;
	vertical-align: text-bottom;
}

.bg-yellow {background-color: var(--color-yellow)}
.bg-yellow-deep {background-color: var(--color-yellow-deep)}
.bg-wht {background-color: #fff}
.bg-green {background-color: var(--color-green) !important}
.bg-orange{background-color: var(--color-orange) !important}
.bg-gray {background-color: var(--color-gray) !important;}

/*ギザギサ背景*/
.spikes {
	position: relative;
}
.spikes::after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	top: 100%;
	z-index: 1;
	display: block;
	height: 30px;
	width: 100%;
	background: url(../img/spike_yellow.svg);
	background-size: contain;
}
.spikes + section {
	padding-top: 100px;
}

@media screen and (max-width: 640px) {
    .spikes::after {
		height: 20px;
	}
}
/* header
-------------------------------------------- */
header {
    width: 100%;
    margin: 0 auto;
}
.header__iyogin {
    text-align: center;
    background: #fff;
	padding: 10px;
}
.header.uk-sticky-fixed.uk-active {
    box-shadow: 0 0 10px rgba(0,0,0,.2)
}
@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: 1000px;
    margin-left: auto;
    margin-right: auto
}
.sec__inner-small {max-width: 926px}

@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%}
}

.sec__title {
    color: var(--color-orange);
    font-size: 2.5rem;
	font-size: clamp(1.8rem, 1.667rem + 0.59vw, 2.5rem);
    font-weight: 700
}
#campaign .sec__title {
	font-size: clamp(1.8rem, 0.78rem + 4.53vw, 3.5rem);
}
[class^="sec__title"] {
	font-family: var(--ff-gothic);
    text-align: center;
    margin-bottom: 1em
}
.sec__title-s {
	font-size: 1.6rem;
	font-size: clamp(1.4rem, 1.28rem + 0.53vw, 1.6rem);
	position: relative;
	margin-bottom: calc(2.5em)
}
.sec__title-s._line::after {
	content: '';
	width: 176px;
	height: 4px;
	display: inline-block;
	border-radius: 4px;
	background: var(--color-orange);
	position: absolute;
	bottom: -.5em;
	left: 50%;
	transform: translateX(-50%)
}
.sec__title-s._line._black {
	font-size: 2rem;
}
.sec__title-s._line._black::after {
	background: #000;
}
.lead {
	font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 1.5rem;
	font-size: clamp(1.35rem, 1.25rem + 0.44vw, 1.5rem);
    text-align: center
}
.lead2 {
    font-size: 1.2rem;
	font-weight: 700;
    text-align: center;
	margin-bottom: 2em
}
.btn {
	text-align: center;
	margin: 30px auto;
	position: relative;
	display: inline-block
}
.btn a {
	display: inline-block;
	background: var(--color-btn);
	border-radius: 2em;
	font-family: var(--ff-gothic);
	font-size: 1.6rem;
	font-size: clamp(1rem, 0.927rem + 0.36vw, 1.2rem);
	font-weight: 700;
	text-align: center;
	margin: auto;
	padding: .5em 4.5em;
	position: relative;
	z-index: 1;
	transition: all .3s
}
.btn._white a {
	background: #fff;
}
.btn:hover a,
.btn:hover::before{
	transform: translateY(-2px);
	color: inherit;
}

@media screen and (max-width: 640px) {
	.btn._entry a {max-width: 100%}
}
/*-- テーブル --*/
.uk-table th {
    text-transform: none
}
.uk-table tbody tr {
	border-bottom: 1px solid var(--color-orange);
}
.uk-table tr > * {
    vertical-align: middle
}
.uk-table tr > *:not(:last-child),
.table-layout tr th:first-child {
    border-right: 1px solid var(--color-orange)
}

.uk-table tbody tr th {
    background: #f2f2f2;
    color: #000;
	font-size: 1em;
}
.point-tbl th {
  font-weight: 700
}
.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 #ddd;
}
.uk-table .fineindent,
.uk-table .list-kome {
	font-size: 0.875rem;
}
.table-layout .cell-style2 {
  background-color: #f1fbfa;
}
.table-layout .cell-style1 {
  background-color: #f6f6f6;
}
.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 (min-width: 640px) {
}
@media screen and (max-width: 960px) and (min-width: 640px){
}
@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;
    }
  .point-tbl .uk-text-bold {
    font-feature-settings: 'palt'
  }

}

/* キービジュアル
-------------------------------------------- */
#kv__area {
	background: var(--color-green);
	padding: 0;
}
#kv__area.spikes::after {
	background-image: url(../img/spike_green.svg);
	height: 50px;
}
#kv__area .kv__title,
#kv__area h1 {
    margin: 0 auto;
}
.kv__period {
	border: 5px solid var(--color-orange);
	border-radius: 2em;
	color: var(--color-orange);
	font-family: var(--ff-rubik);
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
	font-feature-settings: 'palt';
	display: inline-block;
	padding: 0 30px;
	background: #fff;
	margin: 0 auto 20px;
	line-height: 1.5
}
.kv__period .large {
	font-size: 150%
}
.tume {margin-left: -.3em}
.kv__cards {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(70%);
  text-align: left;
	width: 1000px;
  max-width: 100%;
	z-index: 5;
}
@media screen and (max-width: 1020px) and (min-width: 640px){
  .kv__cards {
    padding-left: min(200px, 10vw);
    padding-right: max(200px,10vw);
  }
}
  
#kv__area {
	position: relative;
}
#kv__area .kv__title::after {
	content: '';
	background: url(../img/iyoca-2406_kv_box.png) no-repeat;
	background-size: contain;
	width: 398px;
	height: 417px;
	position: absolute;
	top: 49%;
	right: calc(50% - 600px);
	z-index: 3;
}
@media screen and (max-width: 1200px) and (min-width: 640px){
	.kv__cards img {
/*		width: max(360px , 40vw);*/
	}
	#kv__area .kv__title::after {
		width: 30vw;
		height: 31vw;
		right: calc(50% - 46vw);
	}
}
@media screen and (max-width: 640px) {
	#kv__area.spikes::after {
		height: 30px;
	}
	#kv__area h1 {
		margin-bottom: 10px;
	}
	#kv__area .kv__title {
		overflow: hidden;
	}
	#kv__area .kv__title img {
		transform: scale(1.1);
		margin-bottom: 11px;
		margin-left: -18px;
	}
	.kv__period {
		font-size: 1rem;
		padding: 0 10px;
		width: 100%
	}
	.kv__cards {
		bottom: -58px;
		width: 90%;
	}
	.kv__cards img {
	}
	#kv__area .kv__title::after {
		width: 175px;
		height: 175px;
		top: 68%;
		right: -44px;
	}
}
/* キャンペーン内容
-------------------------------------------- */
#campaign {
	padding-top: 160px;
}
@media screen and (max-width: 1200px) and (min-width: 640px){
	#campaign {
		padding-top: 13vw;
	}
}

@media screen and (max-width:640px) {
	.campaign__img > div:first-child {
	}
	.campaign__img > div:first-child:after {
		top: unset;
		right: unset;
		left: 46%;
		transform: rotate(90deg);
		bottom: -90px
	}
}


/* キャンペーン概要
-------------------------------------------- */
.summary {   
}
.att-title {
    position: relative;
    font-size: 1.2rem;
}
h3.att-title {padding: 10px}
.att-title:after {
    content: '';
    width: 24px;
    height: 0;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 50%;
    right: 0
}
h3.att-title:after {
    right: 10px;
}

.uk-table {
  border: 1px solid var(--color-orange);
}
.summary-tbl tr > * {vertical-align: top}

.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}
}
/* ポイントをためる・交換する
-------------------------------------------- */
.img_narrow {
	max-width: min(400px, 100%);
	margin: auto;
}
.point__situation .uk-card {
	font-feature-settings: 'palt';
	padding: 40px 10px;
}
.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 .img {
		max-width: 100px;
		margin-inline: auto;
	}
}
.point__situation .uk-card p {
	letter-spacing: -0.05em;
	margin-top: 10px;
  display: grid;
  place-content: center;
  line-height: 1.25;
}
.exchange table :is(th, td) {text-align: center}
.exchange__point div div h3 {
	margin-bottom: 12px
}
.exchange__point .bg-green {
	background-color: rgba(var(--green-rgb),0.7);
}
.exchange__point .bg-yellow {
	background-color: rgba(var(--yellow-rgb),0.45);
}
.exchange__point .bg-green h4 {
	background: rgba(var(--green-rgb),0.4);
}
.exchange__point .bg-yellow h4 {
	background: rgba(var(--yellow-rgb),0.2);
}
.exchange__award {
	padding: 30px
}
.exchange__award h4 {
	font-size: 1.3rem
}
.exchange__award h4 .large {
	font-size: 125%
}
#exchange .uk-table-divider,
#exchange .uk-table-divider :is(td, th, tr) {
	border-color: #000;
}
#exchange .uk-table-divider tr:first-child > :nth-child(2) {
	background-color: rgba(var(--green-rgb),0.7);
}
#exchange .uk-table-divider tr:first-child > :nth-child(3) {
	background-color: rgba(var(--yellow-rgb),0.45);
}
#exchange .uk-table-divider tr:nth-child(n+2) > :not([colspan="2"]):nth-child(2) {
	background-color: rgba(var(--green-rgb),0.2);
}
#exchange .uk-table-divider tr:nth-child(n+2) > :not([colspan="2"]):nth-child(3) {
	background-color: rgba(var(--yellow-rgb),0.1);
}
.uk-accordion-title {
	background-color: #fff;
	color: #000;
	font-weight: 700;
	width: 397px;
	max-width: 100%;
	margin: auto;
	border-radius: 2em;
	padding: 10px;
	text-align: center;
	position: relative;
}
.uk-accordion-title::before {
	position: absolute;
	right: 10px;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20fill%3D%22%23fff%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%20%3Crect%20fill%3D%22%23fff%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%3C%2Fsvg%3E');
	background-color: #737373;
	border-radius: 50%;;
}
.uk-open > .uk-accordion-title::before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20fill%3D%22%23fff%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%3C%2Fsvg%3E');
}
.uk-accordion-title::after {
	content: 'もっと見る';
}
.uk-open .uk-accordion-title::after {
	content: '閉じる';
}
@media screen and (min-width: 640px) {
	.stores > .lady {
	  width: 21%
	}
}
@media screen and (max-width: 640px) {
	.point__situation .uk-card {padding: 10px}
	.point__situation {
		margin-left: -10px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.point__situation > div {
	  padding-left: 10px;
	}
	.point__situation > .uk-grid-margin {
		margin-top: 10px;
	}
    .stores {
        margin-left: -15px
    }
    .stores > div {
        padding-left: 15px
    }
	.stores > .lady {
	  width: 100%
	}
	.stores > .fujitora {width: 45%}
	.stores > .matsudai,
	.stores > .aidai {width: 25%}
	.stores > div:nth-child(6) img {max-width: 70%}
	.stores > .lady img {
	  max-width: 200px;
	}
}

/* IYOCAについて
-------------------------------------------- */
#about_iyoca {
	background: #dbf3ef
}
@media screen and (min-width:640px) {
	#about_iyoca .uk-grid {
		flex-wrap: nowrap;
	}
}
@media screen and (max-width:640px) {
	#about_iyoca .uk-grid > div:first-child .uk-grid {
		max-width: calc(100%/ 3 * 2);
		margin-inline: auto;
	}
}


#contact {
	padding: 60px 0 0
}
#contact h3 {
	color: #00775e;
	font-size: 1.25rem;
	display: inline-block
}
#contact h3 + p {
	margin: 10px auto 10px;
	font-size: 1.375rem;
}
@media screen and (max-width: 640px) {
    .anc_list_deci .number-cell:before {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
    }
    .anc_list_deci > li .anc_child {
        display: block;
        text-align: left;
        padding-left: 35px
    }
}
/* footer 
-------------------------------------------- */
footer {margin-bottom: 100px}
footer .sec__inner {padding-block: 10px;}
.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}

}
@media screen and (max-width: 375px) {
    .footer__copyright {font-size: 10px}
}
#float-bnr {
	background: rgba(255, 255, 255, 0.5);
	text-align: center;
	padding: 15px 10px;
	width: 100%;
	opacity: 0
}
#float-bnr .btn._entry {
	margin: 0 auto
}
@media screen and (max-width: 428px) {
  #float-bnr .btn._entry,#float-bnr .btn._entry a {
	  max-width: 100%
  }
}
#float-bnr.is-show {
  opacity: 1;
  display: block;
  position: fixed;
  bottom: 0;
  z-index: 10;
}