@charset "UTF-8"; /* First View CSS */ /* 概要：ファーストビュー専用　初期表示に最低限必要なものを書く 呼び出し位置：[必須呼び出し]htmlファイル内で呼び出し */ /* ==================== */ /* presetting all */ /* ==================== */ @import url("https://fonts.googleapis.com/css?family=Kanit:200,800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { font-size: 16px; image-rendering: -webkit-optimize-contrast; } body { background: #fff; line-height: 1.5; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } summary { display: list-item; } div, h1, h2, h3, h4, h5, p, li, a, b, span, small, aside { font-family: "Noto Sans JP",sans-serif; } a { color: #000; -webkit-transition: .3s; transition: .3s; } a:hover { opacity: .6; } ul, li { list-style-type: none; } img { image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; } /* iOSでのデフォルトスタイルをリセット */ input[type="submit"], input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; } input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration { display: none; } input[type="submit"]:focus, input[type="button"]:focus { outline-offset: -2px; } button:hover { cursor: pointer; } .btn-style:hover { cursor: pointer; } .basic-button { display: block; width: 127px; height: 40px; } /* 標準ボタン */ .basic-button.wide { width: 278px; } /* ワイドボタン */ .basic-button .btn-style { border-radius: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); width: 100%; height: 100%; } .basic-button .btn-style .btn-style-inner { border: none; background: none; color: #fff; font-family: "Noto Sans JP" , sans-serif; font-size: 1rem; font-weight: 300; width: 100%; height: 100%; } .basic-button .btn-style.btn-white .btn-style-inner { color: #000; font-weight: 600; } .basic-button:hover .btn-style { /* position: relative; top: 1px; left: 1px;*/ } .btn-black { background-color: #000; } .btn-green { background-color: #00AD5D; } .btn-white { background-color: #fff; } .marker-plgr { background: #c6e9d8; background: -moz-linear-gradient(0deg, #c6e9d8 37%, rgba(255, 255, 255, 0) 37%); background: -webkit-linear-gradient(0deg, #c6e9d8 37%, rgba(255, 255, 255, 0) 37%); background: linear-gradient(0deg, #c6e9d8 37%, rgba(255, 255, 255, 0) 37%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c6e9d8",endColorstr="#ffffff",GradientType=1); } .board-graywhite { background-color: #f7f7f7; } .anchor-float { display: inline-flex; align-items: center; justify-content: space-between; color: #00AD5D; font-size: 1rem; font-weight: 400; text-decoration: none; } /* ぶら下がりリンク */ .anchor-float::after { content: ""; display: inline-block; background-image: url("../../images/common/icn-arrow-green-r.svg"); background-size: contain; background-position: center center; background-repeat: no-repeat; width: 18px; height: 18px; margin-left: 10px; } .sp { display: none; } /*トップのプレゼンスライド */ .presentation-content-section { margin-bottom: 50px; } .content-section.presentation-content-section .content-section-inner { padding: 40px 0; } .presentation-content-section .grid-container { margin-top: 20px; } .presentation-item-text1 { font-size: 1.25rem; padding: 7px 0 3px 0; } .presentation-item-text2 { color: #5D5D5D; } .presentation-item { position: relative; -webkit-transition: .3s; transition: .3s; } .presentation-item:hover { opacity: 0.8; } .presentation-item a { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; } @media screen and (max-width: 1024px) { .top-msg{ padding: 0 20px; margin-bottom: 60px !important; } } /* スライドの調整*/ .dx_omo img, #news img:not(.sp-header-navigation-items .sp-header-logo img) { width: 100%; height: auto; vertical-align: bottom; } img { width: 100%; height: auto; vertical-align: bottom; } /* Topics */ .topics-list { /*height: 440px;*/ background: #80dbaf; background: -moz-linear-gradient(50deg, #56e0ab 0%, #01b765 100%); background: -webkit-linear-gradient(50deg, #56e0ab 0%, #01b765 100%); background: linear-gradient(50deg, #56e0ab 0%, #01b765 100%); background: linear-gradient(50deg, #56e0ab 0%, #01b765 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#80dbaf",endColorstr="#3ec983",GradientType=1); } /*トップの製品 */ .top-product { height: 440px; background: #F7F7F7; position: relative; } @media screen and (max-width: 599px) { .top-product{ margin-top: 30px; } .top-product h2.content-title{ margin-bottom: 0px; } } .content-section.top-product .content-section-inner { width: 100%; padding: 60px 0; } .top-product-inner { background: url(../../images/top/top-prd.png) 90% 50% no-repeat; background-size: 510px; height: 100%; opacity: .8; } .top-product-text{ width: 50%; } @media screen and (max-width: 1024px) { .top-product-inner { background: url(../../images/top/top-prd.png) 160% 50% no-repeat; background-size: 480px; height: 100%; opacity: .8; } .top-product-text{ width: 70%; } } .top-product a.anchor-float { color: #FFF; margin-top: 20px; } .top-product a.anchor-float::after { background-image: url(../../images/common/icn-arrow-white-r.svg); } @media screen and (max-width: 812px) { .top-product { height: auto; } .top-product-text{ width: 100%; } .content-section.top-product .content-section-inner { width: 100%; padding: 40px 0 20px 0; } .top-product-inner { background: none; background-size: cover; height: auto; opacity: .8; } .top-product a.anchor-float { color: #FFF; margin-top: 20px; } .top-product a.anchor-float::after { background-image: url(../../images/common/icn-arrow-white-r.svg); } } @media screen and (max-width: 599px) { /* iPhone X 横表示までSP扱い */ .pc { display: none; } .sp { display: inline-block; } .basic-button.wide { width: 100%; } } @media screen and (max-width: 906px) { .sp-header-navigation-items.sp { display: inline-block; } } /* ==================== */ /* header preset */ /* ==================== */ #header { border-bottom: solid 1px #d0d0d0; transition: .4s; height: 60px; } #header.fixed { position: fixed; top: 0; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); width: 100%; z-index: 1000; } #header.hidd { top: -61px; } #header.fixed.hidd { position: fixed; box-shadow: none; } @media screen and (min-width: 906px) { #header, .header-navigation-items { position: relative; background: #fff; width: 100%; z-index: 1000; } .header-navigation-items-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 0 30px; height: 60px; } .header-navigation-items .header-logo { width: 100px; } .header-navigation-items .header-logo a img { vertical-align: baseline; } .header-navigation { display: flex; flex-wrap: nowrap; width: auto; height: 100%; } .header-navigation .header-navigation-item:hover.contact::after { content: none; } .header-navigation .header-navigation-item:hover::after, .header-navigation .header-navigation-item.current::after { width: 100%; } .header-navigation .header-navigation-item a { display: flex; align-items: center; justify-content: center; font-size: 1rem; font-feature-settings: "palt"; text-decoration: none; height: 100%; width: 100%; min-width: 90px; padding: 0 20px; } .header-navigation .header-navigation-item.contact { background: #000; transition: .3s; padding: 0 40px; } .header-navigation .header-navigation-item.contact:hover { background: #00ad5d; } .header-navigation .header-navigation-item.contact a { color: #fff; } .header-navigation .header-navigation-item.contact a:hover { opacity: 1; } .header-navigation-item-child { display: none; } } /* グローバルナビゲーション、画面幅縮めた時の調整用 */ @media screen and (max-width: 959px) { .header-navigation .header-navigation-item a { display: flex; align-items: center; justify-content: center; font-size: 0.975rem; font-feature-settings: "palt"; text-decoration: none; height: 100%; width: 100%; min-width: 80px; padding: 0 10px; } } @media screen and (max-width: 906px) { /* iPhone X 横表示までSP扱い */ .sp-header-navigation-items-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; height: 60px; margin: 0 auto; } .nav_switch { position: relative; width: 23px; height: 15px; } .nav_switch::before, .nav_switch span, .nav_switch::after { content: ""; position: absolute; display: block; width: 23px; height: 2px; background: #000; z-index: 1100; } .nav_switch::before, .nav_switch::after { transition: .3s; } .nav_switch::before { top: 0; } .nav_switch span { top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .nav_switch::after { bottom: 1px; } .open .nav_switch::before { top: 0; bottom: 0; margin: auto 0; transform: rotate(45deg); background-color: #fff; } .open .nav_switch span { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); } .open .nav_switch::after { top: 0; bottom: 0; margin: auto 0; transform: rotate(-45deg); background-color: #fff; } .sp-header-navigation-items .sp-header-logo { display: flex; align-items: center; justify-content: space-between; width: 130px; height: 15px; margin-left: 20px; } .sp-header-navigation-items .sp-header-logo img { width: 95px; vertical-align: baseline; } .sp-header-navigation, .sp-header-navigation .sp-header-navigation-item { position: relative; display: flex; align-items: center; height: 100%; } .sp-header-navigation .sp-header-navigation-item a { display: flex; align-items: center; justify-content: center; font-size: 1rem; font-feature-settings: "palt"; text-decoration: none; height: 100%; width: 100%; min-width: 110px; padding: 0 15px; } .sp-header-navigation .sp-header-navigation-item.contact { background: #000; transition: .3s; } .sp-header-navigation .sp-header-navigation-item.contact:hover { background: #00ad5d; } .sp-header-navigation .sp-header-navigation-item.contact a { color: #fff; } .sp-header-navigation .sp-header-navigation-item.contact a:hover { opacity: 1; } .sp-header-navigation-items.sp { width: 100%; } .header-navigation { padding-bottom: 40px; } .header-navigation-items { overflow: auto; position: absolute; left: -100%; background: #000; width: 100%; height: 100vh; padding-bottom: 100px; opacity: 0; transition: .3s; z-index: 1000; } .open .header-navigation-items { position: fixed; top: 0; left: 0; opacity: 1; height: 100vh; } .header-navigation-items .header-logo a { position: absolute; left: 55px; display: inline-block; width: 95px; height: 15px; } .header-navigation-items .header-logo a img { vertical-align: top; } .header-navigation-items .header-logo { display: flex; align-items: center; height: 60px; } .header-navigation-item dl { margin-bottom: 20px; } .header-navigation-item-child { display: block; padding: 0 14px; } .header-navigation-item-title a, .header-navigation-item-child a { display: block; position: relative; color: #fff; text-decoration: none; line-height: 2.8; } .header-navigation-item-title a { background: #313131; padding: 0 14px; } .header-navigation-item-child a { border-bottom: solid 1px #4b4b4b; font-size: .875rem; margin: 0; } .header-navigation-item-title a::after, .header-navigation-item-child a::after { content: ""; display: block; position: absolute; top: 0; right: 14px; bottom: 0; border: solid #666; border-width: 1px 1px 0 0; width: 4px; height: 4px; margin: auto; transform: rotate(45deg); } .header-navigation-item.contact { padding: 0 14px; } .header-navigation-item.contact a { display: block; color: #fff; text-decoration: none; padding: 20px; text-align: center; background: #00ad5d; margin: 0; } } /* ==================== */ /* main preset (firstview) */ /* ==================== */ #main { padding-top: 61px; } .content-section .content-section-inner { width: 100%; max-width: 1024px; margin: 0 auto; padding: 40px; } @media screen and (max-width: 1024px) { .content-section .content-section-inner { width: 100%; max-width: unset; margin: 0 auto; padding: 40px; } } .content-section .content-title { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.875rem; width: 100%; max-width: 1024px; margin: 0 auto 15px; line-height: 1.5; z-index: 5; } .content-section .content-title small { display: flex; align-items: center; justify-content: flex-start; font-family: 'Kanit', 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; font-size: 1.375rem; font-weight: 200; width: 100%; margin-bottom: 4px; } .content-section .content-title small:first-of-type::before { content: ""; display: inline-block; background-color: #01BD6B; width: 24px; height: 2px; margin-right: 18px; } .content-section .content-title small span { font-size: 1rem; font-weight: 300; } .content-section .content-title.alt small { display: inline; font-size: 1.25rem; font-weight: 300; } .content-section .content-title.alt { display: block; font-size: 2.25rem; font-family: 'Kanit', 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; } .content-section .content-title.alt small::before { background: none; width: 0; height: 0; margin-right: 8px; } .content-section .content-article { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; padding-bottom: 50px; z-index: 5; } .content-section .content-article p { margin-bottom: 15px; } .content-section.topics-list .content-title { flex-direction: column; align-items: center; justify-content: center; } .content-section.topics-list .content-title::after { content: ""; display: block; background-color: #fff; width: 24px; height: 2px; } .content-section.topics-list .content-title small { display: block; color: #fff; font-weight: 400; width: auto; } .content-section.topics-list .content-title small:first-of-type::before { content: none; } /* ==================== */ /* main-visual preset */ /* ==================== */ .main-visual-content { /*margin-bottom: 100px;*/ margin-bottom: 100px; } .main-visual-content.top-image { margin-bottom: 50px; } .content-section.main-visual-content .content-title small::before { margin-left: -40px; } .main-visual-figure { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; } .main-visual-figure .main-visual-caption { position: relative; z-index: 1; } .main-visual-figure .main-visual-caption .main-visual-title { font-family: 'Kanit', sans-serif; font-size: 4.25rem; font-weight: 800; font-feature-settings: "palt"; letter-spacing: .125rem; line-height: 1.1; padding: 55px 0 25px; } .main-visual-figure .main-visual-caption .main-visual-leadline { font-size: 1rem; font-weight: 300; margin-bottom: 30px; } .main-visual-figure .main-visual-caption .main-visual-leadline.nobutton { margin-bottom: 65px; } .main-visual-figure .main-visual-logo-image { position: absolute; top: 30px; right: 0; width: 43%; } .main-visual-figure .main-visual-logo-image img { display: block; width: 100%; } .main-visual-content .content-article { padding: 0; } @media screen and (max-width: 1024px) { .content-section .content-section-inner, .content-section .content-title, .content-section .content-article, .main-visual-figure { max-width: 100%; } .main-visual-content { margin-bottom: 0px; } .content-section .content-title { font-size: 1.25rem; line-height: 1.6; margin: 0 0 20px; padding: 0 20px 20px; } .content-section .content-title br { display: none; } .content-section .content-title small { flex-wrap: wrap; font-size: 1.125rem; } .content-section .content-title small span { font-size: .875rem; } .content-section .content-title small:first-of-type span { display: none; width: 100%; } .content-section .board-graywhite .content-title small span { display: block; } .content-section.main-visual-content .content-title small::before { margin-left: 0; } .content-section.main-visual-content .content-title { line-height: 1.6; padding: 40px 16px 10px; } .main-visual-figure .main-visual-caption { margin: 0 20px; } .main-visual-figure .main-visual-caption .main-visual-title { font-size: 13vw; } .main-visual-figure .main-visual-logo-image { width: 40%; top: 40px; right: 40px; } .main-visual-figure .main-visual-caption .main-visual-leadline.nobutton { margin-bottom: 0; } .content-section .content-article { padding: 0 20px 30px; } .content-section .content-article p { line-height: 1.6; } .presentation-content-section { margin-bottom: 0; } .main-visual-figure .main-visual-caption .main-visual-leadline { font-weight: 400; } } .btn-style-inner:hover { cursor: pointer; } /* ============================================ */ /* 20210319 デザイン改修 */ /* ============================================ */ @media screen and (min-width: 906px) { .header-navigation .header-navigation-list { position: relative; display: flex; align-items: center; height: 100%; transition: .3s; } .header-navigation .header-navigation-list:hover { background-color: #fff; box-shadow: 0 0px 8px -1px rgba(0, 0, 0, 0.1), 0 0px 3px 0 rgba(0, 0, 0, 0.1); opacity: 1; transition: .3s; } .header-navigation .header-navigation-list:not(.client):hover::after { content: ""; bottom: 0; left: 0; width: 100%; height: 3px; display: block; position: absolute; background-color: #fff; } .header-navigation .header-navigation-list:hover.contact::after { content: none; } .header-navigation .header-navigation-list > a { display: flex; align-items: center; justify-content: center; font-size: 1rem; font-feature-settings: "palt"; text-decoration: none; height: 100%; width: 100%; min-width: 100px; padding: 0 15px; position: relative; line-height: 1.3; font-size: .925rem; } .header-navigation .header-navigation-list > a:hover { opacity: 1; } .header-navigation .header-navigation-list > a.arrow-down { padding: 0 25px 0 10px; } .header-navigation .header-navigation-list > a.arrow-down::after { content: ''; background: url(../../images/common/navi-arrow-down.svg) no-repeat; width: 10px; height: 6px; top: calc(50% - 1px); right: 12px; position: absolute; } .header-navigation .header-navigation-list:hover > a.arrow-down::after { content: ''; background: url(../../images/common/navi-arrow-down-hover.svg) no-repeat; width: 10px; height: 6px; top: calc(50% - 1px); right: 12px; position: absolute; } .header-navigation .header-navigation-list.contact { background: #000; transition: .3s; } .header-navigation .header-navigation-list.contact:hover { background: #00ad5d; } .header-navigation .header-navigation-list.contact a { color: #fff; font-weight: bold; } .header-navigation .header-navigation-list.contact a:hover { opacity: 1; } .header-navigation .header-navigation-list.client { background: #00C469; transition: .3s; } .header-navigation .header-navigation-list.client:hover { background: #4FC78D; } .header-navigation .header-navigation-list.client a { color: #fff; font-weight: bold; } .header-navigation .header-navigation-list.client::after { content: ""; background: url("../../images/common/open-window.svg") no-repeat; background-size: contain; width: 10px; height: 10px; position: absolute; top: 27px; right: 14px; } .header-navigation .header-navigation-list.external::after { content: ""; background: url("../../images/common/open-window-black.svg") no-repeat; background-size: contain; width: 9px; height: 9px; position: absolute; top: 27px; right: 5px; } .header-navigation .header-navigation-list.external:hover::after { content: ""; background: url("../../images/common/open-window-black.svg") no-repeat; background-size: contain; width: 9px; height: 9px; position: absolute; top: 27px; right: 5px; left: auto; bottom: auto; } .header-navigation .header-navigation-list svg { width: 9px; height: 9px; box-sizing: content-box; padding-left: 5px; min-width: 9px; min-height: 9px; } .header-navigation .header-navigation-list ul { display: none; position: absolute; top: 60px; left: 0px; background-color: #fff; box-shadow: 0 6px 10px -1px rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.05); width: 200px; } .header-navigation .header-navigation-list ul li > a { display: block; font-size: 0.875rem; color: #333; text-decoration: none; padding: 10px 20px; } .header-navigation .header-navigation-list ul li > a:hover { opacity: 1; } .header-navigation .header-navigation-list ul li:hover { background-color: #F7F7F7; } .header-navigation .header-navigation-list dl { display: none; position: absolute; top: 60px; left: 0px; background-color: #fff; box-shadow: 0 6px 10px -1px rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.05); width: 270px; padding-bottom: 10px; } .header-navigation .header-navigation-list dt { font-size: 0.875rem; color: #333; padding: 10px 0; margin: 0 20px 10px; font-weight: bold; border-bottom: #2BB966 1px solid; } .header-navigation .header-navigation-list dl dd > a { display: block; font-size: 0.875rem; color: #333; text-decoration: none; padding: 10px 20px; } .header-navigation .header-navigation-list dl dd > a >svg{ fill: #2BB966; } .header-navigation .header-navigation-list dl dd > a:hover { opacity: 1; } .header-navigation .header-navigation-list dl dd:hover { background-color: #F7F7F7; } .header-navigation .header-navigation-list dl span { display: block; font-size: 12px; color: #aaa; padding: 10px 20px 2px; } } @media screen and (max-width: 1076px) { .header-navigation .header-navigation-list a { display: flex; align-items: center; /* justify-content: center; */ font-size: 0.975rem; font-feature-settings: "palt"; text-decoration: none; height: 100%; width: 100%; min-width: 80px; padding: 0 30px; } .header-navigation .header-navigation-list.client a { padding: 0 30px; } .header-navigation .header-navigation-list.external::after { right: 4px; } } @media screen and (max-width: 906px) { .header-navigation-list { margin-bottom: 20px; } .header-navigation-list ul,.header-navigation-list dl { display: block; padding: 0 14px; } .header-navigation-list a { display: block; position: relative; color: #fff; text-decoration: none; line-height: 2.8; } .header-navigation-list > a { background: #313131; padding: 0 14px; } .header-navigation-list ul li a,.header-navigation-list dl dd a { border-bottom: solid 1px #4b4b4b; font-size: .875rem; margin: 0; } .header-navigation-list > a::after, .header-navigation-list ul li a::after, .header-navigation-list dl dd a::after { content: ""; display: block; position: absolute; top: 0; right: 14px; bottom: 0; border: solid #666; border-width: 1px 1px 0 0; width: 4px; height: 4px; margin: auto; transform: rotate(45deg); } .header-navigation-list.contact { padding: 0 14px; text-align: center; } .header-navigation-list.contact a { display: block; color: #fff; text-decoration: none; padding: 20px; background: #00ad5d; margin: 0; } .header-navigation .header-navigation-list svg { width: 9px; height: 9px; box-sizing: content-box; padding-left: 5px; min-width: 9px; min-height: 9px; fill: #fff; } .header-navigation-list dl dt{ background: #111; font-size: 14px; color: #ccc; padding: 5px 15px; margin: 10px 0 0; } .header-navigation-list dl span{ /* background: #1A1A1A; */ font-size: 12px; color: #999; display: block; padding-top: 10px; padding-left: 15px; } } /**/ a.bnr-anniversary15 img { max-width: 700px; position: relative; display: block; margin: 30px auto 0; } a.bnr-anniversary15 img:hover { opacity: 0.6; -webkit-transition: .3s; transition: .3s; } /* Header CSS */ /* 概要：共通ヘッダ指定　共通ヘッダ表示に最低限必要なものを書く */ /* PC表示 ヘッダドロップダウンメニュー */ /* ドロップダウン標準設定 */ #header.company .header-navigation-items, #header.company .header-navigation-items { box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.05); } /* Main CSS */ /* 概要：全体指定　サイト全体で共有するものを書く 呼び出し位置：[必須呼び出し]htmlファイル末尾直前で呼び出し */ /* ==================== */ /* main preset (not firstview) */ /* ==================== */ .client-list { display: flex; align-items: center; justify-content: space-around; padding: 30px 0; } @media screen and (max-width: 599px) { .client-list { flex-wrap: wrap; padding: 0; } .client-list li{ padding: 10px; width: 30%; } } .content-section.case-content-section { padding-top: 60px; margin-bottom: 30px; } .content-section.case-content-section .content-title { position: relative; align-items: flex-end; justify-content: flex-start; margin: 0 auto 20px; } .content-section.case-content-section .content-title small:not(:first-of-type) { width: auto; margin-left: 12px; } .content-section.case-content-section .content-title .anchor-float { position: absolute; right: 0; bottom: 8px; } .content-section.slide-content-section { background-color: #fff; padding: 20px 0 30px 0; } .content-section.slide-content-section .content-title { margin: 0 auto 30px; } .content-section.slide-content-section .content-article { max-width: 100%; } .swiper-container a { text-decoration: none; } .slide-content { overflow: hidden; background: #fff; border: solid #d2d1d1; border-width: 0 1px 1px 1px; padding: 10px 20px 15px; } .slide-content-anchor .site-name { display: inline-block; border-bottom: solid 2px #00ad5d; font-size: .75rem; margin-bottom: 10px; } .slide-content-anchor .slide-tags { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .slide-content-anchor .slide-tags .slide-tag { background: #f0f0f0; border-radius: 2px; font-size: .75rem; margin-right: 6px; padding: 2px 12px; } .content-section .content-article .slide-content .anchor-float { float: right; } .content-section .content-article .slide-content .slide-content-anchor p { font-size: 1.125rem; font-weight: 600; min-height: 110px; } .content-section.slide-content-section.topics-list { max-height: 520px; padding: 20px 50px 30px; } .content-section.slide-content-section.topics-list .content-article { overflow: hidden; } .content-section.topics-list .content-article .slide-content .slide-content-anchor { display: block; position: relative; min-height: 110px; } .topics-list .extlabel { position: absolute; top: 0; right: -30px; background: #FF4D00; color: #fff; padding: 4px 8px; text-align: right; } .content-section.topics-list .content-article .slide-content .slide-content-anchor p { min-height: unset; margin-bottom: 0; } .topics-list .slide-content { overflow: visible; } .topics-list .slide-content-anchor .slide-tags .slide-tag { background: none; color: #afafaf; font-size: 1.125rem; padding: 8px 0; } .topics-list .slider-item a { text-decoration: none; } @media screen and (min-width: 813px) { .topics-list .slider-item.swiper-slide { box-shadow: 0 15px 10px rgba(0, 0, 0, 0.1); opacity: .5; transition: .3s; } .topics-list .slider-item.swiper-slide.swiper-slide-active { opacity: 1; } .topics-list .slide-thumb a:hover, .topics-list .slider-item a:hover, .topics-list .slider-item.swiper-slide:hover { opacity: .8; } } .topics-list .swiper-pagination-bullet, .topics-list .swiper-pagination-bullet-active { background: #fff; } .recruit-content-section { background: #f7f7f7; padding: 60px 0; margin-bottom: 50px; } .recruit-content-section .content-article{ display: flex; justify-content: space-between; padding-bottom: 0; } .recruit-content-section .content-article p{ line-height: 1.7; padding-bottom: 30px; } .recruit-content-section .content-title { line-height: 2; padding-top: 15px; } .recruit-content-section img { height: 100%; max-height: 360px; width: auto; padding-left: 20px; } @media screen and (max-width: 1024px) { .recruit-content-section img { height: 100%; max-height: 260px; width: auto; padding-left: 20px; } } @media screen and (max-width: 599px) { .recruit-content-section .content-article{ flex-direction: column; } .recruit-content-section .content-article .content-title{ padding: 0 0 15px 0 !important; } .recruit-content-section .content-article > div:nth-child(2){ padding-top: 30px; } .recruit-content-section .content-article p{ line-height: 1.7; padding-bottom: 15px; } } .content-section.news-list-content-section .content-title, .content-section.newsletter-content-section .content-title { display: flex; align-items: center; justify-content: space-between; } .content-section.news-list-content-section .content-title small:first-of-type, .content-section.newsletter-content-section .content-title small:first-of-type { width: 70%; } .content-section.news-list-content-section .content-title small:first-of-type::before, .content-section.newsletter-content-section .content-title small:first-of-type::before { width: 33px; height: 1px; } .content-section.newsletter-content-section .content-title small { color: #fff; } .content-section.newsletter-content-section .content-title small:first-of-type::before { background-color: #fff; } .news-list .news-list-item { border-bottom: solid 1px #d2d1d1; padding: 24px 0; } .news-list .news-list-item a { text-decoration: none; } .news-list-item-detail { display: flex; align-items: flex-start; flex-direction: row-reverse; justify-content: flex-end; font-size: .875rem; } .news-list .news-list-item .news-list-item-detail .news-list-item-categorys { min-width: 190px; margin-right: 20px; } .news-list .news-list-item .news-list-item-detail .news-list-item-categorys .news-list-item-category { display: inline-block; background: #f7f7f7; color: #5d5d5d; margin-right: 6px; padding: 1px 10px; } .news-list .news-list-item .news-list-item-detail .news-list-item-date { margin-right: 30px; } .newsletter-content-section { overflow: hidden; background: #01bd6b; background: -moz-linear-gradient(90deg, #01bd6b 0%, #26eb95 100%); background: -webkit-linear-gradient(90deg, #01bd6b 0%, #26eb95 100%); background: linear-gradient(90deg, #01bd6b 0%, #26eb95 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01bd6b",endColorstr="#26eb95",GradientType=1); padding: 40px 0 0; } .newsletter-content-section table tr, .newsletter-content-section table td { border: none !important; padding: 0 !important; } .newsletter-content-section .newsletter-content-section-inner { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; } .newsletter-content-section .newsletter-content-section-inner::after { content: ""; display: block; position: absolute; right: -100px; bottom: 0; background-image: url("../../images/common/img_mailmag.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 354px; height: 220px; } .newsletter-content-section-privacy { font-size: 14px; margin: 10px 0; } .form-newsletter .form-checkbox { display: flex; align-items: center; } .form-newsletter .form-checkbox input[type="checkbox"] { margin-right: 10px; transform: scale(1.5); } .form-newsletter .form-kit-email { margin: 20px 0; } .form-newsletter .form-kit-email input[type="email"] { border: none; border-radius: 2px; background: #fff; font-size: 1.125rem; width: 512px; height: 50px; margin-right: 10px; padding: 0 .5rem; } .form-newsletter .form-kit-email input[type="submit"] { color: white; font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background: #000; border: none; border-radius: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); font-size: 1rem; font-weight: 300; width: 120px; height: 50px; cursor: pointer; transition: .3s; } .form-newsletter .form-kit-email input[type="submit"]:hover { color: rgba(255, 255, 255, 0.6); } .about-newsletter { text-decoration: none; } .about-newsletter-aside { display: flex; align-items: center; font-size: 1rem; } .about-newsletter-aside::before { display: inline-block; content: ""; background-image: url("../../images/common/icn_infomation.svg"); background-repeat: no-repeat; width: 18px; height: 18px; margin-right: 10px; } /* .relation-story { width: 100%; max-width: 1024px; margin: 0 auto 50px; } .relation-story a { text-decoration: none; } .relation-story-title { font-size: 1.125rem; font-weight: 300; } .relation-story-figure { display: flex; border: solid 1px #d2d1d1; } .relation-story-figure-caption, .relation-story-figure-image { width: 50%; } .relation-story-figure-caption { display: flex; align-items: center; justify-content: center; text-align: center; } .relation-story-figure-image {} */ .icn-play { display: flex; justify-content: center; align-items: center; } .icn-play::before { content: ""; display: inline-block; width: 20px; height: 20px; padding-right: 10px; background-image: url("../../images/common/icn-play.svg"); background-position: center center; background-size: contain; background-repeat: no-repeat; } /* パンくずリスト */ #bread-crumb { background-color: #f7f7f7; padding: 10px 0; position: relative; z-index: 800; } #bread-crumb ul { width: 1024px; margin: 0 auto; font-size: 0.7rem; line-height: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; } #bread-crumb ul li { position: relative; margin-right: 12px; color: #666; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bread-crumb ul li:not(:last-child)::after { content: ""; display: block; width: 5px; height: 5px; border-right: 1px solid #666; border-bottom: 1px solid #666; transform: translateY(-1px) rotate(-45deg); } #bread-crumb ul li:last-child { margin-right: 0; } #bread-crumb ul li a { color: #666; } #bread-crumb ul li a, #bread-crumb ul li span { margin-right: 10px; } /* ローカルナビ */ #main.local-navigation-space { padding-top: 125px !important; } #local-navigation { height: 64px; display: block; width: 100%; background-color: #313131; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); position: fixed; top: 61px; z-index: 999; -webkit-transition: .5s; transition: .5s; } #local-navigation.hide { transform: translateY(-116%); } #local-navigation .local-nav-inner { display: block; width: 100%; max-width: 1024px; margin: 0 auto; } #local-navigation .local-nav-list { display: table; margin: 0 auto; height: 100%; } #local-navigation .local-nav-list .local-nav-list-item { display: inline-block; text-align: center; position: relative; line-height: 1em; } #local-navigation .local-nav-list .local-nav-list-item.current::after { content: ""; display: block; position: absolute; background-color: #00AD5D; width: 6px; height: 6px; border-radius: 3px; bottom: 14px; left: calc(50% - 3px); } #local-navigation .local-nav-list .local-nav-list-item a { display: block; font-size: 0.875rem; text-align: center; color: #fff; padding: 24px 30px; text-decoration: none; -webkit-transition: .3s; transition: .3s; } #local-navigation .local-nav-list .local-nav-list-item a:hover, #local-navigation .local-nav-list .local-nav-list-item a:active { color: #00AD5D; opacity: 1; } #local-navigation .local-nav-list .local-nav-list-item a.blank-icon-white:hover::after { background: url(../../images/common/icon_blankwin-green.svg) right top/cover no-repeat; transform: translateY(1px); } #local-navigation .local-nav-list .local-nav-list-item.current a:hover { color: #fff; opacity: 1; } /* 別タブで開くリンクアイコン */ a.blank-icon-black, a.blank-icon-white, a.blank-icon-gray, a.blank-icon-green { position: relative; -webkit-transition: .3s; transition: .3s; } a.blank-icon-black::after, a.blank-icon-white::after, a.blank-icon-gray::after, a.blank-icon-green::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px; -webkit-transition: .3s; transition: .3s; } a.blank-icon-black::after { background: url(../../images/common/icon_blankwin-black.svg) right top/cover no-repeat; transform: translateY(1px); } a.blank-icon-white::after { background: url(../../images/common/icon_blankwin-white.svg) right top/cover no-repeat; transform: translateY(1px); } a.blank-icon-gray::after { background: url(../../images/common/icon_blankwin-gray.svg) right top/cover no-repeat; transform: translateY(1px); } a.blank-icon-green::after { background: url(../../images/common/icon_blankwin-green.svg) right top/cover no-repeat; transform: translateY(1px); } @media screen and (max-width: 1024px) { .content-section .content-section-inner { padding: 0; } .content-section .content-title .anchor-float { position: absolute; right: 16px; bottom: 8px; } .content-section.recruit-content-section .content-title { margin: 0; padding: 0; } .content-section.case-content-section .content-title .anchor-float { right: 16px; top: 80px; } .content-section.news-list-content-section .content-title .anchor-float { display: none; } .recruit-content-section { padding: 20px 0 30px; margin-bottom: 40px; } .recruit-content-section .content-article { padding: 0 14px; } .recruit-content-section .content-article p { line-height: 1.6; } .recruit-content-section .content-article p br { display: none; } .content-section.slide-content-section { padding: 30px 0 0; } .content-section.slide-content-section .content-title { padding: 0 16px 40px; } .swiper-container .swiper-wrapper { display: flex; flex-direction: column; } .swiper-slide { margin-bottom: 20px; } .content-section.slide-content-section.topics-list { max-height: unset; padding: 20px 20px 30px; } .topics-list .swiper-wrapper { flex-direction: column; } .content-section.news-list-content-section .content-title { line-height: 1.6; margin: 0; padding: 0 16px; } .content-section.news-list-content-section .content-title small:first-of-type, .content-section.newsletter-content-section .content-title small:first-of-type { width: 100%; } .content-section.newsletter-content-section .content-title { line-height: 1.6; margin: 0; padding: 0 16px 15px; } .news-list-item-detail { position: relative; padding-top: 30px; } .news-list .news-list-item .news-list-item-detail .news-list-item-date, .news-list .news-list-item .news-list-item-detail .news-list-item-categorys { position: absolute; top: 0; } .news-list .news-list-item .news-list-item-detail .news-list-item-categorys { left: 85px; } .newsletter-content-section .newsletter-content-section-inner::after { content: none; } .form-newsletter .form-kit-email input[type="email"] { width: 100%; margin: 0 0 8px 0; } .form-newsletter .form-kit-email input[type="submit"] { width: 100%; } .form-newsletter .form-checkbox { display: block; } .form-newsletter .form-checkbox input[type="checkbox"] { float: left; margin: 6px 8px 20px 4px; } /* .relation-story-figure { flex-wrap: wrap; } .relation-story-figure-caption, .relation-story-figure-image { width: 100%; } .relation-story-figure-caption { padding: 10% 0; } .relation-story-figure-caption-inner { font-size: .875rem; } */ .presentation-content-section .content-section-inner { width: 100%; } .presentation-item.col6 { margin: 0 auto 30px auto; width: 90.625%; } .top-image .content-section.main-visual-content { margin-bottom: 0; } .content-section.case-content-section { padding-top: 30px; margin-bottom: 10px; } .content-section .content-article .slide-content .slide-content-anchor p { min-height: inherit; } /* パンくずリスト */ #bread-crumb { display: none; } /* ローカルナビ */ #main.local-navigation-space { padding-top: 60px !important; } #local-navigation { display: none; } } /* 関連コンテンツ ----------------------------------------- */ .related-contents { background: #f7f7f7; padding: 20px 0 40px 0; } .related-contents .related-contents-title { color: #646464; font-size: 14px; font-weight: normal; padding-bottom: 15px; } .related-contents-inner { width: 96.094%; max-width: 1024px; margin: 0 auto; } .related-contents-list { display: flex; justify-content: space-between; } .related-contents-item { background: #fff; border: #fff 1px solid; box-sizing: border-box; padding: 15px 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); position: relative; transition: all .5s ease; } .related-contents-item.col2 { width: 49.023%; } .related-contents-item.col3 { width: 32.03%; } .related-contents-item.col4 { width: 23.54%; } .related-contents-item:hover { border: #00AD5D 1px solid; box-shadow: none; cursor: pointer; } .related-contents-item a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } .related-contents-item-title { color: #00AD5D; font-weight: bold; padding-bottom: 5px; position: relative; } .related-contents-item-title::after { content: ""; background: url(../../images/common/icn-arrow-green-r.svg) no-repeat; width: 18px; height: 18px; position: absolute; right: 0; background-size: cover; } .related-contents-item-desc { font-size: .75rem; } @media screen and (max-width: 1024px) { .related-contents-inner { width: 90%; margin: 0 auto; } } @media screen and (max-width: 411px) { .related-contents-inner { width: 90%; margin: 0 auto; } .related-contents-list { display: block; } .related-contents-item { margin-bottom: 15px; } .related-contents-item.col2, .related-contents-item.col3, .related-contents-item.col4 { width: 100%; } } /* ケイパビリティリンク ----------------------------------------- */ .link-capability { background: #2B2B2B; padding: 30px 0; color: #fff; } .link-capability-inner { width: 96.094%; max-width: 1024px; margin: 0 auto; } .link-capability-title { font-size: 1.25rem; margin-bottom: 20px; text-align: center; } .link-capability-list { display: flex; justify-content: center; } .link-capability-item { position: relative; } .link-capability-item p { font-size: .75rem; } .link-capability-item.col2 { width: 40%; padding: 0 15px; } .link-capability-item.col3 { width: 32.03%; } .link-capability-item-title { color: #fff; padding: 10px 0; } @media screen and (max-width: 411px) { .link-capability-inner { width: 90%; } .link-capability-list { display: block; } .link-capability-item { margin-bottom: 20px; } .link-capability-item.col2 { width: 100%; padding: 0; } .link-capability-item.col3 { width: 100%; } } /* 改行 */ br.sp { display: none; } @media screen and (max-width: 411px) { br.pc { display: none; } br.sp { display: block; } } .cookie-consent { visibility: hidden; z-index: 999999; display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: 0; width: 100%; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.9); padding: 20px; box-sizing: border-box; text-align: center; transition: ease all .3s; } .cookie-consent__inner { width: 92%; max-width: 1024px; margin: 0 auto; } .cookie-consent__agree { background: #00ad5d; padding: 5px 25px; cursor: pointer; display: inline-block; margin-top: 15px; transition: ease all .3s; } .cookie-consent__agree:hover { background: #14E082; } .cookie-consent a { color: #1EFA95; } .cookie-consent.is-show { visibility: visible; } .cc-hide1 { display: none; }