@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap'); * { min-height:0; min-width:0; box-sizing: border-box; } *:focus { outline: none; } 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 { font-size: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } body { color: #000; background-color: #fff; font-family:'Roboto',"游ゴシック","游ゴシック体",'YuGothic','Hiragino Sans',Meiryo,sans-serif; font-weight: 500; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; letter-spacing:.04rem; height:100%; overflow-x: hidden; position: relative; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body.fix { overflow: hidden; } img { display:inline-block; height: auto; width: 100%; max-width: 100%; backface-visibility: hidden; } svg { width: 100%; max-width: 100%; height: auto; vertical-align: middle; display: inline-block; backface-visibility: hidden; } a, a:link, a:visited, a:active { color: #2C2C2C; text-decoration: none; } a:hover { color: #000; font-style: normal; text-decoration: none; } @media (min-width: 768px) { a .ahovLine { border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#004ea2, #004ea2) 100% 100% / 0 2px no-repeat; transition: background-size .4s cubic-bezier(.23,1,.32,1) 0s; } a:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } } hr.bar-m { width: 100%; position: relative; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; border-bottom: 3px solid #ffd900; } hr.bar-m:after { width: 80px; height: 0; content:""; position: absolute; top: 0; right: 0; border-top: 3px solid #004ea2; opacity: 1; transition: all .5s; } @media (min-width: 768px) { a:hover hr.bar-m:after { width: 0; opacity: 0; } } @media (max-width: 767px) { hr.bar-m:after { width: 50px; } } /* ------------ ANIMATION ------------- */ .fadein { opacity: 0; } .fadein.inview { animation-name: fadeUp; animation-duration:1.5s; animation-fill-mode:forwards; } .blurin { -webkit-filter: blur(20px); filter: blur(20px); opacity: 0; -webkit-transition: all 1.5s .4s; -o-transition: all 1.5s .4s; transition: all 1.5s .4s; } .blurin.inview { -webkit-filter: blur(0); filter: blur(0); opacity: 1; } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .eachTextAnime span { opacity: 0; } .eachTextAnime.appeartext span { animation:text_slide 1.2s ease-out forwards; } @keyframes text_slide { 0% { opacity:0; } 100% { opacity:1; } } .txfadein span { opacity: 0; } a.scrollDown { color:#ffffff; font-size: clamp(14px, 16px, 1.2vw); line-height: 1; font-weight: 500; position: absolute; bottom: 40px; z-index: 2; display: inline-block; text-decoration: none; } #business a.scrollDown { transform: translateX(-50%); left: calc(50% - 15px); } a.scrollDown { padding-top: 80px; } a.scrollDown span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; opacity: 0; box-sizing: border-box; } a.scrollDown span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } a.scrollDown span:nth-of-type(2) { top: 16px; -webkit-animation-delay: .15s; animation-delay: .15s; } a.scrollDown span:nth-of-type(3) { top: 32px; -webkit-animation-delay: .3s; animation-delay: .3s; } @-webkit-keyframes sdb { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes sdb { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 767px) { a.scrollDown { bottom: 20px; } } a.pganc { display: block; margin-top:-100px; padding-top:100px; } @media (max-width: 767px) { a.pganc { display: block; margin-top:-80px; padding-top:80px; } } /* ------------ LOADING ------------- */ .loading { position: fixed; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background: rgba(255,217,0,1); z-index: 999; top: 0; left: 0; right: 0; bottom: 0; } #business .loading { background: rgba(30,64,152,1); } .loading-block { width: 80px; display: flex; justify-content: space-between; } .circle { width: 12px; height: 12px; background-color: #fff; border-radius: 50%; animation: loading 1s infinite; } .circle:nth-child(2) { animation-delay: 0.1s; } .circle:nth-child(3) { animation-delay: 0.2s; } .circle:nth-child(4) { animation-delay: 0.3s; } @keyframes loading { 0% { transform: scale(0.1); } 100% { transform: scale(1); } } @media (max-width: 767px) { .loading { background-size:24px auto; } } /* ------------ RADIO BUTTON ------------- */ @keyframes ripple { 0% { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0); } 50% { box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0); } } .md-radio { margin: 3px 0; } .md-radio.md-radio-inline { display: inline-block; } .md-radio.md-radio-flex { width: 100%; display: -webkit-flex; display: flex; align-items: center; } .md-radio input[type="radio"] { display: none; } .md-radio input[type="radio"]:checked + label:before { border-color: #337ab7; animation: ripple 0.2s linear forwards; } .md-radio input[type="radio"]:checked + label:after { transform: scale(1); } .md-radio label { display: inline-block; min-height: 20px; position: relative; padding: 0 30px; margin-bottom: 0; cursor: pointer; vertical-align: bottom; font-size: inherit; line-height: inherit; } .md-radio.md-radio-flex label { padding: 0 10px 0 30px; } .md-radio label.rtext { padding: 0 10px 0 30px; } .md-radio label:before, .md-radio label:after { position: absolute; content: ''; border-radius: 50%; transition: all .3s ease; transition-property: transform, border-color; } .md-radio label:before { left: 0; top: 0; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.54); background: #ffffff; } .md-radio label:after { top: 6px; left: 6px; width: 12px; height: 12px; transform: scale(0); background: #337ab7; } /* ------------ CHECK BOX ------------- */ @keyframes click-wave { 0% { position: relative; width: 10px; height: 10px; opacity: 0.5; } 100% { width: 45px; height: 45px; margin-top: -15px; margin-left: -15px; opacity: 0; } } .dzlg-input { display: inline-block; position: relative; width: 20px; height: 20px; margin-right: 0.4rem; line-height: 0; cursor: pointer; transition: all 0.15s ease-out 0s; color: #ffffff; border: 2px solid #337ab7; outline: none; background: #f6fbff; -webkit-appearance: none; appearance: none; box-sizing: border-box; vertical-align: bottom; } .dzlg-input:hover { background: #8cb7dd; cursor: pointer; } .dzlg-input:checked { background: #337ab7; } .dzlg-input:checked::before { font-size: 16px; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 1; position: absolute; top:0; left:0; content:'\f00c'; } .dzlg-input:checked::after { position: relative; display: block; content: ''; -webkit-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #949494; } .dzlg-input.radio { border-radius: 50%; } .dzlg-input.radio::after { border-radius: 50%; } .optgroup > input[type="checkbox"] { display: inline-block; position: relative; width: 20px; height: 20px; margin-right: 0.4rem; line-height: 0; cursor: pointer; transition: all 0.15s ease-out 0s; color: #ffffff; border: 2px solid #337ab7; outline: none; background: #f6fbff; -webkit-appearance: none; appearance: none; box-sizing: border-box; vertical-align: bottom; } .optgroup > input[type="checkbox"]:hover { background: #8cb7dd; cursor: pointer; } .optgroup > input[type="checkbox"]:checked { background: #337ab7; } .optgroup > input[type="checkbox"]:checked::before { font-size: 16px; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 1; position: absolute; top:0; left:0; content:'\f00c'; } .optgroup > input[type="checkbox"]:checked::after { position: relative; display: block; content: ''; -webkit-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #949494; } .optgroup > input[type="radio"] { border-radius: 50%; } .optgroup > input[type="radio"]::after { border-radius: 50%; } .multiple > label > input[type="checkbox"] { display: inline-block; position: relative; width: 20px; height: 20px; margin-right: 0.4rem; line-height: 0; cursor: pointer; transition: all 0.15s ease-out 0s; color: #ffffff; border: 2px solid #337ab7; outline: none; background: #f6fbff; -webkit-appearance: none; appearance: none; box-sizing: border-box; vertical-align: bottom; } .multiple > label > input[type="checkbox"]:hover { background: #8cb7dd; cursor: pointer; } .multiple > label > input[type="checkbox"]:checked { background: #337ab7; } .multiple > label > input[type="checkbox"]:checked::before { font-size: 16px; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 1; position: absolute; top:0; left:0; content:'\f00c'; } .multiple > label > input[type="checkbox"]:checked::after { position: relative; display: block; content: ''; -webkit-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #949494; } .multiple > label > input[type="radio"] { border-radius: 50%; } .multiple > label > input[type="radio"]::after { border-radius: 50%; } /* ------------ HEADER ------------- */ header { position: fixed; display: -webkit-flex; display: flex; width: 100%; height: 80px; top:0; left:0; z-index:18; padding: 0; margin: 0; justify-content: space-between; background-color:#ffd900; } #business header { background-color:#004ea2; } header > h1 { width: 60px; height: 80px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #ffd900; z-index:18; } #business header > h1 { background-color: rgba(255,255,255,1); } header > h1 > a { width: 32px; padding: 0; margin: 0 3px 0 0; } .navigation { width: calc(100% - 60px); display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; padding: 0 30px 0 0; margin: 0; position: relative; } .navigation ul.nav { display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0 12px 0 0; margin: 0; } .navigation ul.nav > li { list-style: none; padding: 0; margin: 0; position: relative; } .navigation ul.nav > li::after { color:#000; content:" / "; padding: 0 8px; margin: 0; } #business .navigation ul.nav > li::after { color:#fff; } .navigation ul.nav > li:last-child::after { display: none; } .navigation ul.nav > li > a { color:#000; font-size: 17px; font-size: clamp(12px, 17px, 1.5vw); line-height: 1.5; font-weight: 700; letter-spacing:.05rem; transition: all .5s; } #business .navigation ul.nav > li > a { color:#fff; font-size: 17px; font-size: clamp(12px, 17px, 1.8vw); } .navigation > ul.icons { display: -webkit-flex; display: flex; align-items: center; padding: 0; margin: -10px 0 0; } .navigation > ul.icons > li { list-style: none; padding: 0; margin: 0; padding: 0; margin: 8px 0 0; display: -webkit-flex; display: flex; align-items: center; position: relative; } .navigation > ul.icons > li.jpen::before { content:"JA/EN"; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; font-size: 10px; color:#000; line-height: 1; transition: all .5s; } #business .navigation > ul.icons > li.jpen::before { color:#ffffff; } .navigation > ul.icons > li > span, .navigation > ul.icons > li > a { width: 38px; height: 38px; padding-bottom: 14px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; transition: all .5s; } .icon-wrapper { position: relative; z-index: 0; border: none; cursor: pointer; } .navigation > ul.icons > li > span > svg.icon, .navigation > ul.icons > li > a > svg.icon { color:rgba(0,0,0,1); width: 24px; height: 24px; transition: all .5s; } #business .navigation > ul.icons > li > span > svg.icon, #business .navigation > ul.icons > li > a > svg.icon { color:rgba(255,255,255,1); } a.siteLink { display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color:#fff; padding: 8px 16px; margin: 0 0 0 12px; border-radius: 50px; transition: all .5s; } a.siteLink > span { font-size: 12px; font-size: clamp(11px, 14px, 1vw); line-height: 1; font-weight: 700; padding: 0 4px 0 0; margin: 0; } a.siteLink > svg.icon { color:#000; width: 10px; height: 10px; margin: 0 0 2px; transition: all .5s; } #business a.siteLink { background-color:#ffd900; } a.sslink > b { line-height: 1; width: 28px; margin: 0 10px 0 0; } a.sslink > b svg.icon { color:#000; width: 28px; height: 28px; transition: all .5s; } a.sslink > span { color:#000; font-size: 15px; font-size: clamp(12px, 15px, 1.1vw); line-height: 1; font-weight: 700; letter-spacing:.05rem; transition: all .5s; } @media (min-width: 768px) { .navigation ul.nav > li > a:hover { color:#004ea1; } .navigation ul.nav > li > a .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#004ea1, #004ea1) 100% 100% / 0 2px no-repeat; } .navigation ul.nav > li > a:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } #business .navigation ul.nav > li > a:hover { color:#ffd900; } #business .navigation ul.nav > li > a .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#ffd900, #ffd900) 100% 100% / 0 2px no-repeat; } #business .navigation ul.nav > li > a:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } .navigation > ul.icons > li:hover svg.icon, .navigation > ul.icons > li:hover svg.icon { color:#004ea1; } #business .navigation > ul.icons > li:hover svg.icon, #business .navigation > ul.icons > li:hover svg.icon, #business .navigation > ul.icons > li:hover.jpen::before { color:#ffd900; } a.siteLink:hover { color:#fff; background-color:#004ea1; } a.siteLink:hover > svg.icon { color:#fff; } #business a.siteLink:hover { color:#000; background-color:#fff; } a:hover.sslink { background-color: #004ea1; } a:hover.sslink > b svg.icon { color:#fff; } a:hover.sslink > span { color:#fff; } } @media (min-width: 961px) { a.sslink { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 30px; display: -webkit-flex; display: flex; align-items: center; background-color: #fff; border-radius: 3px; padding: 4px 15px 4px 10px; transition: all .5s; } } @media (max-width: 960px) { header { justify-content: flex-start; } .navigation { width: calc(100% - 140px); padding: 0; } .navigation ul.nav { display: none; } a.sslink { position: static; display: -webkit-flex; display: flex; align-items: center; } a.sslink > b { width: 24px; margin: 0 10px 0 0; padding: 0 0 13px; position: relative; } a.sslink > b::after { content:"SS検索"; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; font-size: 10px; color:#000; line-height: 1; transition: all .5s; white-space: nowrap; } a.sslink > b svg.icon { color:#000; width: 24px; height: 24px; } a.sslink > span { display: none; } } @media (max-width: 767px) { header { height: 60px; } header > h1 { width: 60px; height: 60px; } .navigation { width: calc(100% - 120px); } } @media (max-width: 480px) { a.siteLink > span b { display: none; } } #header.UpMove { animation: UpAnime 0.5s forwards; } @keyframes UpAnime{ from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-80px); } } #header.DownMove { animation: DownAnime 0.5s forwards; } @keyframes DownAnime { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } } /* ------------ HEADER SEARCH ------------- */ .header-search { position: relative; } .searchbtn.click { background-color: #fff!important; } .searchbtn.click * { color:#000000!important; } .searchbtn .ic-tabler-x { display: none; } .searchbtn.click .ic-tabler-x { display: inline-block; } .searchbtn .ic-search { display: inline-block; } .searchbtn.click .ic-search { display: none; } #search-wrap { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top:75px; opacity: 0; transition: all .5s; z-index: -1; pointer-events: none; } #search-wrap.panelactive { opacity: 1; top:50px; z-index: 3; pointer-events: auto; } #search-wrap > form { width: 400px; border-radius: 5px; padding: 20px; background-color: rgba(255,255,255,1); position: relative; } #search-wrap > form::before { position: absolute; left: 50%; margin-left: -15px; border: 15px solid transparent; border-bottom: 15px solid #fff; top: -25px; content:""; pointer-events: none; } #search-wrap input { -webkit-appearance:none; outline: none; cursor: pointer; color: #666; } #search-wrap input[type="text"] { width: 100%; border: none; border-bottom:2px solid #ccc; transition: all 0.5s; letter-spacing: 0.05em; height:46px; padding: 10px; } #search-wrap input[type="text"]:focus { background:#eee; } #search-wrap input[type="submit"] { position: absolute; top:10px; right:30px; background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat right; background-size: 20px 20px; width:30px; height: 60px; border: 0; } @media (max-width: 767px) { #search-wrap > form { width: 300px; } #search-wrap.panelactive { top:60px; } } @media (max-width: 374px) { #search-wrap > form { width: 260px; } } /* ------------ LEFT MENU ------------- */ .left-menu { display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 60px; height: 100vh; position: fixed; top: 0; left: 0; border-right: 1px solid rgba(255,217,0,.6); z-index:17; } .left-menu-wrapper { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; } .left-menu-wrapper > strong { position: relative; height: 220px; width: 14px; line-height: 1; } .left-menu-wrapper > strong span { display: inline-block; width: 220px; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 300; color:#ffd900; line-height: 1; letter-spacing:.3rem; transform: rotate(90deg); transform-origin: bottom left; transition: all .5s; } .left-menu-wrapper > ul { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; padding: 0; margin: 0; } .left-menu-wrapper > ul > li { list-style: none; padding: 0; margin: 0; width: 38px; padding: 20px 0 0; margin: 0; display: -webkit-flex; display: flex; align-items: center; } .left-menu-wrapper > ul > li > a { color:#ffd900; transition: all .5s; width: 100%; padding: 10px; margin: 0; } @media (min-width: 768px) { .left-menu-wrapper > strong a:hover span, .left-menu-wrapper > ul > li > a:hover { color:#004ea1; } } @media (max-width: 767px) { .left-menu { display: none; } } /* ------------ LEFT MENU ------------- */ #business .left-menu { border-right: 1px solid rgba(255,217,0,.6); background-color: rgba(95,100,109,.3); background-blend-mode: multiply; } #business .left-menu-wrapper > strong span { color:#ffffff; } #business .left-menu-wrapper > ul > li > a { color:#ffffff; } @media (min-width: 768px) { #business .left-menu-wrapper > strong a:hover span, #business .left-menu-wrapper > ul > li > a:hover { color:#ffd900; } } /* ------------ DRAWR MENU ------------- */ nav.sp { display: block; width: 400px; height: auto; background: rgba(255,255,255,1); margin: 0; padding: 0; position: fixed; top: 0; right: 0; left: auto; bottom: 0; z-index: 90; transition: all .5s; overflow: auto; opacity: 0; pointer-events: none; } nav.sp.open { opacity: 1; pointer-events: auto; } nav.sp p.copy { text-align: center; color:#666; font-size: 9px; line-height: 1; padding: 20px 20px; margin: 0; } .menuinner { display: block; padding: 120px 40px 0; margin: 0; width: 100%; } .search_form { width: 100%; position: relative; margin: 0 0 12px; } .search_form input { -webkit-appearance:none; outline: none; cursor: pointer; color: #666; background:#fffbe5; border-radius: 3px; } .search_form input[type="text"] { width: 100%; border: none; border:1px solid #eee; transition: all 0.5s; letter-spacing: 0.05em; height:46px; padding: 10px; } .search_form input[type="text"]:focus { background:#fff; } .search_form input[type="submit"] { position: absolute; top:0; right:0; background: url(/images/search-btn.svg) center center / 24px no-repeat; width:46px; height: 46px; border: 0; } .menuinner > h2 { padding: 0; margin: 0 0 20px; max-width: 80px; } .menuinner > ul.nav { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; padding: 0; margin: 0; } .menuinner > ul.nav > li { width: 100%; list-style: none; padding: 0; margin: 0; position: relative; border-top: 1px solid #666; } .menuinner > ul.nav > li > a { display: block; color:#1e4098; font-size: 17px; line-height: 1; font-weight: 700; letter-spacing:.05rem; padding: 10px 0 10px 18px; margin: 0; position: relative; transition: all .5s; } .menuinner > ul.nav > li > a::before { content:""; position: absolute; top: 50%; bottom: 0; margin: 0; vertical-align: middle; left: 0; width: 6px; height: 6px; border-top: 2px solid #004ea2; border-right: 2px solid #004ea2; transform: translateY(-50%) rotate(45deg); } .menuinner > ul.subnav { width: 100%; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 14px 0 0; margin: 0; border-top: 1px solid #666; } .menuinner > ul.subnav > li { width: 100%; list-style: none; padding: 0; margin: 0; position: relative; } .menuinner > ul.subnav > li > a { display: block; color:#1e4098; font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing:.05rem; padding: 0 0 6px; margin: 0; transition: all .5s; } .menuinner > p { text-align: center; color:#666; font-size: 9px; line-height: 1; padding: 30px 0 0; margin: 0; } @media (min-width: 768px) { .menuinner > ul.nav > li > a:hover, .menuinner > ul.subnav > li > a:hover { color:#f9891a; } } @media (max-width: 767px) { .menuinner { padding: 75px 40px 0; } nav.sp { width: 100%; } .menuinner > ul.subnav > li > a { font-size: 14px; } } @media (max-width: 374px) { .menuinner { padding: 75px 20px 0; } .menuinner > ul.nav > li > a { font-size: 15px; padding: 8px 0 8px 16px; } .menuinner > ul.subnav > li > a { font-size: 13px; } .menuinner > p { font-size: 9px; padding: 15px 0 0; } } .drwrapper { height: 100%; overflow-x: hidden; position: relative; } .overlay { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; z-index: 20; opacity: 0; transition: opacity .5s; background-color: rgba(0,0,0,.8); } .overlay.open { width: 100%; height: 100%; opacity: 1; position: fixed; } .menu-trigger { display: inline-block; width: 80px; height: 80px; vertical-align: middle; cursor: pointer; position: fixed; top: 0; left: auto; right: 0; z-index: 300; pointer-events: auto; transition: all .5s; background-color: #ffd900; } .menu-trigger span { display: inline-block; box-sizing: border-box; position: absolute; top: 20px; left: 24px; width: 30px; height: 2px; background-color: #000; transition: all .5s; transform: translateX(0); transition: all .5s; } .menu-trigger.active { transition: all .5s; } .menu-trigger.active span { background-color: #000; } #business .menu-trigger { background-color: #004ea1; } #business .menu-trigger span { background-color: #fff; } #business .menu-trigger.active span { background-color: #fff; } .menu-trigger span:nth-of-type(1) { top: 28px; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); } .menu-trigger span:nth-of-type(2) { top: 36px; } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger span:nth-of-type(3) { top: 44px; } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); } @media (min-width: 960px) { .menu-trigger { display: none; } } @media (max-width: 767px) { .menu-trigger { width: 60px; height: 60px; } .menu-trigger span { absolute; top: 20px; left: 20px; width: 20px; } .menu-trigger span:nth-of-type(1) { top: 20px; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); } .menu-trigger span:nth-of-type(2) { top: 28px; } .menu-trigger span:nth-of-type(3) { top: 36px; } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); } } /* ------------ RIGHT MENU ------------- */ .right-menu { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; } .right-menu > ul { display: -webkit-flex; display: flex; flex-direction: column; } .right-menu > ul > li { list-style-type: none; padding: 0; margin: 0; width: 80px; height: 80px; margin: 0 0 1px; position: relative; } .right-menu > ul > li:last-child { margin: 0; } .right-menu > ul > li > p, .right-menu > ul > li > a { display: block; width: 100%; height: 100%; background-color: #ffd900; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; transition: all .5s; z-index: 10; } .right-menu > ul > li > p .icon, .right-menu > ul > li > a .icon { color:#000; width: 36px; height: 36px; padding: 0; margin: 0 0 10px; transition: all .5s; } .right-menu > ul > li > p::after, .right-menu > ul > li > a::after { text-align: center; width: 100%; content:""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 10px; font-size: 8px; color:#000; line-height: 1; font-weight: 700; letter-spacing:0; transition: all .5s; } .right-menu > ul > li.ictx_station > a::after { content:"SS検索"; } .right-menu > ul > li.ictx_search > p::after { content:"サイト内検索"; } .right-menu > ul > li.ictx_search.open > p::after { content:"検索を閉じる"; } .right-menu > ul > li.ictx_world > a::after { content:"GLOBAL"; } .right-menu > ul > li.ictx_search .search_form_wrapper { position: absolute; right: 0; top:0; left: 400px; height: 100%; background-color: #ffd900; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 0 20px; transition: all .5s; z-index: 9; } #business .right-menu > ul > li.ictx_search .search_form_wrapper { background-color: #004ea2; } .right-menu > ul > li.ictx_search.open .search_form_wrapper { right: 100%; left: -400px; } .right-menu > ul > li.ictx_search .icon.icon-on { display: inline-block; } .right-menu > ul > li.ictx_search .icon.icon-off { display: none; } .right-menu > ul > li.ictx_search.open .icon.icon-on { display: none; } .right-menu > ul > li.ictx_search.open .icon.icon-off { display: inline-block; } .right-menu > ul > li.ictx_search form { width: 100%; margin: 0; padding: 0; } .right-menu > ul > li.ictx_search .search_form { width: 100%; margin: 0; } .right-menu > ul > li.ictx_search .search_form input { -webkit-appearance:none; outline: none; cursor: pointer; color: #666; background:#fffbe5; border-radius: 3px; } .right-menu > ul > li.ictx_search .search_form input[type="text"] { width: 100%; border: none; border:1px solid #eee; transition: all 0.5s; letter-spacing: 0.05em; height:46px; padding: 10px; } .right-menu > ul > li.ictx_search .search_form input[type="text"]:focus { background:#fff; } .right-menu > ul > li.ictx_search .search_form input[type="submit"] { position: absolute; top:0; right:0; background: url(/images/search-btn.svg) center center / 24px no-repeat; width:46px; height: 46px; border: 0; } #business .right-menu > ul > li > p, #business .right-menu > ul > li > a { background-color: #004ea2; } #business .right-menu > ul > li > p .icon, #business .right-menu > ul > li > a .icon { color:#fff; } #business .right-menu > ul > li > p::after, #business .right-menu > ul > li > a::after { color:#fff; } @media (min-width: 768px) { .right-menu > ul > li > p:hover, .right-menu > ul > li > a:hover { background-color: #004ea2; cursor: pointer; } .right-menu > ul > li > p:hover .icon, .right-menu > ul > li > a:hover .icon { color:#fff; } .right-menu > ul > li > p:hover::after, .right-menu > ul > li > a:hover::after { color:#fff; } #business .right-menu > ul > li > p:hover, #business .right-menu > ul > li > a:hover { background-color: #ffd900; } #business .right-menu > ul > li > p:hover .icon, #business .right-menu > ul > li > a:hover .icon { color:#000; } #business .right-menu > ul > li > p:hover::after, #business .right-menu > ul > li > a:hover::after { color:#000; } } @media (max-width: 767px) { .right-menu { display: none; } } /* ------------ TOP SLIDER ------------- */ .topSlider { position: relative; width: 100%; height: 100vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; transition: all 2s; z-index:-10; } .topSlider .slick-slider .slick-track, .topSlider .slick-slider .slick-list { height: 100%; } .topSlider .tpslider { width: 100%; height: 100%; padding: 0; margin: 0; } .topSlider .tpslider .main01 { background: url(/images/main01.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .main02 { background: url(/images/main02.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .main03 { background: url(/images/main03.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .main04 { background: url(/images/main04.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .main05 { background: url(/images/main05.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .main06 { background: url(/images/main06.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main01 { background: url(/images/biz_main01.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main02 { background: url(/images/biz_main02.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main03 { background: url(/images/biz_main03.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main04 { background: url(/images/biz_main04.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main05 { background: url(/images/biz_main05.jpg) center center no-repeat; background-size: cover; } #business .topSlider .tpslider .main06 { background: url(/images/biz_main06.jpg) center center no-repeat; background-size: cover; } .topSlider .tpslider .slick-active .main01, .topSlider .tpslider .slick-active .main02 { transform: scale(1.0); } .slide-animation { animation: fadezoom 8s 0s forwards; } @keyframes fadezoom { 0% { transform: scale(1.1); } 100% { transform: scale(1); }} @media (orientation: portrait) and (max-width: 767px) { .topSlider { height: calc( var(--vh) * 100 ); } } /* ------------ TOP MAIN ------------- */ .topmain { position: relative; width: 100%; height: 100vh; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; padding: 0; } .topmain__wrapper { width: calc(100% - 10%); display: -webkit-flex; display: flex; flex-direction: column; padding: 0; margin: 0; } .topmain__wrapper2 { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; padding: 0; margin: 0; } .topmain__wrapper > h1 { padding: 0; margin: 0; width: 100%; } .topmain__wrapper > h1 > span { color:#fff; font-size: clamp(20px, 46px, 3.4vw); line-height: 1.5; font-weight: 700; letter-spacing:.14rem; transition: all .3s; } .topmain__wrapper > .spcp { padding: 0; margin: 0; width: 100%; } .topmain__wrapper2 > .spcp { padding: 30px 0 0; margin: 0; width: 100%; } .topmain__wrapper > .spcp > p { color:#fff!important; font-size: clamp(11px, 20px, 1.6vw); line-height: 1.8; font-weight: 400; letter-spacing:.06rem; padding: 0; margin: 0; } .topmain__wrapper2 > .spcp > p { color:#fff!important; font-size: clamp(11px, 18px, 1.6vw); line-height: 1.8; font-weight: 400; letter-spacing:.06rem; padding: 10px 0 0; margin: 0; text-align: center; } .topmain__wrapper > hr { height: 1px; border: none; border-top: 1px rgba(255,255,255,.4) solid; margin: 30px 0; width: 100%; } .topmaim__splogo { width: 100%; height: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; margin: 0; } .topmaim__splogo > h1 { width: 100%; max-width: 240px; padding: 0; margin: 0; } .topmaim__splogo > h2 { width: 100%; text-align: center; padding: 0; margin: 0 0 30px; color: #fff; font-size: clamp(20px, 32px, 2.8vw); } @media (min-width: 768px) { .topmain__wrapper { display: none; } } @media (max-width: 767px) { .topmain { align-items: flex-end; flex-direction: column; } .topmain__wrapper { width: calc(100% - 30px); margin: 0 0 0 20px; padding: 0 0 30px; } .topmain__wrapper > h2 > p, .topmain__wrapper > .spcp > p, .topmain__wrapper2 > .spcp > p { font-size: 11px; } } @media (orientation: portrait) and (max-width: 767px) { .topmain { justify-content: space-between; height: calc( var(--vh) * 100 ); } .topmaim__splogo { width: 100%; height: calc(100% - 200px); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; margin: 90px 0 0; } .topmaim__splogo > h1 { width: 160px; padding: 0; margin: 0; } } @media (max-width: 374px) { .topmain__wrapper > h2 > p, .topmain__wrapper > .spcp > p, .topmain__wrapper2 > .spcp > p { font-size: 9px!important; letter-spacing:0rem; } } /* ------------ TOP MAIN BUSINESS ------------- */ .topmainBiz { position: relative; width: 100%; height: 100vh; display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 0; } .topmainBiz__splogo { display: none; } .topmainBiz__wrapper { width: calc(100% - 10%); display: -webkit-flex; display: flex; flex-direction: column; padding: 0; margin: 0; } .topmainBiz__wrapper > h1 { padding: 0; margin: 0; width: 100%; } .topmainBiz__wrapper > h1 > span { color:#fff; font-size: 46px; font-size: clamp(20px, 46px, 3.4vw); line-height: 1.5; font-weight: 700; letter-spacing:.14rem; transition: all .3s; } .topmainBiz__wrapper > h2 { padding: 0; margin: 0; width: 100%; } .topmainBiz__wrapper > h2 > p { padding: 0; margin: 0; opacity: 0; line-height: 1; } .topmainBiz__wrapper > h2 > p span { color:#fff; font-size: 20px; font-size: clamp(11px, 20px, 1.6vw); line-height: 1.8; font-weight: 500; letter-spacing:.06rem; } .topmainBiz__wrapper > hr { height: 1px; border: none; border-top: 1px rgba(255,255,255,.4) solid; margin: 30px 0; width: 100%; opacity: 0; } .topmainBiz__wrapper .btn_more { margin: 40px 0 0; } @media (max-width: 767px) { .topmainBiz { align-items: flex-end; flex-direction: column; } .topmainBiz__wrapper { width: calc(100% - 30px); margin: 0; padding: 0 0 140px; } .topmainBiz__wrapper > hr { margin: 20px 0; } .topmainBiz__wrapper .btn_more { display: none; } } @media (orientation: portrait) and (max-width: 767px) { .topmainBiz { height: calc( var(--vh) * 100 ); justify-content: flex-end; } .topmainBiz__splogo { width: 100%; height: calc(100% - 200px); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; margin: 90px 0 20px; } .topmainBiz__splogo > h1 { width: 160px; padding: 0; margin: 0 0 30px; } .topmainBiz__wrapper > h1 > span { font-size: 20px; } .topmainBiz__wrapper > h2 > p { font-size: 11px; } .topmainBiz__wrapper > h2 > p span { font-size: 11px; } } @media (max-width: 374px) { .topmainBiz__wrapper > h2 > p { font-size: 10px; letter-spacing:0rem; } } /* ------------ MORE BUTTON ------------- */ .btn_more { display: -webkit-flex; display: flex; align-items: center; flex-wrap: wrap; width: 100%; } .btn_more > a { display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #ffd900; padding: 14px 24px; margin: 5px 0; transition: all .5s; } .btn_more > p { color: #004ea2; font-size: 18px; font-size: clamp(13px, 18px, 2vw); font-weight: 700; line-height: 1; padding: 5px 20px; margin: 0; } .btn_more.btn-left { justify-content: flex-start; } .btn_more.btn-right { justify-content: flex-end; } .btn_more.btn-center { justify-content: center; } .btn_more > a > span { color:#000; font-size: 15px; font-size: clamp(12px, 15px, 1.1vw); font-weight: 700; letter-spacing:.05rem; line-height: 0; padding: 0 5px 0 0; margin: 0; } .btn_more > a > svg { color:#000; width:16px; height: 16px; } #business .btn_more > a { background-color: #004ea1; } #business .btn_more > a > span, #business .btn_more > a > svg { color:#fff; } @media (min-width: 768px) { .btn_more > a:hover { transform: translateY(-6px); background-color: #004ea1; } .btn_more > a:hover > span, .btn_more > a:hover > svg { color:#fff; } #business .btn_more > a:hover { transform: translateY(-6px); background-color: #ffd900; } #business .btn_more > a:hover > span, #business .btn_more > a:hover > svg { color:#000; } } @media (max-width: 767px) { .btn_more > a { padding: 12px 16px; margin: 0; } } /* ------------ TOP CAMPAIGN ------------- */ .tpbnn_section { padding: 0; margin: 0; position: relative; } .tpbnn_section::before { content:""; background-color: #fff; position: absolute; top:60px; left: -10px; right: -10px; bottom: -10px; z-index: -1; } .tpbnn_wrapper { padding: 0 0 40px; margin: 0 0 0 10%; overflow-x: hidden; } .tpbnn_wrapper_inner { padding: 30px 0; border-radius: 30px 0 0 30px; background-color: rgba(255,255,255,1); border: 1px solid #e0e0e0; border-width: 1px 0 1px 1px; position: relative; } .tpcp_slider { width: 104%; } .tpcp_slider_col { margin: 0 0 0 30px; background-color: rgba(255,255,255,1); width: 260px; transform: translateX(100px); } .tpcp_slider_col > a { display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-end; transition: all .5s; width: 100%; } .tpcp_slider_col > a .slider_img { border: 1px solid #e0e0e0; width: 100%; height: 312px; line-height: 1; } .tpcp_slider_col > a .slider_img img { opacity: 1; transition: all .5s; line-height: 0; vertical-align: bottom; } .tpcp_slider_col > a b { padding: 10px 0; position: relative; display: -webkit-flex; display: flex; width: 100%; } .tpcp_slider_col > a b::before { content:""; position: absolute; width: 100%; bottom: 0; left: 0; right: 0; height: 2px; background-color:#c9caca; transition: all .5s; } .tpcp_slider_col > a b::after { content:""; position: absolute; width: 60px; bottom: 0; right: 0; height: 2px; background-color:#000; } .tpcp_slider_col > a b span { position: relative; font-size: clamp(10px, 14px, 1vw); font-weight: 700; color:#000; line-height: 1; letter-spacing:.06rem; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; padding: 0 30px 0 0; margin: 0; } .tpcp_slider_col > a b span::after { content:""; position: absolute; right: 0; width: 0; height: 0; border-top: solid 5px transparent; border-right: solid 5px transparent; border-bottom: solid 5px transparent; border-left: solid 15px #000;} @media (min-width: 768px) { .tpcp_slider_col > a:hover .slider_img img { opacity: .6; } .tpcp_slider_col > a:hover b::after { background-color:#004ea1; } .tpcp_slider_col > a:hover b span { color:#004ea1; } /* .tpcp_slider_col > a:hover b::before { background-color:#ffd900; } */ .tpcp_slider_col > a:hover b span::after { border-left: solid 15px #004ea1;} } @media (max-width: 767px) { .tpbnn_section { background-color: #fff; } .tpbnn_section::before { display: none; } .tpbnn_wrapper { padding: 0; margin: 0; overflow-x: hidden; } .tpbnn_wrapper_inner { padding: 30px 0; border-radius: 0; border: none; border-width: 0; } .tpcp_slider { width: 100%; } .tpcp_slider_col { margin: 0 10px; width: auto; transform: translateX(0); } .tpcp_slider_col > a .slider_img { height: auto; } } .slide-dots { display: -webkit-flex; display: flex; width: 87%; justify-content: center; position: absolute; bottom:-70px; } .slide-dots li { list-style: none; } .slide-dots li button { background-color: #d6ccbd; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; margin: 0 1px; height: 6px; width: 60px; text-indent: -9999px;} .slide-dots li.slick-active button { background-color: #000; } @media (max-width: 767px) { .slide-dots { display: none; } } .tpbnn_wrapper_cppy { padding: 40px 0; margin: 0 10%; } .tpbnn_wrapper_cppy > p { text-align: center; font-size: clamp(12px, 18px, 1.4vw); font-weight: 700; color:#000; line-height: 1.6; letter-spacing:.06rem; } @media (max-width: 767px) { .tpbnn_wrapper_cppy { display: none; } } /* ------------ TOP BNN ------------- */ .tpBizBnn_section, .tpFixCol_tpBizBnn_wrapper { width: 100%; padding: 0; margin: 0; position: relative; display: -webkit-flex; display: flex; justify-content: center; } .tpFixCol_tpBizBnn_wrapper { padding: 0 0 100px; } .tpBizBnn_section::before, .tpFixCol_tpBizBnn_wrapper::before { content:""; background-color: #fff; position: absolute; top:80px; left: -10px; right: -10px; bottom: -10px; } .tpFixCol_tpBizBnn_wrapper::before { display: none; } .tpBizBnn_wrapper { padding: 0; margin: 0 10%; width: 100%; max-width: 1000px; } ul.tpBizBnn { display: -webkit-flex; display: flex; justify-content: space-between; } ul.tpBizBnn > li { list-style: none; width: calc(100% / 3 - 15px); padding: 0; margin: 0; } ul.tpBizBnn > li > a { width: 100%; height: 100%; display: -webkit-flex; display: flex; flex-direction: column; background-color: rgba(255,255,255,1); transition: all .5s; } .tpFixCol_tpBizBnn_wrapper ul.tpBizBnn > li { width: calc(50% - 20px); } .tpBizBnn-img { line-height: 0; overflow: hidden; } .tpBizBnn-img > img { line-height: 0; overflow: hidden; transition: all 2s; } .tpBizBnn-hd { padding: 0; border: 1px solid #f6f6f0; border-width: 0 1px 1px; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .tpBizBnn-info { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 0; } .tpBizBnn-ttle { color:#004ea2; text-align: center; font-size: 18px; font-size: clamp(16px, 18px, 1.2vw); line-height: 1.2; font-weight: 700; padding: 0 0 14px; transition: all .5s; } .tpBizBnn-txt { color:#000; text-align: left; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.6; font-weight: 500; padding: 0; width: 100%; } .tpBizBnn-btn { display: -webkit-flex; display: flex; align-items: center; justify-content: flex-end; padding: 20px; } .tpBizBnn-btn.support { justify-content: center; } .tpBizBnn-btn > a, .tpBizBnn-btn > p { display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #004ea1; padding: 12px 20px; margin: 0; line-height: 1; transition: all .5s; transition-delay: 0.2s; } .tpBizBnn-btn > a > span, .tpBizBnn-btn > a > svg, .tpBizBnn-btn > p > span, .tpBizBnn-btn > p > svg { color:#fff; transition: all .5s; transition-delay: 0.2s; } .tpBizBnn-btn > a > span, .tpBizBnn-btn > p > span { font-size: 14px; font-size: clamp(12px, 14px, 1vw); font-weight: 700; letter-spacing:.05rem; line-height: 1; padding: 0 5px 0 0; margin: 0; } .tpBizBnn-btn > a > svg, .tpBizBnn-btn > p > svg { width: 16px; height:16px; } .tpBizBnn-btn.support > a, .tpBizBnn-btn.support > p { background-color: #ffd900;} .tpBizBnn-btn.support > a > span, .tpBizBnn-btn.support > a > svg, .tpBizBnn-btn.support > p > span, .tpBizBnn-btn.support > p > svg { color:#000; } @media (min-width: 768px) { ul.tpBizBnn > li > a:hover { background-color: #f6f6f0; } ul.tpBizBnn > li > a:hover .tpBizBnn-img > img { transform: scale(1.16); } ul.tpBizBnn > li > a:hover .tpBizBnn-txt { color:#004ea2; } ul.tpBizBnn > li > a:hover .tpBizBnn-btn > p { transform: translateY(-6px); background-color: #ffd900; } ul.tpBizBnn > li > a:hover .tpBizBnn-btn > p > span, ul.tpBizBnn > li > a:hover .tpBizBnn-btn > p > svg { color:#000; } ul.tpBizBnn > li > a .tpBizBnn-ttle .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#004ea2, #004ea2) 100% 100% / 0 2px no-repeat; } ul.tpBizBnn > li > a:hover .tpBizBnn-ttle .ahovLine { background-position: 0 100%; background-size: 100% 2px; } } @media (max-width: 767px) { .tpBizBnn_section, .tpFixCol_tpBizBnn_wrapper { background-color: #fff; padding: 20px; } .tpBizBnn_section::before, .tpFixCol_tpBizBnn_wrapper::before { display: none; } .tpBizBnn_wrapper { padding: 0; margin: 0; } .tpBizBnn_wrapper > p { padding: 0 0 20px; margin: 0; width: 100%; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.6; } ul.tpBizBnn { flex-direction: column; } ul.tpBizBnn > li { width: 100%; margin: 0 0 20px; } .tpFixCol_tpBizBnn_wrapper ul.tpBizBnn > li { width: 100%; margin: 0 0 20px; } .tpBizBnn-ttle { font-size: 16px; } .tpBizBnn-txt { font-size: 13px; } .tpBizBnn-btn > p { padding: 12px 16px; margin: 0; width: 100%; } .tpBizBnn-btn > p > span { font-size: 12px; } .tpBizBnn-btn > p > svg { width: 16px; } } /* ------------ TOP CONTENT COMMON ------------- */ .tpFix_section { position: relative; } .tpCoCm_wrapper { width: 100%; padding: 160px 0 0; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: -100vh; min-height: 100vh; } .tpCoCm_bg { position: sticky; top: 0; left: 0; width: 100%; min-height: 100vh; z-index:-1; } .tpCoCm_header { display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; margin: 0 0 40px; width: 100%; } .tpCoCm_header > h2 { padding: 20px 0; margin: 0 0 20px; border: 1px solid #fff; border-width: 1px 0; } .tpCoCm_header > h2 > span { color:#fff; font-size: 60px; font-size: clamp(24px, 64px, 6vw); font-weight: 700; line-height: 1; letter-spacing:.2rem; } .tpCoCm_header > strong { color:#fff; font-size: 24px; font-size: clamp(14px, 24px, 2.4vw); font-weight: 700; line-height: 1.4; text-align: center; } .tpCoCm_header > p { color:#fff; text-align: center; font-size: 18px; font-size: clamp(13px, 18px, 2vw); font-weight: 700; line-height: 1.6; width: 100%; padding: 30px 0 0; margin: 0; } @media (max-width: 767px) { .tpCoCm_header { background-size: cover; padding: 60px 0; margin: 0; } } @media (max-width: 767px) { .tpCoCm_bg { display: none; } .tpCoCm_header > h2 > span { font-size: 24px; } .tpCoCm_wrapper { padding: 0; background: none; background-color: #fff; margin-top: 0; min-height: auto; } } @media (max-width: 374px) { .tpCoCm_header > h2 > span { font-size: 20px; } } /* ------------ TOP LEASING ------------- */ .tpCoCm_wrapper.tpLeasing { padding: 120px 60px 0; margin-top: 0; background: #ffd900 url(/images/top_bg_leasing.svg) center top / 3000px no-repeat; min-height: auto; } .tpCoCm_header.tpLeasing { margin: 0 0 40px; } .tpCoCm_header.tpLeasing > h2 { border: 1px solid #173891; border-width: 1px 0; } .tpCoCm_header.tpLeasing > h2 > span { color:#173891; } .tpCoCm_header.tpLeasing > strong { color:#173891; } .tpCoCm_header.tpLeasing > p { color:#173891; } .tpLeasing .btn_more > a { background-color: #fff; } .tpLeasing_button { width: 100%; display: -webkit-flex; display: flex; justify-content: space-between; max-width: 1100px; padding: 0; margin: 200px 0 80px; } .atensWrapper { width: 100%; max-width: 300px; } .atensWrapper > a { display: -webkit-flex; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; transition: all .5s; position: relative; } .atensWrapper > a svg.iconbg { color:#ffffff; transition: all .5s; } .atensWrapper > a svg.icon { color:#171714; transition: all .5s; } .atens_content { position: absolute; top:5%; left: 5%; bottom: 5%; right: 5%; width: 90%; height: 90%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; } .atens_content > b.icon-ic { width: 40%; } .atens_content > b.icon-ca { width: 65%; padding: 20px 0 0; margin: 0; } .atens_content > p { color:#000; text-align: center; font-size: 22px; font-size: clamp(13px, 22px, 2vw); font-weight: 700; line-height: 1.6; padding: 20px 0 0; transition: all .5s; } .atens_content > p.wat { color:#173891; } .square-in { width: 100%; padding-top: 100%; background-color: #fff; border-radius: 50%; transition: all .5s; } .movie_wrapper { display: -webkit-flex; display: flex; margin: 0 auto; flex-direction: column; align-items: center; width: 100%; padding: 0 10%; margin: 0 0 120px; } .movie_wrapper > p { font-size:16px; font-size: clamp(13px, 18px, 2vw); font-weight: 700; line-height: 1.6; padding: 20px 0 0; margin: 0; } .movie_inner { width: 100%; max-width: 700px; } .movie { position: relative; padding: 0; padding-top: 56.25%; margin: 0; width: 100%; } .movie iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } @media (min-width: 768px) { .tpLeasing .btn_more > a:hover { background-color: #004ea1; } .atensWrapper > a:hover { transform: translateY(-20px); } .atensWrapper > a:hover svg.iconbg { color:#004ea2; } .atensWrapper > a:hover svg.icon { color:#fff!important; } .atensWrapper > a:hover .square-in { background-color: #004ea2; } .atensWrapper > a:hover .atens_content > p { color:#fff; } } @media (max-width: 767px) { .tpCoCm_wrapper.tpLeasing { padding: 60px 20px 0; background: #ffd900 url(/images/top_bg_leasing.svg) center top / 1800px no-repeat; min-height: auto; } .tpCoCm_header.tpLeasing { margin: 0 0 20px; padding: 0; } .tpCoCm_header.tpLeasing > p { padding: 20px 0 0; } .tpLeasing_button { margin: 160px 0 40px; } .atensWrapper { width: calc(50% - 10px); } .movie_wrapper { padding: 0; margin: 0 0 40px; } .atens_content > b.icon-ca { padding: 10px 0 0; } .atens_content > p { font-size: 12px; padding: 10px 0 0; } } @media (max-width: 374px) { .atens_content > p { font-size: 10px; } } /* ------------ TOP CONCEPT ------------- */ .service_concept { width: 100%; background-color: #fff; margin: -1px 0; padding: 0 0 100px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .service_concept > p { text-align: center; font-size: clamp(13px, 20px, 2vw); font-weight: 700; line-height: 3; } @media (max-width: 767px) { .service_concept { display: none; } } /* ------------ TOP CARD ------------- */ .tpCoCm_bg.tpCard { background: url(/images/top_cardbg.jpg) center top / cover no-repeat; } .tpCoCm_wrapper.tpCard { padding: 160px 10% 80px; } .tpCoCm_header.tpCard { margin: 0 0 120px; } .tpCard_content { width: 100%; max-width: 1000px; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tpCard_Set { width: 100%; padding: 0; margin: 0 0 30px; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } .tpCard_Card_imghead { width: 100%; background-color: #f6f6f0; position: relative; text-align: center; padding: 40px 10% 0; margin: 0; display: -webkit-flex; display: flex; justify-content: center; } .tpCard_Card_imghead > p { max-width: 280px; margin: 0 5px; line-height: 0; } .tpCard_Card_body { width: 100%; padding: 20px 40px; border: 1px solid #f6f6f0; border-width: 0 1px 1px; background-color: #fff; flex-grow: 1; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; } .tpCard_Card_body_hd { position: relative; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; } .tpCard_Card_body_hd > h2 { color: #004ea2; text-align: left; font-size: 18px; font-size: clamp(15px, 20px, 2vw); line-height: 1; font-weight: 700; text-align: center; padding: 0 0 10px; width: 100%; } .tpCard_Card_body_hd > h3 { width: 100%; max-width: 400px; padding: 0 0 10px; line-height: 1; } .tpCard_Card_body_hd > p { color: #000; text-align: left; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.6; padding: 0 0 20px; width: 100%; } .tpCard_Card_imghead > ul { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; position: absolute; top: -10px; left: -20px; max-width: 37.7%; } .tpCard_Card_imghead > ul > li { list-style-type: none; width: 45%; margin: 0 5px; } .tpCard_Card_body_hd > ul { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; right: 0; max-width: 20%; } .tpCard_Card_body_hd > ul > li { list-style-type: none; width: 45%; margin: 0 5px; } .tpCard_colm .tpCard_Card_body_hd > ul { display: none; } .tpCard_colm { width: 100%; display: -webkit-flex; display: flex; justify-content: space-between; } .tpCard_colm .tpCard_Set { width: calc(50% - 15px); } .tpCard_colm .tpCard_Card_imghead { justify-content: center; } .tpCard_morinf { background-color: rgba(255,255,255,.7); padding: 20px; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.6; border: 2px solid #fff; } .content_col .tpCard_morinf { background-color: rgba(240,240,240,.7); padding: 20px; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.6; border: 2px solid rgba(240,240,240,1); margin: 80px 0 0; } @media (max-width: 767px) { .tpCoCm_header.tpCard { background: url(/images/top_cardbg.jpg) center top / cover no-repeat; margin: 0; } .tpCoCm_wrapper.tpCard { padding: 0; margin: 0; } .tpCard_Set { margin: 0; } .tpCard_Card_imghead { padding: 20px 20px 0; justify-content: center; } .tpCard_Card_imghead > p { max-width: 160px; } .tpCard_Card_body { padding: 60px 20px 40px; border-width: 0; } .tpCard_colm { flex-wrap: wrap; } .tpCard_colm .tpCard_Set { width: 100%; } .tpCard_colm .tpCard_Card_imghead > ul { display: none; } .tpCard_colm .tpCard_Card_body_hd > ul { display: -webkit-flex; display: flex; justify-content: center; } .tpCard_Card_body_hd > ul { position: absolute; top: -70px; right: 50%; max-width: 140px; transform: translateX(50%); } .tpCard_morinf { background-color: rgba(150,150,150,.1); border: 0; } } /* ------------ TOP SUPPORT ------------- */ .tpCoCm_bg.tpSupport { background: url(/images/top_supportbg.jpg) center center / cover no-repeat; } .tpCoCm_header.tpSupport { margin: 0 0 400px; } .tpCoCm_header.tpSupport > h2 { border: 1px solid #173891; border-width: 1px 0; } .tpCoCm_header.tpSupport > h2 > span { color:#173891; } .tpCoCm_header.tpSupport > strong { color:#173891; } .tpCoCm_header.tpSupport > p { color:#173891; } @media (max-width: 767px) { .tpCoCm_header.tpSupport { background: url(/images/top_supportbg.jpg) center center / cover no-repeat; margin: 0 0 20px; } } .tpSupport_content { width: 100%; max-width: 1000px; } /* ------------ TOP STATION ------------- */ .tpCoCm_bg.tpStation { background: url(/images/top_stationbg.jpg) center bottom / cover no-repeat; } @media (max-width: 767px) { .tpCoCm_header.tpStation { background: url(/images/top_stationbg_sp.jpg) center bottom / cover no-repeat; } } .tpStation_content { background-color: rgba(255,255,255,.9); padding: 40px 50px 20px; margin: 0 0 160px; border-radius: 10px; width: 100%; max-width: 700px; } .tpStation_content > h3 { text-align: center; padding: 0; margin: 0 0 30px; font-size: clamp(13px, 20px, 2vw); font-weight: 700; line-height: 1.6; } .tpStation_content > ul { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 0; margin: 0; } .tpStation_content > ul > li { width: 25%; list-style: none; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; margin: 0 0 30px; } .tpStation_content > ul > li > b { display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 80%; } .tpStation_content > ul > li:nth-child(1) > b > img { width: 46%; } .tpStation_content > ul > li:nth-child(2) > b > img { width: 43%; } .tpStation_content > ul > li:nth-child(3) > b > img { width: 50%; } .tpStation_content > ul > li:nth-child(4) > b > img { width: 38%; } .tpStation_content > ul > li:nth-child(5) > b > img { width: 50%; } .tpStation_content > ul > li:nth-child(6) > b > img { width: 45%; } .tpStation_content > ul > li:nth-child(7) > b > img { width: 48%; } .tpStation_content > ul > li:nth-child(8) > b > img { width: 37%; } .tpStation_content > ul > li > span { text-align: center; font-size: clamp(10px, 16px, 1.4vw); font-weight: 700; line-height: 1.3; padding: 10px 0 0; margin: 0; } @media (max-width: 767px) { .tpStation_content { padding: 40px 20px; margin: 0; } .tpStation_content > h3 { font-size: 13px; margin: 0 0 20px; } .tpStation_content > ul > li { width: calc(100% / 4); margin: 0 0 20px; } .tpStation_content > ul > li:nth-child(1) > b > img { width: 56%; } .tpStation_content > ul > li:nth-child(2) > b > img { width: 53%; } .tpStation_content > ul > li:nth-child(3) > b > img { width: 60%; } .tpStation_content > ul > li:nth-child(4) > b > img { width: 48%; } .tpStation_content > ul > li:nth-child(5) > b > img { width: 60%; } .tpStation_content > ul > li:nth-child(6) > b > img { width: 55%; } .tpStation_content > ul > li:nth-child(7) > b > img { width: 58%; } .tpStation_content > ul > li:nth-child(8) > b > img { width: 47%; } .tpStation_content > ul > li > span { padding: 5px 0 0; letter-spacing:0; } } @media (max-width: 374px) { .tpStation_content > h3 { font-size: 11px; } } .tpStation_btn { padding: 0; margin: 0 0 30px; } .tpStation_btn > a { display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; background-color: #ffd900; border-radius: 5px; padding: 25px 0 25px 50px; margin: 0; transition: all .5s; } .tpStation_btn > a > span { color:#000; width: calc(100% - 50px); text-align: center; font-size: clamp(16px, 26px, 3vw); font-weight: 700; line-height: 1; transition: all .5s; } .tpStation_btn > a > svg { color:#000; width: 30px; height:30px; padding: 0; margin: 0 20px 0 0; transition: all .5s; } @media (min-width: 768px) { .tpStation_btn > a:hover { background-color: #004ea2; transform: translateY(-10px); } .tpStation_btn > a:hover > span { color:#fff; } .tpStation_btn > a:hover > svg { color:#fff; } } @media (max-width: 767px) { .tpStation_btn > a { padding: 15px 0 15px 40px; } .tpStation_btn > a > span { font-size: 16px; } .tpStation_btn > a > svg { width: 20px; } } /* ------------ TOP BOTTOM ------------- */ .tpBottom_section { width: 100%; position: relative; background-color: #fff; line-height: 0; padding: 0; margin: 0; vertical-align: bottom; } #business .tpBottom_section { background-color: #010535; } .tpBottom_background { width: 100%; line-height: 0; padding: 0; margin: 0; vertical-align: bottom; } .tpBottom_background .sponly { opacity: .7; } #business .tpBottom_background .sponly { opacity: 1; } .tpBottom_wrapper { width: 100%; position: absolute; left: 0; top:8%; } .tpBottom_ttle { position: absolute; top: 0; right: 60px; left: 60px; width: calc(100% - 120px); } .tpBottom_img { width: 36%; max-width: 400px; margin: 0 auto; } .tpBottom_txt { text-align: center; padding: 5% 0 0; } .tpBottom_txt p { color:#004ea2; font-size: 20px; font-size: clamp(11px, 40px, 1.6vw); font-weight: 700; line-height: 3; letter-spacing:.2rem; } .tpBottom_txt p > a { color:#004ea2; font-size: 20px; font-size: clamp(18px, 40px, 2.6vw); font-weight: 700; line-height: 1; letter-spacing:.2rem; display: inline-block; margin: 5% 0 0; text-decoration: underline; transition: all .5s; } .tpBottom_txt span { color:#004ea2; font-size: 16px; font-size: clamp(11px, 16px, 1.6vw); font-weight: 400; line-height: 1; } #business .tpBottom_txt { text-align: center; padding: 10% 0 0; } #business .tpBottom_txt p { color:#fff; } #business .tpBottom_txt p > a { color:#fff; margin: 10% 0 0; } #business .tpBottom_txt span { color:#fff; } @media (min-width: 768px) { .tpBottom_txt p > a:hover { color:#ffd900; text-decoration: none; } #business .tpBottom_txt p > a:hover { color:#ffd900; } } @media (max-width: 767px) { .tpBottom_wrapper { width: 100%; position: absolute; left: 0; top:4%; } .servicePage .tpBottom_wrapper { top:30%; } .tpBottom_ttle { top:30px; right: 20px; left: 20px; width: calc(100% - 40px); } .tpBottom_txt { padding: 0; } .tpBottom_txt p { font-size: 11px; line-height: 2; } .tpBottom_txt p > a { font-size: 18px; margin: 20px 0 0; } } /* ------------ TOP HISTORY ------------- */ .tpHistory_section { background-color: #fff; } .tpHistory_header { padding: 90px 0 40px; margin: 0 10%; } .tpHistory_header h2 { padding: 0; margin: 0; } .tpHistory_header h2 > span { color:rgba(23,60,138,.8); font-size: 52px; font-size: clamp(24px, 55px, 4vw); line-height: 1; font-weight: 500; letter-spacing:.6rem; transition: all .3s; } .tpHistory_wrapper { background: url(/images/logobg.jpg) bottom center no-repeat; background-size: cover; padding: 40px 0 180px; margin: 0; } .tpHistory_inner { padding: 0; margin: 0 10%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } .tpHistory_inner .logo { width: 100%; max-width: 160px; line-height: 1; padding: 0 0 20px; margin: 0; } .tpHistory_setmin { width: 100%; padding: 0; margin: 0 0 40px; } .tpHistory_setmin > h3 { color:#051326; font-size: 26px; font-size: clamp(18px, 26px, 2.5vw); line-height: 1; font-weight: 700; letter-spacing:.1rem; border-bottom: 1px solid #004ea2; padding: 0 0 12px; margin: 0 0 12px; } .tpHistory_setmin > p { color:#02080f; font-size: 17px; font-size: clamp(13px, 17px, 1.6vw); line-height: 1.8; } .tpHistory_setmin > ul { display: -webkit-flex; display: flex; justify-content: space-between; padding: 10px 0 0; margin: 0; } .tpHistory_setmin > ul > li { list-style: none; width: calc(100% / 3 - 6%); position: relative; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } .tpHistory_setmin > ul > li::before { content:""; position: absolute; top: 0; left: -24%; width: 12%; height: 100%; background: url(/images/arrow.svg) center 40% no-repeat; background-size: contain; } .tpHistory_setmin > ul > li:first-child::before { display: none; } .tpHistory_setmin > ul > li > strong { color:#051326; font-size: 40px; font-size: clamp(30px, 40px, 3.6vw); line-height: 1; font-weight: 300; padding: 0 0 10px; margin: 0; } .tpHistory_setmin > ul > li > span { width: 100%; height: 120px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } span.lg1962 > img { width: 160px; } span.lg1986 > img { width: 130px; } span.lg2008 > img { width: 100px; } .tpHistory_setmin > ul > li > p { color:#02080f; font-size: 15px; font-size: clamp(12px, 15px, 1.4vw); line-height: 1.8; padding: 10px 0 0; margin: 0; } @media (max-width: 767px) { .tpHistory_header { padding: 90px 0; margin: 0; background: url(/images/logobg.jpg) bottom center no-repeat; background-size: cover; } .tpHistory_header h2 { text-align: center; } .tpHistory_header h2 > span { letter-spacing:.3rem; text-align: center; font-size: 24px; } .tpHistory_wrapper { background : none; padding: 40px 0; margin: 0; } .tpHistory_inner { margin: 0 20px; } .tpHistory_inner .logo { max-width: 120px; } .tpHistory_setmin > h3 { font-size: 18px; } .tpHistory_setmin > p { font-size: 13px; } .tpHistory_setmin > ul { flex-direction: column; padding: 10px 0 0; margin: 0; } .tpHistory_setmin > ul > li { width: 100%; margin: 50px 0 0; } .tpHistory_setmin > ul > li:first-child { margin: 0; } .tpHistory_setmin > ul > li::before { content:""; position: absolute; top: -50px; left: 0; right: 0; width: 100%; height: 50px; background-position: center; transform: rotateZ(90deg); } .tpHistory_setmin > ul > li > strong { font-size: 30px; } .tpHistory_setmin > ul > li > span { height: auto; } .tpHistory_setmin > ul > li > p { max-width: 230px; } } /* ------------ TOP NEWS ------------- */ .tpNews_section { background-color: #fff; display: -webkit-flex; display: flex; align-items: center; flex-direction: column; padding: 0 10% 60px; } #business .tpNews_section { padding: 0 10% 100px; } .tpNews_wrapper { width: 100%; max-width: 1000px!important; } .tpNews_header { padding: 90px 0 40px; margin: 0; } #business .tpNews_header { padding: 90px 0 40px; margin: 0; } .tpNews_header h2 { padding: 0; margin: 0; text-align: center; } .tpNews_header h2 > span { color:rgba(23,60,138,.8); font-size: 60px; font-size: clamp(30px, 62px, 5vw); line-height: 1; letter-spacing:.6rem; transition: all .3s; } .tpNews_Message { width: 100%; border: 1px solid #ff0000; margin: 0 0 40px; } .tpNews_Message > p, .tpNews_Message > a { text-align: left; padding: 20px 20px 16px; font-size: 16px; font-size: clamp(13px, 16px, 1.8vw); line-height: 1.5; color:#ff0000; } @media (max-width: 767px) { .tpNews_Message { margin: 0 0 20px; } .tpNews_Message > p, .tpNews_Message > a { padding: 15px 15px 12px; } } .tpNews_inner { padding: 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } .tpNews_inner .btn_more { margin: 40px 0 0; } .tpNews_inner > dl { display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; } .tpNews_inner > dl > dt, .tpNews_inner > dl > dd { border-top: 1px solid #000; margin: 0; padding: 20px 0; } .tpNews_inner > dl > dt { width: calc(24% - 10px); color:#959492; font-size: 16px; font-size: clamp(14px, 16px, 1.5vw); line-height: 1.4; font-weight: 500; } .tpNews_inner > dl > dd { width: calc(76% - 10px); } .tpNews_inner > dl > dd a { display: block; } .tpNews_inner > dl > dd strong { color:#02080f; font-size: 16px; font-size: clamp(14px, 16px, 1.5vw); line-height: 1.4; font-weight: 700; display: block; padding: 0; } .tpNews_inner > dl > dd p { color:#02080f; font-size: 16px; font-size: clamp(13px, 16px, 1.4vw); line-height: 1.6; } .tpNews_inner > dl > dd:last-child { border-bottom: 1px solid #000; } @media (min-width: 768px) { .tpNews_inner > dl > dt:nth-last-child(2) { border-bottom: 1px solid #000; } .tpNews_inner > dl > dd a:hover strong { color:#004ea2; } .tpNews_inner > dl > dd a:hover p { color:#004ea2; } .tpNews_inner > dl > dd a .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#004ea2, #004ea2) 100% 100% / 0 2px no-repeat; } .tpNews_inner > dl > dd a:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } } @media (max-width: 767px) { .tpNews_section { padding: 0 20px 20px; } #business .tpNews_section { padding: 0 20px 40px; } .tpNews_header { padding: 20px 0; } #business .tpNews_header { padding: 20px 0; } .tpNews_header h2 { text-align: center; } .tpNews_header h2 > span { font-size: 30px; letter-spacing:.3rem; text-align: center; } .tpNews_inner > dl > dt { font-size: 14px; width: 100%; padding: 20px 0 0; } .tpNews_inner > dl > dd { font-size: 14px; width: 100%; padding: 10px 0; border: none; } .tpNews_inner > dl > dd strong { font-size: 14px; padding: 0 0 10px; } .tpNews_inner > dl > dd p { font-size: 13px; } } .tpNews_inner_ctpls { padding: 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } dl.news_set { display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0 0 40px; } dl.news_set > dt, dl.news_set > dd { border-top: 1px solid #000; margin: 0; padding: 20px 0; } dl.news_set > dt { width: calc(24% - 10px); } dl.news_set > dt > span { display: block; color:#959492; font-size: 16px; font-size: clamp(15px, 16px, 1.5vw); line-height: 1; font-weight: 500; margin: 10px 0; } dl.news_set > dd { width: calc(76% - 10px); display: -webkit-flex; display: flex; align-items: flex-start; gap: 0 20px; } dl.news_set > dd:last-child { border-bottom: 1px solid #000; } dl.news_set > dd > p { padding: 0; margin: 0; font-weight: 500; } dl.news_set > dd > p.nscate { width: 9em; font-size: 14px; line-height: 1; font-weight: 700; border-radius: 50px; border: 1px solid #000; padding: 5px; margin: 5px 0; text-align: center; } dl.news_set > dd > p.nscate.nscate01 { color:#7d7d7d; border: 1px solid #7d7d7d; } dl.news_set > dd > p.nscate.nscate02 { color:#004ea2; border: 1px solid #004ea2; } dl.news_set > dd > p.nscate.nscate03 { color:#7d7d7d; border: 1px solid #7d7d7d; } dl.news_set > dd > p.newstxt { width: calc(100% - 8em); padding: 5px 0 0; margin: 0; } dl.news_set > dd > p.newstxt a { color:#092c87; text-decoration: underline; transition: all .5s; } dl.news_set > dd > p.newstxt a svg.icon { color:#7d7d7d; width: 26px; height: 26px; margin: 0 0 0 5px; transition: all .5s; } @media (min-width: 768px) { dl.news_set > dt:nth-last-child(2) { border-bottom: 1px solid #000; } dl.news_set > dd > p.newstxt a:hover { text-decoration: none; } dl.news_set > dd > p.newstxt a:hover svg.icon { color:#004ea2; } } @media (max-width: 767px) { dl.news_set { margin: 0 0 30px; } dl.news_set > dt { width: 100%; padding: 15px 0 0; } dl.news_set > dt > span { margin: 0; } dl.news_set > dd { font-size: 14px; width: 100%; padding: 10px 0; border: none; } dl.news_set > dd > p.nscate { width: 8em; font-size: 11px; padding: 5px 5px 3px; } } /* ------------ PAGE NEWS ------------- */ .pgNews_wrapper { display: -webkit-flex; display: flex; justify-content: space-between; position: relative; align-items: flex-start; } .pgNews_menu { width: 15%; position: sticky; top:100px; left:0; } .pgNews_menu > strong { display: block; width: 100%; font-size: 20px; font-size: clamp(16px, 20px, 2vw); line-height: 1; font-weight: 700; margin: 0 0 20px; } .pgNews_menu > ul { display: -webkit-flex; display: flex; flex-direction: column; gap: 20px 0; width: 100%; border-left: 1px solid #000; } .pgNews_menu > ul > li { list-style-type: none; padding: 0; width: 100%; } .pgNews_menu > ul > li > a { display: block; width: 100%; padding: 2px 0 2px 20px; } .pgNews_menu > ul > li > a > span { font-size: 20px; font-size: clamp(16px, 20px, 2vw); line-height: 1; font-weight: 700; } .pgNews_list { width: calc(100% - 15%); } .pgNews_list .newsYear { display: block; font-size: 38px; font-size: clamp(30px, 38px, 4vw); line-height: 1; font-weight: 700; margin: 0 0 20px; } .pgNews_list dl.news_set { margin-top: 40px; } @media (max-width: 767px) { .pgNews_menu { display: none; } .pgNews_list { width: 100%; } } /* ------------ TOP FIX COLUMN ------------- */ .tpFixCol_section { position: relative; width: 100%; min-height: 100vh; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; background-color: #fff; margin: -1px 0; } .tpFixCol_bg_Message { background: url(/images/top_mess_bg.jpg) center center / cover no-repeat; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .tpFixCol_bg_Recruit { background: url(/images/top_rec_bg.jpg) center right / cover no-repeat; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .tpFixCol_wrapper { width: 100%; position: relative; padding: 0 0 30vh; margin: 0 10%; transform: translateY(-30vh); max-width: 1000px; } .tpFixCol_wrapper h2 { padding: 0; margin: 0 0 40px; } .tpFixCol_wrapper h2 br { display: none; } .tpFixCol_wrapper h2 span { color:#fff; font-size: 60px; font-size: clamp(30px, 62px, 5vw); line-height: 1; font-weight: 400; letter-spacing:.6rem; transition: all .3s; } .tpFixCol_catereed { padding: 0; margin: 0 0 40px; } .tpFixCol_catereed p { color: #fff; font-size: 20px; font-size: clamp(13px, 20px, 1.6vw); line-height: 1.8; font-weight: 500; letter-spacing: .06rem; } @media (max-width: 767px) { .tpFixCol_wrapper h2 br { display: inline-block; } } /* ------------ TOP RECRUIT ------------- */ .tpRecruit_section { position: relative; width: 100%; min-height: 100vh; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; } .tpRecruit_bg { background: url(/images/top_rec_bg.jpg) center right / cover no-repeat; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .tpRecruit_wrapper { width: 100%; position: relative; padding: 0 0 100px; margin: 0 10%; transform: translateY(-30vh); max-width: 1000px; } .tpRecruit_wrapper h2 { padding: 0; margin: 0; } .tpRecruit_wrapper h2 > span { color:#fff; font-size: 55px; font-size: clamp(30px, 55px, 4vw); line-height: 1; font-weight: 400; letter-spacing:.6rem; transition: all .3s; } .tpRecruit_wrapper p { color: #fff; font-size: 20px; font-size: clamp(11px, 20px, 1.6vw); line-height: 1.8; font-weight: 500; letter-spacing: .06rem; } /* ------------ BREADCRUMB ------------- */ .breadcrumb { display: -webkit-flex; display: flex; align-items: center; padding: 80px 0 0 10%; margin: 0; background-color: #fff; overflow-x: auto; } .breadcrumb::-webkit-scrollbar { height: 4px; width: 100%; } .breadcrumb::-webkit-scrollbar-track { background: #ccc; } .breadcrumb::-webkit-scrollbar-thumb { background: #004ea2; border-radius: 0; } .breadcrumb ol { display: -webkit-flex; display: flex; align-items: center; height: 60px; } .breadcrumb ol li { list-style:none; padding:0 20px 0 10px; word-break: keep-all; white-space: nowrap; line-height: 1; flex-shrink: 0; color:#000; font-weight: 700; font-size: 14px; } .breadcrumb ol li:not(:last-child) { position:relative; padding-right:20px; } .breadcrumb ol li:not(:last-child)::after { content: "/"; display: block; position: absolute; top: 0; right: 0; } .breadcrumb ol li a { color:#999; display: block; text-decoration:none; } .breadcrumb ol li a span { position: relative; } @media (min-width: 768px) { .breadcrumb ol li a:hover { color:#004ea2; } .breadcrumb ol li a .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#004ea2, #004ea2) 100% 100% / 0 2px no-repeat; } .breadcrumb ol li a:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } } @media (max-width: 1200px) { .breadcrumb { padding: 80px 0 0 5%; } } @media (max-width: 767px) { .breadcrumb { padding: 60px 0 0 5px; } .breadcrumb ol { display: -webkit-flex; display: flex; align-items: center; height: 40px; } .breadcrumb ol li { padding:0 10px; font-size: 12px; } .breadcrumb ol li:not(:last-child) { padding-right:10px; } } /* ------------ SECOND DIRECTORY ------------- */ .secondHero { width: 100%; height: 360px; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); } .secondHero.hero-logo { background: url(/images/hero-logo.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-company { background: rgb(0,78,162,.5) url(/images/hero-company.jpg) center center / cover no-repeat; background-blend-mode: multiply; } .secondHero.hero-barn { background: rgb(0,78,162,.5) url(/images/hero-barn.jpg) center center / cover no-repeat; background-blend-mode: multiply; } .secondHero.hero-card { background: rgb(0,78,162,.5) url(/images/hero-card.jpg) center center / cover no-repeat; background-blend-mode: multiply; } .secondHero.hero-carcare { background: url(/images/hero-carcare.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-idea { background: url(/images/hero-idea.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-list { background: url(/images/hero-list.jpg) center bottom / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-officer { background: url(/images/hero-officer.jpg) center top / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-financial { background: url(/images/hero-financial.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-english { background: url(/images/hero-english.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-news { background: url(/images/hero-news.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-history { background: url(/images/hero-history.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-associated { background: url(/images/hero-associated.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-csr { background: url(/images/hero-csr.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero.hero-outline { background: url(/images/hero-outline.jpg) center center / cover no-repeat, linear-gradient(90deg, rgba(109,109,109,1) 0%, rgba(122,111,167,1) 100%); background-blend-mode: multiply; } .secondHero > h1 { z-index: 2; color:#ffffff; font-size: 72px; font-size: clamp(20px, 80px, 6vw); font-weight: 700; line-height: 1; letter-spacing:.4rem; padding: 0; margin: 0 0 20px; } .secondHero > strong { z-index: 2; color:#ffffff; font-size: 24px; font-size: clamp(16px, 24px, 2.4vw); font-weight: 500; line-height: 1; padding: 0; margin: 0; } @media (max-width: 767px) { .secondHero { height: 200px; } .secondHero > h1 { font-size: 30px; line-height: 1.4; margin: 0 0 10px; letter-spacing:.2rem; text-align: center; } .secondHero > strong { font-size: 16px; } } /* ------------ CONTENT ------------- */ .content__header { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; padding: 0 10%; } .content__header.btmsps { margin-bottom:60px; } .content { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; padding: 60px 10% 80px; } .content.dan2 { padding: 60px 10% 0; } .content__title { width: 100%; padding: 60px 0 0; margin: 0; } .contents .content__title { width: 100%; padding: 0 0 40px; margin: 0; } .content__title h1 { position: relative; padding: 3px 0 0 50px; margin: 0; font-size: 40px; font-size: clamp(22px, 46px, 3.6vw); font-weight: 900; line-height: 1; letter-spacing:.2rem; } .content__title h1 span { font-size: 28px; font-size: clamp(14px, 28px, 2.8vw); } .content__title h1::before { content:""; background: url(/images/slash.svg) 0 center no-repeat; background-size: contain; position: absolute; top: 0; bottom: 0; left: 0; height: 100%; max-height: 66px; width: 0; padding-left: 79%; } .content_col_wrapper { width: 100%; padding: 0; display: -webkit-flex; display: flex; gap: 0 40px; } .content_col { width: 100%; padding: 0 0 60px; position: relative; } .content_col_wrapper .content_col { width: 50%; } .content_col.center { text-align: center; } .content_col h2 { font-size: 22px; font-size: clamp(16px, 24px, 2vw); line-height: 1.4; font-weight: 700; padding: 0 0 10px; margin: 0; } .content_col h3 { font-size: 16px; font-size: clamp(15px, 18px, 1.6vw); font-weight: 700; line-height: 1.4; padding: 0 0 10px; margin: 0; } .content_col strong { font-size: 16px; font-size: clamp(15px, 18px, 1.6vw); font-weight: 700; line-height: 1.4; padding: 0 0 5px; margin: 0; } .content_col p { font-size: 16px; font-size: clamp(14px, 18px, 1.5vw); line-height: 1.8; padding: 0; margin: 0; position: relative; line-break:strict; } .content_col p a { text-decoration: underline; color:#004ea2; } .content_col p.indent { margin-left: 1.5em; } .content_col p.small { font-size: 14px; font-size: clamp(12px, 14px, 1vw); line-height: 1.6; margin-top: 20px; } .content_col p.squea { padding-left: 1.4em; font-size: 16px; font-size: clamp(15px, 18px, 1.6vw); font-weight: 700; margin: 10px 0 0; line-break: strict;} .content_col p.squea::before { content:""; width: 1em; height: 1em; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #004ea2;} .content_col ul.lsdisc { margin: 5px 0 20px; } .content_col ul.lsdisc > li { list-style-type: disc; margin: 0 0 0 1.5em; padding: 0 0 5px; font-size: 16px; font-size: clamp(14px, 18px, 1.5vw); line-height: 1.4; } .content_col_segm { width: 100%; padding: 30px 0 0; margin: 0; } .ulsqBlue { display: -webkit-flex; display: flex; flex-direction: column; width: 100%; } .ulsqBlue > li { list-style: none; position: relative; padding: 0 0 0 1.5em; margin: 0 0 15px; font-size: 20px; font-size: clamp(15px, 20px, 1.8vw); line-height: 1.2; } .ulsqBlue > li::before { content:""; width: 1em; height: 0; padding: 0 0 1em; background-color: #004ea2; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ulsqBlue > li:last-child { padding-bottom: 0; } .ulsqBlue.ideapage { width: auto; padding: 0 0 30px; margin: 0 auto; align-items: flex-start; } .ulsqBlue.ideapage > li { padding: 0 0 0 1.5em; margin: 0 0 25px; font-size: 22px; font-size: clamp(16px, 22px, 2.4vw); line-height: 1.2; font-weight: 700; } @media (max-width: 1200px) { .content__header { padding: 0 60px; } .content { padding: 40px 80px 20px; } .content__title { padding: 40px 0 0; } .content_col { padding: 0 0 40px; } .content_col_segm { padding: 20px 0 0; } } @media (max-width: 767px) { .content__header { padding: 0 20px 0 12px; } .content__header.btmsps { margin-bottom:30px; } .content { padding: 30px 20px 20px; } .content.dan2 { padding: 30px 20px 0; } .content__title { padding: 30px 0 0; } .content__title h1 { font-size: 21px; padding: 2px 0 0 24px; letter-spacing:.05rem; } .content__title h1::before { max-height: 26px; } .content_col { padding: 0 0 30px; } .content_col h2 { font-size: 16px; } .content_col h3 { font-size: 15px; } .content_col p { font-size: 14px; } .content_col_wrapper { flex-wrap: wrap; } .content_col_wrapper .content_col { width: 100%; } .ulsqBlue > li { font-size: 15px; } .ulsqBlue.ideapage { padding: 0; } .ulsqBlue.ideapage > li { font-size: 16px; } } .content__wrapper { width: 100%; max-width: 1000px; position: relative; margin: 0 auto;} /* ------------ SUB CATEGORY ------------- */ .subCategory__wrapper { display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; gap: 60px 40px; width: 100%; margin: 0; } .subCategory__wrapper h3.title02 { width: 100%; border-left: 8px solid #004aa6; background: #ffd900; padding: 8px 15px; font-size: 2.4rem; font-weight: bold; margin-bottom: 40px; } .subCategory__wrapper .nolink, .subCategory__wrapper > a { width: calc(50% - 20px); padding: 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; } .subCategory__wrapper > a.full { width: 100%; } .subCategory__wrapper .nolink > b, .subCategory__wrapper > a > b { height: 0; overflow: hidden; padding: 0 0 65%; margin: 0; background-color: #fff; } .subCategory__wrapper .nolink.linksss > b { display: block; margin: 0 0 40px; } .subCategory__wrapper .nolink b > img, .subCategory__wrapper > a > b > img { width: 100%; transition: all .5s; opacity: 1; } .subCategory__wrapper .nolink strong, .subCategory__wrapper > a > strong { font-size: 20px; font-size: clamp(15px, 20px, 1.8vw); font-weight: 700; line-height: 1; margin: 20px 0 0; } .subCategory__wrapper .nolink hr.bar-m, .subCategory__wrapper > a > hr.bar-m { margin: 15px 0; } .subCategory__wrapper .nolink p, .subCategory__wrapper > a > p { font-size: 16px; font-size: clamp(13px, 16px, 1.3vw); line-height: 1.6; margin: 0; } .subCategory__wrapper .nolink p.enpinblk, .subCategory__wrapper > a > p.enpinblk { margin-top: 20px; } .subCategory__wrapper > a p { color:#000; } .subCategory__wrapper > a p span { text-decoration: underline; } .subCategory__wrapper > a p svg.icon { width: 32px; height: 32px; vertical-align: bottom; } .subCategory__wrapper .nolink a { margin: 0 0 30px; } .subCategory__wrapper .nolink a hr { margin: 10px 0; } @media (min-width: 768px) { .subCategory__wrapper > a:hover > b > img { transform: scale(1.1); opacity: .6; } .subCategory__wrapper > a:hover > strong { color:#004ea2; } .subCategory__wrapper > a:hover p { color:#004ea2; } } @media (max-width: 767px) { .subCategory__wrapper { gap: 30px 20px; width: 100%; margin: 0; } .subCategory__wrapper .nolink, .subCategory__wrapper > a { width: calc(50% - 10px); } .subCategory__wrapper.spcol1 > a { width: 100%; } .subCategory__wrapper.subCard .nolink, .subCategory__wrapper.subCard > a { width: 100%; } .subCategory__wrapper .nolink > strong, .subCategory__wrapper > a > strong { font-size: 15px; margin: 10px 0 0; } .subCategory__wrapper .nolink > hr.bar-m, .subCategory__wrapper > a > hr.bar-m { margin: 5px 0; } .subCategory__wrapper .nolink > p, .subCategory__wrapper > a > p { font-size: 13px; } } /* ------------ PAGE CARD TOP ------------- */ /* CARD main */ .cardmainimg { margin: 0; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -10; } .cardmainimg-kygnus_jaccs { width: 100%; height: 100%; background: url(/images/card/bg_main_jaccs.jpg) center center / cover no-repeat; } .cardmainimg-obbliarufa { width: 100%; height: 100%; background: url(/images/card/bg_main_obbli.jpg) center center / cover no-repeat; } .cardmainimg-business_card { width: 100%; height: 100%; background: url(/images/card/bg_main_business.jpg) center center / cover no-repeat; } .topmainCard { padding: 0 10%; margin: 0; height: calc(100vh - 140px); min-height: 600px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } /* CARD main kygnus_jaccs */ .topmainCard.kj { height: calc(100vh - 220px); min-height: 600px; } .mainCard_kj__wrapper { padding: 20px 0; margin: 0 auto; width: 100%; max-width: 1000px; } .mainCard_kj__wrapper > h1 { padding: 0 0 30px; margin: 0 auto; max-width: 800px; } .mainCard_kj_midl { display: -webkit-flex; display: flex; justify-content: space-between; } .mainCard_kj_midl > li {list-style-type: none; padding: 0; display: -webkit-flex; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .mainCard_kj_midl > li.left { width: calc(48% - 4%); } .mainCard_kj_midl > li.right { width: calc(52% - 4%); } .mainCard_kj_midl > li p { width: 100%; } .mainCard_kj_midl > li p.card_kj_w { width: 90%; padding: 0 0 30px; } .mainCard_kj_midl > li p.card_kj_new { width: 90%; padding: 0 0 20px; } .kjmain_bottom { width: 100%; height: 80px; background-color: #004ea2; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .kjmain_bottom > strong { color:#fff; font-size: 40px; font-size: clamp(18px, 42px, 3.4vw); line-height: 1; font-weight: 700; letter-spacing: .14rem; } .kjmain_bottom > p { background-color: #ff7a00; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 10px 30px; margin: 0 0 0 5%; border-radius: 50px; } .kjmain_bottom > p > span { color:#fff; font-size: 20px; font-size: clamp(14px, 20px, 1.8vw); line-height: 1; font-weight: 700; } /* CARD main obbliarufa */ .mainCard_ob__wrapper { padding: 20px 0; margin: 0 auto; max-width: 1000px; } .mainCard_ob__wrapper > h1 { padding: 0 0 30px; margin: 0; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mainCard_ob__wrapper > h1 > b { width: 50%; max-width: 400px; padding: 0 0 20px; } .mainCard_ob__wrapper > h1 > strong { padding: 0 0 20px; color:#fff; font-size: 20px; font-size: clamp(20px, 100px, 9vw); line-height: 1; font-weight: 700; letter-spacing:.2rem; } .mainCard_ob_midl { display: -webkit-flex; display: flex; justify-content: space-between; } .mainCard_ob_midl > li {list-style-type: none; padding: 0; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; } .mainCard_ob_midl > li.left { width: calc(52% - 2%); } .mainCard_ob_midl > li.left > p { padding: 0 0 4px; margin: 0 0 28px; color:#fff; font-size: 26px; font-size: clamp(14px, 28px, 2vw); line-height: 1; font-weight: 700; letter-spacing:.2rem; border-bottom: 1px solid #fff; } .mainCard_ob_midl > li.right { width: calc(48% - 2%); } /* CARD main business_card */ .topmainCard.bz { height: calc(100vh - 220px); min-height: 640px; position: relative; transform: translateY(50px); z-index: 1; } .mainCard_bz__wrapper { padding: 20px 0; margin: 0 auto; width: 100%; max-width: 1000px; } .mainCard_bz__wrapper > h1 { padding: 0; margin: 0; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; } .mainCard_bz__wrapper > h1 > b { width: 50%; max-width: 400px; padding: 0 0 20px; } .mainCard_bz__wrapper > h1 > strong { padding: 0 0 20px; color:#fff; font-size: 20px; font-size: clamp(20px, 100px, 9vw); line-height: 1; font-weight: 700; letter-spacing:.2rem; } .mainCard_bz_midl { display: -webkit-flex; display: flex; width: 100%; } .mainCard_bz_midl > li { list-style-type: none; padding: 0; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .mainCard_bz_midl > li.left { width: 50%; } .mainCard_bz_midl > li.left > p { padding: 0 0 4px; margin: 0 0 32px; color:#fff; font-size: 26px; font-size: clamp(14px, 28px, 2vw); line-height: 1; font-weight: 700; letter-spacing:.2rem; border-bottom: 1px solid #fff; } .mainCard_bz_midl > li.right { width: 50%; position: relative; align-items: flex-end; } .mainCard_bz_midl > li.right > b { width: 90%; transform: translateY(30px); } .bzmain_bottom { width: 100%; height: 80px; background-color: #259415; display: -webkit-flex; display: flex; align-items: center; padding: 0 10%; justify-content: center; z-index: 0; } .bzmain_bottom > strong { color:#fff; font-size: 40px; font-size: clamp(18px, 42px, 3.4vw); line-height: 1; font-weight: 700; letter-spacing: .14rem; width: 100%; max-width: 1000px; } @media (orientation: portrait) and (max-width: 767px) { .cardmainimg { min-height: calc( var(--vh) * 100 ); } .topmainCard { padding: 0 40px; min-height: 400px; } /* CARD main kygnus_jaccs */ .topmainCard.kj { min-height: 460px; } .mainCard_kj__wrapper > h1 { padding: 0 0 10px; } .mainCard_kj_midl { flex-direction: column; align-items: center; } .mainCard_kj_midl > li.left { order:2; width: 100%; } .mainCard_kj_midl > li.right { order:1; width: 100%; } .mainCard_kj_midl > li p { width: 75%; } .mainCard_kj_midl > li p.card_kj_w { width: 65%; padding: 10px 0; } .mainCard_kj_midl > li p.card_kj_new { width: 65%; padding: 0 0 10px; } .kjmain_bottom { height: 75px; flex-direction: column; align-items: center; justify-content: center; } .kjmain_bottom > p { padding: 5px 20px; margin: 10px 0 0; } /* CARD main obbliarufa */ .mainCard_ob__wrapper > h1 { padding: 0 0 20px; } .mainCard_ob__wrapper > h1 > b {padding: 0 0 10px; } .mainCard_bz__wrapper > h1 > strong { font-size: 42px; } .mainCard_ob_midl { flex-direction: column; align-items: center; } .mainCard_ob_midl > li.left { order:2; width: 100%; padding: 30px 0 0; } .mainCard_ob_midl > li.left > p { padding: 0 0 2px; margin: 0 0 20px; color:#fff; } .mainCard_ob_midl > li.right { order:1; width: 75%; max-width: 300px; } /* CARD main business_card */ .topmainCard.bz { min-height: 460px; transform: translateY(30px); z-index: 0; } .mainCard_bz__wrapper > h1 { padding: 0 0 10px; } .mainCard_bz__wrapper > h1 > b {padding: 0 0 10px; } .mainCard_bz_midl { flex-direction: column; align-items: center; } .mainCard_bz_midl > li.left { width: 100%; } .mainCard_bz_midl > li.left > p { padding: 0 0 2px; margin: 0 0 15px; } .mainCard_bz_midl > li.right { width: 100%; align-items: center; } .mainCard_bz_midl > li.right > b { width: 70%; transform: translateY(0); } .bzmain_bottom { height: 60px; flex-direction: column; align-items: center; justify-content: center; padding: 0; z-index: 1; } .bzmain_bottom > strong { text-align: center; } } @media (max-width: 374px) { .mainCard_bz_midl > li.left > p { font-size: 12px; letter-spacing:.14rem; } } /* ------------ PAGE CARD ------------- */ .cardcontent { background-color: #fff; padding: 0 10%; margin: 0; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .cardcontent__wrapper { width: 100%; max-width: 1000px; padding: 100px 0; } .pointBalloon { display: -webkit-flex; display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; max-width: 600px; position: relative; background-color: #004ea2; border-radius: 5px; padding: 0; margin: 0 0 40px; } .pointBalloon::after { content: ""; position: absolute; bottom: -56px; left: 50%; margin-left: -24px; border: 24px solid transparent; border-top: 32px solid #004ea2; } .pointBalloon > span { color: #fff; font-size: 36px; font-size: clamp(13px, 36px, 3vw); line-height: 1; font-weight: 700; letter-spacing:.14rem; text-align: center; margin: 0; z-index: 1; } .bc_green .pointBalloon { background-color: #259415; } .bc_green .pointBalloon::after { border-top: 32px solid #259415; } .bc_red .pointBalloon { background-color: #c5000c; } .bc_red .pointBalloon::after { border-top: 32px solid #c5000c; } .bc_yellow .pointBalloon { background-color: #ffe556; } .bc_yellow .pointBalloon::after { border-top: 32px solid #ffe556; } .bc_yellow .pointBalloon > span { color: #001f4c; } @media (max-width: 767px) { .cardcontent { padding: 0 20px; } .cardcontent__wrapper { padding: 40px 0; } .pointBalloon { margin: 0 0 26px; height: 40px; max-width: 100%; } .pointBalloon::after { bottom: -42px; } } .pointBalloon__wrapper { display: -webkit-flex; display: flex; gap: 0 30px; } .pointBalloon__li { width: 50%; display: -webkit-flex; display: flex; flex-direction: column; } .caxam__wrapper { display: -webkit-flex; display: flex; flex-direction: column; width: 100%; } .pointBalloon__li .caxam__wrapper { height: calc(100% - 110px); } .caxam_header { background-color: #001f4c; border-radius: 5px 5px 0 0; text-align: center; padding: 10px; color: #fff; font-size: 20px; font-size: clamp(14px, 20px, 2vw); line-height: 1; font-weight: 700; letter-spacing:.14rem; } .caxam_content { background-color: #004ea2; flex-grow: 1; border-radius: 0 0 5px 5px; text-align: center; } .caxam_content strong { display: block; text-align: center; color: #fff; font-size: 30px; font-size: clamp(14px, 30px, 2.6vw); line-height: 1; font-weight: 700; letter-spacing:.14rem; padding: 30px 0 0; } .caxam_content p { line-height: 1; margin: 0; } .bc_yellow .caxam_header { background-color: #ff7a00; color:#ffe556; } .bc_yellow .caxam_content { background-color: #ffe556; } .bc_yellow .caxam_content strong { color: #001f4c; } .bc_red .caxam_header { background-color: #c5000c; } .bc_red .caxam_content { background-color: #e56c46; } @media (max-width: 767px) { .pointBalloon__wrapper { gap: 0 10px; } .pointBalloon__li .caxam__wrapper { height: calc(100% - 66px); } .caxam_content strong { padding: 10px 0 0; line-height: 1.2; } } .application { width: 100%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 40px 0; margin: 0; } .application > a { width: 100%; max-width: 600px; line-height: 1; opacity: 1; transition: all .5s; } @media (min-width: 768px) { .application > a:hover { opacity: .6; } } .cardFlow { background-color: #cadaeb; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } .cardFlow__arc { background-color: #fff; line-height: 0; width: 100%; vertical-align: bottom; } .cardFlow__wrapper { width: 100%; padding: 0 10%; display: -webkit-flex; display: flex; justify-content: center; } .cardFlow__content { width: 100%; max-width: 1000px;} /* CARD main kygnus_jaccs */ /* CARD main obbliarufa */ /* CARD main business_card */ .boxApplicationBtn { text-align: center; padding-left: 20px!important; padding-right: 20px!important; } .boxApplicationBtn > input { width: 100%; max-width: 600px; margin: 0 auto; } /* ------------ !! PAGE OIL CORRECTION ------------- */ body main.oil.enoil { overflow: visible; } body main.card .title02:before, body main.card .title02:after, body main.oil .title02:before, body main.oil .title02:after { height: 3px; } body main.card .contFooter dl dd a, body main.oil .contFooter dl dd a { transition: all .5s; } body main.oil .contents .cont .boxText { justify-content: flex-start; } body main.card .title03, body main.oil .title03 { font-size: clamp(14px, 24px, 4vw); font-weight: 700; } body main.oil .list > ul > li > dl > dd .boxText p { font-size: clamp(12px, 18px, 2vw); font-weight: 500; line-height: 2; color: #000; } body main.card .pageLink li span, body main.oil .pageLink li span { font-size: clamp(13px, 18px, 2vw); font-weight: 700; } body main.card .pageLink, body main.oil .pageLink { margin-top: 20px; } body main.oil .contents .cont .boxText dd { font-size: clamp(12px, 16px, 1.8vw); font-weight: 500; line-height: 1.8; color: #000; } @media (min-width: 1000px) { body main.card .pageLink, body main.oil .pageLink { padding-left: 20px; } body main.card.faq .contMain .pageLink li, body main.oil.faq .contMain .pageLink li { width: calc((100% - 80px)/3); } body main.card.faq .contMain .pageLink li:not(:last-child), body main.oil.faq .contMain .pageLink li:not(:last-child), body main.card .boxApplication .listApplication li dl dt .num { min-width: 60px; min-height: 60px; } body main.card .contFooter dl dd a:hover, body main.oil .contFooter dl dd a:hover { transition: all .5s; } body main.card .contFooter dl dd a:hover, body main.oil .contFooter dl dd a:hover { color:#fff; background-color: #004ea1; } body main.card .contFooter dl dd a:hover:before, body main.oil .contFooter dl dd a:hover:before { background-color: #fff; } body main.card .contFooter dl dd a:hover:after, body main.oil .contFooter dl dd a:hover:after { border-top: 2px solid #fff; border-right: 2px solid #fff; } } @media (max-width: 999px) { body main.card .contents, body main.oil .contents { padding-left: 20px; padding-right: 20px; } body main.oil .pageLink { margin-top: 20px; } body main.oil .contents .cont table { height: 100%;} body main.oil .contents .cont table tr td { font-size: 12px; height: 100%; } body main.oil .contents .cont table tr td span { padding: 5px 3px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; height: 100%; } body main.oil .list > ul > li > dl > dd { flex-direction: column; align-items: center; } body main.oil .list > ul > li > dl > dd .boxText { margin-left: 0; margin-top: 10px; } body main.oil .list > ul > li .column { flex-direction: column; gap: 20px 0; } body main.oil .list > ul > li .column > li { width: 100%; } body main.oil .contents .cont .boxText { flex-direction: column; margin-bottom: 20px;} body main.oil .contents .cont .boxText img { max-width: 180px; align-self:center; } body main.oil .service .cont .box .boxText .link { font-size: 14px; } body main.oil.faq .pageLinkBtn { margin: 0 auto 40px auto; } body main.card .contFooter, body main.oil .contFooter { padding: 40px 10px; } body main.card .contFooter dl dd a, body main.oil .contFooter dl dd a { margin-top: 0; } body main.card .contFooter dl dd:not(:last-child), body main.oil .contFooter dl dd:not(:last-child) { margin-bottom: 30px; } body main.card .contFooter dl dd a, body main.oil .contFooter dl dd a { padding-right: 40px; } } body main.oil.about .contFooter { background-color: #e5edf6; } body main.oil.about .contFooter dl dd a { color:#fff; background-color: #004ea1; } body main.oil.about .contFooter dl dd a:before { background-color: #fff; } body main.oil.about .contFooter dl dd a:after { border-top: 2px solid #fff; border-right: 2px solid #fff; } @media (min-width: 1000px) { body main.oil.about .contFooter dl dd a:hover { transition: all .5s; } body main.oil.about .contFooter dl dd a:hover { color:#000; background-color: #ffd900; } body main.oil.about .contFooter dl dd a:hover:before { background-color: #000; } body main.oil.about .contFooter dl dd a:hover:after { border-top: 2px solid #000; border-right: 2px solid #000; } } @media (min-width: 1000px) { body main.oil.faq .contMain .pageLink li:not(:last-child) { margin-right: 0; } body main.oil.faq .contMain .pageLink li { width: calc((100% - 128px)/3); } } .pageLink li a span { font-size: clamp(16px, 20px, 2vw); font-weight: 700; } /* ------------ PAGE PROFILE ------------- */ .page-profile { margin: 0 auto; max-width: 740px; } .company_table { width: 100%; border: 1px solid #cccccc; border-width: 1px 1px 0 1px; border-spacing: 0; } .company_table th, .company_table td { font-size: 16px; letter-spacing: .1rem; line-height: 1.6; font-weight: 500; text-align: left; border-bottom: solid 1px #cccccc; padding: 14px 12px; vertical-align: top; text-align: left; margin: 0; display: table-cell; vertical-align: middle;} .company_table th { text-align: center; background-color: rgba(0,78,162,.1); width: 170px; } .company_table td > span { display: block; } .page-profile > p { padding: 0; margin: 20px 0 0; font-size: 16px; letter-spacing: .1rem; line-height: 1.6; } .page-profile > p.right { text-align: right; } p.ploftxt { margin: 0 0 40px; } @media (max-width: 767px) { .company_table th { padding-bottom: 0; border: none; } .company_table th, .company_table td { font-size: 13px; display: block; width: 100%; line-height: 1.4; } .company_table th, .company_table td { padding: 5px 10px; } .company_table th { text-align: left; } .page-profile > p { font-size: 13px; } p.ploftxt { margin: 0 0 20px; } } /* ------------ PAGE CSR ------------- */ .csr_hd { background-color: rgba(255,217,0,.15); } .csrheader__wrapper { padding: 60px 0 0; margin: 0 auto; width: 100%; max-width: 1000px; } .csrios { display: -webkit-flex; display: flex; justify-content: space-between; } .csrios_img { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; width: 180px; } .csrios_img > span { font-size: 13px; font-size: clamp(11px, 13px, .8vw); padding: 10px 0 0; } .csrios_txt { width: calc(100% - 230px); } .csrlist { width: 100%; padding: 30px 0 0 1.4em; margin: 0; } .csrlist > li { padding: 0 0 20px; margin: 0; font-size: 18px; font-size: clamp(15px, 18px, 1.8vw); line-height: 1.6; /*list-style-type: decimal; */} .content_col p.csr-bottom-name { text-align: right; padding: 20px; margin: 0; font-size: 16px; font-size: clamp(12px, 16px, 1.2vw); line-height: 1.4; } @media (max-width: 767px) { .csrheader__wrapper { padding: 30px 0 0; } .csrios { flex-direction: column; align-items: center; } .csrios_img > span { font-size: 11px; padding: 10px 0; } .csrios_txt { width: 100%; } } /* ------------ PAGE FINANCIAL ------------- */ .financial_table { } table.financial_table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } table.financial_table td a { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; } table.financial_table td a svg.icon { width: 48px; height: 60px; color:#7d7d7d; transition: all .5s; } table.financial_table td a span { font-size: 13px; line-height: 1; padding: 5px 0 0; } table.financial_table td, table.financial_table th { text-align: center; padding: 15px 10px; margin: 0; border: 1px solid #ccc; } table.financial_table thead th { background-color: rgba(0,78,162,.1); font-size: 16px; font-weight: 700; line-height: 1; } table.financial_table tbody th { background-color: #eee; font-size: 16px; font-weight: 700; line-height: 1; } @media (min-width: 768px) { table.financial_table th br { display: none; } table.financial_table td a:hover svg.icon { color:#e50000; } table.financial_table td a:hover span { color:#004ea2; } } @media (max-width: 767px) { table.financial_table td a svg.icon { width: 32px; height: 40px; } table.financial_table td a span { font-size: 11px; } table.financial_table thead th { font-size: 12px; } table.financial_table tbody th { font-size: 12px; line-height: 1.4; } } .financial_ttle { display: block; text-align: left; padding: 0; margin: 0 0 20px 1.5em; position: relative; line-height: 1; font-size: 18px; font-size: clamp(14px, 18px, 2vw); line-height: 1; font-weight: 700; } .financial_ttle::before { content:""; position: absolute; width: 1em; height: 0; padding: 0 0 1em; background-color: #004ea2; left: -1.5em; top: 50%; transform: translateY(-50%);} .financial_list { display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 0 20px; } .financial_list > li { list-style-type: none; padding: 0 0 20px; } .financial_list > li a { display: -webkit-flex; display: flex; align-items: center; } .financial_list > li a svg.icon { width: 32px; height: 40px; color:#7d7d7d; transition: all .5s; } .financial_list > li a span { color:#004ea2; font-size: 16px; line-height: 1; padding: 3px 0; margin: 0 0 0 10px; } @media (min-width: 768px) { .financial_list > li a:hover svg.icon { color:#e50000; } .financial_list > li a:hover span { color:#004ea2; } } @media (max-width: 767px) { .financial_list > li { lpadding: 0 0 20px; } .financial_list > li a svg.icon { width: 24px; height: 30px; } .financial_list > li a span { font-size: 15px; margin: 0 0 0 10px; } } /* ------------ PAGE LIST ------------- */ .list_ttle_name { display: block; font-size: 20px; font-size: clamp(16px, 20px, 2vw); line-height: 1.4; font-weight: 700; padding: 0 0 10px; margin: 0; } .listmap { width: 100%; height: 400px; overflow: hidden; margin: 20px 0 0; } .listmap iframe { width: 100%; height: calc(100% + 180px); margin-top: -180px; } /* ------------ PAGE LOGO ------------- */ .logoincontr { width: 100%; padding: 40px 0 0; margin: 0 auto; max-width: 160px; line-height: 1; } @media (max-width: 767px) { .logoincontr { max-width: 120px; padding: 20px 0 0; } } /* ------------ PAGE HISTORY ------------- */ .history_list { display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width: 1000px; } .history_list dt, .history_list dd { padding: 15px 0 12px; margin: 0; border-bottom: 1px solid #eee; } .history_list dt:first-child, .history_list dt:first-child + dd { border-top: 1px solid #eee; } .history_list dt { width: 140px; font-size: 16px; font-size: clamp(14px, 18px, 2vw); line-height: 1.4; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; } .history_list dd { width: calc(100% - 160px); font-size: 16px; font-size: clamp(14px, 18px, 2vw); line-height: 1.4; } @media (max-width: 767px) { .history_list dt { width: 90px; font-size: 14px; } .history_list dd { width: calc(100% - 100px); font-size: 14px; } } /* ------------ PAGE ENGINE OIL ------------- */ .content_secontin { display: -webkit-flex; display: flex; flex-direction: column; margin: 0 0 80px; } .content_secontin > h2 { color: #000; font-size: 28px; font-size: clamp(18px, 28px, 3vw); line-height: 1.4; font-weight: 700; padding: 0 0 5px; } .content_secontin > p { color: #000; font-size: 16px; font-size: clamp(13px, 18px, 1.8vw); line-height: 1.6; font-weight: 500; } .content_secontin > p.aten { color: #ff0000; margin: 20px 0 0; } .secontin_img { line-height: 1; margin: 20px 0 40px; } .oil_point_ttle { align-self: center; padding: 15px 40px; margin: 40px 0 30px; background-color: #ffec80; color: #004ea2; font-size: 28px; font-size: clamp(18px, 28px, 3vw); line-height: 1; font-weight: 700; border-radius: 10px; } .secontin_dblcop { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 40px 40px 0; border-radius: 10px; border: 10px solid #ffd900; } .secontin_dblcop > h3 { width: 100%; display: -webkit-flex; display: flex; justify-content: center; margin: 0 0 20px; } .secontin_dblcop > h3 > span { color: #004ea2; font-size: 28px; font-size: clamp(18px, 28px, 3vw); line-height: 1; font-weight: 700; padding: 0 0 5px; border-bottom: 3px solid #004ea2; } h4.araundblu { width: 100%; display: -webkit-flex; display: flex; justify-content: center; margin: 0 0 40px; } h4.araundblu > span { color: #fff; font-size: 20px; font-size: clamp(14px, 20px, 2vw); line-height: 1; font-weight: 700; background-color: #004ea2; border-radius: 50px; padding: 10px 40px; } .dblcop_inner { width: calc(50% - 20px); } .dblcop_inner > strong { width: 100%; display: block; text-align: left; color: #004ea2; font-size: 20px; font-size: clamp(16px, 20px, 2vw); line-height: 1.5; font-weight: 700; padding: 20px 0 10px; } .dblcop_inner > p { color: #000; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.6; font-weight: 500; } @media (max-width: 767px) { .secontin_dblcop { gap: 20px; padding: 20px 20px 0; } .secontin_dblcop > h3 { margin: 0; } .content_secontin { margin: 0 0 40px; } .secontin_img { margin: 10px 0 20px; } .oil_point_ttle { padding: 10px 30px; margin: 0 0 20px; } h4.araundblu > span { line-height: 1.2; padding: 10px 25px; } .dblcop_inner { width: 100%; } .dblcop_inner > strong { padding: 10px 0 0; } } .oil_point { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0 0 40px; } .oil_point dl { width: calc(100%/3 - 12px); text-align: center; padding: 0; margin: 0; border-radius: 10px; display: -webkit-flex; display: flex; flex-direction: column; } .oil_point dl:nth-child(odd) { border: 3px solid #ffec80; } .oil_point dl:nth-child(even) { border: 3px solid #ece4ce; } .oil_point dl:nth-child(odd) dt { background: #ffec80; } .oil_point dl:nth-child(even) dt { background: #ece4ce; } .oil_point dt, .oil_point dd { text-align: center; padding: 15px 10px; margin: 0; width: 100%; } .oil_point dt { color: #004ea2; font-size: 24px; font-size: clamp(16px, 24px, 3vw); line-height: 1.4; font-weight: 700; } .oil_point dd { flex-grow:1; display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-size: 16px; font-size: clamp(13px, 18px, 2vw); line-height: 1.4; font-weight: 700; } @media (max-width: 767px) { .oil_point { margin: 0 0 20px; gap: 12px; } .oil_point dl { width: calc(50% - 6px); } .oil_point dt, .oil_point dd { padding: 10px 5px; } } @media (max-width: 374px) { .oil_point dl { border-radius: 5px; } .oil_point dl:nth-child(odd) { border: 2px solid #ffec80; } .oil_point dl:nth-child(even) { border: 2px solid #ece4ce; } .oil_point dt, .oil_point dd { padding: 7px 3px; } .oil_point dt { font-size: 14px; } .oil_point dd { font-size: 11px; } } .dblcop_oil_link { display: -webkit-flex; display: flex; margin: 80px 10%; } .dblcop_oil_link > a { width: 100%; position: relative; color: #004ea2; text-align: center; font-size: 24px; font-size: clamp(14px, 24px, 2vw); line-height: 1.4; font-weight: 700; background-color: #ffec80; border-radius: 100px; padding: 20px 60px; transition: all .5s; } .dblcop_oil_link > a::before, .dblcop_oil_link > a::after { content:""; position: absolute; top: 50%; width: 107px; height: 155px; } .dblcop_oil_link > a::before { left: -80px; width: 107px; height: 155px; background: url(/images/oils01.png) center center / contain no-repeat; transform: translateY(-50%) rotate(-25deg); } .dblcop_oil_link > a::after { right: -80px; width: 107px; height: 155px; background: url(/images/oils03.png) center center / contain no-repeat; transform: translateY(-50%) rotate(25deg); } @media (min-width: 768px) { .dblcop_oil_link > a:hover { color: #ffec80; background-color: #004ea2; } } @media (max-width: 767px) { .dblcop_oil_link { margin: 60px 0; } .dblcop_oil_link > a { padding: 10px 30px; } .dblcop_oil_link > a::before, .dblcop_oil_link > a::after { width: 54px; height: 78px; } .dblcop_oil_link > a::before { left: -5px; } .dblcop_oil_link > a::after { right: -5px; } } /* ------------ PAGE CONTACT ------------- */ .contact_flow { display: -webkit-flex; display: flex; gap: 0 10%; margin: 0 0 60px; } .contact_flow > dl { display: -webkit-flex; display: flex; flex-direction: column; width: calc(100% / 3); position: relative; } .contact_flow > dl > dt, .contact_flow > dl > dd { text-align: center; font-size: 18px; font-size: clamp(12px, 18px, 2vw); line-height: 1.4; font-weight: 700; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .contact_flow > dl > dt { text-align: center; color:#fff; background-color: #ffe44d; padding: 10px 0 7px; } .contact_flow > dl > dd { text-align: center; color:#9a9a9a; background-color: #feec80; flex-grow: 1; padding: 20px 10px; } .contact_flow > dl.current > dt { color:#fff; background-color: #004ea1; } .contact_flow > dl.current > dd { color:#000; background-color: #ffd900; } .contact_flow > dl::after { content:""; width: 0; height: 0; border-left: 30px solid #ffe44d; border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -25%; } .contact_flow > dl:last-child::after { display: none; } @media (max-width: 767px) { .contact_flow { display: -webkit-flex; display: flex; gap: 0 10%; margin: 0 0 20px; } .contact_flow > dl::after { border-left: 20px solid #ffe44d; border-top: 20px solid transparent; border-bottom: 20px solid transparent; right: -30%; } } .contact_info { display: -webkit-flex; display: flex; flex-direction: column; width: 100%; padding: 40px; border-radius: 10px; border: 10px solid #b2cae4; } .contact_info > strong { margin: 0 0 10px; color:#004ea1; font-size: 20px; font-size: clamp(16px, 22px, 2.3vw); line-height: 1.4; font-weight: 700; } @media (max-width: 767px) { .contact_info { padding: 20px; } } #wpcf7cpcnf table, .contact_table { width: 100%; } #wpcf7cpcnf table th, #wpcf7cpcnf table td, .contact_table th, .contact_table td { padding: 20px; border: 1px solid #d78e00; color:#000; font-size: 16px; font-size: clamp(13px, 16px, 1.4vw); line-height: 1.4; font-weight: 500; } #wpcf7cpcnf table th, .contact_table th { width: 25%; background-color: #fffbe5; font-weight: 700; } #wpcf7cpcnf table td, .contact_table td { width: 75%; } .contact_table td ul.sekc_list { display: -webkit-flex; display: flex; flex-direction: column; gap: 5px; line-height: 1.6; } .contact_table td ul.sekc_list li { list-style-type: none; width: 100%; } .contact_table td dl.sekc_name { display: -webkit-flex; display: flex; align-items: center; } .contact_table td dl.sekc_name.mb10 { margin-bottom: 10px; } .contact_table td dl.sekc_name dt { padding: 0 5px 0 0; } .contact_table td dl.sekc_name.ssset dt { width: 4.5em; } .contact_table td dl.sekc_name dd { padding: 0 20px 0 0; flex-grow: 1; } .contact_table td dl.sekc_name.sstime dt { padding: 0 5px 0 0; flex-grow: 1; } .contact_table td dl.sekc_name.sstime dd { padding: 0 20px 0 0; flex-grow: 0; } .contact_table td dl.sekc_name dd:last-child { padding: 0; } .contact_table .contaten { color:#ff0000; font-size: 14px; font-size: clamp(11px, 14px, 1vw); line-height: 1.6; font-weight: 700; display: inline-block; vertical-align: bottom; } .contact_table p.example { color:#9b9b9b; font-size: 14px; font-size: clamp(11px, 14px, 1vw); line-height: 1.6; font-weight: 500; } .form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: #000; background-color: #fffbe5; background-clip: padding-box; border: 1px solid #d78e00; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .form-control.textarea { height: 200px; } .form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } @media (max-width: 767px) { #wpcf7cpcnf table, .contact_table { border-bottom: 1px solid #d78e00; } #wpcf7cpcnf table th, #wpcf7cpcnf table td, .contact_table th, .contact_table td { padding: 10px; display: block; width: 100%; } #wpcf7cpcnf table th, .contact_table th { border-width: 1px 1px 0; font-size: 14px; } #wpcf7cpcnf table td, .contact_table td { border-width: 0 1px 0; } .contact_table td dl.sekc_name { flex-wrap: wrap; gap: 10px 0; } .contact_table td dl.sekc_name dt { width: 1.5em; padding: 0; } .contact_table td dl.sekc_name dd { width: calc(100% - 1.5em); padding: 0; flex-grow: 0; } .contact_table td dl.sekc_name.ssset dt { width: 4.5em; } .contact_table td dl.sekc_name.ssset dd { width: auto; padding: 0; flex-grow: 1; } .contact_table td dl.sekc_name.sstime dt { width: calc(50% - 1.8em); padding: 0; flex-grow: 0; } .contact_table td dl.sekc_name.sstime dd { width: 1.8em; padding: 0 0 0 5px; flex-grow: 0; } .form-control { background-color: #fff; border: 1px solid #aaa; } } .cont_button_bottom { display: -webkit-flex; display: flex; flex-direction: column; } .cont_button_bottom > strong { margin: 0 0 10px; color:#004ea1; font-size: 20px; font-size: clamp(16px, 22px, 2.3vw); line-height: 1.4; font-weight: 700; } ul.cont_button_bottom_list { display: -webkit-flex; display: flex; flex-direction: column; width: 100%; } ul.cont_button_bottom_list.mt10 { margin-top: 20px; } ul.cont_button_bottom_list > li { position: relative; padding: 0 0 5px; margin: 0 0 0 1.4em; color: #000; font-size: 16px; font-size: clamp(13px, 16px, 1.4vw); line-height: 1.4; font-weight: 500; } ul.cont_button_bottom_list > li::before { content: ""; width: 1em; height: 1em; position: absolute; left: -1.4em; top: 2px; background-color: #004ea2; } .cont_button_bottom_check { width: 100%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 20px 0; font-size: 18px; text-align: center; font-size: clamp(16px, 18px, 2vw); line-height: 1.4; font-weight: 700; } .cont_button_bottom_check2 { width: 100%; padding: 20px 0; font-size: 18px; text-align: center; font-size: clamp(16px, 18px, 2vw); line-height: 1.4; font-weight: 700; } .wpcf7cp-btns, .cont_button_wrapper { padding: 40px 0 0; display: -webkit-flex; display: flex; justify-content: center; gap: 0 40px; } .wpcf7cp-btns .wpcf7-form-control, .cont_button { border-radius: 10px; font-size: 26px; font-weight: 700; text-align: center; cursor: pointer; padding: 20px 40px; margin: 0!important; background: #004ea2; color: #fff; line-height: 1; opacity: 1; transition: .3s; border: 0; } .wpcf7cp-btns .wpcf7-form-control.wpcf7cp-cfm-edit-btn { background: #8b8b8b; } .cont_button:hover { opacity: .6; } @media (max-width: 767px) { .cont_button { font-size: 18px; } .cont_button_bottom_check { line-height: 1.6; } .cont_button_bottom_check2 { line-height: 1.6; } } .contactimg { width: 100%; margin: 0 auto; max-width: 800px; } .thanksPage { width: 100%; background-color: #fffbe5; padding: 0 10%; margin: 0; height: calc(100vh - 140px); min-height: 600px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .thanksPage__inner { display: -webkit-flex; display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: 100%; max-width: 1000px; text-align: center; } .thanksPage__inner > strong { width: 50%; margin: 0 0 40px; } .thanksPage__inner > h2 { width: 100%; margin: 0 0 40px; font-size: 34px; font-size: clamp(16px, 34px, 3.6vw); font-weight: 900; line-height: 1.4; letter-spacing:.2rem; } .thanksPage__inner > p { width: 100%; margin: 0 0 40px; font-size: 12px; font-size: clamp(12px, 16px, 2vw); font-weight: 700; line-height: 1.4; letter-spacing:.2rem; } @media (orientation: portrait) and (max-width: 767px) { .thanksPage { padding: 0 20px; height: calc( var(--vh) * 100 - 100px ); } } .wpcf7-form-control.wpcf7-radio { display: -webkit-flex; display: flex; flex-direction: column; gap: 10px 0; width: 100%; } .wpcf7-form-control-wrap, .wpcf7-acceptance { width: 100%!important; display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; } .wpcf7-list-item { margin: 0!important; } .wpcf7-spinner { display: none!important; } /* ------------ SITEMAP ------------- */ .page_sitemap { font-size: clamp(12px, 16px, 1.8vw); } .ancarrow > span { display: inline-block; padding: 0 20px 0 0; position: relative; transition: all .5s; } .ancarrow > span::after { content:""; position: absolute; top: 50%; bottom: 0; margin: 0; vertical-align: middle; right: 0; width: 10px; height: 10px; border-top: 2px solid #004ea2; border-right: 2px solid #004ea2; transform: translateY(-50%) rotate(45deg); transition: all .5s; } ul.link_column { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0 0; margin: 0; } ul.link_column.single { flex-direction: column; } ul.link_column > li { width: calc(100% / 3 - 16px); padding: 0 0 0 18px; } ul.link_column.single > li { width: calc(100% - 16px); padding: 0 0 0 18px; } ul.link_column.col1 > li { width: 100%; padding: 0 0 0 18px; } ul.link_column.col2 > li { width: calc(100% / 2 - 12px); padding: 0 0 0 18px; } ul.link_column > li > a { font-size: 17px; line-height: 1.3; position: relative; transition: all .5s; } ul.link_column > li > a::before { content:""; position: absolute; top: 6px; bottom: 0; margin: 0; vertical-align: middle; left: -18px; width: 6px; height: 6px; border-top: 2px solid #004ea2; border-right: 2px solid #004ea2; transform: rotate(45deg); transition: all .5s; } ul.link_column > li > a span { padding: 0 0 2px; } .sitemap_den { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0 0; margin: 0; } .sitemap_den h3 { padding: 0; } .sitemap_den_col { width: calc(100% / 3 - 16px); padding: 0; } .sitemap_den.ban { padding: 0; } .sitemap_den.full .sitemap_den_col { width: 100%; } .sitemap_den.full.mb10 { margin-bottom: 20px; } .sitemap_den_col ul.link_column { margin: 0; } @media (min-width: 768px) { a:hover .ancarrow > span { color:#004ea2; } a:hover .ancarrow > span::after { right: -10px; } } @media (max-width: 767px) { .ancarrow > span { padding: 0 12px 0 0; } .ancarrow > span::after { width: 6px; height: 6px; } ul.link_column { flex-direction: column; margin: 0; } ul.link_column > li { width: 100%; } ul.link_column > li > a { font-size: 15px; } ul.link_column > li > a::before { top: 4px; } .sitemap_den { flex-direction: column; } .sitemap_den_col { width: 100%; } } /* ------------ FOOTER ------------- */ footer { background-color: #ffd900; z-index: 3; display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 60px; margin: -1px 0; } #business footer { background-color: #004ea2; } .footer__inner { display: -webkit-flex; display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto; } .footer__inner > ul { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 40px 24px; margin: 0 0 60px; } .footer__inner > ul > li { width: calc(100% / 4 - 18px ); } .footer__inner > ul > li > a { color:#000; font-size: 16px; line-height: 1; font-weight: 700; padding: 0 0 3px; border-bottom: 1px solid #fff; transition: all .5s; position: relative; } .footer__inner > ul > li > a::before { content:""; position: absolute; top: 50%; bottom: 0; margin: 0; vertical-align: middle; left: -18px; width: 6px; height: 6px; border-top: 2px solid #004ea2; border-right: 2px solid #004ea2; transform: translateX(-10px) translateY(-50%) rotate(45deg); transition: all .5s; opacity: 0; } .footer__inner > strong { width: 100%; color:#000; font-size: 22px; line-height: 1; font-weight: 700; margin: 0 0 20px; } .footer__inner > p.adress { width: 100%; color:#000; font-size: 13px; line-height: 1.6; font-weight: 700; margin: 0 0 80px; } .footer__inner > p.copy { text-align: center; width: 100%; color:#000; font-size: 12px; line-height: 1; font-weight: 500; } #business .footer__inner > ul > li > a { color:#fff; border-bottom: 1px solid #fff; } #business .footer__inner > ul > li > a::before { border-top: 2px solid #ffd900; border-right: 2px solid #ffd900; } #business .footer__inner > strong { color:#fff; } #business .footer__inner > p.adress { color:#fff; } #business .footer__inner > p.copy { color:#fff; } @media (min-width: 768px) { .footer__inner > ul > li > a:hover { color:#004ea2; border-bottom: 1px solid #004ea2; } .footer__inner > ul > li > a:hover::before { transform: translateX(0) translateY(-50%) rotate(45deg); transition: all .5s; opacity: 1; } #business .footer__inner > ul > li > a:hover { color:#ffd900; border-bottom: 1px solid #ffd900; } } @media (max-width: 1000px) { .footer__inner > ul > li { width: calc(100% / 3 - 16px ); } } @media (max-width: 767px) { footer { padding: 60px 20px; } .footer__inner > ul { gap: 20px 12px; margin: 0 0 60px; } .footer__inner > ul > li { width: calc(100% / 2 - 12px ); } .footer__inner > ul > li > a { font-size: 13px; } #business .footer__inner > ul > li > a { border-bottom: 1px solid #fff; } .footer__inner > p.adress { font-size: 12px; margin: 0 0 60px; } .footer__inner > p.copy { text-align: left; font-size: 10px; } } @media (max-width: 374px) { .footer__inner > ul > li > a { font-size: 12px; } .footer__inner > p.copy { font-size: 9px; } } /* ------------ 50TH ANNIVERSARY ------------- */ .pgSearch_list { font-size: 22px; font-size: clamp(16px, 24px, 2vw); line-height: 1.4; font-weight: 700; padding: 0; margin: 0; } .pgSearch_list > ul { display: -webkit-flex; display: flex; width: 100%; flex-direction: column; border-top: 3px solid #ffd900; position: relative; margin: 10px 0 0; padding: 20px 0 0; } .pgSearch_list > ul::before { width: 80px; height: 0; content: ""; position: absolute; top: -3px; right: 0; border-top: 3px solid #004ea2; opacity: 1; transition: all .5s; } .pgSearch_list > ul > li { list-style-type: none; padding: 0; border-bottom: 1px solid #ccc; font-size: 16px; font-size: clamp(14px, 18px, 1.5vw); line-height: 1.5; font-weight: 500; } .pgSearch_list > ul > li > a { display: block; color:#092c87; padding: 12px 0 10px; margin: 0 0 0 24px; position: relative; } .pgSearch_list > ul > li > a::before { content: ""; position: absolute; top: 50%; bottom: 0; margin: 0; vertical-align: middle; left: -12px; width: 6px; height: 6px; border-top: 2px solid #004ea2; border-right: 2px solid #004ea2; transform: translateX(-10px) translateY(-50%) rotate(45deg); } .pgSearch_list > ul > li > a:hover { text-decoration: underline; text-underline-offset:2px; } /* ------------ 50TH ANNIVERSARY ------------- */ .anniversary { display: block; line-height: 0; margin: 80px 0 0; background-color: #020202; position: relative; } .anniversary-wrapper { line-height: 0; vertical-align: bottom; position: relative; } .anniversary-wrapper img { z-index: -1;} .anniversary-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; padding: 10% 40px 0 40px; } .anniversary-content > h1 { color:#fff; font-size: clamp(20px, 34px, 3.4vw); line-height: 1; margin: 0 0 30px; } .anniversary-50thlogo { width: 40%; max-width: 600px; z-index: 0; } .anniversary-50thlogo2 { width: 60%; max-width: 900px; padding: 5% 0 0; z-index: 0; } .anniversary-text { width: 100%; margin: -5% 0 0; line-height: 2; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; position: relative; } .anniversary-text h2 { color:#fff; font-size: clamp(16px, 42px, 3.4vw); font-weight: 700; letter-spacing:.2rem; line-height: 1; margin: 0 0 5%; position: relative; z-index: 3; } .anniversary-text h2::before { content:""; line-height: 0; width: 130%; position: absolute; left: -132%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 0; border-bottom: 1px solid #fff; z-index: 3; } .anniversary-text h2::after { content:""; line-height: 0; width: 130%; position: absolute; right: -132%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 0; border-bottom: 1px solid #fff; z-index: 3; } .anniversary-text > p { color:#fff; font-size: clamp(14px, 26px, 1.8vw); font-weight: 700; line-height: 2.8; text-align: center; } @media (max-width: 1300px) { .anniversary-50thlogo { width: 35%; } .anniversary-50thlogo2 { width: 50%; padding: 4% 0 0; } } @media (max-width: 767px) { .anniversary { margin: 60px 0 0; } .anniversary-content { padding: 8% 10px 0 10px; } .anniversary-content > h1 { font-size: 22px; margin: 0 0 20px; } .anniversary-50thlogo { width: 50%; } .anniversary-50thlogo2 { width: 80%; padding: 2% 0 0; } .anniversary-text h2 { font-size: 18px; margin: 0 0 5%; } .anniversary-text h2::before { width: 80%; left: -82%; } .anniversary-text h2::after { width: 80%; right: -82%; } .anniversary-text > p { font-size: 12px; line-height: 2; } } @media (max-width: 374px) { .anniversary-text > p { font-size: 10px; } } .anniversary-content-inner { width: 100%; height: 100%; position: relative; } .anniversary-wrapper img.aniim01 { position: absolute; top: 3%; right: 5%; width: 20%; z-index: 1; } .anniversary-wrapper img.aniim02 { position: absolute; top: 10%; left: -40px; width: 34%; z-index: 1; } .anniversary-wrapper img.aniim04 { position: absolute; bottom: 15%; right: 8%; width: 34%; z-index: 1; } .anniversary-wrapper img.aniim05 { position: absolute; bottom: 10%; left: 7%; width: 27%; z-index: 1; } .animdl { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); width: 100%; z-index: 3; } .animdl-inner { position: relative; width: 100%; height: 100%; text-align: center; } .animdl-inner > img { width: 46%; margin: 0 auto; } .animdl-inner > h3 { width: 100%; color:#fff; font-size: clamp(12px, 60px, 4vw); letter-spacing:.2rem; font-weight: 700; line-height: 1; z-index: 4; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } @media (max-width: 767px) { .anniversary-wrapper img.aniim02 { left: -10px; } } /* ------------ RECRUIT HEADER ------------- */ a.recruitlink { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-flex; display: flex; align-items: center; transition: all .5s; } a.recruitlink > span { color:#fff; font-size: 15px; font-size: clamp(12px, 24px, 2vw); line-height: 1; font-weight: 700; letter-spacing:.05rem; } @media (min-width: 768px) { #business .navigation > a.recruitlink:hover > span { color:#ffd900; } #business .navigation > a.recruitlink .ahovLine { padding: 2px 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: linear-gradient(#ffd900, #ffd900) 100% 100% / 0 2px no-repeat; } #business .navigation > a.recruitlink:hover .ahovLine { background-position: 0 100%; background-size: 100% 2px; } } @media (min-width: 768px) { a.recruitlink { left: 20px; } a.recruitlink br { display: none; } } @media (max-width: 767px) { a.recruitlink { left: 10px; } a.recruitlink > span { line-height: 1.2; } } @media (max-width: 374px) { a.recruitlink { left: 15px; } a.siteLink { display: none; } } /* ------------ RECRUIT CONTENT ------------- */ hr.bar1px { } .recruit_wrapper { position: relative; } .recruit_wrapper * { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; } .recruit_wrapper .content { background-color: #fff; } .recruit_wrapper .content__title { max-width: 1080px; } .recruit_wrapper .content__title h1 { padding: 8px 0 10px 50px; font-size: 30px; font-size: clamp(18px, 30px, 3vw); } .recruit_wrapper .left-menu { background-color: transparent!important; } .entrybtn { position: fixed; right: 0; top: 180px; pointer-events: none; z-index: 4; display: -webkit-flex; display: flex; justify-content: flex-end; } .entrybtn > a { display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 17px 30px 14px; pointer-events: auto; transition: all .5s; } .entrybtn > a > b { color:#000; font-size: clamp(16px, 20px, 2vw); font-weight: 700; line-height: 1; transition: all .5s; } .entrybtn > a > span { color:#004ea2; font-size: clamp(12px, 14px, 1.5vw); font-weight: 700; line-height: 1; padding: 10px 0 0; transition: all .5s; } @media (min-width: 768px) { .entrybtn > a:hover { background-color: #004ea2; } .entrybtn > a:hover > b { color:#fff; } .entrybtn > a:hover > span { color:#fff; } } @media (max-width: 767px) { .recruit_wrapper .content__title h1 { padding: 4px 0 6px 30px; font-size: 18px; } .entrybtn { position: fixed; left: 0; right: 0; top: auto; bottom: 0; } .entrybtn > a { width: 100%; flex-direction: row; padding: 14px 0 12px; background-color: #004ea2; border-top: 1px solid #fff; } .entrybtn > a > b { color:#fff; padding: 1px 0 0; } .entrybtn > a > span { color:#fff; padding: 0 0 0 10px; } } .secondHero.hero-recruit-01 { background: url(/images/hero-recruit_01.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-02 { background: url(/images/hero-recruit_02.jpg) center bottom / cover no-repeat; height: 400px; } .secondHero.hero-recruit-03 { background: url(/images/hero-recruit_03.jpg) center bottom / cover no-repeat; height: 400px; } .secondHero.hero-recruit-04 { background: url(/images/hero-recruit_04.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-05 { background: url(/images/hero-recruit_05.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-06 { background: url(/images/hero-recruit_06.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-07 { background: url(/images/hero-recruit_07.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-08 { background: url(/images/hero-recruit_08.jpg) center center / cover no-repeat; height: 400px; } .secondHero.hero-recruit-01 > h1, .secondHero.hero-recruit-02 > h1, .secondHero.hero-recruit-03 > h1, .secondHero.hero-recruit-04 > h1, .secondHero.hero-recruit-05 > h1, .secondHero.hero-recruit-06 > h1, .secondHero.hero-recruit-07 > h1, .secondHero.hero-recruit-08 > h1 { font-size: 50px; font-size: clamp(20px, 50px, 5vw); margin: 0; } @media (max-width: 767px) { .secondHero.hero-recruit-01, .secondHero.hero-recruit-02, .secondHero.hero-recruit-03, .secondHero.hero-recruit-03, .secondHero.hero-recruit-04, .secondHero.hero-recruit-05, .secondHero.hero-recruit-06, .secondHero.hero-recruit-07, .secondHero.hero-recruit-08 { height: 200px; } .secondHero.hero-recruit-01 > h1, .secondHero.hero-recruit-02 > h1, .secondHero.hero-recruit-03 > h1, .secondHero.hero-recruit-04 > h1, .secondHero.hero-recruit-05 > h1, .secondHero.hero-recruit-06 > h1, .secondHero.hero-recruit-07 > h1, .secondHero.hero-recruit-08 > h1 { font-size: 20px } } .recruittopbtn { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; } .recruittopbtn > a, .recruittopbtn > p { width: 100%; max-width: 980px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; border: 4px solid #959492; margin: 0 0 30px; position: relative; transition: all .5s; } .recruittopbtn > a svg, .recruittopbtn > p svg { color:#959492; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; width: 25px; transition: all .5s; z-index: 2; } .recruittopbtn > a svg { color:#004ea2; } .recruittopbtn > a { border: 4px solid #004ea2; } .recruittopbtn b { font-size: 26px; font-size: clamp(15px, 26px, 3vw); font-weight: 700; letter-spacing:.14rem; } .recruittopbtn span { font-size: 50px; font-size: clamp(12px, 16px, 1.6vw); letter-spacing:.06rem; padding: 10px 0 0; } .recruittopbtn b, .recruittopbtn span { color:#959492; line-height: 1; } .recruittopbtn a b, .recruittopbtn a span { color:#004ea2; transition: all .5s; z-index: 2; } .recruittopbtn > a::before { content:""; width: 0px; height: 100%; background-color: #004ea2; position: absolute; top: 0; bottom: 0; right: 100%; left: 0; z-index: 1; transition: all .3s; } @media (min-width: 768px) { .recruittopbtn > a:hover::before { width: 100%; right: 0; } .recruittopbtn > a:hover svg, .recruittopbtn a:hover b, .recruittopbtn a:hover span { color:#fff; } } @media (max-width: 767px) { .recruittopbtn > a, .recruittopbtn > p { height: 70px; border: 3px solid #959492; margin: 0 0 20px; } .recruittopbtn > a { border: 3px solid #004ea2; } .recruittopbtn b { letter-spacing:.06rem; } .recruittopbtn > a svg, .recruittopbtn > p svg { right: 10px; width: 20px; } .recruittopbtn > a svg { color:#004ea2; } } @media (max-width: 374px) { .recruittopbtn span { font-size: 10px; } .recruittopbtn > a svg, .recruittopbtn > p svg { display: none; } } /* ------------ RECRUIT 2033 TOP ------------- */ header { z-index: 22; } .breadcrumb { position: relative; z-index: 18; } .topSlider { height: calc(100vh - 80px); top:80px; } #business .recruit_wrapper .topSlider .tpslider .main01 { background: url(/images/rc23_main01.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main02 { background: url(/images/rc23_main02.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main03 { background: url(/images/rc23_main03.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main04 { background: url(/images/rc23_main04.jpg) center center no-repeat; background-size: cover; } @media (max-width: 767px) { .topSlider { height: calc(100vh - 60px); top:60px; } #business .recruit_wrapper .topSlider .tpslider .main01 { background: url(/images/rc23_main01sp.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main02 { background: url(/images/rc23_main02sp.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main03 { background: url(/images/rc23_main03sp.jpg) center center no-repeat; background-size: cover; } #business .recruit_wrapper .topSlider .tpslider .main04 { background: url(/images/rc23_main04sp.jpg) center center no-repeat; background-size: cover; } } .topmainRec { position: relative; width: 100%; height: calc(100vh - 140px); display: -webkit-flex; display: flex; align-items: flex-end; justify-content: flex-end; position: relative; padding: 0; } .topmainRec__splogo { display: none; } .topmainRec__wrapper { width: calc(100% - 10%); display: -webkit-flex; display: flex; flex-direction: column; padding: 0 0 5%; margin: 0; } .topmainRec__wrapper > h1 { padding: 0; margin: 0; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; } .topmainRec__wrapper > h1 > span { width: auto; background-color: #fff; padding: 5px 10px 10px; margin: 0 0 30px; color:#000; font-size: 46px; font-size: clamp(20px, 46px, 3.4vw); line-height: 1; font-weight: 300; letter-spacing:.14rem; transition: all .3s; } .topmainRec__wrapper > h2 { padding: 0; margin: 0; width: 100%; } .topmainRec__wrapper > h2 > p { padding: 0; margin: 0; opacity: 0; line-height: 1; } .topmainRec__wrapper > h2 > p span { color:#fff; font-size: 20px; font-size: clamp(11px, 20px, 1.6vw); line-height: 1.8; font-weight: 700; letter-spacing:.06rem; } .topmainRec__wrapper > strong { margin: 0 0 10px; line-height: 1; } .topmainRec__wrapper > strong > span { display: inline-block; background-color: #ffd900; padding: 5px 10px; margin: 0 0 10px; color:#000; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:.03rem; transition: all .3s; } .topmainRec__wrapper > h3 { padding: 0; margin: 0; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; } .topmainRec__wrapper > h3 > p { width: auto; background-color: #fff; padding: 5px 15px 8px 25px; margin: 0; transition: all .3s; } .topmainRec__wrapper > h3 > p > span { width: auto; padding: 0 15px 0 0; margin: 0; color:#000; font-size: 14px; font-size: clamp(12px, 14px, 1.4vw); line-height: 1; font-weight: 500; letter-spacing:.14rem; transition: all .3s; } @media (max-width: 767px) { .topmainRec { align-items: flex-end; flex-direction: column; } .topmainRec__wrapper { width: calc(100% - 30px); margin: 0; padding: 0 0 70px; } } @media (orientation: portrait) and (max-width: 767px) { .topmainRec { height: calc( var(--vh) * 100 - 100px); justify-content: flex-end; } .topmainRec__splogo { width: 100%; height: calc(100% - 200px); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0; margin: 90px 0 20px; } .topmainRec__splogo > h1 { width: 160px; padding: 0; margin: 0 0 30px; } .topmainRec__wrapper > h1 > span { font-size: 25px; padding: 5px; margin: 0 0 12px; } .topmainRec__wrapper > h1.intvtt > span { font-size: 21px; margin: 0 0 12px; } .topmainRec__wrapper > h2 > p { font-size: 14px; } .topmainRec__wrapper > h2 > p span { font-size: 14px; } .topmainRec__wrapper > h3 > p { background-color: transparent; padding: 2px 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; } .topmainRec__wrapper > h3 > p > span { width: auto; padding: 0 0 8px; margin: 0; color:#fff; font-size: 12px; letter-spacing:0; } } @media (max-width: 374px) { .topmainRec__wrapper { width: calc(100% - 10px); padding: 0 0 60px; } .topmainRec__wrapper > h1 > span { font-size: 18px; margin: 0 0 8px; } .topmainRec__wrapper > h2 > p { font-size: 12px; letter-spacing:0rem; } } .recruit_introduction { width: 100%; background: url(/images/rectopbg.jpg) center bottom / cover no-repeat; padding: 70px 100px 100px; text-align: center; } .recruit_introduction .wrapper { width: 100%; max-width: 980px; margin: 0 auto; } .recruit_intro_reed { padding: 80px 0 0; font-size: 18px; font-size: clamp(14px, 18px, 1.8vw); line-height: 3; font-weight: 700; } @media (max-width: 767px) { .recruit_introduction { padding: 40px 20px; } .recruit_intro_reed { font-size: 14px; padding: 30px 0 0; line-height: 2.8; } } @media (max-width: 374px) { .recruit_intro_reed { font-size: 12px; letter-spacing:0; } } .recruit_message { width: 100%; padding: 100px 0 0; background-color: #fff; } .recruit_message .wrapper { width: 100%; height: 320px; background: url(/images/rectopmss.jpg) center center / cover no-repeat; padding: 0 50px; margin: 0; position: relative; } .recruit_message.bgimg02 .wrapper { background: url(/images/rectopmss2.jpg) center center / cover no-repeat; } .recruit_message.bgimg03 .wrapper { background: url(/images/rectopmss3.jpg) center center / cover no-repeat; } .recruit_message_ttle { position: absolute; top:-50px; right: 100px; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-end; } .recruit_message_ttle > h2 { color:#004ea2; font-size: 90px; font-size: clamp(40px, 90px, 9vw); line-height: 1; font-weight: 300; } .recruit_message_ttle > strong { color:#004ea2; font-size: 25px; font-size: clamp(18px, 25px, 2.5vw); line-height: 1; font-weight: 700; padding: 10px 0 0; } .recruit_message.bgimg02 .recruit_message_ttle > strong { color:#fff; } .recruit_message.bgimg03 .recruit_message_ttle > strong { color:#fff; } @media (max-width: 767px) { .recruit_message { padding: 50px 0 0; background-color: #fff; } .recruit_message .wrapper { height: 180px; padding: 0 20px; margin: 0; position: relative; } .recruit_message_ttle { top:auto; right: 20px; top: -25px; display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-end; } .recruit_message_ttle > h2 { font-size: 40px; } .recruit_message_ttle > strong { font-size: 18px; padding: 5px 0 0; } .recruit_message.bgimg03 .wrapper { background: url(/images/rectopmss3.jpg) center center / cover repeat-x; animation: scroll-anim 16s linear infinite; } } .recruit_message_content { padding: 40px 20px; margin: 0 auto; width: 100%; max-width: 880px; } .recruit_message_content .msleed { display: -webkit-flex; display: flex; flex-direction: column; list-style-type: none; align-items: flex-start; } .recruit_message_content .msleed > li { color:#fff; background-color: #004ea2; font-size: 34px; font-size: clamp(16px, 34px, 3vw); line-height: 1; padding: 1px 3px 3px; margin: 0 0 15px; } .recruit_message_content h2.msttle { color:#004ea2; font-size: 50px; font-size: clamp(32px, 50px, 5vw); line-height: 1; font-weight: 700; padding: 10px 0 0; margin: 0 0 30px; } .recruit_message_content h2.msttle br { display: none; } @media (max-width: 767px) { .recruit_message_content { padding: 10px 0 0; } .recruit_message_content .msleed > li { font-size: 16px; margin: 0 0 10px; } .recruit_message_content h2.msttle { font-size: 32px; line-height: 1.2; padding: 5px 0 0; margin: 0 0 20px; } .recruit_message_content h2.msttle br { display: inline-block; } } .recruit_message_content .msname { display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-end; } .recruit_message_content .msname > strong { color:#004ea2; font-size: 18px; font-size: clamp(12px, 18px, 1.8vw); line-height: 1; padding: 0; margin: 0 0 10px; } .recruit_message_content .msname > b { color:#004ea2; font-size: 28px; font-size: clamp(18px, 28px, 2.6vw); line-height: 1; padding: 0; margin: 0 0 40px; } .recruit_message_content .mstext p { color:#000; font-size: 18px; font-size: clamp(12px, 18px, 1.8vw); line-height: 1.8; padding: 0; margin: 0 0 30px; } @media (max-width: 767px) { .recruit_message_content .msname > strong { font-size: 12px; } .recruit_message_content .msname > b { font-size: 18px; margin: 0 0 20px; } .recruit_message_content .mstext p { font-size: clamp(14px, 18px, 1.8vw); line-height: 1.8; padding: 0; margin: 0 0 20px; } .recruit_message_content .mstext p br { display: none; } } @keyframes scroll-anim { 100% { background-position: -100% 0; } } .recruit_navigation { background-color: #fff; } .recruit_navigation_ttle { width: 100%; padding: 0; } .recruit_navigation_ttle > a, .recruit_navigation_ttle > strong { width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 40px; background-color: #004ea2; } .recruit_navigation_ttle > a > span, .recruit_navigation_ttle > strong > span { color:#fff; font-size: 40px; font-size: clamp(24px, 40px, 4vw); line-height: 1; font-weight: 700; } .recruit_navigation .wrapper { width: 100%; padding: 60px 100px 80px; margin: 0; position: relative; text-align: center; } .recruit_navigation .wrapper ul { display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none; width: 100%; max-width: 980px; margin: 0 auto; } .recruit_navigation .wrapper ul li { width: calc(50% - 20px); } .recruit_navigation_ttle { width: 100%; background-color: #fff; } @media (max-width: 1070px) { .recruit_navigation .wrapper ul li { width: 100%; } } @media (max-width: 767px) { .recruit_navigation_ttle > a, .recruit_navigation_ttle > strong { padding: 20px; } .recruit_navigation_ttle > strong > span { font-size: 24px; } .recruit_navigation .wrapper { padding: 30px 20px 40px; } } /* .recruit_navigation .wrapper ul li.recruitbackbtn { width: 100%; display: -webkit-flex; display: flex; justify-content: flex-end; } .recruit_navigation .wrapper ul li.recruitbackbtn > a { width: calc(50% - 20px); background-color: #004ea2; position: relative; padding: 10px 18px; text-align: left; border: 4px solid #004ea2; } .recruit_navigation .wrapper ul li.recruitbackbtn > a b { color:#fff; font-size: 14px; font-size: clamp(12px, 16px, 1.4vw); font-weight: 700; position: relative; z-index: 2; transition: all .5s; } .recruit_navigation .wrapper ul li.recruitbackbtn > a svg { color:#fff; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; width: 25px; transition: all .5s; z-index: 2; } .recruit_navigation .wrapper ul li.recruitbackbtn > a::before { content:""; width: 0px; height: 100%; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 100%; left: 0; z-index: 1; transition: all .3s; } @media (min-width: 768px) { .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover::before { width: 100%; right: 0; } .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover b { color:#004ea2; } .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover svg { color:#004ea2; } } @media (max-width: 767px) { .recruit_navigation .wrapper ul li.recruitbackbtn > a { width: 100%; } .recruit_navigation .wrapper ul li.recruitbackbtn > a b { font-size: 12px; } .recruit_navigation .wrapper ul li.recruitbackbtn > a svg { right: 10px; width: 20px; } } */ .recruit_navigation .wrapper ul li.recruitbackbtn { width: 100%; display: -webkit-flex; display: flex; justify-content: flex-start; } .recruit_navigation .wrapper ul li.recruitbackbtn > a { width: calc(50% - 20px); background-color: #004ea2; position: relative; padding: 14px 20px; text-align: right; overflow: hidden; } .recruit_navigation .wrapper ul li.recruitbackbtn > a b { color:#fff; font-size: 14px; font-size: clamp(12px, 16px, 1.4vw); font-weight: 700; position: relative; z-index: 2; transition: all .5s; } .recruit_navigation .wrapper ul li.recruitbackbtn > a svg { color:#fff; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); left: 20px; width: 25px; transition: all .5s; z-index: 2; } .recruit_navigation .wrapper ul li.recruitbackbtn > a::before { content:""; width: 0px; height: 100%; background-color: #ffd900; position: absolute; top: 0; bottom: 0; left: 101%; right: 0; z-index: 1; transition: all .3s; } @media (min-width: 768px) { .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover::before { width: 101%; left: 0; right: 0; } .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover b { color:#004ea2; } .recruit_navigation .wrapper ul li.recruitbackbtn > a:hover svg { color:#004ea2; } } @media (max-width: 767px) { .recruit_navigation .wrapper ul li.recruitbackbtn > a { width: 100%; } .recruit_navigation .wrapper ul li.recruitbackbtn > a b { font-size: 12px; } .recruit_navigation .wrapper ul li.recruitbackbtn > a svg { left: 10px; width: 20px; } } /* ------------ RECRUIT CONTENT ------------- */ .recruit_content { background-color: #fff; } .recruit_content .wrapper { width: 100%; padding: 60px 100px 80px; margin: 0; position: relative; text-align: center; } .recruit_content .wrapper.topbtm { padding-bottom: 0; } .recruit_content .wrapper .recruit_inner { width: 100%; max-width: 980px; margin: 0 auto; text-align: left; } @media (max-width: 767px) { .recruit_content .wrapper { padding: 30px 20px; } } .recruit_inner h2.nidttle { width: 100%; display: -webkit-flex; display: flex; align-items: center; padding: 20px 0 20px 25px; margin: 0 0 30px; position: relative; } .recruit_inner h2.nidttle::before { content:""; position: absolute; width: 4px; left: 0; top: 0; bottom: 0; background-color: #004ea2; } .recruit_inner h2.nidttle::after { content:""; position: absolute; width: 4px; left: 0; top: 65%; bottom: 0; background-color: #000; } .recruit_inner h2.nidttle > span { color:#000; font-size: 30px; font-size: clamp(18px, 30px, 3vw); line-height: 1.3; font-weight: 500; letter-spacing:.03rem; } @media (max-width: 767px) { .recruit_inner h2.nidttle { padding: 10px 0 10px 20px; margin: 0 0 20px; } .recruit_inner h2.nidttle > span { font-size: 18px; } } .recruit_read { color:#000; font-size: 18px; font-size: clamp(14px, 18px, 1.8vw); line-height: 1.8; font-weight: 700; letter-spacing:.06rem; margin: 0 0 50px; } .recruit_tost { margin: 0 0 40px; } .recruit_tost.bt1px { padding-bottom: 25px; margin-bottom: 40px; border-bottom: 1px solid #000; } .recruit_tost > h3 { color:#000; font-size: 18px; font-size: clamp(14px, 18px, 1.8vw); line-height: 1; font-weight: 700; letter-spacing:.06rem; margin: 0 0 20px; } .recruit_tost > h3 > span { color:#004ea2; } .recruit_tost > p { color:#000; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.8; letter-spacing:.06rem; margin: 0 0 10px; } .recruit_tost > p.mdl { font-size: 18px; font-size: clamp(14px, 18px, 1.8vw); } .recruit_tost > p a { color:#004ea2; text-decoration: underline; } .recruit_tost > p.bigb { font-size: 18px; font-size: clamp(14px, 18px, 1.8vw); font-weight: 700; } .recruit_tost > b { color:#000; font-size: 16px; font-size: clamp(13px, 16px, 1.6vw); line-height: 1.8; font-weight: 700; letter-spacing:.06rem; margin: 0 0 10px; } .recruit_tost em { color:#004ea2; } .recruit_tost > p.indent { text-indent: 1em; } .recruit_tost .timeschedule { list-style-type: none; display: -webkit-flex; display: flex; flex-direction: column; width: 100%; border-top: 1px solid #004ea2; } .recruit_tost .timeschedule > li { display: -webkit-flex; display: flex; align-items: flex-start; width: 100%; border-bottom: 1px solid #004ea2; padding: 20px; } .recruit_tost .timeschedule > li > b { padding: 0 30px 0 0; } .recruit_tost .timeschedule > li > b, .recruit_tost .timeschedule > li > p { color:#000; font-size: 24px; font-size: clamp(18px, 24px, 2.4vw); line-height: 1; letter-spacing:.06rem; } .recruit_tost .timeschedule > li > b > span { color:#004ea2; } @media (max-width: 767px) { .recruit_read { font-size: 14px; margin: 0 0 30px; } .recruit_tost { margin: 0 0 20px; } .recruit_tost.bt1px { padding-bottom: 15px; margin-bottom: 20px; } .recruit_tost > h3 { font-size: 14px; margin: 0 0 10px; } .recruit_tost > p { font-size: 13px; margin: 0 0 5px; } .recruit_tost > p.mdl { font-size: 14px; } .recruit_tost > p.bigb { font-size: 14px; } .recruit_tost .timeschedule > li { padding: 10px; } .recruit_tost .timeschedule > li > b { padding: 0 20px 0 0; } .recruit_tost .timeschedule > li > p { font-size: 18px; } } .btnumdertxt { text-align: center; color:#000; font-size: 15px; font-size: clamp(12px, 15px, 1.5vw); line-height: 1.8; margin: -20px 0 0; } @media (max-width: 767px) { .btnumdertxt { font-size: 12px; text-align: left; margin: -10px 0 0 1em; text-indent: -1em; } } .recruit_cheat { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 90px 0 0; } .recruit_cheat > li { width: calc(50% - 25px); margin: 0 0 60px; display: -webkit-flex; display: flex; flex-direction: column; justify-content: space-between; } .recruit_cheat > li b { width: 100%; color:#004ea2; font-size: 22px; font-size: clamp(16px, 22px, 2vw); font-weight: 700; line-height: 1.3; letter-spacing:.06rem; margin: 0 0 10px; } @media (max-width: 767px) { .recruit_cheat { padding: 40px 0 0; } .recruit_cheat > li { width: 100%; margin: 0 0 30px; } .recruit_cheat > li b { font-size: 16px; margin: 0 0 10px; text-align: center; } } .recruit_flow { background-color: #e5edf6; padding: 60px; } .recruit_flow .wrapper { background-color: #fff; width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 50px 50px 10px; } .recruit_flow .wrapper .inner { width: 100%; max-width: 980px; text-align: left; } @media (max-width: 767px) { .recruit_flow { padding: 30px 20px; } .recruit_flow .wrapper { padding: 20px 20px 0; } } .flowlist { display: -webkit-flex; display: flex; flex-direction: column; list-style-type: none; counter-reset: number 0; } .flowlist > li { display: -webkit-flex; display: flex; flex-direction: column; counter-increment: section; position: relative; padding: 0 0 30px 90px; font-size: clamp(13px, 17px, 2vw); font-weight: 700; line-height: 1.3; } .flowlist > li::before { content: counter(section, decimal-leading-zero); counter-increment: number 1; position: absolute; top:0; left: 0; font-size: clamp(16px, 20px, 3vw); font-weight: 700; line-height: 1.3; } .flowlist > li::after { content:""; width: 1px; height: 100%; position: absolute; left: 61px; top: 0; bottom: 0; background-color: #939393; z-index: -1; } .flowlist > li:last-child { padding-bottom: 3px; } .flowlist > li:last-child::after { display: none; } .flowlist > li em { width: 3px; height: 28px; position: absolute; left: 60px; top: 0; background-color: #004ea2; } @media (max-width: 767px) { .flowlist > li { padding: 3px 0 20px 50px; } .flowlist > li::after { left: 36px; } .flowlist > li:last-child { padding-bottom: 2px; } .flowlist > li em { width: 3px; height: 24px; position: absolute; left: 35px; top: 0; background-color: #004ea2; } } .recruit-company_table { width: 100%; border: 1px solid #004ea2; border-width: 0 0 1px 0; border-spacing: 0; } .recruit-company_table th, .recruit-company_table td { font-size: 16px; letter-spacing: .1rem; line-height: 1.6; text-align: left; border-top: solid 1px #004ea2; padding: 30px; vertical-align: top; text-align: left; margin: 0; } .recruit-company_table th { text-align: left; background-color: #edf0f2; width: 200px; } .recruit-company_table td > span { display: block; } @media (max-width: 767px) { .recruit-company_table { border: 0; } .recruit-company_table th { padding-bottom: 0; border: none; } .recruit-company_table th, .recruit-company_table td { font-size: 13px; display: block; width: 100%; line-height: 1.4; border-top: 0; } .recruit-company_table th, .recruit-company_table td { padding: 10px; } .recruit-company_table th { text-align: left; } } .rechis { display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; list-style-type: none; font-size: 15px; line-height: 1.4; } .rechis dt { width: 100px; white-space: nowrap; padding: 0 0 20px; } .rechis dd { width: calc(100% - 120px); padding: 0 0 20px; } @media (max-width: 767px) { .rechis { font-size: 12px; } .rechis dt { width: 100%; padding: 0 0 3px; position: relative; text-indent: -.5em; } .rechis dt::before { content:"・"; } .rechis dd { width: 100%; padding: 0 0 12px; } } .recruit_blue_header { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #004ea2; padding: 40px 100px; } .recruit_blue_header.whitebg { background-color: #fff; padding: 60px 100px; } .recruit_blue_header.intv { padding-bottom: 0; } .recruit_blue_header .wrapper { width: 100%; max-width: 980px; } .recruit_blue_header p { color:#fff; font-size: 20px; font-size: clamp(15px, 20px, 2vw); line-height: 2.2; font-weight: 500; letter-spacing:.03rem; padding: 50px 0 40px; } .recruit_blue_header.whitebg p { color:#000; } h2.bbstttle { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; padding: 0 0 0 25px; margin: 0; position: relative; } h2.bbstttle::before { content:""; position: absolute; width: 4px; left: 0; top: 0; bottom: 0; background-color: #fff; } h2.bbstttle::after { content:""; position: absolute; width: 4px; left: 0; top: 70px; bottom: 0; background-color: #000; } h2.bbstttle > b { color:#fff; font-size: 30px; font-size: clamp(20px, 30px, 3vw); line-height: 1.2; font-weight: 500; letter-spacing:.03rem; padding: 20px 0 18px; } h2.bbstttle > span { color:#fff; font-size: 17px; font-size: clamp(12px, 17px, 1.7vw); line-height: 1; font-weight: 400; letter-spacing:.03rem; padding: 3px 0 5px; } .recruit_blue_header.whitebg h2.bbstttle::before { background-color: #004ea2; } .recruit_blue_header.whitebg h2.bbstttle::after { background-color: #000; } .recruit_blue_header.whitebg h2.bbstttle > b { color:#000; } .recruit_blue_header.whitebg h2.bbstttle > span { color:#000; } @media (max-width: 767px) { .recruit_blue_header, .recruit_blue_header.whitebg { padding: 30px 20px; } .recruit_blue_header.intv { padding-bottom: 0; } .recruit_blue_header p { font-size: 14px; line-height: 1.8; padding: 20px 0; } h2.bbstttle { padding: 0 0 0 20px; } h2.bbstttle::after { top: 50px; } h2.bbstttle > b { font-size: 20px; padding: 15px 0 12px; } h2.bbstttle > span { font-size: 12px; } } .recruit_teammessage { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffff; padding: 60px 100px; } .recruit_teammessage .wrapper { width: 100%; max-width: 980px; } .recruit_teammessage .wrapper > p { font-size: 17px; font-size: clamp(13px, 18px, 1.5vw); line-height: 3; font-weight: 400; letter-spacing:.06rem; padding: 0 0 5px; } .recruit_teammessage .wrapper > p.alinr { text-align: right; } @media (max-width: 767px) { .recruit_teammessage { padding: 30px 20px; } .recruit_teammessage .wrapper > p { font-size: 13px; line-height: 2.6; padding: 0 0 3px; } .recruit_teammessage .wrapper > p br { display: none; } } .rectopintv { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 0 100px; } .rectopintv .wrapper { width: 100%; max-width: 980px; transform: translateY(-45px); } .recinv.btm80 { padding: 0 0 80px; } .recinv > h2 { color:#004ea2; font-size: 35px; font-size: clamp(20px, 35px, 3.2vw); line-height: 1.5; font-weight: 500; letter-spacing:.03rem; padding: 16px 0 20px; } .recinv > h2.invlintt { font-size: 22px; font-size: clamp(16px, 22px, 2.2vw); } .recinv > dl { display: -webkit-flex; display: flex; align-items: center; padding: 0 0 0 28px; margin: 0 0 30px; border-left: 4px solid #000; } .recinv > dl > dt { font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:.03rem; padding: 5px 25px; border: 1px solid #000; } .recinv > dl > dd { font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:.03rem; padding: 5px 15px; } @media (max-width: 767px) { .rectopintv { padding: 30px 20px 0; } .rectopintv .wrapper { transform: translateY(-60px); } .recinv.btm80 { padding: 0 0 40px; } .recinv > h2 { font-size: 16px; padding: 12px 0 15px; } .recinv > h2.invlintt { font-size: 14px; } .recinv > dl { padding: 0 0 0 20px; margin: 0 0 18px; border-left: 4px solid #000; flex-wrap: wrap; } .recinv > dl > dt { font-size: 12px; padding: 5px 25px; border: 1px solid #000; } .recinv > dl > dd { font-size: 12px; padding: 8px 0 0; width: 100%; } } .rectopsynp { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 0 0 100px; position: relative; } .invbtmlinks { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 0 0 100px; position: relative; } .rectopsynp-wrapper { margin: 0 100px; max-width: 980px; display: -webkit-flex; display: flex; justify-content: space-between; background-color: #fff; } .rectopsynp-wrapper.insyn { margin: 0; max-width: 100%; flex-wrap: wrap; } .rectopsynp-wrapper.insyn2 { flex-wrap: wrap; } .rectopsynp-wrapper > dl { display: -webkit-flex; display: flex; flex-direction: column; width: calc(100% / 3 - 20px); } .rectopsynp-wrapper.insyn > dl { width: calc(100% / 3); } .rectopsynp-wrapper > dl > dt { width: 100%; margin: 0 0 15px; } .rectopsynp-wrapper > dl > dd { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; } .rectopsynp-wrapper.insyn > dl > dd { padding: 20px 5%; } .rectopsynp-wrapper > dl > dd > strong { width: 100%; padding: 0 0 0 20px; margin: 0 0 20px; border-left: 4px solid #000; line-height: 1; display: -webkit-flex; display: flex; align-items: center; } .rectopsynp-wrapper > dl > dd > strong > span { font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:.03rem; padding: 5px 25px; border: 1px solid #000; } .rectopsynp-wrapper > dl > dd > strong > i { font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:.03rem; padding: 0 0 0 10px; font-style: normal; } .rectopsynp-wrapper > dl > dd > p { font-size: 14px; line-height: 1.6; font-weight: 500; letter-spacing:.03rem; } @media (max-width: 767px) { .rectopsynp { padding: 0 0 40px; } .invbtmlinks { padding: 0 0 40px; } .rectopsynp-wrapper { padding: 0 0 20px; margin: 0; flex-direction: column; } .invbtmlinks .rectopsynp-wrapper { transform: translateY(-60px); } .invbtmlinks .btn_more { transform: translateY(-40px); } .rectopsynp-wrapper.insyn > dl, .rectopsynp-wrapper > dl { width: 100%; flex-direction: row; justify-content: space-between; padding: 20px 20px 0; } .rectopsynp-wrapper > dl > dt { width: calc(50% - 10px); margin: 0; } .rectopsynp-wrapper.insyn > dl > dd, .rectopsynp-wrapper > dl > dd { width: 50%; padding: 0; } .rectopsynp-wrapper > dl > dd > strong { padding: 0 0 0 10px; margin: 0 0 10px; border-left: 2px solid #000; } .rectopsynp-wrapper > dl > dd > strong > span { font-size: 12px; padding: 3px 8px; border: 1px solid #000; } .rectopsynp-wrapper > dl > dd > strong > i { font-size: 12px; padding: 0 0 0 5px; } .rectopsynp-wrapper > dl > dd > p { font-size: 12px; } } @media (max-width: 374px) { .rectopsynp-wrapper > dl > dt { width: calc(40% - 10px); margin: 0; } .rectopsynp-wrapper.insyn > dl > dd, .rectopsynp-wrapper > dl > dd { width: 60%; } .rectopsynp-wrapper > dl > dd > strong { padding: 0 0 0 10px; margin: 0 0 10px; border-left: 2px solid #000; } .rectopsynp-wrapper > dl > dd > strong > span { font-size: 12px; padding: 3px 8px; border: 1px solid #000; } .rectopsynp-wrapper > dl > dd > strong > i { font-size: 12px; padding: 0 0 0 5px; } .rectopsynp-wrapper > dl > dd > p { font-size: 12px; } } .recintmain { position: fixed; top:80px; bottom: 0; left: 0; right: 0; width: 100%; height: calc(100vh - 80px); z-index: -1; } .recintmain.int01 { background: url(/images/recintmain01.jpg) center top / cover no-repeat; } .recintmain.int02 { background: url(/images/recintmain02.jpg) center top / cover no-repeat; } @media (max-width: 767px) { .recintmain.int01 { background: url(/images/recintmain01sp.jpg) center top / cover no-repeat; } .recintmain.int02 { background: url(/images/recintmain02sp.jpg) center top / cover no-repeat; } } .recruit_invtxt { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 0 100px; } .recruit_invtxt .wrapper { width: 100%; max-width: 980px; color:#000; font-size: 16px; font-size: clamp(12px, 17px, 2vw); line-height: 2; font-weight: 400; letter-spacing:.03rem; padding: 100px 0; } .recruit_invtxt.withtt .wrapper { padding: 0 0 100px; } .recruit_invimg { width: 100%; background-color: #fff; padding: 0; } .recruit_invimg.btmmgn { padding-bottom: 200px; } @media (max-width: 767px) { .recruit_invtxt { padding: 0 20px; } .recruit_invtxt .wrapper { font-size: 14px; line-height: 1.8; padding: 40px 0; } .recruit_invtxt.withtt .wrapper { padding: 0 0 40px; } .recruit_invimg.btmmgn { padding-bottom: 60px; } } .rectopintv_ttllbl { width: 100%; text-align: center; position: relative; background-color: #004ea2; padding: 80px 20px 120px; } .rectopintv_ttllbl > strong { color:#fff; font-size: 40px; font-size: clamp(20px, 40px, 4vw); line-height: 1; font-weight: 700; letter-spacing:.03rem; } @media (max-width: 767px) { .rectopintv_ttllbl { padding: 40px 20px 60px; } } .recsymposium { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; padding: 0 100px; } .recsymposium .wrapper { width: 100%; max-width: 980px; padding: 80px 0 40px; } .recsymposium .wrapper > dl { display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; padding: 0; margin: 0 0 50px; } .recsymposium .wrapper > dl > dt { width: 116px; line-height: 1; } .recsymposium .wrapper > dl > dd { width: calc(100% - 160px); color:#000; font-size: 16px; font-size: clamp(13px, 17px, 1.6vw); line-height: 2; font-weight: 400; letter-spacing:.06rem; } .recsymptthd { display: -webkit-flex; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 40px; } .recsymptthd > span { color:#fff; font-size: 20px; font-size: clamp(20px, 30px, 3vw); line-height: 1; font-weight: 400; letter-spacing:.1rem; padding: 8px 12px; margin: 0 0 12px; background-color: #004ea2; } .recsympQ { display: -webkit-flex; display: flex; list-style-type: none; margin: 0 0 50px; } .recsympQ > li { color:#000; font-size: 25px; font-size: clamp(16px, 25px, 2.5vw); line-height: 1.8; font-weight: 500; letter-spacing:.1rem; } .recsympQ > li:first-child { padding: 0 20px 0 0; } .recsymposium_btm { background-color: #fff; width: 100%; display: -webkit-flex; display: flex; flex-direction: column; padding: 100px 0; } .recsymposium_btm .recpobt_right { padding: 0 10% 100px 0; } .recsymposium_btm .recpobt_left { padding: 0 0 100px 10%; } @media (max-width: 767px) { .recsymposium { padding: 0 20px; } .recsymposium .wrapper { padding: 20px 0; } .recsymposium .wrapper > dl { margin: 0 0 20px; align-items: flex-start; } .recsymposium .wrapper > dl > dt { width: 60px; } .recsymposium .wrapper > dl > dd { width: calc(100% - 70px); font-size: 13px; line-height: 1.8; } .recsymptthd { margin: 0 0 10px; } .recsymptthd > span { font-size: 16px; padding: 4px 6px; margin: 0 0 8px; } .recsympQ { margin: 0 0 20px; } .recsympQ > li { font-size: 16px; line-height: 1.4; } .recsympQ > li:first-child { padding: 0 20px 0 0; } .recsymposium_btm { padding: 0 0 20px; } .recsymposium_btm .recpobt_right { padding: 0 20px 20px 0; } .recsymposium_btm .recpobt_left { padding: 0 0 20px 20px; } } /* ------------ GO TOP ------------- */ .gotop { position: fixed; bottom: 0; right: 20px; transition: all 1s; opacity: 0; z-index: -1; transform:rotate(90deg); transform-origin: top right; } .gotop a { display: -webkit-flex; display: flex; align-items: center; justify-content: center; line-height: 0; transition: all .5s; background-color: #ffd900; padding: 5px 18px; border-radius: 50px; } .gotop a span { color:#000; font-size: 13px; font-weight: 400; line-height: 1; letter-spacing:.1rem; padding: 0; margin: 0; } .gotop a .icon { color:#000; width: 10px; height: 10px; padding: 0; margin: 0 10px 0 0; transform:rotate(180deg); } .gotop.fixed { opacity: 1; z-index: 10; } @media (min-width: 768px) { .gotop > a:hover { background-color: #004ea2; } .gotop > a:hover span, .gotop > a:hover .icon { color:#fff; } } @media (max-width: 767px) { .gotop { bottom: 10px; right: 10px; transform:rotate(0deg); } .gotop a { padding: 0; border-radius: 50%; width: 40px; height: 40px; } .gotop a span { font-size: 10px; display: none; } .gotop a .icon { width: 12px; margin: 0 0 3px 0; transform:rotate(-90deg); } } /* ------------ BLOCK ------------- */ @media (max-width: 767px) { .pconly { display: none!important; } } @media (min-width: 768px) { .pconly { display: inline-block!important; } } @media (max-width: 767px) { .sponly { display: inline-block!important; } } @media (min-width: 768px) { .sponly { display: none!important; } } .noimg { display: none!important; } .delay01 { animation-delay: 0.1s; } .delay02 { animation-delay: 0.2s; } .delay03 { animation-delay: 0.3s; } .delay04 { animation-delay: 0.4s; } .delay05 { animation-delay: 0.5s; } .delay06 { animation-delay: 0.6s; } .delay07 { animation-delay: 0.7s; } .delay08 { animation-delay: 0.8s; } .delay09 { animation-delay: 0.9s; } .delay10 { animation-delay: 1s; } .delay11 { animation-delay: 1.1s; } .delay12 { animation-delay: 1.2s; } .delay13 { animation-delay: 1.3s; } .delay14 { animation-delay: 1.4s; } .delay15 { animation-delay: 1.5s; } .delay16 { animation-delay: 1.6s; } .delay17 { animation-delay: 1.7s; } .delay18 { animation-delay: 1.8s; } .delay19 { animation-delay: 1.9s; } .delay20 { animation-delay: 2s; } /* ------------ clearfix ------------- */ span.clearfix { display:block; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; line-height:0; } .clearfix { *overflow:hidden; *zoom:1; } .clearfix:not(:target) { /* overflow:hidden\9; */ /* zoom:1\9; */ } * html .clearfix { height:1%; overflow:visible; } .grecaptcha-badge { visibility: hidden; } p.reCAPTCHA { width: calc(100% - 20px); display: -webkit-flex; display: flex; justify-content: center; padding: 0 0 0 0; margin: 0 0 0 20px; text-align: left; position: relative; } p.reCAPTCHA small { font-size: 13px; line-height: 1.6; font-weight: 700; position: relative; } p.reCAPTCHA small::before { content:""; width: 13px; height: 17px; position: absolute; left:-20px; top: 0; background: url(/images/key_icon.svg) center center / cover no-repeat;} /* ------------ 240305 追加 ------------- */ .recruit_img_p{ font-size: 14px; margin-right: 0; margin-left: auto; } /* サステナビリティTOP */ .content_col { width: auto !inpotant; } .sustainability_img{ display: inline-block; height: auto; width: 100%; max-width: 100%; margin: 70px 0px 0px; } .sustainability_img p{ position: absolute; color: #000; font-size: 1.2rem; top: 50%; left: 50%; transform: translate(-50%, -80%); text-align: left; width: 80%; line-height: 3; } @media screen and (max-width: 768px){ .sustainability_img{ margin: 0px; } .sustainability_img p{ font-size: 1rem; width: 80%; transform: translate(-55%, -75%); line-height: 2.5; } .sp_br_none{ display:none; } } .sustainability_box{ position: relative;/*親要素にrelative*/ margin:0px 0px 50px; } .sustainability_box p{ position: absolute;/*重ねたい子要素にabsolute*/ top:50%; left: 50%; -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/ -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/ transform: translate(-50%,-50%);/*センター寄せの修正*/ color: #000; font-size: 1.8rem; margin: 0!important;/*文字がずれている場合や*/ padding: 0!important;/*文字が折り返される場合*/ } @media screen and (max-width: 768px){ .sustainability_box{ margin:0px 0px 30px; } .sustainability_box p{ font-size: 1.3rem; text-align: center; } } /*項目１つの場合*/ /* ------------ SUB CATEGORY ------------- */ .subCategory__wrapper_susta { display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; gap: 60px 40px; width: 100%; margin: 0; } .subCategory__wrapper_susta h3.title02 { width: 100%; border-left: 8px solid #004aa6; background: #ffd900; padding: 8px 15px; font-size: 2.4rem; font-weight: bold; margin-bottom: 40px; } .subCategory__wrapper_susta.nolink, .subCategory__wrapper_susta> a { width: calc(100% - 20px); padding: 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; } .subCategory__wrapper_susta> a.full { width: 100%; } .subCategory__wrapper_susta.nolink > b, .subCategory__wrapper_susta> a > b { height: 0; overflow: hidden; padding: 0 0 35%; margin: 0; background-color: #fff; } .subCategory__wrapper_susta.nolink.linksss > b { display: block; margin: 0 0 40px; } .subCategory__wrapper_susta.nolink b > img, .subCategory__wrapper_susta> a > b > img { width: 100%; transition: all .5s; opacity: 1; } .subCategory__wrapper_susta.nolink strong, .subCategory__wrapper_susta> a > strong { font-size: 20px; font-size: clamp(15px, 20px, 1.8vw); font-weight: 700; line-height: 1; margin: 20px 0 0; } .subCategory__wrapper_susta.nolink hr.bar-m, .subCategory__wrapper_susta> a > hr.bar-m { margin: 15px 0; } .subCategory__wrapper_susta.nolink p, .subCategory__wrapper_susta> a > p { font-size: 16px; font-size: clamp(13px, 16px, 1.3vw); line-height: 1.6; margin: 0; } .subCategory__wrapper_susta.nolink p.enpinblk, .subCategory__wrapper_susta> a > p.enpinblk { margin-top: 20px; } .subCategory__wrapper_susta> a p { color:#000; } .subCategory__wrapper_susta> a p span { text-decoration: underline; } .subCategory__wrapper_susta> a p svg.icon { width: 32px; height: 32px; vertical-align: bottom; } .subCategory__wrapper_susta.nolink a { margin: 0 0 30px; } .subCategory__wrapper_susta.nolink a hr { margin: 10px 0; } @media (min-width: 768px) { .subCategory__wrapper_susta> a:hover > b > img { transform: scale(1.1); opacity: .6; } .subCategory__wrapper_susta> a:hover > strong { color:#004ea2; } .subCategory__wrapper_susta> a:hover p { color:#004ea2; } } @media (max-width: 767px) { .subCategory__wrapper_susta { gap: 30px 20px; width: 100%; margin: 0; } .subCategory__wrapper_susta.nolink, .subCategory__wrapper_susta> a { width: calc(100% - 10px); } .subCategory__wrapper_susta.spcol1 > a { width: 100%; } .subCategory__wrapper_susta.subCard .nolink, .subCategory__wrapper_susta.subCard > a { width: 100%; } .subCategory__wrapper_susta.nolink > strong, .subCategory__wrapper_susta> a > strong { font-size: 15px; margin: 10px 0 0; } .subCategory__wrapper_susta.nolink > hr.bar-m, .subCategory__wrapper_susta> a > hr.bar-m { margin: 5px 0; } .subCategory__wrapper_susta.nolink > p, .subCategory__wrapper_susta> a > p { font-size: 13px; } } .mb100{ margin:0px 0px 100px; } .pc_none{ display:none; } .sp_none{ display:block; } @media screen and (max-width: 768px){ .pc_none{ display:block; } .sp_none{ display:none; } } .secondHero.hero-sustainability { background: rgb(0, 78, 162, .5) url(/images/materiality_zu__top_img.jpg) center center / cover no-repeat; background-blend-mode: multiply; } /* サステナビリティ重要問題 */ .sustainability-profile{ margin: 0 auto; max-width: 1000px; } .sustainability_table { width: 100%; border-width: 1px 1px 1px 1px; border-spacing: 0; } .sustainability_table th { width: 50%; } .sust_table th{ padding: 14px 0px 12px 50px; } .sustainability_table td { padding: 20px 15px 15px; } .sustainability_table th{ text-align: center !important; } .sustainability_table th, .sustainability_table td { font-size: 20px; letter-spacing: .1rem; line-height: 1.6; font-weight:bold; border: solid 1px #0057B0; /*padding: 14px 12px;*/ vertical-align: top; margin: 0; vertical-align: middle; } .sustainability_table img{ width:100px; margin:0px 5px; } .first_01{ background: #FFDF00; text-align: center; } .first_02{ background: #FFFBE4; text-align: center; } .colr_box{ background-color:#E6E6E6; } .first td{ text-align: center; } .explanation{ margin: 20px 0px 50px; } .csrios_txt{ margin: 20px 0px 50px !important; width: calc(100% - 70px); } .materiality_txt{ width: 75%; margin: 0px 30px 0px 0px; } @media screen and (max-width: 768px){ .materiality_txt{ width: 100%; margin: 0px 20px 0px 20px; } } .materiality_txt strong{ margin: 50px 0px 30px !important; } .csrios_img{ width:100%; } .csrios_img img{ width: 300px; } @media screen and (max-width: 768px){ .csrios_txt{ width: 100%; } .csrios_img{ width: 100%; } } .content_col_segm { width: 100%; padding: 15px 0 30px; margin: 0; } @media screen and (max-width: 768px){ .content_col p { margin-bottom: 20px; } } .sustainability_footer{ background: #fff9d4; } .footer_box{ width: 1000px; margin: 0 auto; padding: 80px 0px; } .footer_box .button a { background: #0057B0; border-radius: 9999px; position: relative; /* display: flex; */ justify-content: space-around; align-items: center; margin: 0 auto; max-width: 250px; padding: 8px 45px 8px 30px; font-family: "Noto Sans Japanese"; color: #fff; line-height: 1.8; text-decoration: none; transition: 0.3s ease-in-out; font-weight: bold; font-size: 1.2em; border: 2px solid #0057B0; font-family: 'Roboto', "游ゴシック", "游ゴシック体", 'YuGothic', 'Hiragino Sans', Meiryo, sans-serif; } .footer_box .button a:hover { background: #fff; color: #0057B0; border: 2px solid #0057B0; } .footer_box .button a:after { content: ''; width: 10px; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 45%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; } .footer_box .button a:hover:after { border-color: #0057B0; } .link_01{ margin: 30px 0px 0px} .link_02{ display: flex; margin: 30px 0px 0px} .link_s li{ margin: 0px 15% 0px 0px; padding: 0.25em 0.5em 0.25em 0.75em; background: transparent;/*背景透明に*/ border-left: solid 5px #0057B0;/*左線*/ font-size: 1.2em; font-weight: bold; } .link_s li:hover{ opacity: 0.6; } @media screen and (max-width: 768px){ .footer_box{ width: 100%; margin: 0 auto; padding: 60px 20px; } .link_02{ display: block; margin: 0px; } .link_s li{ margin: 20px 15% 0px 0px; } } .pc_none{ display:none; } .sp_none{ display:block; } @media screen and (max-width: 768px){ .pc_none{ display:block; } .sp_none{ display:none; } .sp_mb{ margin:0 0 20px; } } .secondHero.hero-materiality { background: rgb(0, 78, 162, .5) url(/images/materiality_zu__2mat_sub_img_.jpg) center center / cover no-repeat; background-blend-mode: multiply; } .sustainability_table_sp02 { width: 100%; border: 1px solid #0057B0; border-width: 1px 1px 0 1px; border-spacing: 0; } .sustainability_table_sp02 th, .sustainability_table_sp02td { font-size: 16px; letter-spacing: .1rem; line-height: 1.6; font-weight: 500; text-align: left; border-bottom: solid 1px #0057B0; padding: 14px 12px; vertical-align: top; text-align: left; margin: 0; } .sustainability_table_sp02 th { text-align: center; width: 170px; } .sustainability_table_sp02 td > span { display: block; } .page-profile > p { padding: 0; margin: 20px 0 0; font-size: 16px; letter-spacing: .1rem; line-height: 1.6; } .page-profile > p.right { text-align: right; } p.ploftxt { margin: 0 0 40px; } .sustainability_table_sp02 .first_01{ background:#FFDF00 ; } .sustainability_table_sp02 .first_02{ background:#FFFBE4 ; } @media (max-width: 767px) { .sustainability_table_sp02 th { padding-bottom: 0;} .sustainability_table_sp02 th, .sustainability_table_sp02 td { display: block; width: 100%; line-height: 1.4; text-align: center; padding: 10px; font-weight: bold;} .sustainability_table_sp02 th { text-align: center; padding: 10px; font-size: 14px;} .sustainability_table_sp02 td { text-align: center; padding: 20px; font-size: 16px; border-bottom:solid 1px #0057B0;} .sustainability_table_sp02 img{width: 35%;} .page-profile > p { font-size: 13px; } p.ploftxt { margin: 0 0 20px; } } .ma50{ margin-bottom: 50px !important; } .mb20{ margin-bottom: 20p !important; } /250127 追記/ .committee .02{ margin-top: 100px; } .committee h3{ border-bottom: 2px #024ea2 solid ; font-size: 22px; font-size: clamp(16px, 24px, 2vw); line-height: 1.4; font-weight: 700; padding: 0 0 5px; margin-bottom: 30px; display: inline-block; } .committee_box{ display: flex; margin-bottom: 35px; } .committee_02{ margin-top:50px; } .committee_box .heading { width: 160px; background: #092c87; height: 50px; margin: 0px 30px 0px 0px; padding: 10px; } @media (max-width: 767px){ .committee_box .heading { width: 110px; } } .committee_box .heading p{ text-align: center; font-size: 18px; color: #fff; } .committee_box .txt { flex: 1; } .committee_box p{ font-size: 16px; font-size: clamp(14px, 18px, 1.5vw); line-height: 1.8; padding: 0; margin: 0; position: relative; line-break: strict; } /250127 サステナビリティ/ .box01 th{font-weight: bold;} .t-heading01{width: 23%;} .t-heading02{width: 21%;} .t-heading03{width: 17%;} .t-heading04{width: 15%;} .t-heading05{width: 15%;} .t-heading06{width: 10%;} .r-heading01{padding:120px 0px;} .r-heading02{padding:70px 10px;} .m-txt a{ text-decoration:underline; color: #092c87 !important} /* .m-txt:hover{opacity: 0.7;}*/ th, td { border: 1px solid #092c87; /*text-align: center;*/ padding: 10px; } th { background-color: #FFD700; } th[rowspan] { vertical-align: middle; } th[colspan] { background-color: #FFD700; } td a { text-decoration: none; color: #000; font-weight: bold; } td img { width: 45%; vertical-align: middle; margin-right: 5px; margin:0px 0px 10px; } .icon_t{ width: 20px; margin-left: 5px; } .materiality_table td.stxt_left, .materiality_table th.stxt_left { text-align: left; } .box_b{ padding: 0px !important; } .table-container { width: 100% !important; /* コンテナを親要素に対して100%の幅に */ overflow-x: auto!important; /* 横スクロールを有効に */ -webkit-overflow-scrolling: touch!important; /* スムーズスクロールを有効に（iOS用） */ } .materiality_table { border-collapse: collapse; min-width: 800px; /* 最小幅を指定 */ width: auto; /* 必要に応じて幅を自動調整 */ } .materiality_table th, .materiality_table td { text-align: center; } .box_bottom01 { margin: 60px 0px 0px; } .box_bottom02 { margin: 0px 0px 60px; } .box_bottom_lien { border-bottom: 1px solid #092c87; margin: 60px 0px 60px; } .box_bottom_lien02 { border-bottom: 1px solid #092c87; margin: 80px 0px 80px; } /*250325 追記*/ .csr_boxlist{ padding: 0 0 20px; margin: 0; font-size: clamp(15px, 18px, 1.8vw); line-height: 1.6; } .csr_boxlist h4{ font-weight: bold; font-size: clamp(17px, 20px, 2.0vw); padding-top: 20px; } .csr_boxlist span{ font-weight: bold; } .csr_txt{ padding-top: 10px; } @media screen and (max-width: 768px){ .csr_boxlist{ padding: 0px; } } /*250414 追記*/ .txt_mg span{ margin-left: 20px;} .pt30{ padding-top: 30px; } /*2501104 追記*/ .m_annotation_box{ padding: 0px 0px 80px; margin-top: -125px; } .m_annotation{ font-size: 14px; line-height: 1.5; } @media screen and (max-width: 768px){ .m_annotation_box{ padding: 0px 25px 20px; margin-top: -25px; } }