@charset "UTF-8";

/***********************************************/
/* CSS file For Hunglead, Inc.                 */
/* FileName: ir-businessplan.css               */
/* data: 2019/08/06                            */
/* index:                                      */
/*   1 for SmartPhone                          */
/*   2 for Tablet                              */
/*   3 for PC 768                              */
/*   4 for PC 1000                             */
/***********************************************/

/** {
 box-sizing: border-box;
}*/


.link-trial-ri {
 position: relative;
}

.link-trial-ri::before {
 position: absolute;
 content: "";
 height: 72px;
 width: 56px;
 display: block;
 background-image: url(../images/zr-set/icon_trial_20.png);
 background-repeat: no-repeat;
 top: 5px;
 left: 20px;
 z-index: 1;
}

.link-box2 .link-trial a {
 background-image: none;
}

.txtlink a {
 text-decoration: underline;
}

.txtlink a:hover {
 text-decoration: none;
}





/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */


section h2 {
 font-weight: bold;
}



#main-area {
 background: #ffd1e5;
 text-align: center;
 position: relative;
 padding-bottom: 0;
 overflow: hidden;
}

#main-area h1 {
 color:#333;
 display: inline-block;
 font-weight: bold;
 padding: 10px 0;
 text-align: center;
 width: 100%;
 margin: 0 auto;
}


#main-area #main-ttl {
 margin: 25px auto;
}


#main-area ul {
/* width: 90%;*/
 margin: 10px auto;
 min-width: 296px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1000px;
}

#main-area li {
 list-style: none;
 margin-bottom: 10px;
 padding: 0 1%;
 width: 25%;
}


#main-area li img {
 width:100%;
 min-width: 50px;
 max-width: 220px;
 margin: 0;
 height: auto;
}

#main-area li p {
 text-align: left;
 font-size: 16px;
 font-weight: normal;
}


#rec-area {
 background: #f1fbff;
 text-align: center;
 padding-bottom: 5px;
 position: relative;
}

#rec-area::before {
 content: "";
 position: absolute;
 top:-1px;
 left: 50%;
 margin-left: -20px;
 border: 20px solid transparent;
 border-top: 20px solid #ffd1e5;
}

#rec-area > div {
 background: #fff;
 max-width: 1000px;
 margin: 10px auto;
 padding: 30px;
 box-sizing: border-box;
 overflow: hidden;
 width: 98%;
}

#rec-area div p {
 text-align: left;
}

#rec-area div p br {
 display: none;
}

#rec-area img {
 max-width: 270px;
 width: 75%;
 margin: 0 auto 10px;
 height: auto;
}


#rec-area h3 {
 color: #333;
 margin-bottom: 10px;
}

#rec-area h4 {
 color: #333;
 border: #333 2px solid;
 border-radius:30px;
 box-sizing: border-box;
 padding: 10px 20px;
 line-height: 1.3;
 margin: 25px auto;
 min-width: 240px;
 width: 70%;
 text-align: center;
 font-size: 16px;
 }

#rec-area .opt {
 width: 100%;
 max-width: 800px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 margin: 0 auto;
}

#rec-area .opt th,
#rec-area .opt td {
 background: #fff;
 text-align: center;
 display: block;
 border-top: 1px solid #999;
 border-right: 1px solid #999;
 border-bottom: none;
 border-left: none;
 font-size: 14px;
 font-weight: bold;
 padding: 10px 3px;
}

#rec-area .opt td span {
 font-weight: normal;
 font-size: 14px;
}


#rec-area .opt th {
 font-weight: normal;
 background: #efefef;
/* width: 50%;*/
}

#rec-area .opt th span {
 font-weight: normal;
 font-size: 12px;
}

#rec-area .opt th.th-ir {
 background: #eb6da5;
 white-space: nowrap;
 text-align: center;
 font-weight: bold;
 color: #fff;
}

#rec-area .opt th.th-rms {
 background: #bf0000;
/* white-space: nowrap;*/
 text-align: center;
 font-weight: bold;
 color: #fff;
}



#rec-area .opt tr {
 float: left;
 overflow: hidden;
 width: 50%;
}

#rec-area .opt-only tr {
 width: 100%;
}

#rec-areap + table {
 margin: 20px auto;
}

#rec-area .opt td br {
 display: none;
}


#plan-area {
 margin: 0 auto;
 text-align: center;
 padding-bottom: 10px;
 position: relative;
}


#plan-area p::before {
 content: "＼ ";
 }

#plan-area p::after {
 content: " ／";
 }

