@charset "UTF-8";
html {
  box-sizing: border-box; }

*,
*::after,
*::before {
  box-sizing: inherit; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  appearance: none;
  background-color: #477dca;
  border: 0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 0.75em 1.5em;
  text-decoration: none;
  transition: background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }
  button:hover,
  button:focus, input[type="button"]:hover,
  input[type="button"]:focus, input[type="reset"]:hover,
  input[type="reset"]:focus, input[type="submit"]:hover,
  input[type="submit"]:focus {
    background-color: #3964a2;
    color: #fff; }
  button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.5; }
    button:disabled:hover, input[type="button"]:disabled:hover, input[type="reset"]:disabled:hover, input[type="submit"]:disabled:hover {
      background-color: #477dca; }

fieldset {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  margin: 0 0 0.75em;
  padding: 1.5em; }

input,
label,
select {
  display: block;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1em; }

label {
  font-weight: 600;
  margin-bottom: 0.375em; }
  label.required::after {
    content: "*"; }
  label abbr {
    display: none; }

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea,
select[multiple=multiple] {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1em;
  margin-bottom: 0.75em;
  padding: 0.5em;
  transition: border-color 150ms ease;
  width: 100%; }
  input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover,
  select[multiple=multiple]:hover {
    border-color: #b1b1b1; }
  input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus,
  select[multiple=multiple]:focus {
    border-color: #477dca;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7);
    outline: none; }
  input[type="color"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="email"]:disabled, input[type="month"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="text"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="week"]:disabled, input:not([type]):disabled, textarea:disabled,
  select[multiple=multiple]:disabled {
    background-color: #f2f2f2;
    cursor: not-allowed; }
    input[type="color"]:disabled:hover, input[type="date"]:disabled:hover, input[type="datetime"]:disabled:hover, input[type="datetime-local"]:disabled:hover, input[type="email"]:disabled:hover, input[type="month"]:disabled:hover, input[type="number"]:disabled:hover, input[type="password"]:disabled:hover, input[type="search"]:disabled:hover, input[type="tel"]:disabled:hover, input[type="text"]:disabled:hover, input[type="time"]:disabled:hover, input[type="url"]:disabled:hover, input[type="week"]:disabled:hover, input:not([type]):disabled:hover, textarea:disabled:hover,
    select[multiple=multiple]:disabled:hover {
      border: 1px solid #ddd; }

textarea {
  resize: vertical; }

input[type="search"] {
  appearance: none; }

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: 0.375em; }
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    display: inline-block; }

input[type="file"] {
  margin-bottom: 0.75em;
  width: 100%; }

select {
  margin-bottom: 1.5em;
  max-width: 100%;
  width: auto; }

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0; }

dl {
  margin-bottom: 0.75em; }
  dl dt {
    font-weight: 600;
    margin-top: 0.75em; }
  dl dd {
    margin: 0; }

table {
  border-collapse: collapse;
  margin: 0.75em 0;
  table-layout: fixed;
  width: 100%; }

th {
  border-bottom: 1px solid #a6a6a6;
  font-weight: 600;
  padding: 0.75em 0;
  text-align: left; }

td {
  border-bottom: 1px solid #ddd;
  padding: 0.75em 0; }

tr,
td,
th {
  vertical-align: middle; }

body {
	position: relative;
  color: #333;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1em;
  line-height: 1.5; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1em;
  line-height: 1.2;
  margin: 0 0 0.75em; }

p {
  margin: 0 0 0.75em; }

a {
  color: #477dca;
  text-decoration: none;
  transition: color 150ms ease; }
  a:active,
  a:focus,
  a:hover {color: #355e98; }

hr {
  border-bottom: 1px solid #ddd;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 1.5em 0; }

img,
picture {
  margin: 0;
  max-width: 100%; }

html {
  margin: 0; }

body {
  margin: 0; }
  @media screen and (min-width: 768px) {
    body {
      min-width: 1170px;
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    body {
      margin-top: 34px; } }

p {
  margin: 0; }

img {
  vertical-align: bottom; }

a img {
  background: none !important; }

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
  background: none !important; }

.ttl01 {
  color: #666;
  border-bottom: 2px solid #e6e9ea;
  padding-bottom: 8px; }
  .ttl01 span {
    /* border-bottom: 2px solid #e6e9ea; */
    padding: 0 0 5px;
      font-size: 14px;
      font-weight: normal; }

.ttl02 {
  color: #666;
  font-weight: 600;
  font-size: 1.25em;
  padding-bottom: 8px;
  text-align: center; }
  .ttl02 span {
    border-bottom: 5px solid #e6e9ea;
    padding: 0 10px 8px;
    display: inline-block; }

.icon, .news dl.new dt:before {
  color: #FFF;
  line-height: 16px;
  background-color: #ccc;
  font-size: 11.5px;
  min-height: 16px;
  border-radius: 32px;
  display: inline-block;
  padding: 2px 9px 0 6px;
  font-style: italic;
  font-weight: 500; }
  .icon.new, .news dl.new dt:before {
    background-color: #CC7A2A; }
  .icon.tough, .news dl.new dt.tough:before {
    background-color: #CC2A41; }
  .icon.letsnote, .news dl.new dt.letsnote:before {
    padding-top: 2px;
    background-color: #00489D; }
  .icon.jbpress, .news dl.new dt.jbpress:before {
    background-color: #A29F6D; }

@media screen and (max-width: 768px) {
  .hidden-sp {
    display: none !important; } }

@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none !important; } }

.caption {
  font-size: 0.75em; }

.header {
  background-color: #fff; }
  .header::after {
    clear: both;
    content: "";
    display: table; }
  .header__site {
    padding: 4px 0;
    background-color: #e7edef;
    border-top: #333333 solid 3px; }
    .header__site::after {
      clear: both;
      content: "";
      display: table; }
    .header__site--itpro {
      float: left; }
      @media screen and (max-width: 768px) {
        .header__site--itpro img {
          width: 115px;
		  height: auto;
		  margin-top: 6px;
          padding: 3px; } }
    .header__site--panasonic {
      float: right;
      margin-right: 5px; }
      @media screen and (min-width: 768px) {
	  	.header__site--itpro img {
		  margin-top:8px;
		}
        .header__site--panasonic img {
          top: 2px;
          position: relative; } }
      /*.header__site--panasonic img {
        width: 82px; }*/
        @media screen and (max-width: 768px) {
          .header__site--panasonic img {
		  	width: 160px;
            height: auto;
            /*margin-bottom: 2px;*/ } }
  @media screen and (min-width: 768px) {
    .header__title {
      padding: 28px 28px 12px 0;
      border-right: 1px solid #e7edef;
      float: left; }
    .header__title {
      margin: 0 0 0.75em; } }
  @media screen and (max-width: 768px) {
    .header__title {
      text-align: center;
      padding: 0 10px;
      margin: 20px auto 0 0; } }
  @media screen and (min-width: 768px) {
    .header__lead {
      padding: 35px 0 0 28px;
      float: left; } }
  @media screen and (max-width: 768px) {
    .header__lead {
      text-align: center;
      padding: 0 10px;
      margin: 10px 0 20px; }
      .header__lead img {
        vertical-align: middle; } }
.special .visual {
  margin-bottom: 20px; }
.visual_img {
  width: 100%;
  height:auto;}
.visual__img {
  background: url(/panasonic/images/2016/img_main.jpg) center center no-repeat;
  height: 0;
  padding-top: 45.83%;
  width: 100%;
  text-indent: -9999em;
  margin-bottom: 0; }
  @media screen and (min-width: 768px) {
    .special .visual .visual__img {
      background-size: cover;
      background-position: top;
      height: 390px;
      margin-top: 0; } 
    .visual__img {
      height: 340px;
      margin-top: 90px; } }
  @media screen and (max-width: 768px) {
    .visual__img {
      background-size: cover;
      background-position: top; } }

.sidr {
  position: fixed;
  top: 0;
  z-index: 999999;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 15px;
  background: #333;
  color: #fff; }
  .sidr.active {
    left: auto;
    right: 260px; }

.panel {
  height: 38px;
  width: 100%;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; }
  @media screen and (min-width: 768px) {
    .panel {
      display: none; } }

#panel-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0; }
  @media screen and (min-width: 768px) {
    #panel-btn {
      display: none; } }
  #panel-btn:before {
    font-family: 'Arial';
    content: "MENU";
    color: #FFF;
    font-weight: 600;
    font-size: 0.75em;
    line-height: 28px;
    position: relative;
    right: 34px;
    top: 6px; }

#panel-btn-icon {
  display: block;
  position: absolute;
  top: 1px;
  right: 6px;
  width: 24px;
  height: 5px;
  margin: 7px 0 0 -8px;
  background: #FFF;
  transition: .2s; }

#panel-btn-icon:before,
#panel-btn-icon:after {
  display: block;
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 24px;
  height: 5px;
  background: #FFF;
  transition: .3s; }

#panel-btn-icon:before {
  margin-top: -6px; }

#panel-btn-icon:after {
  top: 14px;
  margin-top: 4px; }

#panel-btn .close {
  background: transparent;
  top: -5px; }

#panel-btn .close:before,
#panel-btn .close:after {
  margin-top: 0; }

#panel-btn .close:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); }

#panel-btn .close:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); }

