@charset "utf-8";


/*PC用*/
@media screen and (min-width: 641px) {
  .pc { display: block !important }
  .sp { display: none !important }
  .h_menu, #sp_global_nav { display: none; }

#products .planlist-sec { padding: 90px 0 80px; }
#products .planlist-sec h2.common-ttl02 { margin-bottom: 48px; }
#products .planlist-sec .tag-area { margin: 0 auto 30px; background: #e7e7e7; width: 1100px; box-sizing: border-box; padding: 25px 0 26px; }
#products .planlist-sec .tag-area .area-top { margin: 0 auto 14px; width: 824px; display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; }
#products .planlist-sec .tag-area .area-top .tag-list{
    display: none;
}
#products .planlist-sec .tag-area .area-top p.area-txt01 { font-size: 18px; font-weight: bold; padding-top: 7px; }
#products .planlist-sec .tag-area .area-top button { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic M", "YuGothic", "Yu Gothic", "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif; cursor: pointer; }
#products .planlist-sec .tag-area .area-top button.price-btn {background: #fff url(../images/common/arrow04.jpg)no-repeat right 17px center;border: none;font-size: 16px;font-weight: bold;border: 1px solid #9c9c9c;width: 312px;text-align: left;padding: 6px 0 5px 28px;}
#products .planlist-sec .tag-area .area-top button.style-btn { background: #fff url(../images/common/arrow04.jpg)no-repeat right 17px center; border: none; font-size: 16px; font-weight: bold; border: 1px solid #9c9c9c; width: 312px; text-align: left; padding: 6px 0 5px 28px; }
#products .planlist-sec .tag-area ul.tag-list {margin: 0 auto 21px;width: 831px;background: #fff;border: 1px solid #9c9c9c;box-sizing: border-box;position: relative;display: flex;display: -webkit-flex;display: -moz-flex;padding: 9px 20px 8px;/* display: none; */}
#products .planlist-sec .tag-area ul.tag-list:before { content: ""; width: 38px; height: 22px; display: inline-block; background: url(../images/common/arrow03.png); position: absolute; left: 200px; top: -22px; }
#products .planlist-sec .tag-area ul.tag-list li { padding-right: 19px; border-right: 1px solid #282828; line-height: 1.2; margin-right: 24px; }
#products .planlist-sec .tag-area ul.tag-list li input{
    margin-right: 12px;
}
#products .planlist-sec .tag-area ul.tag-list li a:before { content: "■"; color: #b6b6b6; margin-right: 10px; }
#products .planlist-sec .tag-area ul.tag-list li:last-child { border: none; }
#products .planlist-sec .tag-area button.search-btn { margin: 0 auto; display: block; background: #ff7e00; color: #fff; border: none; font-weight: bold; font-size: 16px; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic M", "YuGothic", "Yu Gothic", "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif; width: 330px; padding: 14px 0 12px; border-radius: 36px; cursor: pointer; }
#products .planlist-sec .tag-area button.search-btn:hover{opacity:0.7;}
#products .planlist-sec ul.plan-list { margin: 0 auto; width: 1100px; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; }
#products .planlist-sec ul.plan-list li { width: 250px; margin: 0px 33px 45px 0; }
#products .planlist-sec ul.plan-list li:hover{opacity:0.8;}
#products .planlist-sec ul.plan-list li:nth-child(4n) { margin: 0 0 45px 0; }
#products .planlist-sec ul.plan-list li img.ofi { width: 250px; height: 178px; margin-bottom: 8px; }
#products .planlist-sec ul.plan-list li span.plan-tag { display: inline-block; background: #7d7d7d; color: #fff; font-weight: bold; font-size: 14px; padding: 4px 10px 3px; min-width: 36px; text-align: center; letter-spacing: 1px; margin: 0 4px 4px 0; }
#products .planlist-sec ul.plan-list li h3 { font-size: 18px; font-weight: bold; margin-bottom: 3px; }
#products .planlist-sec ul.plan-list li p.price-txt { text-align: right; font-size: 22px; font-weight: bold; letter-spacing: 1px; }
#products .planlist-sec ul.plan-list li p.price-txt span.f_cent { font-size: 28px; font-weight: bold; }
#products .plan-detail-sec { padding: 60px 0 120px; }
#products .plan-detail-sec h2.common-ttl02 { margin-bottom: 76px; }
#products .plan-detail-sec .detail-wrap { margin: 0 auto; width: 1000px; }
#products .plan-detail-sec .detail-wrap .detail-top { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; margin-bottom: 5px; }
#products .plan-detail-sec .detail-wrap .detail-top h3 { font-size: 38px; font-weight: bold; }
#products .plan-detail-sec .detail-wrap .detail-top p.price-txt { font-size: 26px; font-weight: bold; letter-spacing: 1px; }
#products .plan-detail-sec .detail-wrap .detail-top p.price-txt span.f_cent { font-size: 45px; font-weight: bold; }
#products .plan-detail-sec .detail-wrap .bx-wrapper { border: none; margin-bottom: 150px; box-shadow: none; }
#products .plan-detail-sec .detail-wrap .bx-pager-item a { margin: 0 8px; width: 12px; height: 12px; border-radius: 12px; background: #000; }
#products .plan-detail-sec .detail-wrap .bx-pager-item a.active { background: #ff7e00; }
#products .plan-detail-sec .table-area { margin: 0 auto 45px; width: 830px; border-bottom: 3px solid #e4e4e4; }
#products .plan-detail-sec .table-area h4 { background: #282828; color: #fff; font-weight: bold; font-size: 18px; padding: 14px 35px 12px; letter-spacing: 1px; }
#products .plan-detail-sec .table-area h5 { background: #e4e4e4; font-weight: bold; padding: 11px 48px 10px; }
#products .plan-detail-sec .table-area dl { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; }
#products .plan-detail-sec .table-area dl dt {width: 600px;box-sizing: border-box;padding: 8px 63px 0;border-left: 3px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;height: 42px;}
#products .plan-detail-sec .table-area dl.no-br dt { border-bottom: none; }
#products .plan-detail-sec .table-area dl dd { width: 231px; box-sizing: border-box; height: 42px; position: relative; }
#products .plan-detail-sec .table-area dl.no-active dd:before { content: ""; width: 100%; height: 42px; display: inline-block; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; pointer-events: none; }
#products .plan-detail-sec .table-area dl dd a {font-weight: bold;color: #Fff;width: 100%;height: 100%;padding: 8px 0px 0 87px;box-sizing: border-box;display: block;letter-spacing: 2px;border-bottom: 1px solid #fff;background: url(../images/common/ico08.png)no-repeat left 36px center;}
#products .plan-detail-sec .table-area dl.no-br dd a { border-bottom: none; }
#products .plan-detail-sec .table-area dl dd.trial {background: #969696;}
#products .plan-detail-sec .table-area dl dd.trial a { background-position-x: 45px; }
#products .plan-detail-sec .table-area dl dd.standard {background: #ff7c04;}
#products .plan-detail-sec .table-area dl dd.standard a { background-position-x: 36px; padding-left: 80px; }
#products .plan-detail-sec .table-area dl dd.pro {background: #515151;}
#products .plan-detail-sec .table-area dl dd.pro a { background-position-x: 19px; padding-left: 58px; }


}


