@charset "utf-8";

*{
	margin:0;
	padding:0;
	font-style:normal;
	outline:none;
	text-align:left;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1,h2,h3,h4,h5,h6{
	margin-bottom:0.5em;
	font-weight:normal;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

ul{	list-style-type:none;}
ol{	margin-left:2em;}

a{color:#2f96ed;}
a:hover{color:#2fd0ed;}

img{
	border:0;
	max-width:100%;
	margin:0 auto;
	}



/*-----------------------------------------------------------------*/

body{
	margin:0;
	padding:0;
	line-height:1em;
	color:#333;
	font-size:80%;
	}
	
#wrapper{
	position: relative;
	width: 100%;
	text-align: center;
	overflow: hidden;
	}

.inner{
	position:relative;
	max-width:1000px;
	margin:0 auto;
	}
@media only screen and (max-width:768px){
.inner{
	width:96%;
	padding:0 2%;
	}
	}

section{
	display:block;
	position:relative;
	clear:both;
	margin-bottom:0;
	padding:30px 0 50px;
	background:url(../img/bg_section.gif) repeat-x 0 0;
	}
section p,
section ul,
section ol,
section dl{
	line-height:1.5;
	margin-bottom:2em;
	}
section ul li{
	line-height:1.3;
	margin-bottom:5px;
	}

.attention,em{	color:#cc0000;}
.note{background:url(../img/bg_graphpaper.gif) repeat;}

.kome{
	padding-left:15px;
	background:url(../img/icon_kome.png) no-repeat 0 0.2em;
}
.komeRed{
	display:block;
	padding-left:15px;
	background:url(../img/icon_komered.gif) no-repeat 0 0.1em;
	}

/* .list */
.list dd{ display:none; }


.forSP{ display:none;}
@media only screen and (max-width:640px){
.forPC{ display:none;}
.forSP{	display:block;}
	}

/*------------------------------------------------------------
　.button　ボタン
--------------------------------------------------------------*/
.button_S{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 5px 20px 5px 30px;
	appearance: none;
	font-size: 1.1rem;
	color: #fff;
	border-radius: 30px;
	font-weight: 400;
	margin: 0 0 20px;
	text-decoration: none;
	background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 10px center;
	background-size: 15px 15px;
}
.button_S:hover{
	color: #fff;
	background:#df101f url(../img/icon_arrow_right.svg) no-repeat 10px center;
	background-size: 15px 15px;
}

/*------------------------------------------------------------------
 　header
 ------------------------------------------------------------------*/
 
header{}

header #fixed{
	position:fixed;
	width:100%;
	height:46px;
	top:0;
	left:0;
	z-index:5;
	padding-bottom:0;
	background:#fff;
	border-bottom:1px solid #ececec;
	box-shadow:1px 1px 5px 3px rgba(0, 0, 0, 0.1);
	}

header h1.logo{
	width:360px;
	float:left;
	padding:5px;
	height:36px;
	background:url(../img/logo_txt.png) no-repeat right center;
	}

header nav{
	width:100%;
	text-align:center;
	}

@media only screen and (max-width:768px){
header #fixed{
	position:inherit;
	border-bottom:none;
	height:auto !important;
	box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);
	}
header h1.logo{
	width:50%;
	padding:10px 0 8px 10px;
	background:url(../img/logo_txt.png) no-repeat 15px bottom;
	}
	}



/*#globalNav -------------------------------*/
#globalNav{
	position:absolute;
	top:0;
	right:0;
	width:500px;
	height:48px;
	margin:0 auto;
	padding:0;
	}

#globalNav li{
	float:left;
	padding:3px 3px 0;
	list-style-type: none;
	}

#globalNav li a{
	display:block;
	text-align:center;
	padding:13px 8px 7px;
	text-decoration:none;
	font-size:14px;
	color:#1f1919;
	border-bottom:3px solid #cc0001;
	height:16px;
	line-height:1.2;
	}
#globalNav li a:hover{
	border-bottom:3px solid #f73637;
	color:#c00;
	}

#globalNav li a.current {background:#cc0000;}


#menu,.slicknav_menu { display: none;}

@media only screen and (max-width:768px){
/*	#menu {display:block;}*/
#globalNav{	display:none;}
header .inner{
		width:100%;
		padding:0;
	}
.slicknav_menu{
	display:block;}
}



/* #mainVisual -------------------------------*/
#mainVisual{ margin:47px 0 0;z-index:1;}
@media only screen and (max-width:768px){ #mainVisual{ margin:0;padding:0}}

#mainVisual .campaign{
	text-align:center;
	}