/*.sidr {display: block;position: fixed;top: 0;height: 100%;z-index: 999999;width: 260px;overflow-x: hidden;overflow-y: auto;font-family: "lucida grande", tahoma, verdana, arial, sans-serif;font-size: 15px;background: #333;color: #fff;box-shadow: 0 0 5px 5px #222 inset}.sidr .sidr-inner {padding: 0 0 15px}.sidr .sidr-inner>p {margin-left: 15px;margin-right: 15px}.sidr.right {left: auto;right: -260px}.sidr.left {left: -260px;right: auto}.sidr.left {left: -260px;right: auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6 {background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background-size: 100%;background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image: -moz-linear-gradient(#4d4d4d, #1a1a1a);background-image: -webkit-linear-gradient(#4d4d4d, #1a1a1a);background-image: linear-gradient(#4d4d4d, #1a1a1a);font-size: 11px;font-weight: normal;padding: 0 15px;margin: 0 0 5px;color: #fff;line-height: 24px;box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2)}.sidr p {font-size: 13px;margin: 0 0 12px}.sidr p a {color: rgba(255, 255, 255, 0.9)}.sidr>p {margin-left: 15px;margin-right: 15px}.sidr ul {display: block;margin: 0 0 15px;padding: 0;border-top: 1px solid #1a1a1a;border-bottom: 1px solid #4d4d4d}.sidr ul li {display: block;margin: 0;line-height: 48px;border-top: 1px solid #4d4d4d;border-bottom: 1px solid #1a1a1a}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active {border-top: 0;line-height: 49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span {box-shadow: 0 0 15px 3px #222 inset}.sidr ul li a,.sidr ul li span {padding: 0 15px;display: block;text-decoration: none;color: #fff}.sidr ul li ul {border-bottom: 0;margin: 0}.sidr ul li ul li {line-height: 40px;font-size: 13px}.sidr ul li ul li:last-child {border-bottom: 0}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active {border-top: 0;line-height: 41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span {box-shadow: 0 0 15px 3px #222 inset}.sidr ul li ul li a,.sidr ul li ul li span {color: rgba(255, 255, 255, 0.8);padding-left: 30px}.sidr form {margin: 0 15px}.sidr label {font-size: 13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select {width: 100%;font-size: 13px;padding: 5px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0 0 10px;border-radius: 2px;border: 0;background: rgba(0, 0, 0, 0.1);color: rgba(255, 255, 255, 0.6);display: block;clear: both}.sidr input[type=checkbox] {width: auto;display: inline;clear: none}.sidr input[type=button],.sidr input[type=submit] {color: #333;background: #fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover {background: rgba(255, 255, 255, 0.9)}*/
div.snsWrap {
  padding: 0 0 15px; }
.special .ttl01,
.special #contents{
  margin: auto 40px;
}

.special .social_buttons {
  list-style-type: none;
  text-align: left;
  padding: 0 40px;
  *zoom: 1; }
.special .social_buttons li{
  border:none;
}
.social_buttons {
  list-style-type: none;
  text-align: left;
  margin: 10px 0 5px;
  padding: 0;
  *zoom: 1; }
  .social_buttons:before,
  .social_buttons:after {
    content: "";
    display: table;
    clear: both; }
  .social_buttons li {
    float: left;
    margin-left: 0;
    margin-right: 10px;
    font-size: 12px; }
    .social_buttons li:last-child {
      margin-right: 0; }
    .social_buttons li .fb_iframe_widget > span {
      vertical-align: baseline; }
  @media screen and (max-width: 768px) {
.special .social_buttons {
  padding: 0 10px;
}
.special .social_buttons li {
  height: 20px;
margin-right: 5px;
  margin-bottom: 10px;
    padding: 0;}
.special  .social_buttons li:first-child{
      margin-right: 0;
    }
.special .ttl01, .special #contents {
  margin: auto 10px;
}
}
/* ------------------------------ *
各コーナー見出し
* ------------------------------ */
.spttl {
  margin: 0;
  padding: 2px 0 2px 10px;
  font-weight: bold;
  color: #fff; }

/* ================================================
■拡大ページ
================================================  */
#expand {
  width: 100%;
  padding: 30px 0; }
  #expand .contentsWrap p.title {
    padding: 0 0 10px;
    font-size: 20px;
    font-weight: bold; }
  #expand .contentsWrap img {
    text-align: center; }
  #expand .contentsWrap p.caption {
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.4; }
  #expand .contentsWrap p.backBtn {
    font-size: 14px;
    line-height: 1.4;
    text-align: center; }

/* ================================================
■右ペイン
================================================  */
/* ------------------------------ *
インデックス
* ------------------------------ */
#submenu #index {
  width: 280px;
  background: #fff;
  margin: 0 auto 10px;
  padding-bottom: 5px; }
  #submenu #index .spttl {
    margin-bottom: 10px;
    background: #04057a; }
  #submenu #index ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    #submenu #index ul li {
      padding: 10px;
      font-size: 14px;
      line-height: 1.4;
      border-bottom: 1px solid #b2b2b2; }
      #submenu #index ul li.end {
        border-bottom: 0; }

/* ------------------------------ *
関連リンク
* ------------------------------ */
#submenu .sub-splink {
  width: 280px;
  background: #fff;
  margin: 0 auto 10px; }
  #submenu .sub-splink .spttl {
    background: #04057a; }
  #submenu .sub-splink ul {
    margin: 0;
    padding: 0 10px;
    list-style: none; }
    #submenu .sub-splink ul li {
      padding: 10px 15px;
      font-size: 14px;
      line-height: 1.4;
      border-bottom: 1px dashed #b2b2b2;
      background: url(/common/images/common/ico_link.gif) no-repeat 0 14px; }
      #submenu .sub-splink ul li.end {
        border-bottom: 0; }

/* ------------------------------ *
問い合わせ先
* ------------------------------ */
#submenu .sub-spcontact {
  width: 280px;
  background: #fff;
  margin: 0 auto 10px; }
  #submenu .sub-spcontact .spttl {
    background: #04057a; }
  #submenu .sub-spcontact ul {
    padding: 0; }
    #submenu .sub-spcontact ul li {
      margin: 0 0 10px;
      padding: 10px;
      border-bottom: 1px dashed #ccc; }
      #submenu .sub-spcontact ul li.end {
        border-bottom: none; }
      #submenu .sub-spcontact ul li h5 {
        margin: 0 0 10px;
        font-size: 1.4em;
        line-height: 1.4; }
      #submenu .sub-spcontact ul li p {
        font-size: 1.4em;
        line-height: 1.4; }

/* ------------------------------ *
PDFダウンロード
* ------------------------------ */
#submenu .dll_side {
  margin: 0 auto 10px;
  background: #fff;
  font-size: 1.2em;
  background-color: #f1f1f1; }
  #submenu .dll_side .spttl {
    background: #e37361;
    padding: 8px 12px;
    font-size: 16px; }
  #submenu .dll_side ul {
    padding: 10px 18px;
    font-size: 14px; }
    #submenu .dll_side ul a {
      color: #333; }
      #submenu .dll_side ul a:hover {
        text-decoration: underline; }
    #submenu .dll_side ul li {
      padding: 10px 0; }
      #submenu .dll_side ul li.end {
        padding: 10px 0;
        border-bottom: 0; }
      #submenu .dll_side ul li h5 {
        line-height: 1.5;
        margin-bottom: 12px;
        color: #333; }
        #submenu .dll_side ul li h5 a {
          text-decoration: underline; }
          #submenu .dll_side ul li h5 a:hover {
            text-decoration: none; }
      #submenu .dll_side ul li p {
        line-height: 1.3; }
        #submenu .dll_side ul li p.thumb {
          text-align: center;
          margin: 0 auto 15px;
          overflow: hidden; }
          #submenu .dll_side ul li p.thumb img {
            display: block;
            text-align: center;
            margin: 0 auto; }

/* ------------------------------ *
PDFダウンロード(簡易版)
* ------------------------------ */
#submenu .dll_side ul.pdfLite,
#submenu .dll_side ul.chargeLite {
  padding: 0; }

#submenu .dll_side ul.pdfLite li,
#submenu .dll_side ul.chargeLite li {
  padding: 10px;
  border-bottom: 1px dashed #ccc; }

#submenu .dll_side ul.pdfLite li.end,
#submenu .dll_side ul.chargeLite li.end {
  border-bottom: 0; }

#submenu .dll_side ul.pdfLite li a {
  padding: 8px 10px 10px 45px;
  display: block;
  background: url(http://special.nikkeibp.co.jp/common/images/common/ico_pdf.gif) no-repeat 5px 10px;
  text-decoration: underline; }
  #submenu .dll_side ul.pdfLite li a:hover {
    text-decoration: none; }

#submenu .dll_side ul.chargeLite li a {
  padding: 10px 10px 10px 45px;
  display: block;
  background: url(/common/images/common/ico_doc.gif) no-repeat 10px 10px;
  font-size: 1.2em;
  line-height: 1.2; }

