@charset "utf-8";
/* CSS Document */

/* ============================================================================================

Templates/menu.dwt
全共通page箇所

======================================== */



/* -----------------------------------
header
---------------------------------------------------------- */
header {
	clear: both;
	width: 100%;
}
/* 100%にして背景を全面に */

div#header {
	background-color: #FFF;
	position: fixed;
    z-index: 100;
    width: 100%;
}


/* 中央1000px に */
div#head_cover {
		max-width: 100%;
		margin: 0 auto;
}

div#head_top {
		max-width: 1000px;
		margin: 0 auto;			
		}

/* CSSが競合しないように独立指定と細かな調整用 */
div#head_l {
	float: left;
}

#logo {
	margin-top: 10px;
}

div#head_r {
	float: right;
}
/* お問い合わせなどのリスト */
#head_r ul {
	
}
#head_r ul li {
	float: left;
	padding: 10px 3px 5px 3px;
}
#head_r ul li a {
	display:  block;
}

/* navigation */

nav {
	clear: both;
/*	background-color:#0068b7;
	color: #FFF;
*/	
}


/* ----------------------------------
megamenu
----------------------------------*/
/* ナビゲーションバー */
		.navArea {
			max-width: 1400px;
		    background: #00447c;
		}
		
        .navbar {
            display: flex;
            background: #00447c;
            color: white;
            padding: 15px;
            justify-content: center;
            position: relative;
            z-index: 1000;
        }

		.menu {
			display: flex;
			list-style: none;
			width: 100%;
			justify-content: space-between;
		}


        .menu-item {
            position: relative;
            padding: 10px 100px;
            cursor: pointer;
        }

        /* メガメニュー（ウィンドウの端から端までフルワイド） */
        .mega-menu {
            display: none;
            position: fixed;
            top: 110px; /* ナビゲーションの下に配置 */
            left: 0;
            width: 100vw;
            background: white;
            color: black;
            padding: 20px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

/* メガメニュー全体を中央寄せ */
.mega-menu-inner {
    display: flex;
    max-width: 1200px;
    width: 100%; /* widthを親要素いっぱいに */
    margin-left: auto; /* 左右の余白を均等にして中央寄せ */
    margin-right: auto;
    padding-left: 0; /* 左の余白を削除 */
    gap: 20px;
    justify-content: flex-start; /* カラムを左寄せ */
}
.topmenulink {
	color: #ffffff;
}
/* カラム（メニュー項目）が適切に配置されるよう調整 */
.column {
    flex: 1;
    min-width: 200px;
	line-height: 23px;
}
 .column h3 {
    font-size: 16px;
    margin-bottom: 10px;
}
.column ul {
    list-style: none;
       }
.column ul li {
	line-height: 21px;
	position:relative;
  	padding: 0em 0.3em 0.3em 1.3em;
       }
.column ul li a {
    text-decoration: none;
    color: #00447c;
    transition: color 0.3s;
       }

.column ul li a:hover {
    color: #007bff;
        }
		
.column ul li::before {
  position: absolute;
  content: '';
  display: block;
  top: 0.3em;
  left: 0;
  width: 6px;
  height: 6px;
  border-right: 3px solid #00BCD4;
  border-bottom: 3px solid #00BCD4;
  transform: rotate(-45deg);
}
.columnsb {
	line-height: 24px;
	position:relative;
  	padding: 0em 0.3em 0.3em 1.3em;
       }
.columnsb a {
  text-decoration: none;
  color: #00447c;
  transition: color 0.3s;
}
.columnsb a:hover {
  color: #007bff;
}
.columnsb::before {
  position: absolute;
  content: '';
  display: block;
  top: 0.4em;
  left: 0;
  width: 6px;
  height: 6px;
  border-right: 3px solid #00BCD4;
  border-bottom: 3px solid #00BCD4;
  transform: rotate(-45deg);
}
/* grid-box template responsive version */
/* POSITIONING */
.menugrid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-gap: 1px
}

[class*="m-"] {
	grid-column: span 10;
	padding: 2px;
}
.m-2 {
		grid-column: span 2;
	}	
/* ハンバーガーメニューのボタン */
.hamburger {
    display: none;
    position: absolute;
    right: 9px;
    top: 3px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.3s;
}

/* 768px以下でメニューを隠してハンバーガーメニューを表示 */
@media screen and (max-width: 768px) {

	#head_r ul {
		display: none;
	}
    .navbar {
        display: none; /* 初期状態では非表示 */
        position: absolute;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 999;
		padding: 0;
		/* margin: 5px; */
    }
	.tenkai {
		display: none;
	}

    .menu {
        list-style: none;
        padding: 0;
		display: block;
    }

    .menu li {
        padding: 15px;
        border-bottom: 1px solid #ddd;
		margin-top: 4px;
    }

    .menu li a {
        display: block;
        text-decoration: none;
        color: #fff;
    }

    .hamburger {
        display: block;
    }

    /* ハンバーガーメニューが開いているときのスタイル */
    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    .navbar.active {
        display: block;
    }
	.tenkai.active {
        display: block;
    }
	.mega-menu {
		height: 100%;
		padding: 10px 0;
		overflow: scroll;
		z-index: 1;
	}
	.mega-menu-inner {
		display: block;
	}
	.menugrid {
		display: block;
	}
	.menugrid img {
		display: none;
	}
	.columnsb {
    line-height: 21px;
    position: relative;
    padding: 0em 0.3em 0.3em 1.3em;
    border-bottom: 1px solid #ccc;
}


}
.tp_ttl {
	box-sizing:border-box;
	border-right: 1px solid #C9D9E9;
}
.tp_ttl a{
	line-height: 1;
}
.interpose {
    border-top: 1px solid #24408f;
    margin:23px 0 0;
    text-align:center;
	color: #24408f;;
}

