@charset "UTF-8";
@import url(common.css);
/**
 * common
 */
 html {
  scroll-behavior: smooth;
}
body {
  font-size: 1.4rem;
  line-height: 1.4;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  color: #000;
  background: repeating-linear-gradient(-45deg, #fff33f 0, #fff33f 16px,#fff88c 16px, #fff88c 32px); }

img { image-rendering: auto; }

@media only screen and (max-width: 768px) {
  .only-pc { display: none !important; } }

.only-sp { display: none !important; }

  @media only screen and (max-width: 768px) {
    .only-sp { display: block !important; } }


/* メインビジュアル */
.top_mv { position: relative; }

.commn_inner {
  width: 89%;
  max-width: 1100px;
  margin: 0 auto; }

.top_mv .commn_inner {
  width:95%;
  max-width: 1156px;
  margin-top: 32px;
  display: flex;
  justify-content: space-between; }

  @media only screen and (max-width: 768px) {
  .top_mv .commn_inner {
    width: 89%;
    margin-top: 0; }}

.top_mv img {
  width: 100%;
  display: block; }

.top_mv .point {
  width: 18%;
  max-width: 202px;}

.top_mv .title {
  width: 50%;
  max-width: 607px;
  margin-top: 16px; }

  @media only screen and (max-width: 768px) {
  .top_mv .title {
    width: 97%;
    max-width: 97%;
    margin: 20px auto 0;  }}

.top_mv .term {
  width: 30%;
  max-width: 348px;
  margin-top: 17px; }

  @media only screen and (max-width: 768px) {
  .top_mv .term {
    width: 86%;
    max-width: 86%;
    margin: 30px auto 0; }}


.content .read {
  width: 93%;
  max-width: 1027px;
  margin: 21px auto 0; }

  @media only screen and (max-width: 768px) {
  .content .read {
    width: 69%;
    margin-top: 27px; }}

.content .read img{ width: 100%; }

/* カテゴリー */
.shop { background-color: #03B8DF; }
.service { background-color: #005BAC; }
.food { background-color: #E8374A; }

.cate_links {
  width: 650px;
  margin: 50px auto 0;
  display: flex;
  /* justify-content: space-between; } */
  justify-content: center;
  gap:20px; }

  @media only screen and (max-width: 768px) {
  .cate_links {
    width: 100%;
    margin-top: 35px; }}

.cate_links a {
  width: 32%;
  max-width: 204px;
  position: relative;
  border-radius: 50px;
  display: inline-flex;
  justify-content: center;
  padding: 14px 0; }

  @media only screen and (max-width: 768px) {
  .cate_links a {
    max-width: 220px;
    padding: 12px 0; }}

  @media only screen and (max-width: 500px) {
  .cate_links a {
    min-width: 90px;
    padding: 10px 0; }}

.cate_links a img { height: 16px; }

  @media only screen and (max-width: 768px) {
  .cate_links a img { height: 14px; }}

  @media only screen and (max-width: 500px) {
  .cate_links a img { height: 11px; }}


.cate-title {
  width: 100%;
  margin-top: 31px;
  margin-bottom: 10px;
  padding: 15px 0 18px;
  position: relative;
  display: inline-flex;
  justify-content: center; }

  @media only screen and (max-width: 768px) {
  .cate-title {
    margin-top: 30px;
    padding: 18px 0 21px; }}

.cate-title img { height: 36px; }

  @media only screen and (max-width: 768px) {
  .cate-title img { height: 30px; }}


/* 特典コンテンツ */
.flex {
  margin-top:14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

  @media only screen and (max-width: 768px) {
    .flex { display: block; }}

.col {
  margin-bottom: 16px; 
  width: 32.4%;
  max-width: 360px;}

  @media only screen and (max-width: 768px) {
  .col {
    width: 100%; 
    max-width: 100%; }}

.col.nocolor {
  background: none;}


.col img{ width: 100%; }


.col:hover {
    background: #203aad;}

.col.nocolor:hover {
    background: none;}

.col:hover img {
    transition: 0.3s;
    opacity: 0.8;}


/* 注意書き */
.caution { margin-top: 6px; }

.caution p {
  color: #000;
  font-size: 1.2rem; 
  line-height: 1.6;
  font-weight: 700; }

  @media only screen and (max-width: 768px) {
    .caution p {
      text-indent: -1em;
      padding-left: 1em;} }

/* バナー */
.bunners {
  width: 48%;
  margin: 60px auto 0;}

  @media only screen and (max-width: 768px) {
   .bunners {
    margin-top: 45px;
    width: 100%;
    max-width: 530px; }}

.bunners a {
  width: 100%;
  aspect-ratio: 1 / 0.32;
  border-radius: 6px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  background-color:#ffffff;
  box-shadow: 0.5em 0.5em 0 #004EA2; }

  @media only screen and (max-width: 768px) {
   .bunners a {
    width: 98%;
    min-width: 98%;
    margin-bottom: 16px;
    aspect-ratio: 1 / 0.37; }}

.bunners img {
  width: 83%; }

  @media only screen and (max-width: 768px) {
  .bunners img { width: 85%; }}

/* ホバー */
.bunners a:hover {
  transform: translate(0.2em, 0.2em);
  box-shadow: 0.3em 0.3em 0 #004EA2; }

/* クリック */
.bunners a:active {
  transform: translate(0.5em, 0.5em);
  box-shadow: 0.1em 0.1em 0 #004EA2; }

/*フッター*/
footer {
  width: 100%; }

footer .logo {
  margin: 68px auto 100px;
  width:316px; }

  @media only screen and (max-width: 768px) {
  footer .logo {
   margin-top:60px;
   width: 73%;
   max-width: 264px; }}

footer .logo.markis {
  width:168px; }

footer img {
  width: 100%;}


#page_top{
  position:fixed;
  width:53px;
  right:10px;
  bottom:10px;
  cursor:pointer;
  z-index: 10;
  display: none; /* 初期状態は非表示 */
}



.gentei {
  background-color: #005BAC;
  width:100%; }

.gentei .commn_inner {
  display: flex;
  align-items: center;
  padding: 30px 0 25px ; }

  @media only screen and (max-width: 768px) {
  .gentei .commn_inner {
   display: block; 
   padding: 17px 0 13px; }}

.gentei img {
  width: 100%;
  display: block; }

.gentei .gentei_1 {
  width: 53%;
  max-width: 588px;
  margin-left:14%;}

  @media only screen and (max-width: 768px) {
  .gentei .gentei_1 {
    width: 100%;
    max-width: 100%;
    margin-left:0; }}

.gentei .gentei_2 {
  width: 27%;
  max-width: 296px;
  margin-left:1%; }

  @media only screen and (max-width: 768px) {
  .gentei .gentei_2 {
    width: 65%;
    max-width: 65%;
    margin:7px auto 0; }}
