@charset "utf-8";
/*------------------------------------------------------------------
 　index   WiFiレンタルサービスLP
 ------------------------------------------------------------------*/

/*------------------------------------------------------------------
 　header
 ------------------------------------------------------------------*/
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 888;
	box-shadow:1px 1px 5px 3px rgba(0, 0, 0, 0.1);
	background: #fff;
	height: 45px;
}
@media only screen and (max-width:767px){header {height: 50px;}}
header .inner{	max-width: 1050px;}

header h1#headerLogo img {
    float: left;
    width: 170px;
    margin-right: 10px;
    vertical-align: initial;
}

header h1#headerLogo{
	position: absolute;
	top: 0;
	left: 5px;
	padding: 7px 0;
}
header h1#headerLogo img{
    float: left;
    width: 170px;
    margin-right: 10px;
    vertical-align: initial;
    margin-left: 0px;
}
header h1#headerLogo span{
	width: 300px;
	font-size: 1.2rem;
	line-height: 2.5;
	vertical-align: top;
}
@media screen and (max-width:768px) {
	header .inner{	padding: 0 0 0 5px;	}
　header h1#headerLogo span{	
	font-size: 1.0rem;	display: block;
	}
}

@media screen and (max-width:767px) {
header h1#headerLogo{top:0;}
header h1#headerLogo img{	width: 150px; padding: 5px 0 0; }
header h1#headerLogo span{
	font-size: 1.1rem;
	line-height: 3.2;
}
}

@media screen and (max-width:400px) {
header h1#headerLogo span{	
	display: none;
}
}

/*#globalNav -------------------------------*/
header nav{}
header #globalNav{	float: right;}
header #globalNav li {	float: left;}
header #globalNav a{
	position: relative;
	display: block;
	padding: 9px 15px;
	vertical-align: middle;
	text-decoration: none;
	color:#333;
	font-weight: bold;
}
header #globalNav li a.current{	color: #c9151d;}
header #globalNav li a.current::after {	color: #c9151d;}
header #globalNav a:hover {	color: #999;}

@media only screen and (min-width:768px){
	header #globalNav li.appBtn a{ 
		color: #fff;
		background: #c9151d;
		padding: 9px 42px;
		font-size: 1.8rem;
		margin: 0 0 0 10px;
	}
	header #globalNav li.appBtn a:hover{ background: #d81f2d;}
}
.slicknav_menu { display: none;}

@media only screen and (max-width:900px){
header #globalNav a{ padding: 9px 10px; }
	header #globalNav li.appBtn a{ 
		padding: 9px 25px;
		font-size: 1.8rem;
	}
}

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

/* お申込みボタン*/
@media only screen and (max-width:767px) {
#headerAppBtnSP {
	position: fixed;
	top: 0;
	right: 50px;
	font-size: 1.4rem;
	line-height: 3.5;
	z-index: 995;
}
#headerAppBtnSP a {
	display: block;
	height: 50px;
	padding: 0 15px;
	background: #c9151d;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	}
#headerAppBtnSP a:hover{ background: #d81f2d;}
 }


/*------------------------------------------------------------------
 　main
 ------------------------------------------------------------------*/
main{
	position:relative;
	margin:0;
	}
h2{
    font-size: 38px;
    text-align: center;
    line-height: 1.3;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 30px;
}
h3{	font-size: 30px;}
h4{	font-size: 20px;}

@media only screen and (max-width:767px){
h2{font-size:28px;margin: 0 0 10px;}
h3{	font-size: 24px;}
h4{	font-size: 18px;}
	}



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

#mainVisual p{ margin: 0; padding: 0;}

#mainVisual .forPC { 
	max-width: 1050px;
	margin: 0 auto;
	background: #406493 url(../img/bg_mainvisual.jpg) no-repeat 200px 0;
}
#mainVisual .ConL{
	position: relative;
	float: left;
	width: 40%;
	padding:0 0 0 25px; 
	
}
#mainVisual .ConL .name{
	position: absolute;
	top:12%;
	left: 10px;
	z-index: 12;
	font-weight: 500;
	font-size: 2.4rem;
	color: #fff;
}
#mainVisual .ConL .photo{	z-index: 11;padding: 0px 0 0 0px;}
#mainVisual .ConR{
	position: relative;
	float: right;
	width: 357px;
}
#mainVisual .ConR .pointName{
	position: absolute;
	top: 12%;
	left: 20px;
	z-index: 12;
	font-weight: 500;
	font-size: 1.6rem;
	text-align: right;
}
#mainVisual .ConR .photoPoint{	z-index: 11;}

