/*****************************************************************
Theme 横浜岡田屋防災通販専用サイト 防災情報ナビ
Description:横浜岡田屋防災通販専用サイト 防災情報ナビ
Author: camelus
Author URI: http://camelus-design.com;
Version: 1.0
******************************************************************/
@charset "UTF-8";
/* CSS Document */
/******************************************************************
reset
******************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
button {
  transition: all  0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  font-size:62.5%;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/******************************************************************
setting
******************************************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
* {
  box-sizing: border-box;
}
body {
  background-color: #ffffff;
  color: #040808;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
a {
  text-decoration: none;
}
a {
  color: #13539D;
}
a:hover {
  text-decoration: underline;
}
a:hover img{
  opacity:0.8;
  filter:alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}
/* ---------- img ---------- */
[class*="-img"] {
  width: 100%;
  height: auto;
}
/* ---------- table ---------- */
table {
  width: 100%;
}
table th,
table td {
  padding: .8em 0;
  font-size: 1.5em;
  text-align: left;
  line-height: 1.5em;
  border-bottom: 1px dashed #ccc;
}
table th {
  width: 25%;
  font-weight: bold;
  vertical-align: middle;
}
table td div {
  padding: 0 0 0 1em;
  border-left: 3px solid #ddd;
}
/* ---------- box ---------- */
.box {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
}
/* ========== form-elements ========== */
input[type="text"],
input[type="password"],
textarea,
select {
  outline:none;
}
/* ---------- line ---------- */
.contents .b-line {
  margin: 0 .3em;
  padding: 3px 0;
  font-weight: bold;
  background: linear-gradient(transparent 10%, #fff001 0%);
}
/* ---------- btn ---------- */
.org-btn a {
  color: #ffffff;
  background: #F5A623;
  box-shadow: 0px 2px 0px 0px #E67E22;
  border-radius: 2px;
  transition: all  0.1s ease;
}
.org-btn a:hover {
  margin-top: 2px;
  margin-bottom: -2px;
}
.more-btn a {
  padding: 5px 1em;
  background: #015CAD;
  font-weight: bold;
  font-size: 12px;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  color: #FFFFFF;
}
.more-btn a i {
  margin: 0 0 0 .5em;
}
/*IE10〜*/
@media all and (-ms-high-contrast:none){
  .more-btn a {
    padding: 4px 1em 2px 1em;
  }
}
/*bousai-box*/
.bousai-bg {
  border: 4px solid #040808;
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px;
  background-color: #F8E71C;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
    color-stop(.25, #F3D70A), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, #F3D70A),
    color-stop(.75, #F3D70A), color-stop(.75, transparent),
    to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #F3D70A 25%, transparent 25%,
    transparent 50%, #F3D70A 50%, #F3D70A 75%,
    transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #F3D70A 25%, transparent 25%,
    transparent 50%, #F3D70A 50%, #F3D70A 75%,
    transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #F3D70A 25%, transparent 25%,
    transparent 50%, #F3D70A 50%, #F3D70A 75%,
    transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #F3D70A 25%, transparent 25%,
    transparent 50%, #F3D70A 50%, #F3D70A 75%,
    transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #F3D70A 25%, transparent 25%,
    transparent 50%, #F3D70A 50%, #F3D70A 75%,
    transparent 75%, transparent);
}
a.item-link {
  display: block;
  padding: 1em 0;
  text-align: center;
  background-color: #D0021B;
  color: #fff;
}
/******************************************************************
header
******************************************************************/
header {
  position: relative;
  width: 100%;
  height: 130px;
  border-top: 5px solid #040808;
  overflow: hidden;
}
header .box {
  padding: 0 0 10px 0;
}
header p.description {
  position: absolute;
  max-width: 620px;
  top: 0;
  left: 0;
  padding: 13px 0 0 5px;
  font-size: 1.3em;
  font-weight: normal;
  overflow: hidden;
}
header .logo-wrap {
  position: absolute;
  width: 620px;
  top: 42px;
  left: 0;
  padding: 0 0 0 5px;
  overflow: hidden;
}
header .logo-wrap .com {
  display: block;
}
header .logo-wrap img.com-logo {
  width: 192px;
  height: auto;
  margin: 0 0 8px 0;
}
header .logo-wrap img.site-logo01 {
  width: 420px;
  height: auto;
  margin: 0 10px 0 0;
}
header .logo-wrap img.site-logo02 {
  width: 174px;
  height: auto;
}
header .contact-wrap {
  float: right;
  width: 280px;
  margin: 0;
  padding: 13px 5px 0 0;
  overflow: hidden;
}
header .contact-wrap .mail {
  width: 100%;
  margin: 0 0 12px 0;
}
header .contact-wrap .mail a {
  width: 100%;
  padding: .6em 0;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: block;
}
header .contact-wrap .mail a:before {
  content: '\f003';
  margin: 0 .5em 0 0;
  font-size: 1.4em;
  font-weight: normal;
  font-family: FontAwesome;
}
header .contact-wrap .phone {
  width: 100%;
  overflow: hidden;
}
header .contact-wrap .f-dial {
  width: 100%;
  height: 32px;
  line-height: 32px;
  margin: 0 0 7px 0;
  font-size: 3.4em;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  text-align: right;
  color: #111111;
}
header .contact-wrap .f-dial .tel-link {
  text-decoration: none;
}
header .contact-wrap .f-dial img {
  float: left;
  width: auto;
  height: 100%;
  margin: 0;
}
header .contact-wrap p {
  width: 100%;
  font-size: 13px;
  text-align: justify;
}
header .contact-wrap p small {
  font-size: .8em;
  text-align: right;
}
@media only screen and (max-width: 1140px) {
  header .box {
    padding: 0 10px 10px 10px;
  }
}
@media only screen and (max-width: 900px) {
  header p.description {
    font-size: 1.1em;
  }
  header .logo-wrap {
    width: 520px;
  }
  header .logo-wrap img.site-logo01 {
    width: 330px;
    margin: 0 5px 0 0;
  }
  header .logo-wrap img.site-logo02 {
    width: 120px;
  }
}
@media only screen and (max-width: 830px) {
  header p.description {
    display: none;
  }
  header .logo-wrap {
    top: 25px;
  }
}
@media only screen and (max-width: 768px) {
  header {
    height: auto;
  }
  header .logo-wrap {
    position: relative;
    height: 135px;
    top: 55px;
    left: 2%;
    width: 96%;
    margin: 0;
    padding: 0;
  }
  header .logo-wrap .com {
    width: 100%;
    margin: 0;
  }
  header .contact-wrap {
    float: none;
    position: absolute;
    top: 0;
    width: 96%;
    margin: 3px 2% 0 2%;
    padding: 3px 0 0 0;
  }
  header .contact-wrap .mail {
    float: left;
    width: 50%;
    margin: 0;
  }
  header .contact-wrap .mail a {
    padding: .6em 0;
  }
  header .contact-wrap .phone {
    float: right;
    width: 50%;
    max-width: 255px;
    overflow: hidden;
  }
  header .contact-wrap .f-dial {
    width: 100%;
    max-width: 255px;
    height: 31px;
    margin: 0 0 3px 0;
    font-size: 3.2em;
    letter-spacing: initial;
  }
  header .contact-wrap .f-dial a {
    width: 100%;
    height: 100%;
    display: block;
  }
  header .contact-wrap p {
    font-size: .9em;
  }
  header .logo-wrap img.site-logo01 {
    width: 65%;
    margin: 0 2% 0 0;
  }
  header .logo-wrap img.site-logo02 {
    width: 32%;
    margin: 0 0 0 0;
  }
}
@media only screen and (max-width: 568px) {
  header .box {
    padding: 0 0 10px 0;
  }
  header .logo-wrap {
    height: 110px;
  }
  header .logo-wrap img.com-logo {
    width: 130px;
    height: auto;
    margin: 0;
  }
  header .contact-wrap .mail {
    width: 24%;
  }
  header .contact-wrap .mail a span {
    display: none;
  }
  header .contact-wrap .mail a:before {
    margin: 0;
  }
  header .contact-wrap .phone {
    width: 72%;
    max-width: 220px;
  }
  header .contact-wrap .f-dial {
    height: 31px;
    margin: 0 0 3px 0;
    font-size: 2.6em;
  }
  header .contact-wrap p span {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  header .logo-wrap {
    height: 98px;
  }
}
/******************************************************************
main-navi
******************************************************************/
#toggle{
 display: none;
}
nav.menu-box {
  width: 100%;
  max-width: 1140px;
  height: 42px;
  margin: 0 auto 8px auto;
}
ul#menu {
  width: 100%;
  margin: 0;
  padding: 5px 0 0 0;
  overflow: hidden;
}
ul#menu li {
  position: relative;
  width: calc(100% / 6);
  padding: 0 0 14px 0;
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  float: left;
}
ul#menu li a {
  position: relative;
  padding: .4em 0;
  font-weight: bold;
  letter-spacing: -.08em;
  color: #111111;
  border-left: 1px solid #111;
  display: block;
}
ul#menu li:last-child a {
  border-right: 1px solid #111;
}
ul#menu li a:hover {
  text-decoration: none;
}
ul#menu li a::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 100%;
  height: 4px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #D0021B;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
