@charset "UTF-8";
/* all page ----- */
*{
    line-height: normal;
}
body {
    min-width: auto;
    width: 100%;
    margin: auto;
}

@media screen and (min-width:768px) {
body {
/*    max-width: 1000px;*/
    width: 100%;
    margin: auto;
}
}

img {
    max-width: 100%;
}

/*h1,h2,h3,h4,h5*/
h4{
    font-weight: normal;
    padding: 0;
    margin: 0;
}

ul,ol {
    padding: 0;
    margin: 0;
}

ul li, ol li {
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div, p, span, section, article {
    box-sizing: border-box;
}

.pc_only{
   display: none; 
}

@media screen and (min-width:768px){   
.sp_only{
    display: none;
}
.pc_only{
    display: initial;
}
}

/*------------------------------------------------------------
　mother
------------------------------------------------------------*/

#mothersday { width: 100%; overflow: hidden;}
:root{
    --font-hirago: "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
    --font-hiramin: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "游明朝体", sans-serif;
    --font-alegreya: "Alegreya", sans-serif;
    --font-alegreya-sc: "Alegreya Sans SC", sans-serif;
    --font-din: "DIN Alternate","Roman",sans-serif;
    --font-avenir: "Avenir","DIN Alternate","Roman",sans-serif;
    --dark: #333333;
    --red: #7d2a38;
    --mot: #7d2a38;
    --motbk: #fdf7f6;
}


#mothersday article{
    padding: 0;
    margin: 0;
}
/* 通常imgとして設置するならこっち .pointbg{} */
/* 背景imgとして設置するならこっち .bgpoint{} */
#mothersday .bgpoint{
    position: absolute;
}
@media screen and (min-width: 768px) {
#mothersday article{
    width: 1000px; 
}
#mothersday section{
    width: 100%;
    margin: 0 auto 80px;
}   
}

/* main 
==================== */

#mothersday .mainimg {
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
}

@media screen and (min-width:768px) {
#mothersday .mainimg {
    margin: 0 auto 50px;
}
}

/* intro
==================== */
#mothersday .intro{

}
#mothersday .intro.inner{
    margin: auto;
}

#mothersday .intro_tls{
    display: flex;
    align-items: center;
}
#mothersday .intro_tls .ttl{
    color: var(--mot);
    font-family: var(--font-hiramin);
    font-weight: 600;
    margin: 3% 0;
}
#mothersday .intro_tls .ttl li:first-child{
    font-size: 30px;
}
#mothersday .intro_tls .ttl li:last-child,
#mothersday .intro_tls .ttl li.ttl_h1 h1{
/*    margin-top: -3%;*/
    font-size: 22px;
    letter-spacing: 0.01em;
}
#mothersday .intro_tls .ttl li > span{
    letter-spacing: 0.07em;
    margin: 0 3px;
}
#mothersday .intro_txt p{
    width: 90%;
    margin: 0 auto 3%;
    color: var(--dark);
    font-family: var(--font-hiramin);
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

@media only screen and (max-width:767px){/* sp only */
#mothersday .intro_tls{
    flex-direction: column;
    text-align: center;
}
#mothersday .intro_txt p.subs{
    padding-top: 3%;
    margin: 4% auto;
    border-top: 1px #ccc dotted;
}
}

@media screen and (min-width:768px) {
#mothersday .intro{

    }
#mothersday .intro.inner{
    position: relative;
    width: 100%;
    }
#mothersday .intro_tls .pointbg{
    margin-right: 2%;
}
#mothersday .intro_tls .ttl{
    margin: 2% 0 0;
}
#mothersday .intro_txt p{
    width: 97%;
    margin: 3% auto;
    position: relative;
    z-index: 2;
    font-size: 16px;
}
#mothersday .intro_txt p.subs{
    width: 100%;
    text-align: right;
    margin-right: -5%;
}
#mothersday .intro .bgpoint.pointimg-a{
    top: 0;
    right: 0;
    z-index: 1;
}
}