@media only screen and (max-width:970px){ 
#mainVisual .forPC { 
	background: #2a393f url(../img/bg_mainvisual.jpg) no-repeat -80px 0;
	background-size: auto 100%;
}
	#mainVisual .ConL{		width: 33%;	}
	#mainVisual .ConR{		width: 40%;	}
#mainVisual .ConL .name{font-size: 1.5rem;}
#mainVisual .ConR .pointName{ font-size: 1.4rem;}
}

@media only screen and (max-width:767px){
#mainVisual .nameSP{
	font-size: 1.3rem;
	padding: 2px;
	font-weight: 500;
	text-align: center;
	background: #E60012;
	color: #fff;
	}
#mainVisual .photoSP{
	line-height: 0;	
	}
#mainVisual .pointNameSP{
	font-size: 1.5rem;
	padding: 5px;
	text-align: center;
	background: #f2d23c;
	font-weight: 500;
	}
}

/*------------------------------------------------------------------
   トピックス
--------------------------------------------------------------------*/
.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;
}


/*------------------------------------------------------------------
   キャンペーン
--------------------------------------------------------------------*/


/* キャンペーンセクション全体 */
.campaign-section {
    padding: 60px 0;
    background-color: #fdfdfd;
}

/* 共通の見出し（data-enを利用した装飾） */
.heading-stylish {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}
.heading-stylish::before {
    content: attr(data-en);
    display: block;
    font-size: 0.4em;
    color: #cf0918; /* JAL RED */
    letter-spacing: 0.2em;
    margin-bottom: 5px;
}

/* 期間表示ボックス */
.campaign-period-box {
    max-width: 700px;
    margin: 0 auto 40px;
    border: 2px solid #cf0918;
    border-radius: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
}
.period-label {
    background: #cf0918;
    color: #fff;
    padding: 10px 25px;
    font-weight: bold;
    font-size: 1.2rem;
}
.period-text {
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 1.8rem;
    color: #333;
}
.period-text .small { font-size: 1.2rem; margin-left: 5px; }

/* キャンペーンカードのグリッド */
.campaign-grid {
    display: flex;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.campaign-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
    border-top: 5px solid #cf0918;
}
.campaign-card:hover { transform: translateY(-5px); }

/* カード内のパーツ */
.card-header {
    background: #f8f8f8;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
}
.card-num {
    font-family: 'Arial', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: #cf0918;
    opacity: 0.3;
}
.card-header h3 {
    font-size: 1.6rem;
    margin: 0;
    text-align: left;
    color: #333;
}
.card-body {
    padding: 30px 20px;
    text-align: center;
}
.card-lead {
    font-size: 1.4rem;
    color: #666;
    margin-bottom: 15px;
}
.benefit-box {
    background: #fff5f5;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.benefit-main {
    font-size: 2.8rem;
    font-weight: bold;
    color: #cf0918;
}
.benefit-main .unit { font-size: 1.4rem; margin-left: 3px; }
.card-note {
    font-size: 1.1rem;
    color: #999;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .campaign-grid { flex-direction: column; padding: 0 20px; }
    .campaign-period-box {
        flex-direction: column;
        border-radius: 10px;
        margin: 0 20px 30px;
    }
    .period-label { width: 100%; text-align: center; }
    .period-text { padding: 15px; font-size: 1.5rem; }
    .benefit-main { font-size: 2.2rem; }
}



























/*------------------------------------------------------------------
   #about ABC Wi-Fiの特徴
--------------------------------------------------------------------*/
#about{	background: none;}
.aboutBox{
	max-width: 1000px;
	clear:both;
	height: 310px;
	position:relative;
	margin: 0 auto;
	}
.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: 310px;
	padding: 100px 0 0;
	background: url(../img/bg_about_right.png) no-repeat 0 bottom;
	}
.innerL .point{
	float:right;
	margin:0 -69px 0 0;
	width:200px;
	height: 310px;
	padding: 100px  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;
	font-size: 18px;
	font-weight: 900;
	color: #E72735;
	}
.point span strong{
	font-size: 36px;
	font-weight: 900;
	padding: 0 5px;
}
.innerR .point span{ text-align:right;}

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

#about #point1 h3{
	padding-top: 0px;
	text-align:center;
	margin: 0 0 15px;
	}

#about #point1 p.copy{
	text-align:center;
	margin: 0 0 20px;
	font-size: 2.2rem;
	font-weight: 500;
	/* clear: both; */
	/* float: left; */
	}

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

#about #point2 p.copy{
	width: 52%;
	float:right;
	text-align: left;
	font-size: 1.8rem;
	font-weight: 500;
	}

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

