@charset "UTF-8";

.member_head {
background: #fff;
}
.member_head.scroll-nav .sp_footer {
z-index: 9999;
}
.member_head .sp_footer ul li:first-child {
opacity: 1;
}
aside {
min-width: inherit;
}
aside .btn_limit {
max-width: 80%;
}

.mv {
background: #ABD38A;
padding: 130px 0 20px;
display: block;
position: relative;
}
.mv:after {
content: "";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background: url(../img/bg_dotted.png) repeat-x;
background-size: contain;
}
.mv img {
width: 1093px;
max-width: 90%;
margin: 0 auto;
}

#g-nav li.big {
margin-top: 30px;
}
#g-nav li.big::before ,
#g-nav ul::before {
background: #ABD38A;
}
#g-nav ul::before {
height: 70%;
}

.member_head_btn li:first-child {
pointer-events: auto;
opacity: 1;
}

main {
margin: 50px auto;
}



/*お子さまが生まれるご夫婦に聞いた コープの宅配の素直な感想*/
#area-1 {
width: 100%;
background: none;
margin: 0 auto;
border-radius: 0;
padding: 0;
}
#area-1 .area-1_wrap {
background: #E7F2DD;
padding: 50px 0;
}
#area-1 h3 {
width: 430px;
max-width: 90%;
margin: 0 auto 30px;;
}
#area-1 h4 {
width: 453px;
max-width: 90%;
margin: 0 auto 30px;
}
#area-1 .voice_box {
width: 80%;
background: #fff;
border-radius: 20px;
padding: 5%;
position: relative;
margin-bottom: 30px;
background: url(../img/bg_dotted02.png) repeat;
}
#area-1 .voice_box.box_left {
margin-right: auto;
margin-left: 0;
}
#area-1 .voice_box.box_right {
margin-right: 0;
margin-left: auto;
}
#area-1 .voice_box:before {
content: "";
position: absolute;
left: -10px;
top: -10px;
z-index: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: -1;
border-radius: 20px;
}
#area-1 .voice_box .illust {
float: left;
width: 90px;
max-width: 100%;
margin-right: 10px;
transform: translate(-10px,-10px);
}
#area-1 .voice_box p {
font-weight: 500;
font-size: 20px;
line-height: 2;
margin-bottom: 0;
transform: translate(-10px,-10px);
text-align: justify;
text-justify: inter-ideograph;
}



/*3日間の買い物一覧と献立*/
#area-2 {
width: 100%;
border-radius: 0;
margin: 0 auto;
padding: 0px 0 0px;
background: none;
}
#area-2 .area-2_wrap {
width: 100%;
background: url(../img/bg_nuno.jpg) repeat-y;
background-size: 100%;
padding: 70px 0 100px;
}
#area-2 h3 {
width: 494px;
max-width: 95%;
margin: 0 auto 30px;
}
#area-2 h4 {
width: fit-content;
margin: 0 auto;
font-size: 25px;
line-height: 1.6;
}
#area-2 h4 small {
font-size: 15px;
font-weight: bold;
}
#area-2 p.att {
display: flex;
justify-content: flex-end;
width: 100%;
max-width: 100%;
}
#area-2 figure {
max-width: 100%;
margin: 0 auto 40px;
position: relative;
}
#area-2 figure.recommend:after {
position: absolute;
left: 0;
top:100px;
content: "";
background: #ABD38A;
width: 100%;
height: 100%;
z-index: -1;
}
#area-2 figure.recommend {
transform: translateY(-100px);
margin: 0 auto;
}

