@charset "UTF-8";

/* 共通横幅 */
.w-100 {
    width: 100% !important;
}

/* 全体共通太字 */
.bold {
    font-weight: bold;
}

/* 共通display-flex */
.d-flex-w {
    display: flex;
}

/* 共通display-flex（縦並び） */
.d-flex-h {
    display: flex;
    flex-flow: column;
}

/* 可変d-flex */
.d-flex-kahen {
    display: flex;
}

/* d-flex の中身のサイズを均等にする */
.flex_1 {
    flex: 1;
}

/* d-flex-wを中央寄せ均等にする */
.flex-container {
    justify-content: center;
    align-items: stretch;
}

/* d-flex-wを中央寄せにする */
.flex-container_align-center {
    align-items: center;
    justify-content: center;
}

/* d-flex-wの横幅が超過する場合自動で改行 */
.wrap {
    flex-wrap: wrap;
}

/* d-flex-hを中央寄せ均等にする */
.justify-content-center {
    align-items: center;
    justify-content: center;
}

/* d-flex-hを中央寄せ均等にする（文字は左寄せ） */
.justify-content-left {
    align-items: left;
    justify-content: center;
}

/* d-flex-hを等間隔配置にする */
.justify-content-space-between {
    justify-content: space-between;
}

/* d-flexの高さをそろえる */
.flex-direction-column {
    flex-direction: column;
}

/* テキストの配置 */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* 共通margin */
.m-0 {
    margin: 0;
}

.mt-0-1 {
    margin-top: 0.1em;
}

.mt-0-2 {
    margin-top: 0.2em;
}

.mt-0-3 {
    margin-top: 0.3em;
}

.mt-0-4 {
    margin-top: 0.4em;
}

.mt-0-5 {
    margin-top: 0.5em;
}

.mt-0-6 {
    margin-top: 0.6em;
}

.mt-0-7 {
    margin-top: 0.7em;
}

.mt-0-8 {
    margin-top: 0.8em;
}

.mt-0-9 {
    margin-top: 0.9em;
}

.mt-1-0 {
    margin-top: 1em;
}

.mt-1-5 {
    margin-top: 1.5em;
}

.mt-2-0 {
    margin-top: 2em;
}

.mt-2-5 {
    margin-top: 2.5em;
}

.mt-3-0 {
    margin-top: 3em;
}

.mt-3-5 {
    margin-top: 3.5em;
}

.mt-4-0 {
    margin-top: 4em;
}

.mt-4-5 {
    margin-top: 4.5em;
}

.mt-5-0 {
    margin-top: 5em;
}

.mt-5-5 {
    margin-top: 5.5em;
}

.mb-0-1 {
    margin-bottom: 0.1em;
}

.mb-0-2 {
    margin-bottom: 0.2em;
}

.mb-0-3 {
    margin-bottom: 0.3em;
}

.mb-0-4 {
    margin-bottom: 0.4em;
}

.mb-0-5 {
    margin-bottom: 0.5em;
}

.mb-0-6 {
    margin-bottom: 0.6em;
}

.mb-0-7 {
    margin-bottom: 0.7em;
}

.mb-0-8 {
    margin-bottom: 0.8em;
}

.mb-0-9 {
    margin-bottom: 0.9em;
}

.mb-1-0 {
    margin-bottom: 1em;
}

.mb-1-5 {
    margin-bottom: 1.5em;
}

.mb-2-0 {
    margin-bottom: 2em;
}

.mb-2-5 {
    margin-bottom: 2.5em;
}

.mb-3-0 {
    margin-bottom: 3em;
}

.mb-3-5 {
    margin-bottom: 3.5em;
}

.mb-4-0 {
    margin-bottom: 4em;
}

.mb-4-5 {
    margin-bottom: 4.5em;
}

.mb-5-0 {
    margin-bottom: 5em;
}

.mb-5-5 {
    margin-bottom: 5.5em;
}

.me-0-1 {
    margin-right: 0.1em;
}

.me-0-2 {
    margin-right: 0.2em;
}

.me-0-3 {
    margin-right: 0.3em;
}