#about #point3 p.copy{
	width:60%;
	float:left;
	margin: 0 0 0 40px;
	font-size: 1.8rem;
	font-weight: 500;
	}

@media only screen and (max-width:955px){
.innerR .point,.innerL .point{	background:none !important;}
.innerR,.innerL{	background: #fff;}
#about #point3 p.copy {  margin: 0 0 0 0px; }
#about #point2 p.copy {width: 58%;margin: 0;}
}

@media only screen and (max-width:767px){
#about #point1,
#about #point2,
#about #point3{	background: none;}

.innerR,.innerL{
	width:100%;
	background:none;
	margin: 0 0 50px;
}

.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:0 0 53%;
	margin:0;
	border-bottom: none;
	}
#about #point1 .point span{	background:url("../img/test_bg_about_01.jpg") no-repeat  0 bottom;background-size: 100% auto;	}
#about #point2 .point span{	background:url(../img/bg_about_02.jpg) no-repeat  0 bottom;background-size: 100% auto;	}
#about #point3 .point span{	background:url(../img/bg_about_03.jpg) no-repeat  0 bottom;background-size: 100% auto;	}

.innerR .point span img,
.innerL .point span img{
	width: 15%;
	}

#about #point1 h3,
#about #point2 h3,
#about #point3 h3{
	float:none;
	width:100%;
	margin: 15px 0;
	padding: 0;
	text-align:center;
	}
#about #point1 p.copy,
#about #point2 p.copy,
#about #point3 p.copy{
	clear:both;
	float:none;
	width: 100%;
	margin: 0 0%;
	padding: 0 10% 15px;
	text-align:center;
	}

}



/*------------------------------------------------------------
　.button　ボタン
--------------------------------------------------------------*/
.button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 15px 50px 15px 70px;
	appearance: none;
	font-size: 2.0rem;
	color: #fff;
	border-radius: 30px;
	font-weight: 500;
	margin: 0 0 20px;
	text-decoration: none;
	background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 15px center;
	background-size: 30px 30px;
}
.button:hover{
	color: #fff;
	background:#df101f url(../img/icon_arrow_right.svg) no-repeat 15px center;
	background-size: 30px 30px;
}
.button_S{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 5px 20px 5px 30px;
	appearance: none;
	font-size: 1.3rem;
	color: #fff;
	border-radius: 30px;
	font-weight: 500;
	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;
}


 /*----------------------------------------------------------------
  てすと２タブ
----------------------------------------------------------------*/
/* --- 変数・基本設定 --- */
:root {
  --primary-color: #2c3e50;
  --accent-color: #3498db;
  --accent-hover: #2980b9;
  --bg-light: #f4f7f9;
  --white: #ffffff;
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}







.luxury-tabs { max-width: 1050px; margin: 0 auto; }
.luxury-tabs input { display: none; }

