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

/*-------------------------------------------------------------
 *
 *							header.css
 *
 *-------------------------------------------------------------*/

.fixed-header   { position: fixed; top: 0; left: 0; width: 100%; background-color: rgb(255, 255, 255); color: #231916; display: flex; justify-content: space-between; z-index: 1000; }

#logo, #logo_top_h1           { display: flex; align-items: center; margin-left: 35px; }
#logo img,
#logo_top_h1 img       { margin-top: -9px; }
#logo h2,
#logo_top_h1 h1        { margin-left: 35px; margin-top: 5px; font-size: 87%; font-weight: normal; line-height: 1.5; }

#globalMenu     { display: flex; height: 90px; }   

.menu ul        { margin: 0; padding: 0; }
.menu li        { display: block; text-align: center; }
.menu li a,
.ul-entry-menu .submenu li a,
.ul-event-menu .submenu li a        { display: inline-block; color: #000; text-decoration: none; font-size: 150%; padding: 17px 20px; line-height: 1.6; font-weight: 500; letter-spacing: 0.02em; }
.menu li.menuOn a                   { color: #a68367; }

.menu li a span,
.ul-entry-menu li.entry-menu span,
#sp-menu span   { display: block; font-size: 46%; font-weight: normal; text-align: center; }

.menu li.contact-menu a             { padding: 0; font-weight: 500; }
.menu li.contact-menu a span        { display: none; }

.ul-entry-menu                      { background-color: #000; align-items: center; cursor: pointer; }
.ul-entry-menu li.entry-menu        { width: 180px; box-sizing: border-box; text-align: center; color: #fff; font-size: 150%; }

.menu li.contact-menu:hover         { opacity: 0.8; }
li.entry-menu:hover a   { text-decoration: none; }
.menu li:not(.contact-menu):not(.entry-menu) > a:hover            { color: #535d64; } /* 確認 */

.menu ul > div,
.ul-entry-menu .submenu div,
.ul-event-menu .submenu div         { min-width: 250px; }

.menu .submenu,
.ul-entry-menu .submenu,
.ul-event-menu .submenu             { position: absolute; background-color: rgba(184, 156, 133, 0.9); padding: 30px; width: 100vw; margin: 0; justify-content: center; align-items: start; left: 0; top: 80px; opacity: 0; visibility: hidden; transition: .4s; }
.ul-entry-menu .submenu,
.ul-event-menu .submenu             { background: linear-gradient(135deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); }
.ul-entry-menu .submenu li > a:hover,
.ul-event-menu .submenu li > a:hover            { color: #000; } /* 確認 */

.menu .submenu li,
.ul-entry-menu .submenu li,
.ul-event-menu .submenu li          { text-align: left; }
.menu .submenu li a                 { color: #fff; font-size: 94%; padding: 8px 0; text-align: left; }
.ul-entry-menu .submenu li a        { color: #fff; font-size: 64%; padding: 8px 0; font-weight: 700; }

.ul-event-menu .submenu li a        { color: #fff; font-size: 100%; padding: 8px 0; font-weight: 700; }

.menu .submenu li:last-child{ margin-right: 0px; }

.menu li:hover .submenu,
.ul-entry-menu:hover .submenu,
.ul-event-menu:hover .submenu       { top: 100%; visibility: visible; opacity: 1; }


#sp-menu                    { display: none; cursor: pointer; background: #a68367; padding: 19px; }
#sp-menu .line              { width: 30px; height: 2px; background: #fff; margin: 6px; }
#sp-menu span               { color: #fff; }

.menu li.spBlock_1200                       { display: none!important; }


@media screen and ( max-width:1500px ) {
    #logo h2,
    #logo_top_h1 h1                        { display: none; }
}

@media screen and ( max-width:1400px ) {
    .ul-entry-menu li.entry-menu    { width: 120px; }

    .menu li a,
    .ul-entry-menu li.entry-menu > a              { font-size: 140%; padding: 19px 15px; }
}

@media screen and ( max-width:1300px ) {
    #logo, #logo_top_h1             { margin-left: 20px; }
    #logo img,
    #logo_top_h1 img                { width: 80%; }
    .menu li a                      { padding: 19px 14px; }
    .ul-entry-menu li.entry-menu    { width: 100px; font-size: 120%; }
    .ul-entry-menu li.entry-menu span   { margin-top: 8px; line-height: 1; }
}


@media screen and ( max-width:1200px ) {
    #logo, #logo_top_h1                   { float: left; height: 90px; margin-left: 15px; }
    #logo img,
    #logo_top_h1 img               { width: 85%; margin-top: 0; }
    #logo h2,
    #logo_top_h1 h1         { display: block; line-height: 1.5; font-size: 80%; margin-left: 18px; letter-spacing: 0.05em; }

    #globalMenu             { float: right; }
    .menu                   { display: none; flex-direction: column; align-items: center; background-color: rgba(184, 156, 133, 0.95); padding: 20px; position: absolute; top: 60px; width: 100%; z-index: 1000; left: 0; }
    .menu li                { padding: 5px 65px; width: 100%; }
    .menu li a              { color: #fff; font-size: 180%; display: flex; align-items: center; padding: 0; }
    .menu li.menuOn a       { color: #fff; }
    .menu li a span         { display: initial; margin-left: 15px; }

    .menu.active            { display: flex; padding: 40px 0; margin-top: 30px; }
    .menu li:not(.aboutusMenu) ul > div          { width: 100%; display: block; }
    .menu li.aboutusMenu ul > div:first-child,
    .menu li.aboutusMenu ul > div:nth-child(2),
    .ul-entry-menu .submenu div  { width: 40%; float: left; min-width: fit-content; }


    .menu .submenu          { display: none; flex-direction: column; align-items: flex-start; opacity: 1; visibility: initial; transition: none; }
    .menu .submenu.active   { display: contents; }

    .menu .submenu li       { padding-right: 0; padding-left: 16px; }
    .menu .submenu li a     { padding: 0; display: inline-block; font-size: 14.5px; }

    .menu li:hover .submenu,
    .ul-entry-menu:hover .submenu,
    .ul-event-menu:hover .submenu       { top: initial; visibility: none; opacity: none; }

    .ul-entry-menu li.entry-menu span   { font-size: 10px; }
    .ul-entry-menu .submenu,
    .ul-event-menu .submenu             { display: none; }
    .ul-entry-menu .submenu div         { padding: 0 10px ; }
    .ul-entry-menu .submenu li a        { font-size: 84%; }

    .ul-entry-menu .submenu.active,
    .ul-event-menu .submenu.active      { display: flex; top: 90px; opacity: 1; visibility:visible; transition: none; }

    #sp-menu                { display: block; position: absolute; right: 190px; width: 80px; height: 90px; }
    #sp-menu span           { font-size: 10px; position: absolute; bottom: 14px; left: 0; right: 0; }

    .menu li.contact-menu   { background-color: transparent; width: 100%; margin-left: 0; }
    .menu li.contact-menu img   { display: none; }
    .menu li.contact-menu a span                    { display: inline; }
    .menu li.contact-menu a span:first-of-type        { font-size: 100%; margin-left: 0; font-weight: 500; }


    .menu li.spBlock_1200                       { display: block!important; }

    div.linkIcon_sdgs_dx                        { overflow: hidden; width: 100%; }
    div.linkIcon_sdgs_dx li a img               { width: 90px; }

}

@media screen and ( max-width:767px ) {

    #logo, #logo_top_h1                   { height: 60px; }
    #logo img,
    #logo_top_h1 img               { width: 82px; }
    #logo h2,
    #logo_top_h1 h1         { font-size: 63%; }

    #globalMenu             { height: auto; }

    #sp-menu                { right: 150px; width: 60px; height: 60px; padding: 11px 16px; }
    #sp-menu span           { bottom: 6px;  }
    #sp-menu .line          { width: 20px; margin: 4px; }
    .menu.active            { margin-top: 0; }

    .ul-event-menu li.event-menu        { width: 60px; }
    .ul-event-menu li.event-menu img    { width: 100%; }

    .ul-entry-menu li.entry-menu    { width: 90px; font-size: 90%; }
    .ul-entry-menu li.entry-menu span   { font-size: 8px; margin-top: 4px; }

    .ul-entry-menu .submenu.active,
    .ul-event-menu .submenu.active      { top: 60px; padding: 10px 0; }
    .ul-entry-menu .submenu li a        { font-size: 100%; }
    .ul-event-menu .submenu li a        { font-size: 90%; }

}   

@media screen and ( max-width:500px ) {

    .menu li                { padding: 5px 0 5px 33px; }
    .menu .submenu li a     { font-size: 13.5px; }

    #sp-menu                        { right: 128px; }
    .ul-entry-menu li.entry-menu    { width: 68px; }
}