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

/***************************** トップページ */


/* ===============================================================
共通
================================================================== */


#index #main-contents {
background-image: url("../images/bg_article.png");
background-position: left top;
background-repeat: repeat-x;
background-color: #fff;
padding-top: 40px;
}

#index #main-contents .column {
justify-content: space-between;
align-items: flex-start;
}

#index #main-contents .left{
width: 100%;
}

#index #main-contents .right{
width: 100%;
}

#index #main-contents section .column {
flex-wrap: wrap;
}


/* ===============================================================
メガメニュー
================================================================== */

/*Gナビ index*/

#index nav.g-nav ul li{
width: 250px;
height: 56px;
text-align: center;
margin: 0px 0px 0px 0px;
box-sizing: content-box;
border-bottom: 12px solid rgba(0,0,0,0.0);
}

#index nav.g-nav ul li .parent-link{
width: 250px;
height: 56px;
line-height: 1em;
display: block;
padding-top: 5px;
background-color: #fff;
font-size: 110%;
/*background-image: url("../images/icon_arrow_blue_right.png");
background-size: 15px auto;
background-repeat: no-repeat;
background-position: 5px center;*/
z-index: 100;
position: relative;
/*font-weight: bold;*/
}

#index nav.g-nav ul li .parent-link b{
font-size: 80%;
font-weight: normal;
}

/*
#index nav.g-nav ul li .parent-link{
width: 310px;
height: 56px;
display: block;
padding-top: 5px;
background-color: #fff;
background-image: url("../images/icon_arrow_blue_right.png");
background-repeat: no-repeat;
background-position: 20px center;
}
*/

/*#index nav.g-nav ul li{
width: 310px;
height: 76px;
text-align: center;
margin: 0px 0px 0px 0px;
box-sizing: content-box;
border-bottom: 12px solid rgba(0,0,0,0.0);
}*/

/*
#index nav.g-nav ul li .parent-link{
width: 310px;
height: 76px;
display: block;
padding-top: 15px;
background-color: #fff;
background-image: url("../images/icon_arrow_blue_right.png");
background-repeat: no-repeat;
background-position: 20px center;
}*/

#index nav.g-nav ul li .parent-link:hover{
opacity: 1.0;
color: #fff;
background-color: #333;
}

#index nav.g-nav ul li .parent-link:hover > i{
color: #fff;
}

#index nav.g-nav ul li .parent-link > span{
width: 100%;
position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#index nav.g-nav ul li:nth-of-type(3) .parent-link > span{
width: 100%;
position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}



#index nav.g-nav ul li .parent-link > i{
width: 100%;
color: #0061B3;
font-size: 10px;
font-style: normal;
position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
font-weight: normal;
}


/*Gナビ トップページ　アクティブ*/

.menu .active a {
background-color: #333!important;
color: #fff!important;
}

.menu .active i {
color: #fff!important;
}


/********************************Gナビ トップページ　mega-menu */

/*ナビゲーションメニュー左UL*/
.menu{
width: 100%;
height: 400px;
padding: 0px;
margin-top: 0px;
box-sizing: border-box;
}

/*inner幅*/
.mega-left {
width: 260px;
position: relative;
} 

.mega-right {
width: 100%;
position: relative;
} 

/********************************Gナビ トップページ　mega-menu　右側*/


.mega-menu {
width: 100%;
/*background-color: #333;*/
box-sizing: border-box;
}

.mega-menu-wrap{
flex-wrap: wrap;
justify-content: space-between;
background-color: #333;
padding: 20px;
}

/*
.mega-menu .menu-grid-wide{
width: 100%;
height: 230px;
margin-bottom: 15px;
}
*/

.mega-menu .menu-grid-wide{
width: 100%;
height: 170px;
margin-bottom: 20px;
}

.mega-menu .menu-grid-wide,
.mega-menu .menu-grid{
position: relative;
overflow: hidden; 
}

.mega-menu .menu-grid-wide a,
.mega-menu .menu-grid a{
width: 100%;
height: 170px;
position: absolute;
top: 0;
left: 0;
}

/*
.mega-menu .menu-grid-wide img,
.mega-menu .menu-grid img{
height: 100%;
}*/

