﻿@charset "utf-8";

/*----------------------------------------------------
creation date 2012.6
http://www.sevenbank.co.jp/soukin/
Copyright (C) Seven Bank,Ltd. All Rights Reserved.
----------------------------------------------------*/
/*
 * Edit 2013.12
 */

/*------------------------------------
   TOP Page
====================================*/
/* #contentWrap
------------------------------------*/
body#top #contentWrap {
	background: url(../image/bg_index.jpg) repeat-x left top;
}

@media (max-width: 519px) {
body#top #contentWrap { background: none; }
}

/* header
------------------------------------*/
#headerWrap {
padding-bottom: 1px;
background: #FFF;
}

body#top header #utility {
*width:408px;
}

body#top header #site_ttl {
margin-top: 25px;
}

body#top header #site_ttl {
font-size: 130%;
}

/* nav
------------------------------------*/
body#top #gnavWrap nav .agree a,
body#top #gnavWrap nav .recipient a {
padding: 12px 5px 13px 70px;
}
@media (min-width: 520px) {
body#top #gnavWrap nav .topbnr.mousikomi a {
line-height:130%;
}	
}


/* contents
------------------------------------*/
body#top #content {
	margin-top: 0px;
}

body#top div#featureArea ol li {
*height:186px;
}

/* contact
------------------------------------*/
body#top header #utility ul.contact{
	margin-bottom:3px;
	}
body#top header #utility ul.contact li{
	margin-left:20px;
    padding-left:11px;
    font-size:93%;
    background:url(../../shared/image/icon_arrow_r.png) no-repeat 0 50%;
	float:right;
vertical-align:top;
*display:inline;
*zoom:1;
	}
	
/* #topImageBlock
------------------------------------*/
#topImageBlock {
position: relative;
width: 980px;
margin: 0 auto 20px;
padding-top: 10px;
text-align: right;
}

#topImageBlock p {
text-align: right;
}

#topImageBlock p img {
/*width: 100%;*/
max-width: 100%;
height: auto;
margin-right: 0;
margin-left: auto;
}

#topImageBlock .top {
width: 100%;
}

#topImageBlock .top .pc { display: block; }
#topImageBlock .top .tb { display: none; }

#topImageBlock .tel .pc { /*width: 72%;*/ display: block;}
#topImageBlock .tel .tb { display: none; }

#topImageBlock .tel {
width: 100%;
margin-top: 21px;
}


/* #topImageBlock .fxrate
	add 2014/04/14
------------------------------------*/

#topImageBlock section {
width: 94%;
text-align: left;
}
#topImageBlock .fxrate {
float: right;
width: 56%;
min-height: 170px;
margin: 10px 0;
padding: 14px 26px;
border: 2px solid #b5b5b5;
background: #fff;
}
#topImageBlock .fxrate .headBox {
width: 100%;
}
#topImageBlock .fxrate .headBox h2 {
float: left;
width: 78%;
}
#topImageBlock .fxrate .headBox p {
float: right;
width: 22%;
margin-top:1%;
}


#topImageBlock .fxrate .box {
margin: 1% 0 0;
}
.inputBox>dl dt {
float:left;
width:25%;
font-weight:bold;
}
.inputBox>dl dt label {
font-size: 110%;
}
.inputBox>dl dd {
float: left;
width: 75%;
}

#topImageBlock .fxrate .box .inputBox:after,
.inputBox>dl dd select {
width: 100%;
}

#topImageBlock .fxrate .box .fxrateResultL {
float: left;
margin: 40px 0 0 18px;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
float: left;
padding: 11px 14px 10px;
text-align: left;
font-size: 195%;
font-weight: bold;
color: #fff;
background: #009746;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
float: left;
width: 56px;
height: 40px;
margin: 8px 0 0 17px;
}
#topImageBlock .fxrate .box .fxrateResultR {
float: right;
width: 52%;
margin: 2% 0 0;
text-align: right;
}
#topImageBlock .fxrate .box .fxrateResultR tr {
border-bottom: 1px solid #b5b5b5;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateValue {
width: 85%;
font-size:185%;
font-weight: bold;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateCurrency {
width: 15%;
padding-left: 5px;
text-align: left;
font-size:112%;
}
.fxrateNotes ul{
text-indent: -1em;
}
.fxrateNotes ul li {
padding-left: 1em;
}

body#top #gnavWrap nav ul:after,
#topImageBlock section:after,
#topImageBlock .fxrate .headBox:after,
#topImageBlock .fxrate .box .fxrateResultL:after,
#topImageBlock .fxrate .box .inputBox:after,
#topImageBlock .fxrate .box .fxrateResult:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}