/* ================================================
■BP社標準CSS
================================================  */
#contents {
  /* ------------------------------ *
資料請求、PDFダウンロード(Fll)
* ------------------------------ */
  /* ------------------------------ *
資料請求、PDFダウンロード(Simple)
* ------------------------------ */
  /* ------------------------------ *
関連リンク
* ------------------------------ */
  /* ------------------------------ *
問い合わせ先
* ------------------------------ */
  /* ================================================
■エラーページ
================================================  */
  /* ------------------------------ *
リード（灰色）
* ------------------------------ */
  /* ------------------------------ *
中見出し
* ------------------------------ */
  /* ------------------------------ *
小見出し
* ------------------------------ */
  /* ------------------------------ *
質問
* ------------------------------ */
  /* ------------------------------ *
質問への回答
* ------------------------------ */
  /* ------------------------------ *
画像の枠
* ------------------------------ */
  /* ------------------------------ *
画像のキャプション
* ------------------------------ */
  /* ------------------------------ *
図（回り込み：左）右配置
* ------------------------------ */
  /* ------------------------------ *
図（回り込み：右）左配置
* ------------------------------ */
  /* ------------------------------ *
図（スタンダード）中央配置
* ------------------------------ */
  /* ------------------------------ *
図（二つ並び）
* ------------------------------ */
  /* ------------------------------ *
図（三つ並び）
* ------------------------------ */
  /* ------------------------------ *
図（縦積み）
* ------------------------------ */
  /* ------------------------------ *
図（エトキ右配置）
* ------------------------------ */
  /* ------------------------------ *
プロフィール
* ------------------------------ */
  /* ------------------------------ *
プロフィール（顔写真付）
* ------------------------------ */
  /* ------------------------------ *
    インタビュープロフィール用
    * ------------------------------ */
  /* ------------------------------ *
囲み1
* ------------------------------ */
  /* ------------------------------ *
囲み2
* ------------------------------ */
  /* ------------------------------ *
囲み3
* ------------------------------ */
  /* ------------------------------ *
囲み4
* ------------------------------ */
  /* ------------------------------ *
コードリスト（灰色）
* ------------------------------ */
  /* ------------------------------ *
コードリスト（緑色）
* ------------------------------ */
  /* ------------------------------ *
訂正
* ------------------------------ */
  /* ------------------------------ *
用語解説
* ------------------------------ */
  /* ------------------------------ *
注釈
* ------------------------------ */
  /* ------------------------------ *
参考文献
* ------------------------------ */ }
  #contents .dll_normal {
    width: 620px;
    margin: 0 auto 20px;
    border: 1px solid #a31a03; }
    #contents .dll_normal .spttl {
      padding: 0 10px;
      background: #a31a03;
      color: #fff;
      font-size: 1.4em;
      font-weight: bold; }
    #contents .dll_normal .main {
      padding: 10px;
      text-align: center; }
    #contents .dll_normal ul {
      padding: 15px; }
      #contents .dll_normal ul li {
        margin: 10px 0 0 0;
        border-bottom: 1px dashed #b2b2b2;
        overflow: hidden; }
        #contents .dll_normal ul li.end {
          border-bottom: 0; }
        #contents .dll_normal ul li div {
          float: left;
          margin: 0 15px 15px 0; }
        #contents .dll_normal ul li img {
          border: 1px solid #ccc; }
        #contents .dll_normal ul li h5 {
          font-size: 1.4em;
          line-height: 1.3; }
        #contents .dll_normal ul li p {
          font-size: 1.2em; }
    #contents .dll_normal .dlbtn {
      width: 245px;
      margin: 0 0 5px 0;
      float: right;
      background: url(/common/images/common/btn_pdf-body.png) no-repeat; }
      #contents .dll_normal .dlbtn p {
        width: 200px;
        padding: 13px 10px 12px 35px;
        margin: 0;
        text-align: center;
        font-size: 1.4em;
        background: url(/common/images/common/btn_pdf-bottom.png) no-repeat;
        background-position: bottom;
        line-height: 1.1; }
        #contents .dll_normal .dlbtn p a {
          color: #fff;
          font-weight: bold;
          display: block; }
          #contents .dll_normal .dlbtn p a:hover {
            color: #b01414;
            text-decoration: none; }
  #contents .dll_simple {
    width: 620px;
    margin: 0 auto 20px;
    border: 1px solid #a31a03; }
    #contents .dll_simple .spttl {
      padding: 0 10px;
      background: #a31a03;
      color: #fff;
      font-size: 1.4em;
      font-weight: bold; }
    #contents .dll_simple .main {
      padding: 10px;
      text-align: center; }
    #contents .dll_simple ul {
      padding: 0 15px; }
      #contents .dll_simple ul li {
        height: 30px;
        margin: 0 0 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #b2b2b2; }
      #contents .dll_simple ul.pdf li {
        background: url(http://special.nikkeibp.co.jp/common/images/common/ico_pdf.gif) no-repeat 0 10px; }
      #contents .dll_simple ul.charge li,
      #contents .dll_simple ul.other li {
        background: url(/common/images/common/ico_doc.gif) no-repeat 3px 10px; }
      #contents .dll_simple ul li.end {
        margin: 0;
        border-bottom: 0; }
      #contents .dll_simple ul li h5 {
        margin: 0 0 0 40px;
        font-size: 1.4em;
        line-height: 1.3; }
  #contents .splink {
    width: 620px;
    margin: 0 auto 20px; }
    #contents .splink .spttl {
      background: #04057a; }
    #contents .splink ul {
      padding: 15px; }
      #contents .splink ul li {
        padding: 0 0 2px 20px;
        background: url(/common/images/common/ico_link.gif) no-repeat 0 5px;
        font-size: 1.4em;
        font-weight: bold; }
        #contents .splink ul li a span {
          font-weight: normal; }
  #contents .spcontact {
    width: 620px;
    margin: 0 auto 20px; }
    #contents .spcontact .spttl {
      background: #a4a4a4; }
    #contents .spcontact ul {
      margin: 0;
      padding: 0; }
      #contents .spcontact ul li {
        margin: 0 0 10px;
        padding: 10px;
        border-bottom: 1px dashed #b2b2b2;
        display: block;
        overflow: hidden; }
        #contents .spcontact ul li.end {
          margin: 0;
          border-bottom: 0; }
        #contents .spcontact ul li h5 {
          margin: 0 0 10px;
          font-size: 1.6em;
          line-height: 1.4; }
        #contents .spcontact ul li p {
          margin: 0 0 5px;
          font-size: 1.4em;
          line-height: 1.2; }
        #contents .spcontact ul li div {
          width: 160px;
          float: right; }
          #contents .spcontact ul li div img {
            width: 150px;
            margin: 0 0 5px 10px; }
          #contents .spcontact ul li div.wide {
            width: 330px; }
  #contents div.error {
    height: 300px;
    margin: 40px 0 0; }
    #contents div.error ul li {
      padding: 0 20px;
      font-size: 14px;
      list-style: inside; }
  #contents .bpquestion {
    font-weight: bold;
    color: #68814a; }
  #contents .bpanswer {
    font-weight: bold;
    color: #844758; }
  #contents .bpimage_image {
    margin: 0;
    font-size: 12px; }
    #contents .bpimage_image img {
	  height: auto;
      display: block; }
    #contents .bpimage_image a:hover {
      text-decoration: none; }
  #contents .bpimage_right {
    float: right;
    margin: 10px 0 10px 15px; }
  #contents .bpimage_left {
    float: left;
    margin: 10px 15px 10px 0; }
  #contents .bpbox_center {
    text-align: center; }
  #contents .bpimage_center {
    margin: 10px auto 30px;
    text-align: left; }
  #contents .bpimage_double {
    margin: 10px auto 20px;
    text-align: center;
    overflow: hidden; }
    #contents .bpimage_double .bpimage_left,
    #contents .bpimage_double .bpimage_right {
      margin: 0; }
  #contents .bpimage_triple {
    margin: 10px auto 20px;
    text-align: center;
    overflow: hidden; }
    #contents .bpimage_triple .bpimage_wrap {
      margin: 0;
      float: left;
      overflow: hidden; }
    #contents .bpimage_triple .bpimage_left {
      margin: 0; }
    #contents .bpimage_triple .bpimage_center {
      float: right;
      margin: 0; }
    #contents .bpimage_triple .bpimage_right {
      margin: 0; }


  #contents .bpbox_left {
    float: left;
    margin: 10px 10px 10px 0; }
  #contents .bpbox_right {
    float: right;
    margin: 10px 0 10px 10px;
    clear:both; }
  #contents .bpimage_set {
    margin: 0 0 10px 0; }
  #contents .bpimage_caption_right {
    margin: 0 auto 20px;
    text-align: center;
    zoom: 1;
    /*for IE 5.5-7*/ }
    #contents .bpimage_caption_right .bpimage_title {
      padding: 10px 0 0;
      clear: none; }
    #contents .bpimage_caption_right .bpimage_caption {
      clear: none; }
    #contents .bpimage_caption_right:after {
      display: block;
      clear: both;
      height: 0.1em;
      line-height: 0.1em;
      visibility: hidden;
      content: "."; }
  #contents .bpprofile,
  #contents .bpprofile_photo {
    margin: 1em 0;
    width: 100%; }
  #contents .bpprofile .bpprofile_profile {
    font-weight: bold;
    border-bottom: 3px solid #bed4ea;
    background: #dde9f5;
    text-align: left;
    padding: 8px 15px;
    vertical-align: bottom; }
  #contents .bpprofile_position {
    font-weight: bold; }
  #contents .bpprofile_text {
    color: #000000;
    text-align: left;
    padding: 10px 15px;
    background-color: #F1F1F1; }
    #contents .bpprofile_text::after {
      clear: both;
      content: "";
      display: table; }
  #contents .bpprofile_photo .bpprofile_profile {
    font-weight: bold;