.mega-menu .menu-grid-wide img,
.mega-menu .menu-grid img{
width: 100%;
}


.mega-menu .menu-ttl{
position: absolute;
width: 100%;
min-height: 4em;
line-height: 1.5em;
bottom: 0px;
background-color: rgba(255,255,255,0.80);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-weight: 500;
color: #0061B3!important;
}

/*
.mega-menu .menu-ttl{
position: absolute;
width: 100%;
min-height: 4em;
line-height: 1.5em;
bottom: 0px;
background-color: rgba(255,255,255,0.80);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-weight: 500;
color: #0061B3!important;
}*/

.mega-menu .menu-grid-wide p{
padding: 10px;
}

.mega-menu .menu-grid-wide p.main{
/*font-size: 250%;*/
display: block;
width: 100%;
color: #0061B3!important;
}

.mega-menu .menu-grid-wide p.sub{
color: #333;
}

/*上段1列　下段6列*/
.menu-01 .menu-grid{
width: 15%;
height: 170px;
}

/*上段1列　下段2列*/
.menu-02 .menu-grid,
.menu-04 .menu-grid{
width: 49%;
height: 170px;
}

/*上段2列　下段3列*/

.menu-03 .menu-grid:nth-of-type(1),
.menu-03 .menu-grid:nth-of-type(2){
width: 49%;
height: 170px;
margin-bottom: 20px;
}

.menu-03 .menu-grid:nth-of-type(3),
.menu-03 .menu-grid:nth-of-type(4),
.menu-03 .menu-grid:nth-of-type(5){
width: 32%;
height: 170px;
}

/*上段1列　幻談3列*/
.menu-05 .menu-grid{
width: 32%;
height: 170px;
}


/*
.menu-01 .menu-grid{
width: 15%;
}*/

/*1段 2列*/
.menu-06 .menu-grid{
width: 49%;
height: 360px;
}

.menu-06 .menu-grid a{
height: 360px!important;
}

/*
.menu-02 .menu-grid,
.menu-04 .menu-grid,
.menu-05 .menu-grid,
.menu-06 .menu-grid{
width: 49%;
height: 480px;
}
*/

.menu-02 .menu-grid img,
.menu-04 .menu-grid img,
.menu-05 .menu-grid img,
.menu-06 .menu-grid img{
width: 100%;
height: auto;;
}

/*
.menu-02 .menu-grid img,
.menu-04 .menu-grid img,
.menu-05 .menu-grid img,
.menu-06 .menu-grid img{
width: auto;
height: 100%;;
}
*/


/*menu-03*/

/*
.menu-03 .menu-grid {
width: 100%;
height: 480px;
}
*/

/*.menu-03 .menu-grid {
width: 100%;
height: 380px;
}*/
.menu-03 .menu-grid img{
width: 100%;
height: auto;
}
.menu-03 .menu-grid p{
color: #0061B3!important;
}

/********************************menu-contents　右側*/


.menu_contents {
width: 0px;
height: 400px;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
/*left: 260px;*/
box-sizing: border-box;
}

.menu_contents >*{
padding-left: 250px;
}

/********************************map-illust*/




/*
#map-illust{
position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
width: 95%;
}*/

#map-illust{
width: 98%;
height: 400px;
text-align: center;
position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


#map-illust {
background-image: url("../../images/index/bg_top_03.png");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;
}


/********************************map-link*/

#map-link {
width: 100%;
height: 100%;
background-color: rgba(255,0,4,0.0);
margin: 0px;
padding: 0px;
}

#map-link ul {
position: relative;
height: 100%;
width: 100%;
}

#map-link li{
background-color: rgba(0,86,141,1.00);
border: solid 2px #fff;
display: block;
border-radius: 15px;
text-align: left;
padding: 10px 15px 10px 15px;
position: absolute;
box-sizing: border-box;
}

#map-link li strong{
display: block;
color: #ff6666;
font-weight: 600;
font-size: 110%;
margin-bottom: 0.2em;
}

#map-link li strong span{
color: #fff;
font-size: 70%!important;
display: inline-block;
margin-left: 0.5em;
}

#map-link li > div{
font-weight: 500;
margin-left: 1em;
font-size: 90%;
line-height: 1.5em;
}

