@charset "UTF-8";

.pc{ display: block;}
.sp{ display: none !important;}

.pcView{ display: block;}
.spView{ display: none !important;}

.inner_1000{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.flex {
display: -webkit-flex;
display: -ms-flex;
display: flex;
}

.fade_Box {
transition: 1s;
opacity: 0;
}
.fade_Box.animated { opacity: 1;}
#content_Wrap{
	font-feature-settings: normal;
	font-family: 'Zen Maru Gothic' , -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体" , YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	color: #333;
	-webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
}

/*共通css打ち消し*/
.container {
width: 100%;
}
.c-main {
width: 100%;
padding-bottom: 0;
}
.c-wrap {
overflow: inherit !important;
}


#content_Wrap {
/*background-image: url(../img/back_bg.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;*/
}
.main_bg {
position: fixed;
width: 100%;
height: 100svh;
z-index: -1;
left: 0;
top: 0;
display: none;
background-image: url(../img/back_bg.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
/*background-attachment: fixed;*/
}
/*ヘッダー*/
.member_head {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
.member_head h1 {
width: 400px;
max-width: 100%;
margin: 20px 0 20px 20px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.member_head h1 .logo {
max-width: 250px;
margin-right: 20px;
}
.member_head h1 .lp_top {
max-width: 90px;
transition: 0.3s;
}
.member_head h1 .lp_top:hover {
opacity: 0.7;
}
.member_head .head_limit {
display: none;
}
.member_head .sp_footer {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: 0.3s;
display: none;
}
.member_head_btn {
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
margin: 20px;
}
.member_head_btn li {
width: 48%;
max-width: 230px;
margin-right: 20px;
}
.member_head_btn li a {
width: 250px;
max-width: 100%;
text-align: center;
display: block;
transition: 0.3s;
border: 2px solid #000;
border-radius: 100px;
font-size:19px;
padding: 10px 0px 10px 0px;
background: #fff;
color: #000;
font-family: 'Zen Maru Gothic' , -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体" , YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-weight: 600;
font-feature-settings: "palt";
position: relative;
white-space: nowrap;
}
.member_head_btn li:nth-child(1) a {
width: 230px;
}
.member_head_btn li a:after {
content: "";
position: absolute;
right: 15px;
bottom: 40%;
width: 10px;
height: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: 0.3s;
}
.member_head_btn li a:hover {
border: 2px solid #E95513;
background: #E95513;
color: #fff;
}
.member_head_btn li a:hover:after {
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.mv {
width: 100%;
background-color: #fff;
background-image: url(../../shopping/delivery/information/img/join/mv.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center right;
margin-top: 100px;
}
.mv .text {
width: 800px;
max-width: 45%;
padding: 100px 0 50px;
margin-left: 5%;
}
.mini_mv {
display: none;
}


#main_area02 ,
#main_area03 {
width: 1340px;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
position: relative;
}

aside {
max-width: 370px;
position: sticky;
top: 100px;
left: 0;
margin-top: 50px;
}
aside .btn_limit {
width: 260px;
max-width: 80% !important;
margin: 0 auto;
display: block;
transition: 0.3s;
border-radius: 25px;
position: relative;
background: #fff;
}
aside .btn_limit img {
transition: 0.3s;
}
aside .btn_limit:hover img {
opacity: 0.7;
}

#g-nav {
width: 370px;
max-width: 90%;
background: rgba(255, 255, 255, 0.96);
border-radius: 20px;
position: sticky;
top: 100px;
right: 0;
padding: 0px 0 20px;
line-height: 1.6;
margin-top: 40px;
}

#g-nav ul {
max-width: 80%;
margin: 0 auto;
height: 100%;
padding-left: 30px;
position: relative;
}
#g-nav ul::before {
content: "";
position: absolute;
left: 4px;
top: 10px;
width: 3px;
height: 90%;
background: #F5B5C0;
}
#g-nav ul li.current a,
#g-nav ul li a:hover{
  color:#000; 
}
#g-nav li a {
color: #9a9a9a;
font-weight: 500;
}
#g-nav li.big {
margin-top: 10px;
position: relative;
}
#g-nav li.big::before {
content: "";
position: absolute;
left: -40px;
top: 9px;
width: 30px;
height: 30px;
border-radius: 50px;
background: #F5B5C0;
}
#g-nav li.big a {
font-size: 20px;
}
#g-nav li.big a .nav_arr {
width: 15px;
position: absolute;
left: -32px;
top: 19px;
opacity: 0.4;
transition: 0.3s;
}
#g-nav li.current a .nav_arr {
opacity: 1;
}
#g-nav li a {
font-size: 13px;
padding: 5px 0;
display: block;
}
#g-nav li a strong {
font-size: 130%;
vertical-align: -1px;
margin-right: 5px;
}

main {
width: 600px;
max-width: 90%;
margin: 0 auto 0 auto;
}

.w_wrap {
background: #fff;
width: 600px;
padding: 1px 0;
margin: 0px auto 50px;
border-radius: 20px;
}

.openbtn1 {
display: none;
}

.scroll-point {
margin-top: -100px;
padding-top: 100px;
}


