@charset "UTF-8";
@import url(former_pccamera_common.css);
/*---------------------------

---------------------------*/
#wrap-container {
  width: 1210px;
}

div#Container {
  width: 980px;
}

div#side-menu {
  text-align: center;
  width: 19%;
  margin: 0 0 0 2%;
}

h1 {
  margin: 0 0 16px;
  font-size: 1.6em;
  font-weight: bold;
  padding-bottom: 3px;
  border-bottom: 1px solid #CCC;
}

#main {
  display: flex;
  font-family: 'Noto Sans JP', Meiryo, メイリオ, 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

/* --------- ‹¤’Ê --------- */
h2 {
  margin: 0;
}

.info-box {
  margin: 0 0 20px;
}

.info-box .inner-box {
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.3;
}

.info-box .inner-box2 {
  border-right: 1px solid #CCCCCC;
  border-bottom: none;
  border-left: 1px solid #CCCCCC;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.3;
}

/* --------- head --------- */
h2#head-img img {
  margin: 0 0 1.5%;
}

div#head p {
  line-height: 1.6em;
  margin: 0 0 2%;
  letter-spacing: 0.7px;
}

div#table-contents {
  background-color: #F1F2F4;
  margin: 0 0 4%;
}

div#table-contents p {
  font-size: 1.2em;
  font-weight: 700;
  padding: 2% 3.5% 0.3%;
}

div#table-contents ul {
  padding: 0 0 2% 5.5%;
  line-height: 2em;
}

div#table-contents ul li a {
  text-decoration: underline;
}

div#table-contents ul li a span {
  display: inline-block;
  text-decoration: none;
}

h2.title-content {
  background-color: #393A3E;
  border-left: 7px #5687F4 solid;
  color: #fff;
  padding: 1.2% 0 1% 1.7%;
  font-size: 1.35em;
  letter-spacing: 1.1px;
  margin: 0 0 2%;
}

div.text-box {
  margin-left: 2%;
}

div#what-c {
  margin: 0 0 7%;
}

div#what-c .float {
  display: flex;
}

div#what-c img {
  width: 25.5%;
}

div#what-c p {
  margin: 4% 0 0 3%;
  line-height: 1.6em;
  width: 65%;
  letter-spacing: .7px;
}

div#do-c {
  margin: 0 0 7.4%;
}

div#do-c .float {
  display: flex;
  justify-content: space-between;
  margin: 3.8% 0 0;
}

div#do-c ul {
  text-align: center;
  width: 32%;
}

div#do-c li h3 {
  color: #4078F6;
  font-size: 1.3em;
  margin: 0 0 5%;
}

div#do-c li h3.little {
  font-size: 1.1em;
}

div#do-c li img {
  width: 310px;
}

div#do-c li p {
  width: 95%;
  letter-spacing: .3px;
  text-align: left;
  margin: 3% auto 0;
  line-height: 1.7em;
}

div#point-c h2.title-content {
  margin: 0 0 1.5%;
}

/* --------- point1 --------- */
div.pointers {
  display: flex;
}

div.pointers p {
  font-size: 1.3em;
  font-weight: 700;
  padding: 1.7% 1.2% 0;
}

div.pointers img {
  width: 50px;
}

div#point-c .float {
  margin: 1.5% 0 0;
  display: flex;
}

div#point-c .float img {
  width: 50%;
}

div#point-c .float p {
  width: 46%;
  margin: 0 0 0 2.5%;
  line-height: 1.6em;
  letter-spacing: 1px;
}

div#point1 .text-box ul {
  margin: 2% 0 0;
  line-height: 1.5em;
  letter-spacing: 1px;
}

div#point1 .text-box ul li.hub-point {
  margin: 1.6% 0 0;
  line-height: 1.8em;
}

/* おすすめ商品 */
.rec-item-block {
  width: 94%;
  margin: 3.9% auto 0;
  padding: 0 3.3347% 0;
  border: 2px solid #5687f4;
  border-radius: 10px;
  box-sizing: border-box;
}

.rec-item-box {
  display: flex;
  justify-content: space-between;
}

.rec-item-box .left {
  width: 43%;
}

.rec-item-box .right {
  display: flex;
  justify-content: space-between;
  width: 50.3%;
  margin: 0 auto 0 5.9%;
}

.rec-item-block img {
  width: 200px;
}

.rec-item-title {
  font-size: 1.2em;
  margin: 0;
  color: #5687f4;
}

.rec-item-txt {
  width: 100%;
  line-height: 1.6em;
  margin: 3.6% 0 0;
}

.rec-item-link {
  display: block;
  width: 117px;
  background-color: #5687f4;
  font-size: .9333em;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  margin: 7.4% auto 0 0;
  padding: 1% 1em 1% 0;
  color: #ffffff !important;
  border-radius: 16px;
  box-sizing: border-box;
  position: relative;
}

.rec-item-link::after {
  content: "";
  width: 0;
  height: 0;
  margin: auto;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #ffffff;
  border-right: 0;
  border-style: solid;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 11%;
}

.rec-item-block .rec-item-ly1 {
  display: flex;
  padding: 3.5% 0 4.4%;
  padding-bottom: 4.4%;
  border-bottom: 1px solid #eaeaea;
}

.rec-item-block .rec-item-ly1 .rec-item-box {
  display: flex;
  justify-content: center;
  width: 44.5652%;
  margin: 0 auto 0 0;
}

.rec-item-block .rec-item-ly1 .rec-item-box:nth-of-type(even) {
  margin: 0 2% 0 auto;
}

