@charset "utf-8";
/* CSS Document */
/*--　2025.11 追記 ---*/
.include p {
    text-align: left;
    line-height: 1.4em;
}
em {
	font-style: normal;
}
/*--　2023.11 追記 ---*/
.atm_card_logo {
  margin: .5rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.atm_card_logo::after {
  content: '';
  width: 100%;
}
.atm_card_logo > p {
  width: calc(100% / 4);
}
.atm_card_logo img {
  padding: 0 .2rem;
}
/*--　↓改行位置調整（3個目から改行）---*/
.e-net > p:nth-child(n+3) {
  order: 1;
}
/*--　↓改行位置調整（4個目から改行）---*/
.e-net02 > p:nth-child(n+4) {
  order: 1;
}
/*--　↓改行位置調整（5個目から改行）---*/
.post > p:nth-child(n+5) {
  order: 1;
}
.card_logo {
  max-width: 900px;
  width: 100%;
  margin: 1rem auto 0;
  padding: 0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
}
.card_logo > p {
  width: calc(100% / 8);
}
.card_logo img {
  padding: 0 .5rem;
}
@media screen and (max-width:736px) {
  .card_logo > p {
    width: calc(100% / 4);
  }
}
/*-- ▲▲　2023.11 追記 ▲▲ ---*/

/* アクセシビリティ対応 クレジットカードロゴリスト */
.atm_table .atm_card_logo_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.atm_table .atm_card_logo_list li {
  float: none;
  width: calc(100% / 4);
  display: block;
  background: none;
  padding: 0;
  font-size: 90%;
  line-height: 1.6;
}
/* アクセシビリティ対応　4個目から改行　*/
.atm_table .e-net02 .atm_card_logo_list li:nth-child(1) {
  margin-left: calc((100% / 4) / 2);
}
.atm_table .e-net02 .atm_card_logo_list li:nth-child(3) {
  margin-right: calc((100% / 4) / 2);
}

/*===============================================
●pc.css 画面の横幅が737px以上
===============================================*/
@media screen and (min-width: 737px) {
  div#content .pc-none {
    display: none;
  }
  div#content {
    max-width: 1200px;
    background-color: #fff;
    margin: 0 auto;
    padding: 0;
    font-size: 1.0rem;
  }
  div#content h3 {
    width: 96%;
    background-color: #cfe4b7;
    color: #313131;
    padding: 1.5% 3% 1% 3%;
    margin: 0 2% 1% 2%;
    text-align: left;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }
  div#content .h3s {
    max-width: 100%;
    font-size: 90%;
    font-weight: normal;
    margin-left: 2%;
    text-align: left;
  }
  div#content img {
    vertical-align: bottom;
    padding: 0;
    margin: 0;
  }
  div#content .fix {
    clear: both;
  }
  div#content h1 {
    margin: 0;
    padding: 0;
  }
  /* div#content a:hover {
    opacity: 0.6;
    text-decoration: none;
    filter: alpha(opacity=60);
    -ms-filter: "alpha( opacity=60 )";
  }*/
  /*==========================*/
  div#content .item {
    background-color: #fff;
    border-radius: 10px;
    margin: 0;
    padding: 0;
  }
  div#content .item .atten {
    margin: 2% 0 0 2%;
    padding: 0;
    color: #313131;
    font-size: 90%;
    text-align: left;
    line-height: 1.4em;
  }
  div#content .item section {
    max-width: 100%;
    margin: 0px auto;
    padding: 0;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item .wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  div#content .item ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item li {
    width: 32%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 15px;
    box-sizing: border-box;
  }
  div#content .item01 .wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  div#content .item01 ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item01 li {
    width: 48.4%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 20px;
    padding: 10px;
    box-sizing: border-box;
  }

  /* アクセシビリティ対応 Popular Items at FamilyMart アイテムリスト */
  div#content .item01 li.column1 {
    margin: 15px calc((100% - 48.4%) / 2) 20px;
  }
  div#content .item01 li.column3 {
    width: 32%;
    margin-bottom: 0;
    padding: 15px;
  }
  div#content .item01 .atten {
    margin: 2% 0 0 2%;
    padding: 0;
    color: #313131;
    font-size: 90%;
    text-align: left;
    line-height: 1.4em;
  }

  div#content .item01 .movie {
    width: 48.4%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 2.0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  div#content .item img, .item01 img {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 15px;
  }
  div#content .bnr {
    border-radius: 0;
    margin-bottom: 10px;
  }
  div#content .img_frame {
    border: 2px solid #eee;
  }
  div#content .item dl, .item01 dl {
    margin: 0;
    padding: 0;
  }
  div#content .item dt, .item01 dt {
    margin: 5px 0 5px 0;
    padding: 0;
    color: #fff;
    font-size: 100%;
  }
  div#content .item dd, .item01 dd {
    margin: 5px 0 0 0;
    padding: 0;
    color: #313131;
    font-size: 90%;
    line-height: 1.4em;
    letter-spacing: -0.5px;
  }

  /* アクセシビリティ対応 Popular Items at FamilyMart 説明文 */
  div#content .item01 .column1 dd {
    margin: 2% 0 5px 0;
    letter-spacing: 0.04rem;
  }
  div#content .item01 .column3 dd {
    margin: 5px 0 5px 0;
    letter-spacing: 0.04rem;
  }

  div#content .item .name, .item01 .name {
    color: #313131;
    font-size: 100%;
    line-height: 1.4em;
    margin: 10px 0 7px 0;
    padding: 0;
    text-align: left;
    font-weight: 600;
  }
  div#content .item .txt, .item01 .txt {
    margin-top: 2%;
    padding: 0;
    color: #313131;
    font-size: 95%;
    text-align: left;
    line-height: 1.4em;
  }
  div#content .item .price {
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 100%;
    color: #ff0000;
  }
  div#content .icon_blank img {
    width: 13px;
    margin-left: 5px;
  }
  div#content .link_txt {
    text-align: left;
    margin-top: 1rem;
  }
  div#content .link_txt:hover {
    text-decoration: underline;
    color: #0171a6;
    opacity: 1;
  }
  div#content .link_txt:hover img {
    opacity: 0.7;
    -webkit-transition: all .2s;
    transition: all .2s;
  }
}
/*===============================================
●sp.css  画面の横幅が736pxまで
===============================================*/
@media screen and (max-width : 736px) {
  div#content .icon_blank img {
    width: 13px;
    margin-left: 5px;
  }