.me-0-4 {
    margin-right: 0.4em;
}

.me-0-5 {
    margin-right: 0.5em;
}

.me-0-6 {
    margin-right: 0.6em;
}

.me-0-7 {
    margin-right: 0.7em;
}

.me-0-8 {
    margin-right: 0.8em;
}

.me-0-9 {
    margin-right: 0.9em;
}

.me-1-0 {
    margin-right: 1em;
}

.ms-0-1 {
    margin-left: 0.1em;
}

.ms-0-2 {
    margin-left: 0.2em;
}

.ms-0-3 {
    margin-left: 0.3em;
}

.ms-0-4 {
    margin-left: 0.4em;
}

.ms-0-5 {
    margin-left: 0.5em;
}

.ms-0-6 {
    margin-left: 0.6em;
}

.ms-0-7 {
    margin-left: 0.7em;
}

.ms-0-8 {
    margin-left: 0.8em;
}

.ms-0-9 {
    margin-left: 0.9em;
}

.ms-1-0 {
    margin-left: 1em;
}

/* 共通で表示固定 */
.d-block {
    display: block;
}

/* pcの時表示 */
.d-pc-block {
    display: block;
}

/* spの時非表示 */
.d-sp-block {
    display: none;
}


/* 以下のstyleはPCベース */
/* コンテンツ全体の横幅 */
.container {
    width: 960px;
    clear: both;
    overflow: hidden;
    background-image: none;
    margin: 40px auto 0;
}

/* トップメインコンテンツ全体 */
#main_contents {
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/pc/01_main_bgmain.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    width: 960px;
    min-height: 611px;
}

/* トップメインコンテンツの左側 */
.main_contents_left {}

/* トップメインコンテンツの右側 */
.main_contents_right>div {
    margin: 0 1.5em;
}

/* トップメインコンテンツの注意文 */
.main_contents_note {
    margin: 0 1.5em;
}

.main_contents_note>div {
    border: 1px solid #1f4e78;
    padding: 0.5em 0;
    font-size: 0.9em;
    color: #1f4e78;
}

/* トップメインコンテンツのタイトル部分の共通設定 */
.contents_title{}

.contents_title div {
    width: -moz-fit-content;
    /* Firefox */
    width: fit-content;
    /* other browsers */
}

/* トップメインコンテンツのタイトル帯 */
.contents_title h2 {
    padding: 0.5em 0;
    text-align: center;
}

/* トップメインコンテンツのタイトル1の配置 */
.contents_title div:nth-child(1) {
    font-size: 0.8em;
    font-family: sans-serif;
}

/* トップメインコンテンツのタイトル2の配置 */
.contents_title div:nth-child(2) {
    font-size: 1.1em;
    font-family: sans-serif;
    line-height: 1.8em;
}

/* トップメインコンテンツのタイトル3の配置 */
.contents_title div:nth-child(3) {
    font-size: 2.1em;
    font-family: serif;
    line-height: 1;
    max-width: 480px;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/01_main_titleband.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;

}

.contents_title div:nth-child(3) span {
    font-size: 2rem;
    font-family: serif;
    line-height: 1;
    letter-spacing: 0.2em;
    display: block;
}

/* トップメインコンテンツのタイトル4の配置 */
.contents_title div:nth-child(4) {
    font-size: 1.5em;
    font-family: sans-serif;
    line-height: 1.25;
    margin-top: 0.3em;
}

/* キャンペーン開催期間 */
.main_contents_left>.contents_campaign_limit {
    margin: 0.5em 1.5em 0;
}

.main_contents_left>.contents_campaign_limit div {
    color: #fff;
    background-color: #000000;
    padding: 0.5em 1em;
    font-size: 0.8em;
    border-radius: 50px;
    opacity: 0.5;
}

.main_contents_left>.contents_campaign_limit p {
    color: #bc0000;
    font-size: 14px;
}

/* 「ご購入はこちらから」ボタン */
.main_contents_left>.contents_buy_linkbtn {
    margin: 0.5em 1.5em 0;
}