.btn_otameshi {
width: 400px;
max-width: 90%;
margin: -30px auto 0;
position: relative;
transform: translateY(-50px);
}
.btn_otameshi.inn_otameshi {
margin: 60px auto 0px;
transform: translateY(0px);
}
.btn_otameshi a {
display: block;
border-radius: 20px;
color: #fff;
text-align: center;
padding: 40px 0 30px;
background: #E95513;
box-shadow: 0 8px 0 hsl(30deg 20% 80%), 0 8px 0 rgba(0,0,0,.2);
transition: color .3s, background .3s, box-shadow .3s, transform .3s;
}
.btn_otameshi a:hover {
	color: #fff;
	/*background: hsl(200deg 62% 75%);*/
	background: #f28250;
	box-shadow: 0 3px 0 hsl(30deg 20% 80%), 0 6px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
}
.btn_otameshi a p {
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 26px;
font-weight: 500;
}
.btn_otameshi a p strong {
font-size: 115%;
}
.btn_otameshi a p::after {
content: "";
position: absolute;
right: 18px;
bottom: 40%;
width: 13px;
height: 13px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


.otoku_btn {
width: 80%;
margin: 0 auto;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: -20px;
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.haitatsu {
text-align: center;
font-size: 16px;
font-weight: 500;
margin-top: -20px;
}
.haitatsu.inn_haitatsu {
margin-bottom: 70px;
margin-top: 30px;
}
.haitatsu a {
transition: 0.3s;
border-bottom: 1px solid transparent;
color: #000;
}
.haitatsu a:hover {
color: #000;
border-bottom: 1px solid #000;
}
.arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #333;
  text-decoration: none;
}
.arrow_r:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
  transform: rotate(45deg);
}



/*box内共通css*/
.scroll-point .box .inner {
max-width: 90%;
margin: 0 auto 0px;
padding: 150px 0;
}
.scroll-point .box .num {
height: 60px;
width: auto;
max-width: inherit;
margin: 0 auto;
text-align: center;
}
.scroll-point .box .num img {
max-width: 100%;
max-height: 100%;
height: auto;
}
.scroll-point .box .mini_ttl {
margin: 40px auto 20px;
}
.scroll-point .box .mini_ttl span {
background: #fff;
padding: 10px;
font-size: 18px;
font-weight: 600;
}
.scroll-point .box .big_ttl span {
font-size: 40px;
font-weight: 600;
background:linear-gradient(transparent 60%, #fff 60%);
}
.scroll-point .box .normal_txt {
font-size: 20px;
font-weight: 400;
line-height: 2.3;
}
.scroll-point .box .content_img {
width: 80%;
margin: 20px auto;
}
.scroll-point .more_btn {
width: 300px;
max-width: 80%;
display: block;
padding: 15px 0;
border-radius: 50px;
background: #fff;
position: relative;
color: #000;
font-weight: 600;
font-size: 20px;
text-align: center;
margin: 30px auto;
transition: 0.3s;
border: 1px solid #000;
}
.scroll-point .more_btn:hover {
background: #cbcbcb;
box-shadow: 1px 1px #ddd;
transform: translate(2px,2px);
}
.scroll-point .more_btn:after {
content: "";
position: absolute;
right: 20px;
bottom: 40%;
width: 10px;
height: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.ribbon_r ,
.ribbon_l {
  position: relative;
  padding: 9px 0 8px;
  box-sizing: border-box;
}
.ribbon_r {
display: inline-block;
padding-right: 20px;
background: url(../img/ribbon_r.svg) no-repeat;
background-size: contain;
background-position: center right;
}
.ribbon_l {
display: table;
margin-right: 0 !important;
margin-left: auto !important;
padding-left: 20px;
background: url(../img/ribbon_l.svg) no-repeat;
background-size: contain;
background-position: center left;
}

.area_box .inner {
width: 90%;
margin: 0 auto;
}
.area_box h3.ic {
text-align: center;
font-size: 32px;
letter-spacing: 0.1em;
font-weight: bold;
margin-bottom: 40px;
line-height: 1.5;
}
.area_box h3.ic img {
margin: 0 auto 20px;
text-align: center;
max-width: 200px;
}



/*ご加入にあたって*/
#area-1 {
background: #FDF7F8;
width: 90%;
margin: 50px auto;
padding: 50px 0;
border-radius: 20px;
}
#area-1 h3.ic {
color: #ED7A94;
}
#area-1 p {
font-size: 25px;
font-weight: bold;
margin-bottom: 40px;
}


/*配送エリア*/
#area-2 {
background: #F5F8F2;
width: 95%;
margin: 50px auto;
padding: 50px 0;
border-radius: 20px;
}
#area-2 h3.ic {
color: #7EBF3D;
}
#area-2 p {
font-size: 20px;
font-weight: bold;
margin-bottom: 40px;
}
#area-2 p.att {
font-size: 13px;
font-weight: 100;
width: 85%;
margin: 20px auto 0;
}


