@charset "utf-8";
/* ----------------------------------------------------------
atm
---------------------------------------------------------- */
/*Css Reset*/
section {border-bottom:none; margin-bottom:0; padding-bottom:0;}
.section-wrapper {position:static;}

/* ----------------------------------------------------------
original class
---------------------------------------------------------- */
h1.title          {text-align: left; font-size: 180%;}
h2.title-atm      {font-size:140%; color:#3fa9f5; font-weight:bold;}
#geocode-message  {text-align: right; font-size: 90%; margin: 10px;}

#welcome-modal {
    z-index: 1000002;
}
#welcome-modal .modal-body {
    height: 300px;
    transition: height .1s ease-in-out;
}

#welcome-modal .modal-header {
    border-bottom-width: 0;
}

#welcome-modal iframe {
    width: 100%;
    height: 100%;
}
figure      {display:block; text-align:center; height:auto; width:100%;background-color:#fff; margin:15px auto;}
figure img  {display:block; margin:auto; max-width:100%; height:auto}
.atm-btn    {max-width:500px; margin:15px auto; box-sizing:border-box; padding:15px;}

 @media only screen	and (min-width: 300px)	and (max-width: 640px)	{
  figure img {width:100%; height:auto;}
 }
 

/*pc sp*/
.pc {display:block;}
.sp {display:none;}
	@media only screen	and (max-width: 600px)	{
.pc {display:none;}
.sp {display:block;}
  }

.lp_background_base {background-color:#fff;}
.lp_background_base h1,
.lp_background_base h2,
.lp_background_base h3{letter-spacing:0.05em; }
.lp_background_base p {letter-spacing:0.05em; line-height:200%;}
.lp-02,
.lp-03,
.lp-04{padding-top:25px;padding-bottom:25px}
.lp-01 {background-color:#fff; padding-bottom:25px;}
.lp-01 .atm-btn,
.lp-04 .atm-btn {display:block; margin:15px auto 0; background:url(/images/smart_atm/smart-atm-btn-bg.png) no-repeat top center; width:301px; height:77px; box-sizing:border-box; color:#fff; padding:38px 0px 0px 55px; font-size:140%; text-align:center;}
.lp-04 .atm-rp-btn {display:block; margin:15px auto 0; background:url(/images/smart_atm/smart-atm-pr-btn-bg.png) no-repeat top center; width:301px; height:77px; box-sizing:border-box; color:#fff; padding:38px 0px 0px 55px; font-size:140%; text-align:center;}
.lp-02 {background-color:#f7931e;}
.lp-02 .media-body h2,
.lp-02 .media-body p{color:#fff !important;}
.lp-03 {background-color:#fff;}
.lp-02 h2.title,
.lp-03 h2.title {font-size:160%;}
.lp-04 h2.title {font-size:220%; color:#fff;}
.lp-04 h2.title img {float:left; margin-right:8px; margin-top:-20px;}
.lp-04 {background-color:#bad429;}
.lp-04 ol {padding-left:0; float:none; clear:both; margin-top:30px;}
.lp-04 ol li {background-color:#9ec016; display:block; margin-bottom:1px; padding:15px;}
.lp-04 ol li h3 {color:#fff; font-size:140%; margin-bottom:8px; line-height:180%;}
.lp-04 ol li h3 img {vertical-align:middle; margin-right:5px;}
.lp-04 ol li p {padding-left:31px;}
.media-body p  {color:#4d4d4d;}
.lp-04 ol li .row {padding-top:15px;}
.lp-04 ol li .row:first-child {padding-top:0px;}
  @media only screen	and (min-width: 300px)	and (max-width: 700px)	{
    .media-left,
    .media-right{ display:block !important; width:100%;} 
    .media-left img,
    .media-right img{margin:auto; width:auto;max-width:100%; height:auto;} 
    .media-left img{ margin-bottom:15px;}
    .lp-04 h2.title {font-size:180%;}
    .lp-04  h2.title img {display:none;}
    .lp-04 ol li p {padding-left:15px;}
  }
 

/*pc sp*/
.pc {display:block;}
.sp {display:none;}
	@media only screen	and (max-width: 600px)	{
.pc {display:none;}
.sp {display:block;}
  }

/* ----------------------------------------------------------
social
---------------------------------------------------------- */
.social-area-syncer {width: 100%;min-height: 140px;padding: 1.5em 0;}

@media screen and (min-width:480px)  {
	.social-area-syncer {min-height: 110px;}
}

ul.social-button-syncer {width: 238px;margin: 24px auto;padding: 0;border: none;list-style-type: none;}

@media screen and (min-width:480px){
	ul.social-button-syncer {width: 410px ;}
}

ul.social-button-syncer li {float: left;text-align: center;height: 71px;margin: 0 8px;padding:0;}

/* [Twitter] */
.sc-tw {
	width: 71px;
}

.sc-tw svg {
	width: 30px ;
	height: 30px ;
 }

.sc-tw a {
	height: 61px ;
	margin: 0 auto ;
	padding-top: 6px ;
	display: block ;
	background: #1B95E0 ;
	font-size: 12px ;
	color: #fff ;
	font-weight: 700 ;
	text-decoration: none ;
	letter-spacing: .5px ;
	border-radius: 2px ;
}

.sc-tw a:hover {
	color: #fff ;
	background: #0c7abf ;
}
.sc-tw span {
}
.sc-tw span:before {
	white-space: pre ;
	content: '\A' ;
}

/* [Facebook] */
.sc-fb {z-index: 99;width: 69px;}

/* [LINE] */
.sc-li {width: 50px;}
.sc-li-img {border: none;margin: 0 auto;padding:0;width: 36px;height: 60px;}

/* ----------------------------------------------------------
スマートATMスマホ用ナビバー
---------------------------------------------------------- */
.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.sp-sub-nav,
.scroll-nav { /*トリガーなので変更しないように注意*/
  width:100%;
  z-index:99999;
}
.sp-sub-nav ul {
background-color:rgba(255,255,255,0.80);
}
.sp-sub-nav li {
	list-style: none;
	float: left;
}
.sp-sub-nav li img,
.sp-sub-nav li span {margin-right:5px;}
.sp-sub-nav li span {font-size:120%;}
.sp-sub-nav li a {
  padding:10px 8px;
  border-radius:0;
}
.sp-sub-nav li.active,
.sp-sub-nav li a:hover {
opacity: 0.8
}
.fixed {
	position: fixed;
	top: 0;
}
/* ----------------------------------------------------------
search
---------------------------------------------------------- */

@keyframes fadeIn {
  0%   { opacity: 0;}
  100% { opacity: 1.0;}
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0;}
  100% { opacity: 1.0;}
}

#tableRecent, #tableResult {
  table-layout: fixed;
  width: 100%;
}

#tableRecent tbody tr, #tableResult tbody tr {
  animation: fadeIn .5s ease-in-out 1 forwards;
}

.section-wrapper .summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#map_wrapper {background-color:#ededed; padding:5px 0;}
#map_wrapper p{ max-width:930px; margin:auto;}
#map {height: 400px; max-width:930px; margin:auto; border:#F2F2F2 5px solid;}
@media (max-width: 768px) {
  #map {height: 260px;}
}

.section-wrapper h2.smart_atm_title {
  font-size: 160%;
  min-height: 52px;
  padding-top: 15px;
  padding-left: 52px;
  margin: 1em 0 .5em 0;
  vertical-align: middle;
  background: url(/images/ic_atm.png) no-repeat top left;
}

h3.title {font-size:140%;} 
h3.name {font-size:100%; margin:0;}


/* ----------------------------------------------------------
detail
---------------------------------------------------------- */
.section-wrapper .summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ctrlDirection {
  border: 1px solid #31a0d1;
  background-color: #31a0d1;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  margin: 10px;
  font-size: 11px;
}

#ctrlDirection:hover, #ctrlDirection:active {
  border-color: #21b0e1;
  background-color: #21b0e1;
}
/* ----------------------------------------------------------
atm footar
---------------------------------------------------------- */
.help-area{background-color:#ededed; padding:15px 0;}
.help-area p{ max-width:930px; margin:auto; text-align:center}

/* ----------------------------------------------------------
atm root
---------------------------------------------------------- */
.balance {border-bottom: 1px solid #e6e6e6; margin-bottom: 2em;}
.balance .current {font-size: 250%;}
.elp {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#locationDialog .modal-content {width: 612px;}
#locationDialog .modal-body {padding: 5px 5px 0 5px;}
#locationDialog iframe {border:0;width: 100%; /* 600px */height:450px;}

@media only screen and (max-width: 768px) {
#locationDialog .modal-content {width: 100%;}
#locationDialog iframe {height: 300px;}
}

#publish-state {transition: background-color .5s ease-in-out;}

.panel {
animation-duration: .5s;
animation-name: slidein;
}

@keyframes slidein {
from {opacity: .1;transform: translateY(28px);}

to {opacity: 1;transform: translateY(0);}
}

.prmenu{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}
.prmenu-item{
  width: calc((100% - 32px) / 2);
}
.prmenu-row{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}
.prmenu-row-item{
  width: calc((100% - 48px) / 2);
  max-width: 200px;
  text-align: center;
}
.prmenu-row-item img{
  width: 100%;
  height: auto;
  max-width: 163px;
}
.suggmenu-row{
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}
.suggmenu-row-item{
  width: calc((100% - 128px) / 5);
  max-width: 130px;
  text-align: center;
}
.suggmenu-row-item img{
  width: 100%;
  max-width: 130px;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .prmenu-item{
    width: 100%;
  }
  .suggmenu-row{
    gap: 8px;
  }
  .suggmenu-row-item{
    width: calc((100% - 32px) / 3);
  }
}