.main_contents_left>.contents_buy_linkbtn a {
    background-color: #945475;
    color: #fff;
    border-radius: 6px;
    font-size: 1.125em;
}

.main_contents_left>.contents_buy_linkbtn a:hover {
    background-color: #943c69;
    cursor: pointer;
}

.main_contents_left>.contents_buy_linkbtn a>div {
    padding: 0.5em 0;
}

/* トップメインコンテンツ、年賀状（喪中）のタイプ */
.contents_nenga_type {
    position: relative;
}

/* トップメインコンテンツの年賀画像横並び */
.contents_two_type>div {
    margin: 0 0.2em;
}

.contents_two_type>div>img {
    box-shadow: 3px 3px 3px gray;
    border: 1px solid #E1E1E1;
}

.contents_two_type>div>span {
    font-size: 0.6em;
}

.contents_select_type {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/* ページ内リンク3種 */
#on_point01:hover,
#on_point02:hover,
#on_point03:hover {
    opacity: 0.8;
    filter: brightness(110%);
    cursor: pointer;
}

/*○○販売サイトはこちら*/
#shoplink_contents {
    background-color: #f8f8f8;
}

#shoplink_contents>div {
    padding: 1.5em;
}

#shoplink_contents h4 {
    margin: 0 0 0.4em;
    border-bottom: 1px #945475 dotted;
}

#shoplink_contents h4>a {
    color: #945475;
}

#shoplink_contents p {
    font-size: 0.8em;
    line-height: 1.5;
}

.shoplink_btn a>div {
    background-color: #945475;
    color: #fff;
    border-radius: 50px;
}

.shoplink_btn a>div:hover {
    background-color: #943c69;
    filter: brightness(110%);
    cursor: pointer;
}

.shoplink_btn a>div>span {
    font-size: 2em;
}

#shoplink_left {
    margin-right: 1em;
}

#shoplink_right {
    margin-left: 1em;
}

/* ご利用にあたっての注意事項 */
#shopnote_contents h4 {
    color: #c70b17;
}

#shopnote_contents ul {
    padding: 1em 2em;
    border: 1px solid #c70b17;
}

#shopnote_contents ul>li {
    font-size: 0.8em;
    list-style: disc;
}

/* ネット購入だけの6大特典キャンペーン */
#campaign06_contents>div:nth-child(1) {
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/pc/06_campaign06_cpttl.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
}

#campaign06_contents>div:nth-child(2) {
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/pc/06_campaign06_cpbg.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 2em;
}

#campaign06_contents h2 {
    padding: 1.5em 0;
    color: #fff;
}

.campaign06_container div {
    width: 30%;
}

.campaign06_container img {
    padding: 1.5em 1.5em 0.5em 1.5em;
}

/* 画像6種のテキストカラー */
.campaign06_container>div:nth-child(1) span {
    color: #e66034;
}

.campaign06_container>div:nth-child(2) span {
    color: #76bb55;
}

.campaign06_container>div:nth-child(3) span {
    color: #e25a68;
}

.campaign06_container>div:nth-child(4) span {
    color: #5aa3cb;
}

.campaign06_container>div:nth-child(5) span {
    color: #7c6faf;
}

.campaign06_container>div:nth-child(6) span {
    color: #f18240;
}

/* メルシーポイント */
#mercipointdetail_contents {
    padding: 1.5em;
}

#mercipointdetail_contents .mercipoint_main {
    position: relative;
    padding: 0.2em;
    background-color: #ffffff;
    border: 2px solid #e2787e;
    border-radius: 6px;
    text-align: center;
}

#mercipointdetail_contents .mercipoint_main::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    border-top: 15px solid #e2787e;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;

}

#mercipointdetail_contents .mercipoint_main::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    border-top: 15px solid #ffffff;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

#mercipointdetail_contents .mercipoint_main h3 {
    font-size: 30px;
    font-weight: bold;
    color: #e2787e;
}

#mercipointdetail_contents .mercipoint_detail h4 {
    font-size: 1.1em;
    line-height: 1.2;
    font-weight: bold;
    color: #e2787e;
    padding: 1.1em 0;
}

