@charset "ISO-8859-1";

@import "font_e.css";          /* フォント設定 */
@import "menu_button.css";   /* メニューボタン */
/*@import "ie6.css";       */    /* IE6用ハック */


/*===============================================*/
/*================================================
全ページ共通設定
=================================================*/

body {
	background-color: #dededc;
	background-image: url(../img/bg.gif);
	background-repeat: repeat-x;
}

/*===============================================*/
a {
	color: #0099FF;
	text-decoration: underline;
}

a:visited {
	color: #0099FF;
	text-decoration: underline;
}

a:hover {
	color: #FC5F00;
	text-decoration: underline;
}

/*===============================================
タグ初期設定
===============================================*/

h1, h2, h3, h4, h5, p, img, li, form, dl, dt, dd {
	margin: 0px; padding: 0px;
}

ul, ol {     /* IEとFirefoxのulとolの解釈の違いを吸収 */
	margin: 0px ; padding: 0px;
}
h3, h4 {
	font-size: 1.0em;
}

img {
	border: none;
}

/* ============================================================
廻り込み解除 <div class="clear-both"><hr /></div>の形で使用
==============================================================*/
.clear-both { clear: both; margin:0; padding:0;}
.clear-both hr { display: none;}

/* =========================================================
jda_main　横幅752のBOX
========================================================= */
#jda_main {
	width: 1365px;
	margin: 0 auto;
}

/* =========================================================
header
========================================================= */
#header {
	background-color: #fff;
}
#header h1 {
	margin-bottom: 5px;
}
#header .customSearch{
	display: flex;
	justify-content: space-between;
}

.headerbg {
    flex-grow: 1;
    flex-basis: 0;
	background-image: radial-gradient(circle 3px at 30px 65px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 2px at 60px 20px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 3px at 80px 55px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 4px at 100px 40px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 2px at 150px 80px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 1px at 180px 15px, #fff 20%, rgba(0,0,0,0)),
						linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)),
						linear-gradient(to bottom, #0364b5 6%, #000000 6%);
}

.cart {
	position: relative;
	margin-right: 15px;
}

.cart span {
	position: absolute;
	color: #ff0000;
	top: 8px;
	left: 50%;
	transform: translateX(-25%);
	margin:0;
	padding:0;
}

.cart img {
	width: 100%;
}


/* =========================================================
information(障害のお知らせなど)
========================================================= */
#information {
	margin-bottom: 5px;
	background-color: #fff;
	background-image: url(../img/bg_box.gif);
	background-repeat: repeat-x;
	border: 1px solid #cdcdcd;
	border-top: none;
	height: 100%;
}

#information p{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#information ul{
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 10px;
}

#information h3 {
	background-color: #4a4a4a;
	background-image: url(../img/bg_title_h3.gif);
	padding: 7px 15px;
	color: #fff;
	font-weight: normal;
	-webkit-text-size-adjust: 100%;
}

/* =========================================================
menu　グローバルメニュー及び検索窓
========================================================= */
#menu {
	background-color: #010101;
	background-image: url(../img/bg_menu.gif);
	background-repeat: repeat-x;
	margin-bottom: 6px;
	height: 30px;
	position: relative;
}

#menu .menu_button {
	float: left;
	width: calc(100% - 5px);
	padding-left: 5px;
}

#menu .menu_button li {
	float: left;
	margin: 0px 8px;
	height: 30px;
	list-style: none;
}

#menu .menu_button li > a {
	top: 5px;
	padding-top: 5px;
	color: #a9a9a9;
	font-weight: bold;
	text-decoration: none;
}

#menu .menu_button li > a:hover {
	color: #2c9fe1;
}

/* 個々のメニューボタンについては『menu_button.css』を参照 */

#menu .menu_search {
	width: 230px;
	float: left;
	padding: 4px 0px;
}

#menu .menu_search_txt {
	width: 160px;
	height: 18px;
	border: 1px solid #e8e8e8;
	background-color: #eee;
	margin-right: 5px;
	vertical-align: top;
}

#menu .menu_search_btn {
	background-image: url(../img/btn_search_j.gif);
	background-repeat: repeat-x;
	width: 56px;
	height: 22px;
	border: 0;

}

.submenu {
	display: none;
	position: absolute;
	top: 30px;
	left: 0px;
	width: calc(100% - 4px);
	padding: 10px 0px;
	border: 2px solid #4169e1;
	background-color: #dcdcdc;
	z-index: 1;
}

.submenu_title{
	width: 120px;
	text-align: center;
	font-weight: bold;
}

.submenu_content{
	width: calc(100% - 125px);
	padding: 0px 10px;
	border-left: 2px solid #000000;
}

#menu .menu_button > ul > li:hover > .submenu {
	display: flex;
	animation: mshow 200ms linear;
}

@keyframes mshow {
    from {
        opacity: 0;
    }
    to {
	opacity: 1;
    }
}

/*＋お問い合せフォーム ボタン*/
a.btn_inquiry {
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #ffffff;
	width: 100%;
	height: 50px !important;
	line-height: 50px;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	background-color: #313131;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
	margin: 1em auto;
}
  
a.btn_inquiry:hover {
	opacity: 0.6;
}
  
a.btn_inquiry:active {
	-ms-transform: translateY(2px);
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	opacity: 0.6;
}

