@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
* {font-family: 'Noto Sans JP', sans-serif;}
html, body, ol, ul, li, dl, dd, fieldset, legend, h1, h2, h3, h4, h5, td, th, p, input, textarea, form, pre, select, button {font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; margin: 0; padding: 0; line-height: normal; word-wrap: break-word; word-break: break-all; box-sizing: border-box;}
span, em {display: inline-block; vertical-align: top;}
em {font-style: normal;}
a {text-decoration:none; vertical-align: top;}

div.wrapUrl {margin: 0 auto; width: 100%;}
div.wrapUrl div.contentsUrl {position: relative; height: 100%;}
div.wrapUrl div.contentsUrl div.boxInner {margin: 25px auto; width: 630px; height: auto;}
div.boxInner div.view {overflow: hidden; width: 100%; height: auto; background: #fff;}
div.topText {display: inline-block; text-align: left;}
div.topText span.tit {font-size: 32px; color: #1a9afc; letter-spacing: normal;line-height: 1.34; width: 100%;}
div.topText span.subTxt {margin: 25px 0 20px 0; font-size: 15px; color: #646464;}
div.productInfo {display: inline-block; margin-top: 20px; margin-bottom: 60px; width: 100%;}
div.productInfo div.tit {display: inline-block; font-size: 22px; font-weight: 600; color: #121212;}
div.productInfo div.cautionBox {width: 100%; font-size: 14px; color: #808080; padding: 10px 0 0 10px;}
div.productInfo div.box {margin-top: 20px; border: 1px solid #d1d1d1;}
div.productInfo div.box div.cardBox {display: inline-block; width: 100%; height: 600px; text-align: center; background: url("/images/sub/bg_card05-0c807396f54b09851e8fcd5e1fa792a9.png") no-repeat; background-position: cover; position: relative; vertical-align: top;}
div.cardBox div.prodImg {position: absolute; top: 26px; left: 3%; width: 94%; height: 266px; background: #fff; }
div.cardBox div.prodImg > img {display: inline-block; float: left; margin: 20px 40px 20px 20px; width: 224px; height: auto; z-index: 10; border: 1px solid #e0e0e0;}
div.cardBox div.prodImg div.infoImg {display: inline-block; margin: 20px 20px 0 0; float: left; width: 284px; text-align: left; position: relative;}
div.cardBox div.prodImg div.infoImg span.brand {width: 100%; font-size: 16px; color: #808080;}
div.cardBox div.prodImg div.infoImg span.name {margin-top: 3px; width: 100%; font-size: 16px; color: #000;}
div.cardBox div.prodImg div.infoImg a.btnCardSend {display: inline-block;width: 284px; height: 45px; line-height: 45px; font-size: 16px; font-weight: 700; color: #fff; background: #1a9afc; text-align: center; text-decoration: none; position: absolute; top: 126px; left: 0;}
div.cardBox div.prodImg div.infoImg a.btnReplySend {display: inline-block;width: 282px; height: 43px; line-height: 45px; font-size: 16px; font-weight: 700; color: #1a9afc; background: #fff; text-align: center; text-decoration: none; position: absolute; top: 186px; left: 0;border: 1px solid #1a9afc;}
.btnReplySend2 {display: inline-block;width: 282px; height: 48px; line-height: 50px; font-size: 16px; font-weight: 700; color: #1a9afc; background: #fff; text-align: center; text-decoration: none; position: absolute; border: 1px solid #1a9afc; margin: 10px 176px 10px;}

div.cardBox div.cardCont {position: absolute; top: 316px; left: 3%; right: 3%; width: 94%;}
div.cardBox div.cardCont > div {background: #fff; width: 100%;}
div.cardBox div.cardCont > div > textarea {padding: 20px; width: 590px; height: 216px; font-size: 18px; color: #121212; line-height: 1.56; text-align: left; border: none; outline:  none; resize: none;}
div.cardBox div.cardCont > div > p {padding: 20px; height: 200px; font-size: 18px; color: #121212; line-height: 1.56; text-align: left;}
div.cardBox div.cardCont > div span.sender {margin-left: 20px; width: 100%; height: 42px; line-height: 42px; text-align: left;}

.btn_url a.btnType03 {display:block; width:226px; height:62px; line-height: 62px; font-size: 20px; font-weight: 600; color: #fff; background: #1a9afc; text-align: center; margin: 268px auto 0 auto;}

.rbtn_area {display: inline-block; float: right; margin-top: 6px;}
.btnTypeS01 {display: inline-block; line-height: 30px; font-size: 18px; font-weight: 400; color: #fff; background: #1a9afc; text-align: center; }
.btnTypeS02 {display: inline-block; line-height: 30px; font-size: 18px; font-weight: 400; color: #1a9afc; background: #fff; border: 1px solid #1a9afc; text-align: center; box-sizing: border-box; }
.btnTypeS03 {display: inline-block; line-height: 26px; font-size: 13px; font-weight: 400; color: #1a9afc; background: #fff; border: 1px solid #d1d1d1; text-align: center; box-sizing: border-box; cursor: pointer;}
.btnTypeS04 {display: inline-block; line-height: 26px; font-size: 13px; font-weight: 400; color: #646464; background: #fff; border: 1px solid #d1d1d1; text-align: center; box-sizing: border-box; cursor: pointer;}
.btnAddress, .btnLink {display: inline-block; line-height: 33px; font-size: 20px; font-weight: 400; color: #fff; background: #1a9afc; text-align: center; box-sizing: border-box; border-radius: 10px; width: 220px; cursor: pointer;}
.btnSendMail {box-sizing: border-box; cursor: pointer; border-radius: 5px;}

.w10 {width: 10px;}
.w70 {width: 70px;}
.w140 {width: 140px;}

div.productInfo div.box div.barCodeBox {display: inline-block; margin-top: 20px; margin-bottom: 20px;  width: 100%; text-align: center; vertical-align: top;}
div.barCodeBox span.brand {display: inline-block; width: 90%; font-size: 15px; color: #808080; vertical-align: top;}
div.barCodeBox span.name {display: inline-block; margin-top: 7px; width: 90%; line-height: 130%; font-size: 22px; font-weight: 600; color: #121212; letter-spacing: -0.44px; vertical-align: top;}
div.barCodeBox span.prodImg {width: 224px; height: 224px; background: #fff; border: 1px solid #e0e0e0; margin-top: 15px;}
div.barCodeBox span.prodImg > img {width: 100%; height: auto; z-index: 10;}
div.barCodeBox span.qrCode,
div.barCodeBox div.barCode {display: inline-block; width: 100%; text-align: center; vertical-align: top;}
div.barCodeBox span.qrCode span.qr {width: 120px; height: 120px; background: #000;}
/** div.barCodeBox span.qrCode {margin-top: 25px;} **/
div.barCodeBox div.barCode {margin-top: 25px;}
div.barCodeBox div.barCode span.codeNum {margin: 12px 0; width: 100%; text-align: center; font-size: 17px; font-weight: 600; color: #000;}

div.barCodeBox div.couponCode span.code {margin: 10px auto auto; font-size: 24px;}
/*div.barCodeBox div.couponCode div.codeBox {background: #d1ebff; border-radius: 15px; margin-top: 10px; width: 300px; height: 100px;}*/
div.barCodeBox div.couponCode div.codeTit {cursor: pointer;display: inline-block; height: 42px; line-height: 54px; font-size: 16px; border-bottom: 1px solid #1a9afc; margin-left: 5px; padding: 0 5px 0 5px;}
div.barCodeBox div.couponCode div.codeTit em.view {display: inline-block; margin: 0 0 0 10px; width: 15px; height: 15px; background: url("/images/common/ico_double_blackR-3bdb253ced8c7056982af9af0aa78d22.png") no-repeat 0 0; background-size: 15px 15px; opacity: 0.3; vertical-align: middle; font-size: 0; transform: rotate(90deg);}
div.barCodeBox div.couponCode div.codeCopy a {display: block; cursor: pointer; font-size: 15px; letter-spacing: -1px; color: #1a9afc; position: relative;}
div.barCodeBox div.couponCode div.codeCopy a a:hover {font-weight: 600;}
div.barCodeBox div.sendEmail table.sendMailCard {width:70%; margin: 5% 14% 3%;}
div.barCodeBox div.sendEmail table.sendMailCard tr td:nth-child(odd) {text-align: left;}
div.barCodeBox div.sendEmail table.sendMailCard tr td:nth-child(even) {text-align: right;}
div.barCodeBox div.sendEmail table.sendMailCard input[type="text"] {width: 100%; height: 30px; border: 3px solid #efefef;}
div.barCodeBox div.sendEmail div.btnSend {margin-bottom: 3%;}
div.barCodeBox div.sendEmail div.btnSend a {margin-right: 10px;}

/** double code, link coupon 대응 **/
div.code2Box {margin: 3% 0;}
div.code2Box div.codeBox_first, div.code2Box div.codeBox_second {margin: 3% 0;}
div.code2Box span.codeSubTit{margin-bottom: 1%;}
div.code2Box div.codeCopy, div.code2Box span.coupon_id{font-weight: bold; font-size: larger;}

div.box dl.cardInfoBox {display: inline-block; width:100%; padding: 16px 30px 0 30px; background: #f4faff; vertical-align: top;}
div.box dl.cardInfoBox dt {clear: left; float: left; margin-bottom: 16px; width: 30%; font-size: 22px; font-weight: 900; text-align: left;}
div.box dl.cardInfoBox dd {float: right; margin-bottom: 16px; width: 70%; font-size: 22px; color: #121212; text-align: right;}
div.box dl.cardInfoBox dd > strong {color: #1a9afc;}
div.miniBanner {display: inline-block; margin-top: 35px; width: 100%; height: 140px; background: url("/images/sub/img_sendUrl_01-c0e0e4a88f5e777e2958ddd2195b2ac5.png") no-repeat; background-size: cover; position: relative; vertical-align: top;}
div.miniBanner > p {position: absolute; top: 44px; left: 5%; right: 5%; display: inline-block;  width: 90%; font-size: 18px; color: #fff; line-height: 1.6; text-align: center;}
/* div.introduce {margin-top: 35px;} */
div.introduce div.introTop {border-left: 15px solid #1a9afc; border-top: 15px solid #1a9afc; border-right: 15px solid #1a9afc;}
div.introduce div.introTop > img {width: 100%; height: auto;}
div.introduce div.introTop p.tit {display: inline-block; padding: 20px; width: 100%; font-size: 20px; font-weight: 600; color: #121212; border-top: 1px solid #e2e2e2; vertical-align: top;}
div.introduce div.introCont {border-left: 15px solid #d1ebff; border-bottom: 15px solid #d1ebff; border-right: 15px solid #d1ebff;}
div.introduce div.introCont div.box {display: inline-block; padding: 0 3%; width: 94%; vertical-align: top;}
div.introduce div.introCont div.box p.tit {display: inline-block; padding: 20px; width: 100%; font-size: 20px; font-weight: 600; color: #121212; border-top: 1px solid #e2e2e2; vertical-align: top;}
div.introCont div.box div.introBox {display: inline-block; width: 100%; line-height: 130%; height: auto;}
div.introBox:nth-last-child(1) {margin: 30px 0 30px 0;}
div.introBox div.left,
div.introBox div.otherLeft {float: left; width: 40%; height: 158px;}
div.introBox div.left > img {width: 100%; height: 100%; object-fit: cover;}
div.introBox div.right,
div.introBox div.otherRight {float: right; width: 57%;}
div.introBox div.otherRight > img {width: 100%; height: 100%; object-fit: cover;}
div.introBox div.right span.tit,
div.introBox div.otherLeft span.tit {margin: 6px 0 14px 0; font-size: 14px; color: #1a9afc;}
div.introBox div.right span.txt,
div.introBox div.otherLeft span.txt {font-size: 13px; color: #808080;}
div.couponStatus {padding: 10px; text-align: center;}

div.box > span > p {padding: 10px 0;}

div.mainTitle {margin: 20px 0; font-weight: 600; font-size: 20px;}
div.entryInfo {width: 100%;}
div.entryInfo div.box {margin-bottom: 26px;}
div.entryInfo div.box span.tit {margin-bottom: 4px; width: auto; font-size: 14px; font-weight: 500;}
div.entryInfo div.box div.entry {display: inline-block; width: 100%; vertical-align: top; font-size: 0;}
div.entryInfo div.box div.entry > span.etc {width: 100%; height: 40px; margin-bottom:10px; position: relative;}
div.entryInfo div.box div.entry span.normal {width: 100%;}
div.entryInfo div.box div.entry span.normal input[type="text"] {padding: 0 10px; width: 100%; height: 48px; line-height: 48px; font-size: 14px; font-weight: 500; border: 1px solid #d1d1d1;}
div.entryInfo div.box div.entry span.guideTxt {margin-top: 4px; font-size: 11px; color: #999;}
div.entryInfo div.box div.entry span.txt {font-size: 14px;}
div.entryInfo div.box div.entry div.txt {font-size: 14px;}
div.entryInfo div.box div.entry span.normal > select {padding-left: 6px; width: 50%; height: 48px; line-height: 48px; font-size: 14px; font-weight: 500; border: 1px solid #d1d1d1;}
div.entryInfo div.box div.entry span.normal > textarea {padding: 10px; width: 100%; height: 140px; line-height: normal; font-size: 14px; font-weight: 500; border: 1px solid #d1d1d1;}

input::placeholder {color: #d1d1d1;}
span.checkAgree {position: relative;display: inline-block; margin: 20px 0 0 10px; padding: 0 16%; width: 69%; text-align: center; vertical-align: center;}
span.checkAgree input.checkOk {position: absolute; top: 10%; left: 28%; width: 14px; height: 14px; outline: 0;}
span.checkAgree > label {display: inline-block; padding-left: 34px; cursor: pointer; font-size: 16px; font-weight: 600; color: #808080; position: relative;}
span.checkAgree > label:before {display: block; content: ''; margin-top: -12px; position: absolute; top: 50%; left: 0; width: 26px; height: 26px; background: url("/images/sub/bul_agreeCheck-4aa4d6f9c1935196f4d84c9c3db83d4b.png") no-repeat 0 0; background-size: 26px 26px; z-index: 10;}
span.checkAgree input.checkOk:checked+label:before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 26px; height: 26px; margin-top: -12px; background: url("/images/sub/bul_agreeCheck_ov-e83497c21b014270560af53605617f3d.png") no-repeat 0 0; background-size: 26px 26px; z-index: 10;}

/* 버튼 */
.btnBig {display: inline-block; margin-top: 20px; margin-bottom: 0; padding: 0 30%; width: 40%; font-size: 0; text-align: center; vertical-align: top;}
.btnRegist {display: block; width: 100%; height: 54px; line-height: 54px; font-size: 18px; font-weight: 700; background-color: #1a9afc; color: #fff;  border: 1px solid #1a9afc;}

div.careBox {display: inline-block; border: 1px solid #d1d1d1; padding: 10px; width: 96%; margin-bottom: 30px;}
div.careBox span.icoNoti {float: left; width: 30px; height: 30px; background: url("/images/sub/ico_notice-af68dc6b8694172cf95cf1919bd8306c.png") no-repeat 0 0; background-size: 27px 27px; padding: 5px; margin: 10px 0 0 10px;}
div.careBox ul.notiTxt {float: left; width: 100%; margin: 7px 0 7px 0;}
div.careBox ul.notiTxt li {float: left; width: 100%; font-size: 15px; color: #646464; line-height: 1.67; list-style: none;}

div.postInfo {border: 1px solid #d1d1d1; padding: 10px;}
div.postInfo div.box {margin-bottom: 26px;}
div.postInfo div.box span.tit {margin-bottom: 4px; padding-left: 10px; width: auto; font-size: 14px; font-weight: 500;}
div.postInfo div.box div.entry {display: inline-block; width: 100%; vertical-align: top; font-size: 0;}
div.postInfo div.box div.entry > span.etc {width: 100%; height: 40px; line-height: 48px; position: relative;}
div.postInfo div.box div.entry span.txt {font-size: 14px; padding-left: 20px;}

.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs30 {font-size: 30px;}
.fontW {font-weight: 600;}
.txtBlue {color: #1a9afc;}
.txtRed {color: #ff3333;}
.mt5 {margin-top: 5px;}
.pad5 {padding: 7px;}

div.logo {float: left; height: 60px; line-height: 60px;}
/* div.logo {float: left; height: 60px; line-height: 60px; border-bottom: 1px solid #1a9afc; width: 100%;} */
div.logo > a {display: inline-block; vertical-align: top;}
div.logo > a > img {margin-top: 10px; width: 127px; height: 38px;}

@media (max-width: 629px) {
    div.wrapUrl div.contentsUrl {min-width: 320px;}
    div.wrapUrl div.contentsUrl div.boxInner {margin: 0 auto; width: 100%;}
    div.productInfo div.tit {margin-left: 5px; }
    div.productInfo div.box div.cardBox {position: relative; width: 100%; height: 600px; background: url("/images/sub/bg_card05-0c807396f54b09851e8fcd5e1fa792a9.png") no-repeat; background-position: cover;}
    div.cardBox span.prodImg {position: absolute; top: 50px; left: 50%; margin-left: -95px;  width: 190px; height: 190px; border: 1px solid #e0e0e0;}
    div.cardBox div.cardCont > div > p {height: 230px;}
}