/*    border-bottom: 3px solid #bed4ea;
    background: #dde9f5;
*/    text-align: left;
    padding: 8px 15px;
    vertical-align: bottom; }
  #contents .bpprofile_photo .bpprofile_text img {
    margin: 5px 15px 5px 0px;
    float: left; }
  #contents .bpinterview {
    margin: 1em 0;
    width: 100%; }
  #contents .bpinterview_profile {
    font-weight: bold;
    border-bottom: 3px solid #c1e3c4;
    background: #ddf5de;
    text-align: left;
    padding: 8px 15px;
    vertical-align: bottom; }
  #contents .bpinterview_position {
    font-weight: bold;
    font-size: 11pt; }
  #contents .bpinterview_name {
    font-size: 10pt; }
  #contents .bpinterview_text {
    color: #000000;
    text-align: left;
    padding: 10px 15px;
    background-color: #F1F1F1; }
    #contents .bpinterview_text::after {
      clear: both;
      content: "";
      display: table; }
  #contents .bpbox {
    background-color: #f5f5ea;
    text-align: left; }
    #contents .bpbox .bpbox_title {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 2px solid #cfcfaa;
      padding: 12px 12px 8px; }

    #contents .bpbox .bpbox_text {
      padding: 10px;
      margin-bottom:20px;
    }


  #contents .bpbox2 {
    background-color: #b5e0d0;
    text-align: center;
    padding: 10px; }
    #contents .bpbox2 .bpbox_title {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      padding: 2px 8px 8px; }
    #contents .bpbox2 .bpbox_text {
      text-align: left;
      line-height: 150%;
      color: #000000;
      padding: 10px 15px;
      background-color: #FFFFFF; }
  #contents .bpbox3 {
    background-color: #ebebf7;
    text-align: left; }
    #contents .bpbox3 .bpbox_title {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 2px solid #acaee3;
      padding: 12px 12px 8px; }
    #contents .bpbox3 .bpbox_text {
      text-align: left;
      line-height: 150%;
      color: #000000;
      padding: 10px 15px;
      background-color: #f3f3ff; }
  #contents .bpcode {
    margin: 0 20px 20px;
    background-color: #f7f7f7;
    border: 1px solid #dddddd; }
    #contents .bpcode pre {
      margin: 10px;
      line-height: 180%;
      padding: 10px 15px; }
      #contents .bpcode pre code {
        font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-size: 13px;
        color: #666666; }
  #contents .bpcode2 {
    margin: 0 20px 20px;
    background-color: #5d7b55;
    border: 1px solid #6e8867; }
    #contents .bpcode2 pre {
      margin: 10px;
      line-height: 180%;
      padding: 10px 15px; }
      #contents .bpcode2 pre code {
        font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-size: 13px;
        color: #FFFFFF; }
  #contents div.bpteisei_box {
    border: 1px dashed #e7e7e7;
    padding: 10px 15px;
    margin: 0 20px 20px; }
    #contents div.bpteisei_box div.bpteisei {
      color: #858585;
      font-size: 14px; }
  #contents div.bpword {
    font-size: 14px;
    line-height: 1.5;
    background: #f2f6fa;
    padding: 0.7em 14px 0.5em;
    margin-bottom: 1.4em; }
  #contents div.bpannotation {
    color: #888;
    font-size: 14px;
    line-height: 1.5;
    margin-top: -0.5em;
    margin-bottom: 1.25em; }
  #contents div.bpreference {
    font-size: 14px;
    line-height: 1.7;
    border: 1px dotted #aaa;
    background: #f2f6fa;
    padding: 0.7em 14px 0.5em;
    margin-bottom: 1.4em; }

/*----------------------------------------------------------------*/
/* ITproより */
/* ページナビ・上 */
#naviTop {
  width: 100%;
  font-size: 1.2em;
  margin: 10px 0;
  clear: both; }

#naviTop .pageNumber a {
  float: right;
  display: block;
  font-weight: bold;
  color: #04057a;
  padding: 2px 5px;
  background: #ffffff;
  border: solid 1px #04057a;
  line-height: 15px;
  margin: 0 2px 0 0; }

#naviTop .pageNumber a:hover,
#naviTop .pageNumber a.now {
  text-decoration: none;
  background: #04057a;
  color: #04057a; }

/* ------------------------------ *
次ページナビ
* ------------------------------ */
.nextPagePreview {
  margin: 0 auto;
  padding: 15px 0 0;
  text-align: center; }

.nextPagePreview span {
  margin: 0;
  padding: 3px 5px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 19px;
  border: 1px solid #04057a;
  text-align: center;
  display: inline-block;
  color: #ffffff;
  background: #04057a;
  vertical-align: top; }

.nextPagePreview a {
  margin: 0;
  padding: 3px 5px;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 19px;
  border: 1px solid #04057a;
  text-align: center;
  display: inline-block; }

.nextPagePreview a:link,
.nextPagePreview a:visited {
  color: #04057a;
  background: #ffffff;
  text-decoration: none; }

.nextPagePreview a:hover {
  color: #ffffff;
  background: #04057a;
  text-decoration: none; }

.nextPagePreview a:visited:hover {
  color: #ffffff;
  background: #04057a; }

/* ------------------------------ *
ページナビ
* ------------------------------ */
#naviBottom {
  padding: 20px 0;
  text-align: center;
  font-size: 1.2em; }

#naviBottom .pageNumber {
  margin: 0 0 15px;
  text-align: center; }

#naviBottom .pageNumber a {
  margin: 0px 2px;
  padding: 3px 5px;
  font-size: 12px;
  font-weight: bold;
  line-height: 19px;
  border: 1px solid #04057a;
  text-align: center;
  display: inline-block; }

#naviBottom .pageNumber a:link,
#naviBottom .pageNumber a:visited {
  color: #04057a;
  background: #ffffff;
  text-decoration: none; }

#naviBottom .pageNumber a:hover {
  color: #ffffff;
  background: #04057a;
  text-decoration: none; }

#naviBottom .pageNumber a:visited:hover {
  color: #ffffff;
  background: #04057a; }

#naviBottom .pageNumber a.prev,
#naviBottom .pageNumber a.next {
  width: 80px; }

#naviBottom .pageNumber a.now {
  background: #04057a;
  color: #ffffff; }

/* ================================================
■ページ遷移クリプト便
================================================  */
.wrapper #note_text {
  background-color: #7F7E7E;
  color: #FFFFFF;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 auto 20px;
  padding: 5px; }