h2.interpose span {
    position: relative;
    top: -44px;
	padding: 0 10px;
    background:white;
}


/* WAPPER */
div#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color:  #FFF;
}

/* 大枠で調整しないといけない時用の保険　*/
div#container {
}

/* contents */
@media screen and (max-width: 480px) {
div.spcontents {
	padding-top:140px;
}
}

/* h1は共通　*/

h1 {
	text-align: center;
	margin:  30px auto;
	font-size: 4.2rem;
	font-weight: normal;
}

/* トピックスで使用しているタイトル背景 */
.sub_pgttl {
	height: 38px;
	padding: 20px 0;
	text-align: center;
	font-size: 2.4rem;
	font-size: 24px;
	font-weight: normal;
	width: 100%;
	background-image: url(../images/cmn/07bk_titlebg01_14-78.png);
	background-repeat: repeat-x;
	margin: 20px 0 auto;
}

.listtitle_v1 {
	background-image: url("../images/company/support/18pg_cmpsupbar-679.png");
	background-repeat: no-repeat;
	height: 29px;
	line-height: 29px;
	padding: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #11256F;
}



/* div#contents内の最初のボックスも統一 */
/* contentsのブロック毎の要素 */
.blk {
	max-width: 960px;
	margin: 20px auto;
	line-height: 2.8rem;
}

/* contentsのブロック毎の要素 */
.blk_sidein {
	max-width: 1000px;
	margin: 10px auto;
	line-height: 2.8rem;
}

/* pageタイトル */
.title {
font-size: 2.8rem;
padding: 25px 0;
text-align: center;
}



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

レスポンジブルテーブル
※TD要素を右スクロール出来るように

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

table.responsive th { font-weight: bold; }
table.responsive td, table th { padding: 9px 10px; text-align: left; }


/*  page contents area */
/* 1000pxにして中央に */
/*  page contents area */
div.contents {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	line-height: 200%;
	height: 100%;
}
/* -----------------------------------
footer 
---------------------------------------------------------- */
footer {
	clear: both;
	margin-top: 30px;
}


div#footer {
	background-color:#2EB9ED;
	width: 100%;
text-align: center;
}

#footer ul li {
font-size: 1.4rem;
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding: 15px 10px;
	color: #FFF;
}
#footer a {
	color: #FFF;
}

.foot_desc {
	text-align: left;
	font-size: 1.4rem;
	color: #999;
	clear:both;
	padding: 5px;
	background-color: #F1f1f1;
	border: 1px solid #c5a977;
	overflow-y: scroll;
	width: 90%;
	height: 50px;
	margin: 5px 5%;
	line-height: 20px
}
address {
	color: #000;
	font-size: 1.0rem;
	text-align: center;
	padding: 10px 0;
}

/* dlの枠囲い部minute、　複数で使用　*/
.dlblock {
	width: 898px;
	margin: 50px auto;
	border:  1px solid #808080;
	padding: 20px;
}
.dlblock  dt {
	font-weight: bold;
	font-size: 1.8rem;
	padding-top: 10px;
}
.dlblock  dd {
	padding: 15px 0;
}

/* --------------------------------------------------------
contents block
------------------------------------------------------------- */
.ctz_left {
	float: left;
	width: 230px;
	font-size: 14px;
	background-color: #fff;
	height: 100%;
	top: 0;
}
/*
@media screen and (min-width: 800px) {
.ctz_left {
	margin-top: -100px;
	padding-top: 100px;
	position: sticky;
}}

@media screen and (max-width:480px) {
.ctz_left {
	position: sticky;
}}
*/

.ctz_right {
	float: left;
	width: 700px;
	margin: 0 0 0 35px
}
.ctz_main {

}

.sidemenutitle{
/* pointer-events: none; */
color: #000;
font-size: 1.4rem; font-size: 14px;
line-height: 21px;
text-align: center;
padding: 0.25em;
border-top: solid 2px #5c9ee7;
border-bottom: solid 2px #5c9ee7;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.tapspbtn {
	background:rgba(160,199,224,0.50);
	padding: 3px;
	font-size: 14px;
	border-radius: 10px;
}

.sidemenu_ul {
  padding: 0;
}

.sidemenu_ul li {
  color: black;
  position:relative;
  background: #f1f8ff;/*バーのColor*/
  line-height: 1.5;
  padding: 0.5em;
  margin-bottom: 4px;
  border-left : solid 35px #5c9ee7;/*先のColor＝アイコン裏のColor*/
  list-style-type: none!important;
}
.sidemenu_ul li.category {
  border-left : solid 35px #3A81FF;/*先のColor＝アイコン裏のColor*/
}

