/* ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥ Reset ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥ */ /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } *, *::before, *::after { box-sizing: border-box; } /* £££££££££££££££££££££££££ Reset £££££££££££££££££££££££££ */ /* ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥ Style ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥ */ body { font-family: 'Roboto', "Noto Sans JP", 'Hiragino Kaku Gothic Pro','ƒqƒ‰ƒMƒmŠpƒS Pro W3','ƒƒCƒŠƒI',Meiryo,'‚l‚r ‚oƒSƒVƒbƒN',sans-serif; font-size: 16px; line-height: 1.6; color: #333; } ul { list-style: none; } a, a img { text-decoration: none; transition: 0.4s; } a.op:hover, a.op:hover img { opacity: 0.8; } a.uline:hover { color: #3abbb9 !important; text-decoration: underline; } .facebook a:hover { text-decoration: none; } .youtube a:hover { text-decoration: none; } .pc-none { display: none !important; } .sp-none { display: block !important; } /*head-info*/ #head-info { position: relative; display: block; width: 100%; height: 60px; background: #9d2328; z-index: 4; text-decoration-color: #fff; } #head-info dl { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; width: 90%; max-width: 1155px; height: 100%; color: #fff; } #head-info dt { position: relative; /* width: 15%; min-width: 150px; */ font-size: 46px; line-height: 1; } #head-info dl dd:first-of-type { display: flex; align-items: center; margin-left: 40px; width: 70%; height: 100%; font-weight: bold; } #head-info:hover dl dd:first-of-type { text-decoration: underline; } #head-info dl .more { display: flex; justify-content: center; align-items: center; width: 230px; height: 40px; color: #fff; font-size: 14px; font-weight: 700; border: 2px solid #fff; border-radius: 20px; transition: all 0.3s; } #head-info:hover dl .more { color: #9d2328; background: #fff; text-decoration: underline; text-decoration-color: #9d2328; } #head-info .hi-year, #head-info .hi-wday { font-size: 14px; } #head-info .hi-year { vertical-align: top; } #head-info .hi-wday { display: block; position: absolute; right: -25px; bottom: 10px; transform: rotate(90deg); } #head-info .hi-logo { display: flex; align-items: center; margin-right: 10px; } #head-info .hi-logo img { width: 40px; } /*header*/ header { position: relative; display: flex; justify-content: flex-end; align-items: center; position: relative; width: 100%; height: 47px; background: #fff; z-index: 4; } header h1 { position: absolute; /*top: 0;*/ top: 47px; left: 0; width: 200px; height: 130px; font-size: 12px; font-weight: normal; text-align: center; background: #3abbb9; z-index: 2; transition: all 0.3s; } header h1.on { display: none; } header h1 a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 16px; } header h1 img { /*width: 80%;*/ width: 70%; } header .company { align-items: center; margin-right: 20px; } header .company a { position: relative; color: #3abbb9; font-size: 18px; font-weight: bold; } header .lang { display: flex; align-items: center; margin-right: 20px; } header .lang a { position: relative; color: #3abbb9; font-size: 18px; font-weight: bold; } header .lang a:first-of-type { margin-right: 15px; } header .lang a:first-of-type::after { position: absolute; top: 4px; right: -8px; width: 2px; height: 1.2em; background: #3abbb9; content: ''; } header .twi a, header .search span, header .facebook a, header .youtube a { display: flex; justify-content: center; align-items: center; width: 45px; height: 47px; } header .searchlink { background: url(../img/common/search.png) no-repeat center center / 24px auto; transition: none; } header .searchlink.on { background: url(../img/common/close_g.png) #f1f3f3 no-repeat center center / 18px auto; } header .twi img { display: block; width: 26px; } header .facebook i { display: block; color: #3abbb9; font-size: 23px; } header .youtube i { display: block; color: #3abbb9; font-size: 23px; } .searchbox { display: none; position: absolute; bottom: -60px; right: 0; width: 70%; max-width: 730px; height: 60px; background: #f1f3f3; z-index: 2; } .searchbox.is-sp { bottom: inherit; } .searchbox-inner { display: flex; align-items: center; padding: 0 40px; width: 100%; height: 100%; box-sizing: border-box; } .searchbox-inner input { width: 500px; height: 40px; font-size: 14px; border: none; background: transparent; } .searchbox-inner input:focus{ outline: none; } .searchbox-inner input::placeholder, .searchbox-inner input:-ms-input-placeholder, .searchbox-inner input::-ms-input-placeholder { color: #999; } .searchbox-inner button { display: inline-flex; justify-content: center; align-items: center; width: 140px; height: 40px; color: #666; font-size: 14px; font-weight: bold; background: transparent; border: 2px solid #666; border-radius: 20px; cursor: pointer; } .searchbox-inner button img { margin-right: 10px; width: 14px; } #menubtn { position: relative; margin-right: 25px; width: 60px; height: 60px; cursor: pointer; z-index: 99; } #menubtn span { display: block; position: absolute; left: 50%; width: 26px; height: 3px; background: #3abbb9; transform: translateX(-50%); z-index: 4; transition: 0.6s; } #menubtn span:first-of-type { top: 23px; } #menubtn span:last-of-type { top: 33px; } #menubtn.on span { top: 50%; background: #fff; } #menubtn.on span:first-of-type { transform: translate(-50%,-50%) rotate(45deg); } #menubtn.on span:last-of-type { transform: translate(-50%,-50%) rotate(-45deg); } #menuinner { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 3; } #menuinner ul { padding: 0 10%; width: 100%; background: #3dc4c2; } #menuinner li { display: table-cell; width: 20vw; height: 60px; vertical-align: top; } #menuinner li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-weight: bold; } #menuinner .parentmenu a:hover, #menuinner .childmenu a:hover, #menuinner .parentmenu li.on > a, #menuinner .childmenu li.on > a { color: #1f8281; } .childmenu, .g-childmenu { border-top: 1px solid #77dbda; } .childmenu { display: none; position: absolute; top: 60px; left: 0; } .childmenu > li > a { height: 60px !important; } #menuinner .childmenu a { border-bottom: 4px solid #3dc4c2; } #menuinner .childmenu a:hover, #menuinner .childmenu li.on > a { border-bottom: 4px solid #fff; } #menuinner .g-childmenu { display: none; position: absolute; top: 60px; left: 0; width: 100%; padding: 30px 10%; background: #3dc4c2; } #menuinner .g-childmenu div { display: flex; justify-content: center; } #menuinner .g-childmenu ul { width: 35%; padding: 0; } #menuinner .g-childmenu li { display: block; /*height: 170px;*/ height: auto; margin-bottom: 10px; } #menuinner .g-childmenu .heading { width: 100%; margin-bottom: 20px; color: #fff; font-weight: bold; } #menuinner .g-childmenu a { justify-content: flex-start; padding: 3px; font-size: 13px; font-weight: normal; border-bottom: none; } .g-childmenu a span { display: flex; align-items: center; width: 100%; } .g-childmenu a img { display: block; margin-right: 10px; height: 15px; } #menuinner .g-childmenu a:hover, #menuinner .g-childmenu li.on > a { color: #fff; background: #1f8281; border-bottom: none; } /* #sp-navigation { display: none; } */ /*mvarea*/ #mvarea { position: relative; background: #f1f3f3; } /*ƒXƒ‰ƒCƒ_[*/ /*.mv-slider { display: block; padding-bottom: 0; height: 100vh; }*/ .mv-slider .swiper-slide img { display: block; width: 100%; } .swiper-slide .mv-image { position: relative; width: 100%; height: 100%; } /* ƒXƒ‰ƒCƒ_[‰æ‘œ */ .swiper-slide .mv01 { background: url('../img/mv/mv01.jpg') no-repeat center/cover; } .swiper-slide .mv02 { background: url('../img/mv/MV23.png') no-repeat center/cover; } .swiper-slide .mv03 { background: url('../img/mv/mv10.jpg') no-repeat center/cover; } .swiper-slide .mv04 { background: url('../img/mv/MV25.png') no-repeat center/cover; } .swiper-slide .mv05 { background: url('../img/mv/mv20.jpg') no-repeat center/cover; } .swiper-slide .mv06 { background: url('../img/mv/MV17.jpg') no-repeat center/cover; } .swiper-slide .mv07 { background: url('../img/mv/MV21.jpg') no-repeat center/cover; } .swiper-slide .mv09 { background: url('../img/mv/MV13.jpg') no-repeat center/cover; } .swiper-slide .mv10 { background: url('../img/mv/MV23.jpg') no-repeat center/cover; } .swiper-slide .mv11 { background: url('../img/mv/MV25.png') no-repeat center/cover; } .swiper-slide .mv01 img.mv01-ttl { position: absolute; top: 33%; left: 50%; width: auto; max-width: 70%; transform: translate(-50%,-50%); } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { left: inherit; right: 10px; bottom: 60%; width: 20px; line-height: 1.2; } .swiper-pagination-bullet-active { background: #3abbb9; } .sp-mv { display: none; } /*”F’莎Œ±*/ #examlist { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(15,49,48,0.2); z-index: 2; margin-top: -6px; } .examlist-inner { overflow: hidden; position: relative; width: 100%; height: 100%; } #examlist h2 { margin: 16px auto; width: 83%; max-width: 1200px; color: #fff; font-size: 19px; } #examlist ul { display: flex; justify-content: space-between; margin: 37px auto 37px; width: 83%; max-width: 1200px; } #examlist li { width: 19%; background: #fff; text-align: center; } #examlist li a { display: block; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: #fff; border: 1px solid #A0ACAC; } #examlist li a p { margin-top: 10px; color: #333; font-size: 14px; } #examlist li img { width: 100%; margin: auto; } #examlist li span { display: none; } .scrolltxt { position: absolute; bottom: 37px; right: 5%; transform: rotate(90deg); transform-origin: bottom right; } .scrolltxt span { display: block; position: relative; padding-left: 85px; color: #fff; font-size: 11.5px; font-weight: bold; } .scrolltxt span::before { position: absolute; top: 50%; left: 0; width: 75px; height: 1px; background: #fff; transform: translateY(-50%); content: ''; } /*Ž‘—¿¿‹Eƒ}ƒCƒy[ƒW*/ .mypagebox { position: fixed; bottom: 0; left: 0; z-index: 3; display: flex; align-items: flex-end; padding-bottom: 10px; } .mypagebox li { writing-mode: vertical-rl; line-height: 1.2; } .mypagebox li:first-of-type { margin-bottom: 20px; } .mypagebox li a { display: block; padding: 25px 15px; background: #fff; color: #3abbb9; font-weight: bold; border-top: 2px solid #3abbb9; border-right: 2px solid #3abbb9; border-bottom: 2px solid #3abbb9; } .mypagebox li a:hover { color: #fff; background: #3abbb9; text-decoration: none; } .btn-area { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 50px; } .btn-area a { display: flex; justify-content: center; align-items: center; max-width: 407px; width: 40%; height: 56px; color: #fff; font-weight: bold; border: 1px solid #3abbb9; background: #3abbb9; border-radius: 28px; } .btn-area a:not(:last-child) { margin-right: 30px; } /*ƒƒCƒ“ƒRƒ“ƒeƒ“ƒc*/ main { overflow: hidden; background: #f1f3f3; } /*ƒoƒi[ƒGƒŠƒA*/ .bnrlist { display: flex; justify-content: space-between; margin: 70px auto; width: 83%; max-width: 1200px; } .bnrlist li { width: 31%; } .bnrlist img { width: 100%; } .bnr-slider { display: none; } .bnr-slider-pc { max-width: 1300px; margin: 70px auto; padding: 0 50px; } .bnr-slider-pc img { width: 100%; } .bnr-slider .swiper-button-next, .bnr-slider .swiper-button-prev { background-size: 7px 14px; } .bnr-slider-pc .swiper-button-next { right: 0; background: url(../img/common/next_arrow.png) no-repeat center/15px; } .bnr-slider-pc .swiper-button-prev { left: 0; background: url(../img/common/prev_arrow.png) no-repeat center/15px; } /*ƒRƒ“ƒZƒvƒg*/ #concept { margin: 0 auto 110px; width: 93%; background: #fff; } .concept-inner { display: flex; justify-content: space-between; align-items: center; padding: 145px 0 110px; margin: 0 auto; width: 83%; max-width: 1200px; } .concept-inner div { width: 48%; } #concept h2 { color: #3abbb9; font-size: 64px; font-weight: 900; line-height: 1.2; } #concept h2 + p { position: relative; margin: 30px 0 50px 120px; color: #3abbb9; font-size: 22px; } #concept h2 + p::before { display: block; position: absolute; top: 50%; left: -120px; width: 110px; height: 1px; background: #3abbb9; transform: translateY(-50%); content: ''; } #concept a { display: flex; justify-content: center; align-items: center; max-width: 407px; height: 56px; color: #fff; font-weight: bold; border: 1px solid #3abbb9; background: #3abbb9; border-radius: 28px; font-size: 16px; } #concept a:hover { color: #3abbb9; background: #fff; } #concept p { font-size: 18px; margin-bottom: 1.2em; } #concept .sp-read-btn { display: none; } /*ƒTƒ|[ƒg*/ #support { position: relative; padding: 126px 0 120px; background: url(../img/support01/support01_mvbg.png) no-repeat top left / 100% auto; } .sup-inner { position: relative; margin: 0 auto; width: 83%; max-width: 1200px; z-index: 1; } .sup-inner h2 { margin-bottom: 60px; font-size: 48px; color: #4c4c4d; line-height: 1.4; } .sup-inner h2 + p { max-width: 640px; font-size: 20px; color: #666; } .sup-inner h3 { padding-bottom: 0.4em; margin-bottom: 28px; color: #040404; font-size: 32px; line-height: 1; border-bottom: 4px solid #3abbb9; } .sup-inner h3 span { margin-right: 0.3em; color: #3abbb9; font-size: 80px; font-weight: 500; vertical-align: middle; } .sup-inner h3 span span { margin-right: 0.6em; font-size: 24px; vertical-align: top; } .sup-inner h3 + p { max-width: 880px; margin-bottom: 40px; color: #666; font-size: 18px; } /*support01*/ .sup01, .sup02, .sup03 { margin-top: 90px; } .sup01 h3 + p { width: 66%; } .sup01 ul { display: flex; justify-content: space-between; } .sup01 li { width: 23%; text-align: center; box-sizing: border-box; } .sup01 li a { display: block; width: 100%; height: 100%; padding: 45px 20px 35px; background: #fff; border: 1px solid #fff; } .sup01 li span { display: block; width: 100%; } .sup01 li img { width: 100%; } .sup01 li h4 { margin: 40px 0; color: #040404; font-size: 20px; } .sup01 li p { color: #666; } .sup01 li h4 + p { height: 3em; font-size: 14px; } .sup01 li h4 + p + p { margin-top: 30px; text-align: left; } .sup01 li a:hover, .sup03 li a:hover { border: 1px solid #3abbb9; box-shadow: 0 0 20px rgba(0,0,0,0.2); } .sup01 li a:hover h4, .sup03 li a:hover h4 { color: #3abbb9; text-decoration: underline; } /*support02*/ /*ƒ^ƒu*/ .tab-group { display: flex; justify-content: center; } .tab { flex-grow: 1; border-top: solid 1px #cfcfcf; border-right: solid 1px #cfcfcf; border-left: solid 1px #cfcfcf; text-align: center; cursor: pointer; } .tab div { padding: 12px 0; width: 100%; height: 100%; border-top: 3px solid #f1f3f3; } .tab:not(:last-of-type) { margin-right: 5px; } .tab img { width: 73%; } .panel-group { padding: 40px 20px; background: #fff; } .panel, .panel2 { display:none; } .tab.is-active { color: #fff; background: #fff; border-top: solid 1px #3abbb9; border-right: solid 1px #fff; border-left: solid 1px #fff; transition: all 0.4s; } .tab.is-active div { border-top: solid 3px #3abbb9; transition: all 0.4s; } .panel.is-show, .panel2.is-show { display: block; } .sup02 h4 { padding: 0 20px 10px; color: #666; font-size: 22px; border-bottom: 1px solid #c0c2c2; } .sup02 .panel ul { display: flex; flex-wrap: wrap; margin-top: 20px; } .sup02 .panel li { display: flex; /* justify-content: space-between; */ align-items: center; padding: 20px; width: 50%; } .sup02 .panel li img { margin-right: 26px; width: 80px; } .sup02 .panel dt a { color: #333; font-size: 18px; font-weight: bold; } .sup02 .panel dd { color: #666; } .sup02 .panel ul + h4 { margin-top: 40px; } .sp-support-list { display: none; } /*support03*/ .sup03 ul { display: flex; flex-wrap: wrap; margin-top: 40px; } .sup03 li { margin-bottom: 20px; width: 49%; } .sup03 li:nth-of-type(odd) { margin-right: 2%; } .sup03 li a, .sup03 li.sup03-ac { display: flex; align-items: flex-start; padding: 30px; background: #fff; border: 1px solid #fff; color: #040404; } .sup03 li img { margin-right: 20px; width: 40%; } .sup03 h4 { margin-bottom: 1.2em; color: #040404; font-size: 18px; } .sup03 h4 + p { color: #666; } .sup03 li.sup03-ac a { display: inline; padding: 0; color: #3abbb9; background: transparent; border: none; } .sup03 li.sup03-ac a:hover { box-shadow: none; } .sup03 li .top-cont { display: flex; align-items: end; } #support .model { position: absolute; top: 0; right: 0; width: 40%; } /*interview*/ #interview { padding: 100px 0; background: #fff; } #interview h2, #ecosystem h2, #sponsor h2 { position: relative; padding-bottom: 30px; margin: 0 0 40px; color: #040404; text-align: center; font-size: 32px; } #interview h2::after, #ecosystem h2::after, #sponsor h2::after { position: absolute; bottom: 0; left: 50%; width: 160px; height: 4px; background: #3abbb9; transform: translateX(-50%); content: ''; } #interview h2 + p, #ecosystem h2 + p { max-width: 980px; margin: 0 auto; color: #666; font-size: 20px; text-align: center; } #interview h3 { margin: 50px 0 40px; color: #666; font-size: 20px; text-align: center; } #interview .interview-pc-list { display: flex; justify-content: space-between; margin: 0 auto; width: 83%; max-width: 1200px; } #interview li { width: 18%; } #interview li img { display: block; width: 100%; } #interview span.genre { display: flex; justify-content: center; align-items: center; width: 80px; height: 25px; color: #fff; font-size: 13px; font-weight: bold; } #interview span.oss { background: #28bb9c; } #interview span.html5 { background: #eb6100; } #interview span.opcel { background: #d73a46; } #interview span.linuc { background: #9d2328; } #interview span.genre + a { display: block; margin: 25px 0 10px; color: #333; font-weight: normal; word-break: break-all; } #interview .int-name { display: block; color: #999; font-size: 14px; } #interview .interview-slider { display: none; } /*ecosystem*/ #ecosystem, #sponsor { padding: 100px 0; } #ecosystem p { text-align: center; } #ecosystem p strong { color: #353535; font-size: 20px; } #ecosystem .eco-more { display: flex; justify-content: center; align-items: center; max-width: 407px; width: 40%; height: 56px; color: #3abbb9; font-size: 16px; font-weight: bold; border: 2px solid #3abbb9; border-radius: 27px; } #ecosystem .eco-more:hover { color: #3abbb9; background: #fff; } #ecosystem .btn-area { width: 83%; max-width: 1200px; margin: 50px auto 0; } #ecosystem .btn-area a { background: #3abbb9; color: #fff; } #ecosystem .btn-area a::not(:last-child) { margin-right: 30px; } #ecosystem .ecocircle { overflow: hidden; position: relative; margin: 60px auto; width: 100%; height: 675px; background: url(../img/ecosystem/lpi-bg.png) no-repeat center center / 500px auto; } .ecoc-inner { position: absolute; top: 0; left: 50%; width: 1440px; height: 100%; transform: translateX(-50%); } .ecocircle li.eco-spo { position: absolute; top: 0; left: 17.5%; /* width: 375px; */ width: 29%; } .ecocircle li.eco-ac, .ecocircle li.eco-comu { /* width: 350px; */ width: 30%; } .ecocircle li.eco-ac { position: absolute; top: 0; right: 16%; } .ecocircle li.eco-comu { position: absolute; bottom: 24%; right: 12%; } .ecocircle li.eco-ins { position: absolute; top: 66%; left: 22.5%; /* width: 415px; */ width: 35%; } .ecocircle li.eco-biz { position: absolute; bottom: 26%; left: 12%; /* width: 410px; */ width: 30%; } .eco-lpi { position: absolute; top: 45%; left: 50%; width: 333px; /* width: 23%; */ transform: translate(-50%,-50%); z-index: 1; } .ecocircle li.on { z-index: 2; } .ecocircle li.eco-spo.on { background: url(../img/ecosystem/eco_spo_on.png) no-repeat top left / 100% auto; } .ecocircle li.eco-ac.on { background: url(../img/ecosystem/eco_ac_on.png) no-repeat top left / 100% auto; } .ecocircle li.eco-comu.on { background: url(../img/ecosystem/eco_comu_on.png) no-repeat top left / 100% auto; } .ecocircle li.eco-ins.on { background: url(../img/ecosystem/eco_ins_on.png) no-repeat top left / 100% auto; } .ecocircle li.eco-biz.on { background: url(../img/ecosystem/eco_biz_on.png) no-repeat top left / 100% auto; } .ecocircle li img, .eco-lpi img { width: 100%; } .ecocircle li.on img { visibility: hidden; } /*news*/ #newswrap { padding: 100px 0; background: #fff; } #news { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; padding: 0 20px; width: 83%; max-width: 1200px; } #news .main-title { width: 100%; position: relative; padding-bottom: 30px; margin: 0 0 40px; color: #040404; text-align: center; font-size: 32px; } #news .main-title::after { position: absolute; bottom: 0; left: 50%; width: 160px; height: 4px; background: #3abbb9; transform: translateX(-50%); content: ''; } .news-inner { width: 47%; } .news-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; } .news-title h2 { font-size: 20px; } .news-title a { color: #040404; } .tabwrap .more-btn { display: block; margin-top: 20px; padding-right: 15px; background: url("../img/common/right_arrow_blue.png") no-repeat center right/6px; color: #3abbb9; text-align: right; font-size: 16px; font-weight: bold; } /* .news-title a { padding-right: 15px; background: url("../img/common/right_arrow_blue.png") no-repeat center right/6px; color: #3abbb9; font-size: 16px; font-weight: bold; } */ .news-more { display: flex; justify-content: center; align-items: center; max-width: 407px; width: 100%; height: 56px; background: #3abbb9; color: #fff; font-size: 16px; font-weight: bold; border: 2px solid #3abbb9; border-radius: 27px; float: right; margin-top: 1em; } .news-more:hover { background: #fff; color: #3abbb9; } /*ƒ^ƒu*/ .tab-group2 { display: flex; justify-content: center; } .tab2 { position: relative; flex-grow: 1; padding: 10px; width: 50%; color: #fff; font-size: 16px; font-weight: bold; text-align: center; background: #dedede; cursor: pointer; } .panel-group2 { padding: 15px 0 0; } .panel2 { display:none; } .tab2.is-active { background: #3abbb9; transition: all 0.4s; } .tab2.is-active::after { position: absolute; bottom: -7px; left: 50%; border-top: 7px solid #3abbb9; border-right: 4px solid transparent; border-left: 4px solid transparent; transform: translateX(-50%); content: ''; } .panel2 dl { display: flex; flex-wrap: wrap; } .panel2 dt { padding: 30px 0 0; width: 20%; color: #666; font-size: 14px; font-weight: bold; } .panel2 dd { padding: 30px 0 15px; width: 80%; word-break: break-all; } .panel2 dd a { color: #353535; } .panel2 dt:not(:last-of-type), .panel2 dd:not(:last-of-type) { border-bottom: 1px solid #edebd5; } /*ƒXƒ|ƒ“ƒT[*/ #sponsor ul { display: flex; flex-wrap: wrap; margin: 0 auto; width: 80%; max-width: 1155px; } #sponsor li { margin-right: 1.033%; margin-bottom: 8px; width: 13.4%; } #sponsor li:nth-of-type(7n) { margin-right: 0; } #sponsor li img { width: 100%; } /*#pagetop { position: absolute; bottom: 0; right: 0; display: block; width: 80px; height: 80px; } #pagetop span { position: fixed; bottom: 20px; right: 20px; display: block; width: 80px; height: 80px; background: #3abbb9; z-index: 1; }*/ #pagetop { position: fixed; right: 0; bottom: 0; z-index: 9999; width: 100px; height: 40px; background-color: rgba(51,51,51,.8); display: flex; justify-content: center; align-items: center; } #pagetop span::after { position: absolute; top: 18px; left: 50%; width: 20px; height: 20px; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: translateX(-50%) rotate(45deg); content: ''; } /*footer*/ #footer_sitemap_box { overflow: hidden; background: #dee0e0; } #footer_sitemap_links { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 60px auto 0; width: 80%; max-width: 1155px; } #footer_sitemap_links .col { padding: 10px 20px; margin-bottom: 30px; width: 20%; box-sizing: border-box; border-right: 1px solid #cfcfcf; } #footer_sitemap_links .col:nth-of-type(5n) { border-right: 0; } #footer_sitemap_links h2 { margin-bottom: 0.8em; font-size: 14px; } #footer_sitemap_links li a { color: #5d5d5d; font-size: 12px; } #footer_sitemap_links li a:hover { text-decoration: underline; } #footer_sitemap_box p { margin: 0 auto 10px; width: 80%; max-width: 1155px; color: #999; font-size: 12px; } .overlay-bg01, .overlay-bg02 { display: none; } .overlay-bg01.on, .overlay-bg02.on { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 3; } @media only screen and (min-width: 767px) { #sp-menubtn { display: none; } /*.mv-slider-sp { display: none; } */ a:hover { text-decoration: underline; } .tab-group2 li:hover { text-decoration: underline; } } @media only screen and (max-width: 1300px) { .bnr-slider-pc { width: 95%; } } @media only screen and (max-width: 1140px) { header h1 { /*width: 150px;*/ /*height: 150px;*/ width: 160px; height: 100px; } header h1 a { /*font-size: 14px;*/ font-size: 13px; } } @media only screen and (max-width: 1034px) { .searchbox-inner form { display: flex; justify-content: space-between; width: 100%; } .searchbox-inner input { width: 80%; } } @media only screen and (max-width: 900px) { #head-info dl dd:first-of-type { font-size: 12px; } #concept h2 { font-size: 55px; } .bnr-slider-pc { display: none; } .bnr-slider { display: block; margin: 40px 0 50px; } .bnr-slider img { width: 100%; } .bnr-slider .swiper-button-next, .bnr-slider .swiper-button-prev { background-size: 7px 14px; } .bnr-slider .swiper-button-next { right: 11vw; background-image: url(../img/common/next_arrow.png); } .bnr-slider .swiper-button-prev { left: 11vw; background-image: url(../img/common/prev_arrow.png); } } @media only screen and (max-width: 767px) { .pc-none { display: block !important; } .sp-none { display: none !important; } #menubtn { display: none; } #head-info { padding: 10px; background: #9d2328 url("../img/common/right_arrow_white.png") no-repeat center right 10px/8px; } #head-info .hi-logo { margin-right: 8px; } #head-info .hi-year { display: block; font-size: 10px; } #head-info .hi-wday { right: -20px; bottom: 7px; font-size: 11px; } #head-info dl { width: 100%; } #head-info dl dd:first-of-type { margin-left: 10px; font-size: 12px; font-weight: bold; line-height: 1rem; } #head-info dl .more { display: none; } #head-info dt { margin-left: 15px; font-size: 24px; } header h1 { width: 110px; height: 110px; } header h1 span { line-height: 1.3; font-size: 14px; } header .lang { margin-right: 10px; } header .lang a:first-of-type { margin-right: 10px; } header .lang a:first-of-type::after { width: 0; } header .twi a, header .search span, header .facebook a, header .youtube a { width: 40px; height: 40px; } header .twi img { width: 22px; } header .facebook i { font-size: 20px; } header .youtube i { font-size: 20px; } header .searchlink { background: url(../img/common/search.png) no-repeat center center / 22px auto; } #menubtn { margin-right: 0; } /* SP”сƒjƒ…[ */ .scrollnav { z-index: 2 !important; } #sp-menubtn-close { position: absolute; top: 0; right: 0; width: 60px; height: 50px; cursor: pointer; z-index: 101; } #sp-menubtn-close span { display: block; position: absolute; left: 50%; width: 25px; height: 2px; top: 50%; background: #3abbb9; transition: 0.6s; } #sp-menubtn-close span:first-of-type { transform: translate(-50%,-50%) rotate(45deg); } #sp-menubtn-close span:last-of-type { transform: translate(-50%,-50%) rotate(-45deg); } #sp-menubtn { position: relative; width: 60px; height: 60px; cursor: pointer; z-index: 99; } #sp-menubtn span { display: block; position: absolute; left: 50%; width: 26px; height: 2px; background: #3abbb9; transform: translateX(-50%); z-index: 4; transition: 0.6s; } #sp-menubtn span:first-of-type { top: 23px; } #sp-menubtn span:last-of-type { top: 34px; } #sp-menubtn.on span { top: 50%; background: #fff; } #sp-menubtn.on span:first-of-type { transform: translate(-50%,-50%) rotate(45deg); } #sp-menubtn.on span:last-of-type { transform: translate(-50%,-50%) rotate(-45deg); } #sp-navigation { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: #3abbb9; color: #fff; z-index: 100; overflow-y: scroll; } #sp-navigation .sp-nav-header { display: flex; align-items: center; justify-content: flex-end; padding-right: 60px; background: #fff; } #sp-navigation .sp-parentmenu { width: 80%; margin: 20px auto 60px; } #sp-navigation .sp-childmenu { display: none; border-bottom: 1px solid #77dbda; } #sp-navigation .nav-list { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px; color: #fff; border-bottom: 1px solid #77dbda; font-size: 14px; font-weight: bold; } #sp-navigation .nav-list:not(.right-arrow).open { border-bottom: 0; } #sp-navigation .nav-list::after, #sp-navigation .sp-g-inner-title::after { content: ''; display: inline-block; width: 18px; height: 16px; position: absolute; right: 10px; background: url(../img/common/plus_btn_white.png) no-repeat center/contain; } #sp-navigation .nav-list.open::after, #sp-navigation .sp-g-inner-title.open::after { right: 11px; width: 16px; background: url(../img/common/minus_btn_white.png) no-repeat center/contain; } #sp-navigation .nav-list.right-arrow::after { background: url(../img/common/right_arrow_white.png) no-repeat center/contain; } #sp-navigation .nav-list.right-arrow.open::after { right: 11px; } #sp-navigation .nav-icon { width: 20px; line-height: 0; } #sp-navigation .nav-icon img { width: 100%; } #sp-navigation .sp-inner-childmenu a { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 20px; color: #caefef; font-size: 13px; } #sp-navigation .sp-inner-childmenu a img { width: 6px; } #sp-navigation .sp-g-inner-title { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #2c9f9d; font-weight: bold; border-bottom: 1px solid #3abbb9; } #sp-navigation .sp-g-innerlist { display: none; } #sp-navigation .sp-g-inner-menu { padding: 10px; } #sp-navigation .sp-g-childmenu li { font-size: 13px; } #sp-navigation .sp-g-childmenu li:not(.sp-g-inner-title) { display: flex; justify-content: space-between; align-items: center; color: #3abbb9; padding: 10px; background: #fff; border-bottom: 1px solid #c1e0e0; } #sp-navigation .sp-g-childmenu li a { display: flex; justify-content: space-between; align-items: center; width: 100%; } #sp-navigation .sp-g-childmenu li a div { display: flex; align-items: center; color: #3abbb9; } #sp-navigation .sp-g-childmenu li a div img { width: 23px; margin-right: 10px; } #sp-navigation .sp-g-childmenu li .right-blue-arrow { width: 8px; } #sp-navigation .nav-icon.right-arrow { width: 10px; } .font-weight { font-weight: bold; } .searchbox-inner { padding: 0 10px; } .searchbox-inner form { display: flex; align-items: center; width: 100%; } .searchbox-inner input { width: 180px; font-size: 10px; } .searchbox-inner button { width: 130px; height: 34px; font-size: 11px; } /* #sp-navigation.on { display: block; } */ /*.mv-slider { display: none; padding-bottom: 0; }*/ .swiper-slide .mv01, .swiper-slide .mv02, .swiper-slide .mv03 { background: transparent; } .mv-slider-sp .img { width: 100%; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { width: 100%; bottom: 15px; right: 0; } .swiper-slide .mv01 img.mv01-ttl { top: 50%; max-width: 90%; } .swiper-slide .mv01 img.mv01-ttl-sp { position: absolute; top: 50%; left: 50%; width: auto; max-width: 90%; transform: translate(-50%,-50%); } /*.sp-mv {*/ /* position: relative;*/ /* display: block;*/ /* line-height: 0;*/ /*}*/ /*.sp-mv img {*/ /* width: 100%;*/ /*}*/ /*.sp-mv .mv01-ttl-sp {*/ /* position: absolute;*/ /* top: 50%;*/ /* left: 50%;*/ /* transform: translate(-50%, -50%);*/ /*}*/ /* SP”Ńoƒi[ƒGƒŠƒA */ .bnrlist { display: none; } #examlist { position: static; background: rgba(15,49,48,0.4); } #examlist h2 { text-align: center; font-size: 15px; } #examlist ul { flex-wrap: wrap; margin: 35px auto 35px; } #examlist li { width: 47%; } #examlist li:not(:last-child) { margin-bottom: 20px; } #examlist li img { width: 100%; } #examlist li span { display: block; font-weight: bold; color: #333; } #examlist li a { background: #fff url("../img/support01/link_arrow.png") no-repeat bottom right/25px; } #examlist li a p { margin-bottom: 10px; } .scrolltxt { display: none; } .mypagebox { display: none; } .concept-inner { flex-wrap: wrap; padding: 45px 0; } .concept-inner div { width: 100%; } #concept { width: 83%; margin: 0 auto 60px; } #concept h2 { font-size: 9vw; } #concept h2 + p { margin: 20px 0 40px 40px; font-size: 15px; } #concept h2 + p::before { left: -36px; width: 30px; height: 2px; } #concept p:not(:last-of-type), #concept p { color: #666; font-size: 15px; } #concept .pc-read-btn { display: none; } #concept .sp-read-btn { display: flex; width: 60%; height: 50px; margin: 40px auto 0; } #support { background: url(../img/support01/support01_mvbg_sp.png) no-repeat top left / 100% auto; padding: 60px 0 60px; } #support .model { display: none; } .sup-inner h2 { margin-bottom: 40px; font-size: 24px; } .sup-inner h2 + p { font-size: 16px; } .sup01, .sup02, .sup03 { margin-top: 60px; } .sup-inner h3 { display: flex; align-items: center; margin-bottom: 20px; font-size: 21px; border-bottom: 3px solid #3abbb9; } .sup-inner h3 span { display: block; text-align: center; font-size: 47px; } .sup-inner h3 span span { margin-right: 0; font-size: 12px; } .sup01 h3 + p { width: 100%; font-size: 15px; } .sup01 ul { flex-wrap: wrap; } .sup01 li { width: 100%; margin-bottom: 20px; } .sup01 li a { background: #fff url("../img/support01/link_arrow.png") no-repeat bottom right/30px; border: 1px solid #f1f3f3; } .sup01 li span { height: auto; } .sup01 li h4 { margin: 20px 0; font-size: 18px; } .sup01 li h4 + p { height: auto; } .sup01 li h4 + p + p { margin-top: 20px; font-size: 13px; } .sup01 li img { width: 50%; } .btn-area { margin-top: 0; } .btn-area a { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; margin-top: 20px; color: #fff; font-weight: bold; border: 1px solid #3abbb9; background: #3abbb9; border-radius: 28px; } .btn-area a:not(:last-child) { margin-right: 0; } #ecosystem .btn-area { margin: 10px auto 0; } #ecosystem p strong { font-size: 16px; } .btn-area.sup02-btn { display: none; } .sup-inner h3 + p { margin-bottom: 20px; font-size: 15px; } .sup03 li a, .sup03 li.sup03-ac { flex-wrap: wrap; padding: 20px; background: #fff url("../img/support01/link_arrow.png") no-repeat bottom right/30px; border: 1px solid #f1f3f3; } .sup03 li { width: 100%; } .sup03 li:nth-of-type(odd) { margin-right: 0; } .sup03 li .top-cont { display: flex; justify-content: space-between; } .sup03 li p { margin-top: 20px; font-size: 13px; color: #666; } /* SP”Å supportŠJ•Âƒ{ƒ^ƒ“ */ .sp-support-list { display: block; } .sp-support-list .panel-group { padding: 0; } .sup02 h4 { padding: 0 0 10px; color: #666; font-size: 16px; border-bottom: 1px solid #c0c2c2; } .sp-panel-title { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .sp-panel-title::after { content: ''; display: inline-block; width: 26px; height: 16px; position: absolute; right: 20px; background: url(../img/support02/plus_btn.png) no-repeat center/contain; } .sp-panel-title:not(.las-type) { border-bottom: 1px solid #ccc; } .sp-panel-title.open { border-bottom: 3px solid #3abbb9; } .sp-panel-title.open::after { content: ''; display: inline-block; width: 26px; height: 2px; position: absolute; right: 20px; background: url(../img/support02/minus_btn.png) no-repeat center/contain; } .sp-panel-title.open::before { position: absolute; bottom: -10px; left: 50%; border-top: 7px solid #3abbb9; border-right: 4px solid transparent; border-left: 4px solid transparent; transform: translateX(-50%); content: ''; } .sp-panel-title span { line-height: 0; } .sp-panel-logo { width: 100px; } .sp-panel-icon { width: 20px; } .sp-panel-title img { width: 100%; } .sup02 .sp-panel { display: none; padding: 30px 20px; background: #e8eceb; border-bottom: 1px solid #c0c2c2; } .sup02 .sp-panel ul { display: flex; flex-wrap: wrap; margin-top: 20px; } .sup02 .sp-panel li { display: flex; align-items: end; padding: 20px 0; width: 100%; } .sup02 .sp-panel li img { margin-right: 20px; width: 45px; } .sup02 .sp-panel dt a { color: #333; font-size: 15px; font-weight: bold; } .sup02 .sp-panel dd { color: #666; font-size: 13px; } .sup02 .sp-panel ul + h4 { margin-top: 20px; } #interview h2, #ecosystem h2, #sponsor h2 { font-size: 21px; padding-bottom: 20px; margin: 0 0 20px; } #interview h2::after, #ecosystem h2::after, #sponsor h2::after { height: 2px; width: 80px; } #interview h2 + p, #ecosystem h2 + p { width: 83%; margin: auto; font-size: 16px; } #interview, #ecosystem, #sponsor, #newswrap { padding: 60px 0; } #interview h2 + p, #ecosystem h2 + p { text-align: left; } #interview h3 { margin: 30px 0 20px; font-size: 18px; } #interview .interview-pc-list { display: none; } /* SP”Å interviewƒXƒ‰ƒCƒ_[ */ #interview .interview-slider { display: block; } #interview .interview-slider ul { width: 100%; } #interview .interview-slider .swiper-button-next, #interview .interview-slider .swiper-button-prev { top: 20%; background-size: 11px 19px; } #interview .interview-slider .swiper-button-next { right: 6%; background-image: url(../img/common/next_arrow.png); } #interview .interview-slider .swiper-button-prev { left: 6%; background-image: url(../img/common/prev_arrow.png); } #ecosystem .eco-more { width: 100%; max-width: 100%; height: 50px; } #news { flex-wrap: wrap; padding: 0; } .news-inner { width: 100%; } .news-inner:first-of-type { margin-bottom: 60px; } .news-title { margin-bottom: 20px; } .news-title h2 { font-size: 18px; } /* .news-title a { font-size: 16px; } */ .panel2 dt, .panel2 dd { width: 100%; } .panel2 dt { padding: 10px 10px 0; font-size: 10px; } .panel2 dt:not(:last-of-type) { border-bottom: 0; } .panel2 dd { padding: 10px; border-bottom: 1px solid #edebd5; font-size: 14px; } .tab2 { font-size: 13px; } #sponsor ul { margin: 50px auto 20px; } #sponsor li { margin-right: 0; margin-bottom: 0; width: 32%; } #sponsor li:not(:nth-child(3n)) { margin-right: 2%; } #pagetop { width: 50px; height: 50px; } #pagetop span { width: 50px; height: 50px; } #pagetop span::after { top: 56%; width: 15px; height: 15px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg); } #footer_sitemap_links { margin: 40px auto 30px; width: 83%; } #footer_sitemap_links h2 { position: relative; border-bottom: solid 1px #c0c2c2; font-size: 12px; padding: 15px 10px; margin-bottom: 0; } #footer_sitemap_links h2::after { content: ''; display: inline-block; width: 7px; height: 15px; position: absolute; right: 10px; background: url(../img/common/black_arrow.png) no-repeat center/contain; } #footer_sitemap_links h2.open::after { transform: rotate(90deg); } #footer_sitemap_links .col { padding: 0; margin-bottom: 0; width: 100%; border-right: 0; } #footer_sitemap_links .col ul { display: none; } #footer_sitemap_links .col ul li { padding: 5px 0 5px 20px; } } body { position: relative; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#fff; z-index: 9999; pointer-events: none; opacity: 0; -webkit-transition: opacity .2s ease-in-out; -ms- transition: opacity .2s ease-in-out; -moz- transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } body.fadeout::after { opacity: 1; } /*‰º‘wƒy[ƒWMV*/ #sub_mv { display: flex; /* justify-content: center; */ align-items: center; width: 100%; height: 495px; } #sub_mv.career { background: url(../img/career/career_mv.jpg) no-repeat top right / cover; } #sub_mv.career div { margin: 0 auto; text-align: center; /* width: 70%; */ text-shadow: 0 0 4px #fff; } #sub_mv.career h2 { margin-bottom: 1em; color: #000; font-size: 48px; line-height: 1.4; } #sub_mv.career p { color: #333; font-size: 18px; line-height: 1.8; } #sub_mv.optech { justify-content: center; background: url(../img/optech/optech_mv.jpg) no-repeat top right / cover; } #sub_mv.optech div { color: #fff; text-align: center; } #sub_mv.optech h2 { font-size: 72px; font-weight: 900; text-shadow: 0 0 18px rgba(21,28,48,0.3); line-height: 1.2; } #sub_mv.optech h2 span { display: table; position: relative; margin: 20px auto 30px; padding-left: 130px; font-size: 22px; font-weight: normal; letter-spacing: 0.05em; } #sub_mv.optech h2 span::before { position: absolute; top: 50%; left: 0; width: 110px; height: 2px; background: #fff; content: ''; } #sub_mv.optech p { font-weight: bold; line-height: 1.8; } #sub_mv.optech .is-normal { font-weight: normal; } main.subpage { background: #fff; } .sub_intro { background: #fafbfd; } .breadcrumb { display: flex; justify-content: flex-start; align-items: center; margin: 0 auto; width: 80%; max-width: 1155px; height: 2.6em; font-size: 13px; } .breadcrumb ul { display: flex; align-items: center; color: #3abbb9; } .breadcrumb li:not(:last-of-type) { position: relative; margin-right: 0.5em; padding-right: 1em; } .breadcrumb li:not(:last-of-type)::after { position: absolute; top: 50%; right: 0; color: #333; content: '/'; transform: translateY(-50%); } .breadcrumb li a { color: #333; } .sub_intro { background: #fafbfd; } .si_inner { display: flex; justify-content: space-between; margin: 0 auto; padding: 85px 0 60px; width: 83%; max-width: 1200px; } .si_title h2 { position: relative; padding-bottom: 40px; margin-bottom: 55px; color: #040404; font-size: 42px; } /*.si_title h2 span.passingtxt {*/ /* -webkit-transform: translate3d(0, 0, 0);*/ /* -ms-transform: translate3d(0, 0, 0);*/ /* transform: translate3d(0, 0, 0);*/ /* opacity: 0;*/ /*}*/ @-webkit-keyframes passingbar{ 0% { left: 0; right: auto; width: 0; opacity: 0.8; } 50% { left: 0; right: auto; width: 100%; opacity: 0.8; } 51% { left: auto; right: 0; width: 100%; opacity: 0.8; } 100% { left: auto; right: 0; width: 0; opacity: 0.3; } } @keyframes passingbar{ 0% { left: 0; width: 0; opacity: 0.8; } 50% { left: 0; width: 100%; opacity: 0.8; } 51% { left: 0; width: 100%; opacity: 0.8; } 100% { left: 100%; width: 0; opacity: 0.3; } } @-webkit-keyframes passingtxt{ 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes passingtxt{ 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } } .si_title h2 .passingbar, .start p .passingbar { position: relative; display: inline-block; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .si_title h2 .passingbar:before, .start p .passingbar:before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: #fafbfd; } #optech-meaning .si_title h2 .passingbar:before, #optech-careermap .si_title h2 .passingbar:before, .start p .passingbar:before { background: #fff; } .si_title h2.visible .passingbar:before { -webkit-animation: passingbar 1s ease 0s 1 normal forwards; animation: passingbar 1s ease 0s 1 normal forwards; } .si_title h2.visible span.passingtxt { /* -webkit-transition: opacity 0s linear .92s; transition: opacity 0s linear .92s; will-change: opacity; opacity: 1; */ -webkit-animation: passingtxt 0s ease .5s 1 normal forwards; animation: passingtxt 0s ease .5s 1 normal forwards; } .si_title h2::after { position: absolute; bottom: 0; left: 0; width: 160px; height: 4px; background: #3abbb9; content: ''; } .si_title h2.visible::after { -webkit-transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) .5s; transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) .5s; will-change: opacity; opacity: 1; } .si_title p { color: #4d4d4b; font-size: 20px; } .si_p { padding-right: 20px; width: 52.5%; box-sizing: border-box; } .si_p p { color: #666; font-size: 18px; text-align: left; line-height: 1.8; } .si_p p:not(:last-of-type) { margin-bottom: 1.8em; } .career_wrap li { overflow: hidden; width: 100%; } .career_wrap li:nth-of-type(even) { background: #fafbfd; } .career_wrap li:last-of-type { padding-bottom: 80px; } .career_wrap a { display: flex; justify-content: space-between; margin: 66px auto; width: 83%; max-width: 1200px; } .career_wrap a div:first-of-type { width: 50%; } .career_wrap a div:first-of-type img { width: 100%; } .career_wrap a div:nth-of-type(2) { position: relative; padding: 20px 20px 0 0; width: 44%; } .career_wrap .c_company { margin-bottom: 20px; color: #666; font-size: 18px; font-weight: bold; } .career_wrap h3 { margin-bottom: 20px; color: #040404; font-size: 24px; transition: all 0.3s; } .career_wrap a:hover h3 { color: #3abbb9; text-decoration: underline; } .career_wrap .c_date { color: #666; font-size: 14px; } .career_wrap a div:nth-of-type(2) img { position: absolute; bottom: 0; right: 0; height: 55px; } .career_wrap .logo_ascii { height: 36px !important; } .career-about { max-width: 700px; } #optech-value img { display: block; margin: 0 auto; width: 83%; max-width: 1200px; } #optech-meaning { background: #fff; } #optech-meaning img { display: block; margin: 0 auto; padding-bottom: 55px; width: 56.5%; max-width: 678px; } #optech-meaning .optech-img { max-width: 570px; margin-top: 50px; padding-right: 50px; } #optech-meaning .optech-img img { width: 100%; } #optech-value .optech-img { max-width: 570px; margin-top: 50px; padding-right: 50px; } #optech-value .optech-img img { width: 100%; } #optech-certification { padding-bottom: 80px; } #optech-certification img { display: block; width: 100%; max-width: 1200px; margin: auto; } #optech-careermap { padding-bottom: 110px; background: #fff; } #optech-careermap .modal { position: relative; margin: 0 auto; width: 83%; max-width: 1200px; } #optech-careermap .modal img:not(.m_icon) { display: block; width: 100%; } #optech-careermap .m_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #optech-careermap .modalinfo { margin: 0 auto; width: 84%; max-width: 1200px; color: #666; font-size: 18px; text-align: right; } .lightbox, .lightbox-close { cursor: pointer; } .lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0,0,0,.7); opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; z-index: 4; } .lightbox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .lightbox-close, .lightbox-close2 { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .lightbox-close:before, .lightbox-close2:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .lightbox-close:after, .lightbox-close2:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #cmap.on, #cmap2.on { opacity: 1; top: 0; bottom: 0; } #cmap.on img, #cmap2.on img { max-height: 100%; max-width: 100%; } #cmap.on .lightbox-close, #cmap2.on .lightbox-close2 { top: 0; } /*’Ç‹LEC³_20191203*/ /*C³*/ #menuinner, #menuinner2 { top: 47px; } #menuinner ul, #menuinner2 ul { background: #3abbb9; } #menubtn.on span { background: #3abbb9; } #menuinner .childmenu a, #menuinner2 .childmenu a { border-bottom: 4px solid #3abbb9; } #menuinner .g-childmenu, #menuinner2 .g-childmenu { background: #3abbb9; } #menuinner .g-childmenu a, #menuinner2 .g-childmenu a { font-size: 16px; border-bottom: none !important; } #menuinner .g-childmenu a:hover, #menuinner .g-childmenu li.on > a, #menuinner2 .g-childmenu a:hover, #menuinner2 .g-childmenu li.on > a { background: transparent; opacity: 0.8; } /*’Ç‹L*/ /*’Ç‹L1203_2‚±‚±‚©‚ç*/ #menuinner2 .parentmenu a:hover, #menuinner2 .childmenu a:hover, #menuinner2 .parentmenu li.on > a, #menuinner2 .childmenu li.on > a { color: #1f8281; } #menuinner2 .childmenu a:hover, #menuinner2 .childmenu li.on > a { border-bottom: 4px solid #fff; } #menuinner2 .g-childmenu a:hover, #menuinner2 .g-childmenu li.on > a { color: #fff; border-bottom: none; } /*’Ç‹L1203_2‚±‚±‚Ü‚Å*/ #menuinner .child1, #menuinner2 .child1 { padding: 30px 10%; line-height: 2.2; } #menuinner .child1 li, #menuinner2 .child1 li { display: block; margin-left: 50px; width: auto; /* width: 50%; */ height: auto; } #menuinner2 .child1 a, #menuinner .child1 a { display: inline; /* display: block; */ position: relative; padding-left: 1em; font-weight: normal; border: none; } #menuinner .child1 a::before, #menuinner2 .child1 a::before { position: absolute; top: 50%; left: 0; width: 1em; height: 0.6em; background: url(../img/common/menu_arrow.png) no-repeat top left / auto 100%; content: ''; transform: translateY(-50%); } #menuinner .child1 a:hover, #menuinner2 .child1 a:hover { color: #fff; border: none; opacity: 0.8; } #menuinner .g-childmenu .g-child-ulwrap, #menuinner2 .g-childmenu .g-child-ulwrap { display: block; width: 300px; } #menuinner .g-childmenu .g-child-ulwrap:not(:last-of-type), #menuinner2 .g-childmenu .g-child-ulwrap:not(:last-of-type) { margin-right: 35px; } #menuinner .g-childmenu ul, #menuinner2 .g-childmenu ul { width: 100%; } #sp-navigation { display: none; } /*’Ç‹L 1203_2*/ .start { background: #FFF; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9000; } .start p { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: 280px; transition: 1.6s linear; } .start img { display: none; width: 100%; } @-webkit-keyframes passingbar2{ 0% { left: 0; right: auto; width: 0; opacity: 0; } 30% { left: 0; right: auto; width: 100%; opacity: 1; } 31% { left: auto; right: 0; width: 100%; opacity: 1; } 100% { left: auto; right: 0; width: 0; opacity: 1; } } @keyframes passingbar2{ 0% { left: 0; width: 0; opacity: 0; } 30% { left: 0; width: 100%; opacity: 1; } 31% { left: 0; width: 100%; opacity: 1; } 100% { left: 100%; width: 0; opacity: 1; } } .start p .passingbar { padding: 10px; line-height: 1; } .start p .passingbar:before { padding: 10px; -ms-filter: blur(6px); filter: blur(6px); -webkit-animation: passingbar2 1.4s ease-out .3s 1 normal forwards; animation: passingbar2 1.4s ease-out .3s 1 normal forwards; transform: scaleY(1.3) perspective(.6em) rotateX(5deg); } /*’Ǐ]ƒiƒrƒQ[ƒVƒ‡ƒ“*/ .scrollnav { display: flex; justify-content: flex-end; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 47px; background: #3abbb9; z-index: 4; transition: .3s; transform: translateY(-100%); } .scrollnav.is-show { transform: translateY(0); } .scrollnav a { color: #fff; } .navh1 { position: absolute; top: 50%; left: 2%; transform: translateY(-50%); } .navh1 a { display: inline-flex; align-items: center; color: #fff; font-size: 12px; } .navh1 img { margin-right: 1em; height: 2em; } .navh1 span { display: inline-block; width: 130px; line-height: 1.4; } .scrollnav .company { align-items: center; margin-right: 20px; } .scrollnav .company a { position: relative; font-size: 18px; font-weight: bold; } .scrollnav .lang { display: flex; align-items: center; margin-right: 20px; } .scrollnav .lang a { position: relative; font-size: 18px; font-weight: bold; } .scrollnav .lang a:first-of-type { margin-right: 15px; } .scrollnav .lang a:first-of-type::after { position: absolute; top: 4px; right: -8px; width: 2px; height: 1.2em; background: #fff; content: ''; } .scrollnav .twi a, .scrollnav .search span, .scrollnav .facebook a, .scrollnav .youtube a { display: flex; justify-content: center; align-items: center; width: 47px; height: 47px; } .scrollnav .searchlink { background: url(../img/common/search_wh.png) no-repeat center center / 24px auto; transition: none; } .scrollnav .searchlink.on { background: url(../img/common/close_g.png) #f1f3f3 no-repeat center center / 18px auto; } .scrollnav .twi img { display: block; width: 26px; } .scrollnav .facebook i { font-size: 23px; } .scrollnav .youtube i { font-size: 23px; } #menubtn2 { position: relative; margin-right: 25px; width: 60px; height: 60px; cursor: pointer; z-index: 99; } #menubtn2 span { display: block; position: absolute; left: 50%; width: 26px; height: 3px; background: #fff; transform: translateX(-50%); z-index: 4; transition: 0.6s; } #menubtn2 span:first-of-type { top: 23px; } #menubtn2 span:last-of-type { top: 34px; } #menubtn2.on span { top: 50%; background: #fff; } #menubtn2.on span:first-of-type { transform: translate(-50%,-50%) rotate(45deg); } #menubtn2.on span:last-of-type { transform: translate(-50%,-50%) rotate(-45deg); } #menuinner2 { display: none; position: absolute; left: 0; width: 100%; height: 60px; z-index: 3; } #menuinner2 ul { padding: 0 10%; width: 100%; } #menuinner2 li { display: table-cell; width: 20vw; height: 60px; vertical-align: top; } #menuinner2 li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-weight: bold; } #menuinner2 .g-childmenu { display: none; position: absolute; top: 60px; left: 0; width: 100%; padding: 30px 10%; } #menuinner2 .g-childmenu div { display: flex; justify-content: center; } #menuinner2 .g-childmenu ul { width: 35%; padding: 0; } #menuinner2 .g-childmenu li { display: block; /*height: 170px;*/ height: auto; margin-bottom: 10px; } #menuinner2 .g-childmenu .heading { width: 100%; margin-bottom: 20px; color: #fff; font-weight: bold; } #menuinner2 .g-childmenu a { justify-content: flex-start; padding: 3px; font-weight: normal; } .sp-menubtn { display: none; } .fadein{ opacity : 0; transition : all 0.7s; } .fadein.fadein-on{ opacity : 1; } .pc_none { display: none !important; } .sp_none { display: block !important; } @media screen and (max-width: 1020px) { .career_wrap h3 { font-size: 19px; } .career_wrap a div:nth-of-type(2) img { height: 6vh; } .career_wrap .logo_ascii { height: 3vh !important; } .si_title h2 { font-size: 34px; } #sub_mv { height: 560px; } #sub_mv.optech { padding: 0 20px; } #sub_mv.optech h2 { font-size: 52px; } #sub_mv.optech div { padding-top: 75px; } } @media screen and (max-width: 767px) { body { font-size: 3.5vw; } .navh1 { display: flex; } .navh1 span { display: none; } .navh1 img { height: 1.6em; } #menubtn2 { display: none; } .sp-menubtn { display: block; position: relative; margin-right: 0; width: 60px; height: 60px; cursor: pointer; z-index: 99; } .sp-menubtn span { display: block; position: absolute; left: 50%; width: 26px; height: 2px; background: #fff; transform: translateX(-50%); z-index: 4; transition: 0.6s; } .sp-menubtn span:first-of-type { top: 24px; } .sp-menubtn span:last-of-type { top: 34px; } .scrollnav .lang a:first-of-type::after { display: none; } .scrollnav .lang { margin-right: 10px; } .scrollnav .twi a, .scrollnav .search span, .scrollnav .facebook a, .scrollnav .youtube a { width: 40px; } .scrollnav .twi img { width: 22px; } .scrollnav .searchlink { background: url(../img/common/search_wh.png) no-repeat center center / 22px auto; } .mypagebox { display: none; } #sub_mv.career { align-items: flex-start; justify-content: center; height: auto; background: url(../img/career/career_mv_sp.png) #f1f1ef no-repeat top left / 100% auto; } #sub_mv.career div { margin: 23vh 0 7vh; width: 77%; } #sub_mv.career h2 { font-size: 6.6vw; } #sub_mv.career p { font-size: 3.73vw; } #sub_mv.optech { justify-content: center; height: auto; background: url(../img/optech/optech_mv_sp.jpg) no-repeat top right / cover; } #sub_mv.optech div { margin: 10vh 0; width: 85%; text-align: left; } #sub_mv.optech div { padding-top: 0; } #sub_mv.optech h2 { font-size: 13.3vw; } #sub_mv.optech h2 span { padding-left: 2em; margin: 1em 0 2em; font-size: 4.5vw; font-weight: bold; } #sub_mv.optech h2 span::before { width: 1.5em; } #sub_mv.optech p { font-size: 3.7vw; } .breadcrumb { display: none; } .si_inner { display: block; padding: 7vh 0; width: 85%; } .si_title h2 { padding-bottom: 1em; margin-bottom: 0.6em; font-size: 5.6vw; } .optech-main .si_title h2 { padding-bottom: 0.6em; margin-bottom: 0.8em; font-size: 6.4vw; } #optech-careermap .si_title h2 .passingbar:before { background: #fafbfd; } .optech-main .si_title p::before { display: none; } .si_title h2::after { width: 30%; height: 2px; } .si_title p { margin-bottom: 2em; color: #040404; font-size: 4vw; font-weight: bold; } .si_title p::before { content: '['; } .si_p { padding: 0; width: 100%; } .si_p p { font-size: 3.5vw; } .career_wrap a { display: block; margin: 4vh auto; width: 85%; } .career_wrap a div:first-of-type, .career_wrap a div:nth-of-type(2) { width: 100%; } .career_wrap a div:nth-of-type(2) { overflow: hidden; padding: 0; } .career_wrap .c_company { margin: 1rem 0; color: #040404; font-size: 3.7vw; } .career_wrap h3 { margin-bottom: 1rem; font-size: 4.8vw; } .career_wrap .c_date { margin-bottom: 1rem; font-size: 3.2vw; } .career_wrap a div:nth-of-type(2) img { height: 2rem; } .career_wrap .logo_ascii { height: 1.6rem !important; } #optech-value img { padding-bottom: 7vh; } #optech-meaning { margin-top: 0; padding-top: 0; } #optech-meaning img { width: 85%; padding-bottom: 7vh; } #optech-certification { padding-bottom: 7vh; } #optech-certification img { width: 94%; } #optech-careermap { background: #fafbfd; } #optech-careermap .modal { width: 85%; } #optech-careermap .m_icon { width: 11vw; } #optech-careermap .modalinfo { margin-top: 1em; width: 85%; font-size: 3.2vw; } /*’Ç‹L 1203_2*/ #ecosystem .ecocircle { margin: 0; padding: 5vh 0; height: 440px; } .ecoc-inner { width: 375px; } .ecocircle li { width: 40% !important; } .ecocircle li.eco-spo { top: 2%; left: 10%; } .ecocircle li.eco-ac { top: 2%; right: 10%; } .ecocircle li.eco-comu { bottom: auto; top: 33%; right: 0; } .ecocircle li.eco-ins { top: 56%; left: 50%; width: 38% !important; transform: translateX(-50%); } .ecocircle li.eco-biz { bottom: auto; top: 33%; left: 0; } .eco-lpi { width: 44%; top: 47%; } .ecocircle li.eco-spo.on { background: url(../img/ecosystem/eco_spo_on_sp.png) no-repeat top left / 100% auto; } .ecocircle li.eco-ac.on { background: url(../img/ecosystem/eco_ac_on_sp.png) no-repeat top left / 100% auto; } .ecocircle li.eco-comu.on { background: url(../img/ecosystem/eco_comu_on_sp.png) no-repeat top left / 100% auto; } .ecocircle li.eco-ins.on { background: url(../img/ecosystem/eco_ins_on_sp.png) no-repeat top left / 100% auto; } .ecocircle li.eco-biz.on { background: url(../img/ecosystem/eco_biz_on_sp.png) no-repeat top left / 100% auto; } .start p { width: 50%; } .sp_none { display: none !important; } .pc_none { display: block !important; } } @media screen and (max-width: 320px) { #ecosystem .ecocircle { height: 390px; transform: scale(0.95); } .ecoc-inner { width: 100%; } header h1 { width: 100px; height: 100px; } .navh1 img { height: 1.3em; } } @media screen and (max-height: 700px) { .swiper-slide .mv01 img.mv01-ttl { top: 30%; max-width: 55%; } } /* ---------------------------------------------------- tayoriƒ`ƒƒƒbƒgƒ{ƒbƒNƒX’²®@2024.03 ----------------------------------------------------*/ #tayori-ai-chatbot-app { position: fixed !important; z-index: 1000; bottom: 50px !important; } #tayori-ai-chatbot-app .chat .message { background-color: #ffffff; } /* ---------------------------------------------------- MVƒuƒŒƒCƒNƒ|ƒCƒ“ƒg3ƒpƒ^[ƒ“@2024.11 ----------------------------------------------------*/ @media only screen and (min-width: 1000px) { .mv-slider { display: block; padding-bottom: 0; height: 100vh; } .mv-slider-medi { display: none; } .mv-slider-sp { display: none; } } @media only screen and (min-width: 767px) { .mv-slider-sp { display: none; } } @media only screen and (min-width:768px) and (max-width:1000px) { .mv-slider-medi { display: block; padding-bottom: 0; /*height: 100vh;*/ } .mv-slider-medi .mv01-ttl-sp { position: absolute; top: 50%; left: 50%; width: auto; max-width: 90%; transform: translate(-50%, -50%); } .mv-slider-medi .img { width: 100%; } } @media only screen and (max-width: 767px) { .mv-slider { display: none; padding-bottom: 0; } .mv-slider-medi { display: none; padding-bottom: 0; } } /* SATORI */ #tayori-ai-chatbot-app { position: fixed !important; right: auto !important; left: 25px !important; bottom: 35px !important; z-index: 99999999 !important; } /* £££££££££££££££££££££££££ Style £££££££££££££££££££££££££ */