#plan-area .plan-cont h3 {
 color: #333;
}

#plan-area .plan-cont {
 background: #fff;
 color: #333;
 padding: 0 30px;
 box-sizing: border-box;
 max-width: 1300px;
 margin: 20px auto;
}

#plan-area .plan-cont .plan {
 max-width: 1000px;
 margin: 20px auto;
}

#plan-area .plan div {
 margin-bottom: 30px;
}

#plan-area .plan div:first-of-type {
 display: none;
}

#plan-area .plan table {
 width: 100%;
}

#plan-area .plan th,
#plan-area .plan td {
 border: #ccc 1px solid;
 box-sizing: border-box;
 font-size: 14px;
 line-height: 1.4;
 padding: 5px;
}

#plan-area .plan td.red {
 color: #f00;
}

#plan-area .plan td span {
 font-size: 12px;
}

#plan-area .plan div tr:nth-child(2) td:before {
 content: '商品数：';
}
 
#plan-area .plan div tr:nth-child(3) td:before {
 content: '画像合計：';
}
 
#plan-area .plan div tr:nth-child(4) td:before {
 content: 'サイト数：';
}
 
#plan-area .plan div tr:nth-child(5) td:before {
 content: 'サーバ：';
}
 
#plan-area .plan div tr:nth-child(6) td:before {
 content: '一括処理上限数：';
}

#plan-area .plan div tr:nth-child(7) td:before {
 content: '一括インポート商品数：';
}

#plan-area .plan div tr:nth-child(8) td:before {
 content: '全件一括編集：';
}

#plan-area .plan div tr:nth-child(9) td:before {
 content: '全件一括編集テンプレート：';
}

#plan-area .plan div tr:nth-child(10) td:before {
 content: '複数店舗一括アップロード：';
}

#plan-area .plan div tr:nth-child(11) td:before {
 content: '検索テンプレート保存：';
}

#plan-area .plan div tr:nth-child(12) td:before {
 content: '付箋：';
}

#plan-area .plan div tr:nth-child(13) td:before {
 content: 'Amazonカタログ登録：';
}

#plan-area .plan div tr:nth-child(14) td:before {
 content: '予約アップロード：';
}

#plan-area .plan div tr:nth-child(15) td:before {
 content: '狙い目キーワード：';
}

#plan-area .plan div tr:nth-child(16) td:before {
 content: '楽天サポート：';
}

#plan-area .plan div tr:nth-child(17) td:before {
 content: '多店舗展開サポート：';
}

#plan-area .plan div tr:nth-child(18) td:before {
 content: '月額費用：';
}


#plan-area .plan div:nth-of-type(2) th {
 background: #eee;
}

#plan-area .plan div:nth-of-type(3) th {
 background: #eb6da5 url("../images/ir-businessplan/bg_c-min.png") repeat left/5%;
 color: #fff;
 position: relative;
}

#plan-area .plan div:nth-of-type(3) th::before {
 content: url("../images/ir-businessplan/img_osusume.png"); 
 position: absolute;
 right: 0;
 top: -30px;
}

#plan-area .plan div:nth-of-type(4) th {
 background: #ffdbeb;
}

#plan-area .plan div th br {
 display: none;
}

#plan-area .plan-cont ul {
 max-width: 1000px;
 margin: 0 auto;
}

#plan-area .plan-cont li {
 list-style: none;
 text-align: left;
 font-size: 12px;
 margin-bottom: 5px;
}


#plan-area .business {
 z-index: 99;
}

#plan-area .business td {
 border-left: #eb6da5 2px solid;
 border-right: #eb6da5 2px solid;
 z-index: -1;
 background: #fff6fa;
}


#plan-area .business tr:last-of-type td {
 border-bottom: #eb6da5 2px solid;
}

#plan-area .business th {
 border-left: #eb6da5 2px solid;
 border-right: #eb6da5 2px solid;
 border-bottom: none;
 border-top:  #eb6da5 1px solid;
}

#target-area {
 text-align: center;
 padding-top: 0;
}


#target-area div {
 border: #eb6da5 3px solid;
 box-sizing: border-box;
 max-width: 1000px;
 margin: 20px auto;
 padding: 20px;
 width: 90%;
}

#target-area h2 {
  display: inline-block;
}

#target-area ul {
/* min-width: 160px;*/
 margin: auto;
 display: inline-block;
}

#target-area li {
 font-size: 18px;
 margin-bottom: 10px;
 text-align: left;
 background: linear-gradient(transparent 85%, #fff799 75%);
 list-style: none;
}