.family_profile{
  position: relative;
  background: #E7F2DD;
  margin-top: 30px;
  padding: 20px;
}
.family_profile span{
  position: absolute;
  display: block;
  top: -13%;
  left: -2%;
  width: 100px;
  z-index: 1;
}
.family_profile figure{
  width: 80%;
  margin: 0 auto;
}
.family_profile dl{ margin-top: 10px;}
.family_profile dl dt,
.family_profile dl dd{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.family_profile dl dt{
  width: 33%;
  background: #C7E2B1;
  font-weight: 100;
  padding: 5px ;
  text-align: center;
  border-radius: 10px;
}
.family_profile dl dd{
  width: 67%;
  margin-left: 10px;
}

.order_history{
  position: relative;
  width: 100%;
  margin-top: 130px;
  background: #fff;
  padding: 0 0 50px;
}
.order_history::before{
  position: absolute;
  content: "";
  width: 100%;
  background: url(../img/paper_bg.png) center top no-repeat;
  background-size: cover;
  padding-top: 50%;
  /* height: 10vh; */
  top: -80px;
  left: 0;
  z-index: -1;
}
.order_history > span{
  position: absolute;
  display: block;
  top: -13%;
  left: -2%;
  width: 110px;
}
.order_history h4{
  width: 100%;
  background: url(../img/cart.svg) center center no-repeat;
  background-size: contain;
  text-align: center;
  font-size: 24px;
  padding: 20px 0;
}
.order_history .table{
  width: 90%;
  margin: 30px auto 0;
}
.order_history .table dl{
  justify-content: space-between;
  border-bottom: #D6D6D6 1px solid;
}
.order_history .table dl dt{
  width: 80%;
  padding: 0 5px 10px;
  font-size: 16px;
  font-weight: bold;
}
.order_history .table dl dd{
  width: 20%;
  margin-bottom: 0;
  padding: 0 5px 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}
.order_history .table dl dd span.att{
  font-size: 0.8em;
	vertical-align: top;
}
.order_history .table dl:nth-last-child(2){ border-bottom: #D6D6D6 2px solid;}
.order_history .table dl.thead{
  margin-bottom: 10px;
  border-bottom: none;
}
.order_history .table dl.thead dt{
  background: #ABD38A;
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
  font-weight: bold;
  border-right: 2px solid #fff;
}
.order_history .table dl.thead dd{
  background: #ABD38A;
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
}
#area-2 .order_history .note {
  width: 90%;
  margin: 20px auto 0;
}





/*おためしキャンペーン実施中！*/
#area-3 {
width: 100%;
max-width: 100%;
background: #ABD38A;
border-radius: 0;
margin: 0 auto;
padding: 30px 0 50px;
}
#area-3 figure {
width: 538px;
max-width: 100%;
margin-bottom: 30px;
position: relative;
z-index: 0;
}
#area-3 p {
font-size: 25px;
display: flex;
justify-content: center;
width: auto;
}
#area-3 .campaign_btn {
width: 551px;
max-width: 90%;
margin: 0 auto;
transition: 0.3s;
display: block;
}
#area-3 .campaign_btn:hover {
opacity: 0.7;
}


#area-1 ,
#area-2 ,
#area-3 {
margin-top: -100px;
padding-top: 100px;
}


@media screen and (max-width: 999px){
.mv {
padding: 30px 0 10px;
}
.mv img {
width: 349px;
}

#area-1 .voice_box {
width: 90%;
}
#area-1 .voice_box .illust {
width: 70px;
}
#area-1 .voice_box p {
font-size: 16px;
line-height: 1.6;
}
#area-2 h4 {
font-size: 19px;
}
#area-3 p {
font-size: 18px;
margin-bottom: 30px;
}

  .order_history > span{
    width: 80px;
    top: -7%;
  }
  .order_history::before {
    background: url(../img/paper_bg.png) center top no-repeat;
    background-size: contain;
    top: -52px;
  }
  .order_history .table dl dt,
  .order_history .table dl dd{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
  }
  .order_history .table dl:nth-child(2) dd{ display: inline;}
  .order_history .table dl:last-child dd{ width: 40%;}
.family_profile dl:last-child dt {
text-align: left;
}


#area-1 ,
#area-2 ,
#area-3 {
margin-top: -80px;
padding-top: 80px;
}

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

}

/* -------------------------------------
tab (1000~1100px)
------------------------------------- */
@media screen and (max-width: 1100px){

  .order_history::before {
    top: -60px;
  }
}

/* -------------------------------------
SP (~768px)
------------------------------------- */
@media screen and (max-width: 768px){

.order_history {
margin-top: 90px;
}
  .order_history::before {
    top: -95px;
  }
  .family_profile figure {
  width: 100%;
  margin: 0 auto 20px !important;
  }
}

/* -------------------------------------
SP (~580px)
------------------------------------- */
@media screen and (max-width: 580px){

  .order_history::before {
    top: -75px;
  }
    
}

/* -------------------------------------
SP (~414px)
------------------------------------- */
@media screen and (max-width: 414px){

  .order_history::before {
    top: -55px;
  }
    
}