/* navi
==================== */
#mothersday nav .navi_ttl{
    padding: 5% 0;
    color: var(--mot);
    font-family: var(--font-avenir);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-align: center;
}
#mothersday nav .navi_wrap{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#mothersday nav .navi_wrap > li{
    position: relative;
}
#mothersday nav .navi_wrap a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#mothersday nav .wrap_box{
    width: 100%;
    text-align: center;
}
#mothersday nav .navi_number{
    color: var(--mot);
    font-family: var(--font-avenir);
    font-size: 18px;
    letter-spacing: 0.1em;
}
#mothersday nav .navi_name{
    padding: 6% 0;
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 15px;
    font-weight: 500;
}

@media only screen and (max-width:767px){/* sp only */
#mothersday nav .navi_wrap{
    flex-wrap: wrap;
}
#mothersday nav .navi_wrap > li{
    width: 50%;
    padding: 1% 0;
    margin: 3% 0;
}
#mothersday nav .navi_wrap > li:nth-child(even){
    border-left: 1px #ccc solid;
}
}

@media screen and (min-width:768px) {
#mothersday nav .navi_ttl{
    display: none;
}
#mothersday nav .navi_wrap{
    justify-content: space-around
}
#mothersday nav .navi_wrap > li{
    width: 100%;
    border-left: 1px #ccc solid;
}
#mothersday nav .navi_wrap > li:last-child{
    border-right: 1px #ccc solid;
}
#mothersday nav .navi_number{
    font-size: 22px;
}
}

/* recommend
==================== */
#mothersday .recom{
    background: var(--motbk);
}
#mothersday .recom .inner{
    position: relative;
    padding: 12% 0 1%;
    margin: 50px auto;
}
#mothersday .recom .bgpoint.pointimg-a{
    top: 30px;
    left: 30px;
    z-index: 1;
}
#mothersday .recom .tls{
    width: 80%;
    margin: 0 auto 30px;
    text-align: center;
}
#mothersday .recom .en_ttl{
    color: var(--mot);
    font-family: var(--font-alegreya-sc);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .15em;
}
#mothersday .recom .jp_ttl{
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
}
#mothersday .recom .img_ttl{
    max-width: 100%;
    padding: 8% 0;
}
#mothersday .recom_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 2%;
}
#mothersday .recom_wrap.shelf_1st{}/*area ranking 1-2*/
#mothersday .recom_wrap.shelf_2nd{ background: #fff; margin: 0 2%;}/*area ranking 3-5*/
#mothersday .recom_wrap.shelf_2nd .box_img > img{ border-radius: 50%;}

@media only screen and (max-width:767px){/* sp only */
#mothersday .recom_wrap{ flex-direction: column;}
}

@media screen and (min-width:768px) {
#mothersday .recom .inner{ padding: 6% 0 1%;}
#mothersday .recom .bgpoint.pointimg-a{ top: 50px; left: 50px;}
#mothersday .recom .en_ttl{ font-size: 22px;}
#mothersday .recom .jp_ttl{ font-size: 26px;}
#mothersday .recom .img_ttl{ padding: 4% 0 2%;}
#mothersday .recom_wrap.shelf_1st{ padding: 0 60px;}
#mothersday .recom_wrap.shelf_2nd{ margin: 6% 60px;}
}


/* boxitem base all */
#mothersday .boxitem{
    position: relative;
}
#mothersday .boxitem a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
}
/* ranking boxitem base grid */
#mothersday .ranking .boxitem{
    display: grid;
    width: 100%;
    padding: 8%;
    grid-template:
    "img img"auto
    "txt txt"auto
    "colsize pic"auto
    "price pic"auto
    "dtl dtl"auto
    / auto auto;
    align-content: start;
    justify-content: center;
}

/* grid-area 各boxの配置場所指定 */
#mothersday .ranking .boxitem .box_img{ grid-area: img; }
#mothersday .ranking .boxitem .box_txt{ grid-area: txt; }
#mothersday .ranking .boxitem .box_col{ grid-area: colsize;}
#mothersday .ranking .boxitem .box_price{ grid-area: price; margin-left: 5%; white-space: nowrap;}
#mothersday .ranking .boxitem .box_pic{ grid-area: pic; justify-self: right;}

/* 「.box_dtl」は後半に記述 */