.detail {
  padding: 10px; }
  .detail .bpimage_right img {
    width: 100%;
    height: auto;
    margin: 0 auto; }
  .detail .bpimage_left img {
    width: 100%;
    height: auto;
    margin: 0 auto; }
  .detail .bpbox_right img {
    width: 100%;
    height: auto;
    margin: 0 auto; }
  @media screen and (min-width: 768px) {


    .detail {
      font-weight: 500;
      padding: 0; }
      .detail .bpimage_right {
        width: 260px;
        float: right;
        margin: 5px 0 10px 15px; }
      .detail .bpimage_left {
        width: 260px;
        float: left;
        margin: 5px 15px 10px 0; }
      .detail .bpbox_right {
        width: 260px;
        float: right;
        margin: 5px 0 10px 10px; } }
  .detail a {
    text-decoration: underline; }
  .detail .bpbox_center {
    text-align: center; }
  .detail .bpimage_caption {
    padding: 5px 0 15px;
    text-align: left;
    line-height: 1.5;
    font-size: 0.75em;
    color: #5c5c5c; }
  .detail #leftHeader_text {
    padding: 15px 0 10px;
    border-bottom: 1px solid #e7edef;
    margin-bottom: 20px; }
  .detail .shoulderTitle {
    color: #666;
    font-weight: 600;
    margin-bottom: 8px; }
  .detail h1 {
    font-size: 1.375em;
    margin-bottom: 10px; }
    .detail h1 .icon, .detail h1 .news dl.new dt:before, .news dl.new .detail h1 dt:before {
      margin-left: 8px;
      margin-bottom: 2px;
      vertical-align: middle; }
  .detail h2 {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    margin: 0 0 5px; }
  .detail .bplead {
    color: #333333;
    margin-bottom: 20px;
    padding: 0;
    line-height: 160%; }
  @media screen and (min-width: 768px) {
    .bpimage_center {
    width: 100% !important;
    margin: 10px auto 15px;
    text-align: left; 
  }
  .bpimage_center img {
    width: 100%;
    height: auto;
  } 
    }
  .detail .bpframe {
    margin: 30px 0;
    background: #f4f6f7;
    border-left: none;
    border-right: none;
    position: relative;
    z-index: 2; }
    .detail .bpframe strong {
      display: block;
      padding: 12px 12px 8px;
      border-bottom: 2px solid #e6e9ea;
      font-size: 1.125em;
      color: #666666; }
    .detail .bpframe .bpbox_title {
      margin: 0; }
    .detail .bpframe .bpbox_text {
      background: #F5F5F5; }
    .detail .bpframe ul {
      margin-bottom: 10px; }
    .detail .bpframe li {
      padding: 7px 0;
      list-style-position: inside;
      border-bottom: #e6e9ea solid 1px; }
      .detail .bpframe li a {
        color: #00489d;
        text-decoration: underline;
        background: url(/panasonic/images/2016/ico_arrow1.png) left center no-repeat;
        padding-left: 20px;
        margin-left: 18px; }
        .detail .bpframe li a:hover {
          text-decoration: none; }
  .detail h3 {
    margin-bottom: 25px;
    padding: 10px 0;
    font-size: 1.2em;
    line-height: 1.4;
    border-bottom: 1px solid #e7edef;
    clear: both; }
    .detail h3 a {
      color: #333;
      text-decoration: none; }
  .detail h4 {
    margin-bottom: 25px;
    padding: 10px 0;
    font-size: 1em;
    line-height: 1.4;
    border-bottom: 1px solid #e7edef;
    clear: both; }
    .detail h4 a {
      color: #333;
      text-decoration: none; }
  .detail p {
    margin-bottom: 1em; }
  .detail .bpbox4 {
    margin: 30px 0 40px;
    background: #f4f6f7;
    zoom:1;
    clear: both;
     }
   .detail .bpbox4:after {
    content:"";
    display:block;
    clear:both;
   }


    .detail .bpbox4 .bpbox_title {
      font-weight: 600;
      padding: 12px 12px 8px;
      border-bottom: 2px solid #e6e9ea;
      font-size: 1.125em;
      color: #666666; }
    .detail .bpbox4 .bpbox_text {
      color: #333;
      padding: 12px; }
@media screen and (max-width: 768px) {
.detail {
  padding: 0; }
}
/* ------------------------------ *
backnumber
* ------------------------------ */
.backnumber{
  padding: 0 45px;
  margin-bottom: 100px;
}
.backnumber h3{
	font-size: 28px;
}
.backnumber .col3{
	font-size: 0;
	margin-top: -5px;
}
.backnumber .col3 .col{
	display: inline-block;
	vertical-align: top;
	width: 246px;
	margin-right: 10px;
}
.backnumber .col3 .col:nth-child(3n){
	margin-right: 0;
}
.backnumber .col3 .col:nth-child(4){
	display:none;
}
.backnumber .col3 .col div{
	width: 246px;
	height: 124px;
	overflow: hidden;
}
.backnumber .col3 .col div img{
	width: 100%;
	height: auto;
	transition-duration: 0.5s;
}
.backnumber .col3 .col a{
	display: block;
	color: #333;
}
.backnumber .col3 .col a:hover div img{
	transform: scale(1.05,1.05);
}
.backnumber .col3 .col dl{
	margin-top: 15px;
}
.backnumber .col3 .col dt{
	font-size: 14px;
	line-height: 1.5;
	font-weight: bold;
}
.backnumber .col3 .col a:hover dt{
	color: #103d85;
}
.backnumber p{
  position: relative;
  padding-left: 20px;
  text-align: center;
  margin-top: 20px;
}
.backnumber p::before{
    content: '';
		display: inline-block;
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #103d85;
    border-right: solid 2px #103d85;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
		margin-right: 10px;
}
.backnumber p a{
	color: #103d85;
}
@media screen and (max-width: 768px) {
.backnumber{
  padding: 0 10px;
  margin-bottom: 50px;
}
  .pocket-btn{
    margin-right: auto;
  }
.backnumber p::before{
  left: 36%;
}
.backnumber .col3{
	margin-top: -25px;
	padding: 0 10px;
}
.backnumber .col3 .col{
	width: 49%;
	margin: 25px 2% 0 0;
}
.backnumber .col3 .col div{
	width: 100%;
	height: auto;
}
.backnumber .col3 .col dl{
	margin-top: 10px;
}
.backnumber .col3 .col dt{
	font-size: 14px;
}
  
.backnumber .col3 .col:nth-child(2n) {
    margin-right: 0;
}
.backnumber .col3 .col:nth-child(3n) {
    margin-right: 2%;
}
.backnumber .col3 .col:nth-child(4){
	display: inline-block;
}
}

  @media screen and (min-width: 768px) {
    .main {
      width: 1170px;
      margin: 0 auto;
      padding-top: 50px; } }

.index .main {
  background: #FFF;
  background-image: none; }

@media screen and (min-width: 768px) {
  .container {
    width: 1170px;
    margin: 0 auto; } }

@media screen and (min-width: 768px) {
  .wrapper {
    padding: 20px 12px 30px 30px; }
    .wrapper::after {
      clear: both;
      content: "";
      display: table; } }

@media screen and (min-width: 768px) {
  .index .wrapper {
    padding: 0; }
    .index .wrapper::after {
      clear: both;
      content: "";
      display: table; } }

@media screen and (min-width: 768px) {
  .contents {
    float: left;
    width: 760px; } }

@media screen and (min-width: 768px) {
  .index .contents {
    width: 850px; } }

.aside {
  margin-bottom: 30px;
  text-align: center;
}
  @media screen and (min-width: 768px) {
    .aside {
      padding: 0;
      float: right;
      width: 300px; } }

.nav {
  display: none; }
  @media screen and (min-width: 768px) {
    .nav {
      display: block;
      height: 60px;
      background-color: #103d85;
      color: #ffffff;
      position: relative; }
			.nav__list{
				overflow: hidden;}
      .nav__item {
        float: left;
        text-align: center;
        position: relative;
        z-index: 10; }
    
        .nav__item a {
          display: block;
          width: 195px;
          color: #ffffff;
          font-weight: 500;
          line-height: 60px;
          margin-top: 0;  
          background-clip: padding-box;
          border-right: 1px solid #385992;
          font-size: 14px;
					box-sizing: border-box;
          transition: 0.3s; }
        .nav__item:first-child a {
          border-left: 1px solid #385992; }
          .nav__item a.active {
            color: #ffffff;
            background-color: #103d85;}
          .nav__item a:hover,
          .nav__item a.active2 {
            color: #103d85;
            background-color: #e4eaec;}}

    
.sp_menu .nav {
  display: block;
  font-size: 14px;
  background: #103d85;
  color: #fff;
  width: 100%;
  z-index: 100;
  position: fixed;
  top: 38px; }
  .sp_menu .nav li {
    line-height: 25px;
    border-top: 1px solid #385992;
    padding: 16px 0; }
  .sp_menu .nav li a {
    position: relative;
    padding-left: 37px;
    color: #FFFFFF; 
    font-weight: 600;}
.sp_menu .nav li a::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 10%;
    left: 17px;
}

.sidr-class-nav__item dl {
  margin: 0; }

.sidr-class-nav__item dt {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "Noto Sans Japanese", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  margin: 0; }

.sidr-class-nav__item dd {
  display: none; }
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .slides li a div img {
        transition-duration: 0 !important; }
      .slides li a:hover div img {
        transform: scale(1) !important; }
}
@media screen and (min-width: 768px) {
  .slides {
    margin-bottom: 40px; }
    .slides li {
      position: relative;
      overflow: hidden; }
      .slides li a div {
        width: 770px;
        height: 390px;
        overflow: hidden; }
      .slides li a div img {
        width: 100%;
        height: auto;
        transition-duration: 0.5s; }
      .slides li a:hover div img {
        transform: scale(1.05,1.05); }
      .slides li dl {
        width: 100%;
        color: #000;
        padding: 22px 15px;
        box-sizing: border-box;
        margin: 0;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; }
        .slides li dl dt {
          font-weight: 600;
          margin: 0; 
          font-size: 18px;}
        .slides li a:hover dl dt {
          color: #103d85;}
        .slides li dl dd {
          font-size: 0.875em; }
        .slides li dl dd time{
          font-size: 12px;
          color: #808080;
          font-weight: 600;}
      .slides li.active dl {
        position: absolute;
        top: 131px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        color: #FFF;
        padding: 10px 15px;
        box-sizing: border-box;
        height: 197px;
        vertical-align: bottom;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out; }
    .slides .film_roll_pager {
      display: none; }
    .slides .film_roll_prev {
      position: absolute;
      top: 78px;
      left: 370px;
      background: url(/panasonic/images/2016/ico_arrow_l1.png) no-repeat;
      width: 39px;
      height: 39px;
      text-indent: -9999em;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out; }
      .slides .film_roll_prev:hover {
        left: 365px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; }
    .slides .film_roll_next {
      position: absolute;
      top: 78px;
      right: 370px;
      background: url(/panasonic/images/2016/ico_arrow_r1.png) no-repeat;
      width: 39px;
      height: 39px;
      text-indent: -9999em;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out; }
      .slides .film_roll_next:hover {
        right: 365px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; } }

@media screen and (max-width: 768px) {
  .slides {
    margin-bottom: 30px; }
    .slides dl {
      width: 100%;
      color: #000;
      padding: 10px 15px;
      box-sizing: border-box;
      vertical-align: bottom;
      margin: 0;
      height: 90px;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out; }
      .slides dl dt {
        font-weight: 600;
        margin: 0 0 5px; 
        font-size: 14px;}
      .slides dl dd {
        font-size: 0.875em;
        font-size: 12px; }
      .slides li dl dd time{
          font-size: 12px;
          color: #808080;
          font-weight: 600;}
    .slides .film_roll_prev {
      position: absolute;
      top: 64px;
      left: 2%;
      background: url(/panasonic/images/2016/ico_arrow_l1.png) no-repeat;
      width: 39px;
      height: 39px;
      text-indent: -9999em; }
    .slides .film_roll_next {
      position: absolute;
      top: 64px;
      right: 2%;
      background: url(/panasonic/images/2016/ico_arrow_r1.png) no-repeat;
      width: 39px;
      height: 39px;
      text-indent: -9999em; }
    .slides .film_roll_pager {
      background-color: #333;
      text-align: center; }
      .slides .film_roll_pager a {
        color: #ececec;
        line-height: 30px;
        font-size: 9px;
        padding: 0 4px; }
        .slides .film_roll_pager a.active {
          color: #00b2ed; } }

.news {
  margin-bottom: 40px; }
  .news dl {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #e6e9ea; }
    .news dl::after {
      clear: both;
      content: "";
      display: table; }
    .news dl dt {
      margin-top: 0;
      padding: 0 10px;
      float: left; }
      .news dl dt span img {
        vertical-align: top;
        margin: 3px 5px 0 0; }
    @media screen and (min-width: 768px) {
      .news dl dd {
        margin-left: 75px; } }
    .news dl dd a {
      color: #111; }
      .news dl dd a:hover {
        text-decoration: underline; }
    .news dl.new dt:before {
      content: "NEW";
      margin-right: 8px; }
    @media screen and (min-width: 768px) {
      .news dl.new dd {
        margin-left: 128px; } }
  .news ul {
    text-align: right;
    padding-top: 12px; }
    .news ul li {
      display: inline; }
      .news ul li a {
        text-decoration: underline;
        font-size: 1em;
        padding-left: 15px; }
        .news ul li a:hover {
          text-decoration: none; }
      .news ul li:nth-child(1) a {
        color: #00489d;
        margin-right: 12px;
        background: url(/panasonic/images/2016/ico_arrow1.png) no-repeat 0 2px; }
      .news ul li:nth-child(2) a {
        color: #cc2a41;
        background: url(/panasonic/images/2016/ico_arrow2.png) no-repeat 0 2px; }
  @media screen and (max-width: 768px) {
    .news dl dt {
      float: none; }
    .news dl dd {
      float: none;
      padding: 0 10px; }
    .news ul {
      text-align: left; }
      .news ul li {
        display: inline-block;
        padding: 0 10px; } }

@media screen and (min-width: 768px) {
  .pickup {
    margin-bottom: 18px; }
    .pickup h2 {
      margin-bottom: 40px; }
    .pickup::after {
      clear: both;
      content: "";
      display: table; }
    .pickup li {
      position: relative;
      overflow: hidden;
      float: left;
      margin: 0 23px 23px 0; }
      .pickup li:nth-child(3n) {
        margin-right: 0; }
      .pickup li a .date {
        display: none; }
      .pickup li a dl {
        position: absolute;
        top: 137px;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        color: #FFF;
        padding: 10px;
        box-sizing: border-box;
        height: 197px;
        vertical-align: bottom;
        margin: 0;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; }
        .pickup li a dl dt {
          font-weight: 600;
          margin: 0 0 6px; }
          .pickup li a dl dt span {
            margin-right: 8px;
            position: relative;
            top: -2px; }
        .pickup li a dl dd {
          font-size: 0.875em; }
      .pickup li a:hover dl {
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        top: 0;
        padding-top: 96px; }
      .pickup li .img img {
        width: 348px;
        height: auto; } }

@media screen and (max-width: 768px) {
  .pickup {
    margin-bottom: 18px; }
    .pickup::after {
      clear: both;
      content: "";
      display: table; }
    .pickup ul {
      padding: 0 5px; }
      .pickup ul li {
        width: 50%;
        float: left;
        padding: 5px; }
        .pickup ul li a {
          color: #333; }
          .pickup ul li a .date {
            font-size: 0.75em;
            margin-bottom: 6px; }
          .pickup ul li a dl {
            margin-top: 0; }
            .pickup ul li a dl dt {
              position: relative;
              font-weight: 500;
              margin-top: 8px;
              font-size: 0.875em; }
              .pickup ul li a dl dt img {
                position: absolute;
                top: -30px;
                right: 5px; }
            .pickup ul li a dl dd {
              display: none; } }

.letsnote {
  padding-top: 10px;
  background-color: #fff; }
.letsnote h2 {
  margin: 30px 0; }
  .letsnote .boxLetsnote {
    background-color: #edf4f8;
    padding: 45px 0;
    position: relative;}
.spOnly{display: none;}
  .letsnote .inner{
    width: 1170px;
    margin: 0 auto;
    display: table;}
    .letsnote .inner img{
      display: block;
      margin: 0 auto;}
    .letsnote .box{
      display: table-cell;
      font-size: 0;}
    .letsnote .box:first-child{
      float: left;
      width: 74.1%;
      position: relative;
      padding-right: 30px;}
    .letsnote .box:first-child:after {
      margin: 0 10%;
      content: "";
      width: 1px;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      left: 90%;
      top: 0;}
    .letsnote .box:last-child{
      float: right;
      width: 25.9%;
      padding-left: 30px;}
    .letsnote .btnLets{
      display: inline-block;
      margin: 7px 10px 0 0;}
    .letsnote .btnLets:last-child{
      margin-right: 0;}
    .letsnote .btnLets a{
      width: 272px;
      padding: 30px 0 30px 30px;
      position: relative;
      display: inline-block;
      color: #ffffff;
      font-feature-settings: "palt";
      font-size: 14px;
      line-height: 1;
      font-weight: 700;}
    .letsnote .btnLets:hover{
      opacity: 0.8;
      filter: alpha(opacity=80);
      -ms-filter: "alpha( opacity=80 )";}
    .letsnote .btnLets a::after{
      content: '';
      width: 10px;
      height: 10px;
      border: 0px;
      border-top: solid 2px #ffffff;
      border-right: solid 2px #ffffff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: 43%;
      right: 15px;}
    .lets_01{background: #559bdb;}
    .lets_02{background: #414141;}
    .lets_03{background: #54657d;}
    .tough{background: #103d85;}


/**
* 2024.06.13
* ボタンの4つ目を追加したことによるレイアウト崩れを修正するため追加
*/
.letsnote .inner{
  width: 1270px;
}

.letsnote .box:first-child{
  width: 76.2%;
}

.letsnote .box:last-child{
  width: 23.8%;
}

.letsnote .box:first-child .btnLets:not(:last-child) {
  margin-right: 8px;
}

.letsnote .box:first-child .btnLets a {
  width: 228px;
  padding-left: 20px;
}
.letsnote .box:first-child .btnLets.tough a {
  padding-left: 10px;
}

@media screen and (max-width: 768px) {
  .letsnote .box:first-child .btnLets:not(:last-child) {
    margin-right: auto;
  }
}
/**
* ここまで
*/


  @media screen and (max-width: 768px) {
    .spOnly{display: block;}
    .letsnote h2 { line-height: 1.5;}
      .letsnote .inner{ width: 100%;}
      .letsnote .box{
        display: block;
        font-size: 0;
    margin-bottom: 45px;
    text-align: center;}
      .letsnote .box:first-child,
      .letsnote .box:last-child{
        width: 100%;
        float: none;
        padding: 0;}
    .letsnote .box:last-child{
      margin-bottom: 0;
    }
    .letsnote .box:first-child:after {
    margin: 0 5%;
    content: "";
    width: 90%;
    height: 1px;
    background-color: #cccccc;
    position: absolute;
    top: 106%;
      left: 0;
    }
    .letsnote .btnLets{
      margin: 10px auto 0;
      display: block;
      width: 260px;
    }
    .letsnote .btnLets a {
      width: 260px;
      text-align: left;
    padding: 20px 0 20px 20px;}
    .letsnote .btnLets a::after{
      top:40%;
    }
    .letsnote .btnLets:last-child {
    margin-right: auto;
}
    
      .letsnote ul::after {
        clear: both;
        content: "";
        display: table; }
      .letsnote ul li {
        float: left;
        width: 50%;
        padding: 15px;
        margin: 0;
        font-size: 0.875em; } }


.campaign_bnr {
  width:315px;
  margin: 0 auto 10px auto;
}

.banner{
  width: 300px;
  margin: 0 auto 23px;  
}
.ranking::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #103d85;
    margin: 0 auto 22px;
}
.ranking dl{
  margin: 8px 0 12px;
}
.banner p{
  text-align: left;
  font-size: 12px;
padding: 15px 0 10px;}
.banner p a{
	color: #333;}
.banner p span{
  font-size: 14px;
  font-weight: 700;
  display: block;
}

.ranking {
  text-align: left;
  width: 300px;
  margin-bottom: 20px;
}
.ranking::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #103d85;
    margin: 22px auto 0;
}
.ranking h3{
  color: #333333;
  font-weight: 600;
  font-size: 16px;
}
.ranking h3 span {
    font-size: 12px;
}
.ranking li {
}
.ranking li dt {
    float: right;
    margin: 0; 

}
.ranking li dt img {
    width: 90px;
  height: 68px;
}
.ranking li dd.title{
    font-size: 12px;
  line-height: 1.67;
  color: #000000;
  width: 195px;
}
.ranking li a:hover dd.title{
  text-decoration: underline;
}
.ranking li dd.date{
    font-size: 12px;
  font-weight: 700;
  color: #808080;
}
.ranking .namber{
  text-align: center;
  color: #103d85;
  width: 23px;
  height: 23px;
  font-size: 14px;
  background: #e6e6e6;
  line-height: 1.75;
}
.ranking .top{
  background: url("/panasonic/images/2021/parts/bg_sidenavi_top.svg") no-repeat center;
  color: #ffffff;
  width: 30px;
  line-height: 2;
}

.banner_letsnote {
  width: 315px;
  margin: 0 auto 10px;
  background-image: url(/panasonic/images/2016/parts/banner_mx3.jpg);
  }
  .banner_letsnote::after {
    clear: both;
    content: "";
    display: table; }
  .banner_letsnote a {
    float: left;
    margin: 192px 0px 1px 14px;
    display: block;
    width: 86px;
    height: 57px;
    background-position: 0 0;
    text-indent: -9999px; }
    .banner_letsnote a:hover {
      background-position: 0 -57px; }
    .banner_letsnote a.btn_mx3_01 {
      background-image: url(/panasonic/images/2016/btn_mx3_01.gif); }
    .banner_letsnote a.btn_mx3_02 {
      background-image: url(/panasonic/images/2016/btn_mx3_02.gif); }
    .banner_letsnote a.btn_mx3_03 {
      background-image: url(/panasonic/images/2016/btn_mx3_03.gif); }

.banner_tough {
  width: 315px;
  margin: 0 auto 10px; }
  .banner_tough a {
    background: url(/panasonic/images/2016/parts/banner_fz-g1.jpg) no-repeat 0 0;
    display: block;
    width: 315px;
    height: 340px;
    text-indent: -9999px;
    margin-bottom: 10px; }
    .banner_tough a:hover {
      background-position: 0 -340px; }
  @media screen and (max-width: 768px) {
.banner{
  width: 100%;
  margin: 0 auto 23px;  
}
    .aside{
      padding: 0 10px;
    }
    .ranking {
    width: 100%;
    margin-bottom: 20px;
}
    /* .ranking li dt img{
      width: auto;
      height: auto;
    } */
    .ranking li dd.title {
    font-size: 12px;
    line-height: 1.67;
    color: #000000;
    width: 70%;
}.banner p {
  padding: 10px 20px;
}
    .ranking li {
    margin-bottom: 20px;
}
}

/* .special li {
  border-bottom: 1px solid #e7edef;
  padding: 15px 0; } */
.special li:first-child dt img{
  width: 100%;
  height: auto;
}
.top .ttl,
.special .ttl{
  font-size: 32px;
  margin-bottom: 18px;
}
.special .col2{
	font-size: 0;
	margin-top: -5px;
}
.special .ttl + .col2{
	margin-top: 0;
}
.special .col1{
  display: inline-block;
  vertical-align: top;
  width: 100%;
  color: #000;
}
.special .col1 dl{
	margin: 15px 0 0 0
}
.special .col1 dt{
  font-size:18px;
	margin-top: 0;
}
.special .col1 dd time{
  font-size: 12px;
  color: #808080;
  font-weight: 600;
}
.special .col1 dt,
.special .col1 dd{
  color: #000;
}
.special .col1 a:hover dt{
  color: #103d85;
}
.special .col1 dd{
  font-size: 14px;
  margin: 2px 0 0 0;
}
.special .col1 div{
  width: 850px;
  height: 390px;
  overflow: hidden;
}
.special .col1 div img{
  width: 100%;
  height: auto;
  transition-duration: 0.5s;
}
.special .col1 a:hover div img{
  transform: scale(1.05,1.05);
}

  @media screen and (max-width: 768px) {
    
.top .ttl,
.special .ttl{
  font-size: 20px;
  margin-bottom: 10px;
  padding: 0 10px;
}
    .special .col1{
      padding: 0 10px;
    }
    .special .col1 div{
      width: 100%;
      height: auto;
}
		.special .col1 dl{
			margin: 10px 0 0 0
		}
    .special .col1 dt{
      font-size: 14px;
    }
    .special .col1 dd{
      font-size: 12px;
    }
    /* .special li {
      padding: 0 10px 12px;
      margin-bottom: 15px; } */ }

  .special li dl {
    color: #111;
    margin: 0; }
    .special li dl::after {
      clear: both;
      content: "";
      display: table; }
  .special li dt {
    float: left;
    margin: 0 10px 0 0; }
    @media screen and (max-width: 768px) {
      .special li dt img {
        width: 70px;
        height: auto; } }
  .special li dd.date {
    color: #666;
    font-size: 0.75em;
    font-weight: 600;
    padding-bottom: 5px; }
    .special li dd.date .category {
      padding-left: 8px; }
      .special li dd.date .category:before {
        content: "|";
        padding-right: 8px; }
  .special li dd.body {
    font-size: 0.875em;
    padding: 5px 0 0 0; }
  .special li dd.title {
    font-weight: 600; }
    .special li dd.title .icon, .special li dd.title .news dl.new dt:before, .news dl.new .special li dd.title dt:before {
      vertical-align: middle;
      margin: 0 0 3px 10px; }
  .special li dd.link {
    float: right;
    color: #00489d;
    padding-left: 16px;
    margin-top: 8px;
    text-decoration: underline;
    font-weight: 500;
    background: url(/panasonic/images/2016/ico_arrow1.png) left center no-repeat; }
  @media screen and (max-width: 768px) {
    .special li dd {
      margin-left: 0; }
      .special li dd.link {
        font-size: 0.875em; } }
  .special li a:hover dd.title {
    color: #00489d;
    text-decoration: underline; }
  .special li a:hover dd.body {
    color: #00489d; }

.backnumber li {
  margin-bottom: 1px;
  border-bottom: 1px solid #e7edef; }
  .backnumber li a {
    display: block;
    padding: 10px 24px 10px 10px;
    margin-bottom: 1px;
    background: url(/panasonic/images/2016/ico_arrow1.png) 99% center no-repeat; }
    .backnumber li a:hover {
      background-color: #E0E9F3; }
  .backnumber li dl {
    margin: 0; }
  .backnumber li dt {
    float: left;
    color: #666666;
    font-size: 0.875em;
    font-weight: 500;
    margin-top: 0; }
  .backnumber li dd {
    margin-left: 130px;
    color: #111; }

.pagination {
  padding: 30px 0; }
  .pagination ul {
    text-align: center; }
    .pagination ul li {
      display: inline-block;
      margin: 0 2px 8px; }
      .pagination ul li a {
        color: #999999;
        width: 34px;
        height: 34px;
        border: 1px solid #999999;
        line-height: 34px;
        border-radius: 34px;
        display: block;
        text-decoration: none; }
        .pagination ul li a:hover {
          background-color: #999999;
          color: #FFFFFF; }
      .pagination ul li.active a {
        background-color: #999999;
        color: #FFFFFF; }
      .pagination ul li.next a,
      .pagination ul li.prev a {
        width: auto;
        padding: 0 15px; }
        .pagination ul li.next a span,
        .pagination ul li.prev a span {
          padding-right: 12px;
          background: url(/panasonic/images/2016/ico_arrow4.png) right center no-repeat; }
        .pagination ul li.next a:hover,
        .pagination ul li.prev a:hover {
          background-color: #999999;
          color: #FFFFFF; }
          .pagination ul li.next a:hover span,
          .pagination ul li.prev a:hover span {
            background: #999999 url(/panasonic/images/2016/ico_arrow5.png) right center no-repeat; }
        @media screen and (max-width: 320px) {
          .pagination ul li.next a,
          .pagination ul li.prev a {
            padding: 0 5px; }
            .pagination ul li.next a span,
            .pagination ul li.prev a span {
              background-image: none;
              padding-right: 0; }
            .pagination ul li.next a:hover span,
            .pagination ul li.prev a:hover span {
              background-image: none; } }
      .pagination ul li.prev a span {
        padding-left: 12px;
        padding-right: 0;
        background: url(/panasonic/images/2016/ico_arrow6.png) left center no-repeat; }
      .pagination ul li.prev a:hover {
        background-color: #999999; }
        .pagination ul li.prev a:hover span {
          background: #999999 url(/panasonic/images/2016/ico_arrow7.png) left center no-repeat; }
      @media screen and (max-width: 320px) {
        .pagination ul li.prev a {
          padding: 0 5px; }
          .pagination ul li.prev a span {
            background-image: none;
            padding-left: 0; }
          .pagination ul li.prev a:hover span {
            background-image: none; } }
      @media screen and (max-width: 480px) {
        .pagination ul li {
          margin: 0 1px 5px; }
          .pagination ul li a {
            font-size: 14px;
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 24px; } }
      @media screen and (max-width: 320px) {
        .pagination ul li {
          margin: 0 0 5px; }
          .pagination ul li a {
            font-size: 13px; } }

.osusumesub {
  display: none; }

.osusumesub {
  display: none; }
  @media screen and (min-width: 768px) {
    .osusumesub {
      display: block;
      margin-top: 20px; }
      .osusumesub h3 {
        color: #333333;
        font-weight: 600;
        font-size: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e7edef; }
    .osusumesub h3 span{
      font-size: 12px;
    } 
      .osusumesub li {
        border-bottom: 1px solid #e7edef; }
        .osusumesub li dl::after {
          clear: both;
          content: "";
          display: table; }
        .osusumesub li dt {
          float: left;
          margin: 0 10px 0 0; }
          .osusumesub li dt img {
            max-width: 100px; }
        .osusumesub li dd {
          font-size: 0.875em; }
          .osusumesub li dd.category {
            color: #FFF;
            display: inline-block;
            background-color: #999;
            padding: 1px 4px;
            margin-right: 6px;
            border-radius: 2px;
            display: inline; }
          .osusumesub li dd.date {
            display: inline;
            color: #666;
            font-size: 0.75em; }
          .osusumesub li dd.tag {
            display: inline;
            padding-left: 3px; }
            .osusumesub li dd.tag img {
              padding-bottom: 4px; }
          .osusumesub li dd.title {
            padding: 5px 0 0 0;
            text-decoration: underline; } }

#fnavi {
  clear: both;
  padding: 0 45px;
  margin-bottom: 40px; }
  #fnavi .pagenav {
    border-top: 2px solid #999999;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f4f6f7;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 10px;
    color: #666;
    letter-spacing: 0.05em; }
    #fnavi .pagenav::after {
      clear: both;
      content: "";
      display: table; }
    #fnavi .pagenav li a dl {
      margin: 0; }
    #fnavi .pagenav li a dt {
      margin: 0 0 5px;
      font-weight: 500;
      color: #FFF;
      background-color: #00489d;
      width: 4em;
      border-radius: 30px;
      text-align: center;
      font-size: 0.875em;
	  float: none; }
      @media screen and (max-width: 768px) {
        #fnavi {
  padding: 0 10px;
  margin-bottom: 20px; }

        #fnavi .pagenav li a dt {
          display: none; } }
    #fnavi .pagenav li a dd {
      font-size: 0.75em;
      text-decoration: underline; }
    #fnavi .pagenav li a:hover dt {
      background-color: #5179a8; }
    #fnavi .pagenav li a:hover dd {
      text-decoration: none; }
    #fnavi .pagenav li:first-child {
      float: left; }
      #fnavi .pagenav li:first-child a dd {
        background: url(/panasonic/images/2016/ico_arrow8.png) right center no-repeat;
        padding-right: 16px; }
    #fnavi .pagenav li.next {
      float: right; }
      #fnavi .pagenav li.next a dt {
        float: right; }
      #fnavi .pagenav li.next a dd {
        clear: right;
        background: url(/panasonic/images/2016/ico_arrow1.png) left center no-repeat;
        padding-left: 16px; }
  #fnavi .pagination {
    background-color: #f4f6f7;
    border-bottom: 1px solid #cacaca;
    margin: 0 0 5px;
    padding: 10px; }
    #fnavi .pagination ul li a {
      color: #FFF;
      width: 25px;
      height: 25px;
      border: none;
      line-height: 25px;
      border-radius: 25px;
      display: block;
      background-color: #00489d;
      font-size: 0.875em; }
      #fnavi .pagination ul li a:hover {
        background-color: #999999;
        color: #FFFFFF; }
    #fnavi .pagination ul li.active a {
      background-color: #999999;
      color: #FFFFFF; }
    #fnavi .pagination ul li.next a,
    #fnavi .pagination ul li.prev a {
      width: auto;
      padding: 0 12px; }
      #fnavi .pagination ul li.next a span,
      #fnavi .pagination ul li.prev a span {
        padding-right: 0;
        background: none; }
      #fnavi .pagination ul li.next a:hover,
      #fnavi .pagination ul li.prev a:hover {
        background-color: #999999;
        color: #FFFFFF; }
    #fnavi .pagination ul li.prev a span {
      padding-left: 0;
      background: none; }
    #fnavi .pagination ul li.prev a:hover {
      background-color: #999999; }

@media screen and (max-width: 768px) {
  #hot #logly-lift-3653914 #logly-lift-widget-content {
    padding: 0 10px; } }

#hot #logly-lift-3653914 #logly-lift-widget-content-head {
  color: #333;
  letter-spacing: 0;
  margin-bottom: 25px;
  padding: 10px 0;
  font-size: 1.25em;
  line-height: 1.4;
  border-bottom: 1px solid #e7edef; }
  #hot #logly-lift-3653914 #logly-lift-widget-content-head .logly-lift-widget-content-head-border {
    display: none; }

@media screen and (min-width: 768px) {
  #hot .logly-lift-ad-img-inner {
    width: 173px; } }

.footer {
  text-align: center;
  padding: 50px 0;}
.footer p{
  font-size: 14px;}
    @media screen and (max-width: 768px) {
      .footer {
        padding: 20px 0;}
      .footer p{font-size: 11px;}
      }

/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0); }

#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; }

/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000;
  opacity: 0.9;
  filter: alpha(opacity=90); }

#colorbox {
  outline: 0; }

#cboxContent {
  margin-top: 20px;
  background: #000; }

.cboxIframe {
  background: #fff; }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxLoadedContent {
  border: 5px solid #000;
  background: #fff; }

#cboxTitle {
  position: absolute;
  top: -20px;
  left: 0;
  color: #ccc; }

#cboxCurrent {
  position: absolute;
  top: -20px;
  right: 0px;
  color: #ccc; }

#cboxLoadingGraphic {
  background: url(/panasonic/images/2016/loading.gif) no-repeat center center; }

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0; }