#mainVisual .photo{
	/*max-height:471px;*/
	text-align:center;
	background:#77c0f4 url(../img/bg_mainvisual.jpg) no-repeat center 0;
	}
#mainVisual .photo p{
	margin:0;
	padding:0;
	line-height:0;
	}
#mainVisual .title{
	background:#e72735;
	margin-bottom:20px;
	overflow:hidden;
	}
#mainVisual .title span.inner{
	max-width:950px;
	line-height:1.0;
	padding:7px 0 0 55px;
	background:url(../img/bg_title_line.gif) no-repeat right 0;
	height:30px;
	}
#mainVisual .tokuten{
	padding:0 0 0 50px;
	}
@media only screen and (max-width:768px){
	#mainVisual .tokuten{
	padding:0 2%;
	}
	}
#mainVisual .tokuten li{
	float:left;
	text-align:center;
	}
#mainVisual .tokuten li.t01{width:25%;}
#mainVisual .tokuten li.t02{width:45%;}
#mainVisual .tokuten li.t03{
	width:30%;
	margin-top:-85px;
	}
#mainVisual .tokuten li.t03 p{
	margin-top:5px;
	padding:0 35px;
	}


@media only screen and (max-width:640px){ 
#mainVisual{ padding:0 0 0;}
#mainVisual .photo{
	height:auto;
	background:none;
	}
#mainVisual .title span.forSP{
	font-size:20px;
	color:#fff;
	text-align:center;
	padding-top:3px;
	}
#mainVisual .title span.inner{
	background:none;
	padding:7px 2% 0;
	text-align:center;
	}
#mainVisual .tokuten{
	padding:0 2%;
	}
#mainVisual .tokuten li.t01{width:38%;}
#mainVisual .tokuten li.t02{width:62%;}
#mainVisual .tokuten li.t03{
	width:100%;
	margin-top:30px;
	}


}




/* .jalIcon -------------------------------------*/

#mainVisual .jalIcon{
	position:absolute;
	top:5px;
	right:5px;
	}
#mainVisual .jalIcon li{
	float:left;
	padding-left:3px;
	}

#mainVisual .note{
	border-bottom:2px solid #f5f5f5;
	padding:0 0 30px;
	}
#mileLink{
	margin:0 auto 30px;
	padding:15px 15px 15px 120px;
	font-size:120%;
	}

@media only screen and (max-width:640px){
#mainVisual .jalIcon{
	width:15%;}
#mainVisual .jalIcon li{
	width:100%;
	float:none;
	margin:0;
	padding:0;
	}
#mileLink{
	padding:2%;
	font-size:120%;
	}
	}
	

/*------------------------------------------------------------------
 　main
 ------------------------------------------------------------------*/
main{
	position:relative;
	margin:0;
	}

h2{	margin-bottom:30px;
	text-align:center;
	font-size:45px;
	padding:15px 0px 0;
	font-weight:bold;
	line-height:1.3;
}

h2 span{
	display:block;
	text-align:center;
	}

h3,h4{
	font-size:16px;
	font-weight:bold;
	margin-bottom:15px;
	}


@media only screen and (max-width:640px){
	h2{	font-size:28px;}
	h2 img{
		max-width:94%;
		margin:0 3%;
		}
	}

/*------------------------------------------------------------------
   トピックス
--------------------------------------------------------------------*/
.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}

/*------------------------------------------------------------------
   #about ABC Wi-Fiの特徴
--------------------------------------------------------------------*/

#about{}
.aboutBox{
	clear:both;
	height:399px;
	position:relative;
	}
.innerR{
	float:right;
	width:50%;
	}
	
.innerL{
	float:left;
	width:50%;
	text-align:right;
	}

.innerR .point{
	float:left;
	margin:0 0 0 -85px;
	width:200px;
	height:249px;
	padding:150px 0 0;
	background:url(../img/bg_about_right.png) no-repeat center 0;
	}
.innerL .point{
	float:right;
	margin:0 -69px 0 0;
	width:200px;
	height:249px;
	padding:150px  0 0;
	background:url(../img/bg_about_left.png) no-repeat center 0;
	}

.point span{
	display:block;
	padding:0 10px 5px;
	border-bottom:3px solid #e72735;
	}
.innerR .point span{
	text-align:right;
	}

#about #point1{	background:url(../img/bg_about_01.jpg) no-repeat center 0;}
#about #point2{	background:url(../img/bg_about_02.jpg) no-repeat center 0;}
#about #point3{	background:url(../img/bg_about_03.jpg) no-repeat center 0;}

#about #point1 h3{
	width:50%;
	float:left;
	padding:35px 10px 0;
	text-align:center;
	}