/*配送方法*/
#area-3 {
background: #F7FCFA;
width: 90%;
margin: 50px auto;
padding: 50px 0;
border-radius: 20px;
}
#area-3 h3.ic {
color: #38ACB5;
}
#area-3 p {
font-size: 20px;
font-weight: bold;
margin-bottom: 40px;
}
#area-3 p.att {
font-size: 13px;
font-weight: 100;
width: 85%;
margin: 20px auto 0;
}

#area-3 .ac {
max-width: 90%;
margin: 30px auto 0;
}
#area-3 .ac > li {
  padding-bottom: 6px; 
  list-style: none;
  border: 4px solid #FFF183;
background: #FDFCDD;
border-radius: 20px;
}
#area-3 .ac-label  {
  cursor: pointer;
  position: relative;
  font-weight: bold;
}
#area-3 .ac-label p {
font-size: 18px;
text-indent: -1.6em;
padding-left: 1.6em;
width: 90%;
padding-top: 10px;
padding-bottom: 5px;
color: #ED7A94 !important;;
text-align: center;
}
#area-3 .ac-label p img {
width: 1em;
margin-right: 10px;
vertical-align: middle;
}
#area-3 .ac-content {
  display: none;
  padding: 0px 0 20px;
}
#area-3 .ac-content a {
color: #009DBA;
text-decoration:underline;
transition: 0.3s;
}
#area-3 .ac-content a:hover {
text-decoration:transparent;
}
#area-3 .ac-content .arrow_r:before {
border-top: solid 2px #009DBA;
border-right: solid 2px #009DBA;
}
#area-3 .ac-content .small {
font-size: 13px;
}
#area-3 .ac-content .list {
font-size: 15px;
line-height: 1.8;
}
#area-3 .icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
}
#area-3 .icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
#area-3 .icon:before,
#area-3 .icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #ED7A94;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
#area-3 .icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
#area-3 .icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
#area-3 .pink_ttl {
width: 100%;
background: url(../img/pink_box.svg) no-repeat;
background-size: 100%;
background-position: center bottom;
padding: 15px 0 20px;
text-align: center;
}
#area-3 .pink_ttl img {
width: 80%;
margin: 0 auto;
}
#area-3 .point_text {
width: 80%;
margin: 0 auto 40px;;
}
#area-3 .point_text dl {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 30px;
}
#area-3 .point_text dt {
width: 10%;
margin-right: 5%;
}
#area-3 .point_text dt img {
width: 30px;
}
#area-3 .point_text dd {
width: 85%;
}
#area-3 .point_text dd .ttl {
color: #ED7A94;
font-size: 17px;
margin-bottom: 10px;
}
#area-3 .point_text dd .normal {
font-size: 14px;
font-weight: normal;
color: #333;
}
#area-3 .support {
background: #FEF4F6;
width: 100%;
padding: 30px 0;
}
#area-3 .support .big_ttl ,
#area-3 .otoku .big_ttl {
width: 350px;
max-width: 80%;
margin: 0 auto 30px;
}
#area-3 .support .white {
width: 90%;
margin: 0 auto 30px;
background: #fff;
padding: 20px;
border-radius: 20px;
}
#area-3 .support .white .ttl_img {
margin: 0 auto 20px;
text-align: center;
}
#area-3 .support .white .ttl_img img {
height: 80px;
max-width: 100%;
max-height: 100%;
}
#area-3 .support .white .ttl {
color: #ED7A94;
font-size: 17px;
text-align: center;
line-height: 1.4;
margin-bottom: 20px;
}
#area-3 .support .white .ttl small {
font-size: 90%;
font-weight:600;
}
#area-3 .support .white .text_area {
color: #333;
font-size: 14px;
line-height: 1.7;
font-weight: normal;
}
#area-3 .support .white .text_area span {
color: #ED7A94;
background: none;
}
#area-3 .support .indent-1 {
text-indent: -1em;
padding-left: 1em;
}
#area-3 .support .center {
text-align: center;
color: #333;
font-size: 14px;
line-height: 1.7;
font-weight: normal;
}


#area-3 .otoku {
width: 90%;
margin: 0 auto;
padding: 30px 0;
}
#area-3 .otoku .text_area {
color: #333 !important;
font-size: 17px;
line-height: 1.7;
}
#area-3 .otoku .text_area span {
color: #ED7A94;
background: none;
}
#area-3 .otoku .att {
color: #333 !important;
font-size: 12px;
line-height: 1.7;
width: 100%;
}


#area-3 .more_btn {
border: 1px solid #000;
box-shadow: none;
}
#area-3 .more_btn:hover {
transform: none;
}
#area-3 .deli_box {
width: 100%;
padding: 0px 0 40px;
border-bottom: 1px solid #38ACB5;
margin-bottom: 40px;
}
#area-3 .deli_box h3 {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: flex-end;
font-size: 25px;
color: #38ACB5;
margin-bottom: 20px;
}
#area-3 .deli_box h3 img {
width: 100px;
}
#area-3 .deli_box h3 small {
font-size: 16px;
color: #38ACB5;
margin-right: 15px;
margin-left: 20px;
}
#area-3 .normal {
margin-bottom: 0;
}
#area-3 .deli_box p {
color: #38ACB5;
font-size: 16px;
line-height: 1.8;
margin-bottom: 0;
}
#area-3 .ac-label p {
font-size: 20px;
font-weight: bold;
}
#area-3 .deli_box p span {
background:linear-gradient(transparent 60%, #FFF183 60%);
}
#area-3 .deli_box.last {
border-bottom: none;
}
#area-3 .uketori {
width: 100%;
}
#area-3 .uketori .ttl {
width: 300px;
max-width: 80%;
margin: 0 auto 20px;
}