/* ランキング会員価格（本店だけHTMLに追加した時に効く） */
#mothersday .ranking .boxitem .price_wrap{
  grid-area: price;
  align-self: end;
}
/* 会員価格 */
#mothersday .member_price{
  margin:5px 0 0 5%;
  color:#7d2a38;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  white-space: nowrap;
}
/* 会員価格ラベル */
#mothersday .member_price::before{
  content:"会員価格";
  display:block;
  font-size:11px;
  color:#473933;
  font-weight:500;
  margin-bottom:2px;
}
/* 円(税込) */
#mothersday .member_price::after{
  content:"円(税込)";
  margin-left:2px;
  font-size:12px;
  font-weight:bold;
}

/* rank 1-2, giftset */
#mothersday .ranking .shelf_1st .boxitem{
    background: #fff;
}

@media only screen and (max-width:767px) {/* sp only */
#mothersday .ranking .shelf_2nd .boxitem{/*3-5*/
    display: grid;
    width: 100%;
    padding: 4% 2% 6%;
    grid-template:
    "img txt"auto
    "img txt"auto
    "colsize colsize"auto
    "price pic"auto
    "dtl dtl"auto
    / 49% 1fr;
    place-items: start center;
}
#mothersday .ranking .shelf_2nd .box_img{ place-self: center center; margin-bottom: 15px;}
#mothersday .ranking .shelf_2nd .box_txt{ width: 100%; padding-left: 8px;}
#mothersday .ranking .shelf_2nd .box_col{ place-self: center start;}
#mothersday .ranking .shelf_2nd .box_pic > img{ margin-top: -50px;}
}

@media screen and (min-width:768px) {
#mothersday .ranking .shelf_1st .boxitem{/*1-2*/
    width: 410px;
    padding: 5%;
}
#mothersday .ranking .shelf_2nd .boxitem{/*3-4*/
    width: 260px;
    padding: 4% 1%;
}
}


/* parts ----- li label, name, comm */
#mothersday .boxitem .box_txt ul{ display: flex; flex-direction: column; padding: 0 1%;}
#mothersday .boxitem .box_txt .li_label { order: 1; }
#mothersday .boxitem .box_txt .li_name { order: 3; }
#mothersday .boxitem .box_txt .li_comm{ order: 2; }

/* ranking only ----- no, name, comm */
#mothersday .ranking .boxitem div[class*="_label"],
#mothersday .ranking .boxitem li[class*="_label"],
#mothersday .ranking .boxitem p[class*="_label"]{
    padding: 1% 0;
    font-family: var(--font-hiramin);
    font-size: 36px;
    text-align: center;
}
#mothersday .ranking .boxitem div[class*="_name"],
#mothersday .ranking .boxitem li[class*="_name"],
#mothersday .ranking .boxitem p[class*="_name"]{
    padding: 3% 0;
    text-align: center;
    border-top: 1px #473933 solid; 
}
#mothersday .ranking .boxitem div[class*="_name"] > h3,
#mothersday .ranking .boxitem li[class*="_name"] > h3,
#mothersday .ranking .boxitem p[class*="_name"] > h3{
    display: inline-block;
    color: var(--dark);
    font-size: 15px;
    font-weight: normal;
    text-align: left;
    line-height: 1.6;
    letter-spacing: 0.05em;
}
#mothersday .ranking .boxitem div[class*="_comm"],
#mothersday .ranking .boxitem li[class*="_comm"],
#mothersday .ranking .boxitem p[class*="_comm"]{
    padding: 3% 0;
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
}
@media only screen and (max-width:767px){/* sp only */
#mothersday .ranking .shelf_2nd .boxitem div[class*="_label"],
#mothersday .ranking .shelf_2nd .boxitem li[class*="_label"],
#mothersday .ranking .shelf_2nd .boxitem p[class*="_label"]{
    font-size: 29px;
}
#mothersday .ranking .shelf_2nd .boxitem div[class*="_name"],
#mothersday .ranking .shelf_2nd .boxitem li[class*="_name"],
#mothersday .ranking .shelf_2nd .boxitem p[class*="_name"]{
    padding: 3% 0;
}
#mothersday .ranking .shelf_2nd .boxitem div[class*="_name"] > h3,
#mothersday .ranking .shelf_2nd .boxitem li[class*="_name"] > h3,
#mothersday .ranking .shelf_2nd .boxitem p[class*="_name"] > h3{
    font-size: 14px;
}
#mothersday .ranking .shelf_2nd .boxitem div[class*="_comm"],
#mothersday .ranking .shelf_2nd .boxitem li[class*="_comm"],
#mothersday .ranking .shelf_2nd .boxitem p[class*="_comm"]{
    padding: 3% 0;
    font-size: 13px;
}
}