#map-link li a{
color: #fff;
display: inline-block;
}

#map-link li a.blank{
background-image: url("../images/icon-link_white_01.png");
background-repeat: no-repeat;
background-position: right center;
background-size: auto 12px;
padding-right: 2em;
}

/*
#map-link li a{
background-color: rgba(255,255,255,0.00);
display: block;
width: 100%;
height: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-repeat: no-repeat;
}
*/



#map-link .map-link-01{
left: 0px;
top: 0px;
}

#map-link .map-link-02{
right: 0px;
top: 0px;
}

#map-link .map-link-03{
left: 0px;
top: 140px;
}

#map-link .map-link-04{
right: 0px;
top: 140px;
}

#map-link .map-link-05{
left: 0px;
bottom: 0px;
}

#map-link .map-link-06{
right: 0px;
bottom: 0px;
}

#map-link .map-link-01,
#map-link .map-link-02{
height: 30%;
}

#map-link .map-link-03,
#map-link .map-link-04{
height: 30%;
}

#map-link .map-link-05,
#map-link .map-link-06{
height: 30%;
}




/********************************mega-menu　ロールオーバー時*/

.long{
width: 100%;
/*max-width: 764px;*/
}

.hide{
width: 0px;
overflow: hidden;
}

.wide-l{
width: 100%;
box-sizing: border-box;
}

.short{
width: 260px;
}



/* ===============================================================
#top-info
================================================================== */

#index #top-info {
padding: 0px!important;
}


#index #top-info dl {
border: 4px solid #E9787C;
padding: 10px;
}

#index #top-info dt{
background-color: rgba(235,119,122,0.20);
text-align: center;
font-size: 120%;
padding: 10px;
}

#index #top-info dd {
padding: 10px;
}

#index #top-info .date-01,
#index #top-info .category-01{
margin-right: 20px;
}


#index #top-info ul li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

#index #top-info ul li div:first-child {
width: 130px;
white-space: nowrap;
}

#index #top-info ul li div:last-child {
text-align: left;
}

#index #top-info ul li p {
display: inline-block;
}

/***************************** アイコン設定 */

#index #top-info dt strong::before {
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  font-size: 14px;
  font-weight: 900;
  margin-right: 4px;
  color:#E9787C;
}



/* ===============================================================
#find
================================================================== */


#index #find a {
display: block;
width: 100%;
background-image: url("../images/icon_arrow_glay.png");
background-repeat: no-repeat;
background-position: right bottom;
border: solid thin #ddd;
}


#index #find dl {
font-size: 90%;
line-height: 1.2em;
}

#index #find dl dt{
text-align: center;
padding: 10px;
}

#index #find dl dt img {
max-width: 90px;
width: 100%;
height: auto;
}

#index #find dl dd {
text-align: center;
padding: 0px 10px 10px 10px;
min-height: 4em;
}

/* ===============================================================
#platform
================================================================== */

/*#index #platform .date-02,
#index #platform .category-02 {
margin-right: 20px;
}

#index #platform .date-02{
font-weight: 500;
}

#index #platform .backnumber{
text-align: right;
}

*/

/*#index #platform .menu{
list-style: none;
}*/

#index #platform{
padding-bottom: 0px!important;
}

#index #platform {
position: relative;
}

#index #platform a{
color: #1D7AD9;
}

/*各見出し*/

#index #platform h3{
background-color: #eee;
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1em;
}

#index #platform h3 span{
padding: 4px;
}

#index #platform h3 span:first-child{
width: 20%;
text-align: center;
display: block;
}

#index #platform h3 span:nth-child(2){
width: 60%;
text-align: left;
display: block;
padding-left: 1em;
color: #0A568D;
font-size: 90%;
}
#index #platform h3 span:last-child{
width: 20%;
text-align: right;
display: block;
font-size: 80%;
padding-right: 1em;
}

#index #platform h3 span:first-child{
background-color: #0D61B3;
color: #fff;
border-radius: 2px;
}

/*リスト*/

#index #platform ul{
margin-bottom: 3em;
}
#index #platform ul li{
margin-bottom: 1.1em!important;
padding: 0!important;
line-height: 1em;
}

#index #platform ul li a{
width: 100%;
display: block;
margin-top: 0.5em;
}