ul#menu li a.active::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
ul#menu li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

@media only screen and (max-width: 1140px) {
  ul#menu {
    padding: 5px 10px 0 10px;
  }
  ul#menu li:last-child a {
    border-right: 0px;
  }
  ul#menu li:first-child a {
    border-left: 0px;
  }
}
@media only screen and (max-width: 830px) {
  nav.menu-box {
    height: auto;
    margin: 0 auto 16px auto;
  }
  #menu {
    display: none;
  }
  #menu ul {
    width: 100%;
    overflow: hidden;
    display: table-cell;
  }
  ul#menu {
    padding: 0;
  }
  ul#menu li {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #E3E1D5;
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  }
  ul#menu li:last-child {
    border-bottom: 1px solid #E3E1D5;
  }
  ul#menu li a {
    padding: 0;
    letter-spacing: initial;
    line-height:3em;
    border-left: 0px;
    border-right: 0px;
  }
  ul#menu li a::after {
    content: none;
  }
  #toggle {
    display: block;
    position: relative;
    width: 100%;
    height: 4.5em;
    margin: 0 auto;
    background-color: #040808;
  }
  #toggle a {
    display: block;
    position: relative;
    line-height: 3.2em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
  }
  #toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 19px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #040808;
  }
  #toggle a:before {
    margin-top: -6px;
  }
  #toggle a:after {
    margin-top: 2px;
  }
}
/******************************************************************
contents
******************************************************************/
.contents {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 40px 0;
  overflow: hidden;
}
.contents h1.page-title {
  margin-bottom: 5px;
  padding: .8em 0 0 0;
  font-size: 2.4em;
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 1.3em;
  text-align: justify;
  border-top: 4px solid #040808;
}
.contents a img {
  transition: all  0.3s ease;
}
.contents p {
  margin: 0 auto 1.6em auto;
  font-size: 1.6em;
  line-height: 1.8em;
  text-align: justify;
}
@media only screen and (max-width: 830px) {
  .contents {
    width: 98%;
    margin: 0 auto;
    padding: 0;
  }
}
@media only screen and (max-width: 568px) {
  .contents {
    width: 96%;
  }
  .contents h1.page-title {
    margin-bottom: 5px;
    font-size: 2.6em;
  }
}
@media only screen and (max-width: 480px) {
  .contents p {
    font-size: 1.4em;
    line-height: 1.6em;
  }
}
/*========== 2カラム・main ==========*/
.contents .main {
  float: left;
  width: 67.55%;
  max-width: 770px;
  padding: 0 0 40px 0;
  overflow: hidden;
}
@media only screen and (max-width: 1140px) {
  .contents .main {
    padding: 0 10px 40px 10px;
  }
}
@media only screen and (max-width: 830px) {
  .contents .main {
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0 0 40px 0;
  }
}
@media only screen and (max-width: 480px) {
  .contents .main {
    padding: 0 0 0px 0;
  }
}
/*========== 2カラム・side ==========*/
.contents .side {
  float: right;
  width: 28.5%;
  max-width: 325px;
  padding: 31px 0 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 830px) {
  .contents .side {
    float: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}
/*========== bread_crumb ==========*/
.bread-wrap {
  width:100%;
  overflow: hidden;
  margin: 0 auto;
}
.contents ul.bread_crumb {
  width: 100%;
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 0 6px 0;
}
.contents ul.bread_crumb li {
  display: inline-block;
  list-style-type: none;
  padding: .3em 0;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.3em;
  text-align: justify;
}
.contents ul.bread_crumb li:after {
  content: '\f105';
  margin: 0 .3em 0 .5em;
  font-size: 1.3em;
  font-family: FontAwesome;
}
.contents ul.bread_crumb li:last-child:after {
  content: none;
}
.contents ul.bread_crumb li a:hover {
  text-decoration: underline;
}
.contents ul.bread_crumb li a i {
  margin: 0 .3em 0 0;
}
/*========== article-info ==========*/
.contents time {
  margin: 0 10px 0 0;
  padding: 0;
  font-size: 1.5em;
  color: #666;
}
.contents time:before {
 content:'\f017';
 margin: 0 .3em 0 0;
 font-family: FontAwesome;
}
.contents .tag a {
  margin: 0 .3em 0 0;
  padding: 5px .8em;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #C0392B;
  border-radius: 1px;
  display: inline-block;
}
@media only screen and (max-width: 480px) {
  .contents time {
    margin: 0 5px 0 0;
    font-size: 1.3em
  }
  .contents .tag a {
    font-size: .9em;
  }
}
/******************************************************************
page /　固定ページ
******************************************************************/
.contents .page .block {
  margin: 0 0 60px 0;
}
.contents .page h1.page-title {
  font-size: 3em;
  margin-bottom: .8em;
}
.contents .page h2 {
  margin: 0 0 1em 0;
  padding: 0 0 0 .5em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.4em;
  text-align: justify;
  border-left-style: solid;
  border-left-width: 8px;
}
.contents .page h3 {
  position: relative;
  margin: 0 0 1em 0;
  padding: 0 0 .8em 0;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.4em;
  text-align: justify;
}
.contents .page h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 8px;
  -webkit-background-size: 8px 8px;
  -moz-background-size: 8px 8px;
  background-size: 8px 8px;
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
    color-stop(.25, #040808), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, #040808),
    color-stop(.75, #040808), color-stop(.75, transparent),
    to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
}
/*========== sub-navi ==========*/
.sub-navi ul {
  margin: 0 0 35px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.sub-navi ul li {
  width: 32.3%;
  margin: 0 1.5% 10px 0;
  text-align: center;
}
.sub-navi ul li:nth-child(3n) {
  margin: 0 0 10px 0;
}
.sub-navi ul li a {
  width: 100%;
  padding: 1em 0;
  font-size: 1.5em;
  text-decoration: none;
  color: #ffffff;
  background-color: crimson;
  display: block;
  border-radius: 3px;
  box-shadow: 0px 2px 0px 0px darkred;
  transition: all 0.1s ease;
}
.sub-navi ul li a:hover {
  margin-top: 2px;
  margin-bottom: -2px;
}
/*========== case-studies ==========*/
.case-studies .case {
  margin: 0 0 40px 0;
  padding: 20px 0 40px 0;
  border-bottom: 1px dotted #222222;
}
.case-studies .case:last-child {
  border-bottom: 0px;
}
.case-studies .page-menu {
  width: 100%;
  padding: 10px 0;
  margin: 0 0 30px 0;
  background-color: #f7f7f7;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
}
.case-studies .page-menu li {
  width: 50%;
  font-size: 1.4em;
  text-align: center;
}
.case-studies .page-menu li a {
  position: relative;
  padding: .6em 0;
  color: #222222;
  font-weight: bold;
  display: inline-block;
}
.case-studies .page-menu li:after {
  content: '\f01a';
  margin: 0 0 0 .5em;
  font-family: FontAwesome;
}
.case-studies .page-menu li a:hover {
  text-decoration: none;
}
.case-studies .page-menu li a::after {
  position: absolute;
  bottom: .5em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #222222;
  opacity: 0;
  transition: .3s;
}
.case-studies .page-menu li a:hover::after {
  bottom: .3em;
  opacity: 1;
}
/* ---------- case ---------- */
.case-header {
  display: table;
  margin: 0 0 40px 0;
  overflow: hidden;
}
.case-header .case-ttl,
.case-header table {
  display: table-cell;
}
.case-header .case-ttl {
  position: relative;
  width: 185px;
  height: 185px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  border-radius: 5%;
}
.case-header .case-ttl .no {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.2em;
  margin: auto;
  font-size: 1.6em;
}
.case-header .case-ttl .name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4em;
  margin: auto;
  font-size: 1.4em;
}
.case-header .case-ttl img.com-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 110px;
  height: auto;
  margin: auto;
}
.case-header table {
  width: auto;
  padding: 0 0 0 3%;
}
.case-ttl {
  background-color: #d7605e;
}
/* ---------- case-detail ---------- */
.case-detail {
  font-size: 1.5em;
}
.case-detail dt {
  margin: 15px 0 10px 0;
  padding: 10px 15px;
  font-weight: bold;
  background-color: #f7f7f7;
  border-left: 5px solid #d7605e;
}
.case-detail dd {
  margin: 0 0 20px 0;
  line-height: 1.5em;
}
/* ---------- item-links ---------- */
.item-links {
  margin: 20px 0;
  padding: 20px 15px;
}
.item-links h4 {
  margin: 0 0 .8em 0;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
}
.item-links ul {
  font-size: 1.5em;
  overflow: hidden;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
.item-links li {
  float: left;
  margin: 0 1.5em 0 0;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  line-height: 1.6em;
}
.item-links li:before {
  content: '\f02b';
  margin: 0 .2em 0 0;
  font-family: FontAwesome;
}
.item-links li a {
  color: #040808;
}
.item-links li a:hover {
  color: #D0021B;
}
@media only screen and (max-width: 568px) {
  .case-studies .page-menu li {
    width: 100%;
  }
  .case-header {
    display: initial;
  }
  .case-header .case-ttl,
  .case-header table {
    display: block;
  }
  .case-header .case-ttl {
    height: 185px;
    width: 185px;
    margin: 0 auto 20px auto;
  }
}
/*========== introduce ==========*/
.introduce dl,
.introduce ul {
  margin: 0 0 2em 0;
  padding: 1.5em;
  border: 4px solid #040808;
}
.introduce dt {
  margin: 0 0 .5em 0;
  font-size: 1.6em;
  font-weight: bold;
}
.introduce dd {
  line-height: 1.5em;
  font-size: 1.6em;
}
.introduce dd:not(:last-child) {
  margin: 0 0 1.5em 0;
  line-height: 1.5em;
}
.introduce li {
  margin: 0 0 .8em 0;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  color: crimson;
}
.introduce li:last-child {
  margin: 0;
}
/*========== リンク集 ==========*/
.contents .page .link-list h3 {
  margin: 0;
}
.link-list table {
  margin: 0 0 60px 0;
}
.link-list table th {
  width: 32%;
  padding: .8em;
}
@media only screen and (max-width: 480px) {
  .contents .page .link-list h3 {
    margin: 0 0 0 0;
  }
  .contents .page .link-list table tbody {
    display: block;
  }
  .contents .page .link-list table tr {
    width: 100%;
    display: block;
  }
  .contents .page .link-list table th {
    width: 100%;
    margin: 0;
    padding: 1em 0 0 0;
    display: list-item;
    border: none;
  }
  .contents .page .link-list table td {
    width: 100%;
    margin: 0;
    padding: 0;
    display: list-item;
    border: none;
  }
  .contents .page .link-list table td.non {
    display: none;
  }
}
/*========== よくあるご質問 ==========*/
.faq-list {
  font-size: 1.6em;
  line-height: 1.5em;
}
.faq-list dt {
  margin: 1em 0 .2em 0;
  font-weight: bold;
}
.flood-point {
  font-size: 1.6em;
  line-height: 1.5em;
}
.flood-point li {
  margin: 0 0 1em 1em;
  text-indent: -1em;
}
/******************************************************************
.mv-container　投稿ページのメイン画像及び動画をレスポンシブ表示
******************************************************************/
.mv-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin: 0 0 30px 0;
}
.mv-container iframe,
.mv-container object,
.mv-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-container {
  width: 100%;
  margin: 0 0 30px 0;
  overflow: hidden;
}
.img-container img {
  width: 100%;
  height: auto;
}
/******************************************************************
article
******************************************************************/
/*========== .article-info ==========*/
.contents .article-info {
  margin: 20px 0 20px 0;
  padding: 12px 0 12px 1em;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: row;
  align-items: center;
}
/*========== article-list ==========*/
.article-list {
  width: 100%;
  margin: 12px 0 0 0;
  overflow: hidden;
}
.article-list li {
  padding: 8px 0;
  border-top: 1px solid #eee;
  overflow: hidden;
}
.article-list li:first-child {
  border-top: 0px;
}
/* ---------- thumbnail ---------- */
.contents .article-list .thumb {
  float: left;
  width: 24%;
  min-width: 78px;
  line-height: 1;
}
.contents .article-list .thumb img {
  width: 100%;
  height: auto;
}
/* ---------- outline ---------- */
.contents .article-list .outline {
  float: right;
  width: 73%;
}
.contents .article-list .outline p {
  margin: 0;
  line-height: 1.5em;
}
.contents .article-list .article-info {
  margin: 0;
  padding: 6px 0 12px 0;
  background-color: #fff;
}
.contents .article-list h3.ttl {
  width: 100%;
  margin: 0 0 .3em 0;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.3em;
  overflow: hidden;
}
@media only screen and (max-width: 480px) {
  .contents .article-list .article-info {
    padding: 0 0 12px 0;
  }
  .contents .article-list h3.ttl {
    font-size: 1.4em;
  }
  .contents .article-list p {
    display: none;
  }
}

/*========== item-list ==========*/
.item-list {
  width: 100%;
  margin: 12px 0 0 0;
  overflow: hidden;
}
.item-list li {
  float: left;
  width: 25%;
  height: 280px;
  padding: 0 20px;
  overflow: hidden;
}
@media only screen and (max-width: 480px) {
  .item-list li {
    width: 50%;
    height: 280px;
  }
}
/* ---------- thumbnail ---------- */
.contents .item-list .thumb {
  width: 100%;
  line-height: 1;
}
.contents .item-list .thumb img {
  width: 100%;
  height: auto;
}
/* ---------- outline ---------- */
.contents .item-list .outline {
  width: 100%;
}
.contents .item-list .outline p {
  margin: 0;
  text-align: center;
  line-height: 1.5em;
}
.contents .article-list .article-info {
  margin: 0;
  padding: 6px 0 12px 0;
  background-color: #fff;
}
.contents .item-list h3.ttl,
.contents .item-list h4.ttl {
  width: 100%;
  margin: 0 0 .3em 0;
  padding: .3em 0 0 0;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  .contents .article-list .article-info {
    padding: 0 0 12px 0;
  }
  .contents .article-list h3.ttl,
  .contents .article-list h4.ttl {
    font-size: 1.4em;
  }
  .contents .article-list p {
    display: none;
  }
}
/*========== article-page ==========*/
.contents article h1.page-title {
  font-size: 2.6em;
}
.contents article h2 {
  margin: 0 0 1em 0;
  padding: 0 0 0 .5em;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.4em;
  text-align: justify;
  border-left-style: solid;
  border-left-width: 8px;
}
.contents article h3 {
  position: relative;
  margin: 0 0 1em 0;
  padding: 0 0 .8em 0;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.4em;
  text-align: justify;
}
.contents article h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 8px;
  -webkit-background-size: 8px 8px;
  -moz-background-size: 8px 8px;
  background-size: 8px 8px;
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
    color-stop(.25, #040808), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, #040808),
    color-stop(.75, #040808), color-stop(.75, transparent),
    to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #040808 25%, transparent 25%,
    transparent 50%, #040808 50%, #040808 75%,
    transparent 75%, transparent);
}
/*IE10〜*/
@media all and (-ms-high-contrast:none){
  article .tag a {
    padding: .6em .8em .2em .8em;
  }
}
article img.size-full {
  max-width: 725px;
  height: auto;
  overflow: hidden;
}
@media only screen and (max-width: 480px) {
  .contents article h2,
  .contents article h3 {
    font-size: 1.8em;
  }
}
/*========== SNS-btn ==========*/
/* SNSごとの背景色 */
#twitter {
 background-color: #00acee;
}
#pocket {
 background-color: #EE4056;
}
#facebook {
 background-color: #3b5998;
}
#ggl-plus {
 background-color: #dd4b39;
}
#hatena {
 background-color: #2D4C86;
}