/* =========================================================
footlist（足跡・パンくずナビ）
========================================================= */
.panku {
	margin-top: 20px;
	color: #666;
}


/* =========================================================
footer
========================================================= */
#footer {}

.footerbg {
    flex-grow: 1;
    flex-basis: 0;
	background-image: radial-gradient(circle 2px at 600px 18px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 2px at 550px 10px, #fff 20%, rgba(0,0,0,0)),
						radial-gradient(circle 1px at 500px 20px, #fff 20%, rgba(0,0,0,0)),
						linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)),
						linear-gradient(to top, #0364b5 15%, #000000 15%);
}

/* =========================================================
jda_contents　メインコンテンツ
========================================================= */
.jda_contents {
	background-color: #fff;
	border: 1px solid #cdcdcd;
	border-top: none;
	margin-bottom: 5px;
	height; 100%;
}

.jda_contents h3 {
	background-color: #4a4a4a;
	background-image: url(../img/bg_title_h3.gif);
	padding: 7px 15px;
	color: #fff;
	font-weight: normal;
	font-size: 140%;
}

.jda_contents .contents {
	margin: 15px;
}

.note {
	font-size: 0.8em;
}

/* =========================================================
ご利用案内
========================================================= */

.service {
	font-family: 'Open Sans', sans-serif !important;
	font-weight: 400;
	font-size:110% !important;
	line-height:1.5 !important;
}
div.jda_contents div.contents div.service h1,
div.jda_contents div.contents div.service h2,
div.jda_contents div.contents div.service h3,
div.jda_contents div.contents div.service h4 {
	font-weight: 600; !important;
	font-size: 140% !important;
	margin-bottom: 10px;
}

/*.service h4 {
	font-weight: bold;
	font-size: 1.4em !important;
	margin-bottom: 10px;
}*/

.service ol {
	margin-top: 10px;
	margin-left: 20px;
}

.service ul {
	margin-left: 20px;
	list-style-type: disc;
}

.service li {
	margin-bottom: 5px;
}

.appli_link {
	margin: 5px;
	text-align: center;
}

/*
.appli_link input {
	width: 150px;
	height: 25px;
	vertical-align: middle;
	background-image: url(../img/btn_background.gif);
	background-repeat: repeat-x;
	border: 0;
}
*/

/* flowchart - Online application */

ol.method span.shead{
		font-weight: 600;
}


ol.apply li {
	margin-bottom: 1em;
}
ol.apply li span {
	font-weight: 400;
	font-size: 90%;
}
ol.apply li a {
	font-weight: 600;
}
ol.apply li:after {
	content: url(../img/flowchart_arrow.gif);
	display : block;
	margin-left:280px;
	margin-top:10px
}
ol.apply li:last-child:after {
	content : "";
}


/* button - Online application */

#btn_area {
	padding: 17px 0;
	position: relative;
	margin: 0 auto;
	background-color: #fff;
	text-align: center;
}
div.btn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	border: none;
	margin:15px auto; 
	text-align:center;
	width:50%;
	color: #ffffff;
	font-size: 18px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	display:block;
}

div.btn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
	display:block;
}

div.btn a {
	text-decoration: none;
	color: #fff;
	cursor:pointer;
	display:block;
}

/*  Caution text - Online application  */

dl.clrfix {
	width:722px;
}
dl.clrfix dt {
	clear: left;
	float: left;
	width: 0.7em;
}
dl.clrfix dd {
	margin-left: 1.2em;
}

/* =========================================================
カートの確認
========================================================= */
.cart_button {
	display: inline-block !important;
	padding: 0.5em 1em;
	text-decoration: none;
	background-color: #f4a460;
	color: #000000 !important;
	border: 1px solid #d2691e;
	box-shadow: 0 2px #d2691e;
	border-radius: 5px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}

.cart_button:hover {
	opacity: 0.8;
}

.cart_button:active:not(.disabled) {
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: none;
	color: #000000 !important;
}

.del_button {
	display: inline-block !important;
	padding: 0.5em 1em;
	text-decoration: none;
	background-color: #d3d3d3;
	color: #000000 !important;
	border: 1px solid #a9a9a9;
	box-shadow: 0 2px #a9a9a9;
	border-radius: 5px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}

.del_button:hover {
	opacity: 0.8;
}

.del_button:active:not(.disabled) {
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	box-shadow: none;
	color: #000000 !important;
}

.disabled {
	cursor: default;
    opacity: 1 !important;
}

.over {
    background-color: #000000;
    opacity: 0.6;
}

.cart_confirm {
	border-collapse: collapse;
	width: calc(100% - 5px);
}

.cart_confirm th,
.cart_confirm td {
	padding: 2px 5px;
	border:1px solid #ccc;
}

.cart_confirm th {
	color: #ffffff;
	background-color: #696969;
}
.cart_confirm th:nth-child(1) {
	width: 20px;
}

.cart_confirm th:nth-child(2) {
	width: 140px;
}

.cart_confirm th:nth-child(3) {
	width: calc(100% - 190px);
}
.cart_confirm tbody tr:nth-child(even) {
	background-color: #f5f5f5;
}

.confirm_button {
	width: 100%;
	margin-top: 30px;
	text-align: right;
}

.cc-btn {
	text-decoration: none !important;
}