#about #point1 p.copy{
	width:90%;
	clear:both;
	float:left;
	text-align:center;
	margin-top:-150px;
	}

#about #point2 h3{
	width:50%;
	float:right;
	padding:40px 0 30px;
	text-align:center;
	}

#about #point2 p.copy{
	width:55%;
	float:right;
	text-align:center;
	}

#about #point3 h3{
	width:50%;
	float:left;
	padding:80px 0px 0;
	text-align:center;
	}

#about #point3 p.copy{
	width:60%;
	clear:both;
	float:left;
	margin:-170px 0 0 110px;
	}

@media only screen and (max-width:640px){
.innerR,
.innerL{
	width:100%;
	background:none;
	margin:0 0 30px;
}
.innerR .point,
.innerL .point{
	float:none;
	margin:0;
	width:100%;
	height:auto;
	padding:0;
	background:none !important;
}
.innerR .point span,
.innerL .point span{
	text-align:center;
	background:#fff;
	padding:5px 10px;
	margin:0 0 220px;
	}
#about #point1{
	background:url(../img/bg_about_01.jpg) no-repeat left 20px;
	background-size:200%;
	}
#about #point2{
	background:url(../img/bg_about_02.jpg) no-repeat right 20px;
	background-size:200%;
	}
#about #point3{
	background:url(../img/bg_about_03.jpg) no-repeat left 20px;
	background-size:200%;
	}
#about #point1 h3,
#about #point2 h3,
#about #point3 h3{
	float:none;
	width:100%;
	padding:0 0 20px;
	text-align:center;
	}
#about #point1 p.copy,
#about #point2 p.copy,
#about #point3 p.copy{
	clear:both;
	float:none;
	width:96%;
	margin:0 2%;
	padding:0;
	text-align:center;
	}

	}


/*------------------------------------------------------------------
   #price 料金・プラン
--------------------------------------------------------------------*/




/* .tab    -----------------------------------------------*/

ul.tabs{
	 position:relative;
	 z-index:2;
	 height:91px;
	 margin:0;
	 padding:0;
	 }
ul.tabs li{
	 height:30px;
	 text-align:center;
	 font-size:20px;
	 line-height:1.0;
	 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	 }
ul.tabs li a{
	 margin:0;
	 padding:35px 0 0;
	 width:43%;
	 height:56px;
	 display:block;
	 text-indent: -9999px;
	 text-align:center;
	 font-size:30px;
	 text-decoration:none;
	 overflow:hidden;
	 border-top-left-radius: 3px; 
     -webkit-border-top-left-radius: 3px; 
     -moz-border-top-left-radius: 3px;
	 border-top-right-radius: 3px; 
     -webkit-border-top-right-radius: 3px; 
     -moz-border-top-right-radius: 3px;
	 color:#222;
	 }

ul.tabs li a#kaigaiTab{
	position:absolute;
	top:0;
	left:5%;
	background:#e5e4e4 url(../img/tab_kaigai.png) no-repeat center center;
	}
ul.tabs li a#kokunaiTab{
	position:absolute;
	top:0;
	right:5%;
	background:#e5e4e4 url(../img/tab_kokunai.png) no-repeat center center;
	}
ul.tabs li a#kaigaiTab:hover{
	color:#007bd6;
	background:#007bd6 url(../img/tab_kaigai.png) no-repeat center center;
	}
ul.tabs li a#kokunaiTab:hover{
	color:#cc3e1c;
	background:#cc3e1c url(../img/tab_kokunai.png) no-repeat center center;
	}

ul.tabs li.active a#kaigaiTab{
	color:#fff;
	background:#007bd6 url(../img/tab_kaigai_on.png) no-repeat center center;
	}
ul.tabs li.active a#kokunaiTab{
	color:#fff;
	background:#cc3e1c url(../img/tab_kokunai_on.png) no-repeat center center;
	}




@media only screen and (max-width:640px){
ul.tabs{
	margin:0;
	height:56px;
	}
ul.tabs li{
	height:auto;}
ul.tabs li a{
	font-size:16px;
	height:auto;
	padding:20px 0;
	width:43%;
}
ul.tabs li a#kaigaiTab,
ul.tabs li a#kaigaiTab:hover,
ul.tabs li.active a#kaigaiTab{
	background-size:62%;
	}
ul.tabs li a#kokunaiTab,
ul.tabs li a#kokunaiTab:hover,
ul.tabs li.active a#kokunaiTab{
	background-size:80%;
	}
}


/* .tab    -----------------------------------------------*/

.tab{}
.tab_content{
	z-index:1;
	margin:-13px 0 50px;
	border:13px solid #e5e4e4;
	}

