.innovationContent { /* ********************************************************************** * common.css ********************************************************************* */ /* ========================================================= reset ========================================================= */ /* ========================================================= util ========================================================= */ /* ========================================================= wwb font ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= body ========================================================= */ /* ========================================================= layout ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= module ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ } .innovationContent * { margin: 0; padding: 0; list-style: none; } .innovationContent .u-dib { display: inline-block; } @media only screen and (min-width: 769px), print { .innovationContent { /* show ----------*/ /* hide ----------*/ } .innovationContent .pcBlock { display: block; } .innovationContent .spBlock { display: none !important; } .innovationContent .pcBlock-i { display: inline-block; } .innovationContent .spBlock-i { display: none !important; } .innovationContent .pcNone { display: none !important; } .innovationContent .spNone { display: block; } .innovationContent .pcNone-i { display: none !important; } .innovationContent .spNone-i { display: inline; } } @media only screen and (max-width: 768px) { .innovationContent { /* show ----------*/ /* hide ----------*/ } .innovationContent .pcBlock { display: none !important; } .innovationContent .spBlock { display: block; } .innovationContent .pcBlock-i { display: none !important; } .innovationContent .spBlock-i { display: inline-block; } .innovationContent .pcNone { display: block; } .innovationContent .spNone { display: none !important; } .innovationContent .pcNone-i { display: inline; } .innovationContent .spNone-i { display: none !important; } } .innovationContent .f-en { letter-spacing: .04em; } .innovationContent .st-GlobalFooter_PageTop { z-index: 1; } .innovationContent .innovationContentInner { line-height: 2; position: relative; overflow: hidden; width: 100%; background: #fff; } @media only screen and (min-width: 769px), print { .innovationContent .innovationContentInner { font-size: 15px; } } @media only screen and (max-width: 768px) { .innovationContent .innovationContentInner { min-width: 320px; font-size: 14px; } } .innovationContent .inner { position: relative; box-sizing: content-box; margin: 0 auto; } .innovationContent img { max-width: 100%; height: auto; } @media only screen and (min-width: 769px), print { .innovationContent .inner { max-width: 1000px; padding: 0 15px; } } @media only screen and (max-width: 768px) { .innovationContent .inner { padding: 0 15px; } } .innovationContent #PopWrap .moviePop { box-sizing: border-box; width: 1064px; max-width: 100%; margin: auto; } .innovationContent #PopWrap .moviePop iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: calc(100vh - 150px); } .innovationContent #PopWrap.has-movie .popInner { max-width: 1024px; padding: 35px 0; } @media only screen and (max-width: 768px) { .innovationContent #PopWrap.has-movie .popInner { padding: 35px 0; } } .innovationContent #PopWrap .closeBtn { position: absolute; z-index: 8; top: 0; right: 10px; cursor: pointer; } .innovationContent #PopWrap .closeBtn { transition: ease opacity .3s; } .innovationContent #PopWrap .closeBtn:hover { opacity: 0.65; } .innovationContent #PopWrap .closeBtn:before, .innovationContent #PopWrap .closeBtn:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 50%; width: 50%; height: 2px; margin: -1px 0 0 -25%; border-radius: 2px; background-color: #fff; } .innovationContent #PopWrap .closeBtn:before { transform: rotate(45deg); } .innovationContent #PopWrap .closeBtn:after { transform: rotate(-45deg); } @media only screen and (min-width: 769px), print { .innovationContent #PopWrap { position: absolute; z-index: 100; top: 0; left: 0; display: none; width: 100%; margin-top: 10px; } .innovationContent #PopWrap .closeWrap { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; } .innovationContent #PopWrap .closeBtn { width: 30px; height: 30px; } .innovationContent #PopWrap .popInner { position: relative; z-index: 1; box-sizing: border-box; max-width: 700px; margin: 0 auto; } } @media only screen and (max-width: 768px) { .innovationContent #PopWrap { position: absolute; z-index: 100; top: 0; left: 0; display: none; box-sizing: border-box; width: 100%; max-width: 100vw; margin-top: 10px; margin-bottom: 10px; padding: 0 15px; } .innovationContent #PopWrap .inner { padding: 0; } .innovationContent #PopWrap.moviePlay { text-align: center; } .innovationContent #PopWrap .closeWrap { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; } .innovationContent #PopWrap .closeBtn { width: 35px; height: 35px; } .innovationContent #PopWrap .popInner { position: relative; z-index: 1; box-sizing: border-box; max-width: 480px; margin: 0 auto; } .innovationContent #PopWrap .popBox .photoPop { text-align: center; } .innovationContent #PopWrap .popBox .photoPop img { width: 100%; max-width: 100%; height: auto; } } .innovationContent #PopOverlay { position: fixed; z-index: 12; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); } .innovationContent .moviePop { position: relative; max-width: 900px; margin: 0 auto; padding: 0 15px; } .innovationContent .moviePop .iframeWrap { position: relative; padding-top: 56.25%; } .innovationContent .moviePop .iframeWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .innovationContent .moviePop .videoWrap { position: relative; padding-top: 56.25%; } .innovationContent .moviePop .videoWrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .innovationContent .commonNav { display: none; } @media print, screen and (min-width: 1024px) { .innovationContent .commonNavWrap { min-height: 70px; } .innovationContent .commonNav { line-height: 1; display: block; border-top: 1px solid #e0e0e0; } .innovationContent .commonNav a { transition: ease opacity .3s; } .innovationContent .commonNav a:hover { opacity: 0.65; } .innovationContent .commonNav .inner { box-sizing: border-box; max-width: 1200px; } .innovationContent .commonNav .navInner { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; } .innovationContent .commonNav .titBlock { text-align: center; } .innovationContent .commonNav .titBlock a { display: block; } .innovationContent .commonNav .titBlock .navTit img { width: auto; height: 18px; } .innovationContent .commonNav .titBlock .cnTit { margin-top: 6px; } .innovationContent .commonNav .titBlock .cnTit img { width: auto; height: 12px; } .innovationContent .commonNav .listBlock .itemList { display: flex; } .innovationContent .commonNav .listBlock .itemList > li { font-weight: bold; margin-left: 30px; font-size: 14px; } .innovationContent .commonNav .listBlock .itemList > li a { position: relative; text-decoration: none; color: inherit; } .innovationContent .commonNav .listBlock .itemList > li a:after { position: absolute; display: block; width: 0px; height: 0px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; position: relative; display: inline-block; margin-top: -.2em; margin-left: 1em; vertical-align: middle; border-width: 4px 0 4px 5px; border-style: solid; border-color: transparent transparent transparent #da0f2a; } .innovationContent .is-info .commonNav .listBlock .itemList > li.is-info a, .innovationContent .is-mobi .commonNav .listBlock .itemList > li.is-mobi a, .innovationContent .is-env .commonNav .listBlock .itemList > li.is-env a, .innovationContent .is-health .commonNav .listBlock .itemList > li.is-health a { color: #da0f2a; } .innovationContent .is-info .commonNav .listBlock .itemList > li.is-info a:after, .innovationContent .is-mobi .commonNav .listBlock .itemList > li.is-mobi a:after, .innovationContent .is-env .commonNav .listBlock .itemList > li.is-env a:after, .innovationContent .is-health .commonNav .listBlock .itemList > li.is-health a:after { transform: rotate(90deg); } } .innovationContent .cmnTitBlock { text-align: center; } .innovationContent .cmnTitBlock .enTit { font-weight: bold; line-height: 1; color: #dc0f2a; } .innovationContent .cmnTitBlock .sectTit { font-weight: bold; line-height: 1.8; } @media only screen and (min-width: 769px), print { .innovationContent .cmnTitBlock .enTit { font-size: 20px; } .innovationContent .cmnTitBlock .enTit.-large { font-size: 20px; } .innovationContent .cmnTitBlock .sectTit { margin-top: 10px; font-size: 24px; } } @media only screen and (max-width: 768px) { .innovationContent .cmnTitBlock .enTit { font-size: 14px; } .innovationContent .cmnTitBlock .enTit.-large { font-size: 14px; } .innovationContent .cmnTitBlock .sectTit { margin-top: 10px; font-size: 16px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent .cmnTitBlock .sectTit { font-size: 15px; } } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList { display: flex; flex-wrap: wrap; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList > li a { display: block; text-decoration: none; color: inherit; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .liInner { color: #fff; background-color: #000; display: flex; justify-content: center; align-items: center; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .liInner > * { width: 100%; margin-left: -100%; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .liInner > *:first-child { margin-left: 0; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .txt { font-weight: bold; position: relative; text-align: center; } @media only screen and (min-width: 769px), print { .innovationContent .cmnIndexSect { margin-top: 110px; } .innovationContent .cmnIndexSect .sectMain { margin-top: 30px; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList > li { width: 25%; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList > li a { transition: ease opacity .3s; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList > li a:hover { opacity: 0.65; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .txt { font-size: 20px; } } @media only screen and (max-width: 768px) { .innovationContent .cmnIndexSect { margin-top: 40px; } .innovationContent .cmnIndexSect .sectMain { margin-top: 20px; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList > li { width: 50%; } .innovationContent .cmnIndexSect .sectMain .listBlock .itemList .txt { font-size: 16px; } } .innovationContent .cmnOtherSect { border-top: 1px solid #cacaca; background-color: #efefef; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList { display: flex; flex-wrap: wrap; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li { box-sizing: border-box; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li a { display: block; text-decoration: none; color: inherit; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .thumb { text-align: center; border: 1px solid #cacaca; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .thumb img { width: 100%; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .tit { font-weight: bold; } @media only screen and (min-width: 769px), print { .innovationContent .cmnOtherSect { margin-top: 40px; padding: 120px 0; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList { margin: -30px -20px 0; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li { width: 33.333%; margin-top: 30px; padding: 0 20px; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li a { transition: ease opacity .3s; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li a:hover { opacity: 0.65; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .tit { margin-top: 25px; font-size: 16px; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .txt { margin-top: 10px; font-size: 15px; } } @media only screen and (max-width: 768px) { .innovationContent .cmnOtherSect { margin-top: 40px; padding: 40px 0; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList { margin: -30px -8px 0; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList > li { width: 50%; margin-top: 30px; padding: 0 8px; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .liInner { line-height: 1.6; } .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .tit { margin-top: 10px; font-size: 13px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .tit { font-size: 12px; } } @media only screen and (max-width: 768px) { .innovationContent .cmnOtherSect .sectMain .listBlock .itemList .txt { margin-top: 3px; font-size: 12px; } } .innovationContent .m-button01 { font-weight: bold; } .innovationContent .m-button01 a { line-height: 1.2; position: relative; display: inline-block; box-sizing: border-box; max-width: 100%; text-align: center; text-decoration: none; color: #fff; border-radius: 4em; background-color: #040000; } .innovationContent .m-button01 a:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; right: 0; bottom: 50%; margin-right: 2em; transform: skewX(45deg); border: solid #fff; border-width: 0 1px 1px 0; } .innovationContent .m-button01 .icon { display: inline-block; width: 1.1em; margin: 0 1em; vertical-align: middle; } .innovationContent .m-button01.-noArrow a:after { display: none; } @media only screen and (min-width: 769px), print { .innovationContent .m-button01 { font-size: 13px; } .innovationContent .m-button01 a { padding: 1.2em 11em; } .innovationContent .m-button01 a { transition: ease opacity .3s; } .innovationContent .m-button01 a:hover { opacity: 0.65; } .innovationContent .m-button01 a:hover:after { margin-right: 1.5em; } .innovationContent .m-button01 a:after { width: 6em; height: .5em; transition: margin .3s ease; } } @media only screen and (max-width: 768px) { .innovationContent .m-button01 { font-size: 12px; } .innovationContent .m-button01 a { width: 100%; max-width: 320px; padding: 1.2em 5em; } .innovationContent .m-button01 a:after { width: 4em; height: .5em; } } .innovationContent .m-OverlayImgBox01 { position: relative; } .innovationContent .m-OverlayImgBox01:after { position: absolute; display: block; width: 100%; height: 100%; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 0; top: 0; opacity: .5; background-color: #000; } .innovationContent .m-OverlayImgBox01.-light:after { opacity: .3; } .innovationContent .m-iconWindow01 { position: relative; } .innovationContent .m-iconWindow01.-after:after, .innovationContent .m-iconWindow01.-before:before { position: absolute; display: block; width: 11px; height: 9px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; position: relative; display: inline-block; margin-top: -.15em; vertical-align: middle; background-image: url(../img/common/icn_window_gray01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } .innovationContent .m-iconWindow01.-type2.-after:after, .innovationContent .m-iconWindow01.-type2.-before:before { width: 12px; height: 11px; background-image: url(../img/common/icn_window_gray02.svg); } .innovationContent .m-iconWindow01.-red.-after:after, .innovationContent .m-iconWindow01.-red.-before:before { background-image: url(../img/common/icn_window_red01.svg); } .innovationContent .m-iconWindow01.-after:after { margin-left: .75em; } .innovationContent .m-iconWindow01.-before:before { margin-right: .75em; } .innovationContent .m-movieButton01 { position: relative; display: block; } .innovationContent .m-movieButton01 .icon { position: absolute; z-index: 1; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); border: solid #999; border-radius: 50% 50%; } .innovationContent .m-movieButton01 .icon:before, .innovationContent .m-movieButton01 .icon:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-color: transparent transparent transparent #999; } .innovationContent .m-movieButton01 .icon:before { transform: translateX(-75%); opacity: 0; } .innovationContent .m-movieButton01 .icon:after { transform: translateX(0%); opacity: 1; } .innovationContent .m-movieButton01:hover .icon:before, .innovationContent .m-movieButton01:hover .icon:after { transition: ease .4s; transition-property: opacity,transform; } .innovationContent .m-movieButton01:hover .icon:before { transform: translateX(0%); opacity: 1; } .innovationContent .m-movieButton01:hover .icon:after { transform: translateX(75%); opacity: 0; } @media only screen and (min-width: 769px), print { .innovationContent .m-movieButton01 .icon { width: 86px; height: 86px; border-width: 2px; } .innovationContent .m-movieButton01 .icon.-small { width: 60px; height: 60px; } .innovationContent .m-movieButton01 .icon:before, .innovationContent .m-movieButton01 .icon:after { margin: -15px 0 0 -8px; border-width: 15px 0 15px 22px; } } @media only screen and (max-width: 768px) { .innovationContent .m-movieButton01 .icon { width: 54px; height: 54px; border-width: 2px; } .innovationContent .m-movieButton01 .icon:before, .innovationContent .m-movieButton01 .icon:after { margin: -10px 0 0 -5px; border-width: 10px 0 10px 15px; } } .innovationContent .m-popBox01 { display: none; } .innovationContent #PopWrap .m-popBox01 { display: block; } .innovationContent.p-top { /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ } .innovationContent.p-top .kvSect { position: relative; overflow: hidden; text-align: center; color: #fff; background-color: #000; } .innovationContent.p-top .kvSect:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 100%; transform: translateX(-50%); border-radius: 50% 50%; background-color: #fff; } .innovationContent.p-top .kvSect .sectInner { display: flex; } .innovationContent.p-top .kvSect .sectInner > * { width: 100%; } .innovationContent.p-top .kvSect .bgBlock { position: relative; z-index: 0; height: 100%; } .innovationContent.p-top .kvSect .bgBlock:after { position: absolute; display: block; width: 100%; height: 100%; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 0; top: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.2); } .innovationContent.p-top .kvSect .bgBlock .itemList { display: flex; flex-wrap: wrap; } .innovationContent.p-top .kvSect .bgBlock .itemList > li { position: relative; width: 50%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li img { position: relative; z-index: 1; width: 100%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li .txt { line-height: 1.4; position: absolute; z-index: 0; left: 50%; transform: translate(-50%, -50%); } .innovationContent.p-top .kvSect .bgBlock .circle { position: absolute; z-index: 3; left: 50%; transform: translate(-50%, -50%); } .innovationContent.p-top .kvSect .sectMain { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin-left: -100%; padding-bottom: 15%; } .innovationContent.p-top .kvSect .sectMain .sectMainInner { width: 100%; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead { font-weight: bold; line-height: 1; letter-spacing: 1em; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead span { position: relative; display: inline-block; margin-left: -.5em; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead span:before, .innovationContent.p-top .kvSect .sectMain .titBlock .lead span:after { position: absolute; display: block; width: 1em; height: 2px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; position: relative; display: inline-block; margin-top: -1px; vertical-align: middle; background-color: #fff; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead span:before { margin-right: 1em; } .innovationContent.p-top .kvSect .sectMain .titBlock .sectTit { line-height: 1; } .innovationContent.p-top .kvSect .sectMain .listBlock .itemList { display: flex; align-items: center; justify-content: center; text-align: left; } .innovationContent.p-top .kvSect .sectMain .listBlock .itemList > li { line-height: 1.4; } .innovationContent.p-top .kvSect .sectMain .listBlock .itemList > li img { display: none; } @media only screen and (min-width: 769px) and (min-width: 1440px) { .innovationContent.p-top .kvSect { min-height: 55vw; max-height: 100vh; } } @media only screen and (min-width: 769px), print { .innovationContent.p-top .kvSect:after { width: 5600px; height: 6400px; margin-top: -10.5%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(1) { width: 49.93056%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(2) { width: 52.63889%; margin-left: -2.57073%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(3) { width: 47.43056%; margin-top: -8.9%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(4) { width: 56.66667%; margin-top: -5.1%; margin-left: -4.09927%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li .txt { top: 30%; font-size: 16px; } .innovationContent.p-top .kvSect .bgBlock .circle { top: 42%; width: 50%; max-width: 546px; } .innovationContent.p-top .kvSect .sectMain { padding-bottom: 8%; } .innovationContent.p-top .kvSect .sectMain .titBlock { padding-top: 50px; } .innovationContent.p-top .kvSect .sectMain .titBlock .sectTit img { width: 55.555%; max-width: 800px; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead { margin-top: 30px; font-size: 24px; } .innovationContent.p-top .kvSect .sectMain .listBlock { margin-top: 70px; } .innovationContent.p-top .kvSect .sectMain .listBlock .itemList > li { padding: 0 15px; font-size: 13px; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .kvSect { max-height: 100vh; } .innovationContent.p-top .kvSect:after { width: 280vw; height: 320vw; margin-top: -10.5%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li { transform: scale(1.008); } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(1) { width: 50%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(2) { width: 52.5%; margin-left: -2.5025%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(3) { width: 47.25%; margin-top: -8.5%; } .innovationContent.p-top .kvSect .bgBlock .itemList > li:nth-child(4) { width: 56.25%; margin-top: -7.2%; margin-left: -3.5035%; } .innovationContent.p-top .kvSect .bgBlock .itemList .txt { top: 50%; font-size: 12px; } .innovationContent.p-top .kvSect .bgBlock .circle { top: 42%; width: 60%; max-width: 546px; } .innovationContent.p-top .kvSect .sectMain .titBlock { padding-top: 30px; } .innovationContent.p-top .kvSect .sectMain .titBlock .sectTit img { width: 90%; max-width: 800px; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead { margin-top: 20px; font-size: 16px; } .innovationContent.p-top .kvSect .sectMain .titBlock .lead span:before, .innovationContent.p-top .kvSect .sectMain .titBlock .lead span:after { height: 1px; } .innovationContent.p-top .kvSect .sectMain .listBlock { margin-top: 25px; } .innovationContent.p-top .kvSect .sectMain .listBlock .itemList > li { padding: 0 6px; font-size: 9px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent.p-top .kvSect .sectMain .listBlock .itemList > li { padding: 0 3px; } } .innovationContent.p-top .visionSect { position: relative; margin-top: -1px; } .innovationContent.p-top .visionSect .sectTit { font-weight: bold; line-height: 1.2; text-align: center; color: #dc0f2a; } .innovationContent.p-top .visionSect .sectMain .txtBlock { text-align: center; color: #444; } .innovationContent.p-top .visionSect .sectMain .txtBlock p { font-weight: bold; line-height: 2; } .innovationContent.p-top .visionSect .sectMain .txtBlock p:first-child { margin-top: 0; } @media only screen and (min-width: 769px), print { .innovationContent.p-top .visionSect .sectInner { position: relative; margin-top: -120px; padding-top: 50px; } .innovationContent.p-top .visionSect .sectTit { font-size: 24px; } .innovationContent.p-top .visionSect .sectMain { margin-top: 50px; } .innovationContent.p-top .visionSect .sectMain .txtBlock p { margin-top: 12px; font-size: 20px; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .visionSect { padding-top: 15px; } .innovationContent.p-top .visionSect .sectTit { font-size: 20px; } .innovationContent.p-top .visionSect .sectMain { margin-top: 25px; } .innovationContent.p-top .visionSect .sectMain .txtBlock { padding: 0 25px; text-align: left; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent.p-top .visionSect .sectMain .txtBlock { padding: 0 15px; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .visionSect .sectMain .txtBlock p { display: inline; margin-top: 10px; font-size: 14px; } } .innovationContent.p-top .marketSect { color: #fff; background: url(../img/top/market_img_bg01.jpg) no-repeat center center; background-color: #000; background-size: cover; } .innovationContent.p-top .marketSect a { color: #fff; } .innovationContent.p-top .marketSect .titBlock { text-align: center; } .innovationContent.p-top .marketSect .titBlock .enTit { font-weight: bold; line-height: 1.2; color: #dc0f2a; } .innovationContent.p-top .marketSect .titBlock .sectTit { font-weight: bold; line-height: 1.2; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList { display: flex; justify-content: center; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li { text-align: center; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li a { display: block; text-decoration: none; background: url(../img/common/icn_arrow_bottom_red01.svg) no-repeat center bottom; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .tit { font-weight: bold; line-height: 1.4; } @media only screen and (min-width: 769px), print { .innovationContent.p-top .marketSect { margin-top: 150px; } .innovationContent.p-top .marketSect .sectInner { padding-top: 220px; padding-bottom: 30px; } .innovationContent.p-top .marketSect .titBlock .enTit { font-size: 20px; } .innovationContent.p-top .marketSect .titBlock .sectTit { margin-top: 15px; font-size: 38px; } .innovationContent.p-top .marketSect .sectMain { padding-top: 140px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li { width: 160px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li a { background-size: 25px auto; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li a { transition: ease opacity .3s; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li a:hover { opacity: 0.65; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .liINner { padding-bottom: 20px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .icon img { width: 80px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .tit { margin-top: 5px; font-size: 15px; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .marketSect { margin-top: 75px; } .innovationContent.p-top .marketSect .sectInner { padding-top: 120px; padding-bottom: 30px; } .innovationContent.p-top .marketSect .titBlock .enTit { font-size: 16px; } .innovationContent.p-top .marketSect .titBlock .sectTit { margin-top: 15px; font-size: 24px; } .innovationContent.p-top .marketSect .sectMain { padding-top: 50px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList { flex-wrap: wrap; margin-top: -25px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li { width: 25%; margin-top: 25px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList > li a { background-size: 25px auto; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .liINner { padding-bottom: 20px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .icon img { width: 50px; } .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .tit { display: flex; align-items: center; justify-content: center; height: 3em; margin-top: 5px; font-size: 12px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent.p-top .marketSect .sectMain .listBlock .itemList .tit { font-size: 11px; } } .innovationContent.p-top .comContSect.-reverse .sectInner { flex-direction: row-reverse; } .innovationContent.p-top .comContSect .sectInner > * { box-sizing: border-box; } .innovationContent.p-top .comContSect .thumbBlock { position: relative; } .innovationContent.p-top .comContSect .thumbBlock .thumb { position: relative; } .innovationContent.p-top .comContSect .thumbBlock .thumb > img { position: relative; z-index: 1; } .innovationContent.p-top .comContSect .thumbBlock .thumb span { position: relative; display: block; overflow: hidden; } .innovationContent.p-top .comContSect .thumbBlock .thumb span img { transform: scale(1.1); } .innovationContent.p-top .comContSect .thumbBlock .thumb span:after { position: absolute; display: block; width: 100%; height: 100%; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 0; top: 0; opacity: .5; background-color: #000; } .innovationContent.p-top .comContSect .thumbBlock .js-fullPhotoInner { position: relative; } .innovationContent.p-top .comContSect .thumbBlock .decoTxt { position: absolute; z-index: 2; top: 100%; transform: translateY(-75%); } .innovationContent.p-top .comContSect .thumbBlock .decoTxt img { width: auto; max-width: inherit; } .innovationContent.p-top .comContSect .sectMain .titBlock { border-bottom: 1px solid #cbcbcb; } .innovationContent.p-top .comContSect .sectMain .titBlock:after { display: block; clear: both; content: ''; } .innovationContent.p-top .comContSect .sectMain .titBlock .icon { float: left; } .innovationContent.p-top .comContSect .sectMain .titBlock .enTit { font-weight: bold; line-height: 1.2; color: #dc0f2a; } .innovationContent.p-top .comContSect .sectMain .titBlock .sectTit { font-weight: bold; line-height: 1.2; color: #151515; } .innovationContent.p-top .comContSect .sectMain .txtBlock .lead { font-weight: bold; line-height: 1.6; } @media only screen and (min-width: 769px), print { .innovationContent.p-top .comContSect { padding-top: 130px; } .innovationContent.p-top .comContSect + .comContSect { padding-top: 100px; } .innovationContent.p-top .comContSect.-reverse .thumbBlock .thumb img { right: auto; left: -50px; } .innovationContent.p-top .comContSect.-reverse .thumbBlock .decoTxt { right: 25px; left: auto; } .innovationContent.p-top .comContSect .sectInner { display: flex; margin: 0 -50px; } .innovationContent.p-top .comContSect .sectInner > * { width: 50%; padding: 0 50px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-top .comContSect .sectInner { display: block; max-width: 600px; margin: 0 auto; } .innovationContent.p-top .comContSect .sectInner > * { width: 100%; } } @media only screen and (min-width: 769px), print { .innovationContent.p-top .comContSect .thumbBlock { flex: 1; padding-top: 50px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-top .comContSect .thumbBlock { padding-bottom: 30px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-top .comContSect .thumbBlock .thumb { max-width: 100%; margin: 0 auto; } } @media only screen and (min-width: 769px), print { .innovationContent.p-top .comContSect .thumbBlock .thumb > img:first-child { position: absolute; z-index: 2; top: -40px; right: -50px; width: 100%; height: 100%; } .innovationContent.p-top .comContSect .thumbBlock .thumb span img { filter: blur(10px); } .innovationContent.p-top .comContSect .thumbBlock .decoTxt { left: 25px; } .innovationContent.p-top .comContSect .thumbBlock .decoTxt img { height: 120px; } .innovationContent.p-top .comContSect .sectMain { min-width: 550px; } .innovationContent.p-top .comContSect .sectMain .titBlock { padding-bottom: 25px; } .innovationContent.p-top .comContSect .sectMain .titBlock .icon { width: 80px; } .innovationContent.p-top .comContSect .sectMain .titBlock .enTit { margin-left: 100px; padding-top: 10px; font-size: 14px; } .innovationContent.p-top .comContSect .sectMain .titBlock .sectTit { margin-top: 10px; margin-left: 100px; font-size: 32px; } .innovationContent.p-top .comContSect .sectMain .txtBlock { margin-top: 40px; } .innovationContent.p-top .comContSect .sectMain .txtBlock .lead { font-size: 22px; } .innovationContent.p-top .comContSect .sectMain .txtBlock .txt { margin-top: 30px; font-size: 15px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-top .comContSect .sectMain .txtBlock .txt br.pcBlock-i { display: none; } } @media only screen and (min-width: 769px), print { .innovationContent.p-top .comContSect .sectMain .txtBlock .more { margin-top: 30px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-top .comContSect .sectMain .txtBlock .more { text-align: center; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .comContSect { padding-top: 80px; } .innovationContent.p-top .comContSect + .comContSect { padding-top: 80px; } .innovationContent.p-top .comContSect .thumbBlock .thumb { margin-left: -15px; } .innovationContent.p-top .comContSect .thumbBlock .thumb > img:first-child { position: absolute; z-index: 2; top: -15px; right: -15px; width: 100%; height: 100%; } .innovationContent.p-top .comContSect .thumbBlock .thumb span img { filter: blur(5px); } .innovationContent.p-top .comContSect .thumbBlock .js-fullPhotoInner { margin: 0 !important; } .innovationContent.p-top .comContSect .thumbBlock .decoTxt { right: 0; transform: translateY(-50%); } .innovationContent.p-top .comContSect .thumbBlock .decoTxt img { height: 80px; } .innovationContent.p-top .comContSect .sectMain { margin-top: 40px; } .innovationContent.p-top .comContSect .sectMain .titBlock { padding-bottom: 20px; } .innovationContent.p-top .comContSect .sectMain .titBlock .icon { width: 50px; } .innovationContent.p-top .comContSect .sectMain .titBlock .enTit { margin-left: 65px; padding-top: 5px; font-size: 12px; } .innovationContent.p-top .comContSect .sectMain .titBlock .sectTit { margin-top: 5px; margin-left: 65px; font-size: 22px; } .innovationContent.p-top .comContSect .sectMain .txtBlock { margin-top: 20px; } .innovationContent.p-top .comContSect .sectMain .txtBlock .lead { font-size: 16px; } .innovationContent.p-top .comContSect .sectMain .txtBlock .txt { margin-top: 15px; font-size: 14px; } .innovationContent.p-top .comContSect .sectMain .txtBlock .more { margin-top: 20px; text-align: center; } } .innovationContent.p-top .movieSect { background-color: #f0f0f0; } .innovationContent.p-top .movieSect .titBlock .sectTit { font-weight: bold; line-height: 1.2; text-align: center; color: #dc0f2a; } .innovationContent.p-top .movieSect .titBlock .lead { text-align: center; } .innovationContent.p-top .movieSect .sectMain .movieBlock { position: relative; max-width: 720px; margin: 0 auto; } .innovationContent.p-top .movieSect .sectMain .movieBlock .movie { position: relative; } .innovationContent.p-top .movieSect .sectMain .movieBlock .movie a { position: relative; display: block; } .innovationContent.p-top .movieSect .sectMain .movieBlock .movie a:after { position: absolute; display: block; width: 100%; height: 100%; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 0; top: 0; box-sizing: border-box; border: 1px solid #000; } @media only screen and (min-width: 769px), print { .innovationContent.p-top .movieSect { margin-top: 160px; } .innovationContent.p-top .movieSect .sectInner { padding: 60px 0 110px; } .innovationContent.p-top .movieSect .titBlock .sectTit { font-size: 40px; } .innovationContent.p-top .movieSect .titBlock .lead { margin-top: 10px; font-size: 16px; } .innovationContent.p-top .movieSect .sectMain { margin-top: 40px; } } @media only screen and (max-width: 768px) { .innovationContent.p-top .movieSect { margin-top: 80px; } .innovationContent.p-top .movieSect .sectInner { padding: 40px 0 50px; } .innovationContent.p-top .movieSect .titBlock .sectTit { font-size: 30px; } .innovationContent.p-top .movieSect .titBlock .lead { margin-top: 10px; font-size: 14px; } .innovationContent.p-top .movieSect .sectMain { margin-top: 30px; } } .innovationContent.p-inner { /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ } .innovationContent.p-inner .kvSect { line-height: 1; text-align: center; color: #fff; background-color: #000; } .innovationContent.p-inner .kvSect .sectInner { display: flex; justify-content: center; align-items: center; } .innovationContent.p-inner .kvSect .sectInner > * { width: 100%; margin-left: -100%; } .innovationContent.p-inner .kvSect .sectInner > *:first-child { margin-left: 0; } .innovationContent.p-inner .kvSect .bgBlock img { width: 100%; } .innovationContent.p-inner .kvSect .titBlock { position: relative; z-index: 1; text-align: center; } .innovationContent.p-inner .kvSect .titBlock .enTit { font-weight: bold; color: #dc0f2a; } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .kvSect .titBlock .icon { margin-top: 15px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-inner .kvSect .titBlock .icon { margin-top: 0; } } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .kvSect .titBlock .icon img { width: 80px; } .innovationContent.p-inner .kvSect .titBlock .enTit { margin-top: 15px; font-size: 20px; } .innovationContent.p-inner .kvSect .titBlock .sectTit { margin-top: 20px; font-size: 34px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-inner .kvSect .titBlock .sectTit { margin-top: 15px; font-size: 24px; } } @media only screen and (max-width: 768px) { .innovationContent.p-inner .kvSect .titBlock .icon img { width: 50px; } .innovationContent.p-inner .kvSect .titBlock .enTit { margin-top: 10px; font-size: 15px; } .innovationContent.p-inner .kvSect .titBlock .sectTit { margin-top: 15px; font-size: 24px; } } .innovationContent.p-inner .leadSect { position: relative; } .innovationContent.p-inner .leadSect .bgBlock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center center; background-size: cover; } .innovationContent.p-inner .leadSect .bgBlock img { display: none; } .innovationContent.p-inner .leadSect .sectInner { position: relative; z-index: 1; } .innovationContent.p-inner .leadSect .sectTit { font-weight: bold; line-height: 1.8; text-align: center; } .innovationContent.p-inner .leadSect .sectMain .titBlock p { margin-top: 1.5em; } .innovationContent.p-inner .leadSect .sectMain .titBlock p:first-child { margin-top: 0; } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .leadSect .sectInner { padding: 120px 0 120px; } .innovationContent.p-inner .leadSect .sectTit { font-size: 26px; } .innovationContent.p-inner .leadSect .sectMain { margin-top: 40px; } .innovationContent.p-inner .leadSect .sectMain .titBlock { text-align: center; font-size: 16px; } } @media only screen and (max-width: 768px) { .innovationContent.p-inner .leadSect .sectInner { padding: 60px 0; } .innovationContent.p-inner .leadSect .sectTit { font-size: 18px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent.p-inner .leadSect .sectTit { font-size: 16px; } } @media only screen and (max-width: 768px) { .innovationContent.p-inner .leadSect .sectMain { margin-top: 20px; } .innovationContent.p-inner .leadSect .sectMain .titBlock { font-size: 14px; } } .innovationContent.p-inner .interviewSect .sectMain .photoBlock .photo { text-align: center; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock { text-align: center; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock .blockTit { font-weight: bold; color: #dc0f2a; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock { position: relative; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .thumbBox { position: relative; z-index: 1; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox:before { position: absolute; display: block; width: 100vw; height: 100%; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 0; transform: translateX(-50%); background: #fff; background: -webkit-gradient(linear, left, right, color-stop(0%, #ddd), color-stop(100%, #fff)); background: -webkit-linear-gradient(left, #ddd 0%, #fff 100%); background: linear-gradient(to right, #ddd 0%, #fff 100%); } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox > * { position: relative; z-index: 1; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .enTit { font-weight: bold; color: #dc0f2a; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .sectTit { font-weight: bold; line-height: 1.8; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn a { width: 100%; padding: .8em 1em; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .comingTxt { font-weight: bold; color: #dc0f2a; } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .interviewSect { margin-top: 120px; } .innovationContent.p-inner .interviewSect .sectMain { margin-top: 35px; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock { margin-top: 60px; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock .blockTit { font-size: 16px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock { display: flex; margin-top: 80px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock.-reverse { flex-direction: row-reverse; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock.-reverse .txtBox:before { transform: translateX(-50%) scaleX(-1); } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .thumbBox { width: 48%; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .thumbBox .thumb { transform: translateY(-20px); } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox { padding: 0 65px; flex: 1; align-self: center; } } @media only screen and (min-width: 769px) and (max-width: 1023px) { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox { padding: 0 40px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox { padding: 0 25px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .enTit { font-size: 14px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .sectTit { font-size: 20px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .sectTit { font-size: 2vw; } } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn { margin-top: 30px; font-size: 12px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn { margin-top: 15px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn a { max-width: 240px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn a:after { width: 3.5em; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .comingTxt { margin-top: 10px; font-size: 14px; } } @media only screen and (max-width: 768px) { .innovationContent.p-inner .interviewSect { margin-top: 60px; } .innovationContent.p-inner .interviewSect .sectMain { margin-top: 20px; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock { margin-top: 30px; } .innovationContent.p-inner .interviewSect .sectMain .comingBlock .blockTit { font-size: 14px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock { margin-top: 60px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock:first-child { margin-top: 30px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .thumbBox .thumb { margin: 0 -15px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox { position: relative; padding: 20px 0 30px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .enTit { font-size: 14px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .sectTit { font-size: 16px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn { margin-top: 20px; text-align: center; font-size: 12px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn a { max-width: 240px; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .moreBtn a:after { width: 3.5em; } .innovationContent.p-inner .interviewSect .sectMain .itemBlock .txtBox .comingTxt { margin-top: 20px; text-align: center; font-size: 14px; } } .innovationContent.p-inner .techSect .sectMain .leadBlock .txtBox { flex: 1; } .innovationContent.p-inner .techSect .sectMain .leadBlock .txtBox p { margin-top: 1.5em; } .innovationContent.p-inner .techSect .sectMain .leadBlock .txtBox p:first-child { margin-top: 0; } .innovationContent.p-inner .techSect .sectMain .listBlock { border-top: 1px solid #cacaca; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain { position: relative; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .infoTxt { line-height: 1; position: absolute; right: 0; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li { line-height: 1.6; box-sizing: border-box; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a { position: relative; display: flex; box-sizing: border-box; height: 100%; text-decoration: none; color: inherit; background-color: #f0f0f0; align-items: center; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a:after { position: absolute; display: block; width: 0px; height: 0px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; right: 0; top: 50%; transform: translateY(-50%); border-style: solid; border-color: transparent transparent transparent #da0f2a; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList .liInner { box-sizing: border-box; width: 100%; } @media only screen and (min-width: 769px), print { .innovationContent.p-inner .techSect { margin-top: 120px; } .innovationContent.p-inner .techSect .sectMain { margin-top: 60px; } .innovationContent.p-inner .techSect .sectMain .leadBlock { display: flex; flex-direction: row-reverse; } .innovationContent.p-inner .techSect .sectMain .leadBlock .txtBox { padding-top: 10px; font-size: 15px; } .innovationContent.p-inner .techSect .sectMain .leadBlock .thumb { width: 40%; padding-left: 30px; } .innovationContent.p-inner .techSect .sectMain .listBlock { margin-top: 50px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockTit { font-weight: normal; padding: 25px 10px; pointer-events: none; font-size: 16px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain { display: block !important; height: auto !important; padding-top: 1em; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .infoTxt { top: -1em; font-size: 12px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList { display: flex; margin: -16px -8px 0; flex-wrap: wrap; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li { width: 33.333%; margin-top: 16px; padding: 0 8px; font-size: 13px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a { transition: ease opacity .3s; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a:hover { opacity: 0.65; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a:after { margin-right: 15px; border-width: 4px 0 4px 6px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList .liInner { padding: 16px 30px 16px 15px; } } @media only screen and (max-width: 768px) { .innovationContent.p-inner .techSect { margin-top: 70px; } .innovationContent.p-inner .techSect .sectMain { margin-top: 30px; } .innovationContent.p-inner .techSect .sectMain .leadBlock .txtBox { margin-top: 30px; font-size: 14px; } .innovationContent.p-inner .techSect .sectMain .listBlock { margin-top: 40px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockTit { font-weight: bold; position: relative; padding: 15px 50px 15px 0; border-bottom: 1px solid #cacaca; font-size: 13px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockTit:before, .innovationContent.p-inner .techSect .sectMain .listBlock .blockTit:after { position: absolute; display: block; width: 20px; height: 2px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; right: 0; top: 50%; margin-top: -1px; margin-right: 15px; background-color: #c8182a; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockTit:after { transform: rotate(90deg); } .innovationContent.p-inner .techSect .sectMain .listBlock.open .blockTit:after { display: none; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain { position: relative; z-index: 1; display: none; padding-top: 3em; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .infoTxt { top: 1.5em; font-size: 11px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li { margin-top: 2px; font-size: 12px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li:first-child { margin-top: 0; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList > li a:after { margin-right: 15px; border-width: 4px 0 4px 6px; } .innovationContent.p-inner .techSect .sectMain .listBlock .blockMain .itemList .liInner { padding: 12px 30px 12px 15px; } } .innovationContent.p-interview { /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ /* ========================================================= ========================================================= */ } .innovationContent.p-interview .commonNav { border-bottom: 1px solid #e0e0e0; } .innovationContent.p-interview .kvSect .titBlock .enTit { font-weight: bold; color: #dc0f2a; } .innovationContent.p-interview .kvSect .titBlock .sectTit { font-weight: bold; line-height: 1.8; } .innovationContent.p-interview .kvSect .bgBlock { position: relative; } .innovationContent.p-interview .kvSect .bgBlock .thumb .js-fullPhotoInner { position: relative; } .innovationContent.p-interview .kvSect .bgBlock .decoTxt { position: absolute; width: auto; } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .kvSect { margin-top: 65px; background: #ddd; background: -webkit-gradient(linear, left, right, color-stop(0%, #fff), color-stop(100%, #ddd)); background: -webkit-linear-gradient(left, #fff 0%, #ddd 100%); background: linear-gradient(to right, #fff 0%, #ddd 100%); } .innovationContent.p-interview .kvSect .inner { max-width: 1170px; } .innovationContent.p-interview .kvSect .sectInner { display: flex; } .innovationContent.p-interview .kvSect .titBlock { text-align: center; flex: 1; align-self: center; justify-content: center; } .innovationContent.p-interview .kvSect .titBlock .blockInner { display: inline-block; text-align: left; } .innovationContent.p-interview .kvSect .titBlock .enTit { font-size: 20px; } .innovationContent.p-interview .kvSect .titBlock .sectTit { margin-top: 15px; font-size: 28px; } } @media only screen and (min-width: 769px) and (max-width: 1199px) { .innovationContent.p-interview .kvSect .titBlock .sectTit { font-size: 2.3vw; margin-top: 5px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .kvSect .bgBlock { width: 47%; } .innovationContent.p-interview .kvSect .bgBlock .thumb { margin-top: -30px; padding: 0 30px 30px 30px; } .innovationContent.p-interview .kvSect .bgBlock .decoTxt { right: -15px; bottom: -50px; height: 130px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-interview .kvSect .bgBlock .decoTxt { height: 80px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .kvSect .titBlock { margin-right: -15px; padding: 20px 0 130px; padding-right: 15px; background: #ddd; background: -moz-linear-gradient(left, #fff 0%, #ddd 100%); background: -webkit-linear-gradient(left, #fff 0%, #ddd 100%); background: linear-gradient(to right, #fff 0%, #ddd 100%); } .innovationContent.p-interview .kvSect .titBlock .enTit { font-size: 12px; } .innovationContent.p-interview .kvSect .titBlock .sectTit { margin-top: 5px; font-size: 16px; } .innovationContent.p-interview .kvSect .bgBlock .thumb { margin-top: -110px; } .innovationContent.p-interview .kvSect .bgBlock .thumb .js-fullPhotoInner { margin-right: auto !important; } .innovationContent.p-interview .kvSect .bgBlock .decoTxt { right: -5px; bottom: -30px; height: 75px; } } .innovationContent.p-interview .introSect .sectInner { position: relative; box-sizing: border-box; } .innovationContent.p-interview .introSect .titBlock .enTit { font-weight: bold; line-height: 1; letter-spacing: 0; color: #dc0f2a; } .innovationContent.p-interview .introSect .titBlock .enTit span { position: relative; display: inline-block; } .innovationContent.p-interview .introSect .titBlock .enTit span:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 100%; background-color: #dc0f2a; } .innovationContent.p-interview .introSect .titBlock .sectTit { font-weight: bold; line-height: 1.8; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .thumbBox figcaption { display: block; margin-top: .5em; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .txtBox p { margin-top: 1em; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .txtBox p:first-child { margin-top: 0; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .txtBox .fullThumb { margin-top: 3em; margin-bottom: 3em; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .txtBox .fullThumb:first-child { margin-top: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock { position: relative; border: solid #cacaca; border-width: 1px 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock + .dataBlock { margin-top: 0; border-top: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox { position: absolute; top: 0; left: 0; transform: translateY(-50%); background-color: #fff; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox .blockTit { font-weight: bold; color: #cacaca; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .thumbBox { box-sizing: border-box; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit { font-weight: bold; line-height: 1.8; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox p { margin-top: 1em; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox p:first-child { margin-top: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox p.caution { font-size: 80%; padding-left: 2em; text-indent: -2em; color: #989898; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox p.caution .num { display: inline-block; width: 2em; text-indent: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox p.caution.caution + .caution { margin-top: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .fullThumb { margin-top: 2em; margin-bottom: 2em; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .fullThumb:first-child { margin-top: 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn { text-align: center; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn a { padding-right: 3em; padding-left: 3em; } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .introSect { margin-top: 100px; } .innovationContent.p-interview .introSect .sectInner { max-width: 960px; margin: 0 auto; padding-left: 80px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-interview .introSect .sectInner { padding-left: 60px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .introSect .titBlock .enTit { position: absolute; top: 10px; left: 0; font-size: 14px; } .innovationContent.p-interview .introSect .titBlock .enTit span { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .innovationContent.p-interview .introSect .titBlock .enTit span:after { width: 1px; height: 100px; margin-top: 10px; } .innovationContent.p-interview .introSect .titBlock .sectTit { font-size: 24px; } .innovationContent.p-interview .introSect .sectMain .leadBlock { margin-top: 40px; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .thumbBox { float: right; width: 300px; margin: 0 0 55px 55px; font-size: 12px; } .innovationContent.p-interview .introSect .sectMain .dataBlock { margin-top: 80px; padding: 60px 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox { padding-right: 25px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox .blockTit { font-size: 16px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain { display: flex; flex-direction: row-reverse; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .thumbBox { width: 375px; padding-left: 30px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox { flex: 1; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxSubTit { font-size: 14px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit { padding-bottom: 10px; font-size: 20px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit small { font-size: 15px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit.-sizeS { padding-bottom: 0; font-size: 18px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn { margin-top: 50px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn a { min-width: 320px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .introSect { margin-top: 60px; } .innovationContent.p-interview .introSect .titBlock .enTit { font-size: 14px; } .innovationContent.p-interview .introSect .titBlock .enTit span:after { top: 50%; left: 100%; width: 40px; height: 1px; margin-left: 10px; } .innovationContent.p-interview .introSect .titBlock .sectTit { margin-top: 20px; font-size: 18px; } .innovationContent.p-interview .introSect .sectMain .leadBlock { margin-top: 10px; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain { display: flex; flex-direction: column-reverse; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .thumbBox { max-width: 480px; margin: 0 auto; margin-top: 50px; font-size: 12px; } .innovationContent.p-interview .introSect .sectMain .leadBlock .blockMain .txtBox p { margin-top: 2em; } .innovationContent.p-interview .introSect .sectMain .dataBlock { margin-top: 80px; padding: 40px 0; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox { padding-right: 25px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .titBox .blockTit { font-size: 16px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .thumbBox { text-align: center; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .thumbBox img { max-width: 345px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox { margin-top: 20px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxSubTit { font-size: 13px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit { padding-bottom: 15px; font-size: 18px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit small { font-size: 13px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .blockMain .txtBox .boxTit.-sizeS { padding-bottom: 0; font-size: 16px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn { margin-top: 30px; } .innovationContent.p-interview .introSect .sectMain .dataBlock .btn a { min-width: 240px; padding-right: 2em; padding-left: 2em; } } .innovationContent.p-interview .talkSect .sectInner { position: relative; box-sizing: border-box; } .innovationContent.p-interview .talkSect .titBlock .enTit { font-weight: bold; line-height: 1; color: #dc0f2a; } .innovationContent.p-interview .talkSect .titBlock .enTit span { position: relative; display: inline-block; } .innovationContent.p-interview .talkSect .titBlock .enTit span:after { position: absolute; display: block; width: 0; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 50%; top: 100%; background-color: #dc0f2a; } .innovationContent.p-interview .talkSect .titBlock .sectTit { font-weight: bold; line-height: 1.8; } .innovationContent.p-interview .talkSect .sectMain .infoBlock { position: relative; } .innovationContent.p-interview .talkSect .sectMain .infoBlock:before { position: absolute; display: block; width: 150vw; height: 0; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; left: 0; bottom: 0; z-index: 0; background-color: #f0f0f0; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList { position: relative; z-index: 1; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .thumb img { width: 100%; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox { background-color: #fff; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .tit { font-weight: bold; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .txt { line-height: 1.6; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList > li:first-child { margin-top: 0; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList > li.is-caution { margin-top: 1em; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .liInner { display: flex; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .thumb { line-height: 1; box-sizing: content-box; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox { position: relative; background-color: #f0f0f0; flex: 1; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox p { margin-top: 1.5em; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox p:first-child { margin-top: 0; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox:before { position: absolute; display: block; width: 0px; height: 0px; content: ''; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; top: 0; right: 100%; border-style: solid; border-color: transparent #f0f0f0 transparent transparent; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox strong { font-weight: normal; background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(61%, #fdfe00)); background: linear-gradient(transparent 60%, #fdfe00 61%); } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList > li { padding-left: 2em; text-indent: -2em; color: #666; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList > li .num { display: inline-block; width: 2em; text-indent: 0; } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .talkSect { margin-top: 100px; } .innovationContent.p-interview .talkSect .sectInner { max-width: 960px; margin: 0 auto; padding-left: 80px; } } @media only screen and (min-width: 769px) and (max-width: 959px) { .innovationContent.p-interview .talkSect .sectInner { padding-left: 60px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .talkSect .titBlock { max-width: 800px; } .innovationContent.p-interview .talkSect .titBlock .enTit { position: absolute; top: 0; left: 0; font-size: 14px; } .innovationContent.p-interview .talkSect .titBlock .enTit span { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } .innovationContent.p-interview .talkSect .titBlock .enTit span:after { width: 1px; height: 100px; margin-top: 10px; } .innovationContent.p-interview .talkSect .titBlock .sectTit { font-size: 24px; } .innovationContent.p-interview .talkSect .titBlock .lead { margin-top: 25px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock { margin-top: 80px; margin-left: -80px; padding-bottom: 60px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock:before { height: 250px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList { display: flex; padding: 0 25px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col1 { padding-left: 65px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col1 > li { width: 100%; max-width: 670px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col1 > li .liInner { display: flex; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col1 > li .thumb { width: 50%; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col1 > li .txtBox { padding: 20px 50px; align-self: center; flex: 1; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col2 { padding-right: 0; padding-left: 65px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList.-col2 > li { width: 50%; max-width: 380px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList > li { width: 33.333%; padding: 0 15px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .liInner { height: 100%; background-color: #fff; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox { padding: 15px 18px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .tit { font-size: 14px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .txt { margin-top: 10px; font-size: 12px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock { max-width: 800px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .fullImg { margin-top: 50px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList { margin-top: 80px; padding: 0 35px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList > li { margin-top: 50px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .thumb { width: 80px; padding-right: 40px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox { padding: 30px 30px; border-radius: 5px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox:before { margin-top: 35px; border-width: 8px 20px 8px 0; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList { padding: 0 30px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList > li { font-size: 12px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .talkSect { margin-top: 60px; } .innovationContent.p-interview .talkSect .titBlock .enTit { font-size: 14px; } .innovationContent.p-interview .talkSect .titBlock .enTit span:after { top: 50%; left: 100%; width: 40px; height: 1px; margin-left: 10px; } .innovationContent.p-interview .talkSect .titBlock .sectTit { margin-top: 20px; font-size: 18px; } .innovationContent.p-interview .talkSect .titBlock .lead { margin-top: 15px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock { max-width: 480px; margin: 0 auto; margin-top: 30px; padding: 0 15px; padding-bottom: 40px; } } @media only screen and (max-width: 768px) and (max-width: 374px) { .innovationContent.p-interview .talkSect .sectMain .infoBlock { padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .talkSect .sectMain .infoBlock:before { height: calc(100% - 40px); margin-left: 50px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList > li { margin-top: 30px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList > li:first-child { margin-top: 0; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .thumb { padding-left: 15px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox { position: relative; width: 275px; margin-top: -40px; padding: 20px 15px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .tit { font-size: 14px; } .innovationContent.p-interview .talkSect .sectMain .infoBlock .itemList .txtBox .txt { margin-top: 10px; font-size: 12px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .fullImg { margin-top: 30px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList { margin-top: 60px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList > li { margin-top: 20px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .thumb { width: 55px; padding-right: 15px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox { padding: 15px 20px; border-radius: 5px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .txtBox:before { margin-top: 26px; border-width: 5px 8px 5px 0; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList { padding: 0 30px; } .innovationContent.p-interview .talkSect .sectMain .talkBlock .itemList .cautionList > li { font-size: 12px; } } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .messageSect { margin-top: 100px; } .innovationContent.p-interview .messageSect .sectInner { max-width: 800px; margin: 0 auto; } .innovationContent.p-interview .messageSect .sectMain { margin-top: 30px; } .innovationContent.p-interview .messageSect .sectMain .txtBlock { margin-top: 40px; font-size: 16px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .messageSect { margin-top: 60px; } .innovationContent.p-interview .messageSect .titBlock .sectTit { text-align: left; font-size: 18px; } .innovationContent.p-interview .messageSect .sectMain { margin-top: 20px; } .innovationContent.p-interview .messageSect .sectMain .txtBlock { margin-top: 20px; font-size: 16px; } } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList { display: flex; flex-wrap: wrap; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li { box-sizing: border-box; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li a { display: block; text-decoration: none; color: inherit; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList .thumb img { width: 100%; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList .tit { font-weight: bold; } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .infoSect { margin-top: 100px; } .innovationContent.p-interview .infoSect .sectMain .listBlock { margin-top: 30px; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList { display: block; max-width: 596px; margin: 0 auto 0; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList > li { width: auto; margin-top: 20px; padding: 0; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList > li:first-child { margin-top: 0; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList > li .liInner { display: flex; align-items: center; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList > li .thumb { box-sizing: border-box; width: 192px; } .innovationContent.p-interview .infoSect .sectMain .listBlock.-vertical .itemList > li .tit { margin-top: 0; padding-left: 40px; flex: 1; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList { margin: -30px -5px 0; justify-content: center; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li { width: 20%; margin-top: 30px; padding: 0 5px; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li a { transition: ease opacity .3s; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li a:hover { opacity: 0.65; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList .tit { margin-top: 10px; font-size: 12px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .infoSect { margin-top: 60px; } .innovationContent.p-interview .infoSect .sectMain .listBlock { margin-top: 30px; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList { margin: -30px -8px 0; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList > li { width: 50%; margin-top: 30px; padding: 0 8px; } .innovationContent.p-interview .infoSect .sectMain .listBlock .itemList .tit { line-height: 1.6; margin-top: 10px; font-size: 12px; } } .innovationContent.p-interview .otherInterviewsSect { background-color: #f2f2f2; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList { display: flex; flex-wrap: wrap; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li { box-sizing: border-box; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li:nth-child(n+5) { display: none; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li a { display: block; text-decoration: none; color: inherit; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .thumb img { width: 100%; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .cat { font-weight: bold; line-height: 1; color: #dc0f2a; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .tit { font-weight: bold; line-height: 1.6; } @media only screen and (min-width: 769px), print { .innovationContent.p-interview .otherInterviewsSect { margin-top: 120px; padding: 90px 0; } .innovationContent.p-interview .otherInterviewsSect .sectMain { margin-top: 50px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList { margin: -30px -10px 0; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li { width: 25%; margin-top: 30px; padding: 0 10px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li a { transition: ease opacity .3s; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li a:hover { opacity: 0.65; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .cat { margin-top: 15px; font-size: 12px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .tit { margin-top: 15px; font-size: 16px; } } @media only screen and (max-width: 768px) { .innovationContent.p-interview .otherInterviewsSect { margin-top: 70px; padding: 40px 0; } .innovationContent.p-interview .otherInterviewsSect .sectInner { max-width: 480px; margin: 0 auto; } .innovationContent.p-interview .otherInterviewsSect .sectMain { margin-top: 30px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList { margin: -30px -8px 0; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList > li { width: 50%; margin-top: 30px; padding: 0 8px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .cat { margin-top: 15px; font-size: 12px; } .innovationContent.p-interview .otherInterviewsSect .sectMain .listBlock .itemList .tit { line-height: 1.6; margin-top: 10px; margin-top: 10px; font-size: 12px; } }