@media screen and (min-width:768px){
/*
#mothersday .ranking .boxitem .box_col{
    margin-top: -10px;
}
*/
#mothersday .ranking .boxitem .li_name{
    height: 90px; /* 改行が入るとずれるので固定 */
}
}

/* all boxitem - parts ----- price, shipping free 価格と送料無料 */
#mothersday .boxitem div[class*="_price"],
#mothersday .boxitem li[class*="_price"],
#mothersday .boxitem p[class*="_price"]{
    color: #7d2a38;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
#mothersday .boxitem div[class*="_price"]::after,
#mothersday .boxitem li[class*="_price"]::after,
#mothersday .boxitem p[class*="_price"]::after{
    content: "円(税込)";
    margin-left: 1%;
    font-size: 13px;
}
#mothersday .boxitem div[class*="_price"] > span::after,
#mothersday .boxitem li[class*="_price"] > span::after,
#mothersday .boxitem p[class*="_price"] > span::after{
    content: "送料無料";
    display: block;
}
@media only screen and (min-width:768px) {/* pc only */
#mothersday .boxitem div[class*="_price"],
#mothersday .boxitem li[class*="_price"],
#mothersday .boxitem p[class*="_price"]{
    margin-top: 20px;
}
#mothersday .boxitem div[class*="_price"] > span::after,
#mothersday .boxitem li[class*="_price"] > span::after,
#mothersday .boxitem p[class*="_price"] > span::after{
    margin-top: -20px;
} 
}

/* giftset boxitem base grid */
#mothersday .giftset .boxitem{
    display: grid;
    width: 100%;
    padding: 4%;
    grid-template:
    "img label"auto
    "img name"1fr
    "price pic"auto
    "dtl dtl"auto
    / auto auto;
    align-content: start;
    justify-content: start;
    background: #ffffff;
}
/* grid-area 各boxの配置場所指定 */
#mothersday .boxitem .box_img{ grid-area: img; }
#mothersday .boxitem .box_label{ grid-area: label; }
#mothersday .boxitem .box_name{ grid-area: name; }
#mothersday .boxitem .box_price{ grid-area: price; align-self: end;}
#mothersday .boxitem .box_pic{ grid-area: pic; justify-self: center}

#mothersday .giftset .box_img{
    margin-right: 5%;
}
#mothersday .giftset .box_label{
    padding-bottom: 2%;
    color: var(--mot);
    font-family: var(--font-alegreya-sc);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
#mothersday .giftset .box_name{
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 15px;
}
#mothersday .giftset .box_price{
    margin-bottom: 2%;
}
#mothersday .giftset .box_pic{
    margin-top: -50%;
}


/* =========================
   giftset 会員価格（本店だけHTMLに追加した時に効く）
========================= */

#mothersday .giftset .member_block{
  margin-top:12px;
  line-height:1.3;
}
/* 会員価格ラベル */
#mothersday .giftset .member_label{
  display:block;
  font-size:11px;
  color:#473933;
  font-weight:500;
  margin-bottom:2px;
}
/* 会員価格 */
#mothersday .giftset .member_value{
  display:block;
  color:#7d2a38;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.05em;
  line-height:1.5;
  white-space:nowrap;
}
#mothersday .giftset .member_value::after{
  content:"円(税込)";
  margin-left:2px;
  font-size:13px;
}


@media only screen and (max-width:767px) {/* sp only */
#mothersday .giftset .boxitem{
    grid-template-columns: 50% 1fr;
    padding: 8% 4%;
    margin-bottom: 5%;
}    
}

@media screen and (min-width:768px) {
#mothersday .giftset .boxitem{
    grid-template-columns: 180px 1fr;
    width: 410px;
    padding: 4%;
    margin-bottom: 6%;
}
}

/* pie chart
==================== */
#mothersday .piechart.inner{
    position: relative;
    padding: 12% 0 1%;
    margin: 50px auto;
}
#mothersday .piechart .bgpoint.pointimg-a{
    top: 30px;
    left: 30px;
}
#mothersday .piechart .tls{
    width: 80%;
    margin: 0 auto 30px;
    text-align: center;
}
#mothersday .piechart .jp_ttl{
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 20px;
    letter-spacing: 0.1em;
}
#mothersday .piechart .jp_ttl > p{
    margin: 4% auto;
    font-size: 16px;
}
#mothersday .piechart .img_ttl{
    max-width: 100%;
    padding: 5% 0;
}