#mercipointdetail_contents .mercipoint_detail h4 span {
    font-size: 1.5em;
}

#mercipointdetail_contents .mercipoint_detail ul li {
    font-size: 0.7em;
    text-indent: -1em;
    padding-left: 1em;
}

#mercipointdetail_contents .mercipoint_detail ul li:before {
    content: '※';
}

#mercipointdetail_contents #merci_anchor {
    width: 410px;
    height: 60px;
    background-color: #e2787e;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

#mercipointdetail_contents #merci_anchor span {
    line-height: 1;
    padding-left: 22px;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/07_mercipointdetail_arrowanchor.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 18px 12px;
}

#merci_anchor:hover {
    opacity: 0.8;
    filter: brightness(110%);
    cursor: pointer;
}

/* point */
#point01_contents {}

#point02_contents .point02_main_message {
    font-size: 1.8em;
}

#point01_contents h2 {
    padding-top: 2.5em;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/08_point01_pointbg.png);
    background-repeat: no-repeat;
    text-align: center;
}

#point02_contents h2 {
    padding-top: 2.5em;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/09_point02_pointbg.png);
    background-repeat: no-repeat;
    text-align: center;
}

/* 「あいさつ文や差出人を 印刷してお届け！」の部分 */
#point01_contents div>div:nth-child(1) {
    margin-right: 1em;
}

/* 「宛名印刷も無料で承ります」の部分 */
#point01_contents div>div:nth-child(2) {
    margin-left: 1em;
}

/* 「年賀状の投函時期について」の部分の表示順操作 */
#point02_contents>div>div:nth-child(1) {
    order: 1;
}

#point02_contents>div>div:nth-child(2) {
    order: 2;
}

#point02_contents .point02_main_image {
    margin: 1em;
    width: 80%;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
    transform: rotate(5deg);
}

/* メルシーポイントの申請用入力フォーム */
#mercipoint_contents h2 {
    padding-top: 2.5em;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/10_mercipoint_mercipointbg.png);
    background-repeat: no-repeat;
    text-align: center;
}

#mercipoint_contents #merci_button {
    width: 500px;
    height: 60px;
    background-color: #e2787e;
    color: #fff;
    border-radius: 60px;
    text-align: left;
    text-decoration: none;
}

#mercipoint_contents #merci_button span {
    font-size: 1.1em;
    line-height: 1;
    padding-left: 2em;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/arrow_right.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    background-size: 23px 27px;
}

#mercipoint_contents #merci_button em {
    font-size: 1.6em;
    vertical-align: -10%;
    font-style: normal;
}

#mercipoint_contents ul li {
    font-size: 0.8em;
    text-indent: -1em;
    padding-left: 1em;
}

#mercipoint_contents ul li:before {
    content: '※';
}

#mercipoint_contents .mercipoint_shinsei>div {
    border: 2px solid #000;
    padding: 1.5em;
}

#mercipoint_contents .mercipoint_shinsei>div span {
    color: #c70b17;
}

#merci_button:hover {
    opacity: 0.8;
    filter: brightness(110%);
    cursor: pointer;
}

#news_contents h2 {
    padding-top: 2.5em;
    background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/11_news_newsbg.png);
    background-repeat: no-repeat;
    text-align: center;
}