#area-3 .more_btn {
width: 500px;
max-width: 80%;
display: block;
padding: 10px 0 10px 30px;
border-radius: 30px;
background: #fff;
position: relative;
color: #38ACB5;
font-weight: 600;
line-height: 1.4;
font-size: 20px;
text-align: left;
margin: 30px auto;
transition: 0.3s;
border: 3px solid #38ACB5;
}
#area-3 .more_btn.locker {
width: 500px;
max-width: 80%;
display: block;
padding: 20px 0 20px 30px;
border-radius: 30px;
background: #fff;
position: relative;
color: #38ACB5;
font-weight: 600;
line-height: 1.4;
font-size: 20px;
text-align: left;
margin: 30px auto;
transition: 0.3s;
border: 3px solid #38ACB5;
}
#area-3 .more_btn:hover {
background: #e3fdff;
box-shadow: 1px 1px #ddd;
transform: translate(2px,2px);
}
#area-3 .more_btn:after {
content: "";
position: absolute;
right: 20px;
bottom: 40%;
width: 10px;
height: 10px;
border-top: 3px solid #38ACB5;
border-right: 3px solid #38ACB5;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#area-3 .service {
width: 100%;
padding: 30px 0;
}
#area-3 .service .ttl {
width: 300px;
max-width: 80%;
margin: 0 auto 20px;
}
#area-3 .service .text {
font-size: 16px;
}
#area-3 .att_list {
font-size: 12px;
font-weight: normal;
line-height: 1.7;
}
#area-3 .service_img {
overflow-x: scroll !important;
overflow-y: hidden;
width: 100%;
margin-bottom: 20px;
position: relative;
display: flex;
justify-content: flex-start;
}
#area-3 .service_img .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
display: none;
}

#area-3 .service_img img {
height: 320px;
max-width: inherit;
padding-bottom: 10px;
}
#area-3 .service_img .img_ttl {
position: sticky;
left: 0;
top: 0;
}
#area-3 .service_img_thx {
max-width: 80%;
margin: 30px auto 0;
}
/* スクロールバーの幅と高さを設定する */
.scrollArea::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}
/* スクロールバーの形を設定する */
.scrollArea::-webkit-scrollbar-thumb {
  border-radius: 1rem;
}
/* スクロールバーの色を設定する */
.scrollArea::-webkit-scrollbar-thumb {
  --bg-opacity: 1;
  background-color: #929292;
}
.scrollArea::-webkit-scrollbar-track{
   background-color: #DDDDDD;
  border-radius: 1rem;
}



/*インターネット加入特典*/
.area-4 {
width: 100%;
}
.area-4 .inner {
max-width: 90%;
margin: 0 auto;
padding: 30px 0 10px;
background: url(../../shopping/delivery/information/img/join/bg_pink.png) no-repeat;
background-size: cover;
background-position: center bottom;
border-radius: 20px;
}
.area-4 .title {
width: 70%;
display: flex;
justify-content: center;
text-align: center;
font-weight: 600;
margin: 0 auto;
}
.area-4 .title p {
font-size: 20px;
}
.area-4 .title img {
width: 20px;
margin: 0 10px;
}
.area-4 .copy_ttl {
text-align: center;
width: 80%;
margin: 10px auto 20px;
color: #ED7A94;
font-size: 28px;
font-weight: 600;
}
.area-4 .copy_ttl span {
/*background: #fff;
padding: 0 5px;
margin-right: 5px;
border-radius: 10px;*/
background:linear-gradient(transparent 60%, #FAF063 60%);
border-top-left-radius: 90px;
border-top-right-radius: 90px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.area-4 .pre_img {
width: 80%;
margin: 0 auto;
}
.area-4 .att {
max-width: 80%;
margin: 0 auto;
font-size: 13px;
font-weight: 600;
}
.area-4 .more_btn {
border: none;
box-shadow: none;
background: #f58da4;
color: #fff;
box-shadow: none;
font-size: 25px;
border-radius: 8px;
box-shadow: 0px 5px #e65776;
}
.area-4 .more_btn:hover {
transform: none;
box-shadow: none;
background: #ED7A94;
	box-shadow: 0 4px 0 rgba(230, 87, 118, 0.2);
	transform: translateY(3px);
}

.area-4.scroll-point .more_btn:after {
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.area-4 .point_service {
margin: 30px auto;
}
.area-4 .point_service a {
text-align: center;
display: block;
color: #000;
padding-bottom: 3px;
font-size: 18px;
}
.area-4 .point_service a span {
text-decoration: underline;
position: relative;
padding-left: 20px;
transition: 0.3s;
font-size: 14px;
}
.area-4 .point_service a:hover span {
text-decoration-color: transparent;
}
.area-4 .point_service a span:before {
content: "";
position: absolute;
left: 3px;
bottom: 35%;
width: 6px;
height: 6px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

#area-4 p.b_text {
margin-bottom: 10px;
}
#area-4 .order_tel {
max-width: 80%;
margin-bottom: 10px;
}
#area-4 p.mini_text.tel_text {
font-weight: bold;
margin-bottom: 10px;
}
#area-4 p.mini_text.text_bold {
font-weight: bold;
}
#area-4 p.mini_text.tel_text.tel_ttl {
margin-top: 40px;
}