/* ベースのスタイル */
div#content .link_txt {
  text-align: left;
  margin-top: 1rem;
}

/* 画像の基本設定 */
div#content .link_txt img {
  opacity: 1; /* 通常時は必ず1 */
  /* 行きも帰りも滑らかにするため transition はここに記述 */
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  /* 【おまじない】iOSでの描画バグを防ぐ記述 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* --------------------------------------------------
   PC（マウス操作）の設定
   -------------------------------------------------- */
@media (hover: hover) {
  /* PCは従来どおり hover で動作 */
  div#content .link_txt:hover {
    text-decoration: underline;
    color: #0171a6;
  }
  div#content .link_txt:hover img {
    opacity: 0.7;
  }
}

/* --------------------------------------------------
   スマホ（タッチ操作）の設定
   -------------------------------------------------- */
@media (hover: none) {
  /* スマホは hover ではなく active（押している間だけ）を使う */
  div#content .link_txt:active {
    text-decoration: underline;
    color: #0171a6;
  }
  /* 重要：指を離すと即座に opacity: 1 に戻るため、戻るボタン対策になる */
  div#content .link_txt:active img {
    opacity: 0.7;
  }
}
  div#content a:link {
    color: #0171a6;
    text-decoration: none;
  }
  div#content .sp-none {
    display: none;
  }
  div#content {
    font-size: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding: 0;
    font-size: 0.9375rem;
  }
  div#content h3 {
    max-width: 100%;
    background-color: #cfe4b7;
    color: #313131;
    padding: 3% 3% 2% 3%;
    margin: 2%;
    text-align: left;
  }
  div#content .h3s {
    max-width: 100%;
    font-size: 75%;
    font-weight: normal;
    margin-left: 2%;
    text-align: left;
    line-height: 1.4em;
  }
  /*==========================*/
  div#content .item {
    background-color: #fff;
    border-radius: 10px;
    margin: 0;
    padding: 0;
  }
  div#content .item .atten {
    margin: 2% 0 0 2%;
    padding: 0;
    color: #313131;
    font-size: 90%;
    text-align: left;
    line-height: 1.4em;
  }
  div#content .item section {
    max-width: 100%;
    margin: 0px auto;
    padding: 0;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item .wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  div#content .item ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item li {
    width: 47%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px;
    box-sizing: border-box;
  }
  div#content .item01 .wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  div#content .item01 ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: flex;
  }
  div#content .item01 li {
    width: 100%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 15px;
    box-sizing: border-box;
  }

  /* アクセシビリティ対応 Popular Items at FamilyMart SP表示 3コラム */
  div#content .item01 li.column3 {
    width: 47%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px;
    box-sizing: border-box;
  }

  div#content .item01 .atten {
    margin: 2% 0 0 2%;
    padding: 0;
    color: #313131;
    font-size: 90%;
    text-align: left;
    line-height: 1.4em;
  }
  div#content .item01 .movie {
    width: 100%;
    height: auto;
    margin-top: 15px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px 0;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 2.0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  div#content .item img, .item01 img {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
  }
  div#content .bnr {
    border-radius: 0;
    padding-bottom: 5px;
  }
  div#content .img_frame {
    border: 2px solid #eee;
  }
  div#content .item dl, .item01 dl {
    margin: 0;
    padding: 0;
  }
  div#content .item dt, .item01 dt {
    margin: 5px 0 5px 0;
    padding: 0;
    color: #fff;
    font-size: 100%;
  }
  div#content .item dd, .item01 dd {
    margin: 5px 0 0 0;
    padding: 0;
    color: #313131;
    font-size: 90%;
    line-height: 1.4em;
    letter-spacing: -0.5px;
  }

  /* アクセシビリティ対応 Popular Items at FamilyMart SP表示 説明文 */
  div#content .item01 .column1 dd {
    margin: 2% 0 5px 0;
  }
  div#content .item01 .column3 dd {
    margin: 5px 0 5px 0;
  }
  div#content .item01 .column1 dd,
  div#content .item01 .column3 dd {
    letter-spacing: 0.52px;
  }

  div#content .item .name, .item01 .name {
    color: #313131;
    font-size: 100%;
    line-height: 1.4em;
    margin: 10px 0 7px 0;
    padding: 0;
    text-align: left;
    font-weight: 600;
  }
  div#content .item .txt, .item01 .txt {
    margin-top: 2%;
    padding: 0;
    color: #313131;
    font-size: 95%;
    text-align: left;
    line-height: 1.4em;
  }
  div#content .item .price {
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 100%;
    color: #ff0000;
  }
}

/* アクセシビリティ対応 スムーススクロール */
html {
  scroll-behavior: smooth;
}
/* =================================================
   Android対策：フォーカスが残っても強制的に元に戻す
   ================================================= */
div#content .link_txt:focus {
  text-decoration: none !important;
  color: inherit !important; /* または元の色を指定 */
}

div#content .link_txt:focus img {
  opacity: 1 !important;
}