#target-area li::before {
 content: "";
 background: url("../images/ir-businessplan/img_check.png") no-repeat;
 height: 16px;
 width: 16px;
 display: inline-block;
 background-size: 16px;
 margin-right: 5px;
}



#sup-op-area {
 background: #f1fbff;
 text-align: center;
 padding-top: 5px;
}

#sup-op-area p:nth-of-type(2) {
 color: #f00;
 font-weight: bold;
}

#sup-op-area p:nth-of-type(3) {
 color: #f00;
}

#sup-op-area .link-box,
#rmsss-area .link-box,
#rmsss-area2 .link-box {
 margin: 10px auto;
}

#rmsss-area .link-box a,
#rmsss-area2 .link-box a {
 background: #29ac3c;
 border: 1px solid #29ac3c;
 box-shadow: 0 8px 0 0 #0a851e;
}


#rmsss-area {

}

#rmsss-area h2,
#rmsss-area2 h2 {
 margin-top: 10px;
}

#rmsss-area p,
#rmsss-area2 p {
 color: #f00;
}

#rmsss-area br,
#rmsss-area2 br {
 display: none;
}

#rmsss-area .trimming,
#rmsss-area2 .trimming {
 width: 250px;
 overflow: hidden;
 margin: 20px auto;
 border: #ccc 1px solid;
}

#rmsss-area .trimming img,
#rmsss-area2 .trimming img {
 width: 948px;
 margin: 0;
}



#sale-area {
 text-align: center;
}

#sale-area h2 span {
 color: #f00;
}

#sale-area img {
 max-width: 600px;
}


#inq-area {
 background: #f5f1e6;
 text-align: center;
}

#inq-area h2 {
 background: #e3ddcf;
 display: inline-block;
 padding: 10px;
 position: relative;
 font-size: 14px;
}

#inq-area h2::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-top:15px solid #e3ddcf;
}


#inq-area h3 {
 color: #000;
 margin: 20px auto 10px;
}

#inq-area .tel {
font-size: 34px;
font-weight: bold;
line-height: 1;
margin: 10px auto;
}

#inq-area .tel a {
 color: #d0111a;
 text-decoration: none;
 }
 
#inq-area .tel::before {
 content: "";
 background-image:url(../images/ri-rpay/icon_tel.png);
 background-size: contain;
 margin-right: 10px;
 display: inline-block;
 vertical-align: top;
 width: 34px;
 height: 34px;
}

#inq-area .inqplan {
 font-size: 14px;
 font-weight: bold;
 width: 90%;
 margin: 10px auto 0;
}

#inq-area .link-box {
 margin: 10px auto;
}


#form-area {
 background: #f1fbff;
 margin: 0 auto;
 text-align: center;
}

input[type="text"],
input[type="email"] {
 width: 100%;
 padding: 12px 8px;
 font-size: 18px;
 border-radius: 2px;
 border: 1px solid #999;
}

textarea {
 width: 100%;
 height: 120px;
 padding: 8px;
 font-size: 18px;
 border: 1px solid #999;
}

input[type="radio"] {
 
}

/*button,
#form-area #form input[type="submit"] {
 background: #1d4982;
 color: #fff;
 width: 100%;
 text-align: center;
 margin: 0 auto;
 display: block;
 border: 1px solid #1d4982;
 border-radius: 6px;
 padding: 15px 0;
 font-size: 16px;
 cursor: pointer;
 transition: all .3s ease-out;
}

button:hover,
#form-area #form input[type="submit"]:hover {
 background: #fc3;
 color: #000;
}
*/
#form-area #form {
 max-width: 600px;
 margin: 30px auto;
 text-align: left;
 width: 90%;
}

#form-area #form dt {
 font-size: 14px;
 margin-bottom: 5px;
}

#form-area #form dt.must:before {
 content: "必須";
 border: 1px solid #c00;
 color: #c00;
 padding: 2px 4px;
 font-size: 12px;
 line-height: 1;
 border-radius: 2px;
 margin-right: 5px;
}

#form-area #form dt.ran:before {
 content: "任意";
 border: 1px solid #666;
 color: #666;
 padding: 2px 4px;
 font-size: 12px;
 line-height: 1;
 border-radius: 2px;
 margin-right: 5px;
}

#form-area #form dd {
 padding-bottom: 20px;
/* overflow: hidden;*/
 position: relative;
}


