/* 20190917 */
@charset "utf-8";
html,body,header,section,article,nav,footer,div,span,p,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,table,tr,th,td,tbody,thead,tfoot{
  margin:0;padding:0;
}
html{
background-color:transparent !important;
}
img{
  border:0;
}
body{
  width:100%;
  background-color:#fff;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a:link {
  color: #696969;
}
a:hover {
  color: #dcdcdc;
}
a:visited{
color:#696969 !important;
}
li {
list-style-type : none;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.left{
  text-align: left;
}
.mat-10{
  margin-top: -10px;
}
.bold{
  font-weight: bold;
}
.fs-9{
  font-size: 9px;
  line-height: 120%;
}
.fs-14{
  font-size: 14px;
  line-height: 160%;
}
.fs-16{
  font-size: 16px;
  font-weight: bold;
  line-height: 160%;
}
.bg-bl-w{
  color: #ffffff;
  background: #191970;
  padding: 2px 5px;
  font-weight: bold;
  } /* bk:db tx:w */
.bg-bl-w2{
  color: #ffffff;
  background: #4682b4;
  margin: 0 5px;
  padding: 2px 5px;
  font-weight: bold;
   } /* bk:lb tx:w */
.fc-red2{color: #990000;} /* 赤 */
.fc-red3{color: #d20303;} /* 赤 */
.fc-red4{color: #ff3300;} /* 赤 */ 
.fc-blue{color: #0033CC;} /* 青 */
.fc-green{color: #036a3b;} /* X緑 */
.bg-y-r2{color: #990000; background: #ffff00;} /* 背景-黄：文字-赤 */
.bg-y-r4{color: #ff0000; background: #ffff00;} /* 背景-黄：文字-赤 */
.bg-y-r3{background: #ffdab9;}  /* 背景-黄：文字-赤 */
.bg-y-r{background: #ffff00;} /* 背景-黄：文字-赤 */  
.fc-blue2{color: #000080;}
.fc-navy{color: #003366;} /* 紺 */
.palr{padding: 0 5px;}
/*  -------------------------------------------------header  */
@media screen and (orientation: landscape) {
  header{
    display:none;
  }
}
header{
  border:0;
  position:fixed;
  margin:-5px 0 0 0;
  padding:0;
  width:100%;
  height:54px;
  background-color:#ffffff;
  border-bottom: 1px solid #BF6261;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.4); 
  -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index:10;
}
#head #logo{
  width:207px;
  height:48px;
  float:left;
  padding: 2px 0px 0px 2px;
  margin:0;
}
#head #logo img{
  width:207px;
  height:48px;
}
#head #head_btn ul{
 float: right;
 padding: 2px 2px 0px 0px;
 width:106px;
 height: 48px;
 }
#head #head_btn li{
 float: right;
 padding: 0px 0px 0px 4px;
 display:inline-block;
 height: 48px;
 width:48px;
 }
#page_top {
  margin-top: 5px;
  padding: 0;
}
.head0{
height: 54px;
}
.heads {
  margin: 5px 5px 5px 5px;
  background-image: url('../img/point3_m.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
/*--------------------------------------------------- thanks */
.mo5 {
  background-image: url('../img/back03.png');
  padding-top: 5px;
}
.mo5 p {
  font-size: 14px;
  line-height:160%;
  padding: 0px 5px 10px 5px;
  text-align: left;
}
.mo5 img[src$="../img/thank-c-s.png"] {
  height: 140px;
  float: right;
  display: inline;
  margin: 0 5px 5px 20px;
}
.thank2_wrap {
  background: #fff8dc;
  padding: 5px 0px;
}
.thank2 {
  margin: 0px 4px;
  border: 1px solid #683f36;
  padding: 5px 5px 5px 5px;
  background: #fff8dc;
}
.thank2 p {
  font-size: 14px;
  padding: 5px 0px;
  line-height:160%;
}
.thank2 .pRight {
  height: 101px;
  float: right;
  display: inline;
  margin: 5px 2px 0 15px;
}
.thank3 {
  margin: 0 4px 0px 4px;
  padding: 5px;
  background: #ffffff;
}
.thank {
  padding: 10px 0px;
  background-image: url('../img/back03.png');
  background-repeat: repeat;
  z-index: -1;
}
.tim , .tim2 {
  width:98%;
  height:auto;
  text-align:center;
  border:solid 3px #000080;
  background-color:#ffffff;
  padding-top:2px;
  margin:2px auto 10px auto;
  font-size: 16px;
}
.tim2 {
  margin:2px auto 20px auto;
}
.campaign {
  font-size: 16px;
  margin: 0 4px 7px 4px;
  text-align: center;
  color: #d20303;
}
.campaign2 {
  margin: 0px 4px;
  padding: 10px 0px;
  background-image: url('../img/back03.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: left;
}
.campaign2 dl {
  margin: 0px 5px;
  border: 2px #b8860b solid;
  padding:10px 5px 10px 5px;
  background: #fff8dc;
  text-align: left;
  min-height: 120px;
  height: auto !important;
}
.campaign2 dt {
  font-size: 16px;
  color:#b8860b;
  line-height: 160%;
  font-weight: bold; 
  padding: 0px 5px 0px 5px;
}
.campaign2 dd {
  font-size: 14px;
  line-height: 160%;
  margin: 10px 5px;
}
/*--------------------------------------------------- contents */
.max_img , .anke4 img , .can2 img , .riga img , .point8 h2 img{
  clear: both;
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  max-width: 680px;
  vertical-align: bottom;
}
.maup5{margin-top: 5px;}
.mabo5{padding:0 0 5px 0;}
.anke4 img{
  padding:0 5px;
  width: 98%;
}
.anke4 h2 , .can2 h2 , .buy h2 , .riga h2 , .pointk h3 , .mo1 h2 , .point2 h3 , .mo4 h2 , .faq h2 , .point8 h2{
  clear: both;
  padding: 0;
  margin: 0;
  text-align: center;
  -webkit-appearance: none;
}


.back01 {
  margin: 0px 4px;
  padding: 10px 0px;
  background-image: url('../img/back01.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
.back01 p{
  font-size: 14px;
  text-align: left;
}
.back05 {
  margin: 0px 4px;
  padding: 10px 0px;
  background-image: url('../img/back05.jpg');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
.back06 {
  margin: 0 4px;
  padding: 10px;
  background-image: url('../img/back06.jpg');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
.back06 .waku{
  margin: 0;
  padding: 5px;
  background: #ffffff;
}
.back06 .waku p{
  padding:0 5px;
  text-align: left;
  font-size: 16px;
  line-height: 160%;
}
.back06 .waku .fs-9{
  padding:0 5px;
  text-align: left;
  font-size: 9px;
  line-height: 120%;
}
.back01 .tim {
  width:98%;
  height:auto;
  text-align:center;
  border:solid 3px #000080;
  background-color:#ffffff;
  padding-top:2px;
  margin:2px auto;
}
.back01 .tim p {
  width:100%;
  text-align:center;
  font-size: 16px;
}
.back03 {
  margin: 0px 4px;
  padding: 4px 0px;
  background-color:#569bdc;
  z-index: -1;
  text-align: center;
}


.nega {
  margin: 5px 4px 0px 4px;
  border: 3px solid #569bdc;
  padding: 0px 0px 5px 0px;
  background: #ffffff;
}
.nega2 {
  margin: 5px 4px 0px 4px;
  border: 3px solid #569bdc;
  padding: 10px;
  background: #ffffff;
}
.nega p , .nega2 p {
  font-size: 14px;
  padding: 5px 0px;
  line-height:160%;
}
.nega span , .nega2 span {
  color: #FF3300;
}
.nega dl {
  padding: 0px 5px;
  margin: 0;
  min-height: 150px;
  height: auto !important;
}
.nega dt {
  font-size: 14px;
  font-weight: bold;
  color: #f9b325;
  padding: 5px 0px;
  border-bottom: 1px solid #569bdc;
  text-align: left;
}
.nega dd {
  text-align: left;
  padding: 5px;
}
.nega dd .pRight {
  height: 165px;
  float: right;
  display: inline;
  margin: 0 2px 2px 15px;
}
.nega ul.type1{
  text-align : left;
  border: 1px solid #d2b48c;
  background: #fff8dc;
  color: #800000;
  margin : 0px;
  padding : 0 0 0 10px;
}
.nega ul.type1 li{
  font-size : 14px;
  line-height:160%;
  font-weight: bold;
  background:url(../img/check.jpg) no-repeat;
  background-position :0% 50%;
  padding : 5px 10px 5px 30px;
}
.mo4 {
  margin: 0;
  padding: 0;
  background-image: url('../img/back02.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
.mo4 p {
  font-size: 14px;
  line-height:160%;
  padding: 0px 5px 10px 5px;
}
.mo4 .bl_back {
  margin: 0px 4px;
  padding: 5px 0px;
  background-image: url('../img/back03.jpg');
  background-repeat: repeat;
  z-index: -1;
}
.mo4 h2 {
  margin: 0px 4px;
  padding: 5px 0px;
}
.mo4 .wh_back {
  min-height: 150px;
  background-image: url('../img/back02.png');
  background-repeat: repeat;
  z-index: -1;
  border:3px solid #f5f5f5;
  margin: 0px 5px;
  height: auto !important;
  font-size: 16px;
  ine-height:160%;
  padding: 5px;
  text-align: left;
}
.mo4 .wh_back2 {
  background: #ffffff;
  margin: 0px 4px;
  text-align: center;
}
.mo4 .wh_back2 h2 {
  margin: 0;
}
.mo4 ul.type1{
  text-align : left;
  margin: 0px 5px 0px 5px;
  padding: 10px;
  background: #fceba6;
  color: #5F4C0B;
  font-size: 16px;
  font-weight: bold;
  line-height:160%;
}
.mo4 ul.type1 li{
  font-size : 14px;
  font-weight: normal;
  line-height:160%;
  background:url(../img/check.jpg) no-repeat;
  background-position :3px 50%;
  padding : 10px 10px 5px 35px;
}

.koe {
  margin: 5px 4px;
  padding: 5px 0px;
  background-color:#569bdc;
  text-align: left;
}
.koe dl {
  min-height: 150px;
  background-image: url('../img/cust.png');
  background-repeat: repeat;
  background-position: center;
  z-index: -1;
  text-align: left;
  padding: 5px 0px;
  margin: 0px 5px;
  height: auto !important;
}
.koe dt {
  clear:both;
  font-weight: bold;
  margin: 1px 5px;
  font-size: 14px;
  color: #543f32;
  background: #b1d8fe;
  padding: 5px;
}
.koe dd {
  padding: 10px 0px 0px 0px;
}
.koe dd.vt {
  font-size: 14px;
  font-weight: bold;
  color: #543f32;
  margin: 5px 5px 0px 5px;
  padding: 5px;
  background: #5babfa;
}
.koe dd.vm {
 margin: 0px 5px 2px 5px;
 border: 3px solid #ffbf7f;
 text-align: center;
 height: 140px;
}
.koe p {
  font-size: 14px;
  line-height:160%;
  padding: 0px 5px 10px 5px;
}
.kodo-img {
  height: 100px;
  width: 131px;
  float: right;
  display: inline;
  margin: 5px 15px 10px 15px;
}
.mo2 {
  margin: 0px 5px;
  padding: 10px 0px;
  background-image: url('../img/back02.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: center;
}
.mo2 p{
  font-size:14px;
  text-align: left;
  padding: 10px;
}
.point {
  padding:10px 0 5px 0;
  margin: 0 5px;
  background-image: url('../img/back04.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: left;
}
.point h2{
  font-size: 16px;
  color: #ffffff;
  background: #dc143c;
  margin: 0;
  padding: 5px 10px;
}
.point h2.bgn{
  color: #000000;
  background: #b6d6ed;
}
.point h3{
  font-size: 16px;
  color: #ffffff;
  margin: 10px 5px 0px 5px;
  padding: 5px;
  background: #000080;
}
.point .pRight {
  float: right;
  display: inline;
  margin:2px 5px;
}
.point div .pLeft {
  float: left;
  display: inline;
  margin:2px 5px;
}
.point p {
  font-size: 14px;
  line-height: 160%;
  margin: 0px 5px 0px 5px;
  padding: 5px 0px 5px 0px;
}
.bkrl {
  border-left:3px solid #000080;
  border-right:3px solid #000080;
  border-bottom:3px solid #000080;
  margin: 0px 5px;
  background: #b6d6ed;
  margin-bottom:0px !important;
}
.bkg {
  margin: 0px 5px;
  padding-bottom: 5px;
  background: #b6d6ed;
  margin-bottom:0px !important;
}
.bkrl2{
  margin: 0 5px;
  padding-top: 5px;
  background: #b6d6ed;
  border: 3px solid #00bfff;
}
.riga {
  background-image: url('../img/point3_m.png');
  background-repeat: repeat;
  z-index: -1;
  margin: 0px 5px;
  text-align: left;
}
.riga .fl {
  margin: 2px 0px 0px 0px;
  min-height: 100px;
  height: auto !important;
  border:2px solid #d3d3d3;
}
.riga p {
  font-size: 14px;
  line-height:160%;
  padding: 5px;
}

.buy {
  margin: 0;
  padding: 0px 0px 5px 0px;
  border: 5px solid #569bdc;
  background: #ffffff;
  text-align: center;
}
.buy .dtline {
  font-weight: bold;
  font-size: 14px;
  background: #b1d8fe;
  line-height: 160%;
  margin-top: 5px;
  padding: 3px 5px;
  text-align: left;
}
.buy dd img {
margin: 5px 0 0 0;
max-width: 400px;
}
.reg {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 10px auto 0 auto;
  padding: 0 auto;
}
.reg-1 img , .reg-2 img{
  position: absolute;
  padding: 0;
  width: 42%;
  max-width: 290px;
}
.reg-1 img{
  left: 6%;
  bottom: 30%;
}
.reg-2 img{
  right: 6%;
  bottom: 30%;
}

.ba5 {
  margin: -5px 0 0 0;
  padding: 5px 4px 0 4px;
  background-image: url('../img/back02.png');
  background-repeat: repeat;
  z-index: -1;
}
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-top:0;
margin-bottom:0;
}
.youtube iframe {
position: absolute;
top: -10px;
right: 0;
height: auto;
width: 100%;
}
.youtube_v {
position: absolute;
height: auto;
max-height:150px;
width:100%;
overflow: hidden;
top:-10px;
left:0;
}
.youtube_v img{
width:100%;
max-width:100%;
height:auto;
padding: 0;
}
.youtube_v:before{
position: absolute;
font-family:"Font Awesome 5 Brands";
content: "\f167";
font-weight:900;
color: #AE0000;
font-size: 60px;
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: .90;
transition:.5s;
}
.youtube_d {
position: relative;
width: 100%;
text-align:center;
}
.youtube_d iframe {
position: absolute;
top: 10px;
}
.youtube_v_d img{
padding: 0;
}
.youtube_v_d:before{
position: absolute;
font-family:"Font Awesome 5 Brands";
content: "\f167";
font-weight:900;
color: #AE0000;
font-size: 60px;
top: 50%;
left: 50%;
transform : translate(-50%,-50%);
opacity: .90;
transition:.5s;
}





.tec {
  padding:1px 0;
  margin:0px 5px;
  background: #1c305c;
  text-align: left;
}
.tec h2{
  font-size: 16px;
  color: #191970;
  line-height: 160%;
  margin: 0px 5px;
  padding: 5px;
}
.bkrw {
  background: #ffffff;
  margin: 5px;
  padding: 0;
  margin-bottom:0px !important;
}
.bkrw2 {
  background: #ffffff;
  margin: 5px;
  padding: 0;
}
.tec div p {
  font-size: 14px;
  line-height: 160%;
  padding: 5px 10px;
}
.point31 {
  margin: 3px 2px;
  text-align: left;
  padding-bottom: 1px;
}
.point31 p {
  font-size: 14px;
  line-height: 160%;
  color: #8b4513;
  text-align:left;
  padding: 5px;
	}
.point31 h3{
  color: #191970;
  font-size: 14px;
  margin: 0px 5px;
  padding: 5px;
}
.point31 img{
  width: 98%;
}
.point31 .g_nav ul{
  display:table;
  table-layout: fixed;
  width:100%;
}
.point31 .g_nav li{
  border:1px solid #191970;
  display:table-cell;
}
.point8 {
  padding:5px 0;
  margin: 0px 5px;
  background: #daeef7;
  text-align: left;
}
.point8 div {
  background: #FFFFFF;
  
}
.point8 .mbzero{
  margin-bottom:0px !important;
  border:3px solid #f5f5f5;
  margin: 0px 5px;
}

.point8 div p {
  font-size: 14px;
  line-height: 160%;
  margin: 0px 5px;
  padding: 5px 0px;
}
.point8 div .pRight2 {
  height: 106px;
  float: right;
  display: inline;
  margin: 2px 5px;
}
.point8 img[src$="img/point07-2-s2.jpg"] {
  height: 155px;
  float: right;
  display: inline;
  margin: 0 5px 5px 20px;
}
.tenten {
  font-size: 18pt;
  line-height: 160%;
  color: #569bdc;
}
.anke4 {
  margin:0 5px;
  padding:5px 0;
  background-image: url('../img/back03.jpg');
  background-repeat: repeat;
  z-index: -1;
  text-align: left;
}
.media {
  margin: 0px 4px;
  padding: 10px 0px;
  background-image: url('../img/bg_back.png');
  background-repeat: repeat;
  z-index: -1;
  text-align: left;
}
.can2 dl {
  margin: 0px 5px;
  border: 2px #b8860b solid;
  padding:10px 5px 10px 5px;
  background: #fff8dc;
  text-align: left;
  min-height: 120px;
  height: auto !important;
}
.can2 dl dt {
  font-size: 16px;
  color:#b8860b;
  line-height: 160%;
  font-weight: bold; 
  padding: 0px 5px 0px 5px;
}
.can2 dl dd p {
  font-size: 14px;
  line-height: 160%;
  margin: 10px 5px;
}
.tel {
  margin: 0px 5px;
  background-color:#fceba6;
  text-align: center;
}
.tel .ask{
  font-size: 14px;
  font-weight: bold;
  line-height:160%;
  padding: 5px 0px;
}
.tel p{
  font-size: 12px;
  line-height:160%;
  padding: 5px 0px;
}
.tel p a{
  color: #F10371;
  font-weight: bold;
}

.pointk {
  margin: 0px 5px;
  padding-bottom: 10px;
  background: #f0f8ff;
  z-index: -1;
  text-align: center;
}
.pointk table {
  clear: both;
  padding: 0;
  border-collapse:collapse;
  border: none;
  display: inline-block;
}
.pointk td {
  font-size: 14px;
  line-height:150%;
  text-align: center;
}
.pointk img {
  border:none;
  vertical-align:middle;
}
.pointk .bgly{
  background-color: #FFEECC;
}
.pointk .bgdy{
  background-color: #FFD786;
}
.pointk .pkleft{
  float: left;
}
.overbox{
  width:98%;
  height:120px;
  background-color: #ffffff;
  overflow:scroll;
  margin: 0px auto;
  border: 1px #000080 solid;
  -webkit-overflow-scrolling: touch;
}
.point2 {
  padding-top:10px;
  padding-bottom:10px;
  margin: 0px 5px;
  background: #c1e4e9;
  text-align: left;
}
.point2 img{
  width: 100%;
  max-width:680px;
  margin-bottom:0px !important;
}
.point2 dt {
  padding: 5px 5px 0 5px;
}
.point2 dd {
  background-image: url('../img/point3_m.png');
  background-repeat: repeat;
  z-index: -1;
  border:3px solid #f5f5f5;
  margin: 0px 5px;
  text-align: center;
}
.point2 p {
  font-size: 14px;
  line-height: 160%;
  margin: 0px 5px;
  padding: 5px 0px;
  text-align: left;
}
.anke2 {
  text-align: left;
  margin: 5px;
  background: #fff8dc;
  border:2px solid #683f36;
  height: auto !important;
}
.anke2 h2 {
  font-size: 16px;
  padding: 10px;
  display: block;
  color: #683f36;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #683f36;
}
.anke2 .m5 ,.buy .m5{
  margin: 5px 5px 5px 5px;
}
.anke2 p {
  font-size: 12px;
  line-height:160%;
  padding: 0px 5px 10px 5px;
}
.faq{
  clear:both;
  margin: 0px 4px;
  padding: 0;
  border: 3px #dc143c solid;
  background-image: url('../img/back02.png');
  background-repeat: repeat;
  z-index: -1;
}
.faq-h2 {
  clear:both;
  font-size: 14px;
  color: #ffffff;
  background-color: #dc143c;
  margin: 0px 0 5px 0px;
  padding: 0;
}
.faq dl{
  margin: 5px;
}
.faq dl dt{
  margin: 10px 0px;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 10px 8px 45px;
  background-image: url(../img/qq.gif);
  background-repeat: no-repeat;
  line-height: 160%;
  background-position: top left;
  border: none;
  color: #990000;
}
.faq dl dd{
  padding: 8px 10px 8px 45px;
  font-size: 14px;
  line-height: 160%;
  background-color: #c7d3f8;
}
.faq .answer{
  background-image: url(../img/aa.gif);
  background-repeat: no-repeat;
  background-position: top left;
}
.manual {
  margin: 5px 4px;
  background: #fff8dc;
  border: 2px solid #000000;
  padding:0px 5px;
  text-align: left;
}
.manual h3.ex {
  border-bottom: 2px #000000 dotted;
  font-size: 14px;
  line-height: 160%;
  padding: 5px 0px;
}
.manual h3{
  font-size: 14px;
  font-weight: bold;
  color: #696969;
  line-height: 160%;
  margin: 0px 5px;
  padding-bottom: 5px;
}
.manual p{
  font-size: 12px;
  line-height: 160%;
  margin: 0px 5px;
  padding: 5px 0px;
}
.attention2 {
  margin: 5px 4px;
  border: 1px solid #000000;
  padding:0 5px;
  text-align: left;
}
.attention2 dl {
  margin: 0;
  padding: 5px 0;
  min-height: 220px;
  height: auto !important
}
.attention2 dt h3 {
  font-size: 14px;
  font-weight: bold;
  color: #435070;
  background-color: #e1f2f9;
  margin: 0;
  padding: 2px 2px 2px 5px;
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: #435070;
}
.attention2 dl dd h4 {
  font-weight: bold;
  font-size: 12px;
  padding:5px 0px;
  margin: 0;
  line-height: 160%;
  color: #ff4500;
}
.attention2 dd {
  margin: 5px;
}
.attention2 dl dd p {
  font-size: 12px;
  line-height: 160%;
  padding:5px 0px;
}

.attention2 dl span {
  color: #FF3300;
}
.attention2 dl .pRight {
  height: 158px;
  float: right;
  display: inline;
  margin: 0 1em 1em 1em;
}
/*---------- af ----------*/
.bnr_nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}
.bnr_nav a.close {
    text-align: center;
    padding: 0 0.4rem;
    background-color: #000;
    position: absolute;
    bottom: 100%;
    right: 0;
    display: flex;
    color: #fff;
    align-items: center;
    text-decoration: none;
}
.bnr_nav .cancel {
    display: inline-block;
    position: relative;
    margin: 5px;
    padding: 0;
    width: 2px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
}
.bnr_nav .cancel:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: -7px;
    width: 16px;
    height: 2px;
    margin-top: -1px;
    background: #fff;
}
.bnr_nav .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    align-items: center;
}
/*---------- navi ----------*/
nav {
  width: 100%;
  text-decoration: none;
  margin: 0 0 10px 0;
}
nav h5 {
  margin: 0;
  padding: 5px 0 3px 14px;
  font-size: 14px;
  color: #ffffff;
  border-bottom: solid 1px;
  border-bottom-color: #69821b;
  background: url(../img/h_bg_gray.gif) center repeat-x;
}
nav ul {
  width: 100%;
     font-size: 14px;
  border-top: solid 1px;
  border-top-color: #cccccc;
}
nav li {
  width: 100%;
  list-style: none;
  text-align: center;
}
nav li a {
  padding: 10px;
  display: block;
  color: #696969;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #cccccc;
  background: url(../img/nav_bg.gif) repeat-x;
}
nav li a:hover {
  color: #dc143c;
  display: block;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #cccccc;
  background: url(../img/nav_bg_hover.gif) repeat-x;
}
nav2 {
  width: 100%;
  text-decoration: none;
  margin: 0 0 0px 0;
  background: url(../img/point4_back.png) repeat-x;
}
nav2 ul {
  width: 100%;
  border-top: solid 1px;
  border-top-color: #b22222;
  float: center;
}
nav2 li {
  width: 100%;
    font-size: 14px;
  line-height: 160%;
  padding: 0px 0px 5px 0px;
  list-style: none;
  background: url(../img/arrow_icon.png) no-repeat scroll right center transparent;
}
nav2 li a {
  padding: 5px 10px;
  display: block;
  color: #b22222;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #ff8c00;
  background: url(../img/point4_back.png) repeat-x;
}
nav2 li a:hover {
  color: #ffffff;
  display: block;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #b22222;
  background: url(../img/nav2_bg_hover.gif) repeat-x;
}
/*---------- back to top ----------*/
#page_back {
 font-size: 14px;
  margin: 0 0 8px 0;
  padding: 0 6px 0 0;
  text-align: right;
}
/*---------- footer ----------*/
footer {
  width: 100%;
  padding: 10px 0 10px 0;
  color: #333333;
  text-align: center;
  border-top: solid 1px;
  border-top-color: #cccccc;
  background-color: #eeeeee;
}
footer p {
  padding: 10px;
  font-size: 12px;
  color: #555555;
}
/*---------- cart ----------*/
#ff-insole-form{
background-image:url('../../img/ffi-tamago_bg.png');
background-color:rgba(255,255,255,0.2);
background-blend-mode:lighten;
-webkit-background-size: 55%;
background-size: 55%;
background-attachment:scroll;
background-repeat:no-repeat;
background-position:right 11%;
}

@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
50% {
-webkit-transform: translate3d(0, 25%, 0);
transform: translate3d(0, 25%, 0);
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
50% {
-webkit-transform: translate3d(0, 25%, 0);
transform: translate3d(0, 25%, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}

.backw {
margin: 0 4px;
padding: 0;
background: #fff;
z-index: -1;
text-align: center;
}