/*注文からお届けまでの流れ*/
#area-4 {
background: #FFFAF7;
width: 90%;
margin: 50px auto;
padding: 50px 0;
border-radius: 20px;
}
#area-4 h3.ic {
color: #F27E46;
}
#area-4 p {
font-size: 20px;
font-weight: bold;
margin-bottom: 40px;
}
#area-4 p.att {
font-size: 13px;
font-weight: 100;
width: 85%;
margin: 20px auto 0;
}
#area-4 article {
margin-bottom: 30px;
}
#area-4 article .ttl {
color: #F27E46;
font-size: 25px;
text-align: center;
margin-bottom: 20px;
}
#area-4 article .ttl.small {
font-size: 16px;
font-feature-settings: "palt";
}
#area-4 article .flow_img {
width: 80%;
margin: 0 auto 20px;
text-align: center;
}
#area-4 article .text {
font-size: 16px;
color: #F27E46;
margin-bottom: 10px;
}
#area-4 article .mini_text {
font-size: 14px;
color: #333;
font-weight: normal;
}
#area-4 article .orange_arr {
text-align: center;
margin: 0 auto;
width: 50px;
}
#area-4 article .efriend img {
width: 60%;
max-width: 250px;
}
#area-4 article .izumi_app img {
width: 60%;
max-width: 250px;
}
#area-4 article.freeze .att {
width: 100%;
margin-bottom: 50px;
}
#area-4 article.freeze .cover {
position: relative;
margin-bottom: 40px;
}
#area-4 article.freeze .cover .att {
position: absolute;
width: 80%;
right: 0;
left: 0;
top: 75%;
margin: 0 auto;
}
.area_box .more_btn {
width: 500px;
max-width: 80%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
border-radius: 50px;
background: #fff;
position: relative;
color: #F27E46;
font-weight: 600;
font-size: 20px;
text-align: center;
margin: 30px auto;
transition: 0.3s;
border: 3px solid #F27E46;
}
.area_box .more_btn:hover {
background: #ffe9df;
box-shadow: 1px 1px #ddd;
transform: translate(2px,2px);
}
.area_box .more_btn:after {
content: "";
position: absolute;
right: 20px;
bottom: 40%;
width: 10px;
height: 10px;
border-top: 3px solid #F27E46;
border-right: 3px solid #F27E46;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

#area-4 .calendar {
width: 90%;
margin: 30px auto;
border-radius: 20px;
padding: 30px 0 0;
border: 1px solid #F27E46;
background: #fff;
}
#area-4 .calendar .calendar_img {
margin-bottom: 30px;
}
#area-4 .calendar dl {
width: 80%;
margin: 30px auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
#area-4 .calendar dl dt {
width: 50px;
margin-right: 15px;
}
#area-4 .calendar dl dd {
font-size: 16px;
font-weight: 500;
}
#area-4 .haitatsu.inn_haitatsu {
margin-bottom: 40px;
}

#area-4 .attention {
width: 90%;
margin: 0 auto;
}
#area-4 .attention h2 {
display: flex;
justify-content: flex-start;
margin: 60px 0 20px;
font-size: 20px;
font-weight: bold;
}
#area-4 .attention h2 span {
color: #F27E46;
}
#area-4 .attention p{
font-size: 16px;
margin-bottom: 10px;
}
#area-4 .attention p.small{
font-size: 12px;
font-weight: normal;
}
#area-4 .attention .blue_link{
font-size: 12px;
font-weight: normal;
text-decoration: underline;
transition: 0.3s;
color: #009DBA;
}
#area-4 .attention .blue_link:hover{
text-decoration: none;
}
#area-4 .attention .credit {
margin-bottom: 20px;
}