.sidemenu_ul li.pdc {
  border-left : solid 35px #65C2C9;
}

.sidemenu_ul li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  display: block;
  padding: 0.5em;
  width: 1.2em;
  color: white; /*アイコンColor*/
  font-weight: normal;/*アイコンは太字にしない*/
  text-align: center;
  left : -35px; /*左端からのアイコンまでの距離*/
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidemenu_ul li a:hover {
color: #1149B9;
display: block;
width: 100%;
margin-left: 10px;
}

.sidemenu_second li {
	border-color: #5c9ee7;
		font-size: 13px;
	font-size: 1.3rem;
}


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

index.htnl
toppage 

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


/* トピックス お知らせ */
.infobox {
	height: 430px;
}
.infobox_iframe {
height: 380px;
width: 100%;
overflow: scroll;
}

@media screen and (max-width: 480px) {
	.infobox {
		height: 300px;
		margin-bottom: 10px;
	}
	.infobox_iframe {
height: 250px;
-webkit-overflow-scrolling: touch;
}
}

.idx_topics {
	width: 100%;
	margin: 20px auto;
}
.idx_topics ul {
	height: 300px;
	overflow-y: scroll;
}

.idx_topics ul li {
	padding: 10px;

}


.idx_topics dl dt {
	font-weight: bold;
	border-bottom:  1px solid #000;
	padding: 3px;
}
.idx_topics dl dd {
	font-size: 14px;

	padding: 5px 0;
}


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

about/index.html contents内装飾

頭にabtがつく

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



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

support/index.html contents内装飾

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

/* Q&Aのリスト */
.qalist {
width: 90%;
margin: 20px auto;
text-align: center;
}
.qalist li {
width: 45%;
border: 1px solid #ccc;
display: inline-block;
margin-bottom: 5px;
}
.qalist li a {
display: block;

}
.qalist li a:hover {
background-color:#BFD9D7;
}

/* =======================
Q&Aの QとA
 ====================== */
.qa_q {
	width: 24px;
	height: 24px;
	padding: 5px;
	text-align: center;
	font-weight: bold;
	line-height: 18px;
	font-family: Georgia, "Times New Roman", Times, "serif";
	color: #fff;
	background:  #1F6BB1;
	margin-right: 5px;
	font-size: 18px;
	border-radius: 2px;
	border: 1px solid #ddd;
}
.qa_a {
	font-size: 18px;
		border-radius: 2px;
	width: 24px;
	height: 24px;
	padding: 5px;
	text-align: center;
	font-weight: bold;
	line-height: 18px;
	font-family: Georgia, "Times New Roman", Times, "serif";
	background: #fff;
	color:  #1F6BB1;
	margin-right: 5px;
	border: 1px solid #ddd;
}


/* div block */
.inq_box {
	clear: both;
}

/* h4のタイトル装飾　*/
.inq_ctgry {
	background-color:#E3EEF0;
	border-top: 2px solid #5E6C93;
	padding: 8px;
	margin: 40px 0;
	font-size: 1.8rem;
	text-align: center;
}

/* ダウンロード資料各種 */
.inq_dldata {
	width: 90%;
	margin: 20px auto;
}

.inq_dldata dt {
	padding: 20px 0 40px 0;
	font-size: 2.1rem;
}

/* adobe pdf をダウンロードしてください　*/
.inq_pdftxt {
	font-size: 1.4rem;
	padding: 20px;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	margin: 30px auto;
}

/* support zoom案内 */

ul.checklist li {
	list-style-type: none;
	background-image: url("../images/support/zoom/18pg_zoom02-27-26.jpg");
	line-height: 30px;
	background-repeat: no-repeat;
	padding-left: 33px;
	padding-bottom: 30px;

}



/* ==================================

table design

================================ */


/* =======================
.listtable のスクロール設定
 ====================== */

@media only screen and (max-width: 630px) {
.listtable {
overflow-x:scroll;/*tableをスクロールさせる*/
white-space: nowrap;/*tableのセル内にある文字の折り返しを禁止*/
	}
	.listtable::-webkit-scrollbar{	/*tableにスクロールバーを追加*/
	height: 5px;
	}
	.listtable::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
	 background: #F1F1F1;
	}
	.listtable::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
	 background: #BCBCBC;
	}
	.listtable thead td{
	min-width: 250px;
	}
}

/* 事例のテーブル */

@media only screen and (max-width: 630px) {
.listtable_matchwith {
	overflow-x:scroll;/*tableをスクロールさせる*/
	white-space: nowrap;/*tableのセル内にある文字の折り返しを禁止*/
	}
	.listtable_matchwith::-webkit-scrollbar{	/*tableにスクロールバーを追加*/
	height: 5px;
	}
	.listtable_matchwith::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
	 background: #F1F1F1;
	}
	.listtable_matchwith::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
	 background: #BCBCBC;
	}
	.listtable_matchwith thead td{

	}
}
}