p.p-mark {
 text-align: right;
 font-size: 12px;
 padding: 15px 50px 10px 0;
 margin-top: 10px;
 background-image: url(/products/images/common/img_pmark.png);
 background-repeat: no-repeat;
 background-position: right center;
 background-size: 40px;
}


/*
.remodal .formPP {
 text-align: left;
}

.remodal .formPP h2{
 font-size:18px;
 color:#ffffff;
 background:#9c9c9c;
 padding:20px;
}

.remodal .formPP h2 span{
 display:block;
 font-size:20px;
}

.remodal .formPP p{
 font-size:12px;
 text-align:left;
 padding:20px;
}

.remodal ol{
 font-size:16px;
 margin-left:24px;
 padding:20px;
}

.remodal li{
 margin:0 0 20px 0;
 list-style-type:decimal;
}

.remodal p.closeBtn a{
 font-size:16px;
 display:block;
 background:#1e4892;
 text-align:center;
 border-radius:6px;
 padding:10px 0;
 color:#ffffff;
 transition:all 0.3s ease-out 0;
}

.remodal p.closeBtn a:hover{
 background:#ffbf00;
 color:#333;
}

.wht{
 background: #f4f4f4;
}*/


.campaign {
 font-weight: bold;
 display:inline-block;
 max-width:1000px;
 margin:0 auto 20px;
 background: #fff;
 padding: 15px;
 border: #f00 2px solid;
}

.campaign a:link  {
  color: #f00;
  text-decoration: underline;
}

.campaign a:hover {
 text-decoration: none !important;
}

/*#campaign*/
#campaign {
 text-align: center;
}

#campaign h2 {
 color: #fff;
 background: #f00;
 border-radius: 50px;
 padding: 10px 20px;
 display: inline-block;
 line-height: 1;
 position: relative;
}

#campaign h2:before {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-top: 15px solid #f00;
}


#campaign h3 {
 color: #333;
 margin-bottom: 20px;
}

#campaign h3 span {
 color: #f00;
}

#campaign h3 br:nth-of-type(1) {
 display: none;
}

#campaign #campaign-detail {
 text-align: center;
 max-width: 1000px;
 margin: 0 auto;
 padding: 0 10px 40px;
}


#campaign #campaign-detail table {
 box-sizing: border-box;
 font-size: 14px;
 max-width: 840px;
 margin: 0 auto 20px;
 width: 96%;
}

#campaign #campaign-detail th,
#campaign #campaign-detail td {
 border: 1px solid #4b4b4b;
 padding: 20px 15px;
}

#campaign #campaign-detail th {
 background: #ffd1e5;
 font-weight: normal;
 white-space: nowrap;
 width: 25%;
}

#campaign #campaign-detail td {
 background: #fff;
 text-align: left;
}

#campaign #campaign-detail li {
 list-style: disc;
 margin:0 0 5px 20px;
 line-height: 1.4;
}





/* ------------------------------------------------------- */
/* ===== for Tablet 480 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 480px) {



}



/* ------------------------------------------------------- */
/* ===== for PC 768 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 768px) {




section h2 {
 font-size: 26px;
}

.link-box2 {
 flex-direction: row-reverse;
}

#main-area {
 padding: 40px;
}

#main-area h1 {
 font-size: 36px;
 margin: 20px auto;
}

#main-area #main-ttl br {
 display: inline;
}




#main-area ul {
/* width: 100%;*/
 margin: 20px auto;
 flex-wrap: nowrap;
}

#main-area li img {
}

#main-area li {
 margin-bottom:20px;
 display: block;
 text-align: center;
}

#main-area li p {
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 margin-top: 10px;
}

#plan-area {
 padding-top: 70px;
}

#plan-area h3 {
 font-size: 26px;
 margin: 30px auto 40px;
}

#plan-area p {
 font-size: 20px;
}


#plan-area .plan td {
 font-size: 16px;
/* position: relative;*/
 }
 
 #plan-area .plan td span {
/*  position: absolute;*/
 }
 
#plan-area .plan div:first-of-type td {
  font-size: 14px;
 }


#target-area ul {
 display: flex;
 justify-content: space-between;
 width: 90%;
 max-width: 780px;
 font-weight: bold;
}

#target-area li::before {
 height: 33px;
 width: 33px;
 background-size: 33px;
 vertical-align: middle;
 }

#target-area h2 {
 font-size: 26px;
}

#rec-area {
 padding-top: 80px;
}

#rec-area::before {
 margin-left: -50px;
 border: 50px solid transparent;
 border-top: 50px solid #ffd1e5;
}

