@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=EB+Garamond:400,400i|Noto+Serif+JP:400,700&display=swap&subset=japanese"); #Header, #Footer, #aside, .Grid { /*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ /* These browsers currently include ** Android 4.3-4.4+, ** Chrome 39-40+, ** Firefox 34-35+, ** Internet Explorer 10-11+, ** iOS 7-8+, ** Safari 7-8+, ** Windows Phone 8.1+. */ /* * Normalization */ /* * Universal inheritance */ /* * Opinionated defaults */ /* * { margin: 0; padding: 0; } */ /* general params * { margin: 0; padding: 0; outline: 0; } h1, h2, h3, h4, h5, h6, div, p, pre, ul, ol, dl, dt, dd, address, form, blockquote { margin: 0; padding: 0; font-style: normal; } h1, h2, h3, h4, h5, h6, dt { font-weight: 700; } --------------------*/ /* div, p, */ /* acronyms and abbreviations styles -------------------------------------*/ /* word break -------------------------------------*/ /* image position -------------------------------------*/ /* ===== 2: form setting =========================== */ } #Header :root, #Footer :root, #aside :root, .Grid :root { -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #Header audio:not([controls]), #Footer audio:not([controls]), #aside audio:not([controls]), .Grid audio:not([controls]) { display: none; } #Header details, #Footer details, #aside details, .Grid details { display: block; } #Header input[type=number], #Footer input[type=number], #aside input[type=number], .Grid input[type=number] { width: auto; } #Header input[type=search], #Footer input[type=search], #aside input[type=search], .Grid input[type=search] { -webkit-appearance: textfield; } #Header input[type=search]::-webkit-search-cancel-button, #Header input[type=search]::-webkit-search-decoration, #Footer input[type=search]::-webkit-search-cancel-button, #Footer input[type=search]::-webkit-search-decoration, #aside input[type=search]::-webkit-search-cancel-button, #aside input[type=search]::-webkit-search-decoration, .Grid input[type=search]::-webkit-search-cancel-button, .Grid input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } #Header main, #Footer main, #aside main, .Grid main { display: block; } #Header summary, #Footer summary, #aside summary, .Grid summary { display: block; } #Header pre, #Footer pre, #aside pre, .Grid pre { overflow: auto; } #Header progress, #Footer progress, #aside progress, .Grid progress { display: inline-block; } #Header small, #Footer small, #aside small, .Grid small { font-size: 75%; } #Header template, #Footer template, #aside template, .Grid template { display: none; } #Header textarea, #Footer textarea, #aside textarea, .Grid textarea { overflow: auto; } #Header [hidden], #Footer [hidden], #aside [hidden], .Grid [hidden] { display: none; } #Header [unselectable], #Footer [unselectable], #aside [unselectable], .Grid [unselectable] { -webkit-user-select: none; user-select: none; } #Header *, #Header ::before, #Header ::after, #Footer *, #Footer ::before, #Footer ::after, #aside *, #aside ::before, #aside ::after, .Grid *, .Grid ::before, .Grid ::after { box-sizing: inherit; } #Header *, #Footer *, #aside *, .Grid * { font-size: inherit; line-height: inherit; } #Header ::before, #Header ::after, #Footer ::before, #Footer ::after, #aside ::before, #aside ::after, .Grid ::before, .Grid ::after { text-decoration: inherit; vertical-align: inherit; } #Header *, #Header ::before, #Header ::after, #Footer *, #Footer ::before, #Footer ::after, #aside *, #aside ::before, #aside ::after, .Grid *, .Grid ::before, .Grid ::after { border-style: solid; border-width: 0; } #Header :root, #Footer :root, #aside :root, .Grid :root { box-sizing: border-box; cursor: default; font: 62.5%/1em sans-serif; text-rendering: optimizeLegibility; } @media screen and (min-width: 769px) { #Header :root, #Footer :root, #aside :root, .Grid :root { font: 0.78125vw/1em sans-serif; } } @media screen and (min-width: 1600px) { #Header :root, #Footer :root, #aside :root, .Grid :root { font: 78.125%/1em sans-serif; } } #Header html, #Footer html, #aside html, .Grid html { background-color: #FFFFFF; } #Header a, #Footer a, #aside a, .Grid a { text-decoration: none; } #Header audio, #Header canvas, #Header iframe, #Header img, #Header svg, #Header video, #Footer audio, #Footer canvas, #Footer iframe, #Footer img, #Footer svg, #Footer video, #aside audio, #aside canvas, #aside iframe, #aside img, #aside svg, #aside video, .Grid audio, .Grid canvas, .Grid iframe, .Grid img, .Grid svg, .Grid video { vertical-align: middle; } #Header button, #Header input:not([type=radio]), #Header select, #Header textarea, #Footer button, #Footer input:not([type=radio]), #Footer select, #Footer textarea, #aside button, #aside input:not([type=radio]), #aside select, #aside textarea, .Grid button, .Grid input:not([type=radio]), .Grid select, .Grid textarea { background-color: transparent; } #Header button, #Header input:not([type=radio]), #Header select, #Header textarea, #Footer button, #Footer input:not([type=radio]), #Footer select, #Footer textarea, #aside button, #aside input:not([type=radio]), #aside select, #aside textarea, .Grid button, .Grid input:not([type=radio]), .Grid select, .Grid textarea { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; } #Header button, #Header [type=button], #Header [type=date], #Header [type=datetime], #Header [type=datetime-local], #Header [type=email], #Header [type=month], #Header [type=number], #Header [type=password], #Header [type=reset], #Header [type=search], #Header [type=submit], #Header [type=tel], #Header [type=text], #Header [type=time], #Header [type=url], #Header [type=week], #Header select, #Header textarea, #Footer button, #Footer [type=button], #Footer [type=date], #Footer [type=datetime], #Footer [type=datetime-local], #Footer [type=email], #Footer [type=month], #Footer [type=number], #Footer [type=password], #Footer [type=reset], #Footer [type=search], #Footer [type=submit], #Footer [type=tel], #Footer [type=text], #Footer [type=time], #Footer [type=url], #Footer [type=week], #Footer select, #Footer textarea, #aside button, #aside [type=button], #aside [type=date], #aside [type=datetime], #aside [type=datetime-local], #aside [type=email], #aside [type=month], #aside [type=number], #aside [type=password], #aside [type=reset], #aside [type=search], #aside [type=submit], #aside [type=tel], #aside [type=text], #aside [type=time], #aside [type=url], #aside [type=week], #aside select, #aside textarea, .Grid button, .Grid [type=button], .Grid [type=date], .Grid [type=datetime], .Grid [type=datetime-local], .Grid [type=email], .Grid [type=month], .Grid [type=number], .Grid [type=password], .Grid [type=reset], .Grid [type=search], .Grid [type=submit], .Grid [type=tel], .Grid [type=text], .Grid [type=time], .Grid [type=url], .Grid [type=week], .Grid select, .Grid textarea { min-height: 1em; } #Header input[type=submit], #Header input[type=button], #Footer input[type=submit], #Footer input[type=button], #aside input[type=submit], #aside input[type=button], .Grid input[type=submit], .Grid input[type=button] { border-radius: 0; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; } #Header input[type=submit]::-webkit-search-decoration, #Header input[type=button]::-webkit-search-decoration, #Footer input[type=submit]::-webkit-search-decoration, #Footer input[type=button]::-webkit-search-decoration, #aside input[type=submit]::-webkit-search-decoration, #aside input[type=button]::-webkit-search-decoration, .Grid input[type=submit]::-webkit-search-decoration, .Grid input[type=button]::-webkit-search-decoration { display: none; } #Header input[type=submit]::focus, #Header input[type=button]::focus, #Footer input[type=submit]::focus, #Footer input[type=button]::focus, #aside input[type=submit]::focus, #aside input[type=button]::focus, .Grid input[type=submit]::focus, .Grid input[type=button]::focus { outline-offset: -2px; } #Header code, #Header kbd, #Header pre, #Header samp, #Footer code, #Footer kbd, #Footer pre, #Footer samp, #aside code, #aside kbd, #aside pre, #aside samp, .Grid code, .Grid kbd, .Grid pre, .Grid samp { font-family: monospace, monospace; } #Header nav ol, #Header nav ul, #Footer nav ol, #Footer nav ul, #aside nav ol, #aside nav ul, .Grid nav ol, .Grid nav ul { list-style: none; } #Header select, #Footer select, #aside select, .Grid select { -moz-appearance: none; -webkit-appearance: none; } #Header select::-ms-expand, #Footer select::-ms-expand, #aside select::-ms-expand, .Grid select::-ms-expand { display: none; } #Header select::-ms-value, #Footer select::-ms-value, #aside select::-ms-value, .Grid select::-ms-value { color: currentColor; } #Header table, #Footer table, #aside table, .Grid table { border-collapse: collapse; border-spacing: 0; } #Header textarea, #Footer textarea, #aside textarea, .Grid textarea { resize: vertical; } #Header ::selection, #Footer ::selection, #aside ::selection, .Grid ::selection { color: #FFFFFF; background-color: #000000; text-shadow: none; } @media screen { #Header [hidden~=screen], #Footer [hidden~=screen], #aside [hidden~=screen], .Grid [hidden~=screen] { display: inherit; } #Header [hidden~=screen]:not(:active):not(:focus):not(:target), #Footer [hidden~=screen]:not(:active):not(:focus):not(:target), #aside [hidden~=screen]:not(:active):not(:focus):not(:target), .Grid [hidden~=screen]:not(:active):not(:focus):not(:target) { clip: rect(0 0 0 0) !important; position: absolute !important; } } #Header h1, #Header h2, #Header h3, #Header h4, #Header h5, #Header h6, #Header pre, #Header ul, #Header ol, #Header dl, #Header dt, #Header dd, #Header address, #Header form, #Header blockquote, #Footer h1, #Footer h2, #Footer h3, #Footer h4, #Footer h5, #Footer h6, #Footer pre, #Footer ul, #Footer ol, #Footer dl, #Footer dt, #Footer dd, #Footer address, #Footer form, #Footer blockquote, #aside h1, #aside h2, #aside h3, #aside h4, #aside h5, #aside h6, #aside pre, #aside ul, #aside ol, #aside dl, #aside dt, #aside dd, #aside address, #aside form, #aside blockquote, .Grid h1, .Grid h2, .Grid h3, .Grid h4, .Grid h5, .Grid h6, .Grid pre, .Grid ul, .Grid ol, .Grid dl, .Grid dt, .Grid dd, .Grid address, .Grid form, .Grid blockquote { margin: 0; padding: 0; font-style: normal; } #Header article, #Header aside, #Header details, #Header figcaption, #Header figure, #Header footer, #Header header, #Header hgroup, #Header menu, #Header nav, #Header section, #Footer article, #Footer aside, #Footer details, #Footer figcaption, #Footer figure, #Footer footer, #Footer header, #Footer hgroup, #Footer menu, #Footer nav, #Footer section, #aside article, #aside aside, #aside details, #aside figcaption, #aside figure, #aside footer, #aside header, #aside hgroup, #aside menu, #aside nav, #aside section, .Grid article, .Grid aside, .Grid details, .Grid figcaption, .Grid figure, .Grid footer, .Grid header, .Grid hgroup, .Grid menu, .Grid nav, .Grid section { display: block; margin: 0; } #Header table, #Footer table, #aside table, .Grid table { border-collapse: collapse; font-size: small; margin: 0; empty-cells: show; } #Header hr, #Header .areaAnchor, #Header .anchor, #Footer hr, #Footer .areaAnchor, #Footer .anchor, #aside hr, #aside .areaAnchor, #aside .anchor, .Grid hr, .Grid .areaAnchor, .Grid .anchor { display: none; } #Header img, #Footer img, #aside img, .Grid img { vertical-align: bottom; border: none; /* img do not want a border */ } #Header li, #Footer li, #aside li, .Grid li { list-style: none; } #Header blockquote, #Header q, #Footer blockquote, #Footer q, #aside blockquote, #aside q, .Grid blockquote, .Grid q { quotes: none; } #Header blockquote:before, #Header blockquote:after, #Header q:before, #Header q:after, #Footer blockquote:before, #Footer blockquote:after, #Footer q:before, #Footer q:after, #aside blockquote:before, #aside blockquote:after, #aside q:before, #aside q:after, .Grid blockquote:before, .Grid blockquote:after, .Grid q:before, .Grid q:after { content: ""; content: none; } #Header ins, #Footer ins, #aside ins, .Grid ins { text-decoration: none; color: #000; } #Header small, #Header sub, #Header sup, #Footer small, #Footer sub, #Footer sup, #aside small, #aside sub, #aside sup, .Grid small, .Grid sub, .Grid sup { font-size: 0.83em; } #Header sub, #Footer sub, #aside sub, .Grid sub { display: inline-block; vertical-align: middle; transform: translateY(15%); } #Header sup, #Footer sup, #aside sup, .Grid sup { display: inline-block; vertical-align: middle; transform: translateY(-15%); } #Header mark, #Footer mark, #aside mark, .Grid mark { font-weight: bold; font-style: italic; color: #000; } #Header del, #Footer del, #aside del, .Grid del { text-decoration: line-through; } #Header abbr[title], #Header dfn[title], #Footer abbr[title], #Footer dfn[title], #aside abbr[title], #aside dfn[title], .Grid abbr[title], .Grid dfn[title] { cursor: help; border-bottom: 1px dotted; } #Header table, #Footer table, #aside table, .Grid table { border-spacing: 0; border-collapse: collapse; } #Header acronym, #Header abbr, #Footer acronym, #Footer abbr, #aside acronym, #aside abbr, .Grid acronym, .Grid abbr { cursor: help; } #Header p, #Footer p, #aside p, .Grid p { word-break: normal; } #Header img, #Footer img, #aside img, .Grid img { vertical-align: bottom; } #Header option, #Footer option, #aside option, .Grid option { padding-right: 10px; } #Header input, #Header select, #Footer input, #Footer select, #aside input, #aside select, .Grid input, .Grid select { vertical-align: middle; } /*--------------------------------------------------------------- */ /* 全体で使用する common style を記述 /*--------------------------------------------------------------- */ /* EB Garamond font-family: 'EB Garamond', serif; font-style: normal; font-style: italic; Regular : 400; Bold : 700; */ /* Noto Serif JP font-family: 'Noto Serif JP'; Regular : 400; Bold : 700; */ /*-------------------------------------------> font */ .en, .items.grid .item .meta .title, .items.grid .item .meta .day { font-family: "EB Garamond", "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 400; } .en.f_def { font-weight: 400; } .en.f_bold { font-weight: 700; } .f_def { font-weight: 400; } .f_light { font-weight: 300; } .f_bold { font-weight: 700; } /*-------------------------------------------> html / body style */ #Header, #Footer, #aside, .Grid { font-family: "EB Garamond", "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*-------------------------------------------> flexbox */ /*-------------------------------------------> link style */ /*-------------------------------------------> Common style */ } @media screen and (min-width: 744px) { #Header .pc, #Footer .pc, #aside .pc, .Grid .pc { display: block; } #Header .sp, #Footer .sp, #aside .sp, .Grid .sp { display: none; } #Header img.pc, #Header .svg.pc, #Footer img.pc, #Footer .svg.pc, #aside img.pc, #aside .svg.pc, .Grid img.pc, .Grid .svg.pc { display: inline; } #Header > *, #Footer > *, #aside > *, .Grid > * { font-feature-settings: "palt"; } } @media screen and (max-width: 743px) { #Header .pc, #Footer .pc, #aside .pc, .Grid .pc { display: none; } #Header .sp, #Footer .sp, #aside .sp, .Grid .sp { display: block; } #Header img.pc, #Footer img.pc, #aside img.pc, .Grid img.pc { display: none; } #Header img.sp, #Header .svg.sp, #Footer img.sp, #Footer .svg.sp, #aside img.sp, #aside .svg.sp, .Grid img.sp, .Grid .svg.sp { display: inline; } #Header img, #Footer img, #aside img, .Grid img { max-width: 100%; height: auto; } #Header > *, #Footer > *, #aside > *, .Grid > * { font-feature-settings: "palt"; } } #Header .flex, #Footer .flex, #aside .flex, .Grid .flex { display: flex; } #Header .flex.column, #Footer .flex.column, #aside .flex.column, .Grid .flex.column { flex-direction: column; } @media screen and (max-width: 743px) { #Header .flex.sp_column, #Footer .flex.sp_column, #aside .flex.sp_column, .Grid .flex.sp_column { flex-direction: column; } } #Header a, #Footer a, #aside a, .Grid a { outline: none; cursor: pointer; } #Header a:link, #Footer a:link, #aside a:link, .Grid a:link { text-decoration: none; } #Header a:visited, #Footer a:visited, #aside a:visited, .Grid a:visited { text-decoration: none; } #Header a:hover, #Footer a:hover, #aside a:hover, .Grid a:hover { text-decoration: none; } #Header a:active, #Footer a:active, #aside a:active, .Grid a:active { text-decoration: none; } @media screen and (min-width: 744px) { #Header .OverOpacity, #Header .OverOpacityGroup a, #Footer .OverOpacity, #Footer .OverOpacityGroup a, #aside .OverOpacity, #aside .OverOpacityGroup a, .Grid .OverOpacity, .Grid .OverOpacityGroup a { opacity: 1; transition: opacity 0.15s ease-out; } #Header .OverOpacity:hover, #Header .OverOpacityGroup a:hover, #Footer .OverOpacity:hover, #Footer .OverOpacityGroup a:hover, #aside .OverOpacity:hover, #aside .OverOpacityGroup a:hover, .Grid .OverOpacity:hover, .Grid .OverOpacityGroup a:hover { opacity: 0.3; } } #Header .inner, #Footer .inner, #aside .inner, .Grid .inner { max-width: 1600px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 80px; padding-right: 80px; box-sizing: border-box; } @media screen and (min-width: 1600px) { #Header .inner, #Footer .inner, #aside .inner, .Grid .inner { margin-left: auto; margin-right: auto; padding-left: 80px; padding-right: 80px; } } @media screen and (max-width: 743px) { #Header .inner, #Footer .inner, #aside .inner, .Grid .inner { max-width: initial; width: 100%; margin-left: 0; margin-right: 0; padding-left: 4.6666666667vw; padding-right: 4.6666666667vw; } } #Header .innerNarrow, #Footer .innerNarrow, #aside .innerNarrow, .Grid .innerNarrow { max-width: 720px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 743px) { #Header .innerNarrow, #Footer .innerNarrow, #aside .innerNarrow, .Grid .innerNarrow { max-width: initial; width: 100%; margin-left: 0; margin-right: 0; padding-left: 4.6666666667vw; padding-right: 4.6666666667vw; } } #Header img, #Footer img, #aside img, .Grid img { max-width: 100%; height: auto; vertical-align: top; } #Header br.pc, #Footer br.pc, #aside br.pc, .Grid br.pc { display: block; } #Header br.pc.sp, #Footer br.pc.sp, #aside br.pc.sp, .Grid br.pc.sp { display: block; } #Header br.tab, #Footer br.tab, #aside br.tab, .Grid br.tab { display: none; } #Header br.tab.pc, #Footer br.tab.pc, #aside br.tab.pc, .Grid br.tab.pc { display: block; } #Header br.tab.sp, #Footer br.tab.sp, #aside br.tab.sp, .Grid br.tab.sp { display: none; } #Header br.sp, #Footer br.sp, #aside br.sp, .Grid br.sp { display: none; } @media screen and (max-width: 743px) { #Header br.pc, #Footer br.pc, #aside br.pc, .Grid br.pc { display: none; } #Header br.tab, #Footer br.tab, #aside br.tab, .Grid br.tab { display: none; } #Header br.tab.pc, #Footer br.tab.pc, #aside br.tab.pc, .Grid br.tab.pc { display: none; } #Header br.tab.sp, #Footer br.tab.sp, #aside br.tab.sp, .Grid br.tab.sp { display: block; } #Header br.sp, #Footer br.sp, #aside br.sp, .Grid br.sp { display: block; } #Header br.sp.pc, #Footer br.sp.pc, #aside br.sp.pc, .Grid br.sp.pc { display: block; } } #Header .taLeft, #Footer .taLeft, #aside .taLeft, .Grid .taLeft { text-align: left !important; } #Header .taCenter, #Footer .taCenter, #aside .taCenter, .Grid .taCenter { text-align: center !important; } #Header .taRight, #Footer .taRight, #aside .taRight, .Grid .taRight { text-align: right !important; } #Header .clearfix:after, #Footer .clearfix:after, #aside .clearfix:after, .Grid .clearfix:after { content: ""; display: block; clear: both; } .hide { display: none; } /*-------------------------------------------> Footer fix */ #siteFrame { display: flex; flex-direction: column; min-height: 100%; } #siteFrame .body { flex: 1 0 auto; } #siteFrame #Footer { margin-top: auto; } .ie11 body, .ie11 #siteFrame { min-height: initial; } .ie11 body #Footer, .ie11 #siteFrame #Footer { margin-top: 0; } /*-------------------------------------------> Header */ #Header { height: 140px; } #Header .fix { width: 100%; height: 140px; display: flex; align-items: center; background: rgba(255, 255, 255, 0); transition: transform 0.3s ease-out; } #Header.fixed .fix { position: fixed; top: 0; left: 0; z-index: 999; background: rgb(255, 255, 255); transform: translate3d(0, 0, 0); } #Header.fixed.footerFixed .fix { transform: translate3d(0, -100%, 0); } @media screen and (max-width: 1024px) { #Header { position: fixed; z-index: 900; top: 0; left: 0; height: 100vh; width: 100vw; pointer-events: none; } #Header .inner { width: 100vw; padding: 0; } #Header .fix { width: auto; height: auto; } #Header.fixed .fix { transform: none; background: none; } #Header.fixed.footerFixed .fix { transform: none; } } #Header #Navi { width: 100%; display: flex; justify-content: flex-start; align-items: center; } #Header #Navi .logo { width: 228px; font-size: 14px; line-height: 1; letter-spacing: 0.1em; margin-right: 1.5em; } #Header #Navi .logo img { max-width: initial; width: 228px; height: 39px; } #Header #Navi .main { width: 100%; flex: 1; align-items: center; font-size: 14px; line-height: 1; letter-spacing: 0.1em; } #Header #Navi .main > li { position: relative; margin-left: 3em; margin-left: 0; } #Header #Navi .main > li:first-child { margin-left: 3em; margin-left: 0; } #Header #Navi .main > li a { color: #000; display: inline-block; padding: 17px 1.5em; } @media screen and (min-width: 1025px) { #Header #Navi .main > li a { transition: all 0.3s ease-out; } #Header #Navi .main > li a:hover { color: #666; } } #Header #Navi .main > li .sub { opacity: 0; pointer-events: none; transition: all 0.3s ease-out; font-size: 12px; line-height: 1; letter-spacing: 0.1em; position: absolute; left: 0.8em; bottom: -34px; justify-content: space-between; align-items: center; } #Header #Navi .main > li .sub li { margin-left: 2em; margin-left: 0; } #Header #Navi .main > li .sub li:first-child { margin-left: 0; } #Header #Navi .main > li .sub li a { color: #000; white-space: nowrap; display: inline-block; padding: 17px 1em; } @media screen and (min-width: 1025px) { #Header #Navi .main > li .sub li a { transition: all 0.3s ease-out; } #Header #Navi .main > li .sub li a:hover { color: #666; } } #Header #Navi .main > li.hmContact { margin-left: auto; } #Header #Navi .main > li.hmContact a { margin-left: 3em; padding-right: 0; } #Header #Navi .main > li.now > a { color: #666; } #Header #Navi .main > li.active > a { color: #666; } #Header #Navi .main > li.active .sub { opacity: 1; pointer-events: auto; } @media screen and (max-width: 1024px) { #Header #Navi { display: block; width: 100vw; height: 100vh; overflow: scroll; overflow-y: scroll; overflow-x: hidden; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi { height: 100%; } } @media screen and (max-width: 1024px) { #Header #Navi::after { content: ""; display: block; width: 100vw; height: 100vh; background: #FFF; position: fixed; top: 0; left: 0; z-index: 910; opacity: 0; transition: opacity 0.15s ease-out; } } @media screen and (max-width: 1024px) { #Header #Navi .logo { position: absolute; top: 0; left: 0; z-index: 990; width: 100%; height: 74px; height: 118px; height: 59px; background: rgba(255, 255, 255, 0); padding-top: 49px; padding-top: 24px; padding-left: 35px; } #Header #Navi .logo a { display: inline-block; width: 362px; height: 26px; width: 270px; height: 20px; width: 135px; height: 10px; pointer-events: auto; background: url(../images/common/logo@sp.svg) no-repeat top left; background-size: 100% 100%; } #Header #Navi .logo a img { display: none; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi .logo { height: 59px; padding-top: 25px; padding-left: 4.6666666667vw; } #Header #Navi .logo a { display: block; margin: auto 0; width: 135px; height: 10px; } } @media screen and (max-width: 1024px) { #Header #Navi .main { display: block; width: auto; text-align: center; position: relative; z-index: 920; font-size: 18px; line-height: 1; letter-spacing: 0.1em; padding-top: 100px; padding-bottom: 120px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease-out; transition-delay: 0.15s; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi .main { font-size: 17.5px; /* legacy */ font-size: 4.6666666667vw; line-height: 1; letter-spacing: 0.1em; padding-top: 25.3333333333vw; padding-bottom: 22.6666666667vw; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li { display: block; position: relative; margin-left: 0; } #Header #Navi .main > li:first-child { margin-left: 0; } #Header #Navi .main > li a { color: #000; display: block; padding-top: 40px; padding-bottom: 20px; pointer-events: none; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi .main > li a { padding-top: 7.3333333333vw; padding-bottom: 4.6666666667vw; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li .sub { display: none; opacity: 1; width: 100%; pointer-events: auto; transition: all 0.3s ease-out; position: relative; left: auto; bottom: auto; font-size: 14px; line-height: 1; letter-spacing: 0.1em; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi .main > li .sub { font-size: 13px; /* legacy */ font-size: 3.4666666667vw; line-height: 1; letter-spacing: 0.1em; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li .sub li { margin-left: 0; } #Header #Navi .main > li .sub li:first-child { margin-left: 0; } #Header #Navi .main > li .sub li a { color: #666; padding-top: 20px; padding-bottom: 20px; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Header #Navi .main > li .sub li a { padding-top: 4.6666666667vw; padding-bottom: 4.6666666667vw; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li.hmContact { margin-left: 0; } #Header #Navi .main > li.hmContact a { margin-left: 0; padding-right: 1.5em; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li.now > a { color: #666; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li.active > a { color: #666; } #Header #Navi .main > li.active .sub { opacity: 1; pointer-events: auto; } } @media screen and (max-width: 1024px) { #Header #Navi .main > li.hmService .sub, #Header #Navi .main > li.hmWorks .sub { display: none; } } @media screen and (max-width: 1024px) { .Scroll #Navi .logo { background: rgba(255, 255, 255, 0.95); } .deviceSP #Navi { height: 100%; } } @media screen and (min-width: 1025px) { #MenuBtn { display: none; } } @media screen and (max-width: 1024px) { #MenuBtn { display: block; position: fixed; top: 17px; top: 30px; top: 15px; right: 35px; z-index: 999; width: 58px; height: 58px; width: 29px; height: 29px; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #MenuBtn { top: 15px; right: 4.6666666667vw; z-index: 999; width: 29px; height: 29px; } } @media screen and (max-width: 1024px) { #MenuBtn a { pointer-events: auto; display: block; width: 58px; height: 58px; width: 29px; height: 29px; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #MenuBtn a { width: 29px; height: 29px; } } @media screen and (max-width: 1024px) { #MenuBtn a .icon { position: relative; width: 40px; height: 58px; width: 38px; width: 19px; height: 29px; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #MenuBtn a .icon { width: 19px; height: 29px; } } @media screen and (max-width: 1024px) { #MenuBtn a .icon span { position: absolute; display: block; background: #000; width: 100%; height: 1px; overflow: hidden; border-radius: 1px; transition: all 0.15s ease-out; top: 50%; left: 50%; } #MenuBtn a .icon span:nth-of-type(1) { transform: translate3d(-50%, -6px, 0); } #MenuBtn a .icon span:nth-of-type(2) { transform: translate3d(-50%, -2px, 0); } #MenuBtn a .icon span:nth-of-type(3) { transform: translate3d(-50%, 2px, 0); } #MenuBtn a .icon span:nth-of-type(4) { transform: translate3d(-50%, 6px, 0); } } @media screen and (max-width: 1024px) and (max-width: 743px) { #MenuBtn a .icon span:nth-of-type(1) { transform: translate3d(-50%, -6px, 0); } #MenuBtn a .icon span:nth-of-type(2) { transform: translate3d(-50%, -2px, 0); } #MenuBtn a .icon span:nth-of-type(3) { transform: translate3d(-50%, 2px, 0); } #MenuBtn a .icon span:nth-of-type(4) { transform: translate3d(-50%, 6px, 0); } } .MClose #Header #Navi::after { transition-delay: 0.15s; } .MClose #Header #Navi .main { transition-delay: 0s; } /* MenuOpen */ .MOpen #Header #Navi { pointer-events: auto; } .MOpen #Header #Navi::after { opacity: 1; } .MOpen #Header #Navi .main { opacity: 1; } .MOpen #Header #Navi .main > li.now .sub { display: block; } .MOpen #Header #Navi .main > li.hmService .sub, .MOpen #Header #Navi .main > li.hmWorks .sub { display: none; } .MOpen #Header #Navi .main a { pointer-events: auto; } .MOpen #Header #MenuBtn a .icon span:nth-of-type(1) { transform: translate3d(-50%, 0, 0) rotate(45deg); } .MOpen #Header #MenuBtn a .icon span:nth-of-type(2) { opacity: 0; } .MOpen #Header #MenuBtn a .icon span:nth-of-type(3) { opacity: 0; } .MOpen #Header #MenuBtn a .icon span:nth-of-type(4) { transform: translate3d(-50%, 0, 0) rotate(-45deg); } /*-------------------------------------------> Footer */ #Footer .menu { max-width: 1600px; margin-top: 150px; margin-left: auto; margin-right: auto; padding-left: 10%; padding-right: 10%; } #Footer .menu .main { justify-content: space-between; align-items: flex-start; font-size: 14px; line-height: 1; letter-spacing: 0.1em; text-align: left; } #Footer .menu .main > li a { display: block; color: #000; } @media screen and (min-width: 1025px) { #Footer .menu .main > li a { transition: all 0.3s ease-out; } #Footer .menu .main > li a:hover { color: #666; } } #Footer .menu .main > li .sub { margin-top: 2em; font-size: 12px; line-height: 1; letter-spacing: 0.1em; } #Footer .menu .main > li .sub li { margin-top: 1em; } #Footer .menu .main > li .sub li a { padding: 0.2em 0; color: #666; } @media screen and (min-width: 1025px) { #Footer .menu .main > li .sub li a { transition: all 0.3s ease-out; } #Footer .menu .main > li .sub li a:hover { color: #000; } } #Footer .inner { margin-top: 195px; margin-top: 95px; } #Footer .inner .flex { height: 100px; height: 200px; justify-content: space-between; align-items: center; } #Footer .inner .copyright { position: relative; font-size: 12px; line-height: 1; letter-spacing: 0.1em; display: flex; align-items: center; } #Footer .inner .copyright a.logo { display: block; width: 64px; height: 39px; background: url(../images/common/logomark.svg) no-repeat left top/100% 100%; margin-right: 55px; text-indent: -9999px; cursor: pointer; } #Footer .inner .sns { margin-left: auto; } #Footer .inner .sns .privacy { font-size: 12px; line-height: 1; letter-spacing: 0.1em; } #Footer .inner .sns .privacy a { color: #000; } @media screen and (min-width: 1025px) { #Footer .inner .sns .privacy a { transition: all 0.3s ease-out; } #Footer .inner .sns .privacy a:hover { color: #666; } } #Footer .inner .sns .privacy a.logo { display: none; } #Footer .inner .sns .icon { margin-left: 20px; } #Footer .inner .sns .icon.instagram { margin-left: 55px; } #Footer .inner .sns .icon a .svg { width: 21px; height: 21px; } #Footer .inner .sns .icon a .svg .fill-snsicon { fill: #7d7d7d; } @media screen and (min-width: 1025px) { #Footer .inner .sns .icon a .svg .fill-snsicon { transition: all 0.3s ease-out; } } @media screen and (min-width: 1025px) { #Footer .inner .sns .icon a:hover .svg .fill-snsicon { fill: #000; } } @media screen and (max-width: 1024px) { #Footer .menu { display: none; } #Footer .inner { margin-top: 330px; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Footer .inner { margin-top: 45.3333333333vw; } } @media screen and (max-width: 1024px) { #Footer .inner .flex { height: auto; flex-direction: column-reverse; } } @media screen and (max-width: 1024px) { #Footer .inner .copyright { margin-top: 150px; margin-bottom: 115px; font-size: 14px; line-height: 1; letter-spacing: 0.1em; color: #000; display: block; text-align: center; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Footer .inner .copyright { margin-top: 14.6666666667vw; margin-bottom: 14.6666666667vw; font-size: 10px; /* legacy */ font-size: 2.6666666667vw; line-height: 1; letter-spacing: 0.1em; } } @media screen and (max-width: 1024px) { #Footer .inner .copyright a.logo { display: none; margin: 0; } } @media screen and (max-width: 1024px) { #Footer .inner .sns { margin-left: auto; margin-right: auto; flex-direction: row; justify-content: center; flex-wrap: wrap; } #Footer .inner .sns .privacy { text-align: center; width: 100%; margin-top: 0; margin-bottom: 110px; font-size: 14px; line-height: 1; letter-spacing: 0.1em; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Footer .inner .sns .privacy { margin-bottom: 14.6666666667vw; font-size: 10px; /* legacy */ font-size: 2.6666666667vw; line-height: 1; letter-spacing: 0.1em; } } @media screen and (max-width: 1024px) { #Footer .inner .sns .privacy a.logo { width: 64px; height: 39px; background: url(../images/common/logomark.svg) no-repeat left top/100% 100%; margin-right: 55px; display: block; margin: 0 auto 14.6666666667vw; text-indent: -9999px; cursor: pointer; } } @media screen and (max-width: 1024px) { #Footer .inner .sns .icon { margin-left: 6px; margin-right: 6px; } #Footer .inner .sns .icon.instagram { margin-left: 6px; } #Footer .inner .sns .icon a { padding: 19px; } #Footer .inner .sns .icon a .svg { width: 19px; height: 19px; } } @media screen and (max-width: 1024px) and (max-width: 743px) { #Footer .inner .sns .icon { margin-left: 2.5066666667vw; margin-right: 2.5066666667vw; } #Footer .inner .sns .icon a { padding: 2.16vw; } #Footer .inner .sns .icon a .svg { width: 5.04vw; height: 5.04vw; } } /*------------------------------------------- Access ------------------------------------------- */ #Access .map { margin-bottom: 105px; } @media screen and (max-width: 743px) { #Access .map { margin-bottom: 14vw; } } #Access .accessBlock { font-size: 14px; line-height: 2; letter-spacing: 0.1em; } #Access .accessBlock + .accessBlock { margin-top: 2em; } #Access .accessBlock .accessTitle { font-weight: 400; } #Access .accessBlock .TelFax p + p { margin-left: 2em; } #Access .accessBlock .TelFax a { color: #000; text-decoration: none; } @media screen and (min-width: 744px) { #Access .accessBlock .TelFax a { pointer-events: none; } } @media screen and (max-width: 743px) { #Access .accessBlock .TelFax p + p { margin-left: 0; } } #Access .accessBlock .train { display: inline; } #Access .accessBlock .train li { display: block; } #Access .accessBlock .mod_linkButton { text-align: center; margin-top: 110px; } @media screen and (max-width: 743px) { #Access .accessBlock { font-size: 14px; /* legacy */ font-size: 3.7333333333vw; line-height: 2; letter-spacing: 0.1em; } #Access .accessBlock .mod_linkButton { margin-top: 14.6666666667vw; } } @media screen and (max-width: 743px) { article { padding-top: 59px; } } #aside .container { margin-left: -15px; margin-right: -15px; } @media screen and (max-width: 743px) { #aside .inner { padding-left: 0; padding-right: 0; } #aside .innerNarrow { padding-left: 15px; padding-right: 15px; } } #aside .mod_linkButton a, #aside .mod_linkButton button { position: relative; display: inline-block; min-width: 212px; background: #ececec; color: #000; font-size: 14px; line-height: 2.7857142857; letter-spacing: 0.1em; text-align: center; cursor: pointer; } #aside .mod_linkButton a span, #aside .mod_linkButton button span { display: block; } @media screen and (min-width: 744px) { #aside .mod_linkButton a, #aside .mod_linkButton button { transition: all 0.3s ease-out; } #aside .mod_linkButton a:hover, #aside .mod_linkButton button:hover { background: #000; color: #FFF; } } @media screen and (max-width: 743px) { #aside .mod_linkButton a, #aside .mod_linkButton button { display: inline-block; margin-left: auto; margin-right: auto; width: auto; min-width: initial; padding: 0 1.5em; font-size: 16px; /* legacy */ font-size: 4.2666666667vw; line-height: 1; letter-spacing: 0.1em; line-height: 2.78; } } @media screen and (max-width: 743px) { #aside .mod_linkButton.ja a, #aside .mod_linkButton.ja button { font-size: 14px; /* legacy */ font-size: 3.7333333333vw; line-height: 1; letter-spacing: 0.1em; line-height: 2.78; } } #aside .contact { padding: 5% 0 3%; } #aside .contact .row { padding: 3% 0; } @media screen and (max-width: 743px) { #aside .contact { padding-top: 10%; } #aside .contact .sec_title img { width: 150px; } #aside .contact .contact-row { margin-left: 30px; margin-right: 30px; } #aside .contact .contact-row img { width: 170px; } #aside .contact .contact-row .btn-contact img { width: 100%; } } #aside #Access .aboutMessage { line-height: 1.83; letter-spacing: 0.06em; padding: 5% 0; } #aside #Access .aboutMessage p + p { margin: 1.83em 0; } @media screen and (max-width: 743px) { #aside #Access .aboutMessage { margin-left: -15px; margin-right: -15px; } } #aside #Access .accessBlock .mod_linkButton { margin-top: 60px; } @media screen and (max-width: 743px) { #aside #Access .accessBlock { font-size: 13px; line-height: 180%; } #aside #Access .accessBlock .address { margin: 0; } #aside #Access .accessBlock .TelFax p { margin: 0; } #aside #Access .accessBlock .mod_linkButton { margin-top: 8vw; } } #aside #Access .accessTitle { font-size: inherit; line-height: inherit; } @media screen and (max-width: 743px) { #aside #Access h2.sec_title { margin-bottom: 20px; } #aside #Access h2.sec_title img { width: 110px; } } #aside .whatsnew { padding-top: 45px; background-color: #0ba95f !important; color: #fff !important; } #aside .whatsnew .sec_title { margin-bottom: 10px; } #aside #WhatsNew.items { padding: 40px 0 0; } #aside #WhatsNew .item { float: none; width: 33.3333333333%; height: auto; margin: 0 0 84px; } @media screen and (max-width: 743px) { #aside #WhatsNew .item { width: 100%; margin: 0 0 50px; } } #aside #WhatsNew .item .img { margin-bottom: 15px; } #aside #WhatsNew .item .img span { display: block; overflow: hidden; width: 100%; text-align: center; } #aside #WhatsNew .item .img span img { width: 100%; } #aside #WhatsNew .item .meta .title { font-size: 12px; line-height: 1.3333333333; letter-spacing: 0.2em; } #aside #WhatsNew .item .meta .day { font-size: 12px; line-height: 1; letter-spacing: 0.2em; margin-top: 1em; } #aside #WhatsNew .item a { display: block; color: #FFF; padding: 0 30px; } @media screen and (min-width: 1025px) { #aside #WhatsNew .item a .img img { transition: all 0.3s ease-out; } #aside #WhatsNew .item a .meta { color: #FFF; opacity: 1; animation-duration: 0.3s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1); animation-fill-mode: both; } #aside #WhatsNew .item a:hover .img img { opacity: 1; transform: scale3d(1.05, 1.05, 1); } #aside #WhatsNew .item a:hover .meta { animation-name: fadeIn; } } .items.grid { padding: 40px 0 0; } .items.grid .item { float: none; width: 33.3333333333%; height: auto; margin: 0 0 84px; } @media screen and (max-width: 743px) { .items.grid .item { width: 100%; margin: 0 0 50px; } } .items.grid .item .img { margin-bottom: 15px; } .items.grid .item .img span { display: block; overflow: hidden; width: 100%; text-align: center; } .items.grid .item .img span img { width: 100%; } .items.grid .item .meta .title { font-size: 12px; line-height: 1.3333333333; letter-spacing: 0.2em; } .items.grid .item .meta .day { font-size: 12px; line-height: 1; letter-spacing: 0.2em; margin-top: 1em; } .items.grid .item a { display: block; padding: 0 30px; box-sizing: border-box; } @media screen and (min-width: 1025px) { .items.grid .item a .img img { transition: all 0.3s ease-out; } .items.grid .item a .meta { color: #000; opacity: 1; animation-duration: 0.3s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.67, 0, 0.18, 1); animation-fill-mode: both; } .items.grid .item a:hover .img img { opacity: 1; transform: scale3d(1.05, 1.05, 1); } .items.grid .item a:hover .meta { animation-name: fadeIn; } } @media screen and (max-width: 743px) { #cn_cont_3_works .items.grid { width: auto; } } #cn_cont_3_works .items.grid .item { text-align: left; } @media screen and (max-width: 743px) { #cn_cont_3_works .items.grid .item { width: 100%; } #cn_cont_3_works .items.grid .item a { color: #000; } }