/*#index #platform li:nth-child(even){
margin-bottom: 1em!important;
}*/


/*#index #platform .btn-list{
position: absolute;
bottom: 0px;
right: 00px;
display: block;
background-color: #fff;
height: 30px;
z-index: 200;
width: 100%;
text-align: right;
padding-right: 20px;
}

#index #platform .btn-list a{
}
*/

/* ===============================================================
#lab
================================================================== */


#index #lab a{
width: 100%;
display: block;
}

#index #lab dl{
position: relative;
width: 100%;
font-size: 90%;
}

#index #lab dl img{
width: 100%;
height: auto;
}

#index #lab dl dt {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}

#index #lab dl dt strong {
background-color: #0061B3;
color: #fff;
width: 90%;
display: inline-block;
}

#index #lab dl dd:nth-of-type(1){
padding-top: 20px;
position: relative;
}

#index #lab dl dd:nth-of-type(1) span {
color: #1277DC;
font-size: 300%;
display: inline-block;
position: absolute;
bottom: 0px;
right: 10px;
background-color: rgba(255,255,255,0.80);
border-radius: 10px;
padding: 10px 10px 20px 10px;
}

#index #lab dl dd:nth-of-type(2) {
padding-top: 15px;
}

#index #lab dl dd:last-child{
padding-top: 15px;
text-align: right;
} 

#index #lab .btn_detail{
color: #1277DC;
display: inline-block;
border: 2px solid #1277DC;
padding: 4px 15px;
}




/* ===============================================================
#operating-company
================================================================== */

#index #operating-company {
padding: 0px!important;
margin: 20px auto;
color: #fff;
}

#index #operating-company img{
width: 100%;
height: auto;
}

#index #operating-company h2 {
text-align: center;
border-bottom: solid thin #fff;
padding-bottom: 4px;
}

#index #operating-company h3 {
text-align: center;
padding-top: 4px;
}

#index #operating-company p {
padding: 10px;
font-size: 90%;
}





/* [-] レスポンシブ対応
=========================================================================================== */
/* for - 1024px
=========================================================================================== */
@media screen and (max-width: 1024px) {

/*inner幅*/
.mega-left {
width: 260px;
position: relative;
} 

.mega-right {
width: 100%;
position: relative;
} 


/********************************mega-menu　ロールオーバー時*/

.long{
width: 100%;
}

.hide{
width: 0px;
overflow: hidden;
}

.wide-l{
width: 100%!important;
}

.short{
width: 260px;
}

}
/* for - 845px
=========================================================================================== */
@media screen and (max-width: 845px) {


/*inner幅*/
.mega-left {
display: none;
} 

.mega-right {
width: 100%;
} 



/********************************map-illust*/
#map-illust{
width: 98%;
height: 400px;
text-align: center;
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

}
/* for - 767px
=========================================================================================== */
@media screen and (max-width: 767px) {

/********************************map-illust*/
#map-illust{
height: 400px;
}

}
/* for - 579px
=========================================================================================== */
@media screen and (max-width: 579px) {

/* ===============================================================
共通
================================================================== */

#index #main-contents .column {
flex-wrap: wrap;
}

#index #main-contents .left{
width: 100%;
}

#index #main-contents .right{
width: 100%;
}

/********************************map-illust*/
#map-illust{
height: 300px;
}

#map-illust {
background-image: url("../../images/index/bg_top_02.png");
background-size: 100% auto;
}

#map-illust.en {
background-image: url("../../images/index/bg_top_02_en.png");
background-size: 100% auto;
}

#map-link{
display: none;
}

/* ===============================================================
#top-info
================================================================== */

#index #top-info ul li {
display: flex;
flex-wrap: wrap;
}

/* ===============================================================
#find
================================================================== */

#index #find .column a {
width: 49%;
}

#index #find .column dl dd {
text-align: left;
}


/* ===============================================================
#lab
================================================================== */

#index #lab a{
width: 100%;
margin-bottom: 30px;
border-bottom: dotted thin #ccc;
padding-bottom: 10px;
}
#index #lab a:last-child{
margin-bottom: 0px;
border-bottom: none;
}





}
/* for - 399px
=========================================================================================== */
@media screen and (max-width: 399px) {
}