.tab_content h4{
	clear:both;
	background:#222;
	color:#fff;
	padding:10px;
	}

.tabBox{
	clear:both;
	padding:0px 57px 20px;
	}

@media only screen and (max-width:640px){
.tab_content{
	border:none;
	margin:0 0 10px;}
.tabBox{
	clear:both;
	width:100%;
	padding:0px 0% 20px;
	}

	}



/* #price    -----------------------------------------------*/

#price #kaigai{background:url(../img/pho_plan_kaigai.jpg) no-repeat right 0;}
#price #kokunai{background:url(../img/pho_plan_kokunai.jpg) no-repeat left 0;}


#price #kaigai h3.kihon{
	height:438px;
	padding: 40px 0 0 50px;
	}
#price #kokunai h3.kihon{
	height:438px;
	padding: 40px 50px 0 50px;
	text-align:right;
	}

#price .charge h3.chargeTitle{
	font-size:45px;
	text-align:center;
	margin:0 0 30px;
	}

#price h2.public{
	font-size:18px;
	text-align:right;
	padding:0px 50px 20px;
	margin:30 0 30px;
	}


@media only screen and (max-width:640px){
#price .inner{
	width:100%;
	padding:0;
	}
#price #kaigai{	background-size:100%;}
#price #kokunai{ background-size:100%;}
#price #kaigai h3.kihon{
	width:94%;
	height:250px;
	padding: 20px 3% 0;
	background:url(../img/pho_plan_kaigai.jpg) no-repeat right 0;
	background-size:150%;
	}

#price #kaigai h3.kihon img{ width:60%;	}


#price #kokunai h3.kihon{
	width:96%;
	height:250px;
	padding: 20px 2% 0;
	text-align:right;
	background:url(../img/pho_plan_kokunai.jpg) no-repeat left 0;
	background-size:150%;
	}
	
#price #kokunai h3.kihon img{width:60%;	}

#price .charge h3.chargeTitle{
	font-size:25px;
	margin:0 0 20px;
	}

#price .charge h3.chargeTitle span{text-align:center;}
	
	#price h2.public{
	font-size:15px;
	text-align:right;
	padding:0px 10px 10px;
	margin:20 0 10px;
	}
	}






/* #single 単国プラン　--------------------------------------*/

#singleMenu li{
	width:25%;
	float:left;}

table.singleTable{
	float:left;
	width:49%;
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0 0% 20px 0%;
	line-height:1.7;
	border-bottom:1px solid #222;
	}
table.singleTable:last-child{margin-left: 2%;}
table.singleTable th,
table.singleTable td{
	padding: 1px 1px;
	font-weight:bold;
	white-space: nowrap;
	}
table.singleTable thead td{	
	background:#cdcdcd;
	text-align:center;
	vertical-align:middle;
	font-size: 13px;
}
table.singleTable tbody th,
table.singleTable tbody td{
	border-bottom:1px dotted #222;
	}
table.singleTable tbody td{
	border-left:1px dotted #ccc;
	/*padding-right:1.5em;*/
	white-space:nowrap;
	}

table.singleTable th{
	background:#f5f5f5;
	font-size: 13px;
	}