/*休会・脱退について*/
#area-5 {
background: #fef7fa;
width: 90%;
margin: 50px auto;
padding: 50px 0;
border-radius: 20px;
}
#area-5 h3.ic {
color: #ed7a94;
}
#area-5 .attention {
width: 90%;
margin: 0 auto;
}
#area-5 .attention h2 {
display: flex;
justify-content: flex-start;
margin: 40px 0 20px;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
}
#area-5 .attention h2 span {
color: #ed7a94;
}
#area-5 .attention p{
font-size: 16px;
margin-bottom: 10px;
}
#area-5 .attention p.small{
font-size: 12px;
font-weight: normal;
}
#area-5 .attention .blue_link{
font-size: 12px;
font-weight: normal;
text-decoration: underline;
transition: 0.3s;
color: #009DBA;
}
#area-5 .service_img {
overflow-x: scroll !important;
overflow-y: hidden;
width: 100%;
margin-bottom: 20px;
position: relative;
display: flex;
justify-content: flex-start;
margin-top: 20px;
}
#area-5 .service_img .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
display: none;
}
#area-5 .service_img table {
max-width: inherit;
padding-bottom: 10px;
border-collapse: collapse;
table-layout: fixed;
}
#area-5 .service_img table {
width: 1200px;
margin-bottom: 10px;
}
#area-5 .service_img table , #area-5 .service_img td, #area-5 .service_img th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
#area-5 .service_img td, #area-5 .service_img th {
	padding: 7px 5px;
	text-align: center;
}
#area-5 .service_img th {
	background: #e8f4ef;
}
#area-5 .service_img td {
	background: #fffdeb;
	vertical-align:middle;
}
#area-5 .service_img td a {
color: #000;
border-bottom: 1px solid #000;
}
#area-5 .service_img td a:hover {
border-bottom: none;
}
#area-5 .service_img td.bold {
font-weight: bold;
}
#area-5 article .ttl {
color: #F27E46;
font-size: 25px;
text-align: center;
margin-bottom: 20px;
}
#area-5 article .ttl.small {
font-size: 16px;
font-feature-settings: "palt";
}
#area-5 article .flow_img {
width: 80%;
margin: 0 auto 20px;
text-align: center;
}
#area-5 article .text {
font-size: 16px;
color: #F27E46;
margin-bottom: 10px;
}
#area-5 article .mini_text {
font-size: 14px;
color: #333;
font-weight: normal;
}
#area-5 article .orange_arr {
text-align: center;
margin: 0 auto;
width: 50px;
}


#area-5 .attention {
width: 95%;
}
#area-5 .service_img img {
height: 320px;
max-width: inherit;
padding-bottom: 10px;
}
#area-5 .service_img table {
font-size: 13px;
width: 1000px;
}
#area-5 .service_img .img_ttl {
position: sticky;
left: 0;
top: 0;
}
#area-5 .service_img table.img_ttl {
width: 110px;
font-size: 11px;
}


.contact_sodan {
max-width: 90%;
margin: 0 auto;
border-radius: 20px;
padding: 30px 0;
}
.contact_sodan .inner {
width: 90%;
margin:0 auto;
}
.contact_sodan .inner h3 {
text-align: center;
font-size: 35px;
letter-spacing: 3px;
line-height: 1.4;
font-weight: 600;
margin-bottom: 30px;
}
.contact_sodan .tel_area {
width: 80%;
margin: 0 auto;
pointer-events: none;
}
.contact_sodan .tel_area .ttl {
/*background: #fff;
border-radius: 20px;
*/
text-align: center;
display: flex;
align-items: center;
}
.contact_sodan .tel_area .ttl:before,
.contact_sodan .tel_area .ttl:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}
.contact_sodan .tel_area .ttl:before {
margin-right: 1rem;
}
.contact_sodan .tel_area .ttl:after {
margin-left: 1rem;
}


.contact_sodan .tel_area a {
width: 90%;
display: block;
margin: 20px auto 20px;
}
.contact_sodan .tel_area .att {
font-size: 15px;
text-align: center;
font-weight: 500;
}
.contact_sodan .tel_area .normal {
text-align: center;
font-weight: 500;
margin: 40px auto 0px;
}
.contact_sodan .more_btn {
border: 1px solid #000;
box-shadow: none;
}
.contact_sodan .more_btn:hover {
transform: none;
}



.member_foot {
width: 90%;
border-top: 1px solid #000;
padding: 30px 0 50vh;
margin: 80px auto 0;
}
.member_foot a {
display: block;
width: 100%;
margin-bottom: 30px;
font-size: 16px;
}
.member_foot .arrow_r_r span {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  color: #333;
  text-decoration: none;
}
.member_foot .arrow_r_r span:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -3px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1470px){
.mv {
display: none;
}
.mini_mv {
display: block;
margin-top: 100px;
}
}
@media screen and (max-width: 1390px){
.slide li .txt {
max-width: 55%;
}
.slide_mv img {
transform: translateY(0px) scale(1.4);
}
}

@media screen and (max-width: 1200px){
.slide li {
clip-path:ellipse(80% 60% at 50% 25%);
}
}

@media screen and (max-width: 1100px){

.slide li {
clip-path:ellipse(80% 60% at 50% 18%);
}
.slick-dots {
bottom: 220px !important;
}
#main_area02 ,
#main_area03 {
margin: 0px auto 0;
}

.w_wrap {
max-width: 400px;
}
aside {
max-width: 300px;
min-width: inherit;
}
#g-nav {
max-width: 300px;
min-width: 300px;
}
#g-nav ul {
max-width: 85%;
padding-left: 32px;
}
#g-nav li.big a {
font-size: 18px;
}
#g-nav li a {
font-size: 12px;
}
#g-nav li.big::before  {
width: 25px;
height: 25px;
}
#g-nav li.big a .nav_arr {
width: 11px;
}

main {
width: 500px;
}