/* --- 親タブ --- */
.main-nav { display: flex; gap: 4px; background: #e0e0e0; padding: 6px 6px 0; border-radius: 12px 12px 0 0; }
.main-label { flex: 1; padding: 15px; text-align: center; cursor: pointer; background: #d0d0d0; border-radius: 10px 10px 0 0; color: #666; transition: var(--transition); }
.main-label .en { display: block; font-size: 10px; font-weight: bold; letter-spacing: 2px; }
.main-label .jp { display: block; font-size: 20px; font-weight: bold; margin-top: 5px; }

#p1:checked ~ .main-nav label[for="p1"],
#p2:checked ~ .main-nav label[for="p2"] { background: var(--white); color: var(--primary-color); position: relative; }
#p1:checked ~ .main-nav label[for="p1"]::after,
#p2:checked ~ .main-nav label[for="p2"]::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background:#E60012; }

/* --- メインコンテンツ枠 --- */
.main-container { border: 1px solid #e0e0e0; background: var(--white); border-radius: 0 0 12px 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden; }
.main-panel { display: none; padding: 30px; }
#p1:checked ~ .main-container #c1, #p2:checked ~ .main-container #c2 { display: block; animation: fadeUp 0.6s; }

/* --- 子タブナビ（グリッド） --- */
.sub-nav { display: grid; gap: 10px; margin-bottom: 30px; }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-1 { grid-template-columns: repeat(1, 1fr); }

.sub-nav label { background: var(--bg-light); border: 1px solid #e0e0e0; padding: 12px 5px; text-align: center; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.3s; color: #777; }

/* 子タブ選択時 */
#s1-1:checked ~ .sub-nav label[for="s1-1"], #s1-2:checked ~ .sub-nav label[for="s1-2"],
#s1-3:checked ~ .sub-nav label[for="s1-3"], #s1-4:checked ~ .sub-nav label[for="s1-4"],
#s1-5:checked ~ .sub-nav label[for="s1-5"], #s1-6:checked ~ .sub-nav label[for="s1-6"],
#s2-1:checked ~ .sub-nav label[for="s2-1"], #s2-2:checked ~ .sub-nav label[for="s2-2"]

{
  background: #E60012; color: white; border-color: #E60012; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* --- コンテンツパネル本体 --- */
.sub-panel { display: none; grid-template-columns: 2fr 3fr; gap: 30px; align-items: center; }

/* 表示切り替えロジック */
#s1-1:checked ~ .sub-container .sp1-1, #s1-2:checked ~ .sub-container .sp1-2,
#s1-3:checked ~ .sub-container .sp1-3, #s1-4:checked ~ .sub-container .sp1-4,
#s1-5:checked ~ .sub-container .sp1-5, #s1-6:checked ~ .sub-container .sp1-6,
#s2-1:checked ~ .sub-container .sp2-1, #s2-2:checked ~ .sub-container .sp2-2

{ 
  display: grid; animation: fadeUp 0.5s; 
}

.pane-img img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); object-fit: cover; }
.pane-text { display: flex; flex-direction: column; align-items: flex-start; } /* PCでは左寄せ */
.pane-text h3 { font-size: 24px; color: var(--primary-color); margin: 0 0 15px; position: relative; }
.pane-text h3::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 580px; height: 3px; background: #E60012; }
.pane-text .sub-txt { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 25px; }

/* --- ボタン（CTA）のデザイン --- */
.cta-button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #E60012;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: var(--transition);
  border: 2px solid #E60012;
}
.cta-button:hover {
  background-color: white;
  color: #E60012;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}





/* --- スマホ対応レスポンシブ --- */
@media (max-width: 768px) {
  .main-panel { padding: 20px; }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  
  .sub-panel { grid-template-columns: 1fr; gap: 20px; }
  .pane-img { order: 1; }
  .pane-text { order: 2; align-items: center; text-align: center; } /* スマホでは中央揃え */
  .pane-text h3::after { left: 50%; transform: translateX(-50%); width: 300px;}
  .pane-text .sub-txt { text-align: left; font-size: 14px; }
  .cta-button { width: 53%; } /* スマホではボタンを少し大きく */
	.main-label .jp { display: block; font-size: 16px; font-weight: bold; margin-top: 5px; }
	
	
}


@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 特典バッジのスタイル */
.privilege-badge {
  display: inline-block;
  border: 2px solid #333333; /* JALのイメージに合わせたブランドレッド */
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #fffafa; /* ほんのり赤みのある白 */
  max-width: fit-content;
}

/* 特典の1段目（タイトル部分） */
.badge-title {
  display: block;
  background-color: #333333;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 12px;
  text-align: center;
  letter-spacing: 2.0px;
}

/* 特典の2段目（内容部分） */
.badge-content {
  display: block;
  padding: 8px 15px;
  font-size: 15px;
  color: #e60012;
  font-weight: bold;
  text-align: center;
}

.badge-content strong {
  font-size: 20px;
  margin: 0 2px;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
  .privilege-badge {
    margin: 0 auto 20px; /* スマホでは中央寄せ */
    width: 90%;
    max-width: 280px;
  }
  
  .badge-content {
    font-size: 14px;
  }
}





 /*----------------------------------------------------------------
  .bnr  相互バナー
----------------------------------------------------------------*/
.bnr{ max-width: 1000px; margin: 3em auto 0; text-align: center;}
.bnr a{
	text-decoration: none;
	color: #111;
}
.bnr a span{
	display: block;
	text-align: center;
}
.bnr a span.copy{
	font-size: 2.3rem;
	font-weight: 700;
}
.bnr a span.txtS{
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: 5px;
}
@media only screen and (max-width:767px){
.bnr{
	padding: 0 2%;
	}
.bnr a span.copy{
	font-size: 1.5rem;
}
.bnr a span.txtS{
	font-size: 1.2rem;
}
}



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

/* #aboutの中にある .heading-stylish クラスに対して指定 */
#price .heading-stylish {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid #ddd;
  font-size: 2.8rem;
}

/* 疑似要素も同様につなげて書きます */
#price .heading-stylish::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px; /* 固定幅にするのもスタイリッシュです */
  height: 4px;
  /* 左から右へ、少し濃淡をつける（JALの翼のようなイメージ） */
  background: linear-gradient(to right, #ff4757, #e60012);
  border-radius: 2px; /* 角を少し丸めると、よりモダンになります */
}
#price .heading-stylish::before {
  content: attr(data-en); /* HTMLのdata-enの中身を表示させる */
  display: block;
  font-size: 1.5rem; /* 小さめに */
  font-weight: bold;
  color: #e60012; /* JALレッドをアクセントに */
  letter-spacing: 0.2em; /* 字間を広げるとオシャレ */
  margin-bottom: 5px;
  font-family: 'Arial', sans-serif; /* 英語はサンセリフ体が映えます */
}

/* .tab    -----------------------------------------------*/
ul.tabs{
	 position:relative;
	 z-index:2;
	 height: 70px;
	 margin:0;
	 padding:0;
	 }
ul.tabs li{
	 text-align:center;
	 line-height:1.0;
	 }
ul.tabs li a{
	 margin:0;
	 padding: 20px 0 0;
	 width:43%;
	 height: 70px;
	 display:block;
	 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;
	 font-weight:700;
	 }

ul.tabs li a#kaigaiTab{
	position:absolute;
	top:0;
	left:5%;
	background:#e5e4e4;
	}
