/* ========================== A4 印刷用スタイル（PCデザイン固定） ========================== */ * { margin: 0px; padding: 0px; } html { font-size: 62.5%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body {font-size: 10px; font-size: 1.0rem;} body { text-align: center; font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif; } /* img ----------------------------------------------------------- */ img { padding: 0px; margin: 0px; border: none; vertical-align: bottom; display: block; max-width: 100%; max-height: 100%; } /* text link ----------------------------------------------------------- */ a:link, a:visited, a:active { color: #115fad; text-decoration: none; } a:hover { color: #999; text-decoration: underline; } /* clearfix ----------------------------------------------------------- */ /* clearfix */ .cf:before, .cf:after{ display: table; content: ''; } .cf:after{ clear: both; } /* h ----------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { margin: 0px; padding: 0px; } /* ul li ----------------------------------------------------------- */ li { list-style: none;} /* em ----------------------------------------------------------- */ em {font-style: normal;} /* text-indent ----------------------------------------------------------- */ #hBottom h1.logo a, #hBottom p.logo a, #totop a, .footerLogo { overflow: hidden; text-indent: 100%; white-space: nowrap;} .center { text-align: center; } .inline { display: inline!important; } strong, .bold { font-weight: bold; } .txLeft { text-align: left; } .txRight { text-align: right; } .mb20 { margin-bottom: 20px!important; } .mb30 { margin-bottom: 30px!important; } .mt20 { margin-top: 20px!important; } .mt30 { margin-top: 30px!important; } .mt40 { margin-top: 40px!important; } .mt50 { margin-top: 50px!important; } .mt60 { margin-top: 60px!important; } .mt70 { margin-top: 70px!important; } .mt150 { margin-top: 150px!important; } /* width ----------------------------------------------------------- */ .inner, #totop { margin: 0 auto; width: 1100px;} /* container ----------------------------------------------------------- */ #container { font-size: 14px; font-size: 1.4rem; line-height: 1.8; /*color: #333;*/ color: #333c4e; letter-spacing: 0.05em; text-align: left; overflow: hidden; } /* header ----------------------------------------------------------- */ #topBaneer { float: left; } #topBaneer a { display: block; padding: 8px 12px; background-color:#115fad; color: #FFF; font-weight: bold; margin-top:5px; margin-left:4px; } #topBaneer a:hover{ text-decoration: none; } #hTop { background-color: #fff; border-bottom: #ccc 1px solid; padding-right: 20px;} #hTop ul { float: right; border-right: #ccc 1px solid;} #hTop ul li { float: left; border-left: #ccc 1px solid; height: 50px; line-height: 50px;} #hTop ul li a { display: inline-block; padding: 0px 20px; color: #333c4e;} #hTop ul li a:hover { text-decoration: none;} #hTop ul li:last-child a { padding: 10px;} #hBottom { padding: 27px 20px 0px 20px; min-height: 98px; box-sizing: border-box;} #hBottom h1.logo a, #hBottom p.logo a { display: block; float: left; width: 310px; height: 44px; background: url(../../img/union/logo.png) no-repeat left top;} #hBottom .menu-container .menu ul.gM { float: right; width: 605px; margin: 10px 0 0 0; background: url(../../img/union/line_v_gray.jpg) no-repeat right 7px; box-sizing: border-box;} #hBottom .menu-container .menu ul.gM > li a { float: left; padding: 0px 30px; color: #333c4e; box-sizing: border-box; height: auto;} #hBottom .menu-container .menu ul.gM > li a:hover { text-decoration: none;} #hBottom .menu-container .menu ul.gM li.menu-dropdown-icon > a { background: url(../../img/union/line_v_gray.jpg) no-repeat left 7px;height: 61px;} .menu-mobile { display: none;} .menu > ul > li > ul { display: none; width: 100%; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box;} ul.normal-sub { position: absolute !important; top: 149px !important; left: 0 !important; margin: 0 auto; width: 100% !important; background-color: rgba(17, 95, 173, 0.8); padding: 10px 20px; z-index: 9998 !important;} ul.normal-sub span { display: block; margin: 0 auto; width: 1240px !important;} ul.normal-sub span li.title { display: block; color: #fff; border-bottom: #ccc 1px solid; margin-bottom: 20px; padding: 0 0 10px 5px; box-sizing: border-box;} ul.normal-sub li a { color: #fff !important; padding: 10px 30px 10px 30px !important; width: 25%; box-sizing: border-box; background: url(../../img/union/icon_white_m.png) no-repeat 5px center !important;} #searchBlock { position: absolute; top: 50px; z-index: 9999 !important;} #searchBlock { display: block; width: 100%; background-color: rgba(17, 95, 173, 0.8); text-align: center;} #searchBlock .inner { padding: 50px 0; margin-bottom: 50px;} #searchBlock p { color: #fff;} #searchBlock .searchBox { margin: 0 auto; width: 550px;} #searchBlock .searchBox input { float: left; height: 50px; width: 500px; padding: 5px; box-sizing: border-box; border-radius: 0; background-color: #FFF;} #searchBlock button { float: left; background-color: transparent; border: 0; height: 50px; width: 50px;} #searchBlock button#search-btn { background-color: #115fad; padding: 0 8px; cursor: pointer;} #searchBlock button#search-btn:hover { background-color: #111; padding: 0 8px; cursor: pointer;} #topBanner01 { display: flex; flex-wrap: wrap; gap: 20px; padding: 85px 30px 10px; } #topBanner01 .inner {width: calc(50% - 20px);} #topBanner01 a { display: block; text-align: center; } #topBanner01 a img { display: inline; } /* responseDCont ----------------------------------------------------------- */ #responseDCont { padding: 85px 0;} #responseDCont .btn a { margin: 0 auto; width: 770px; display: block; border: #333c4e 2px solid; /*height: 144px; line-height: 144px;*/ color: #333c4e; font-weight: bold; box-sizing: border-box; text-align: center; font-size: 28px;} #responseDCont .btn a:after { content: ""; display: inline-block; width: 48px; height: 24px; background: url(../../img/union/icon_navy_l.png) no-repeat right top; position: relative; top: 2px;} #responseDCont .btn a:hover { text-decoration: none;} /* navBlock ----------------------------------------------------------- */ .navBlock .inner { padding: 0px 0px 85px 0; box-sizing: border-box;} .navBlock ul li a { float: left; width: 530px; height: 113px; box-sizing: border-box; margin-right: 30px; margin-bottom: 30px; border: #333c4e 2px solid; color: #333c4e; background-color: #fff; position: relative; background: url(../../img/union/icon_navy_l.png) no-repeat 544px center;} .navBlock ul li:nth-child(2n) a { margin-right: 0;} .navBlock ul li img { float: left;} .navBlock ul li span { line-height: 1.5; font-weight: bold; position: absolute; width: 44%; top: 50%; left: 50%; transform: translateY(-50%) translateX(0%); } /* footer ----------------------------------------------------------- */ #footer { background-color: #f1f1f1;} #footer .inner02 { padding: 47px 20px 0 20px; box-sizing: border-box;} .footerLogo { display: block; width: 310px; height: 44px; background: url(../../img/union/logo.png) no-repeat left top; margin-bottom: 44px; box-sizing: border-box;} .footerNavTop, .footerNavTop a, .footerNavBottom a { color: #333c4e;} .footerNavTop { border-bottom: #333c4e 1px solid; padding-bottom: 34px; margin-bottom: 22px;} .footerNavTop dl:nth-of-type(1) { float: left; width: 185px;} .footerNavTop dl:nth-of-type(2) { float: left; width: 200px;} .footerNavTop dl:nth-of-type(3) { float: left; width: 200px;} .footerNavTop dl:nth-of-type(4) { float: left; width: 200px;} .footerNavTop dl dt { font-weight: bold; padding-bottom: 25px;} .footerNavTop dl:nth-of-type(4) dt { padding-bottom: 0px;} .footerNavBottom { padding-bottom: 30px;} .footerNavBottom ul { float: left; width: auto;} .footerNavBottom ul li { float: left; padding-right: 30px;} .footerNavBottom ul li:last-child { padding-right: 0px;} .footerNavBottom p.copy { float: right;} /* totop ページの先頭へ戻る ----------------------------------------------------------- */ #totop { position: relative; } #totop a { display: block; float: right; margin-right: 15px; margin-top: -26px; width: 54px; height: 54px; background: url(../../img/union/totop.png) no-repeat left top; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } #totop a:hover { filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; } /* font ----------------------------------------------------------- */ /* basic font-size: 14px; */ #searchBlock p { font-size: 30px;} ul.normal-sub li.title { font-size: 24px !important;} #searchBlock .searchBox input { font-size: 20px !important;} ul.normal-sub li a { font-size: 16px !important;} #hBottom ul li { font-size: 15px;} #hTop, .footerNavTop dt { font-size: 13px;} .footerNavTop dd { font-size: 12px;} /* ------------------------------------------ top ------------------------------------------ */ /* web font ----------------------------------------------------------- */ .head span { font-family: 'Lato', sans-serif;} /* clearfix ----------------------------------------------------------- */ /* clearfix */ .tab_content a dl:before, .tab_content a dl:after{ display: table; content: ''; } .tab_content a dl:after{ clear: both; } /* mainImg ----------------------------------------------------------- */ #mainImg { width:100%;} /* 縦書き */ .mainImgInner { position: relative; top: 0; text-align: center;} .mainImgInner p { font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; z-index: 8888 !important; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #fff; letter-spacing: 0.5em; height: 100%; text-indent: 1.5em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* slide01 */ #slide01 { text-align: center;} #slide01 img { width: 100%; max-width: 100%; height: 460px;} .slick-slider { margin-bottom: 0!important; } /* mainMovie ----------------------------------------------------------- */ #mainMovie { width:100%;} /* 縦書き */ .mainMovieInner { position: relative; top: 0; text-align: center;} /* slide01 */ #slide02 { text-align: center;} #slide02 iframe { width: 100%; max-width: 100%; height: 450px;} /* head ----------------------------------------------------------- */ .head { /*border-left: 4px #115fad solid;*/ padding: 3px 0 0 20px; line-height: 1;} .head h2 { color: #333c4e; font-weight: bold; letter-spacing: 0.05em; line-height: 0.8; padding-bottom: 12px;} .head span { color: #9e9e9e; line-height: 0.8; padding-left: 3px;} #movieCont .head { margin-bottom: 60px; padding: 0; border: 0;} #movieCont .head h2, #movieCont .head span { color: #fff;} /* newsContBox ----------------------------------------------------------- */ #newsCont {} #newsCont .newsContBox { padding: 80px 20px 100px;} #newsCont .newsContBox .head { border-left: 2px #115fad solid; padding: 0 0 0 24px; margin-bottom: 70px;} #newsCont .newsContBox .head h2 { color: #333c4e; font-weight: bold; letter-spacing: 0.05em; line-height: 1; padding-bottom: 3px;} #newsCont .newsContBox .head span { color: #9e9e9e; line-height: 1; padding-left: 13px; font-weight: normal;} .tabMenu { border-bottom: #cecece 1px solid;} .tabMenu ul.tabs { float: left; width: 100%;} .tabMenu ul.tabs li { float: left; margin-right: 30px; padding: 10px 15px; border-bottom: #fff 2px solid;} .tabMenu ul.tabs li.active { border-bottom: #115fad 2px solid;} .tabMenu ul.tabs li a { color: #333c4e;} .tabMenu ul.tabs li.btn { float: right !important; margin-right: 0;} .tabMenu ul.tabs li.btn a { padding: 10px 15px 10px 15px; box-sizing: border-box; color: #115fad; background: url(../../img/union/icon_blue_s.png) no-repeat right center;} .tabMenu ul.tabs li a:hover, .tabMenu ul.tabs li.btn a { text-decoration: none;} .tab_content a { color: #333c4e;} .tab_content a dl { border-bottom: #cecece 1px solid; padding: 23px 0 21px 0;} .tab_content a dl:hover { background-color: #f6f6f6;} .tab_content a dl dt { float: left; width: 245px;} .tab_content a dl dt span.date { width: 130px; display: inline-block;} .tab_content a dl dt span.category { width: 115px; display: inline-block; padding: 3px 0; box-sizing: border-box; background-color: #e9e9e9; text-align: center; border-radius: 8px;} .tab_content a dl dd { margin-left: 300px; margin-right: 16px; padding-right: 30px; box-sizing: border-box; background: url(../../img/union/icon_gray_s.png) no-repeat right center;} /* #topMainCont ----------------------------------------------------------- */ /*#topMainCont { position: static;}*/ /* mC_about ----------------------------------------------------------- */ #mC_about { position: relative; min-height: 548px; margin-bottom: 60px;} #mC_about .inner { position: relative;} #mC_about .inner .head { position: absolute; left: 665px; top: 70px; z-index: 9999;} #mC_about .inner .txt { position: absolute; left: 573px; top :235px; color: #fff; letter-spacing: 0.08em; z-index: 9999;} #mC_about .inner .img { position: absolute; top: 0; left: -440px; width: 1045px; height: 400px; background: url(../../img/top/img01_03.jpg) no-repeat left top; } #mC_about .inner .txt h3 { padding-bottom: 25px;} #mC_about .inner .txt p { max-width: 406px; padding-bottom: 40px; line-height: 2;} #mC_about .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_about .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_about .inner .txt ul li a:hover { text-decoration: none;} #mC_about .bgimg { min-height: 548px; z-index: 1;} #mC_about .bgimg:after { content: ''; display: block; width: 50.78%; height: 69.90%; position: absolute; bottom: 0%; left: 49.22%; background-color: #115fad; background-size: cover; } /* mC_business ----------------------------------------------------------- */ #mC_business { background-color: #f3f3f3;} #businessHead { position: relative;} #businessHead .inner .head { position: absolute; top: -30px; margin-left: 20px; z-index: 9999;} #businessHead .bgimg { min-height: 152px; z-index: 1;} #businessHead .bgimg:after { content: ''; display: block; width: 31.61%; height: 100%; position: absolute; top: -80px; left: 0; background-color: #fff; background-size: cover; } /* #mC_b_souden ----------------------- */ #mC_b_souden { position: relative; min-height: 550px; margin-bottom: 50px; top: -30px;} #mC_b_souden .inner { position: relative;} #mC_b_souden .inner .txt { position: absolute; left: 0; top: 30px; color: #fff; letter-spacing: 0.08em; padding-left: 35px; z-index: 9999;} #mC_b_souden .inner .img { position: absolute; top: 67px; left: 535px; width: 1045px; height: 450px; background: url(../../img/top/img02_03.jpg) no-repeat left top; } #mC_b_souden .inner .txt h3 { padding-bottom: 30px; margin-bottom: 30px; background: url(../../img/union/line_white.jpg) no-repeat left bottom; font-weight: bold;} #mC_b_souden .inner .txt h4 { padding-bottom: 30px;} #mC_b_souden .inner .txt p { max-width: 460px; padding-bottom: 60px; line-height: 2;} #mC_b_souden .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_b_souden .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_b_souden .inner .txt ul li a:hover { text-decoration: none;} #mC_b_souden .bgimg { min-height: 550px; z-index: 1;} #mC_b_souden .bgimg:after { content: ''; display: block; width: 50.78%; height: 82.15%; position: absolute; top: 0%; left: 0%; background-color: #234b74; background-size: cover; } /* #mC_b_naisen ----------------------- */ #mC_b_naisen { position: relative; min-height: 550px; margin-bottom: 80px;} #mC_b_naisen .inner { position: relative;} #mC_b_naisen .inner .txt { position: absolute; left: 575px; top: 160px; color: #fff; letter-spacing: 0.08em; padding-left: 20px; z-index: 9999;} #mC_b_naisen .inner .img { position: absolute; top: 0; left: -340px; width: 1045px; height: 450px; background: url(../../img/top/img03_03.jpg) no-repeat left top; } #mC_b_naisen .inner .txt h3 { padding-bottom: 30px; margin-bottom: 30px; background: url(../../img/union/line_white.jpg) no-repeat left bottom; font-weight: bold;} #mC_b_naisen .inner .txt h4 { padding-bottom: 30px;} #mC_b_naisen .inner .txt p { max-width: 440px; padding-bottom: 50px; line-height: 2;} #mC_b_naisen .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_b_naisen .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_b_naisen .inner .txt ul li a:hover { text-decoration: none;} #mC_b_naisen .bgimg { min-height: 577px; z-index: 1;} #mC_b_naisen .bgimg:after { content: ''; display: block; width: 50.78%; height: 82.15%; position: absolute; bottom: 0%; right: 0%; background-color: #237682; background-size: cover; } /* #mC_b_customer ----------------------- */ #mC_b_customer { position: relative; min-height: 550px; margin-bottom: 80px; top: 0px;} #mC_b_customer .inner { position: relative;} #mC_b_customer .inner .txt { position: absolute; left: 0; top: 35px; color: #fff; letter-spacing: 0.08em; padding-left: 35px; z-index: 9999;} #mC_b_customer .inner .img { position: absolute; top: 67px; left: 535px; width: 1045px; height: 470px; background: url(../../img/top/img04_03.jpg) no-repeat left top; } #mC_b_customer .inner .txt h3 { padding-bottom: 30px; margin-bottom: 30px; background: url(../../img/union/line_white.jpg) no-repeat left bottom; font-weight: bold;} #mC_b_customer .inner .txt h4 { padding-bottom: 30px;} #mC_b_customer .inner .txt p { max-width: 460px; padding-bottom: 60px; line-height: 2;} #mC_b_customer .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_b_customer .inner .txt ul li a:after{ content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_b_customer .inner .txt ul li a:hover{ text-decoration: none;} #mC_b_customer .bgimg { min-height: 540px; z-index: 1;} #mC_b_customer .bgimg:after { content: ''; display: block; width: 50.78%; height: 82.15%; position: absolute; top: 0%; left: 0%; background-color: #4a740d; background-size: cover; } /* #mC_b_environment ----------------------- */ #mC_b_environment { position: relative; min-height: 550px; margin-bottom: 80px;} #mC_b_environment .inner { position: relative;} #mC_b_environment .inner .txt { position: absolute; left: 575px; top: 140px; color: #fff; letter-spacing: 0.08em; padding-left: 20px; z-index: 9999;} #mC_b_environment .inner .img { position: absolute; top: 0; left: -340px; width: 1045px; height: 450px; background: url(../../img/top/img05_04.jpg) no-repeat left top; } #mC_b_environment .inner .txt h3 { padding-bottom: 30px; margin-bottom: 30px; background: url(../../img/union/line_white.jpg) no-repeat left bottom; font-weight: bold;} #mC_b_environment .inner .txt h4 { padding-bottom: 30px;} #mC_b_environment .inner .txt p { max-width: 440px; padding-bottom: 50px; line-height: 2;} #mC_b_environment .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_b_environment .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_b_environment .inner .txt ul li a:hover { text-decoration: none;} #mC_b_environment .bgimg { min-height: 550px; z-index: 1;} #mC_b_environment .bgimg:after { content: ''; display: block; width: 50.78%; height: 82.15%; position: absolute; bottom: 0%; right: 0%; background-color: #7d661e; background-size: cover; } /* #mC_b_kanri ----------------------- */ #mC_b_kanri { position: relative; min-height: 550px; margin-bottom: 0px; top: 0px;} #mC_b_kanri .inner { position: relative;} #mC_b_kanri .inner .txt { position: absolute; left: 0; top: 60px; color: #fff; letter-spacing: 0.08em; padding-left: 35px; z-index: 9999;} #mC_b_kanri .inner .img { position: absolute; top: 67px; left: 535px; width: 1045px; height: 450px; background: url(../../img/top/img06_05.jpg) no-repeat left top; } #mC_b_kanri .inner .txt h3 { padding-bottom: 30px; margin-bottom: 30px; background: url(../../img/union/line_white.jpg) no-repeat left bottom; font-weight: bold;} #mC_b_kanri .inner .txt h4 { padding-bottom: 30px;} #mC_b_kanri .inner .txt p { max-width: 460px; padding-bottom: 60px; line-height: 2;} #mC_b_kanri .inner .txt ul li a { border: #fff 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #fff; line-height: 1.3;} #mC_b_kanri .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mC_b_kanri .inner .txt ul li a:hover { text-decoration: none;} #mC_b_kanri .bgimg { min-height: 550px; z-index: 1;} #mC_b_kanri .bgimg:after { content: ''; display: block; width: 50.78%; height: 82.15%; position: absolute; top: 0%; left: 0%; background-color: #32ab8a; background-size: cover; } /* recruitCont ----------------------------------------------------------- */ #recruitCont { min-height: 570px; background: url(../../img/top/bg_recruit2.jpg) no-repeat center bottom; background-size: cover;} #recruitCont .inner { padding: 103px 0 0 34px; box-sizing: border-box;} #recruitCont .inner .head { margin-bottom: 50px;} #recruitCont .inner .txt h3 { color: #3f547f; padding-bottom: 25px;} #recruitCont .inner .txt p { max-width: 400px; padding-bottom: 60px; line-height: 2;} #recruitCont .inner .txt ul li a { border: #333c4e 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #333c4e; line-height: 1.3;} #recruitCont .inner .txt ul li a:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_navy_m.png) no-repeat right center;} #recruitCont .inner .txt ul li a:hover { text-decoration: none;} /* contentsCont ----------------------------------------------------------- */ #contentsCont { background-color: #f0f3f5;} #contentsCont .inner { padding: 60px 0 100px 0;} #contentsCont .inner .head { margin-left: 20px; margin-bottom: 70px;} #contentsCont .inner ul { margin-left: 25px;} #contentsCont .inner ul li a { float: left; display: block; width: 330px; height: 280px; margin-right: 30px; position: relative;} #contentsCont .inner ul li:last-child a { margin-right: 0;} #contentsCont .inner ul li:nth-of-type(1) a{ background: url(../../img/top/bg_contents01.jpg) no-repeat left top; background-size: cover;} #contentsCont .inner ul li:nth-of-type(2) a{ background: url(../../img/top/bg_contents02.jpg) no-repeat left top; background-size: cover;} #contentsCont .inner ul li:nth-of-type(3) a{ background: url(../../img/top/bg_contents03.jpg) no-repeat left top; background-size: cover;} #contentsCont .inner ul li a { position: relative;} #contentsCont .inner ul li a h3 { color: #fff; font-weight: bold; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #contentsCont .inner ul li a span.btn { position: absolute; bottom: -25px; left: 50%; margin-left: -81px;} #contentsCont .inner ul li a span.btn { border: #333c4e 1px solid; padding: 15px 30px 15px 35px; float: left; display: inline; margin-right: 14px; color: #333c4e; line-height: 1.3; background-color: #fff;} #contentsCont .inner ul li a span.btn:after { content: ""; float: right; display: block; width: 22px; height: 16px; background: url(../../img/union/icon_navy_m.png) no-repeat right center;} #contentsCont .inner ul li a span.btn:hover { text-decoration: none;} /* movieCont ----------------------------------------------------------- */ #movieCont { display: none; background-color: #115fad; padding: 60px 0 55px 0; text-align: center;} #movieCont .video { position:relative; width:100%; padding-top:56.25%; box-sizing: border-box;} #movieCont .video iframe { position:absolute; top:0; right:0; width:100%; height:100%; } #movieCont .inner .btn a { border: #fff 1px solid; padding: 15px 30px 15px 35px; width: 163px; height: 50px; margin: 55px auto 0 auto; color: #fff; line-height: 1.5; display: block; box-sizing: border-box;} #movieCont .inner .btn a:after { content: ""; display: inline-block; width: 22px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right top; position: relative; top: 3px;} #movieCont .inner .btn a:hover { text-decoration: none;} /* responseDCont ----------------------------------------------------------- */ #responseDCont { padding: 85px 0;} #responseDCont .btn a { margin: 0 auto; width: 770px; height: auto; line-height: inherit; display: block; border: #333c4e 2px solid; color: #333c4e; font-weight: bold; box-sizing: border-box; text-align: center;} #responseDCont .btn a:after { content: ""; display: inline-block; width: 48px; height: 24px; background: url(../../img/union/icon_navy_l.png) no-repeat right top; position: relative; top: 2px;} #responseDCont .btn a:hover { text-decoration: none;} /* font ----------------------------------------------------------- */ /* basic font-size: 14px; */ .mainImgInner p { font-size: 26px;} .head h2, #responseDCont .btn a { font-size: 28px;} #mC_b_souden .inner .txt h4, #mC_b_naisen .inner .txt h4, #mC_b_customer .inner .txt h4, #mC_b_environment .inner .txt h4, #mC_b_kanri .inner .txt h4 { font-size: 26px;} #mC_about h3, #mC_b_souden .inner .txt h3, #mC_b_naisen .inner .txt h3, #mC_b_customer .inner .txt h3, #mC_b_environment .inner .txt h3, #mC_b_kanri .inner .txt h3, #recruitCont .inner .txt h3 { font-size: 24px;} #contentsCont .inner ul li a h3 { font-size: 22px;} .tabMenu ul.tabs li { font-size: 16px;} #newsCont .head h2 span, .tabMenu ul.tabs li.btn a { font-size: 14px;} .tab_content dl dt span.category { font-size: 12px;} /* ------------------------------------------ sec ------------------------------------------ */ /* web font ----------------------------------------------------------- */ #contentsTitle .sechead span, #mainImg .txt p.en, .head span, .btnListLarge .column3 li span { font-family: 'Lato', sans-serif;} /* width ----------------------------------------------------------- */ .menuMainBlock ul, .menuSubBlock ul, .menuMainBlock ul { margin: 0 auto; width: 1030px;} .navBlock ul { margin: 0 auto; width: 1000px;} /* breadcrumb ----------------------------------------------------------- */ #breadcrumb { background-color: #ecf1f6;} #breadcrumb ul { padding: 10px 20px;} #breadcrumb li { float: left; padding-right: 10px;} #breadcrumb li a { color: #333c4e;} #breadcrumb li a:after { content: "/"; padding-left: 10px;} #breadcrumb li a:hover { text-decoration: none; color: #999;} #breadcrumb li a:hover:after { color: #333c4e;} /* secMainImg ----------------------------------------------------------- */ #secMainImg { min-height: 356px; position: relative;} #secMainImg h1 { color: #fff; font-weight: bold; padding: 153px 0 0 20px; display: inline-block;} #company #secMainImg { background: url(../../img/sec/company/secmain_company.jpg) no-repeat center top; background-size: cover;} #greeting #secMainImg { background: url(../../img/sec/greeting/secmain_greeting.jpg) no-repeat center top; background-size: cover;} #policy #secMainImg { background: url(../../img/sec/policy/secmain_policy.jpg) no-repeat center top; background-size: cover;} #philosophy #secMainImg { background: url(../../img/sec/philosophy/secmain_philosophy.jpg) no-repeat center top; background-size: cover;} #history #secMainImg { background: url(../../img/sec/history/secmain_history.jpg) no-repeat center top; background-size: cover;} #companyinfo #secMainImg { background: url(../../img/sec/companyinfo/secmain_companyinfo.jpg) no-repeat center top; background-size: cover;} #organization #secMainImg { background: url(../../img/sec/organization/secmain_organization.jpg) no-repeat center top; background-size: cover;} #business #secMainImg { background: url(../../img/sec/business/secmain_business.jpg) no-repeat center top; background-size: cover;} #power #secMainImg { background: url(../../img/sec/power/secmain_power.jpg) no-repeat center top; background-size: cover;} #indoor #secMainImg { background: url(../../img/sec/indoor/secmain_indoor02.jpg) no-repeat center top; background-size: cover;} #support #secMainImg { background: url(../../img/sec/support/secmain_support.jpg) no-repeat center top; background-size: cover;} #solution #secMainImg { background: url(../../img/sec/solution/secmain_solution.jpg) no-repeat center top; background-size: cover;} #manage #secMainImg { background: url(../../img/sec/manage/secmain_manage.jpg) no-repeat center top; background-size: cover;} #worksPower #secMainImg { background: url(../../img/sec/manage/secmain_manage.jpg) no-repeat center top; background-size: cover;} #recruit #secMainImg { background: url(../../img/sec/recruit/secmain_recruit.jpg) no-repeat center top; background-size: cover;} #infomation #secMainImg { background: url(../../img/sec/information/secmain_info.jpg) no-repeat center top; background-size: cover;} /* contentsTitle ----------------------------------------------------------- */ #contentsTitle { background-color: #ecf1f6;} #contentsTitle .inner { padding: 60px 20px; box-sizing: border-box;} #contentsTitle .sechead { float: left; display: inline-block; border-right: #115fad 4px solid; padding-right: 26px; margin-right: 26px;} #contentsTitle .sechead h2 { color: #333c4e; font-weight: bold; line-height: 1; padding-bottom: 5px;} #contentsTitle .sechead span { color: #9e9e9e;} /* menuMainBlock ----------------------------------------------------------- */ .menuMainBlock ul { padding: 86px 0 0 0;} .menuMainBlock ul li { float: left; width: 500px; margin-right: 30px; padding: 0 0 40px 0;} .menuMainBlock ul li:nth-child(2n) { margin-right: 0;} .menuMainBlock a .img { position: relative; top: 0; left: 0; display: block; height: 352px;} .menuMainBlock a .img h3 { position: absolute; top: 42px; left: 42px; z-index: 2; width: auto; color: #333c4e; background-color:rgba(255,255,255,0.8); padding: 9px 24px; border-bottom: 2px solid #333c4e; font-size: 20px; } .menuMainBlock a .img:after { content: ""; position: absolute; bottom: -26px; right: 10px; display: block; width: 53px; height: 53px; background: url(../../img/sec/icon_arrow_circle_r.png) no-repeat left top; background-size: cover;} .menuMainBlock a p { color: #333c4e; padding: 16px 0 0 0; width: 440px; box-sizing: border-box;} /* menuSubBlock ----------------------------------------------------------- */ .menuSubBlock { background-color: #f9f9f9; padding: 40px 0 5px 0;} .menuSubBlock ul li a { float: left; width: 500px; margin-right: 30px; margin-bottom: 30px; padding: 20px 40px 20px 32px; border: #333c4e 1px solid; box-sizing: border-box; background-color: #fff; display: block;} .menuSubBlock ul li:nth-child(2n) a { margin-right: 0;} .menuSubBlock ul li a span { background: url(../../img/union/icon_navy_m.png) no-repeat right center; display: block;} .menuSubBlock ul li a { color: #333c4e; font-weight: bold;} .menuSubBlock ul li a:hover { text-decoration: none;} /* navBlock ----------------------------------------------------------- */ .navBlock .inner { padding: 57px 0 0 0; box-sizing: border-box;} .navBlock ul li a { float: left; width: 495px; height: 113px; box-sizing: border-box; margin-right: 10px; margin-bottom: 30px; border: #333c4e 2px solid; color: #333c4e; background-color: #fff; position: relative; background: url(../../img/union/icon_navy_l.png) no-repeat 544px center;} .navBlock ul li:nth-child(2n) a { margin-right: 0;} .navBlock ul li img { float: left;} .navBlock ul li span { line-height: 1.5; font-weight: bold; position: absolute; width: 44%; top: 50%; left: 52%; transform: translateY(-50%) translateX(0%); } /* 共通用 ----------------------------------------------------------- */ .contentsTitleL { font-size:24px; color:#333c4e; font-weight:normal; margin:0 0 1em;} .contentsTitleM { font-size:24px; color:#333c4e; font-weight:bold; margin:0 0 64px; padding:0 0 10px; position:relative;} .contentsTitleM:after { background-color: #115fad; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 80px; z-index: 2;} .contentsTitleS { font-size:20px; color:#333c4e; font-weight:bold; margin:0 0 2em; padding-left:1em; border-left:2px solid #115fad; line-height:1;} .innermin{ max-width:1030px; width:98%; margin:0 auto; margin-bottom: 70px; } .imageList{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0; margin:0 0 6em; } .imageList li{width:48%;} .secContent .btn a { width: auto; margin:0 auto 5em; padding: 20px 40px 20px 32px; border: #333c4e 1px solid; box-sizing: border-box; background-color: #fff; display: block;} .secContent .btn a span { background: url(../../img/union/icon_navy_m.png) no-repeat right center; display: block;} .secContent .btn a { color: #333c4e; font-weight: bold;} .secContent .btn a:hover { text-decoration: none; opacity:0.7;} .colum2 { margin-bottom: 60px;} .colum2 .left { float: left; margin-right: 30px; width: 320px;} .colum2 .left img {} .colum2 .right { float: left; width: 680px; } .colum2 .right h3 { font-size: 20px; margin-bottom: 20px;} .colum2 .right p {} .colum3 { margin-bottom:60px; } .colum3 ul {} .colum3 ul li { float: left; margin-right: 20px; } .colum3 ul li:nth-child(3n) { margin-right: 0px; } table{width:100%; border-top:1px solid #CCC; border-spacing: 0;} table th{ width:24%; background:#f0f3f5; padding:0.8em 1em; border-bottom:1px solid #CCC;} table td{ width:76%; padding:0.8em 1em; border-bottom:1px solid #CCC;} .alignright{float:right;margin-left:3%;margin-bottom:7%; } .alignleft{ float: left;margin-right:3%;margin-bottom:7%;} .aligncenter{margin:0 auto;display:block;text-align:center;} .clr { clear: both; } .wp-pagenavi { margin-top: 80px; text-align: center; } .wp-pagenavi a, .wp-pagenavi span { padding: 13px 15px!important; background-color: #EEE; border:none!important;} .widthauto td { width:auto!important; } .otherMainCont { padding: 36px 0 0 0;} /* 下層ページ company ----------------------------------------------------------- */ .menuMainBlock a .img .companyMenu01 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/company/company01.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .companyMenu02 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/company/company02.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .companyMenu03 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/company/company03_2.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .companyMenu04 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/company/company04_20221101.jpg) no-repeat left top; background-size: cover;} /* 下層ページ greeting ----------------------------------------------------------- */ .greetingMainCont { padding: 86px 0 0 0;} .greetingMainCont .txt { float:left; width:500px;} .greetingMainCont .img { float:right; width:500px;} .greetingMainCont p{margin:0 0 2em;font-size:16px;} /* 下層ページ policy ----------------------------------------------------------- */ .policyMainCont { padding: 86px 0 0 0;} .policyMainCont p{margin:0 0 3em; font-size:16px;} .policyMainCont ul{ margin:0 0 4em;} .policyMainCont ul li{padding-left: 1em; text-indent: -1em; font-size:16px;} /* 下層ページ philosophy ----------------------------------------------------------- */ .philosophyMainCont { padding: 86px 0 0 0;} .philosophyMainCont p{margin:0 0 3em; font-size:16px;} .philosophyMainCont ul{ margin:0 0 4em;} .philosophyMainCont ul li{padding-left: 1em; text-indent: -1em; font-size:16px;} .philosophyMainCont dl{display:table;} .philosophyMainCont dt{display:table-cell; font-weight:bold; font-size:20px; padding-right:1em;} .philosophyMainCont dd{display:table-cell; font-size:16px; vertical-align:middle;} .philosophyMainCont dl:last-child{ margin:0 0 4em;} /* 下層ページ history ----------------------------------------------------------- */ .historyMainCont { padding: 86px 0 0 0;} .historyMainCont table{width:100%; border-top:1px solid #CCC; border-spacing: 0;} .historyMainCont table th{ width:24%; background:#f0f3f5; padding:0.8em 1em; border-bottom:1px solid #CCC;} .historyMainCont table td{ width:76%; padding:0.8em 1em; border-bottom:1px solid #CCC;} /* 下層ページ companyinfo ----------------------------------------------------------- */ .companyinfoMainCont { padding: 86px 0 0 0;} .companyinfoMainCont table{ width:100%; border-top:1px solid #CCC; border-spacing: 0; margin-bottom: 80px; } .companyinfoMainCont table th{ width:24%; background:#f0f3f5; padding:0.8em 1em; border-bottom:1px solid #CCC;} .companyinfoMainCont table td{ width:76%; padding:0.8em 1em; border-bottom:1px solid #CCC;} .companyinfoMainCont table td span.name{font-weight:bold;} .companyinfoMainCont table td span.name{font-weight:bold; margin-top:20px; display:block;} .companyinfoMainCont table td span.name:first-child{margin-top:0;} /* 下層ページ organization ----------------------------------------------------------- */ .organizationMainCont { padding: 86px 0 0 0;} .organizationMainCont .comments{text-align:right;} /* 下層ページ business ----------------------------------------------------------- */ .menuMainBlock a .img .businessMenu01 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/business/business01_2.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .businessMenu02 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/business/business02_2.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .businessMenu03 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/business/business03_3.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .businessMenu04 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/business/business04.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .businessMenu05 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/business/business05_20221101.jpg) no-repeat left top; background-size: cover;} /* 下層ページ power ----------------------------------------------------------- */ .powerMainCont { padding: 86px 0 0 0;} .powerMainCont p{margin:0 0 3em; font-size:16px;} .powerMainCont p.link{margin:0 0 1em;} .powerMainCont_box{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0; margin:0 0 4em; } .powerMainCont_inner{width:48%;} /* 下層ページ indoor ----------------------------------------------------------- */ .indoorMainCont { padding: 86px 0 0 0;} .indoorMainCont p{margin:0 0 3em; font-size:16px;} .indoorMainCont p.link{margin:0 0 1em;} /* 下層ページ support ----------------------------------------------------------- */ .supportMainCont { padding: 86px 0 0 0;} .supportMainCont p{margin:0 0 3em; font-size:16px;} .supportMainCont p.link{margin:0 0 1em;} .supportMainCont .btn a { width: 500px; margin:0 auto 5em; padding: 20px 40px 20px 32px; border: #333c4e 1px solid; box-sizing: border-box; background-color: #fff; display: block;} .supportMainCont .btn a span { background: url(../../img/union/icon_navy_m.png) no-repeat right center; display: block;} .supportMainCont .btn a { color: #333c4e; font-weight: bold;} .supportMainCont .btn a:hover { text-decoration: none; opacity:0.7;} /* 下層ページ solution ----------------------------------------------------------- */ .solutionMainCont { padding: 86px 0 0 0;} .solutionMainCont p{margin:0 0 3em; font-size:16px;} .solutionMainCont p.link{margin:0 0 1em;} /* 下層ページ manage ----------------------------------------------------------- */ .manageMainCont { padding: 86px 0 0 0;} .manageMainCont p{margin:0 0 3em; font-size:16px;} /* 下層ページ workslist ----------------------------------------------------------- */ .worksMainCont { padding: 86px 0 0 0; } .worksMainCont .inner { margin-bottom: 40px; } .worksMainCont .inner ul {} .worksMainCont .inner ul li { width: 31.333%; float: left; margin-right: 3%; margin-bottom: 70px;} .worksMainCont .inner ul li:nth-child(3n) { margin-right: 0; } .worksMainCont .inner ul li img {} .worksMainCont .inner ul li h3 { margin-top: 20px; margin-bottom: 10px; } .worksMainCont .inner ul li div.info {} .worksMainCont .inner ul li div.info table { width: 100%; border-spacing: 0; } .worksMainCont .inner ul li div.info table tbody {} .worksMainCont .inner ul li div.info table tbody tr { } .worksMainCont .inner ul li div.info table tbody tr th { border-bottom: 1px solid #CCC; padding: 8px 10px; } .worksMainCont .inner ul li div.info table tbody tr td { border-bottom: 1px solid #CCC; padding: 8px 10px; } /* 下層ページ recruit ----------------------------------------------------------- */ .menuMainBlock a .img .recruitMenu01 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/recruit/recruit01_2.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .recruitMenu02 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/recruit/recruit02_03.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .recruitMenu03 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/recruit/recruit03.jpg) no-repeat left top; background-size: cover;} .menuMainBlock a .img .recruitMenu04 { position: absolute; top: 0; left: 0; width: 500px; height: 352px; background: url(../../img/sec/recruit/recruit04.jpg) no-repeat left top; background-size: cover;} #recruit .menuMainBlock a .img h3 { position: absolute; top: 42px; left: 42px; z-index: 2; width: auto; color: #333c4e; padding: 10px 20px;} .recruitMainCont { padding: 86px 0 0 0;} .recruitMainCont table{ width:100%; border-top:1px solid #CCC; border-spacing: 0; margin-bottom: 60px; border-collapse: collapse; } .recruitMainCont table th{ width:24%; background:#f0f3f5; padding:0.8em 1em; border-bottom:1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #CCC;} .recruitMainCont table td{ width:76%; padding:0.8em 1em; border-bottom:1px solid #CCC;border-left: 1px solid #CCC; border-right: 1px solid #CCC;} .recruitMainCont p { margin:0 0 3em; font-size:16px; } /* 下層ページ information ----------------------------------------------------------- */ #infomation img { display: inline; width: auto; height: auto; } .infoMainCont { padding: 86px 0 0 0;} .infoMainCont h3 { margin-bottom: 30px; font-size: 18px;} .infoMainCont p {margin:0 0 3em; font-size:16px; line-height: 2.0; } .infoMainCont ul, .infoMainCont ol { margin:0 0 4em;} .infoMainCont ul li, .infoMainCont ol li { font-size: 16px; list-style-type: disc; margin-left: 20px; margin-bottom: 8px;} .infoMainCont ol li { list-style-type: inherit; } .infoMainCont dl { display:table;} .infoMainCont dt { display:table-cell; font-weight:bold; font-size:20px; padding-right:1em;} .infoMainCont dd { display:table-cell; font-size:16px; vertical-align:middle;} .infoMainCont dl:last-child{ /*margin:0 0 4em;*/} .infoList a { color: #333c4e;} .infoList a dl { border-bottom: #cecece 1px solid; padding: 23px 0 21px 0; width: 100%; } .infoList a dl:first-child { /*border-top: #cecece 1px solid; */} .infoList a dl:hover { background-color: #f6f6f6;} .infoList a dl dt { width: 145px;} .infoList a dl dt span.date { width: 130px; display: inline-block; font-size: 16px;} .infoList a dl dt span.category { width: 115px; display: inline-block; padding: 3px 0; box-sizing: border-box; background-color: #e9e9e9; text-align: center; border-radius: 8px;} .infoList a dl dd { margin-left: 300px; margin-right: 16px; padding-right: 30px; box-sizing: border-box; background: url(../../img/union/icon_gray_s.png) no-repeat right center;} .infoList a dl:before, .infoList a dl:after{ display: table; content: ''; } .infoList a dl:after{ clear: both; } .prev, .next{ margin:8% 0; } .prev{ float: left; } .next{ float: right; } .prev a, .next a{padding:15px;color: #FFF;font-size: 12px; font-size: 1.4rem;font-weight:bold;border-radius: 5px;text-decoration: none;text-align: center;display:inline-block;background-color:#343d4f;} .prev a:hover, .next a:hover{background-color: #8992a5; color: #FFF;filter: alpha(opacity=100);-webkit-opacity: 1.0;-moz-opacity: 1.0;opacity: 1.0;} /* mainImg ----------------------------------------------------------- */ /* #mainImg { height: 890px; position: relative !important; top: 82px; left: 0; text-align: center;} */ #mainImg { width: auto; height: 500px; overflow: hidden; margin: 0; padding: 0; /*z-index: 99999;*/ position: relative !important; /*top: 82px; left: 0;*/ text-align: center; } #tubular-shield { z-index: 9000 !important; position: absolute; top: 0; left: 0; /*background-color: rgba( 74, 109, 109, 0.8 ) !important;*/ background: url(../../img/top/img_transmission.png) repeat left top !important;} .mainImgInner { z-index: 9999 !important; position: relative; top: 0; left: 0; color: #fff; width: 100%; height: 100%;} #mainImg .txt { z-index: 9999 !important; position: absolute; top: 33%; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 100%; } #mainImg .txt p.jp { font-weight: bold; letter-spacing: 0.3em; padding-bottom: 30px; margin-bottom: 30px; line-height: 1.7;} #mainImg .txt p.jp:after { content: ""; width: 430px; margin: 0 auto; border-bottom: #fff 1px solid; display: block; position: relative; bottom: -30px;} #mainImg .txt p.en { line-height: 1.3;} #mainImg .btn { z-index: 9999 !important; position: absolute; top: 86%; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 100%; } #mainImg .btn li { display: inline;} #mainImg .btn li a { color: #fff; line-height: 1.2;} #mainImg .btn li a:hover { text-decoration: none;} #mainImg .btn li a:after { content: ""; float: right; display: inline-block; width: 29px; height: 16px; background: url(../../img/union/icon_white_m.png) no-repeat right center;} #mainImg .btn li.blue a { display: inline-block; width: 200px; padding: 20px 34px; border-radius: 5px; margin: 0 13px; box-sizing: border-box; background-color: #115fad; border:none;} #mainImg .btn li.red a { display: inline-block; width: 200px; padding: 20px 34px; border-radius: 5px; margin: 0 13px; box-sizing: border-box; background-color: #e50065; border:none;} /* head ----------------------------------------------------------- */ .secContent .head { text-align: center; position: relative; top: -53px;} .secContent .head span { line-height: 1; font-weight: bold; letter-spacing: 0.1em; display: inline-block; padding-bottom: 10px;} .secContent .head h2 { font-weight: bold;} #messageCont .head span { color: #0f58a6;} #messageCont .head h2, #personCont .head h2 { color: #fff;} #infoCont .head h2 { color: #333c4e; } /* introductionCont ----------------------------------------------------------- */ #introductionCont { padding: 110px 0 140px 0; text-align: center;} #introductionCont h2 { padding-bottom: 40px; letter-spacing: 0.3em;} #introductionCont .txt p { line-height: 2.6;} /* messageCont ----------------------------------------------------------- */ #messageCont { min-height: 520px; margin-bottom: 260px; position: relative;} #messageCont:before { content: ""; position: absolute; top: 0; display: block; height: 520px; width: 100%; background: #115fad url(../../img/top/bg_message.jpg) no-repeat center top; background-size: cover;} #messageCont .column2 { position: absolute; top: 70px; padding: 0 35px;} #messageCont .column2 .img { float: right; width: 40%; z-index: 1;} #messageCont .column2 .txt { float: left; width: 540px; color: #fff;} #messageCont .column2 h3 { font-weight: bold; padding-bottom: 20px; margin-bottom: 25px;} #messageCont .column2 h3:after { content: ""; width: 53px; border-bottom: #fabe00 2px solid; display: block; position: relative; bottom: -20px; left: 3px;} #messageCont .column2 .txt p { padding-bottom: 25px; line-height: 2;} /* btn */ #messageCont .column2 .txt .btn a { display: inline-block; width: 226px; padding: 20px 34px; margin-top: 25px; box-sizing: border-box; background-color: #fbca31; line-height: 1; font-weight: bold; color: #333c4e; border:none;} #messageCont .column2 .txt .btn a:hover { text-decoration: none;} #messageCont .column2 .txt .btn a:after { content: ""; float: right; display: inline-block; width: 20px; height: 16px; background: url(../../img/union/icon_navy_m.png) no-repeat right center;} /* movieCont ----------------------------------------------------------- */ #movieCont { min-height: 675px; margin-bottom: 255px; position: relative;} #movieCont:before { content: ""; position: absolute; top: 0; display: block; height: 675px; width: 100%; background: #ecf1f6 url(../../img/top/bg_movie_2.jpg) no-repeat center top; background-size: cover;} #movieCont .video { position:relative; width:100%; padding-top:56.25%; box-sizing: border-box;} #movieCont .video iframe { position:absolute; top:0; right:0; width:100%; height:100%; } /* aboutCont ----------------------------------------------------------- */ #aboutCont { background-color: #f9f9f9;} .aboutList .column3 li { float: left; width: 345px; margin-right: 30px; margin-bottom: 36px; min-height: 490px;} .aboutList .column3 li:last-child { margin-right: 0px;} .aboutList .column3 li span.img, .aboutList .column1 li span.img { margin-bottom: 30px; display: block;} .aboutList .column3 li span.img img, .aboutList .column1 li span.img img { margin: 0 auto;} .aboutList .column3 li span.txt, .aboutList .column1 li span.txt { text-align: center; display: inline-block; width: 100%;} .aboutList .column3 li span.txt h3, .aboutList .column1 li span.txt h3 { font-weight: bold; display: inline-block; padding-bottom: 15px;} .aboutList .column1 { padding-bottom: 80px;} /* bottomNavCont ----------------------------------------------------------- */ #bottomNavCont { background-color: #e1ecf7; padding: 100px 0; position: relative; z-index: 0 !important;} #bottomNavCont h2 { display: block; border-bottom: 2px solid #333333; padding-bottom: 5px; margin: 0px auto 80px; text-align: center; font-size: 34px; width: 80%; } .btnListLarge ul.column2 { display: flex; gap:30px;} .btnListLarge .column2 li { width: 100%; } .btnListLarge .column2 li a { display: block; width: 100%; height: 380px; color: #fff;} .btnListLarge .column2 li a:hover { text-decoration: none;} .btnListLarge .column2 li .txt { padding: 150px 0 0 30px;} .btnListLarge .column2 li span { font-weight: bold; letter-spacing: 0.1em; line-height: 1.2;} .btnListLarge .column2 li h3 { font-weight: bold; letter-spacing: 0.15em; line-height: 1.3;} .btnListLarge .column2 li.list01 a { background: url(../../img/top/bg_company.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column2 li.list02 a { background: url(../../img/top/bg_business.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li { float: left; width: 353px; margin-right: 20px; margin-bottom: 58px;} .btnListLarge .column3 li:last-child { margin-right: 0px;} .btnListLarge .column3 li.list01 a { background: url(../../img/top/bg_occupation_2.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li.list02 a { background: url(../../img/top/bg_flow_2.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li.list03 a { background: url(../../img/top/bg_training_2.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li.list04 a { background: url(../../img/top/bg_history.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li.list05 a { background: url(../../img/top/bg_office.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li.list06 a { background: url(../../img/top/bg_allbranches.jpg) no-repeat left top; background-size: cover;} .btnListLarge .column3 li a { display: block; width: 100%; height: 235px; color: #fff;} .btnListLarge .column3 li a:hover { text-decoration: none;} .btnListLarge .column3 li .txt { padding: 80px 0 0 30px;} .btnListLarge .column3 li span { font-weight: bold; letter-spacing: 0.1em; line-height: 1.2;} .btnListLarge .column3 li h3 { font-weight: bold; letter-spacing: 0.15em; line-height: 1.3;} .btnListSmall .column4 li a { color: #333c4e; float: left; display: block; width: 250px; height: 144px; margin-right: 30px; border: #333c4e 2px solid; background: #fff url(../../img/union/icon_navy_m.png) no-repeat 227px 63px; box-sizing: border-box;} .btnListSmall .column4 li:last-child a { margin-right: 0px;} .btnListSmall .column4 li a:hover { text-decoration: none;} .btnListSmall .column4 li .txt { padding: 45px 0 0 30px;} .btnListSmall .column4 li span { font-weight: bold; letter-spacing: 0.1em; line-height: 1.2;} .btnListSmall .column4 li h3 { font-weight: bold; letter-spacing: 0.15em; line-height: 1.3;} .btnList2 { width: 1100px; margin-bottom: 58px; } .btnList2 .column2 {display: flex;justify-content: space-between;} .btnList2 .column2 li { border: 2px solid #333333; width: 100%; margin-right: 30px; background-color: #FFFFFF;} .btnList2 .column2 li:last-child { margin-right: 0px;} .btnList2 .column2 li a { display: block; color: #333333; text-decoration: none; padding: 30px; } .btnList2 .column2 li a .txt {} .btnList2 .column2 li a .txt span {font-weight: bold;font-size: 16px;} .btnList2 .column2 li a .txt h3 {font-size: 28px;letter-spacing: 0.15em; line-height: 1.3;} /* tab */ .tab-area { max-width: 1240px; margin:0 auto 30px; display: flex; justify-content: space-around; cursor: pointer; border-bottom: #c7c7c7 1px solid;} .tab-area .tab { width: 100%; text-align: center; box-sizing: border-box; background-color: #def2ff; font-size: 18px; font-weight: bold; margin:0 3px;} .tab-area .tab span { display: block; padding: 12px 0 10px;} .tab-area .tab span.icon {} .tab-area .tab span.icon img { display: inline; text-align: center; } .tab-area .tab.active { background-color: #aadaf8; } .tab-area .tab.active:after { content: ""; display: block; height: 4px; background-color: #266db4;} .content-area { max-width: 1240px; margin:55px auto 55px; } .content-area .content { display: none; padding: 0 0 20px 0;} .content-area .content.show { display: block;} .content-area img { width: 100%; height: auto; } .content-area ul.m30 { margin-bottom: 30px; } .content-area .imageList li:last-child img { width: 85%; height: auto; } /* --------------------------------------------------------------------------------------------------------------------- 社員紹介 person --------------------------------------------------------------------------------------------------------------------- */ .sec_personCont { width: 970px; margin:0 auto; padding: 60px 0 80px;} .person { min-height: 508px; background-color: #fff; margin-bottom: 60px !important;} .person:nth-child(odd) .img { float: left; width: 50%;} .person:nth-child(odd) .txt { float:right; width: 50%;} .person:nth-child(even) .img { float:right; width: 50%;} .person:nth-child(even) .txt { float: left; width: 50%;} .person .txt .name { min-height: 150px; background-color: #115fad; color: #fff; text-align: center; padding-top: 40px; box-sizing: border-box;} .person .txt .name span { line-height: 1.3;} .person .txt .name h3 { font-weight: bold;} .person .txt p { padding: 30px 45px 20px 45px; line-height: 2.2; margin-bottom: 0;} .bg_triangle_blue { background: #eef6ff url(../../img/sec/bg_triangle_blue.png) no-repeat right top;} .secContent .head span { font-size: 48px;} .btnListLarge .column2 li h3, #mainImg .txt p.jp { font-size: 30px;} .btnListLarge .column3 li h3, .person .txt .name h3 { font-size: 28px;} #introductionCont h2 { font-size: 26px;} #messageCont .column2 h3 { font-size: 24px;} #mainImg .txt p.en, .person .txt .name span, .btnListLarge .column2 li span { font-size: 20px;} #introductionCont .txt p, .secContent .head h2, .btnListLarge .column3 li span { font-size: 18px;} #messageCont .column2 .txt p { font-size: 16px;} .person .txt p { font-size: 15px;} .btnListSmall .column4 li span { font-size: 12px;} /* 下層ページ contact ----------------------------------------------------------- */ .formCont { margin-top: 90px; } .input-field {} ::-webkit-input-placeholder { color: #555; } :-moz-placeholder { /* Firefox 18- */ color: #555; } ::-moz-placeholder { /* Firefox 19+ */ color: #555; } :-ms-input-placeholder { color: #555; } input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { border: none; border-radius: 0; height: 4rem; width: 100%; margin: 0 0 15px 0; padding: 0; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s; background-color: transparent; border-bottom: 1px solid #9e9e9e; outline: none; } input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=email]:disabled, input[type=email][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] { color: #CCC; border-bottom: 1px dotted #CCC; } input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=email]:disabled + label, input[type=email][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label { color: #CCC; } input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #e51565; box-shadow: 0 1px 0 0 #e51565; } input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label { color: #0e366d; } input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=email].valid, input[type=email]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid { border-bottom: 1px solid #4CAF50; box-shadow: 0 1px 0 0 #4CAF50; } input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=email].valid + label:after, input[type=email]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after { content: attr(data-success); color: #4CAF50; opacity: 1; } input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=email]:focus.invalid, input[type=url].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid { border-bottom: 1px solid #F44336; box-shadow: 0 1px 0 0 #F44336; } input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=email].invalid + label:after, input[type=email]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after { content: attr(data-error); color: #F44336; opacity: 1; } input[type=text] + label:after, input[type=password] + label:after, input[type=email] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after, textarea.materialize-textarea + label:after { display: block; content: ""; position: absolute; top: 65px; opacity: 0; transition: .2s opacity ease-out, .2s color ease-out; } input[type="submit"] { padding: 14px 16px;margin-top: 20px;color: #FFF; background-color: #0e366d; width: 20%; border: none; } .input-field { position: relative; margin-bottom: 3em; margin-top: 3em; } .input-field label { color: #333; position: absolute; left: 0rem; cursor: text; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; -o-transition: .2s ease-out; -ms-transition: .2s ease-out; transition: .2s ease-out; top: -3rem; } .input-field label.active { font-size: 0.8rem; -webkit-transform: translateY(-140%); -moz-transform: translateY(-140%); -ms-transform: translateY(-140%); -o-transform: translateY(-140%); transform: translateY(-140%); } .input-field .prefix { position: absolute; width: 3rem; font-size: 2rem; -webkit-transition: color .2s; -moz-transition: color .2s; -o-transition: color .2s; -ms-transition: color .2s; transition: color .2s; } .input-field .prefix.active { color: #26a69a; } .input-field .prefix ~ input, .input-field .prefix ~ textarea { margin-left: 3rem; width: 92%; width: calc(100% - 3rem); } .input-field .prefix ~ textarea { padding-top: .8rem; } .input-field .prefix ~ label { margin-left: 3rem; } .input-field input[type=search] { display: block; line-height: inherit; padding-left: 4rem; width: calc(100% - 4rem); } .input-field input[type=search]:focus { background-color: #fff; border: 0; box-shadow: none; color: #444; } .input-field input[type=search]:focus + label i, .input-field input[type=search]:focus ~ .mdi-navigation-close, .input-field input[type=search]:focus ~ .material-icons { color: #444; } .input-field input[type=search] + label { left: 1rem; } .input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons { position: absolute; top: 0; right: 1rem; color: transparent; cursor: pointer; font-size: 2rem; transition: .3s color; } textarea { width: 100%; height: 3rem; background-color: transparent; } textarea.materialize-textarea { overflow-y: hidden; /* prevents scroll bar flash */ padding: 1.6rem 0; /* prevents text jump on Enter keypress */ min-height: 3rem; } /* font ----------------------------------------------------------- */ /* basic font-size: 14px; */ #secMainImg h1 { font-size: 30px;} #contentsTitle h2 { font-size: 28px;} .menuMainBlock h3 { font-size: 24px;} .navBlock ul li span, .menuMainBlock p, .menuSubBlock ul li, h4 { font-size: 16px;} #contentsTitle .sechead span { font-size: 14px;} #breadcrumb li { font-size: 12px;} body { width: 1100px!important; transform: scale(0.9)!important; margin: auto; } header { width: inherit!important; }