/*SP用*/
@media screen and (max-width:640px) {
  .pc { display: none !important }
  .sp { display: block !important }
  img { max-width: 100%; height: auto; width: auto; }
  body { min-width: auto !important; overflow: inherit !important; }
  .sp_tac { text-align: center !important; }
  .sp_tar { text-align: right !important; }
  .sp_mb15 { margin-bottom: 15px !important; }
  .sp_mb20 { margin-bottom: 20px !important; }
  div, p, dd, dl, dt, th, td, span, li { box-sizing: border-box; }


#products .planlist-sec { padding: 11vw 4vw 8vw; }
#products .planlist-sec h2.common-ttl02 { margin-bottom: 11vw; }
#products .planlist-sec h2.common-ttl02 span.f_narial { }
#products .planlist-sec .tag-area { margin: 0 auto 30px; background: #e7e7e7; box-sizing: border-box; padding: 6vw 5vw 6vw; }
#products .planlist-sec .tag-area .area-top { margin: 0 auto 3vw; }
#products .planlist-sec .tag-area .area-top p.area-txt01 { font-size: 5vw; font-weight: bold; text-align: center; margin-bottom: 3vw; }
#products .planlist-sec .tag-area .area-top button { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic M", "YuGothic", "Yu Gothic", "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif; cursor: pointer; }
#products .planlist-sec .tag-area .area-top button.price-btn { background: #fff url(../images/common/arrow04.jpg)no-repeat right 17px center; border: none; font-size: 4vw; font-weight: bold; border: 1px solid #9c9c9c; width: 79vw; text-align: left; padding: 3vw 0 3vw 6vw; margin: 0 auto 3vw; display: block; }
#products .planlist-sec .tag-area .area-top button.style-btn {background: #fff url(../images/common/arrow04.jpg)no-repeat right 17px center;border: none;font-size: 4vw;font-weight: bold;border: 1px solid #9c9c9c;width: 79vw;text-align: left;padding: 3vw 0 3vw 6vw;margin: 0 auto 03vw;display: block;}
#products .planlist-sec .tag-area ul.tag-list { margin: 0 auto 4vw; width: 83vw; background: #fff; border: 1px solid #9c9c9c; box-sizing: border-box; position: relative; padding: 4vw 3vw 2vw; }
#products .planlist-sec .tag-area>ul.tag-list { display: none; }
#products .planlist-sec .tag-area ul.tag-list:before { content: ""; width: 38px; height: 22px; display: inline-block; background: url(../images/common/arrow03.png); position: absolute; left: 200px; top: -22px; }
#products .planlist-sec .tag-area ul.tag-list li { margin-bottom: 2vw; }
#products .planlist-sec .tag-area ul.tag-list li input{
    margin-right: 7px;
}
#products .planlist-sec .tag-area ul.tag-list li a:before { content: "■"; color: #b6b6b6; margin-right: 10px; }
#products .planlist-sec .tag-area ul.tag-list li:last-child { border: none; }
#products .planlist-sec .tag-area button.search-btn { margin: 0 auto; display: block; background: #ff7e00; color: #fff; border: none; font-weight: bold; font-size: 4.5vw; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic M", "YuGothic", "Yu Gothic", "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif; width: 71vw; padding: 4vw 0 3vw; border-radius: 10vw; cursor: pointer; letter-spacing: 0.2vw; }
#products .planlist-sec ul.plan-list { margin: 0 auto; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; }
#products .planlist-sec ul.plan-list li { width: 48%; margin: 0 4% 8vw 0; }
#products .planlist-sec ul.plan-list li:nth-child(2n) { margin: 0 0 8vw 0; }
#products .planlist-sec ul.plan-list li img.ofi { width: 100%; height: 34vw; margin-bottom: 3vw; }
#products .planlist-sec ul.plan-list li span.plan-tag { display: inline-block; background: #7d7d7d; color: #fff; font-weight: bold; font-size: 3.5vw; padding: 1vw 4vw; min-width: 15vw; text-align: center; letter-spacing: 0.2vw; margin: 0 1vw 1vw 0; }
#products .planlist-sec ul.plan-list li h3 { font-size: 4vw; font-weight: bold; margin-bottom: 1vw; }
#products .planlist-sec ul.plan-list li p.price-txt { text-align: right; font-size: 3.5vw; font-weight: bold; letter-spacing: 0.2vw; }
#products .planlist-sec ul.plan-list li p.price-txt span.f_cent { font-size: 7vw; font-weight: bold; }
#products .plan-detail-sec { padding: 12vw 0 20vw; }
#products .plan-detail-sec h2.common-ttl02 { margin-bottom: 7vw; }
#products .plan-detail-sec .detail-wrap { margin: 0 auto; width: 92vw; }
#products .plan-detail-sec .detail-wrap .detail-top { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; margin-bottom: 3vw; }
#products .plan-detail-sec .detail-wrap .detail-top h3 { font-size: 5vw; font-weight: bold; }
#products .plan-detail-sec .detail-wrap .detail-top p.price-txt { font-size: 4vw; font-weight: bold; letter-spacing: 0.2vw; }
#products .plan-detail-sec .detail-wrap .detail-top p.price-txt span.f_cent { font-size: 7vw; font-weight: bold; }
#products .plan-detail-sec .detail-wrap .bx-wrapper { border: none; margin-bottom: 20vw; box-shadow: none; }
#products .plan-detail-sec .detail-wrap .bx-pager-item a { margin: 0 2vw; width: 3vw; height: 3vw; border-radius: 8vw; background: #000; }
#products .plan-detail-sec .detail-wrap .bx-pager-item a.active { background: #ff7e00; }
#products .plan-detail-sec .refelence_list { margin: 0 auto 3vw; width: 98vw; display: flex; display: -webkit-flex; display: -moz-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; }
#products .plan-detail-sec .refelence_list li { font-size: 4vw; font-weight: bold; margin: 0 3vw 1vw; letter-spacing: 0.5vw; }
#products .plan-detail-sec .refelence_list li:before { content: "■"; margin-right: 2vw; font-size: 5vw; line-height: 1; }
#products .plan-detail-sec .refelence_list li.trial:before {color: #969696;}
#products .plan-detail-sec .refelence_list li.standard:before {color: #ff7c04;}
#products .plan-detail-sec .refelence_list li.pro:before {color: #515151;}
#products .plan-detail-sec .table-area { margin: 0 auto 45px; width: 92vw; border-bottom: 3px solid #e4e4e4; }
#products .plan-detail-sec .table-area h4 { background: #282828; color: #fff; font-weight: bold; font-size: 4.5vw; padding: 2vw 4vw; letter-spacing: 0.2vw; }
#products .plan-detail-sec .table-area h5 { background: #e4e4e4; font-weight: bold; padding: 2vw 4vw; font-size: 4vw; }
#products .plan-detail-sec .table-area dl { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; }
#products .plan-detail-sec .table-area dl dt {width: 70%;box-sizing: border-box;padding: 2vw 5vw;border-left: 3px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;font-size: 4vw;line-height: 1.4;}
#products .plan-detail-sec .table-area dl.no-br dt { border-bottom: none; }
#products .plan-detail-sec .table-area dl dd { width: 30%; box-sizing: border-box; position: relative; }
#products .plan-detail-sec .table-area dl.no-active dd:before { content: ""; width: 100%; height: 100%; display: inline-block; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; pointer-events: none; }
#products .plan-detail-sec .table-area dl dd a {font-weight: bold;color: #fff;width: 100%;height: 100%;box-sizing: border-box;display: block;letter-spacing: 0.2vw;border-bottom: 1px solid #fff;background: url(../images/common/ico08.png)no-repeat center / 6vw;font-size: 0;}
#products .plan-detail-sec .table-area dl.no-br dd a { border-bottom: none; }
#products .plan-detail-sec .table-area dl dd.trial {background: #969696;}
#products .plan-detail-sec .table-area dl dd.standard {background: #ff7c04;}
#products .plan-detail-sec .table-area dl dd.pro {background: #515151;}
}