ul.tabs li a#kokunaiTab{
	position:absolute;
	top:0;
	right:5%;
	background:#e5e4e4;
	}
ul.tabs li a#kaigaiTab:hover{
	color:#007bd6;
	background:#ececec;
	}
ul.tabs li a#kokunaiTab:hover{
	color:#cc3e1c;
	background:#ececec;
	}

ul.tabs li.active a#kaigaiTab{
	color: #fff;
	background: #264c67;
	}
ul.tabs li.active a#kokunaiTab{
	color: #fff;
	background: #07441e;
	}

@media only screen and (max-width:767px){
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: 5px 15px;
	font-size: 16px;
	}

.tab_content h4 span{
    font-size: 13px;
    padding:0 5px;
	}

/* .tabBox   -----------------------------------------------*/
.tabBox{
	clear:both;
	padding:0px 57px 57px;
	}

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


/* #price    -----------------------------------------------*/
#price #kaigai{background:url(../img/pho_plan_kaigai.jpg) no-repeat 40% 0;}
#price #kokunai{background:url(../img/pho_plan_keitai.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: 35px;
	text-align:center;
	margin:0 0 30px;
	}






@media only screen and (max-width:800px){
#price #kaigai{background:url(../img/pho_plan_kaigai.jpg) no-repeat 60% 0; background-size: 100% auto;}
#price #kokunai{background:url(../img/pho_plan_keitai.jpg) no-repeat left 0;background-size: 100% auto;}
#price #kaigai h3.kihon{
	height:320px;
	padding: 40px 0 0 30px;
	}
#price #kokunai h3.kihon{
	height:320px;
	padding: 40px 50px 0 30px;
	}
#price #kaigai h3.kihon img,
#price #kokunai h3.kihon img{
	width: 47%;
}
}


@media only screen and (max-width:767px){
#price .inner{
	width:100%;
	padding:0;
	}
#price #kaigai{background-size: 120% auto;}
#price #kokunai{background-size: 120% auto;}
	
#price #kaigai h3.kihon{
	width: 100%;
	height: 400px;
	padding: 20px 3% 0;
	/* background-size: 130%; */
	}
#price #kaigai h3.kihon img{width: 55%;}
#price #kokunai h3.kihon{
	width: 100%;
	height:400px;
	padding: 20px 2% 0;
	text-align:right;
	}
#price #kokunai h3.kihon img{width: 55%;}
#price .charge h3.chargeTitle{
	font-size:25px;
	margin: 20px 0 10px;
	}
#price .charge h3.chargeTitle span{text-align:center;}
	}

@media only screen and (max-width:700px){
#price #kaigai h3.kihon,#price #kokunai h3.kihon{height:340px;}	
}
@media only screen and (max-width:550px){
#price #kaigai h3.kihon,#price #kokunai h3.kihon{height:280px;}	
}
@media only screen and (max-width:420px){
#price #kaigai h3.kihon,#price #kokunai h3.kihon{height:220px;}	
}






/* #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: 3px 2px;
	white-space: nowrap;
	line-height: 1.2;
	}
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 solid #222;
	}
table.singleTable tbody td{
	border-left:1px solid #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: 1.7rem;} 
table.singleTable td.lineT{ font-size: 1.3rem; text-decoration: line-through; color: #777;}
table.singleTable .border{border-bottom:1px solid #222;}
table.singleTable td span.txtS{	font-size: 12px;}

@media only screen and (max-width:960px){
table.singleTable{
	width: 100%;
	margin: 0;
	}
table.singleTable .memo{	display:block;	}
table.singleTable:last-child{margin-left: 0%;}
}

@media only screen and (max-width:767px){
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: 1.1rem;}
}


/* #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: 50%;padding: 0 3% 20px;margin:-30px 0;}
#multiple #multipleMenu li.world177{width: 50%;padding: 0 3% 20px;margin:-30px 0;}
#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: 1.3rem; white-space: nowrap;}
}
@media screen and (max-width:320px) {
#multipleMenu .button_S{ white-space:inherit;}
}

/* #test_tab ----------------------------------*/


