@charset "utf-8";
/* CSS Document */

/*---------------------------------*/
/*#go_beginner h1{
    border-bottom: 2px solid #ffebe9;
    height: auto;
    padding:0;
    margin: 20px 0 50px;
}*/
#go_beginner h1 span {
    display: block;
    font-size: 22px;
    line-height: 1.6em;
    padding-top: 30px;
}
#go_beginner h1 img{
    width: 100%;
}
/* 明朝体 */
.font_min {
    font-family: "Shippori Mincho",  "游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
}
/* 共通余白 */
.beginner_box {
    margin: 0 20px 50px;
}
/* 画像リンクをホバーで透明度下げる場合に付与 */
a.clear--link:hover {
    opacity: 0.7;
  }
/* はじめての方へ独特のリンクテキスト */
a.beginner--link {
    font-weight: bold;
    color: var(--color-main);
    position: relative;
}
a.beginner--link::after{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-bottom: 2px solid var(--color-main);
    border-right: 2px solid var(--color-main);
    transform: rotate(315deg) translateY(-50%);
    position: absolute;
    top:50%;
    right: -15px;
}
a.beginner--link:hover,
a.beginner--link:hover::after {
    /* opacity: 0.7; */
    color: var(--color-sub);
    border-bottom-color: var(--color-sub);
    border-right-color: var(--color-sub);
}
.beginner_text {
  font-family:"Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 16px;
  font-weight: 600;
}
/*  インデント個別調整*/
.box_idt {
    padding-left: 1em;
    text-indent: -.9em;
}

/* #flow
　注文の流れ　開始 -------------------------------------------- */
#main #flow .beginner_title {
    margin-bottom: 20px;
}
#main #flow .flow_img {
    margin-top: 30px;
}
#main #flow .flow_img img{
    width: 100%;
}
/* 注文の流れ　終了 ------------------------------------------------ */

/* #point
　6つのポイント　開始 -------------------------------------------- */
#main #point .beginner_title {
    margin-bottom: 40px;
}
#main #point .point_list {
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#main #point .point_list li {
    border:2px solid var(--color-sub-base);
    box-sizing: border-box;
    font-family:"Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: bold;
    height: 330px;
    overflow: hidden;
    margin: 0 30px 30px 0;
    position: relative;
    width: calc(100% / 3 - 30px);
}
#main #point .point_list li .point_title {
    margin-top: 15px;
    background: none;
    text-align: center;
    height: auto;
    line-height: 0;
    margin-bottom: 0;
    padding: 0;
}
#main #point .point_list li figure {
    margin: 0;
    height: 133px;
    width: 100%;
}
#main #point .point_list li.point1 figure { background: url(../images/img_point1.jpg) no-repeat center / 100%;}
#main #point .point_list li.point2 figure { background: url(../images/img_point2.jpg) no-repeat center / 100%;}
#main #point .point_list li.point3 figure { background: url(../images/img_point3.jpg) no-repeat center / 100%;}
#main #point .point_list li.point4 figure { background: url(../images/img_point4.jpg) no-repeat center / 100%;}
#main #point .point_list li.point5 figure { background: url(../images/img_point5.jpg) no-repeat center / 100%;}
#main #point .point_list li.point6 figure { background: url(../images/img_point6.jpg) no-repeat center / 100%;}

#main #point .point_list li .number {
    background: url(../images/bg_point_list.png) no-repeat left top;
    background-size: 43px;
    color: #fff;
    font-family:"Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 18px;
    font-weight: bold;
    height: 43px;
    line-height: 1;
    padding: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 43px;
}
#main #point .point_list li:nth-of-type(3n) {
    margin-right: 0;
}
#main #point .point_list li .point_text {
    font-size: 14px;
    letter-spacing: -0.04rem;
    line-height: 1.6;
    padding: 10px 15px 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 190px);
}
#main #point .point_list li .point_text p + p {
    margin-top: auto;
}
#main #point .point_list li .point_text a + a {
    padding-left: 25px;
}
#main #point .point_list li .point_text .box_idt {
    font-size: 12px;
}
#main #point .point_list li .point_text .point_highlight {
    color: #21abac;
}
/* 6つのポイント　終了 ------------------------------------------------ */