table.singleTable thead th{	background:#cdcdcd;}
table.singleTable tbody th .memo{
	font-size:10px;
	}

table.singleTable tbody  td{ text-align:center; }
table.singleTable .sale{ color:#e72735;  background: #ffe7e9;  border-left: none; }
table.singleTable tbody .sale{ font-size: 0.9rem;} 
table.singleTable .border{border-bottom:1px solid #222;}
table.singleTable td.lineT{text-decoration: line-through; color: #777;}
table.singleTable td span.txtS{	font-size: 10px;}


@media only screen and (max-width:768px){
table.singleTable{
	width:96%;
	margin:0 2%;
	}
table.singleTable .memo{
	display:block;
	}
	
	

	}

@media only screen and (max-width:640px){
table.singleTable th,
table.singleTable td{
	white-space:normal;
	padding-right:0.3em !important;
	font-size: 11px;
	}
table.singleTable thead th,
table.singleTable thead td{font-size:10px;}
table.singleTable td span.txtS{	font-size: 0.5rem;}

	}



/* #multiple 複数国でご利用の場合　--------------------------------------*/

#multiple{ padding-bottom:0; }
#multiple #multipleMenu li{
	float:left;
	text-align:center;
	}
#multiple #multipleMenu li span{
	display:block;
	text-align:center;
	font-size:10px;
	}
#multiple #multipleMenu img{
	display: block;
	margin: 0 0 10px;
}

#multiple #multipleMenu li.asia{width: 26%;margin-right: 2%;}
#multiple #multipleMenu li.world56{width: 26%;margin-top:-25px;margin-right: 1%;}
#multiple #multipleMenu li.world177{width: 26%;margin-top:-25px;margin-right: 9%;}
#multiple #multipleMenu li.world50{width: 26%;margin-top:-25px;}
#multiple #multipleMenu li.eu{width: 68%;}

@media only screen and (max-width:767px){
#multiple #multipleMenu li.asia{width: 50%;padding: 0 3% 10px;margin: 0 0 0 24%;}	
#multiple #multipleMenu li.world56{width: 48%;padding: 0 3% 20px;margin:-30px 0;}
#multiple #multipleMenu li.world177{width: 48%;padding: 0 3% 20px;margin:-190px 0;float:right;}
#multiple #multipleMenu li.world50{width: 50%;padding: 0 3% 10px;margin: -30px 0 0 24%;}
#multiple #multipleMenu li.eu{width: 100%;padding: 0 3% 10px;margin: 0;}
}
@media screen and (max-width:768px) {
#multipleMenu .button_S{ font-size: 0.8rem; white-space: nowrap;}
}


@media screen and (max-width:320px) {
#multipleMenu .button_S{ white-space:inherit;}
}

	


/* #typeList 国別タイプ・プラン対応表　--------------------------------------*/

#typeList{
	position:relative;
	padding:0;
	}
	
#typeList .kikyu{
	position:absolute;
	top:-13px;
	right:5px;
	}
	
#typeList h3#typeListTitle{
	width:100%;
	font-size:35px !important;
	text-align:center;
	background:url(../img/bg_typeList_1.png)  no-repeat 0 0;
	background-size:100%;
	height:200px;
	padding:150px 0 0;
	}


@media only screen and (max-width:640px){
#typeList h3#typeListTitle{
	font-size:20px !important;
	padding:50px 0 0 15px;
	height:180px;
	background:none;
	text-align:left;
	}

	}
	

	
/* #detail　国別タイプ・プラン対応表　---------------------------------------*/

#typeList #detail{
	margin:-150px 100px 30px;
	padding:0;
	}

#typeList #detail dl{
	margin:0;
	background:#f1efef;
	padding:20px;
	}
#typeList #detail dl dt{
	background:#666 url(../img/icon_down.png) no-repeat 98% center;
	background-size:3%;
	color:#fff;
	padding:7px;
	border-bottom:1px solid #fff;
	font-size:15px;
	}

#typeList #detail dl dt:hover{ 
	background:#cc0001 url(../img/icon_down.png) no-repeat 98% center;
	background-size:3%;
	}
#typeList #detail dl dt.active{
	background:#cc0001 url(../img/icon_up.png) no-repeat 98% center;
	background-size:3%;
	}
#typeList #detail dl dt.active:hover{
	background:#d80a0b url(../img/icon_up.png) no-repeat 98% center;
	background-size:3%;
	}

#typeList #detail dl dd{
	background:#fff;
	padding:2% 4% 4%;
	}

@media only screen and (max-width:768px){
#typeList #detail{
	margin:-150px 2% 0px;
	padding:0;
	}

#typeList #detail dl{
	margin:0;
	background:#f1efef;
	padding:3px;
	}
#typeList #detail dl dd{
	background:#fff;
	padding:2% 2% 4%;
	}

#typeList .kikyu{
	width:30%;
	}

	}



/*.planTable ----------------------------------*/
table.planTable{
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
	line-height:1.2;
	}

table.planTable th,
table.planTable td{	padding:3px;}

table.planTable thead{
	border-bottom:2px solid #6d7171;
	line-height:1.3;
	}
table.planTable thead td,
table.planTable thead th{ text-align:center; }

table.planTable tbody tr{ border-bottom:1px dotted #222;}

table.planTable td{	text-align:center; color:#ccc;}
table.planTable td.single{	background:#f7f7f7;	}
table.planTable td .circle{	color:#222;}



/* #FairUsagePolicy ----------------------------------*/

#FairUsagePolicy {
	padding:30px 125px 250px;
	background:url(../img/bg_typeList_2.png)  no-repeat 0 bottom;
	background-size:100%;
	}

#FairUsagePolicy h3{
	font-size:22px;
	margin-bottom:20px;
	}

@media only screen and (max-width:768px){
#FairUsagePolicy {
	padding:30px 4% 150px;
	}
#FairUsagePolicy h3{
	font-size:16px;
	margin-bottom:20px;
	}

	}


/* #kokunai ------------------------------------------*/