.tab-container {
  border-radius: 0;
  position: relative;
}

.tab-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  position: relative;
}

.tab-container ul li {
  flex: 1;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: #666;
  font-weight: 500;
  font-family: 'Arial', sans-serif;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.08);
  transform: rotate(0deg);
  transform-origin: bottom center;
}

.tab-container ul li::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-container ul li.selected {
  color: #333;
  background: #fff9c4;
  border-color: #fbc02d;
  box-shadow: 
      0 4px 12px rgba(251, 192, 45, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.15);
  transform: rotate(0deg) translateY(-4px);
  z-index: 3;
}

.tab-container ul li.selected::before {
  opacity: 1;
  border-bottom-color: #fff9c4;
}

.tab-container ul li.selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
      repeating-linear-gradient(
          45deg,
          transparent,
          transparent 2px,
          rgba(251, 192, 45, 0.1) 2px,
          rgba(251, 192, 45, 0.1) 4px
      );
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

.tab-container ul li:not(.selected):hover {
  background: #fff8e1;
  border-color: #ffb300;
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 
      0 3px 8px rgba(255, 179, 0, 0.2),
      0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-container .tab-content {
  display: none;
  padding: 30px;
  min-height: 180px;
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  margin-top: 10px;
}

.tab-container .tab-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #fff9c4, #fbc02d, #fff9c4);
  border-radius: 8px 8px 0 0;
}

.tab-container .tab-content.selected {
  display: block;
  animation: stickyNoteIn 0.4s ease;
}

@keyframes stickyNoteIn {
  from { 
      opacity: 0; 
      transform: translateY(-10px) scale(0.95);
  }
  to { 
      opacity: 1; 
      transform: translateY(0) scale(1);
  }
}








/* #FairUsagePolicy ----------------------------------*/
#FairUsagePolicy {
	padding:30px 95px 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: 10px;
	}
}




/* #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: 5px 10px;
	font-size: 15px;
	}

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


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


/* .table01 --------海外用携帯用（パナmbより）---------------------------- */
.table01 th.sale{color: #fedddf;}
.table01 td.sale{
	background: #ffe7e9;
	color: #cc0000;
	text-align: center;
}
.table01 td .price{	font-size: 2.2rem;}
.table01 td span.txtS{	font-size: 1.2rem;}
.table01 td.lineT{	text-decoration: line-through;}
.table01 .borderLnone{	border-left:none; }

@media only screen and (max-width:767px){
	.table01 td .price{	font-size: 1.5rem;}
	.table01 td span.txtS{	font-size: 1.1rem;}
}



/* .table01 --------海外用携帯用（パナmb終わり）---------------------------- */







/* .priceTable -----------------海外用携帯用（パナmbより）------------------- */
.priceTable{
    margin-bottom: 5px !important;
    margin-top: 5px;
    margin-right: 15px;
    margin-left: 15px;
}
.priceTable th,
.priceTable td{	padding: 0.5em 0.5em;}
.priceTable td.country{ font-size: 1.3rem;}

@media only screen and (max-width:767px){
.priceTable th{	padding: 0.5em 1px;}
.priceTable td{	padding: 0.5em 1px;}
}


/* .priceTable -----------------海外用携帯用（パナmb終わり）------------------- */



/* .mobile -----------------海外用携帯用（パナmbより）------------------- */ 
.mobile{	margin-bottom:4em;	}
.mobile li{
	 float:left;
	 width:50%;
	 min-height:300px;
	 }
.mobile h4{
	font-family:Verdana, Geneva, sans-serif;
	font-family:Tahoma, Geneva, sans-serif;
	padding:20px 0 0;
	margin-bottom:0;
	font-size:30px;
	font-weight:normal;
	letter-spacing:0;
	}

 @media only screen and (max-width:640px){
.mobile li{	width:100%;}
.mobile .floatL{	margin:0 5px;}
}

.mobile p.floatL{
	width: 30%;
	text-align: center;
}
.mobile table.mobileType{ 
	width: 65%;
	margin-bottom:3px !important;
}
.mobileType th,
.mobileType td{
	padding: 0.5em;
	font-size:87%;
}

.table01{ margin-bottom:3em;}




/* .mobile -----------------海外用携帯用（パナmb終わり）------------------- */ 





/* #calculation -------------海外用携帯用（パナmbここから）-------------------------------------------------*/
#calculation{	padding: 5% 3em;	}
#calculation h3{	text-align: left; font-size:25px;}

@media only screen and (max-width:767px){
#calculation{
	margin-bottom:20px;
	padding: 0 4%;
	}
#calculation h3{
	font-size: 16px;
	margin-bottom: 5px;
	}
}
/* #calculation -------------海外用携帯用（パナmb終わり）-------------------------------------------------*/