.rec-item-block .rec-item-ly1 .rec-item-box .left {
  width: 68.2926%;
  padding: 0;
  box-sizing: border-box;
}

.rec-item-block .rec-item-ly1 .rec-item-box .rec-item-txt {
  width: 91%;
  line-height: 1.6em;
  margin: 4.5% 0 0;
}

.rec-item-block .rec-item-ly1 .rec-item-box .right {
  width: 30%;
  margin: 0;
}

.rec-item-block .rec-item-ly1 .rec-item-box .right img {
  width: 130px;
}

.rec-item-block .rec-item-ly2 {
  padding: 5.2% 0 1.7%;
  border-bottom: 1px solid #eaeaea;
}

.rec-item-block .rec-item-ly3 {
  padding: 2% 0;
}

.rec-item-block .rec-item-ly3 .left {
  width: 93%;
  margin: 3.6% auto 0;
}

.rec-item-block .rec-item-ly3 .rec-item-txt {
  width: 92%;
  margin: 1.6% 0 0;
}

.rec-item-block .rec-item-ly3 .rec-item-link {
  margin: 2% 0 0;
}

.rec-item-block .rec-item-ly3 .right {
  width: 38%;
  margin: 0;
}

.angle-point span,
.hub-point span {
  font-weight: bold;
}

/* --------- point2 --------- */
div#point2 {
  margin: 5.5% 0 8.5%;
}

div#point2 h3 {
  font-size: 1.3em;
  margin: 2% 0 0;
  padding: 0 2px 0.5%;
  border-bottom: 1px solid #C0C0C0;
}

div#point2 .videopixels-point h3 {
  margin: 4.3% 0 0;
  font-size: 1.2em;
}

div#point2 .pixels-point p, .videopixels-point p {
  line-height: 1.6em;
  margin: 1% 0 0;
  padding: 0 2px 0;
  letter-spacing: 1px;
}

.videopixels-point p:nth-of-type(2) {
  margin-top: 2.5%;
}

/* --------- point3 --------- */
div#point3 {
  margin: 0 0 8%;
}

div#point3 .text-box {
  margin-top: 2%;
}

div#point3 .focus-point h3 {
  font-size: 1.2em;
  margin: 3.3% 0 0;
  border-bottom: 1px solid #C0C0C0;
  padding: 0 2px 0.5%;
}

div#point3 .focus-point p {
  margin: 1% 0 4%;
  padding: 0 2px 0;
  line-height: 1.6em;
}

/* --------- point4 --------- */
div#point4 {
  margin: 0 0 7%;
}

div#point4 .float img {
  width: 40%;
}

/* --------- point5 --------- */
div#point5 {
  margin-bottom: 7.5%;
}

div#point5 .text-box {
  margin-top: 1.5%;
  line-height: 1.5em;
  letter-spacing: 1px;
}

div#point5 .text-box {
  margin-top: 1.5%;
  line-height: 1.5em;
  letter-spacing: 1px;
}

div#point5 .camera-product {
  margin: 1.5%  0.75% 0 1.25%;
  padding: 1.5% 0 1.6% 0;
}

div#point5 .camera-product img {
  width: 26.1%;
  padding: 0 0 0 10%;
}

div#point5 .camera-product .text {
  padding: 0 0 0 7.2%;
  width: 50%;
}

div#point5 .camera-product h3 {
  margin: 13.5% 0 0;
}

div#point5 .camera-product .text p {
  margin: 2% 0 0;
}

/* other  */
#other h2.title-content {
  padding: 1.2% 0 1% 2.7%;
  margin-bottom: 0;
}

div#other .parlance {
  padding: 2.8% 3.5% 1%;
  border-left: 1px solid #393A3E;
  border-right: 1px solid #393A3E;
  border-bottom: 1px solid #393A3E;
}

div#other {
  margin: 0;
}

div#other .parlance h4 {
  font-size: 1.1em;
  letter-spacing: 1px;
}

div#other .parlance p {
  padding: 1% 0 0 2%;
  line-height: 1.6;
  letter-spacing: .4px;
  width: 100%;
  margin: 0 0 4%;
}

/* --------- おすすめ　--------- */
div#osusume img.new,
div#osusume img.abo,
div#osusume img.deal,
div#osusume img.lim {
  vertical-align: 0;
  width: 1.8em;
}

div#osusume {
  margin: 3.8% 0 0 0;
}

div#osusume .float {
  display: flex;
  justify-content: flex-start;
  margin: 3% 0;
}

div#osusume li img {
  width: 290px;
  border: 1px solid #ccc;
}

div#osusume ul {
  text-align: center;
  width: 33%;
}

div#osusume li {
  margin-top: 3%;
}

div#osusume li .hinban {
  font-size: 1.05em;
  font-weight: bold;
}

div#osusume li .price {
  font-size: 0.9em;
  color: #333333;
}

div#osusume li p {
  width: 90%;
  letter-spacing: .3px;
  text-align: left;
  color: #333333;
  margin: 3%;
  padding-left: 3%;
  line-height: 1.3em;
}

div#banner-link {
  display: flex;
  justify-content: space-between;
  width: 83%;
  margin: 5% auto;
}

div#banner-link img {
  width: 394px;
}

/*---------------------------
–ß‚éƒ{ƒ^ƒ“
---------------------------*/
.return {
  margin: 0 0 5px;
  text-align: right;
  font-size: 0.8em;
  line-height: 1.3;
}