/* #campaign
　お得な割引やキャンペーン　開始 -------------------------------------------- */
#main #campaign .campaign_list {
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
#main #campaign .campaign_list li h4{
    font-weight: bold;
    color:#74c6c3;
}
#main #campaign .campaign_list li {
    border: 2px solid #74c6c3;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    height: 180px;
    padding: 20px;
    width:calc(100% / 2 - 15px);
    display: flex;
    flex-direction: column;
    font-size: 24px;
    letter-spacing: -0.02em;
}

#main #campaign .campaign_list li span {
    font-size: 18px;
}
#main #campaign .campaign_list li p{
    letter-spacing: -.016rem;
    font-size: initial;
    color: #666;
}
#main #campaign .campaign_list li p:last-child{
    margin-top: auto;
}

/* お得な割引やキャンペーン　終了 ------------------------------------------------ */

/* #design
　デザインはこちら　開始 -------------------------------------------- */
#main #design .design_wrap {
    margin: 0 0 50px;
}
#main #design .design_wrap .design_box {
    border: 1px solid #d0c9c5;
    box-sizing: border-box;
    margin-bottom: 20px;
    width: 100%;
}
#main #design .design_wrap .design_box.float_50 {
    float: left;
    width: 49%;
}
#main #design .design_wrap .design_box.float_50 + .design_box.float_50 {
    float: right;
}
#main #design .design_wrap .design_box img {
    width: 100%;
}
#main #design .design_wrap .design_box a {
    display: block;
}
/* デザインはこちら　終了 ------------------------------------------------ */

/* #guide
　買い物に関するご案内　開始 -------------------------------------------- */
#main #guide ul {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
}
#main #guide ul li {
    text-align: center;
    width: calc(100% / 3);
    margin-right:20px;
}
#main #guide ul li:last-child {
    margin-right: 0;
}
#main #guide ul li dl{
    border: 2px solid #d3c196;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    font-size: 129%;
    height: 150px; 
    padding: 13px 10px;
}
#main #guide ul li dl dt {
    border-bottom: 2px solid #d3c196;
    padding-bottom: 7px;
}
#main #guide ul li dl dd {
    padding-top: 37px;
    font-size: 18px;
}
#main #guide ul li.guide_ddate dl dd {
    padding-top: 30px;
}
#main #guide ul li.guide_ddate dl dd span {
    display: block;
    font-size: 12px;
}
#main #guide ul li dl .dot_list {
    letter-spacing: -0.07rem;
    padding: 17px 0 0;
    text-align: left;
}
#main #guide ul li dl .dot_list span {
    font-size: 16px;
}
/* 買い物に関するご案内　終了 ------------------------------------------------ */

/* #security
　安心してご注文いただくために　開始 -------------------------------------------- */
/* 2019年 年賀状「はじめての方へ」より流用 */
#main #security {
    margin-bottom: 50px;
}
#main #security h3 {
    margin-bottom: 30px;
    padding:0 0 5px 20px;
    border-bottom: #503930 dashed 1px;
    font-weight: bold;
}
#main #security > div {
    padding: 0 20px;
    font-size: 88%;
}
#main #security dl+dl {
    margin-top:30px;
}
#main #security .pmark dt {
    width: 135px;
    float: right;
}
/* 安心してご注文いただくために　終了 ------------------------------------------------ */

/* #support_beginner
　困ったときは　開始 -------------------------------------------- */
#main #support_contact .contact_area {
    border: 1px solid #000;
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
    margin-bottom: 40px;
    padding: 15px 40px;
}
#main #support_contact .beginner_title {
    margin-bottom: 30px;
}
#main #support_contact .beginner_box .support_link {
    margin-top: 10px;
}
#main #support_contact .contact_area .contact_box {
    margin-top: 30px;
}
#main #support_contact .contact_area .contact_box + .contact_box {
    margin-top: 10px;
}
#main #support_contact .contact_area .contact_box p {
    display: table-cell;
}
#main #support_contact .contact_area .contact_box .left {
    font-size: 16px;
    text-align: right;
    width: 375px;
}
#main #support_contact .contact_area .contact_box .right {
    font-size: 14px;
    padding-left: 30px;
    width: 260px;
}
/* 困ったときは　終了 ------------------------------------------------ */