#cboxSlideshow {
  position: absolute;
  top: -20px;
  right: 90px;
  color: #fff; }

#cboxPrevious {
  position: absolute;
  top: 50%;
  left: 5px;
  margin-top: -32px;
  background: url(/panasonic/images/2016/controls.png) no-repeat top left;
  width: 28px;
  height: 65px;
  text-indent: -9999px; }
  #cboxPrevious:hover {
    background-position: bottom left; }

#cboxNext {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -32px;
  background: url(/panasonic/images/2016/controls.png) no-repeat top right;
  width: 28px;
  height: 65px;
  text-indent: -9999px; }
  #cboxNext:hover {
    background-position: bottom right; }

#cboxClose {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  background: url(/panasonic/images/2016/controls.png) no-repeat top center;
  width: 38px;
  height: 19px;
  text-indent: -9999px; }
  #cboxClose:hover {
    background-position: bottom center; }

.fig.big {
  clear:both;
  zoom:1;
}

.fig.big:after {
  content:"";
  display:block;
  clear: both;
}

.fig.left_2 {
  float:left;
}

.fig .table_400 {
  float:right;
}

.table_400 {
  max-width: 500px;
}

#contents {
  word-wrap: break-word;

}

  @media screen and (max-width: 768px) {
    #contents .bpimage_center {
    width: 100% !important;
    margin: 10px auto 15px;
    text-align: left; 
  }
  .bpimage_center img {
    width: 100%;
    height: auto;
  } 
  
  #contents .bpimage_left {
    width: 100% !important;
  }
  #contents .bpimage_right {
    width: 100% !important;
  }

    }