/* chart area base */
#mothersday .chart_wrap{
    position: relative;
}
#mothersday .chartbg{
    width: 100%;
    padding: 110px 0 225px; 
    margin: auto;
    text-align: center;
}
/* chart btn base */
#mothersday .btn_wrap{
    position: absolute;
}
#mothersday .chart_btn{
    position: relative;
    display: grid;
    width: 100%;
    padding: 1% 0 4%;
    grid-template: 
    "ico entl"auto
    "ico jptl"1fr
    / auto auto;
    align-content: start;
    justify-content: center;
}
#mothersday .chart_btn a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
    z-index: 5;
}
/* grid-area 各boxの配置場所指定 */
#mothersday .chart_btn .chartico{ grid-area: ico; z-index: 2;}
#mothersday .chart_btn .en_tl{ grid-area: entl; z-index: 3;}
#mothersday .chart_btn .jp_tl{ grid-area: jptl; z-index: 3;}

#mothersday .chart_btn .chartico{
    align-self: end;
    margin-right: 5px;
}
#mothersday .chart_btn .en_tl{
    color: var(--mot);
    font-family: var(--font-alegreya);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
#mothersday .chart_btn .jp_tl{
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 13px;
}
#mothersday .chartbtnbg{
    position: absolute;
    top: 60%;
    left: 65%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
@media only screen and (max-width:767px){/* sp only */
#mothersday .piechart .img_ttl{
    width: 38%;
    padding: 15% 0 5%;
    margin: auto;
}
#mothersday .btn_wrap{
    width: 50%;
}
#mothersday .chart_btn .chartico > img{
    width: auto;
    height: auto;
/*    height: 82%;*/
}
#mothersday .chartbtnbg{
    width: 60%;
}
/* ボタンの位置 */
/* 1 --- Fine Pajamas */
#mothersday .btn_wrap.btn01 {top: 0; right: 0;}
/* 2 --- One Piece  Pajamas */
#mothersday .btn_wrap.btn02 {bottom: 18%; right: 0;}
/* 3 --- Sweet Dreams, Fine Pajamas */
#mothersday .btn_wrap.btn03 {bottom: 0; right: 25%;}
/* 4 --- Cozy Loungewear */
#mothersday .btn_wrap.btn04 {bottom: 19%; left: 0;}
/* 5 --- Towels, Sleep Products */
#mothersday .btn_wrap.btn05 {top: 0; left: 0;}
}

@media screen and (min-width:768px){
#mothersday .piechart.inner{ padding: 20px 0 50px; border: 1px #ccc solid; box-sizing: border-box;}
#mothersday .piechart .bgpoint.pointimg-a{ top: 50px; left: 50px;}
#mothersday .piechart .jp_ttl{ font-size: 28px; letter-spacing: 0.15em;}
#mothersday .piechart .jp_ttl > p{ margin: 15px auto; font-size: 20px;}
#mothersday .chartbg{ padding: 120px 0 250px;}
#mothersday .chart_btn .en_tl{ font-size: 18px; margin-bottom: 8px;}
#mothersday .chart_btn .jp_tl{ font-size: 16px;}

/* ボタンの位置 */
/* 1 --- Fine Pajamas */
#mothersday .btn_wrap.btn01 {top: 10%; right: 13%;}
/* 2 --- One Piece  Pajamas */
#mothersday .btn_wrap.btn02 {top: 52%; right: 13%;}
/* 3 --- Sweet Dreams, Fine Pajamas */
#mothersday .btn_wrap.btn03 {top: 72%; left: 40%;}
/* 4 --- Cozy Loungewear */
#mothersday .btn_wrap.btn04 {top: 52%; left: 13%;}
/* 5 --- Towels, Sleep Products */
#mothersday .btn_wrap.btn05 {top: 10%; left: 13%;}

}