/* 以下は画面横幅が小さくなった時用のstyle */
@media (max-width: 750px) {

    /* pcの時表示 */
    .d-pc-block {
        display: none;
    }

    /* spの時非表示 */
    .d-sp-block {
        display: block;
    }

    /* 可変d-flex */
    .d-flex-kahen {
        display: flex;
        flex-flow: column;
    }

    .container {
        margin-top: 6em !important;
        width: 100%;
    }

    /* 各コンテンツでmarginが必要になるものの共通margin */
    #shopnote_contents,
    #point01_contents,
    #point02_contents,
    #mercipoint_contents,
    #news_contents {
        margin: 0 1.5em;
    }

    /* トップメインコンテンツ全体 */
    #main_contents {
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/sp/01_main_bgmain.png);
        background-size: cover;
        background-position: top center;
        width: 100%;
        min-height: 840px;
    }

    .contents_title div:nth-child(3) {
        font-size: 2em;
    }

    /* トップメインコンテンツの左側 */
    .main_contents_left {
        /* margin:0 1.5em; */
    }

    /* トップメインコンテンツの右側 */
    .main_contents_right {
        /* margin:0 1.5em 0; */
    }

    /* 選べる2つのイラスト */
    .contents_select_type img {
        width: 80%;
    }

    .contents_campaign_limit h3 {
        font-size: 1.1em;
    }

    /* トップメインコンテンツの注意文 */
    .main_contents_note {
        padding-top: 3.5em;
    }

    .main_contents_note>div {
        font-size: 0.8em;
        padding: 0.5em;
    }

    .main_contents_note>div img {
        width: 1.4em;
    }

    /* 大矢印 */
    #arrow_contents img {
        width: 3em;
    }

    /*○○販売サイトはこちら*/
    #shoplink_left {
        margin-right: 0;
        margin-bottom: 3em;
    }

    #shoplink_right {
        margin-left: 0;
        margin-bottom: 3em;
    }

    /* ネット購入だけの6大特典キャンペーン */
    .campaign06_container div {
        width: 50%;
    }

    #campaign06_contents>div:nth-child(1) {
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/sp/06_campaign06_cpttl.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
    }

    #campaign06_contents>div:nth-child(2) {
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/sp/06_campaign06_cpbg.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
        padding-bottom: 2em;
    }

    #campaign06_contents h2 {
        padding: 0.5em 0;
        color: #fff;
    }

    /*メルシーポイント申請リンク*/
    #mercipointdetail_contents #merci_anchor {
        width: 280px;
    }

    #mercipointdetail_contents .mercipoint_main h3 {
        font-size: 1.1em;
    }

    #mercipointdetail_contents .mercipoint_detail ul {
        margin-bottom: 2em;
    }

    #point01_contents h2 {
        padding-top: 2.5em;
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/08_point01_pointbg.png);
        background-repeat: no-repeat;
        background-position: top center;
    }

    #point02_contents h2 {
        padding-top: 2.5em;
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/09_point02_pointbg.png);
        background-repeat: no-repeat;
        background-position: top center;
    }

    #point01_contents h2 {
        font-size: 1.3em;
    }

    /* 「年賀状の投函時期について」の部分の表示順操作 */
    #point02_contents>div>div:nth-child(1) {
        order: 2;
        text-align: center !important;
    }

    #point02_contents>div>div:nth-child(2) {
        margin: 0;
        order: 1;
        text-align: center !important;
    }

    #point02_contents .point02_main_message {
        font-size: 1.6em;
    }

    #mercipoint_contents h2 {
        padding-top: 2.5em;
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/10_mercipoint_mercipointbg.png);
        background-repeat: no-repeat;
        background-position: top center;
    }

    #news_contents h2 {
        padding-top: 2.5em;
        background-image: url(/client_info/ITOYA/view/userweb/sc/mochu_asset/img/common/11_news_newsbg.png);
        background-repeat: no-repeat;
        background-position: top center;
    }

    /* 「あいさつ文や差出人を 印刷してお届け！」の部分 */
    #point01_contents div>div:nth-child(1) {
        margin-right: 0;
        margin-bottom: 2.5em;
    }

    /* 「宛名印刷も無料で承ります」の部分 */
    #point01_contents div>div:nth-child(2) {
        margin-left: 0;
        margin-bottom: 1.5em;
    }

    #point01_contents div>div:nth-child(2) img {
        text-align: center;
        width: 53%;
    }

    /* 「年賀状の投函時期について」の部分の表示順操作 */
    #point02_contents .point02_main_image {
        width: 52%;
    }

    /*メルシーポイント申請フォームボタン*/
    #mercipoint_contents #merci_button {
        width: 280px;
    }

    #mercipoint_contents #merci_button span {
        font-size: 1.2em;
    }

    #mercipoint_contents #merci_button em {
        font-size: 1.2em;
    }
}