.movie iframe {
  width: 760px;
  height: 427.5px;
  margin: 20px auto;
  display:block;
}

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

.movie iframe {
  width: 100%;
  height: 100%;
}  
}


/* ------------------------------ *
2カラム
* ------------------------------ */
.col2{
	font-size: 0;
	margin-top: -30px;
}
.col2 .col{
	display: inline-block;
	vertical-align: top;
	width: 420px;
	margin: 30px 10px 0 0;
}

.ttl + .col2 .col:nth-of-type(1),
.ttl + .col2 .col:nth-of-type(2){
	margin-top: 0;
}
.col2 .col::after{
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	background: #103d85;
	margin-top: 18px;
}
.col2 .col:nth-child(2n){
	margin-right: 0;
}
.col2 .col div{
	width: 420px;
	height: 212px;
	overflow: hidden;
	text-align: center;
}
.col2 .col div img{
	width: auto;
	height: 100%;
	transition-duration: 0.5s;
}
.col2 .col a:hover div img{
	transform: scale(1.05,1.05);
}
.col2 .col a{
	display: block;
	color: #333;
}
.col2 .col dl{
	margin-top: 15px;
}
.col2 .col dt{
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
}
.col2 .col a:hover dt{
	color: #103d85;
}
.col2 .col dd{
	font-size: 14px;
	margin: 2px 0 0 0;
}
.col2 .col dd time{
	font-size: 12px;
	color: #808080;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
.col2{
	margin-top: -25px;
	padding: 0 10px;
}
.col2 .col{
	width: 49%;
	margin: 25px 2% 0 0;
}
.col2 .col::after{
	width: 40px;
	margin-top: 20px;
}
.col2 .col dl{
	margin-top: 10px;
}
.col2 .col dt{
	font-size: 14px;
}
.col2 .col dd{
	font-size: 12px;
}
.col2 .col div{
	width: 100%;
	height: 88px;
}
}
@media screen and (max-width: 374px) {
.col2 .col div{
	width: 100%;
	height: 70px;
}
}