/* pickup
==================== */
#mothersday .pickup{
    margin: 100px auto;
}
#mothersday .list_tls{
    display: grid;
    width: 100%;
    padding: 0;
    grid-template: 
    "ico tls"auto
    "ico tls"auto
    "bg bg"auto
    / auto 1fr;
    align-content: center;
    justify-content: start;
}
/* grid-area 各boxの配置場所指定 */
#mothersday .list_wrap{ grid-area: tls; z-index: 2;}
#mothersday .list_ico{ grid-area: ico; z-index: 2;}
#mothersday .list_bg{ grid-area: bg; z-index: 1;}

#mothersday .list_tls .list_wrap{
    align-self: center; /*grid prop*/
    display: flex;
    width: 100%;
}
#mothersday .list_tls p.en_ttl{
    color: var(--mot);
    font-family: var(--font-alegreya);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.10em;
}
#mothersday .list_tls h3.jp_ttl{
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 14px;
    font-weight: normal;
    line-height: 0;
    letter-spacing: 0.05em;
}
#mothersday .list_tls p.jp_word{
    color: var(--mot);
    font-family: var(--font-hirago);
    font-size: 14px;
    font-weight: normal;
}
#mothersday .list_tls .list_ico{
    width: 50px;
}
#mothersday .list_tls .list_ico > img{
    width: 100%;
    height: auto;
}
#mothersday .list_tls .list_bg{
    width: 100%;
}

@media only screen and (max-width:767px){
#mothersday .list_tls .list_wrap{
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    margin-left: -5%;
    margin-bottom: 30px;
}
#mothersday .list_tls .list_ico{
    padding-top: 20px;
}
#mothersday .list_tls .list_bg{
    margin-top: -50px;
}
}

@media screen and (min-width:768px) {
#mothersday .list_tls .list_wrap{
    justify-content: space-between;
    padding-bottom: 15px;
}    
#mothersday .list_tls .list_wrap > li:last-child{
    margin-right: 90px;
    align-self: flex-end;
}
#mothersday .list_tls p.en_ttl{ font-size: 18px;}
#mothersday .list_tls h3.jp_ttl{ font-size: 18px;}
#mothersday .list_tls p.jp_word{ font-size: 16px;}
#mothersday .list_tls .list_ico{ width: 70px; margin-right: 10px;}
#mothersday .list_tls .list_ico > img{ width: 100%;}
#mothersday .list_tls .list_bg{ margin-top: -100px;}
}


/* wrapping
==================== */
#mothersday .wrapping{
    width: 100%;
    padding: 10% 2% 2%;
    margin: 50px auto;
    border: 1px #ccc solid;
}
#mothersday .wrapping.inner{
    position: relative;
}
#mothersday .wrapping .bgpoint.pointimg-a{
    top: 30px;
    left: 30px;
    z-index: 1;
}
#mothersday .wrapping .tls{
    width: 80%;
    margin: 0 auto 30px;
    text-align: center;
}
#mothersday .wrapping .en_ttl{
    color: var(--mot);
    font-family: var(--font-alegreya-sc);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .15em;
}
#mothersday .wrapping .jp_ttl{
    padding: 3% 0;
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 24px;
    letter-spacing: 0.08em;
}
#mothersday .wrapping .jp_ttl > p:first-child{
    font-weight: 600;
}
#mothersday .wrapping .jp_ttl > p:last-child{
    font-size: 20px;
    margin: 1% 0;
}
#mothersday .wrp_intro{
    display: flex;
    flex-direction: column;
}
#mothersday .wrp.txtwrap{
    order: 2;
    width: 80%;
    margin: auto;
    color: var(--dark);
    font-family: var(--font-hiramin);
    font-size: 18px;
    text-align: center;
    line-height: 2rem;
    letter-spacing: 0.10em;
}
#mothersday .wrp.imgwrap{
    order: 1;
    margin: 2% auto;
}
#mothersday .tls_wrap{
    margin: 50px auto;
    padding: 0 2%;
    text-align: center;
}
#mothersday .wrp.tls{ font-family: var(--font-hirago); font-weight: 600;}
#mothersday .wrp.tls{
	display: flex;
	justify-content: center;
	align-items: center;
    width: 100%;
    margin: 0;
    color: #666;
	font-size: 22px;
	text-align: center;
    border: none;
    letter-spacing: 0.10em;
}
#mothersday .wrp.tls::before,
#mothersday .wrp.tls::after {
	content: '';
	height: 1px;
	background-color: #999;
    flex-grow: 1;
}
#mothersday .wrp.tls::before {
	margin-right: 25px;
}
#mothersday .wrp.tls::after {
	margin-left: 25px;
}