#kokunai .copy{
	font-size:18px;
	text-align:center;
	}

#kokunai #wifiType li{
	float:left;
	width:48%;
	margin:0 1%;
	}

#kokunai #wifiType li h3{
	background:#222;
	color:#fff;
	padding:10px;
	}

#kokunai #wifiType li p{
	text-align:center;}


@media only screen and (max-width:640px){
#kokunai .copy{
	font-size:14px;
	padding:0 2%;
	}
}


/* .optionBox --------------------------------------------------------------*/

.optionBox{padding:0 0 0 5%;}
.optionBox h3{
	font-size:25px;
	margin-bottom:20px;
	}
.optionBox ul li{
	float:left;
	width:45%;
	}
.optionBox ul li:first-child{
	margin-right:5%;
	}
.optionBox ul li dl{
	margin:0;}
.optionBox ul li dt{
	margin:0 0 5px;
	padding:7px;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	font-weight:bold;
	font-size:14px;
	}
.optionBox ul li dd{display:block;}

.optionBox p.price{
	background:#ececec;
	padding:15px;
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
	text-align:center;
	}

.optionBox .price span,
td.price span{
	font-size:25px;
	font-family:Verdana, Geneva, sans-serif;
	padding-left:10px;
	}

@media only screen and (max-width:640px){
.optionBox{
	margin-bottom:20px;
	padding:0 2%;}

.optionBox h3{
	font-size:20px;
	margin-bottom: 10px;
	}
.optionBox p{ margin-bottom:5px;}

.optionBox ul{
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	}
.optionBox ul li{
	width:100%;
	margin-bottom:0;
	}
.optionBox p.price{
	margin:0 0 1em;
	}
.optionBox ul li dl{
	margin:0;
	
	}
.optionBox ul li dl dt{
	background:url(../img/icon_down_bk.png) no-repeat 98% center;
	background-size:3%;
	margin:0;
	border-top:1px solid #111;
	border-bottom:none;
	}
.optionBox ul li dl dt:hover{ 
	background:url(../img/icon_down_bk.png) no-repeat 98% center;
	background-size:3%;
	}
.optionBox ul li dl dd{
	padding:3%;
	display:none;
	background:#fff;
	}


.optionBox ul li dl dt.active{
	background:url(../img/icon_up_bk.png) no-repeat 98% center;
	background-size:3%;
	}
.optionBox ul li dl dt.active:hover{
	background:url(../img/icon_up_bk.png) no-repeat 98% center;
	background-size:3%;
	}




	}
	


/* table.optionTable ------------------------------------------------------*/
table.optionTable{
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0 0 1em;
}
table.optionTable th,
table.optionTable td{
	padding: 0.6em 1em;
	font-weight: normal;
	border: 1px solid #ccc;
	line-height:1.3;
	text-align:center;
	}

table.optionTable .kanyu{
	background:#f9dede;
	color:#cc0000;
	}
	

@media only screen and (max-width:640px){
td.price span{font-size:12px;}
.optionBox .price span{font-size:15px;}

	}

/*------------------------------------------------------------------
   #map カウンターMAP
--------------------------------------------------------------------*/
.mapInner{	padding: 15px 30px;}
.mapInner p{font-size: 0.9rem;
line-height: 1.4rem}
.mapInner .title_departure{
	background:#91D5F7;
	text-align: center;
	padding: 8px;
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 1.2rem;
}
.mapInner .title_arrival{
	background: #fcc9c9;
	text-align: center;
	padding: 8px;
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 1.2rem;
}

.mapBtn{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	margin: 2px 0 0 10px;
	padding: 0 10px 0 20px;
	appearance: none;
	font-size: 0.9rem;
	color: #fff;
	border-radius: 30px;

	font-weight: bold;
	text-decoration: none;
	background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 5px center;
	background-size: 13px 13px;
}
.mapBtn:hover{	
color: #fff;
background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 5px center;
background-size: 13px 13px;
}

.memo{	font-size: 1.3rem;}

@media screen and (max-width:767px) {
.memo{	font-size: 1.1rem;}
.mapBtn{
	display: block;
	margin: 2px 0 0 0px;
	padding: 0 10px 0 20px;
}

}




/*------------------------------------------------------------------
   table
--------------------------------------------------------------------*/

/* .table01 */

table.table01 {
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0 0 1em;
	border-top: 2px solid #343334;
	border-bottom: 2px solid #343334;
}

table.table01 th,
table.table01 td{
	padding: 0.6em 1em;
	font-weight: normal;
	border-bottom: 1px solid #343334;
	/*vertical-align:top;*/
	line-height:1.3;
	}

