@charset "utf-8";
/* ==========================================================================
 * ATMページ用CSS
 * for /japan-travel-planner/atm/

========================================================================== */
/* page general
========================================================================== */

body{
	line-height: 1.5;
}

/* btn_location */
.btn_location{
	margin: 0 auto 20px;
	padding: 20px 30px;
	background: #008846;
	color: #fff;
	font-size: 1.5rem;
}
.btn_location span img{
	vertical-align: middle;
	padding-left: 10px;
}
.btn_location:hover{
	color: #fff;
}
@media screen and (max-width: 768px){
.btn_location{
	margin: 0 auto 10px;
	padding: 5px 10px;
	font-size: 1.125rem;
}
}/* end max-width: 768px */

@media screen and (max-width: 1279px){}
@media screen and (max-width: 768px){}/* end max-width: 768px */

/* ==========================================================================
Page Styles
========================================================================== */
/* mainVisual
----------------------- */
.mainVisual{
	max-width: 1280px;
	margin: 0 auto 40px;
}
.mainVisual .mainVisual_image{
	text-align: center;
}
.mainVisual .mainvisual_text{
	margin: 40px auto 0;
	max-width: 840px;
	text-align: center;
}
.mainvisual_text_head{
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
}
@media screen and (max-width: 768px){
.mainVisual{
	margin-bottom: 25px;
}
.mainVisual .mainvisual_text{
	margin-top: 25px;
	text-align: left;
}
.mainvisual_text_head{
	margin-bottom: 5px;
	font-size: 1.188rem
}
}/* end max-width: 768px */


/* useAny
----------------------- */
.useAny{
	margin: 60px auto 20px;
}
.useAny .useAny_column{
	width: 32%;
	margin-right: 2%;
	float: left;
	background: #e5f4ed;
}
.useAny .useAny_column:last-child{
	margin-right: 0;
}

.useAny_head{
	padding: 15px 0 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #007D46;
	border-bottom: 1px solid #009946;
}
.useAny_text{
	padding: 0px 30px 30px;
}
@media screen and (max-width: 768px){
.useAny{
	margin: 30px auto 0px;
}
.useAny .useAny_column{
	width: 100%;
	margin-right: 0%;
	float: none;
	margin-bottom: 10px;
}
.useAny_head{
	padding: 5px;
	margin-bottom: 0;
}
.useAny_text{
	padding: 15px;
}
}/* end max-width: 768px */


/* serviceHours
----------------------- */
.serviceHoursColumn .ico_inline{
	padding-left: 15px;
}
@media screen and (max-width: 768px){
.serviceHoursColumn.column--spBreak .column + .column{
	margin-top: 0;
}
.serviceHoursColumn .column:last-child .tableBlock table{
	border-width: 0px 0 0 1px;
}
.serviceHoursColumn .ico_inline{
	padding-left: 5px;
}
.serviceHoursColumn .ico_inline img{
	max-height: 1em;
}
}/* end max-width: 768px */


/* usage
----------------------- */
.usage{
	margin-bottom: 60px;
}
.usage_list{
	display: flex;
  display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap:wrap;
}
.usage_list li{
	display: flex;
  display: -webkit-flex;
	align-items:center;
	-webkit-align-items:center;
	justify-content: space-around;
	-webkit-justify-content:space-around;
}
.usage .usage_item{
	width: 30%;
	padding: 20px;
	background: #e5f4ed;
}
.usage .usage_step{
	width: 5%;
}
.usage .usage_text{
	width: 60%;
	font-size: 1.5rem;
	color: #007D46;
	font-weight: bold;
}
@media screen and (max-width: 768px){
.usage{
	margin-bottom: 30px;
}
.usage .usage_item,
.usage .usage_step{
	width: 100%;
}
.usage .usage_stepImage{
	padding: 5px 0;
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
}

}/* end max-width: 768px */