#mothersday .wrap_list{
    display: flex;
    justify-content: space-between;
}
#mothersday .boxwrp{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#mothersday .wrp_gift a,
#mothersday .wrp_easy a,
#mothersday .wrp_option a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
    z-index: 10;

}
#mothersday .boxwrp > p{ text-align: center;}
#mothersday .boxwrp > .wrp_name{
    order: 1;
    color: var(--dark);
    font-family: var(--font-alegreya);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05em;
}
#mothersday .boxwrp > .wrp_comm{
    order: 4;
    width: 85%;
    padding: 5% 0;
    margin: 15px auto 0;
    box-sizing: border-box;
    border-top: 1px #666 solid;
    color: var(--dark);
    font-family: var(--font-hirago);
    font-size: 15px;
    line-height: 1.8;
}
#mothersday .boxwrp > .wrp_price{
    order: 3;
    color: #7d2a38;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
#mothersday .wrp_gift .boxwrp > .wrp_price::after{
    content: "円(税込)";
    margin-left: 1%;
    font-size: 13px;
}
#mothersday .boxwrp > .wrp_img{
    order: 2;
    padding: 5% 0;
}
#mothersday .boxwrp.bouquet .wrp_att{
    order: 5;
    text-align: left;
}
#mothersday .wrp_easy,
#mothersday .wrp_option{
    position: relative;
    width: 99%;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}
#mothersday .wrp_att{
    position: relative;
    display: inline-block;
    padding: 3% 4%;
    margin: 0 auto;
    box-sizing: border-box;
    color: var(--red);
    font-family: var(--font-hirago);
    font-size: 14px;
    text-align: left;
    line-height: 1.6rem;
    border: 1px solid var(--red);
}
#mothersday .wrp_about{
    position: relative;
    width: 90%;
    padding: 5%;
    margin: 80px auto;
    border: 2px var(--mot) dotted;
    border-radius: 10px;
    font-family: var(--font-hirago);
}
#mothersday .wrp_abt_wrap{
    text-align: left;
    line-height: 1.6em;
}
#mothersday .wrp_abt_wrap .box_ttl{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
#mothersday .wrp_abt_wrap .box_ttl::before{ content: "■ ";}
#mothersday .wrp_abt_wrap dl{ margin-bottom: 15px;}
#mothersday .wrp_abt_wrap dd{ padding: 3% 2%; font-size: 14px;}
#mothersday .wrp_abt_wrap .goto_bq{
    padding: 1% 0;
    font-weight: bold;
    text-align: center;
}


@media only screen and (max-width:767px) {/* sp only */
#mothersday .wrp.tls{ font-size: 18px;}
#mothersday .wrap_list{ flex-direction: column;}
#mothersday .boxwrp{ margin-bottom: 20px;}
#mothersday .wrp_easy img,
#mothersday .wrp_option img{ width: 90%;}
#mothersday .wrp_abt_ttl{
    font-size: 16px;
    padding: 2% 0;
    margin: 0 10% 8%;
    text-align: center;
    border-bottom: 1px solid var(--red);
}
#mothersday .wrp_abt_wrap .goto_bq{ font-size: 14px;}
}

@media screen and (min-width:768px) {
#mothersday .wrap_list{
    display: flex;
    justify-content: space-between;
    padding: 0 1%;
}
#mothersday .wrp_easy,
#mothersday .wrp_option{
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
}
#mothersday .wrp_about{
    padding: 5% 8% 3%;
}
#mothersday .wrp_abt_ttl{
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, -15%);
    -webkit-transform: translate(-50%, -15%);
    -ms-transform: translate(-50%, -15%);
    width: auto;
    padding: 0 3%;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.1em;
    background: #fff;
}
#mothersday .wrp_abt_wrap .box_ttl{
    font-size: 16px;
    font-weight: 600;
    text-indent: -1.2em;
}
#mothersday .wrp_abt_wrap dd{
    width: 100%;
    padding: 2%;
    font-size: 16px;
}
#mothersday .wrp_abt_wrap .goto_bq{
    margin-right: 10px;
    text-align: right;
}
}