/* ボタン設定 */
.button-area {
 width: 100%;
 margin: 60px 0 0 0;
}
.button-area:after {
 content: '';
 clear: both;
 display: block;
}
.button-area-title {
 font-weight: normal;
 margin: 0 0 8px;
 text-align: center;
}
.title-fill {
 display: block;
 background-color: #040808;
 color: #fff;
 font-size: 1.6em;
 width: 100%;
 padding: .8em 0;
}
.button-whole {
 float: left;
 width: 19%;
 margin: 0 0.5% 0 0.5%;
}
.button-link {
 display: block;
 text-align: center;
 color: #fff !important;
 font-size: 15px !important;
 padding: 10px 0 !important;
 box-sizing: border-box;
 border-radius: 1px;
 text-decoration: none;
}
.button-link:hover {
 text-decoration: none !important;
 filter:alpha(opacity=70);
 -moz-opacity: 0.70;
 opacity: 0.70;
}

/*========== pager ==========*/
.pnav-wrap {
  padding: 20px 0;
  margin-bottom: 20px;
  text-align: left;
}
.contents .pnav-wrap li {
  width: 2.2em;
  margin: 0 2px;
  font-size: 1.3em;
  text-align: center;
  background-color: #ffffff;
  border: 0px;
  border-radius: 1px;
  display: inline-block;
  float: left;
}
.contents .pnav-wrap li.current {
  padding: .5em 0;
  background-color: #040808;
  border: solid 1px #040808;
  color: #ffffff;
  border-radius: 1px;
}
.pnav-wrap a {
  padding: .5em 0;
  border: solid 1px #aaaaaa;
  display: block;
}
.pnav-wrap a:hover{
  color: #ffffff;
  border-color: #040808;
  background-color: #040808;
}
/* ----- 記事送り ----- */
.pagelink {
  width: 100%;
  overflow: hidden;
}
.pagelink span {
  display: table;
  width: 49%;
  margin: 20px 0;
  padding: 0;
  font-size: 1.3em;
  text-align: center;
  letter-spacing: -0.05em;
  border: 2px solid #040808;
  transition: all  0.3s ease;
}
.pagelink span:hover {
  border: 2px solid #D0021B;
}
.pagelink span.pageprev {
  float: left;
}
.pagelink span.pageprev a:before {
  content: '\f137';
  margin: 0 .5em 0 0;
  font-family: FontAwesome;
}
.pagelink span.pagenext {
  float: right;
}
.pagelink span.pagenext a:after {
  content: '\f138';
  margin: 0 0 0 .5em;
  font-family: FontAwesome;
}
.pagelink span a {
  display: table-cell;
  height: 4.6em;
  padding: 0 1em;
  color: #fff;
  vertical-align: middle;
  color: #040808;
  border-radius: 1px;
}
.pagelink span a:hover{
  text-decoration: none;
}
@media only screen and (max-width: 480px) {
  .pagelink span {
    display: table;
    width: 98%;
  }
  .pagelink span.pagenext,
  .pagelink span.pageprev {
    float: none;
  }
}
/* ----- 商品ページの記事送り ----- */
.p-nate .page-numbers {
  display: inline-block;
  /*width: 2.2em;*/
  margin: 0 1px;
  font-size: 1.4em;
  text-align: center;
  background-color: #ffffff;
  border-radius: 1px;
}
.p-nate .current {
  padding: .5em .7em;
  background-color: #040808;
  border: solid 1px #040808;
  color: #ffffff;
  border-radius: 1px;
}
.p-nate a {
  padding: .5em .7em;
  border: solid 1px #aaaaaa;
  display: block;
}
.p-nate a:hover {
  color: #ffffff;
  border-color: #040808;
  background-color: #040808;
}
/* ========== ▼ contact ▼ ==========*/
/*----- contact-form -----*/