@media (min-width: 520px) and (max-width: 959px) {
#topImageBlock p.tel img {
width: 63%;
}
}

@media (min-width: 746px) and (max-width: 959px) {
#topImageBlock { width: 746px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; max-width: 855px; }

#topImageBlock .tel { width: 97%;}

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; max-width: 855px; width: 65%;}





body#top #contentWrap {
background: url(../image/bg_index_02.jpg) repeat-x left top;
}
#topImageBlock section {
width: 98%;
}
#topImageBlock .fxrate {
width: 57%;
}
#topImageBlock .fxrate .headBox p {
width: 28%;
font-size: 100%;
}
#topImageBlock .fxrate .headBox h2 {
width: 72%;
font-size: 100%;
}
.inputBox>dl dt {
float: none;
width: 100%;
}
.inputBox>dl dd {
float: none;
width: 100%;
margin: 1% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL {
margin: 8% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
padding: 8px 9px 7px;
font-size: 170%;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
width: 51px;
height: 36px;
margin: 7px 0 0 14px;
}
}

@media (min-width: 677px) and (max-width: 745px) {
#topImageBlock { width: 100%; min-height: 673px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 95%; }

#topImageBlock .tel { width: 97%;}

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 56%; }




body#top #content {
background: #fff;
}
#topImageBlock section {
width: 98%;
}
#topImageBlock .fxrate {
width: 55%;
padding: 14px 18px;
}
#topImageBlock .fxrate .headBox p {
float: none;
width: 100%;
}
#topImageBlock .fxrate .headBox h2 {
float: none;
width: 100%;
font-size: 120%;
}
#topImageBlock .fxrate .box {
margin: 1% 0 0;
}
.inputBox>dl dt {
float: none;
width: 100%;
}
.inputBox>dl dd {
float: none;
width: 100%;
margin: 1% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL {
width: 45%;
margin: 6% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
padding: 8px 9px 7px;
font-size: 170%;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
width: 46px;
height: 36px;
margin: 7px 0 0 4px;
}
#topImageBlock .fxrate .box .fxrateResultR {
width: 54%;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateValue {
font-size: 155%;
}
}

@media (min-width: 615px) and (max-width: 676px) {
#topImageBlock { width: 100%; min-height: 673px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 85%; }

#topImageBlock .tel { width: 96%;}

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 53%; }





body#top #content {
background: #fff;
}
#topImageBlock section {
width: 98%;
}
#topImageBlock .fxrate {
width: 52%;
padding: 14px 10px;
}
#topImageBlock .fxrate .box {
margin: 1% 0 0;
}
#topImageBlock .fxrate .headBox p {
float: none;
width: 100%;
}
#topImageBlock .fxrate .headBox h2 {
float: none;
width: 100%;
font-size: 100%;
}
.inputBox>dl dt {
float: none;
width: 100%;
}
.inputBox>dl dd {
float: none;
width: 100%;
margin: 1% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL {
width: 45%;
margin: 9% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
padding:12px 10px 10px;
font-size: 125%;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
float: left;
width: 30%;
margin: 5px 0 0 5px;
}
#topImageBlock .fxrate .box .fxrateResultR {
width: 54%;
margin: 14px 0 0;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateValue {
font-size: 135%;
}
}

@media (min-width: 520px) and (max-width: 614px) {
#topImageBlock { width: 100%; min-height: 673px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 75%; }

#topImageBlock .tel { width: 96%;}

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 46%; }




body#top #content {
background: #fff;
}
#topImageBlock section {
width: 98%;
}
#topImageBlock .fxrate {
width: 46%;
padding: 10px 8px;
}
#topImageBlock .fxrate .headBox p {
float: none;
width: 100%;
}
#topImageBlock .fxrate .headBox h2 {
float: none;
width: 100%;
font-size: 100%;
}
#topImageBlock .fxrate .box {
margin: 1% 0 3%;
}
.inputBox>dl dt {
float: none;
width: 100%;
}
.inputBox>dl dd {
float: none;
width: 100%;
margin: 1% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL {
width: 45%;
margin: 8% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
padding:12px 4px 10px;
font-size: 100%;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
float: left;
width: 35%;
margin: 8px 0 0 5px;
}
#topImageBlock .fxrate .box .fxrateResultR {
width: 54%;
margin: 18px 0 0;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateValue {
font-size: 100%;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateCurrency {
font-size: 88%;
}
}

@media (max-width: 959px) {
#topImageBlock .top {
border:none;
margin:0;
}
#topImageBlock .telBox02 p.number {
	padding:6px 0 0;
}
.telBox02.top .toiawase {
	margin-bottom: 5px;
}
}

