@charset "UTF-8";
/* 2025リニューアル_eフレンズ css */

/* 各サイズ用 */
@media screen and ( min-width:700px ) {
  .app_list {
    width:700px;
    margin: 0 auto;
    padding: 0 !important;
  }
}
@media screen and ( min-width:961px ) {
  .newsarea,
  .shoping_list,
  .contents_btn {
    width:960px;
    margin:50px auto 70px;
    padding: 0 !important;
  }
}
@media (min-width:641px) and (max-width:960px) {
  .newsarea,
  .shoping_list,
  .contents_btn {
    max-width:960px;
    margin:50px 20px 70px;
    padding: 0 !important;
  }
}
@media screen and ( max-width:959px ) {
  .shoping_list,
  .contents_btn {
    padding:30px;
  }
}
@media screen and ( min-width:1200px ) {
  .area_wrap {
    width:1200px;
    margin:0 auto;
    position:relative;
  }
}

.link_arrow::after {
  color: #333333;
  font-family: FontAwesome;
  content: "\f105";
  vertical-align: middle;
  margin-left: 7px;
}
.btn_kousiki {
  margin:40px 0;
  display: block;
}

/* ヘッダー */
.ef_menu {
  text-align: center;
}
.ef_menu > li {
  text-align: center;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-right: #D3D3D3 1px solid;
}
.ef_menu > li a {
  margin:0 22px;
  text-decoration: none;
}
.ef_menu li:last-child {
  border-right:none;
}
/* スマホ用 */
@media screen and ( max-width:640px ) {
  header {
    background:none !important;
    position:absolute;
    box-shadow:none;
  }
  .hamburger {
    border-radius:50px;
    background: #EA8F1B !important;
    right:10px !important;
    top:10px !important;
  }
  header .logo img {
    margin:30%;
  }
}


/* 見出し */
.header_t h1 { text-align:left !important; }
h2.tt_pi,
h2.tt_or {
  font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
  font-weight:400;
  text-align: center;
}
h2.tt_pi span,
h2.tt_or span {
  margin-bottom: 10px;
  display: inline-block;
}
.tt_pi {
  color:#E15277;
  background-image: url(../new_img/tt_pi.png);
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-top:20px;
  background-size:200px;
}
.tt_or {
  color:#EA8F1B;
  background-image: url(../new_img/tt_or.png);
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-top:20px;
  background-size:200px;
}

.btn_kousiki::after {
  color: #333333;
  font-family: FontAwesome;
  content: "\f105";
  vertical-align: middle;
  margin-left:7px;
}
.line_img {
  width:100%;
  vertical-align:bottom;
}