/* .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{
	position: relative;
	margin:0 0 5px;
	padding:7px;
	border-top:1px solid #111;
	border-bottom:1px solid #111;
	font-weight:bold;
	}
.optionBox ul li dl dt.active::after{
	position: absolute;
	top: -6px;
	bottom: 0;
	right: 10px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-top: 1px solid #111;
	border-right: 1px solid #111;
	-webkit-transform: rotate(135deg);transform: rotate(135deg);
	}
.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;
	font-weight: 700;
	}

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


.box-option {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #111;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box-option p {
    margin: 0; 
    padding: 0;
}

@media only screen and (max-width:767px){
.optionBox{
	margin-bottom:20px;
	padding: 0 4%;
	}
.optionBox h3{
	font-size: 16px;
	margin-bottom: 5px;
	}
.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{
	position:relative;
	background-size:3%;
	margin:0;
	border-top:1px solid #111;
	border-bottom:none;
	padding: 13px 0;
	}
.optionBox ul li dl dt:hover{ 	background-size:3%;	}
.optionBox ul li dl dt::after{
	position: absolute;
	top: -6px;
	bottom: 0;
	right: 10px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-top: 1px solid #111;
	border-right: 1px solid #111;
	-webkit-transform: rotate(135deg);transform: rotate(135deg);
	}
.optionBox ul li dl dt.active::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right :10px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-top: 1px solid #111;
	border-right: 1px solid #111;
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}
.optionBox ul li dl dd{
	padding:3% 0;
	display:none;
	background:#fff;
	}

}



 /*----------------------------------------------------------------
  #use  ご利用方法
----------------------------------------------------------------*/
#use .useBox{ margin-bottom: 4em;}
#use h3{text-align:center;font-size: 24px;margin-bottom: 10px;}
#use h3 span{
	display: block;
	font-size: 13px;
	text-align: center;
}

/* #flow */
#flow ul li{
	float:left;
	width:35%;
	padding-right:5%;
	background: url(../img/icon_arrow.png) no-repeat right 160px;
	}
#flow ul li:last-child{	
	width:30%;
	padding-right:0%;
	background: none;
}
#flow .number{
	text-align:center;
	font-weight:bold;
	font-size: 18px;
	font-weight: 900;
	margin-bottom:5px;
	}
#flow strong{
	font-size: 30px;
	font-weight: 900;
	padding: 0 5px;
}
#flow h4{
	background:#f8d1d1;
	color:#cc0001;
	font-size: 20px;
	font-weight:normal;
	padding:5px;
	text-align:center;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	font-weight: 500;
	}
#flow .photo{
	text-align:center;
	width: 65%;
	margin: 0 auto 15px;
	}
#flow .txt{	margin-bottom:5px;}
#flow .underline{font-size: 1.3rem;} 
@media only screen and (max-width:767px){
#use h3{font-size: 18px;}

#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%;}
#flow .underline{font-size: 1.2rem;line-height: 1.2;}
}


/* HNDT2 */
.box30 {
    margin: 2em 0 5em;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}












/*------------------------------------------------------------------
   #map カウンターMAP
--------------------------------------------------------------------*/
/* .counterTable */
table.counterTable td{	line-height:1.4;	}
table.counterTable td.tdMap{ border-left: none;	}

@media only screen and (max-width:767px){
table.counterTable td{
	vertical-align:top;
	}
table.counterTable td.tdMap {
    text-align: center !important;
    border-left: 1px solid #343334;
    padding: 10px;
	}
}

/*.mapInner */
.mapInner{	padding: 15px 30px;}
.mapInner .title_departure{
	background:#91D5F7;
	text-align: center;
	padding: 5px;
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 2.0rem;
}
.mapInner .title_arrival{
	background: #fcc9c9;
	text-align: center;
	padding: 5px;
	font-weight: bold;
	margin-bottom: 5px;
	font-size: 2.0rem;
}
.mapBtn{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	margin: 2px 0 0 0px;
	padding: 0 10px 0 20px;
	appearance: none;
	font-size: 15px;
	color: #fff;
	border-radius: 30px;
	font-weight: 500;
	text-decoration: none;
	background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 5px center;
	background-size: 13px 13px;
}
.mapBtn:hover{	
	color: #fff;
	background:#d81f2d url(../img/icon_arrow_right.svg) no-repeat 5px center;
	background-size: 13px 13px;
}