table.table01 thead th{
	background:#666;
	text-align:center;
	color:#fff;
	border-right:1px solid #ccc;
	}
table.table01 thead th:last-child{	border-right:none;	}

table.table01 tbody th { background: #f5f5f5; }

table.table01 td {
	line-height:1.3;
	border-left: 1px dotted #343334;
}

table.table01 td.country{ font-size:90%; }

table.table01 td.day,
table.table01 td.web{
	text-align:center;
	border-right: 1px solid #343334;
	background:#fff;
	}
	

/* .mobileType */
table.mobileType{ margin-bottom:0.5em;}
table.mobileType th,
table.mobileType td{
	padding: 0.5em;
	font-size:87%;
	}


table.counterTable td{
	line-height:1.8;
	vertical-align:top;
	}
 
 
a.btn_map{
	margin-left:5px;
	padding:0px 5px;
	background:#333;
	line-height:0;
	color:#fff;
	}
a.btn_map:hover{color:#f73b3b;}



@media only screen and (max-width:640px){
table.table01 {
	width:100%;
	margin: 0 0 0.5em;
	padding:0;
}
table thead th{font-size:12px;}
table tbody th,
table tbody th.pref{font-size:12px;}
table tbody td{	font-size:12px;	}

table.table01 th,
table.table01 td{
	padding: 0.3em 0.3em;
	line-height:1.7;
	font-size:11px;
	}

.counterTable td{
	vertical-align:top;
	}
a.btn_map_sp{
	display:block;
	width:94%;
	margin:0;
	padding:3%;
	text-align:center;
	color:#fff;
	line-height:1.7;
	border-radius: 3px;		/* CSS3草案 */
	-webkit-border-radius: 3px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 3px;	/* Firefox用 */
	background:#333 url(../img/icon_arrow_right.png) no-repeat 20px center !important;
	background-size:5% !important;
	text-decoration:none;
	}
a.btn_map_sp:hover{color:#f73b3b;}
	
}


.memo{	font-size:11px;	}


 /*----------------------------------------------------------------
  #use  ご利用方法
----------------------------------------------------------------*/
#use h3{
	text-align:center;
	}

/* #flow */
#flow ul li{
	float:left;
	width:30%;
	padding:0 4% 0 1%;
	background:url(../img/icon_arrow.png) no-repeat right 200px;
	}

#flow ul li{  width:28% \9;}

#flow ul li:last-child{
	padding:0 0 0 1%;
	background:none;
	width:29%;
	}

#flow .number{
	text-align:center;
	font-weight:bold;
	font-size:20px;
	margin-bottom:5px;
	}

#flow h3{
	background:#cc0001;
	color:#fff;
	font-size:22px;
	font-weight:normal;
	padding:5px;
	text-align:center;
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
	}

#flow .photo{
	text-align:center;
	}

#flow .txt{	margin-bottom:5px;	}
@media only screen and (max-width:640px){
#flow ul{
	padding:0 3%;}
#flow ul li,
#flow ul li:last-child{
	width:100%;
	margin:0 0 30px;
	padding:0;
	float:none;
	background:none;
	}
#flow .number img{width:18%;}

}


 
 /*----------------------------------------------------------------
  #application  お申し込み・お問い合わせ
----------------------------------------------------------------*/
#application{ padding:10px 0 0;}
#application .bg{
	height:708px;
	background:#e1edf0 url(../img/bg_application.jpg) no-repeat center 0;
	padding:20px 0 0;
	}
	
#application .txt{
	font-size:20px;
	margin:5px 0 15px;
	}
#application .inner{
	max-width:600px;
	padding:30px 30px 30px;
	box-shadow:1px 1px 4px 3px rgba(0, 0, 0, 0.1);
	background:#fff;
	}

#application h2{ margin:0; }

#application h3{
	background:#222222 url(../img/bg_application_title.gif) repeat-x 0 0;
	color:#fff;
	margin-bottom:1.0em;
	padding:15px 0 10px;
	text-align:center;
	font-size:18px;
	}

#application .tel{
	text-align:center;}


@media only screen and (max-width:640px){
#application{
	margin-bottom:50px;}
#application .inner{
	margin:2% ;
	width:90%;
	padding:5% 3%;
	}

#application h3{font-size:14px;}
#application h3 span{
	text-align:center;}
#application .bg{
	height:auto;
	padding-bottom:50px;
	}
#application .tel img{
	width:90%;
	padding:0 5%;
	}

}



#deadline{	margin-bottom:5em;}






/* .btn -----------------------------------------------*/