/*----- thanks -----*/
.thanks-msg p {
  text-align: center;
}

/* ========== ▼ footer ▼ ==========*/
footer {
  width: 100%;
  overflow: hidden;
}
footer nav {
  width: 100%;
  background-color: #040808;
  overflow: hidden;
}
footer nav .ttl {
  width: 98%;
  max-width: 420px;
  margin: 15px auto 5px auto;
  overflow: hidden;
}
footer nav .ttl img {
  width: 100%;
  height: auto;
}
footer nav ul {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto 8px auto;
  overflow: hidden;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
}
footer nav ul li {
  width: calc(100% / 6);
  text-align: center;
}
footer nav ul li a {
  padding: .6em 0;
  font-size: 1.4em;
  letter-spacing: -.08em;
  color: #ffffff;
  display: block;
}
@media only screen and (max-width: 830px) {
  footer nav ul {
    flex-wrap: wrap;
  }
  footer nav ul li {
    width: 50%;
    flex: initial;
  }
}
/* ========== ▼ 岡田屋の共通footer ▼ ==========*/
#footer {
  width: 100%;
}
@media screen and (min-width: 641px) {
  /******** ↓ Footer Menu ↓ ********/
  .spOnly{
    display:none;
  }
  .ownAnchor {
    color: #cd001b;
  }
  .punctuation {
    height: 15px;
    width: 100%;
    background-color: #d1001c;
  }
  .footer_row {
    width: 100%;
    /*min-width: 980px;*/
    border-bottom: 1px solid #b5b5b5;
    background-color: rgba(255, 255, 255, 0.75);
    text-align: center;
    padding: 20px 0 20px 0;
  }
  .footer_row table {
    margin: auto;
  }
  .footer_row a {
    font-size: 13px;
    color: #231815;
  }
  .footer_row span {
    font-size: 11px;
  }
  #footerImage {
    height: 94px;
    width: 100%;
    background-image: url("images/footer_logo.png");
    background-size: 640px;
    background-repeat: no-repeat;
    background-position: center;
    /*min-width: 980px;*/
  }
  #footerImage a {
    height: 94px;
    width: 100%;
    display: block;
  }
  .footer_row .footer_anchor {
    padding: 0px 20px 0px 20px;
    border-left: 2px solid #000;
    display: inline-block;
  }
  .footer_row .footer_anchor:first-child {
    border-style: none;
  }
  /******** ↑ Footer Menu ↑ ********/
}
@media only screen and (max-width: 850px) {
  .footer_row .footer_anchor {
    border: 0px;
    line-height: 1.5em;
  }
}
@media screen and (max-width: 640px) {
  /******** ↓ Footer Menu ↓ ********/
  .pcOnly{
    display:none;
  }
  .punctuation {
    height: 15px;
    width: 100%;
    background-color: #d1001c;
  }
  .spfooterImage {
    height: auto;
    width: 100%;
  }
  .footer_row {
    font-size: 10px;
    border-bottom: 1px solid #b5b5b5;
    text-align: left;
    padding: 20px 5px 20px 5px;
  }
  .footer_row .footer_anchor {
    padding: 0px 5px 0px 5px;
    border-left: 1px solid #000;
    color: rgb(34, 24, 21);
  }
  .footer_row .footer_anchor:first-child {
    border-style: none;
  }
  table.spfooter {
    width: auto;
  }
  .spfooter tr td a {
    text-decoration: underline;
  }
  .spfooter tr td {
    border-right: 1px solid #000;
    padding: 5px 0;
    font-size: 10px;
    line-height: 1;
    border-bottom: 0px;
  }
  .spfooter tr td:last-child {
    border-right: none;
  }
  /******** ↑ Footer Menu ↑ ********/
}