@media (max-width: 519px) {
#topImageBlock {
width: auto;
}
#topImageBlock section {
width: auto;
margin: 0 10px;
}

#topImageBlock .fxrate {
float: none;
width: auto;
height: auto;
padding: 10px;
}
#topImageBlock .fxrate .headBox h2 {
float: none;
width: 100%;
display: block;
font-size: 120%;
}
#topImageBlock .fxrate .headBox p {
float: none;
width: 100%;
}
.inputBox>dl dt {
float: none;
width: 100%;
}
.inputBox>dl dd {
float:none;
width: 100%;
margin-top: 2%;
}
#topImageBlock .fxrate .box .fxrateResultL {
width: 44%;
margin: 9% 0 0;
}
#topImageBlock .fxrate .box .fxrateResultL p.value {
font-size: 120%;
padding: 8px 6px 7px;
}
#topImageBlock .fxrate .box .fxrateResultL p.arrow {
width: 30%;
margin: 7px 0 0 8px;
}
#topImageBlock .fxrate .box .fxrateResultR {
width: 56%;
}
#topImageBlock .fxrate .box .fxrateResultR .fxrateValue {
font-size: 130%;
}
.fxrateNotes {
float: none;
width: auto;
}
}

/* #content 
------------------------------------*/
body#top #content { width: 980px; }

@media (min-width: 520px) and (max-width: 959px) {
body#top #content { width: auto; }
}

@media (max-width: 519px) {
body#top #content { width: auto; }
}

@media (min-width: 520px) and (max-width: 959px) {
#topImageBlock .tel {
margin-top: 21px;
}
}

@media (min-width: 746px) and (max-width: 959px) {
#topImageBlock { width: 746px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; max-width: 855px; }

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; max-width: 855px; }
}

@media (min-width: 677px) and (max-width: 745px) {
#topImageBlock { width: 100%; min-height: 680px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 95%; }

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 59%; }
}

@media (min-width: 615px) and (max-width: 676px) {
#topImageBlock { width: 100%; min-height: 680px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 85%; }

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 53%; }
}

@media (min-width: 520px) and (max-width: 614px) {
#topImageBlock { width: 100%; min-height: 680px; }

#topImageBlock .top .pc { display: none; }
#topImageBlock .top .tb { display: block; width: 75%; }

#topImageBlock .tel .pc { display: none; }
#topImageBlock .tel .tb { display: block; width: 47%; }
}


/* #content 
------------------------------------*/
body#top #content { width: 980px; }

@media (min-width: 520px) and (max-width: 959px) {
body#top #content { width: auto; }
}

@media (max-width: 519px) {
body#top #content { width: auto; }
}



/***************

 20150115_renewel
 
********************************/
body#top #contentWrap {
	background: url(../image/bg_index_03.jpg) repeat-x left top;
}

body#top #content { 
width: auto;
max-width: 980px;
}

body#top header #utility ul.contact li {
background: url(../../shared/image/icon_tel_r.png)  no-repeat 0 50%;
}




#topImageBlock section {
	width: 100%;
	text-align: left;
}

@media (max-width: 519px) {
#topImageBlock section {
	width: auto;
}
}

#topImageBlock {
	position: static;
	width: auto;
	margin: 0 auto 20px;
	padding-top: 0;
	text-align: right;
}

#topImageBlock .fxrate {
	width: auto;
}

#soukin_topbnr {
width: 100%;
text-align: center;
max-width: auto;
}

#soukin_topbnr img {
width: 100%;
height: auto;
}

#topImageBlock .tel {
width: 100%;
margin-top: 6px;
}

#topImageBlock .fxrate .box .fxrateResultL {
float: left;
margin: 40px 0 0 0;
}


#topImageBlock .fxrate .box {
	border-top: #d3d3d3 1px solid;
	padding-top: 15px;
}

#topImageBlock .fxrate .headBox h2 {
font-size: 167%;
}

#topImageBlock .fxrateNotes {
	margin-bottom: 10px;
}

#topImageBlock .fxrate .fxlinkTxt p a {
	text-align: left;
	min-height: 27px;
	line-height: 27px;
	vertical-align: top;
	background: url('/soukin/shared/image/img_fx_icon.gif') no-repeat left center;
	padding-left: 35px;
	font-size: 116%;
	font-weight: bold;
	display: block;
}

#topImageBlock .fxrate .fxlinkTxt p a {
	color: #000;
}

@media (max-width: 519px) {
#topImageBlock section {
	margin-left: 0;
	margin-right: 0;
}
}