.btn a{
	display:block;
	margin:0 auto;
	width:431px;
	height:53px;
	text-align:center;
	padding-top:25px;
	background:url(../img/bg_btn_b.png) no-repeat 0 0 #cc0404;
	color:#fff;
	font-weight:bold;
	font-size:25px;
	text-decoration:none;
	}

.btn a:hover { background:url(../img/bg_btn_b_on.png) no-repeat 0 0 #da1a1a; }


	
@media only screen and (max-width:640px){
.btn a,
.btn a:hover{
	width:84%;
	margin: 0 3%;
	padding:5%;
	font-size:18px;
	height:auto;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	background:#cc0404 url(../img/icon_arrow_right.png) no-repeat 20px center;
	background-size:5%;
	}
.btn a span{
	text-align:center;
	}


}



.link{
	width:200px;
	margin:0 auto 30px;
	white-space:nowrap;
	}

.link a{
	display:block;
	padding:8px 10px 5px 35px;
	background:url(../img/icon_arrow2.png) no-repeat 10px center #ccc;
	border-radius: 3px;
	-webkit-border-radius: 3px;	
	-moz-border-radius: 3px;
	text-decoration:none;
	font-size:15px;
	color:#1f1919;
	}

.link a:hover{
	/*background:url(../img/icon_arrow2.png) no-repeat 10px center #555;*/
	/*color:#f73b3b;*/
	}


/* #mile ------------------------------------------*/

#mile{
	background:none;
	padding:100px 0 50px;
	}
#mile .inner{ 
	max-width:800px;
	}

#mile h3{
	margin-bottom:20px;
	padding:10px;
	border-top:1px solid #222;
	border-bottom:1px solid #222;
	}

#mile h4{
	color:#cc0000;
	font-size:15px;
	margin-bottom:8px;
	}

@media only screen and (max-width:640px){
#mile{
	width:100%;
	padding:0px 0 50px;
}
}
 
 
 
/*------------------------------------------------------------------
 　footer
------------------------------------------------------------------*/
footer{	overflow:hidden;}
footer .inner{
	padding:0;
	max-width:900px;
	}

footer .logo{
	padding:20px 0;
	text-align:center;
	}

#footerBox {
	clear: both;
	width: 100%;
	text-align:center;
	padding: 20px 0 0;
	color: #b6b6b6;
	position: relative;
	overflow: hidden;
	background:#343334;
}
#footerBox ul {
	position: relative;
	left: 50%;
	float: left;
}
#footerBox ul li {
	padding: 0 7px;
	font-size: 92%;
	line-height: 1;
	border-right: 1px solid #fff;
	position: relative;
	left: -50%;
	float: left;
}
#footerBox ul li:last-child{border-right: none;}
#footerBox a {color: #fff;}
#footerBox p#copyright {
	font-size: 76%;
	padding: 22px 0;
	clear: both;
	text-align:center;
}




@media only screen and (max-width:768px){
#footerBox{
	padding:0;
	}
#footerBox ul{
	width:100% !important;
	position:inherit;
	left:0;
	}
#footerBox ul li{
	width:100%;
	float:none;
	border:none;
	position:inherit;
	padding:0;
	left:0;
	}
#footerBox ul li a{
	display:block;
	padding:15px 15px 15px 20px;
	border-bottom: 1px solid #777;
	text-decoration:none;
	background:url(../img/icon_arrow.gif) no-repeat 0.5em center;
	}
	
#footerBox p#copyright{
	text-align:left;
	margin-left:10px;
	padding:40px 0;
	}
footer .logo img{
	max-width:40%;
	}
	
	}





/* .totop --------------------------------*/

.totop{
	position:absolute;
	bottom:15px;
	right:20px;
	}
.totop a{
	display:block;
	border:1px solid #777;
	height:54px;
	}
.totop a:hover{	border:1px solid #cc0404;}




/*---------------------------------------------------
	Class
----------------------------------------------------*/

.floatL{float:left;}
.floatR{float:right;}

.clearL{clear:left;}
.clearR{clear:right;}
.clearB{clear:both;}

.alignL{text-align:left;}
.alignR{text-align:right;}
.alignC{text-align:center;}

.txtRed{color:#CC0000;}
.txtCaps{font-variant:small-caps;}



/*---------------------------------------------------
	ClearFix
----------------------------------------------------*/
/* Modern Browser Firefox,Safari,Opera --*/
.clearfix:after,
.inner:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-- IE7 --*/
.clearfix,
.inner{
display: inline-block;
}
/*-- For Legacy IE without macIE --*/
* html .clearfix,
* html .inner{
height: 1%;
}
.clearfix,
.inner{
display: block;
}
/*---------------- End of Clearfix ----------------*/