/* メインエリア */
.main_area {
  background-image: url(../new_img/bg_main_area.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  text-align:center;
  padding:50px 0;
}
a.btn_f::before {
  content: '';/*何も入れない*/
  display: inline-block;
  width:30px;
  height:30px;
  background-image: url(../new_img/icon_first.jpg);
  background-size: contain;
  vertical-align: middle;
}
a.btn_y::before {
  content: '';/*何も入れない*/
  display: inline-block;
  width:30px;
  height:30px;
  background-image: url(../new_img/icon_yodo.jpg);
  background-size: contain;
  vertical-align: middle;
  margin-right:8px;
}
a.btn_f b { color:#EB901B; }
a.btn_y b { color:#009FE8; }

/* PC用 */
@media screen and ( min-width:641px ) {
  .main_btnarea ul {
    margin:40px 0 30px;
  }
  .main_btnarea ul li {
    display: inline-block;
    margin:10px;
    vertical-align: middle;
  }
  .main_btnarea ul li a {
    border:1.5px solid #D6D6D6;
    padding:9px 25px 14px;
    background: #fff;
    text-decoration: none !important;
    text-align: center;
    border-radius: 50px;
    position: relative;
    vertical-align: middle;
  }
}
/* スマホ用 */
@media screen and ( max-width:640px ) {
  .main_btnarea ul {
    margin:30px 0 20px;
  }
  .main_btnarea ul li {
    display:block;
    margin:0 15px;
    vertical-align: middle;
  }
  .main_btnarea ul li a.btn_f,
  .main_btnarea ul li a.btn_y {
    display:inline-block;
    margin-bottom:10px;
  }
  .main_btnarea ul li a {
    width:100%;
    border:1.5px solid #D6D6D6;
    padding:10px;
    background: #fff;
    text-decoration: none !important;
    text-align: center;
    border-radius: 50px;
    position: relative;
    vertical-align: middle;
  }
}


/* お知らせエリア */
.newsarea .news_tt {
  text-align: center;
  background: #EA8F1B;
  color:#fff;
  padding:8px;
  font-weight: bold;
  position:relative;
}
.newsarea .news_tt:after {
    position: absolute;
    right: 47%;
    width:6%;
    bottom: -20px;
    color: #EA8F1B;
    font-family: FontAwesome;
    font-size: 150%;
    content: "\f0d7";
    vertical-align: middle;
}
.newsarea ul li {
  border-bottom:1px solid #D6D6D6;
  padding:20px 20px 20px 0;
  position: relative;
  font-size:90%;
  color:#6a6a6b;
}
.newsarea ul li a {
  font-size:110%;
  color:#262626;
}
.newsarea ul li b {
  display: none;
}

.tab_contents_box label {
  width:49.4%;
  display: inline-block;
  text-align:center;
  margin:0;
  padding:0;
}
input:checked + .ef_tab_menu .ct01 {
  background: #EA8F1B;
  color:#fff;
  font-weight: bold;
  position:relative;
}
input:checked + .ef_tab_menu .ct01:after {
    position: absolute;
    right: 47%;
    width:6%;
    bottom: -20px;
    color: #EA8F1B;
    font-family: FontAwesome;
    font-size: 150%;
    content: "\f0d7";
    vertical-align: middle;
}
input:checked + .ef_tab_menu .ct02 {
  background: #E15277;
  color:#fff;
  font-weight: bold;
  position:relative;
}
input:checked + .ef_tab_menu .ct02:after {
    position: absolute;
    right: 47%;
    width:6%;
    bottom: -20px;
    color: #E15277;
    font-family: FontAwesome;
    font-size: 150%;
    content: "\f0d7";
    vertical-align: middle;
}
.ef_tab_menu span {
    background: #E6E6E6;
    display: block;
    padding:6px 0;
}
.shopping_info ul li:last-child {
  border-bottom:none;
}
.shopping_info ul li:after {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    color: #EA8F1B;
    font-family: FontAwesome;
    font-size: 150%;
    content: "\f105";
    vertical-align: middle;
}
.shopping_info ul li span {
  color: #7D7D7E;
  display:block;
}

/* PC用 */
@media screen and ( min-width:641px ) {
  .shopping_info ul li {
    border-bottom:1px solid #D6D6D6;
    padding:15px 0;
    position: relative;
  }

  .btn_kousiki img {
    vertical-align:bottom;
    width:290px;
    margin-bottom: 2px;
    margin-right:4px;
  }
}
/* スマホ用 */
@media screen and ( max-width:640px ) {
  .newsarea {
    padding:30px 30px 80px;
  }
  .shopping_info ul {
    padding-bottom:10px;
  }
  .shopping_info ul li {
    border-bottom:1px solid #D6D6D6;
    padding:20px 20px 20px 0;
    position: relative;
  }

  .btn_kousiki img {
    vertical-align:bottom;
    width:250px;
    margin-bottom: 2px;
    margin-right:4px;
  }
}


.area_contents {
  position:relative;
  background:#FFDBE1;
}
.area_shop {
  position:relative;
  background-image: linear-gradient(180deg, #ffdbe1, #ffffff);
}

/* ピックアップ */
.slider { margin-bottom:20px !important; }

.area_app,
.area_pu {
  position:relative;
  background:#FFEEE3;
}
.area_pu h2 {
  margin-bottom:40px;
}
.efooter_pagetop img {
  width:100%;
  vertical-align: bottom;
}

/* PC用 */
@media screen and ( min-width:641px ) {
  .efooter_pagetop {
    position: absolute;
    width: 12%;
    bottom:-3px;
    left: 44%;
  }
}

/* スマホ用 */
@media screen and ( max-width:640px ) {
  .area_pu .line_img {
    margin-top:40px;
  }
  .efooter_pagetop {
    position: absolute;
    width:30%;
    bottom:-15px;
    left:35%;
  }
}


/* SHOPPING */
.shoping_list ul li img {
  width:100%;
  border-radius:12px;
  margin-bottom:2px;
}
/* PC用 */
@media screen and ( min-width:641px ) {
  .shoping_list ul li {
    width:22%;
    margin-right:4%;
    text-align: center;
    float:left;
  }
  .shoping_list ul li.list_sita {
    padding-top:40px;
  }
  .shoping_list ul li:last-child {
    margin-right:0;
  }
}

/* スマホ用 */
@media screen and ( max-width:640px ) {
  .shoping_list ul {
    margin-bottom:30px;
  }
  .shoping_list ul li {
    width:48%;
    margin-right:4%;
    margin-bottom:20px;
    text-align: center;
    float:left;
  }
  .shoping_list ul li:nth-child(2n) {
    margin-right:0;
  }
}



/* contents */
.contents_btn ul li a {
  display:block;
  background:#fff;
  border-radius:12px;
  padding:18px 12px;
  position:relative;
}
.contents_btn ul li a p span {
  display:block;
  font-size:85%;
  color:#A5A5A5;
}
.contents_btn ul li a::after {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -20px;
  color: #E15277;
  font-family: FontAwesome;
  font-size:150%;
  content: "\f105";
  vertical-align: middle;
}
/* PC用 */
@media screen and ( min-width:641px ) {
  .contents_btn ul {
    text-align: center;
    padding:1px 0 110px;
  }
  .contents_btn ul li {
    display:inline-block;
    margin:0 12px 24px;
    width:38%;
  }
  .contents_btn ul li a img {
    display:inline-block;
    width:28%;
    margin-right:7%;
    vertical-align: middle;
  }
  .contents_btn ul li a p {
    display:inline-block;
    width:50%;
    vertical-align: middle;
    text-align:left;
  }
}
/* スマホ用 */
@media screen and ( max-width:640px ) {
  .contents_btn ul {
    text-align: center;
    padding:1px 0 60px;
  }
  .contents_btn ul li {
    margin-bottom:20px;
  }
  .contents_btn ul li:first-child,
  .contents_btn ul li:last-child {
    margin-left:20px;
  }
  .contents_btn ul li:nth-child(2n) {
    margin-right:20px;
  }
  .contents_btn ul li a img {
    display:inline-block;
    width:23%;
    margin-right:2%;
    vertical-align: middle;
  }
  .contents_btn ul li a p {
    display:inline-block;
    width:72%;
    vertical-align: middle;
    text-align:left;
  }
}



/* アプリのご紹介 */
.area_app {
  text-align: center;
}
.area_app b {
  display:block;
  font-size:110%;
}
.app_list {
  margin-top:60px;
}
.app_list ul li .app_box p {
  margin-top:50px;
}
.app_list ul li:last-child {
  margin-right:0;
}
.app_list ul li a {
  position: relative;
  border:1.5px solid #ECDACB;
  padding:10px 10px 10px 5px;
  background: #fff;
  text-decoration: none !important;
  text-align: center;
  border-radius: 50px;
  color: #333333;
  display: block;
  margin-top:15px;
}
.app_list ul li a::after {
  position: absolute;
  right:15px;
  top: 50%;
  margin-top: -13px;
  color: #EA8F1B;
  font-family: FontAwesome;
  content: "\f105";
  vertical-align: middle;
}

/* PC用 */
@media screen and ( min-width:641px ) {
  .app_list ul li {
    float:left;
    width:30%;
    margin-right:4.9%;
  }
  .app_list ul li .app_box {
    background:#fff;
    border-radius:16px;
    padding:30px 20px;
    position: relative;
  }
  .app_list ul li .app_box img {
    position: absolute;
    top:-25px;
    left:28%;
    width: 44%;
    border:1.5px solid #D5D5D5;
    border-radius:14px;
  }
}

/* スマホ用 */
@media screen and ( max-width:640px ) {
  .app_list ul {
    text-align: center;
    margin:20px 20px 0;
  }
  .app_list ul li {
    display:inline-block;
    width:47%;
    margin:1% 1% 40px 1%;
    vertical-align: top;
  }
  .app_list ul li:last-child {
    margin:1% 1% 30px 1%;
  }
  .app_list ul li .app_box {
    background:#fff;
    border-radius:16px;
    padding:25px 15px;
    position: relative;
  }
  .app_list ul li .app_box img {
    position: absolute;
    top:-25px;
    left:20%;
    width:60%;
    border:1.5px solid #D5D5D5;
    border-radius:14px;
  }
  .app_list ul li a {
    font-size:85%;
  }
}



/*** よどまるイラスト ***/
/* PC用 */
@media screen and ( min-width:641px ) {
  .area_pu .yodomaru_01 {
    position: absolute;
    top:-80px;
    right:50px;
    width:120px;
  }
  .area_app .yodomaru_02 {
    position: absolute;
    top:-100px;
    left:45px;
    width:200px;
  }
  .area_contents .yodomaru_03 {
    position: absolute;
    top:-70px;
    right:50px;
    width:95px;
  }
  .area_shop .maru_01 {
    position: absolute;
    top: -35px;
    right:220px;
    width:80px;
  }
}

/* スマホ用 */
@media screen and ( max-width:640px ) {
  .area_pu .yodomaru_01 {
    position: absolute;
    top:-70px;
    right:20px;
    width:110px;
  }
  .area_app .yodomaru_02 {
    position: absolute;
    top:-90px;
    left:10px;
    width:160px;
  }
  .area_contents .yodomaru_03 {
    position: absolute;
    top:-65px;
    right:20px;
    width:95px;
  }
  .area_shop .maru_01 {
    position: absolute;
    top: -15px;
    right: 20px;
    width: 60px;
  }
}



input[name="tab_menu"] {
display: none;
}
.tab_content {
  display: none;
  z-index: 1;
  clear: both;
  position: relative;
  top: -2px;
}
#tab_a:checked ~ #tab_a_content,
#tab_b:checked ~ #tab_b_content,
#tab_c:checked ~ #tab_c_content,
#tab_d:checked ~ #tab_d_content,
#tab_e:checked ~ #tab_e_content {
  display: block;
}

/* スマホ用 */
@media screen and ( max-width:640px ) {
label.tab_menu {
  display:inline-block;
  margin:1%;
  width:30%;
  text-align:center;
}
.tab_menu span {
  display: block !important;
  padding:3px;
  background:#fff;
  font-size:85%;
  border-radius:50px;
  margin:0;
}
input:checked + .tab_menu span {
  margin:0;
  padding:3px;
}
}