#content::before{ background-image: url(../images/plan/main.jpg); background-repeat: no-repeat; background-position: center center; background-size:cover; content:""; display: block; width:100%; height:260px; }
#content p, .list .text{ text-align:left; }
.caption{ font-size:.7rem;}
.no{ display:block; color:#eeafb5; text-align:left; font-size:1.5rem; font-weight:bold; padding-left:10px;}
.no+h2{ color:#570a12; margin-top:0; text-align:left; font-size:2rem;  position: relative;}
.no+h2 span{ display:block; background-color:#fff;  padding-left:10px; }
.text h3+p{ background-color: #eee; display:block; padding:5px;  }
.price{ color:#f00; font-weight:bold; margin:0; }
.price::after{ color:#222; font-size:0.8rem; font-weight:normal; margin-left:5px; }
#plan02 .no+h2 span{ background-color:#eee; }
#content h2+p{ margin-bottom: 30px; }
#plan01 li{ flex-basis: 48%; }
#plan01 li h3{ margin-bottom:0; }
#plan01 p.price{ text-align:right; }
#plan01 li a{ white-space: nowrap; }
#plan01 .price::after, #plan03 .price::after{ content:'万円（税込み）'; display:inline-block; }
#plan02{ background-color: #eee; }
#plan02 ul{ background-color:#fff; border:1px #570a12 solid; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; }
#plan02 .cost{ -webkit-align-items: flex-end; align-items: flex-end; }
#plan02 .cost span::after{ content:'円（税込み）'; display:inline-block;  font-size: 0.8rem;}
#plan02 .before{ font-size:1.8rem; }
#plan02 .before::before{ content:'合計'; display:inline-block; margin-right:10px; font-size: 0.8rem;}
#plan02 .after::before{ content:'パック価格'; display:inline-block; margin-right:10px; font-size: 0.8rem; }
#plan03 .list .text{ position: relative; }
#plan03 .list .price{ text-align: right; }
@media screen and (min-width: 600px){/* ＰＣ & タブレット */
    .price{ font-size:2.5rem; }
    .price .decimal{ font-size:1.8rem; }
    .no+h2::before{ content:""; height:2px; background-color:#570a12; position: absolute; top:50%; left:0; margin-top:-1pdx; width:50%; }
    #content section#plan02{ padding:50px 0; margin-top:50px;}
    #plan01 li{ margin-bottom:60px; }
    #plan01 li .list>*{ flex-basis: 49%;} 
    #plan01 li a{  margin-top:1em; }
    #plan02 ul{ padding:20px 2%; margin-bottom:50px;  }
    #plan02 li{ max-width:24%; }
    #plan02 .cost span{ line-height:2.5rem; }
    #plan02 .arrow{ margin:0 10px; } #plan02 .arrow img{ display:block; position: relative; top:50%; transform: translateY(-50%);}
    #plan03 div.no02 .list{ flex-direction:row-reverse; }
    #plan03 .logo{ max-width:130px; max-height:30px; float:left; margin-bottom:1em;}
    #plan03 h3{display: inline-block; margin:5px 0 0 15px;}
    #plan03 h3+*{ clear:both; }
    #plan03 .image{ flex-basis: 45%; } 
    #plan03 .text{ flex-basis: 53%; } 
    #plan03 .list .text h3+p+p{ display: inline-block; }
    #plan03 a{ margin:1em 0; position: relative; left:50%; transform: translateX(-50%);}
    #plan03 .no01, #plan03 .no02{ margin-bottom:60px;}
    @media screen and (min-width: 1000px){
        #plan03 .list .text h3+p+p{ height:92px;}
    }

}
@media screen and (max-width: 599px){/* スマートフォン（ディスプレイ幅599px以下）より小さい画面 */
    .price{ font-size:2rem; }
    .price .decimal{ font-size:1.4rem; }
    #content section#plan02{ padding:30px 0; margin-top:30px;}
    .image{ margin-bottom:10px; }
    #plan01 li{ margin-bottom:30px; }
    #plan01 .text{ width:100%; }
    #plan01 li a{ width:100%; }
    #plan02 ul{ padding:10px 1%; margin-bottom:30px; }
    #plan02 li{ flex-basis: 48%;  margin-bottom:10px; }
    #plan02 .cost.list>*{ flex-basis: 100%; }
    #plan02 .arrow img{ transform: rotate(90deg);}
    #plan03>div{ margin-bottom:30px; }
    #plan03 h3{ margin:10px 0;} #plan03 h3+p{ margin:0;}
    #plan03 .list a{ margin-top:20px; margin-bottom:40px;}
}