/* ========== ▼ sp-only ▼ ==========*/
.sp-only {
  display: none;
}
@media only screen and (max-width: 480px) {
  .sp-only {
    display: block;
  }
  .dt-only {
    display: none;
  }
}

/* ========== ▼ simulator ▼ ==========*/
.sim-info ul {
  width: 100%;
}
.sim-info ul li {
  float: left;
  width: 33%;
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.sim-info ul li span {
  color: #D0021B;
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  .sim-info ul li {
    float: none;
    width: 90%;
    margin: 0 auto 16px auto;
  }
}
.contents .page .sim-q1,
.contents .page .sim-q2 {
  margin: 0 0 40px 0;
}
.contents .page .sim-q1 h3,
.contents .page .sim-q2 h3 {
  margin: 0 0 .5em 0;
  padding: 0 0 .5em 0;
  border-bottom: 2px solid #111111;
}
.contents .page .sim-q1 h3:after,
.contents .page .sim-q2 h3:after {
  content: none;
}
.contents .page .sim-q1 p,
.contents .page .sim-q2 p {
  margin: 0 0 .5em 0;
}
.contents .page .sim-q1 select {
  height: 36px;
  margin: 0 .5em 0 0;
  padding: 0 .5em !important;
  font-size: 15px;
  line-height: 36px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 1px;
}
.contents .page .sim-q2 ul {
  margin: 0 0 40px 0;
  overflow: hidden;
}
.contents .page .sim-q2 ul li {
  float: left;
  width: 33.3333%;
}
.contents .page .sim-q2 input[type=radio] {
  display: none;
}
.contents .page .sim-q2 .radio {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  width: 96%;
  margin: 0 auto;
  padding: 20px 0;
  font-size: 18px;
  text-align: center;
  color: #fff;
  border-radius: 58px;
  background-color: #4CAF50;
  vertical-align: middle;
  cursor: pointer;
}
.contents .page .sim-q2 .radio:hover {
  background-color: #43A047;
}
.contents .page .sim-q2 .radio:hover:after {
  /*border-color: #53b300;*/
}
.contents .page .sim-q2 .radio:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  background-color#fff;
  border-radius: 50%;
  content: '';
}
.contents .page .sim-q2 .radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 25px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  content: '';
  opacity: 0;
}
.contents .page .sim-q2 input[type=radio]:checked + .radio:before {
  opacity: 1;
}
@media only screen and (max-width: 600px) {
  .contents .page .sim-q2 ul li {
    float: none;
    width: 90%;
    margin: 0 auto 16px auto;
  }
}
.sim-sub {
  margin: 0 0 40px 0;
  padding: 0 0 8px 0;
  overflow: hidden;
}
.sim-sub a {
  display: block;
  width: 60%;
  margin: 0 auto;
  padding: 1.2em 0;
  background: #EF6C00;
  box-shadow: 0px 4px 0px 0px #D84315;
  border-radius: 2px;
  font-size: 18px;
  text-align: center;
  color: #FFFFFF;
  line-height: 15px;
  transition: all 0.1s ease;
}
.sim-sub a:hover {
  margin: 2px auto -2px auto;
  text-decoration: none;
}
.ans {
  display: none;
}
.sim-ans-box {
  margin: 0 0 40px 0;
  padding: 20px 0 10px 0;
}
.sim-ans-box ul {
  width: 100%;
}
.sim-ans-box ul li {
  float: left;
  width: 33%;
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.sim-ans-box ul li span {
  color: #D0021B;
}
.sim-ans-box p {
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  .sim-ans-box ul li {
    float: none;
    width: 90%;
    margin: 0 auto 16px auto;
  }
}
.contents .page .reco-item {
  margin: 0 0 40px 0;
}
.contents .page .reco-item h3 {
  margin: 0 0 .5em 0;
  padding: 0 0 .5em 0;
  border-bottom: 2px solid #111111;
}
.contents .page .reco-item h3:after {
  content: none;
}
/* ========== ▼ simulator-item ▼ ==========*/
ul.reco-list li {
  overflow: hidden;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ccc;
}
ul.reco-list .thumb {
  float: left;
  width: 20.5%;
}
ul.reco-list .thumb img {
  width: 100%;
  height: auto;
}
ul.reco-list .item-info {
  float: right;
  width: 75%;
}
ul.reco-list .item-info .detail {
  margin: 0 0 10px 0;
  /*border-bottom: 1px dashed #ccc; 国崎用*/
  overflow: hidden;
}
/*ul.reco-list .item-info .detail .left {
  float: left;
  width: 70%;
}
ul.reco-list .item-info .detail .right {
  float: right;
  width: 28.5%;
} 国崎用*/
ul.reco-list .item-info .detail .left {
  float: none;
  width: 100%;
}
ul.reco-list .item-info .detail .right {
  float: none;
  width: 100%;
}
ul.reco-list .item-info h4 {
  /*height: 2em;*/
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2em;
}
ul.reco-list .item-info .catch {
  height: 3em;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2em;
}
ul.reco-list .item-info .comment {
  clear: both;
}
ul.reco-list .item-info .price {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: bold;
  text-align: right;
  color: #D0021B;
}
ul.reco-list .item-info .price {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: bold;
  text-align: right;
  color: #D0021B;
  width: 50%;
  float: right;
}
ul.reco-list .item-info .price:after {
  content:'円';
  margin: 0 0 0 .5em;
  font-size: 16px;
}
/*ul.reco-list .item-info a.link {
  display: block;
  width: 100%;
  padding: .5em 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #4CAF50;
  box-shadow: 0px 2px 0px 0px #417505;
  border-radius: 3px;
} 国崎用*/
ul.reco-list .item-info a.link {
  display: block;
  width: 50%;
  padding: .5em 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #4CAF50;
  box-shadow: 0px 2px 0px 0px #417505;
  border-radius: 3px;
  float: left;
}
ul.reco-list .item-info .comment {
  background-image: url(images/sim-kunisaki.png);
  background-position: right top;
  background-size: 76px 76px;
  background-repeat: no-repeat;
}
ul.reco-list .item-info .comment p {
  width: 83%;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #262626;
}
@media only screen and (max-width: 600px) {
  ul.reco-list .thumb {
    float: none;
    width: 60%;
    margin: 0 auto 20px auto;
  }
  ul.reco-list .item-info {
    float: none;
    width: 96%;
    margin: 0 auto;
  }
  ul.reco-list .item-info .detail .left,
  ul.reco-list .item-info .detail .right {
    float: none;
    width: 96%;
    margin: 0 auto;
  }
  ul.reco-list .item-info .detail .right {
    margin: 0 auto 20px auto;
  }
  ul.reco-list .item-info .price {
    text-align: center;
  }
  ul.reco-list .item-info .comment p {
    width: 70%;
  }
}