#rec-area h3 {
 font-size: 24px;
 text-align: left;
 }

#rec-area h4 {
 width: 400px;
 }

#rec-area .opt {
 table-layout: fixed;
}

#rec-area .opt tr {
 float: none;
 overflow: hidden;
 width: auto;
}

#rec-area .opt td,
#rec-area .opt th {
 display: table-cell;
}

#rec-area .opt-rd.opt th span,
#rec-area .opt-rd.opt td span {
 display: block;
}

#rec-area .opt td br {
 display: inline;
}

#rec-area .rec-cont h3 br {
 display: none;
}

#rec-area .rec-cont img {
 float: left;
 margin-right: 20px;
}



#sup-op-area {
 padding-top: 50px;
}

#sup-op-area p {
/* font-size: 30px;*/
 max-width: 650px;
 margin:auto;
}

#sup-op-area p:nth-of-type(2) {
 font-size: 36px;
 margin-bottom: 10px;
 background: linear-gradient(transparent 85%, #fff799 75%);
}

#sup-op-area p:nth-of-type(2) span {
 font-size: 24px;
}



#rmsss-area p,
#rmsss-area2 p {
 font-size: 18px;
 font-weight: bold;
 text-align: center;
}

#rmsss-area br,
#rmsss-area2 br {
 display: inline;
}

#rmsss-area .trimming,
#rmsss-area2 .trimming {
 width:600px;
}


#inq-area h2 {
 font-size: 18px;
 margin-bottom: 10px;
 padding: 10px 20px;
 }

#inq-area h2 br {
 display: none;
}


#form dl {
 width: 600px;
 padding: 30px 0 0;
 margin: 0 auto;
}

/*button,
#form input[type="submit"] {
 width: 600px;
}
*/
p.cautionBox {
 margin-top: 20px;
}

#form dl + p.cautionBox {
 font-size: 14px;
 margin: 0;
}

p.p-mark {
 width: 550px;
 margin: 0 auto;
}

.campaign {
 font-size: 20px;
}


.campaign br:nth-of-type(2) {
 display: none;
}


}



/* ------------------------------------------------------- */
/* ===== for PC 1000 ===== */
/* ------------------------------------------------------- */


@media screen and (min-width : 1000px){


.link-box2 {
 width: 90%;
}

#main-area {

}

#main-area h1 br {
 display: none;
}


#main-area li img {
 width:100%;
}

#main-area li p {
font-size: 18px;
}

#main-area #main-ttl p br {
 display: none;
}

#plan-area .plan-cont .plan {
 display: flex;
}

#plan-area .plan div {
 width: 100%;
 max-width: 250px;
}

#plan-area .plan div:first-of-type {
 display: block;
 background: #eee;
}

#plan-area .plan div td {
 height: 50px;
}

#plan-area .plan div td:before {
 content: none !important;
}

#plan-area .plan td.small {
 font-size: 12px !important;
}

#plan-area .plan div {
 margin-left: -1px;
}

#plan-area .plan div:first-of-type {
 margin-left: 0;
}

#plan-area .plan div th {
 height: 50px;
}


#plan-area .plan div:nth-of-type(3) {
 margin-top: -15px;
}

#plan-area .plan div:nth-of-type(3) th {
 font-size: 18px;
  height: 65px;
}

#plan-area .plan div:nth-of-type(3) th::before {
 top: -40px;
}

#plan-area .plan div:nth-of-type(3) td {
 font-size: 18px;
}

#plan-area .plan div:nth-of-type(4) th {
 font-size: 16px;
}

#plan-area .plan div th br {
 display: inline;
}

#plan-area .plan td {
 position: relative;
 }
 
 #plan-area .plan td span {
  position: absolute;
 }
 

#target-area {
 
}

#target-area h2 br {
 display: none;
}

#target-area li {
 font-size: 24px;
 list-style: none;
}


#rmsss-area,
#rmsss-area2 {
 padding-bottom: 60px;
}

#rmsss-area .trimming,
#rmsss-area2 .trimming {
 width: 948px;
}

#rec-area div p br {
 display: inline;
}


#inq-area .tel {
 margin:20px auto;
}

#inq-area .tel a {
 font-size:50px;
 }
 
#inq-area .tel::before {
 width: 46px;
 height: 46px;
}


.campaign {
 padding: 15px 30px;
}

/*#campaign */
#campaign h3 {
 font-size: 20px;
}

#campaign h3 br {
 display: inline;
}

#campaign #campaign-detail {
padding:0;
}




}