/* withDraw
----------------------- */
.withDraw{
	margin: 40px auto 0;
}
.withDraw .withDraw_item{
	float: left;
	display:inline-block;
	padding: 20px;
	width: 23.5%;
	min-height:320px;
	margin-left: 2%;
	margin-bottom: 2%;
	background: #f0f1f4;
}
@media screen and (min-width: 769px){
.withDraw .withDraw_item:nth-of-type(4n+1){
	margin-left: 0;
}
}/* end min-width: 769px */

.withDraw .withDraw_textBox{
}
.withDraw .withDraw_text{
	overflow: hidden;
}
.withDraw .withDraw_number{
	display: table;
	float: left;
	padding-right: 10px;
}
.withDraw .withDraw_number span{
	display: table-cell;
	height: 40px;
	width: 40px;
	background: #007D46;
	text-align: center;
	vertical-align: middle;
	font-size: 1.25rem;
	color: #fff;
	font-weight: bold;

	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
}
.withDraw .withDraw_imageBox{
	margin-top: 10px;
}

@media screen and (max-width: 768px){
.withDraw .withDraw_item{
	display: table;
	width: 100%;
	min-height: inherit;
	margin-left: 0%;
	margin-bottom: 4%;
	padding: 15px;
}
.withDraw .withDraw_textBox{
	width: 50%;
	display: table-cell;
}
.withDraw .withDraw_number{
	float: none;
	padding-right: 0;
	margin-bottom: 10px;
}
.withDraw .withDraw_number span{
	height: 30px;
	width: 30px;
	font-size: 1rem;
}
.withDraw .withDraw_imageBox{
	display: table-cell;
	vertical-align: top;
	padding-left: 3%;
	text-align: center;
}
}/* end max-width: 768px */



/* locate
----------------------- */
.locateImages .locate_column{
	float: left;
	width: 25%;
	text-align: center;
}
.locateImages .locate_name{
	color: #008846;
}

.locateBtnBlock{
	margin-top: 60px;
}
.locateBtnBlock .column{
	padding: 30px 40px;
	display: inline-block;
	background: #f0f1f4;
}

@media screen and (max-width: 768px){
.locateImages{
	margin-top: 20px;
}
.locateImages .locate_column{
	padding: 0 10px;
}
.locateImages .locate_name{
	font-size: 0.625rem;
}

.locateBtnBlock{
	margin-top: 30px;
}
.locateBtnBlock .column{
	padding: 15px;
}
}/* end max-width: 768px */


/* currency
----------------------- */
.currencyColumn{
	margin-bottom: 60px;
}
.currencyColumn .column{
	float: left;
}
@media screen and (min-width: 769px){
.currencyColumn{
	max-width: 910px;
}
.currencyColumn .column{
	margin-left: 5%;
	width: 20%;
}
.currencyColumn .column:first-child{
	margin-left: 0;
}
}/* end min-width: 769px */

@media screen and (max-width: 768px){
.currencyColumn{
	margin-bottom: 30px;
}
.currencyColumn .column{
	width: 47.5%;
	margin-left: 5%;
}
.currencyColumn .column:nth-of-type(2n+1){
	clear: both;
	margin-left: 0px;
}
}/* end max-width: 768px */


@media screen and (min-width: 769px){
}/* end min-width: 769px */
@media screen and (max-width: 768px){
}/* end max-width: 768px */


/* locate 2021_03
----------------------- */
.locateBtnBlock_02.column{
	padding: 30px 40px;
	display: inline-block;
	background: #f0f1f4;
}

@media screen and (max-width: 768px){
.locateBtnBlock_02.column{
	padding: 15px;
}
}/* end max-width: 768px */


/* text link
----------------------- */
.contentInner .list-ul a img{
	padding: 0 2px;
}
.contentInner .list-ul a{
	color: #066dc4;
	text-decoration: underline;
}
.contentInner .list-ul a:hover{
	color: #D54100;
}