@media screen and (max-width:767px) {
.mapBtn{
	display: block;
	margin: 2px 0 0 0px;
	padding: 2px 10px 2px 20px;
	width: 100%;
	text-align: center;
	font-weight: 400;
	font-size: 10px;
}
}













 /*----------------------------------------------------------------
  #application  お申し込み
----------------------------------------------------------------*/


#application .inner2{
	position:relative;
	max-width:1000px;
	margin:0 auto;
	}
.box{
  border: 2px solid #0094D6;
}
.box h3{
  background: #0094D6;
  color: #FFF;
  text-align: center;
  font-size:20px;
  margin: 0;
}
.box .inner{
  padding: .5em;
}















#application{ background: #f4f4f4;}
#application #notice ol li{margin-bottom: 1em;}
#application .company{
	clear: both;
	background: #fff;
	margin: 0 0 5px;
	padding: 15px;
	border: 2px solid #eee;
}
#application .company h3{
    width: 60%;
    float: left;
    line-height: 2.5;
    margin-bottom: 0;
    font-size: 18px;
}
#application .company ul{
	width: 38%;
	float: right;
	margin-bottom: 0;
}
#application .company ul li{
	float: left;
	margin: 0 0 3px;
	padding: 0 1%;
}


#application .company ul li a.button_S{
	margin: 0;
	padding: 8px 25px 8px 40px;
	background:#cf0918 url(../img/icon_arrow_right.svg) no-repeat 10px center;
	background-size: 20px 20px;
	display: block;
	text-align: center;
	border: 3px solid #cf0918;
}
#application .company ul li a.button_S:hover{
	color: #fff;
	background:#d81f2d url(../img/icon_arrow_right.svg) no-repeat 10px center;
	background-size: 20px 20px;
}

#application .company ul li a.companyBtn{
	background:#fff url(../img/icon_arrow_right_red.svg) no-repeat 10px center !important;
	background-size: 20px 20px !important;
	color: #cf0918;
}
#application .company ul li a.companyBtn:hover{
	background:#fddfdf url(../img/icon_arrow_right_red.svg) no-repeat 10px center !important;
	background-size: 20px 20px !important;
	color: #cf0918;
}


@media only screen and (max-width:768px){
#application .company h3{
	width: 100%;
	line-height: 1.4;
	margin-bottom: 10px;
	font-size: 16px;
	text-align: center;
}
#application .company ul{
	width: 100%;
	float: none;
}
#application .company ul li {	width: 100%;}
#application .company ul li a.button_S{	display: block;	width: 100%	;}
}



 /*----------------------------------------------------------------
  #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 20px 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 h4{ text-align:center; }

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


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

	
	#application h2{font-size:24px;
	}
	#application h2 span{
	text-align:center;
	margin-bottom: 20px;
	}
	
	
#application h3{font-size:14px;}
#application h3 span{
	text-align:center;}
	#application h4{
	font-size:15px;
	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:60px;
	text-align:center;
	padding-top:15px;
	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 7%;
	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;
	margin:0;
}
footer #footerLogo{text-align: center;background: #f4f4f4;}
footer #footerLogo img{
	width: 200px;
	margin: 20px auto;
}
#footerBox {
	clear: both;
	width: 100%;
	text-align: center;
	padding: 20px 0 50px;
	color: #b6b6b6;
	position: relative;
	overflow: hidden;
	background: #343334;
}
#footerBox ul {
	position: relative;
	left: 50%;
	float: left;
}
#footerBox ul li {
	padding: 0 7px;
	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 screen and (max-width:767px) {
footer {	margin: 0px 0 0;}
footer .inner {
	 padding: 0 0 0 250px;
	 margin: 0;
}
#footerBox { padding: 0;margin: 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{
	position: relative;
	display: block;
	padding: 15px 10px 15px 15px;
	border-bottom: 1px solid #777;
	vertical-align: middle;
	text-decoration: none;
	font-size: 16px;
	color: #fff;
}
#footerBox ul li a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right :15px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#footerBox p#copyright {
	text-align: left;
	margin-left: 10px;
	padding: 20px 0 80px;
	font-family: Verdana, Geneva, "sans-serif";
}
footer .logo img { max-width: 40%;}
}

@media screen and (max-width:768px) {
footer .inner { padding: 0 ;}
}