/* ------------------------------ *
トップボタン
* ------------------------------ */
#topBtn{
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 9;
	width: 60px;
	height: 60px;
	cursor: pointer;
	background: #103d85;
}
#topBtn:hover{
	background: #40649d;
}
#topBtn::after{
  content: "";
  display: block;
  position: absolute;
	border-top: solid 4px #fff;
	border-right: solid 4px #fff;
  top: 50%;
	left: 50%;
  width: 16px;
  height: 16px;
	margin-top: 4px;
	transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 750px) {
#topBtn {
	width: 40px;
	height: 40px;
}
#topBtn::after{
  width: 12px;
  height: 12px;
	margin-top: 4px;
	border-width: 3px;
}
}

/* ------------------------------ *
slick
* ------------------------------ */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-arrow{
	font-size: 0;
	background: none;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 185px;
}
.slick-arrow.slick-prev{
	left: 5px;
}
.slick-arrow.slick-next{
	right: 5px;
}
.slick-arrow{
	font-size: 0;
	background: none !important;
	padding: 0;
	width: 30px;
	height: 30px;
	position: absolute;
	z-index: 1;
}
.slick-arrow:focus{
	outline: 0;
}
.slick-arrow:hover{
	opacity: 0.8;
}
.slick-arrow::before{
	content: "";
	position: relative;
	display: block;
	margin: 0 auto;
	width: 20px;
	height: 20px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
}
.slick-arrow.slick-prev::before{
	left: 5px;
	transform: rotate(-135deg);
}
.slick-arrow.slick-next::before{
	right: 5px;
	transform: rotate(45deg);
}
.slick-dots{
	width: 100%;
	margin: 15px auto 0;
	text-align:center;
	font-size: 0;
}
.slick-dots li{
	display:inline-block;
	margin:0 5px;
	width:100px;
	height:4px;
	background-color:#cfd8e7;
	vertical-align:middle;
	cursor:pointer;
	text-indent:150%;
	white-space:nowrap;
	overflow:hidden
}
.slick-dots li.slick-active{
	background-color:#103d85;
}
.slick-dots li button{
	display: none;
}


@media screen and (max-width: 768px) {
.slick-slide img {
  height: auto;
}
.slick-dots li{
	width:60px;
	height:4px;
}
.slick-arrow{
	font-size: 0;
	background: none !important;
	padding: 0;
	width: 30px;
	height: 30px;
	position: absolute;
  top:25%;
	z-index: 1;
}
}

.recommended {
  text-align: left;
  width: 300px;
  margin-bottom: 20px;
}
.recommended::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #103d85;
    margin: 0 auto 22px;
}
.recommended::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #103d85;
    margin: 22px auto 0;
}
.recommended h3{
  color: #333333;
  font-weight: 600;
  font-size: 16px;
	margin-bottom: 15px;
}
.recommended li{
	margin-top: 30px;
}
.recommended li:first-child{
	margin-top: 0;
}
.recommended dl{
	overflow: hidden;
}
.recommended li dt {
    float: right;
    margin: 0; 
}
.recommended li dt img {
    width: 90px;
  height: 68px;
}
.recommended li dd.title{
    font-size: 12px;
  line-height: 1.67;
  color: #000000;
  width: 195px;
}
.recommended li a:hover dd.title{
  text-decoration: underline;
}
.recommended li dd.date{
    font-size: 12px;
  font-weight: 700;
  color: #808080;
}
  @media screen and (max-width: 768px) {
    .recommended {
    width: 100%;
    margin-bottom: 20px;
}
    .recommended li dt img{
      width: auto;
      height: auto;
    }
    .recommended li dd.title {
    font-size: 12px;
    line-height: 1.67;
    color: #000000;
    width: 70%;
}
}
/*# sourceMappingURL=style.css.map */