.scroll-point .box .inner {
padding: 70px 0;
}
.scroll-point .box .big_ttl span {
font-size: 30px;
}

}


@media screen and (max-width: 999px){
.c-main {
margin: 0 auto;
}
.mini_mv {
margin-top: 0;
margin: 0 auto;
text-align: center;
background: url(../../shopping/delivery/information/img/join/mv_sp.jpg) no-repeat;
background-size: 100%;
background-position: center bottom;
}
.mini_mv img  {
text-align: center;
margin: 0 auto;
}
.mini_mv .mv_img {
width: 550px;
max-width: 85%;
margin: 0 auto;
padding-bottom: 60%;
}

#content_Wrap {
/*background-image: url(../img/back_bg_sp.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: 10% bottom;
background-attachment: fixed;*/
}

.main_bg {
position: fixed;
width: 100%;
height: 95%;
z-index: -1;
left: 0;
top: 0;
display: none;
background-image: url(../img/back_bg_sp.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
/*background-attachment: fixed;*/
}
.mv {
background: none;
text-align: center;
}
.mv .mv_img {
width: 500px;
max-width: 100%;
margin: 0 auto;
}

.member_head {
background: #fff;
position: relative;
}
.member_head h1 {
width: 400px;
}
.member_head .head_limit {
display: inherit;
opacity: 0;
transition: 0.3s;
visibility: hidden;
position: fixed;
left: 10px;
top: 12px;
width: 290px;
max-width: 80%;
z-index: 99;
}
.member_head.scroll-nav .head_limit {
opacity: 1;
visibility: visible;
}
.slide li {
/*max-height: 73svh;*/
height: auto;
/*clip-path:circle(158% at 50% -48.5%);*/
clip-path:ellipse(100% 60% at 50% 30%);
}
.slide_mv img {
transform: translateY(0px) scale(1.3);
margin-top: 7%;
}
.slide li .txt {
max-width: 60%;
}
.slide li:nth-child(1) .txt { top: 0; bottom: 0;}
.slide li:nth-child(2) .txt { top: 0;bottom: 0; right: 0}
.slide li:nth-child(3) .txt { left: 0;}
.slide li:nth-child(4) .txt {}

.pc{ display: none !important;}
.sp{ display: block !important;}

#main_area02 ,
#main_area03 {
margin: 0px auto 0;
}

aside {
display: none;
}
.member_head_btn {
display: none;
}
.openbtn1 {
display: block;
}
#g-nav{
max-width: 90%;
min-width: 90%;
position: fixed;
z-index: 99;
top: 0;
right: -120%;
width: 90%;
height: 100vh;
background: #fff;
transition: all 0.6s;
border-radius: 0;
margin-top: 0;
}
#g-nav.panelactive{
right: 0;
}
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
	height: auto;
	width: 90%;
}
#g-nav li.big:first-child {
margin-top: 0;
}
.openbtn1{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
	background: #ED7A94;
	border-radius: 100px;
}
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }
.openbtn1 span:nth-of-type(1) {
	top:15px;	
}
.openbtn1 span:nth-of-type(2) {
	top:23px;
}
.openbtn1 span:nth-of-type(3) {
	top:31px;
}
.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn1.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
#g-nav li.big a {
font-size: 18px;
}
#g-nav li a {
font-size: 12px;
}
/*#g-nav li.big:first-child {
margin-top: 0;
}*/
.member_head .sp_footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #EBEBEC;
transition: 0.3s;
visibility: hidden;
opacity: 0;
pointer-events: none;
z-index: 999;
display: block;
}
.member_head.scroll-nav .sp_footer {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.member_head .sp_footer.hide_box {
display: none !important;
}
.member_head .sp_footer ul {
width: 90%;
margin: 0 auto 0 auto;
padding: 10px 0 10px;
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.member_head .sp_footer ul li {
width: 31%;
margin: 0 1%;
max-width: 200px;
}
.member_head .sp_footer p.close{
  position: absolute;
  right: 5px;
  top:5px;
}
.member_head .sp_footer p.close a{
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
}
.member_head .sp_footer p.close a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.member_head .sp_footer p.close a img{
width: 16px;
z-index: 888;
}
.slide {
overflow-x: auto !important;
overflow-y: hidden;
}
.slick-dotted.slick-slider {
margin-bottom: 0px;
padding-bottom: 0px;
}
.slick-dots {
bottom: 120px !important;
transform: translateY(0px);
}
@keyframes fadezoom {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-30px);
  }
}


#area-3 .service_img .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
display: block;
}

.btn_otameshi {
width: 450px;
max-width: 80%;
margin: 0px auto 20px;
transform: translateY(0px);
}
.btn_otameshi a {
padding: 15px 0 15px;
}
.btn_otameshi a p {
font-size: 18px;
padding-right: 25px;
width: 90%;
}
.btn_otameshi a p::after {
width: 10px;
height: 10px;
bottom: 45%;
}
.haitatsu {
margin-top: 0;
}

main {
margin: 0 auto;
max-width: 90%;
width: 400px;
}

.scroll-point .box .content_img {
width: 100%;
}