/* itemlist .ver mothersday
==================== */
#mothersday .itemlist{
    margin: 0 auto 50px;
}
#mothersday .wrp_abt_ttl{
    color: var(--mot);
}
#mothersday .wrp_about_more{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 5% 0 0;
    margin: 30px auto;
    border-top: 1px var(--dark) solid;
    border-bottom: 1px var(--dark) solid;
}
#mothersday .wrp_about_more > p{
    text-align: center;
}

@media screen and (min-width:768px) {
#mothersday .itemlist{
    margin: 3% auto 50px;
}
#mothersday .wrp_about{
    width: 80%;
    padding: 5% 8% 3%;
}
#mothersday .wrp_about_more{
    flex-direction: row;
    width: 80%;
    padding: 3% 0;
}
#mothersday .wrp_about_more > p{
     margin-right: 3%;
}    
}


/* video
==================== */
#mothersday .mov{
    width: 100%;
    margin: 10% auto;
}
#mothersday .mov .movie{
    display: block;
    width: 90%;
    margin: auto;
}
@media screen and (min-width:768px) {
#mothersday .mov{
    margin: 50px auto 100px;
}
#mothersday .mov .movie{
    width: 100%;
    max-width: 900px;
}
}


/* more もっと見る
==================== */
.listmore{
    width: 100%;
    padding: 1%;
    margin: 10px auto;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--font-hirago);
    font-size: 16px;
    font-weight: 600;
}
@media screen and (min-width:768px) {
.listmore{
    text-align: right;
    }
}

/* goto_bn ... wrp/pair
==================== */

.goto_bn{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 6% auto;
}
.goto_bn img{
    max-width: 100%;
    border: 0;
}
@media screen and (min-width:768px) {
.goto_bn.wrp{
    padding: 10px 0;
    margin: 100px auto;
}    
}

/* bgpoint img for SP only */
@media only screen and (max-width:767px){/* sp only */
#mothersday .recom .bgpoint.pointimg-a > img,
#mothersday .piechart .bgpoint.pointimg-a > img,
#mothersday .wrapping .bgpoint.pointimg-a > img{ width: 55%;}
}



/* fs only --- カラー・サイズ・コメント追加 */
#mothersday .boxdtl{
/* grid item */
    grid-area: dtl;
    padding: 4% 0 1%;
}
#mothersday .boxdtl,
#mothersday .dtl_col,
#mothersday .dtl_size{
    font-size: 13px;
    line-height: 1.7em;
    text-align: left;
}
#mothersday .dtl_col,
#mothersday .dtl_size{
    margin: 1% 0;
}
#mothersday .dtl_col::before,
#mothersday .dtl_size::before{
    content: "";
    display: inline-block;
    background-color: #333;
    width: 5px;
    height: 14px;
    margin: 0 4px 1px 0;
    vertical-align: sub;
}
#mothersday .dtl_comm{
    width: 100%;
    padding: 2% 0;
    margin: 2% auto;
    box-sizing: border-box;
    border-top: 1px #ddd dashed;
    color: #473933;
    font-size: 13px !important;
    text-align: left !important;
}

@media only screen and (max-width:767px){/* sp only */
#mothersday .boxdtl{
    width: 100%;
    padding: 3% 2% 0;
    margin: 10px 0;
}
#mothersday .dtl_col,
#mothersday .dtl_size{
    display: inline-block;
}
#mothersday .dtl_comm{
    display: block;
}
#mothersday .dtl_col{ padding-right: 10px;}

}



/* --- ver.rk and yahoo only */
#mothersday.rk .boxdtl, #mothersday.yahoo .boxdtl,
#mothersday.rk .dtl_col, #mothersday.yahoo .dtl_col,
#mothersday.rk .dtl_size, #mothersday.yahoo .dtl_size{
   display: none;
}
/* --- ver.yahoo only */
#mothersday.yahoo .wrapping .boxwrp.bouquet{
    display: none;
}
@media only screen and (min-width:768px){
#mothersday.yahoo nav,
#mothersday.yahoo .piechart,
#mothersday.yahoo .goto_bn.wrp{
    display: none;    
}
}


#mothersday.rk .mov .mov_wrap{
    width: 100%;
    margin: 0 auto;
    padding: 0 18%;
/*    display: none;*/
}