/*box内共通css*/
.scroll-point .box .inner {
padding: 50px 0;
}
.scroll-point .box .num {
height: 60px;
margin: 0 auto 0 50px;
text-align: left;
}
.scroll-point .box .mini_ttl span {
font-size: 14px;
}
.scroll-point .box .big_ttl span {
font-size: 26px;
line-height: 1.8;
}
.scroll-point .box .normal_txt {
font-size: 16px;
}
.ribbon_r, .ribbon_l {
padding: 7px 0 8px;
}
.ribbon_r {
padding-right: 20px;
}
.ribbon_l {
padding-left: 20px;
}






.area-4 .inner {
max-width: 90%;
}
.area-4 .title {
width: 90%;
}
.area-4 .title p {
font-size: 13px;
}
.area-4 .title img {
margin: 0 20px;
}
.area-4 .copy_ttl {
width: 90%;
font-size: 22px;
text-align: center;
}


#area-3 .ac {
max-width: 100%;
}
#area-3 .point_text {
width: 90%;
}
#area-3 .point_text dd .ttl {
font-size: 15px;
}
#area-3 .support .big_ttl, #area-3 .otoku .big_ttl {
max-width: 100%;
}
#area-3 .deli_box h3 {
font-size: 20px;
}
#area-3 .deli_box h3 img {
width: 60px;
}
#area-3 .deli_box h3 img.osusume {
width: 75px;
}
#area-3 .deli_box h3 small {
font-size: 13px;
}
#area-3 .more_btn, #area-3 .more_btn.locker {
line-height: 1.2;
}
#area-3 .more_btn small, #area-3 .more_btn.locker small {
font-size: 12px;
line-height: 1.4;
}
#area-3 .service_img img {
height: 250px;
}

#area-3 .service_img_thx {
max-width: 90%;
}
#area-4 .calendar {
width: 100%;
}
#area-4 p.mini_text.tel_text {
margin-bottom: 40px;
}
#area-4 p.mini_text.tel_text.tel_ttl {
margin-bottom: 10px;
}



.contact_sodan .inner h3 {
font-size: 30px;
}
.contact_sodan .tel_area {
width: 100%;
pointer-events: auto;
}
.contact_sodan .more_btn {
font-size: 16px;
}
.contact_sodan .more_btn:after {
right: 13px;
}

.member_foot {
padding: 30px 0 45vh;
}


}


@media screen and (max-width: 945px){
.slide li {
clip-path:ellipse(80% 60% at 50% 28%);
}
.slick-dots {
bottom: 100px !important;
}
.slick-dotted.slick-slider {
margin-bottom: 0 !important;
}
.member_head h1 {
max-width: 70%;
}
.member_head h1 .logo {
margin-right: 10px;
}
.member_head h1 .lp_top {
max-width: 70px;
}


#main_area02 ,
#main_area03 {
margin: 0px auto 0;
}

.area_box h3.ic {
font-size: 25px;
}
.area_box h3.ic img {
max-width: 150px;
}
.area_box .more_btn {
max-width: 90%;
}
.more_btn_img {
width: 85%;
margin: 20px auto 0;
display: block;
}
#area-3 .more_btn ,
#area-3 .more_btn.locker {
max-width: 100%;
}
#area-3 .ac-label p {
font-size: 16px;
}
#area-3 .pink_ttl img {
width: 95%;
}
#area-3 .point_text dt img {
width: 25px;
}
#area-4 .calendar dl {
width: 90%;
}
#area-4 .calendar dl dd {
font-size: 14px;
}

#area-1 p,
#area-2 p,
#area-23 p,
#area-4 p {
font-size: 17px;
}


}

@media screen and (max-width: 830px){
.slide li {
height: auto;
}
.w_wrap {
width: 100%;
}
}

@media screen and (max-width: 812px){


.pcView{ display: none !important;}
.spView{ display: block !important;}



.slide li {
max-height: 76svh;
height: auto;
/*clip-path:circle(158% at 50% -48.5%);*/
clip-path:ellipse(100% 62% at 50% 25%);
}
.slide li .txt {
width: 500px;
max-width: 90%;
}
.slide li:nth-child(1) .txt { top: initial; bottom: 10%;}
.slide li:nth-child(2) .txt { top: initial;bottom: 10%; right: 0; left: initial;}
.slide li:nth-child(3) .txt {}
.slide li:nth-child(4) .txt { left: 0;}
.slide_mv img {
width: 100%;
height: 100%;
transform: scale(1.2);
}
.slide_mv img {
transform: translateY(-50px) scale(1);
margin-top: 0;
}

.slick-dots {
bottom: 120px !important;
}

main {
max-width: 100%;
width: 100%;
}
#main_area02 ,
#main_area03 {
margin: 0px auto 0;
}
.scroll-point .box .inner {
max-width: 80%;
padding: 120px 0;
}

}

@media screen and (max-width: 414px){
.slick-dots {
bottom: 25px !important;
}
.slide_mv img {
transform: translateY(0px) scale(1);
margin-top: 0;
}


#main_area02 ,
#main_area03 {
margin: -0px auto 0;
}
    
}