@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } main { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; vertical-align: top; } address { font-style: normal; } caption, th, td { font-weight: normal; text-align: left; } a:focus { outline: thin dotted; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } del { color: #333; } ins { background: #fff9c0; text-decoration: none; } hr { border: 0; height: 1px; border-bottom: 1px solid #ccc; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } button { border: none; background: none; display: block; cursor: pointer; } textarea, input { -webkit-box-sizing: border-box; box-sizing: border-box; } sup { top: -0.5em; } sub { bottom: -0.25em; } small { font-size: smaller; } button, a { text-decoration: none; opacity: 1; transition: all 300ms ease; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; } html { /*overflow-y: scroll;*/ font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } img { border: 0px none; margin: 0; padding: 0; border: 0; vertical-align: middle; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; } /* End hide from IE-mac */ form { display: inline; } a:focus, *:focus { outline: none; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @-webkit-keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @-webkit-keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @-webkit-keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @-webkit-keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @-webkit-keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } .i-mail { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M31.985%2C29.625%20L4.151%2C29.625%20C2.105%2C29.625%200.440%2C27.961%200.440%2C25.914%20L0.440%2C4.575%20C0.440%2C2.528%202.105%2C0.864%204.151%2C0.864%20L31.985%2C0.864%20C34.31%2C0.864%2035.696%2C2.528%2035.696%2C4.575%20L35.696%2C25.914%20C35.696%2C27.961%2034.31%2C29.625%2031.985%2C29.625%20ZM33.840%2C4.575%20C33.840%2C3.551%2033.8%2C2.719%2031.985%2C2.719%20L4.151%2C2.719%20C3.128%2C2.719%202.296%2C3.551%202.296%2C4.575%20L2.296%2C25.914%20C2.296%2C26.937%203.128%2C27.770%204.151%2C27.770%20L31.985%2C27.770%20C33.8%2C27.770%2033.840%2C26.937%2033.840%2C25.914%20L33.840%2C4.575%20ZM20.755%2C17.816%20C19.939%2C18.363%2019.4%2C18.637%2018.69%2C18.637%20C17.133%2C18.637%2016.197%2C18.363%2015.381%2C17.815%20L6.560%2C11.934%20C6.133%2C11.650%206.18%2C11.72%206.302%2C10.647%20C6.585%2C10.220%207.160%2C10.106%207.589%2C10.389%20L16.412%2C16.272%20C17.419%2C16.949%2018.718%2C16.946%2019.723%2C16.274%20L28.687%2C10.298%20C29.114%2C10.12%2029.690%2C10.128%2029.973%2C10.554%20C30.258%2C10.980%2030.143%2C11.559%2029.716%2C11.841%20L20.755%2C17.816%20Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 1.2em; height: 1em; display: inline-block; } .-black .i-mail { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M31.985%2C29.625%20L4.151%2C29.625%20C2.105%2C29.625%200.440%2C27.961%200.440%2C25.914%20L0.440%2C4.575%20C0.440%2C2.528%202.105%2C0.864%204.151%2C0.864%20L31.985%2C0.864%20C34.31%2C0.864%2035.696%2C2.528%2035.696%2C4.575%20L35.696%2C25.914%20C35.696%2C27.961%2034.31%2C29.625%2031.985%2C29.625%20ZM33.840%2C4.575%20C33.840%2C3.551%2033.8%2C2.719%2031.985%2C2.719%20L4.151%2C2.719%20C3.128%2C2.719%202.296%2C3.551%202.296%2C4.575%20L2.296%2C25.914%20C2.296%2C26.937%203.128%2C27.770%204.151%2C27.770%20L31.985%2C27.770%20C33.8%2C27.770%2033.840%2C26.937%2033.840%2C25.914%20L33.840%2C4.575%20ZM20.755%2C17.816%20C19.939%2C18.363%2019.4%2C18.637%2018.69%2C18.637%20C17.133%2C18.637%2016.197%2C18.363%2015.381%2C17.815%20L6.560%2C11.934%20C6.133%2C11.650%206.18%2C11.72%206.302%2C10.647%20C6.585%2C10.220%207.160%2C10.106%207.589%2C10.389%20L16.412%2C16.272%20C17.419%2C16.949%2018.718%2C16.946%2019.723%2C16.274%20L28.687%2C10.298%20C29.114%2C10.12%2029.690%2C10.128%2029.973%2C10.554%20C30.258%2C10.980%2030.143%2C11.559%2029.716%2C11.841%20L20.755%2C17.816%20Z%22%2F%3E%3C%2Fsvg%3E"); } .i-tel { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23161616%22%20d%3D%22M29.471%2C19.422%20C29.466%2C19.360%2029.454%2C19.305%2029.437%2C19.247%20C29.421%2C19.194%2029.403%2C19.141%2029.378%2C19.94%20C29.352%2C19.45%2029.322%2C19.2%2029.287%2C18.956%20C29.252%2C18.914%2029.217%2C18.872%2029.173%2C18.834%20C29.133%2C18.799%2029.89%2C18.771%2029.42%2C18.744%20C28.990%2C18.714%2028.938%2C18.690%2028.880%2C18.671%20C28.856%2C18.663%2028.837%2C18.645%2028.811%2C18.639%20L21.27%2C16.862%20C20.737%2C16.794%2020.437%2C16.883%2020.227%2C17.96%20L17.479%2C19.867%20C15.977%2C18.944%2014.581%2C17.853%2013.334%2C16.593%20C12.996%2C16.252%2012.447%2C16.253%2012.109%2C16.598%20C11.772%2C16.944%2011.774%2C17.500%2012.114%2C17.844%20C13.625%2C19.368%2015.330%2C20.680%2017.182%2C21.743%20C17.204%2C21.756%2017.227%2C21.760%2017.250%2C21.771%20C17.273%2C21.782%2017.295%2C21.790%2017.318%2C21.800%20C17.413%2C21.834%2017.509%2C21.856%2017.607%2C21.856%20C17.607%2C21.856%2017.607%2C21.856%2017.607%2C21.856%20L17.607%2C21.856%20C17.608%2C21.856%2017.608%2C21.856%2017.609%2C21.856%20C17.707%2C21.855%2017.802%2C21.834%2017.894%2C21.801%20C17.918%2C21.792%2017.941%2C21.782%2017.964%2C21.771%20C18.57%2C21.729%2018.146%2C21.673%2018.220%2C21.598%20L21.110%2C18.684%20L27.755%2C20.202%20L27.755%2C28.84%20C27.568%2C28.166%2027.210%2C28.247%2026.940%2C28.249%20C13.149%2C27.424%202.592%2C16.736%201.836%2C2.791%20C1.787%2C2.298%201.879%2C1.965%201.925%2C1.893%20L9.745%2C1.893%20L11.240%2C8.656%20L8.395%2C11.651%20C8.63%2C12.2%208.73%2C12.558%208.417%2C12.896%20C8.585%2C13.61%208.802%2C13.145%209.18%2C13.145%20C9.245%2C13.145%209.471%2C13.53%209.641%2C12.873%20L12.810%2C9.538%20C13.12%2C9.324%2013.95%2C9.22%2013.32%2C8.734%20L11.283%2C0.822%20C11.277%2C0.795%2011.259%2C0.775%2011.251%2C0.752%20C11.233%2C0.690%2011.208%2C0.638%2011.179%2C0.584%20C11.152%2C0.536%2011.125%2C0.493%2011.91%2C0.452%20C11.54%2C0.408%2011.13%2C0.370%2010.968%2C0.335%20C10.925%2C0.299%2010.883%2C0.270%2010.834%2C0.244%20C10.787%2C0.218%2010.738%2C0.200%2010.685%2C0.183%20C10.628%2C0.165%2010.572%2C0.152%2010.511%2C0.149%20C10.486%2C0.146%2010.464%2C0.133%2010.438%2C0.133%20L1.779%2C0.133%20C1.752%2C0.133%201.729%2C0.146%201.702%2C0.149%20C1.675%2C0.152%201.650%2C0.143%201.624%2C0.149%20C1.561%2C0.159%201.506%2C0.183%201.446%2C0.201%20C1.445%2C0.202%201.443%2C0.202%201.441%2C0.202%20C0.479%2C0.489%200.29%2C1.518%200.110%2C2.927%20C0.912%2C17.742%2012.153%2C29.129%2026.889%2C30.8%20C28.140%2C30.8%2029.487%2C29.474%2029.487%2C28.300%20L29.487%2C19.498%20C29.487%2C19.471%2029.474%2C19.448%2029.471%2C19.422%20Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 1em; height: 0.8em; display: inline-block; } .-black .i-tel { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M29.471%2C19.422%20C29.466%2C19.360%2029.454%2C19.305%2029.437%2C19.247%20C29.421%2C19.194%2029.403%2C19.141%2029.378%2C19.94%20C29.352%2C19.45%2029.322%2C19.2%2029.287%2C18.956%20C29.252%2C18.914%2029.217%2C18.872%2029.173%2C18.834%20C29.133%2C18.799%2029.89%2C18.771%2029.42%2C18.744%20C28.990%2C18.714%2028.938%2C18.690%2028.880%2C18.671%20C28.856%2C18.663%2028.837%2C18.645%2028.811%2C18.639%20L21.27%2C16.862%20C20.737%2C16.794%2020.437%2C16.883%2020.227%2C17.96%20L17.479%2C19.867%20C15.977%2C18.944%2014.581%2C17.853%2013.334%2C16.593%20C12.996%2C16.252%2012.447%2C16.253%2012.109%2C16.598%20C11.772%2C16.944%2011.774%2C17.500%2012.114%2C17.844%20C13.625%2C19.368%2015.330%2C20.680%2017.182%2C21.743%20C17.204%2C21.756%2017.227%2C21.760%2017.250%2C21.771%20C17.273%2C21.782%2017.295%2C21.790%2017.318%2C21.800%20C17.413%2C21.834%2017.509%2C21.856%2017.607%2C21.856%20C17.607%2C21.856%2017.607%2C21.856%2017.607%2C21.856%20L17.607%2C21.856%20C17.608%2C21.856%2017.608%2C21.856%2017.609%2C21.856%20C17.707%2C21.855%2017.802%2C21.834%2017.894%2C21.801%20C17.918%2C21.792%2017.941%2C21.782%2017.964%2C21.771%20C18.57%2C21.729%2018.146%2C21.673%2018.220%2C21.598%20L21.110%2C18.684%20L27.755%2C20.202%20L27.755%2C28.84%20C27.568%2C28.166%2027.210%2C28.247%2026.940%2C28.249%20C13.149%2C27.424%202.592%2C16.736%201.836%2C2.791%20C1.787%2C2.298%201.879%2C1.965%201.925%2C1.893%20L9.745%2C1.893%20L11.240%2C8.656%20L8.395%2C11.651%20C8.63%2C12.2%208.73%2C12.558%208.417%2C12.896%20C8.585%2C13.61%208.802%2C13.145%209.18%2C13.145%20C9.245%2C13.145%209.471%2C13.53%209.641%2C12.873%20L12.810%2C9.538%20C13.12%2C9.324%2013.95%2C9.22%2013.32%2C8.734%20L11.283%2C0.822%20C11.277%2C0.795%2011.259%2C0.775%2011.251%2C0.752%20C11.233%2C0.690%2011.208%2C0.638%2011.179%2C0.584%20C11.152%2C0.536%2011.125%2C0.493%2011.91%2C0.452%20C11.54%2C0.408%2011.13%2C0.370%2010.968%2C0.335%20C10.925%2C0.299%2010.883%2C0.270%2010.834%2C0.244%20C10.787%2C0.218%2010.738%2C0.200%2010.685%2C0.183%20C10.628%2C0.165%2010.572%2C0.152%2010.511%2C0.149%20C10.486%2C0.146%2010.464%2C0.133%2010.438%2C0.133%20L1.779%2C0.133%20C1.752%2C0.133%201.729%2C0.146%201.702%2C0.149%20C1.675%2C0.152%201.650%2C0.143%201.624%2C0.149%20C1.561%2C0.159%201.506%2C0.183%201.446%2C0.201%20C1.445%2C0.202%201.443%2C0.202%201.441%2C0.202%20C0.479%2C0.489%200.29%2C1.518%200.110%2C2.927%20C0.912%2C17.742%2012.153%2C29.129%2026.889%2C30.8%20C28.140%2C30.8%2029.487%2C29.474%2029.487%2C28.300%20L29.487%2C19.498%20C29.487%2C19.471%2029.474%2C19.448%2029.471%2C19.422%20Z%22%2F%3E%3C%2Fsvg%3E"); } .i-insta { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fab%22%20data-icon%3D%22instagram%22%20class%3D%22svg-inline--fa%20fa-instagram%20fa-w-14%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224.1%20141c-63.6%200-114.9%2051.3-114.9%20114.9s51.3%20114.9%20114.9%20114.9S339%20319.5%20339%20255.9%20287.7%20141%20224.1%20141zm0%20189.6c-41.1%200-74.7-33.5-74.7-74.7s33.5-74.7%2074.7-74.7%2074.7%2033.5%2074.7%2074.7-33.6%2074.7-74.7%2074.7zm146.4-194.3c0%2014.9-12%2026.8-26.8%2026.8-14.9%200-26.8-12-26.8-26.8s12-26.8%2026.8-26.8%2026.8%2012%2026.8%2026.8zm76.1%2027.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9%200-35.8%201.7-67.6%209.9-93.9%2036.1s-34.4%2058-36.2%2093.9c-2.1%2037-2.1%20147.9%200%20184.9%201.7%2035.9%209.9%2067.7%2036.2%2093.9s58%2034.4%2093.9%2036.2c37%202.1%20147.9%202.1%20184.9%200%2035.9-1.7%2067.7-9.9%2093.9-36.2%2026.2-26.2%2034.4-58%2036.2-93.9%202.1-37%202.1-147.8%200-184.8zM398.8%20388c-7.8%2019.6-22.9%2034.7-42.6%2042.6-29.5%2011.7-99.5%209-132.1%209s-102.7%202.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7%209-132.1c7.8-19.6%2022.9-34.7%2042.6-42.6%2029.5-11.7%2099.5-9%20132.1-9s102.7-2.6%20132.1%209c19.6%207.8%2034.7%2022.9%2042.6%2042.6%2011.7%2029.5%209%2099.5%209%20132.1s2.7%20102.7-9%20132.1z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 23px; height: 23px; display: inline-block; } .i-external { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2220px%22%20height%3D%2220px%22%3E%3Cimage%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2220px%22%20height%3D%2220px%22%20xlink%3Ahref%3D%22data%3Aimg%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V%2B0%2FAAAABGdBTUEAALGPC%2FxhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAV1BMVEUAAABBPz1FQkFHQ0JBPz0dFBRIRENNSEYAAABHRENEQkJFQkJFQEAAAAAAAABFQ0FBPz5CPz4bGxshISFHREM9OTlAPj5CPj5GQ0JEPz9DQD9NSUj%2F%2F%2F95ZmvoAAAAGnRSTlMAevb3eRr2eAH3r62nAgOcqakmF%2FVDfHz2dfEDNpkAAAABYktHRBycBEEHAAAAB3RJTUUH6QwTBgYq86%2FneAAAAGdJREFUGNN1z0cSgCAQRNE2BwRzwvvfU4JaDOBfvppFDwAkaUaSypAXIJVxrF6sbQab77JljHWSU1SJqw9QXGLwURl81OajMYwErQEu8sfg7uQCIdI3f3GaSYvGdaPtGsOiKA%2FaqewGXkgIrqwQXDYAAAAASUVORK5CYII%3D%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px; display: inline-block; } .i-consultation { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2079.84%2073.52%22%20style%3D%22enable-background%3Anew%200%200%2079.84%2073.52%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M31.91%2C42.92c0.15%2C0.09%2C0.33%2C0.13%2C0.5%2C0.13c0.17%2C0%2C0.35-0.04%2C0.5-0.14c0.31-0.18%2C0.5-0.51%2C0.5-0.87%20l-0.03-10.91c0-0.36-0.2-0.66-0.49-0.84c-0.15-0.09-0.32-0.16-0.51-0.16c0%2C0%2C0%2C0%2C0%2C0c-0.55%2C0-1%2C0.45-1%2C1l0.02%2C9.17l-7.96-4.56%20c-0.22-0.12-0.47-0.16-0.71-0.11c-7.28%2C1.62-14.68-1.62-18.42-8.07c-4.72-8.12-1.95-18.56%2C6.17-23.27%20c8.12-4.72%2C18.56-1.95%2C23.27%2C6.17c1.33%2C2.29%2C2.08%2C4.81%2C2.26%2C7.37c0.27-0.46%2C0.56-0.9%2C0.87-1.33c0.27-0.37%2C0.54-0.74%2C0.84-1.09%20c-0.4-2.07-1.15-4.08-2.24-5.96C30.21%2C0.4%2C18.54-2.69%2C9.47%2C2.58C0.4%2C7.85-2.69%2C19.52%2C2.58%2C28.59c4.12%2C7.09%2C12.2%2C10.71%2C20.2%2C9.09%20L31.91%2C42.92z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M74.03%2C50.54l-12.95-1.92l-1.81-3.57l-0.97-1.92c1.14-1.39%2C2.11-3.11%2C2.86-5.1c0.24-0.64%2C0.47-1.3%2C0.66-1.99%20c1.62-0.07%2C3-1%2C3.75-2.33c0.35-0.57%2C0.6-1.21%2C0.7-1.92c0.19-1.43%2C0.29-2.91%2C0.29-4.4c0-0.05-0.01-0.1-0.01-0.15%20c-0.08-8.89-7.03-16.1-15.57-16.1c-5.37%2C0-10.12%2C2.85-12.92%2C7.18c-0.39%2C0.6-0.72%2C1.23-1.03%2C1.89c-0.86%2C1.81-1.41%2C3.81-1.57%2C5.92%20c0%2C0.05%2C0%2C0.11-0.01%2C0.17c-0.02%2C0.36-0.05%2C0.72-0.05%2C1.09c0%2C0.05%2C0%2C0.09%2C0.01%2C0.14c0%2C0.44%2C0.03%2C0.87%2C0.05%2C1.31%20c0.04%2C1%2C0.11%2C1.99%2C0.24%2C2.95c0.02%2C0.16%2C0.07%2C0.31%2C0.11%2C0.47c0.02%2C0.1%2C0.04%2C0.2%2C0.07%2C0.3c0.04%2C0.12%2C0.09%2C0.24%2C0.13%2C0.36%20c0.66%2C1.79%2C2.25%2C3.05%2C4.13%2C3.13c0.19%2C0.69%2C0.42%2C1.35%2C0.66%2C1.98c0.75%2C1.99%2C1.73%2C3.72%2C2.86%2C5.11l-0.98%2C1.92l-1.81%2C3.57l-12.96%2C1.92%20c-3.43%2C0.55-6.02%2C3.81-5.78%2C7.27l1.02%2C14.78c0.04%2C0.53%2C0.48%2C0.93%2C1%2C0.93c0.02%2C0%2C0.05%2C0%2C0.07%2C0c0.55-0.04%2C0.97-0.52%2C0.93-1.07%20L24.1%2C57.68c-0.17-2.42%2C1.71-4.78%2C4.09-5.16l12.57-1.86l3.83%2C14.97c0.2%2C0.78%2C0.91%2C1.28%2C1.71%2C1.29c0.81-0.02%2C1.47-0.59%2C1.63-1.39%20l1.91-9.88c0.03-0.15%2C0.02-0.29-0.01-0.44l-1.56-6.08c-0.14-0.54-0.68-0.86-1.22-0.72c-0.54%2C0.14-0.86%2C0.68-0.72%2C1.22l1.5%2C5.86%20l-1.62%2C8.39l-3.64-14.22l1.61-3.17l0.93-1.82c1.74%2C1.53%2C3.74%2C2.38%2C5.86%2C2.38c2.12%2C0%2C4.12-0.85%2C5.86-2.38l0.93%2C1.82l1.61%2C3.16%20l-3.64%2C14.22l-1.62-8.39l1.5-5.86c0.14-0.54-0.19-1.08-0.72-1.22c-0.53-0.14-1.08%2C0.18-1.22%2C0.72l-1.56%2C6.08%20c-0.04%2C0.14-0.04%2C0.29-0.01%2C0.44L54%2C65.52c0.15%2C0.79%2C0.82%2C1.36%2C1.63%2C1.39c0.81%2C0.04%2C1.51-0.5%2C1.71-1.29l3.83-14.97l12.56%2C1.86%20c2.43%2C0.39%2C4.27%2C2.71%2C4.1%2C5.16l-1.01%2C14.78c-0.04%2C0.55%2C0.38%2C1.03%2C0.93%2C1.07c0.02%2C0%2C0.05%2C0%2C0.07%2C0c0.52%2C0%2C0.96-0.4%2C1-0.93%20l1.01-14.78C80.06%2C54.35%2C77.47%2C51.09%2C74.03%2C50.54z%20M42.11%2C35.75c-0.09-0.32-0.18-0.64-0.26-0.97c0%2C0%2C0%2C0%2C0%2C0%20c0-0.01-0.01-0.02-0.01-0.04c-0.11-0.43-0.48-0.71-0.9-0.74C40.86%2C34%2C40.79%2C33.99%2C40.71%2C34c-0.11%2C0.02-0.21%2C0.03-0.32%2C0.03%20c-0.03%2C0-0.06%2C0.01-0.09%2C0.01c-0.96%2C0-1.81-0.59-2.28-1.47c-0.01-0.03-0.03-0.05-0.04-0.08c-0.04-0.07-0.06-0.15-0.09-0.22%20c-0.04-0.11-0.09-0.21-0.12-0.33c0-0.02-0.01-0.03-0.01-0.05c-0.04-0.16-0.07-0.33-0.09-0.5c0%2C0%2C0-0.01%2C0-0.01%20c0-0.01-0.01-0.01-0.01-0.02c0%2C0%2C0-0.01%2C0-0.01l0%2C0c-0.11-0.9-0.18-1.83-0.21-2.76c-0.02-0.4-0.04-0.8-0.04-1.2%20c0-0.05%2C0-0.09-0.01-0.13c0.07-7.79%2C6.14-14.11%2C13.58-14.11c6.92%2C0%2C12.64%2C5.46%2C13.47%2C12.49c0.07%2C0.58%2C0.11%2C1.16%2C0.11%2C1.76%20c0%2C0.23-0.02%2C0.45-0.02%2C0.68c-0.56-0.47-1.24-0.81-1.99-0.97c-0.21-0.04-0.43-0.09-0.65-0.1c-0.1%2C0-0.19%2C0.02-0.28%2C0.04%20c-0.01%2C0-0.02%2C0-0.03%2C0c-0.01%2C0-0.02%2C0-0.03%2C0.01c-0.02%2C0.01-0.04%2C0.01-0.07%2C0.02c-0.84%2C0.22-1.71%2C0.36-2.59%2C0.43%20c-0.41%2C0.03-0.81%2C0.05-1.22%2C0.05c-5.28%2C0-10.07-2.74-11.92-6.82c-0.23-0.5-0.82-0.73-1.32-0.5c-0.5%2C0.23-0.73%2C0.82-0.5%2C1.32%20c1.7%2C3.75%2C5.46%2C6.52%2C9.92%2C7.55c0.01%2C0%2C0.02%2C0.01%2C0.03%2C0.01c0.43%2C0.1%2C0.87%2C0.18%2C1.31%2C0.25c0.81%2C0.12%2C1.64%2C0.19%2C2.47%2C0.19%20c0.52%2C0%2C1.04-0.03%2C1.56-0.08c0.27-0.02%2C0.54-0.05%2C0.81-0.09c0.63-0.09%2C1.26-0.21%2C1.87-0.37c0.21%2C0.02%2C0.4%2C0.07%2C0.59%2C0.14%20c0.97%2C0.36%2C1.66%2C1.27%2C1.66%2C2.35c0%2C0.43-0.12%2C0.82-0.3%2C1.18c-0.42%2C0.8-1.26%2C1.35-2.22%2C1.35c-0.03%2C0-0.05-0.01-0.08-0.01%20c-0.11-0.01-0.22-0.02-0.32-0.04c-0.05-0.01-0.1%2C0-0.15%2C0c-0.46%2C0-0.86%2C0.29-0.98%2C0.74c0%2C0.01-0.01%2C0.02-0.01%2C0.03c0%2C0%2C0%2C0%2C0%2C0%20c-0.08%2C0.33-0.17%2C0.65-0.26%2C0.96c-0.19%2C0.66-0.42%2C1.29-0.66%2C1.9c-1.82%2C4.52-4.91%2C7.4-8.19%2C7.4c-3.29%2C0-6.38-2.88-8.19-7.41%20C42.53%2C37.03%2C42.31%2C36.41%2C42.11%2C35.75z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M70.01%2C63.49h-6.55c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h6.55c0.55%2C0%2C1-0.45%2C1-1S70.56%2C63.49%2C70.01%2C63.49z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.77%2C28.88h4.47v-2h-3.47v-6.17h0v-1c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v8.17c0%2C0%2C0%2C0%2C0%2C0v1H11.77z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M18.24%2C19.73v8.15v1h1c0%2C0%2C0%2C0%2C0%2C0h8.47v-9.14c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v7.14h-5.47v-7.15H18.24z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M30.51%2C18.52c0.39-0.39%2C0.39-1.02%2C0-1.41L19.95%2C6.54c-0.19-0.19-0.44-0.29-0.71-0.29s-0.52%2C0.11-0.71%2C0.29%20l-5.76%2C5.76V8.85h-2v5.45l-2.8%2C2.8c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l9.86-9.86%20l9.86%2C9.86C29.49%2C18.91%2C30.12%2C18.91%2C30.51%2C18.52z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 80px; height: 74px; display: inline-block; } .i-research { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2072.73%2074.17%22%20style%3D%22enable-background%3Anew%200%200%2072.73%2074.17%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M32.79%2C15.96c-0.46-0.3-1.08-0.16-1.38%2C0.3l-3.68%2C5.73l-1.87-2.92c-0.3-0.47-0.92-0.6-1.38-0.3%20c-0.46%2C0.3-0.6%2C0.92-0.3%2C1.38l2.71%2C4.23c0.18%2C0.29%2C0.5%2C0.46%2C0.84%2C0.46c0.34%2C0%2C0.66-0.17%2C0.84-0.46l4.52-7.04%20C33.39%2C16.88%2C33.25%2C16.26%2C32.79%2C15.96z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M19.83%2C19.32H7.85c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h11.98c0.55%2C0%2C1-0.45%2C1-1S20.38%2C19.32%2C19.83%2C19.32z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M32.79%2C26.96c-0.46-0.3-1.08-0.16-1.38%2C0.3l-3.68%2C5.73l-1.87-2.92c-0.3-0.46-0.92-0.6-1.38-0.3%20c-0.46%2C0.3-0.6%2C0.92-0.3%2C1.38l2.71%2C4.23c0.18%2C0.29%2C0.5%2C0.46%2C0.84%2C0.46s0.66-0.17%2C0.84-0.46l4.52-7.04%20C33.39%2C27.88%2C33.25%2C27.26%2C32.79%2C26.96z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M19.83%2C30.32H7.85c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h11.98c0.55%2C0%2C1-0.45%2C1-1S20.38%2C30.32%2C19.83%2C30.32z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M25.78%2C55.83h11.4c0.55%2C0%2C1-0.45%2C1-1v-6.44c0-0.55-0.45-1-1-1h-11.4c-0.55%2C0-1%2C0.45-1%2C1v6.44%20C24.78%2C55.39%2C25.22%2C55.83%2C25.78%2C55.83z%20M26.78%2C49.39h9.4v4.44h-9.4V49.39z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M37.18%2C62.59h-11.4c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h11.4c0.55%2C0%2C1-0.45%2C1-1S37.73%2C62.59%2C37.18%2C62.59z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M56.93%2C62.59h-11.4c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h11.4c0.55%2C0%2C1-0.45%2C1-1S57.48%2C62.59%2C56.93%2C62.59z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M56.93%2C47.39h-6.44c-0.55%2C0-1%2C0.45-1%2C1v6.44c0%2C0.55%2C0.45%2C1%2C1%2C1h6.44c0.55%2C0%2C1-0.45%2C1-1v-6.44%20C57.93%2C47.84%2C57.48%2C47.39%2C56.93%2C47.39z%20M55.93%2C53.83h-4.44v-4.44h4.44V53.83z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M70.22%2C8.4l-5.89-5.89c-0.39-0.39-1.02-0.39-1.41%2C0L38.55%2C26.88c-0.09%2C0.09-0.16%2C0.2-0.21%2C0.32l-4.36%2C10.25%20c-0.16%2C0.38-0.08%2C0.81%2C0.21%2C1.1c0.19%2C0.19%2C0.45%2C0.29%2C0.71%2C0.29c0.13%2C0%2C0.27-0.03%2C0.39-0.08l10.25-4.36%20c0.12-0.05%2C0.22-0.12%2C0.32-0.21L70.22%2C9.81c0.19-0.19%2C0.29-0.44%2C0.29-0.71S70.41%2C8.58%2C70.22%2C8.4z%20M65.1%2C12.1l-2.18-2.18%20c-0.39-0.39-1.02-0.39-1.41%2C0c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41l2.18%2C2.18L45.14%2C32.06l-2.18-2.18c-0.39-0.39-1.02-0.39-1.41%2C0%20s-0.39%2C1.02%2C0%2C1.41l1.84%2C1.84l-6.6%2C2.81l3.31-7.79L63.63%2C4.63L68.1%2C9.1L65.1%2C12.1z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M2%2C54.06V9.63c0-0.15%2C0.12-0.27%2C0.27-0.27h34.57c0.15%2C0%2C0.26%2C0.12%2C0.26%2C0.27V25.2l2-2V9.63%20c0-1.25-1.02-2.27-2.26-2.27H2.26C1.02%2C7.37%2C0%2C8.38%2C0%2C9.63v44.43c0%2C1.25%2C1.02%2C2.26%2C2.27%2C2.26h14.08v-2H2.26%20C2.12%2C54.32%2C2%2C54.2%2C2%2C54.06z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M61.65%2C41.33h-40.6c-1.49%2C0-2.71%2C1.21-2.71%2C2.71v25.43c0%2C1.49%2C1.22%2C2.71%2C2.71%2C2.71h40.6%20c1.49%2C0%2C2.71-1.21%2C2.71-2.71V44.03C64.36%2C42.54%2C63.15%2C41.33%2C61.65%2C41.33z%20M62.36%2C69.47c0%2C0.39-0.32%2C0.71-0.71%2C0.71h-40.6%20c-0.39%2C0-0.71-0.32-0.71-0.71V44.03c0-0.39%2C0.32-0.71%2C0.71-0.71h40.6c0.39%2C0%2C0.71%2C0.32%2C0.71%2C0.71V69.47z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M6.85%2C42.33c0%2C0.55%2C0.45%2C1%2C1%2C1h8.57c0.11-0.74%2C0.39-1.42%2C0.8-2H7.85C7.29%2C41.33%2C6.85%2C41.77%2C6.85%2C42.33z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 73px; height: 75px; display: inline-block; } .i-document { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2074.23%2062.09%22%20style%3D%22enable-background%3Anew%200%200%2074.23%2062.09%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M47.47%2C60.09H2V2h45.47v19.12l2-2V1c0-0.55-0.45-1-1-1H1C0.45%2C0%2C0%2C0.45%2C0%2C1v60.09c0%2C0.55%2C0.45%2C1%2C1%2C1h47.47%20c0.55%2C0%2C1-0.45%2C1-1V41.77l-2%2C2V60.09z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M29.99%2C38.68c0.05-0.07%2C0.1-0.12%2C0.15-0.19c0.06-0.07%2C0.11-0.15%2C0.18-0.22l1.38-1.38H12.01c-0.55%2C0-1%2C0.45-1%2C1%20s0.45%2C1%2C1%2C1h17.85C29.9%2C38.82%2C29.94%2C38.75%2C29.99%2C38.68z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M27.58%2C44.12H12.01c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h14.71L27.58%2C44.12z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M12.01%2C51.35c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h12.5c-0.21-0.64-0.21-1.34%2C0.01-2H12.01z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M72.01%2C15.69c0-0.27-0.11-0.52-0.29-0.71L64.94%2C8.2c-0.39-0.39-1.02-0.39-1.41%2C0l-5.08%2C5.08c0%2C0%2C0%2C0%2C0%2C0%20s0%2C0%2C0%2C0L31.88%2C39.84c-0.09%2C0.09-0.16%2C0.2-0.21%2C0.32l-5.02%2C11.8c-0.16%2C0.38-0.08%2C0.81%2C0.21%2C1.1c0.19%2C0.19%2C0.45%2C0.29%2C0.71%2C0.29%20c0.13%2C0%2C0.27-0.03%2C0.39-0.08l11.8-5.02c0.12-0.05%2C0.22-0.12%2C0.32-0.21l25.85-25.85l2.17%2C2.17L56.37%2C36.09%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l12.44-12.44c0.19-0.19%2C0.29-0.44%2C0.29-0.71%20s-0.11-0.52-0.29-0.71l-2.88-2.88l4.38-4.38C71.91%2C16.21%2C72.01%2C15.95%2C72.01%2C15.69z%20M38.8%2C46.48l-9.34%2C3.98l3.98-9.34l25.71-25.71%20l5.37%2C5.37L38.8%2C46.48z%20M65.93%2C19.36l-5.37-5.37l3.67-3.67l5.37%2C5.37L65.93%2C19.36z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M34.34%2C21.29c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v8.38h-6.6v-8.23h-2v10.23h1c0%2C0%2C0%2C0%2C0%2C0h9.6V21.29z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M17.13%2C21.26c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v1.15v8.25v1h6.15v-2h-4.15v-7.25V21.26z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M36.91%2C20.06c0.26%2C0%2C0.51-0.1%2C0.71-0.29c0.39-0.39%2C0.39-1.02%2C0-1.41L25.44%2C6.19C25.26%2C6%2C25%2C5.89%2C24.74%2C5.89%20S24.22%2C6%2C24.03%2C6.19l-6.9%2C6.9V8.74h-2v6.34l-3.27%2C3.27c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41s1.02%2C0.39%2C1.41%2C0L24.74%2C8.31L36.2%2C19.77%20C36.39%2C19.97%2C36.65%2C20.06%2C36.91%2C20.06z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 75px; height: 63px; display: inline-block; } .i-activities { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2069.12%2059.86%22%20style%3D%22enable-background%3Anew%200%200%2069.12%2059.86%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M46.24%2C57.86h-6.23v-6.54h-2v6.54h-6.9v-6.54h-2v6.54h-6.23c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h7.23h8.9h7.23%20c0.55%2C0%2C1-0.45%2C1-1S46.79%2C57.86%2C46.24%2C57.86z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M63.58%2C0H5.54C2.48%2C0%2C0%2C2.48%2C0%2C5.54v38.25c0%2C3.05%2C2.48%2C5.54%2C5.54%2C5.54h58.05c3.05%2C0%2C5.54-2.48%2C5.54-5.54V5.54%20C69.12%2C2.48%2C66.63%2C0%2C63.58%2C0z%20M5.54%2C2h58.05c1.95%2C0%2C3.54%2C1.59%2C3.54%2C3.54v35.24H2V5.54C2%2C3.59%2C3.59%2C2%2C5.54%2C2z%20M63.58%2C47.32H5.54%20C3.59%2C47.32%2C2%2C45.73%2C2%2C43.78v-1.01h65.12v1.01C67.12%2C45.73%2C65.53%2C47.32%2C63.58%2C47.32z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M25.32%2C21.41l-2%2C2v11.44c0%2C0.55%2C0.45%2C1%2C1%2C1h7.25v-2h-6.25V21.41z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M43.81%2C33.85h-6.25v2h7.25c0.55%2C0%2C1-0.45%2C1-1V23.41l-2-2V33.85z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M20.07%2C23.41c0.26%2C0%2C0.51-0.1%2C0.71-0.29L34.56%2C9.33l13.79%2C13.79c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0s0.39-1.02%2C0-1.41%20L35.27%2C7.21c-0.39-0.39-1.02-0.39-1.41%2C0l-8.54%2C8.54v-5.63h-2v7.63l-3.95%2C3.95c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41%20C19.56%2C23.31%2C19.82%2C23.41%2C20.07%2C23.41z%22%2F%3E%20%3Crect%20x%3D%2233.56%22%20y%3D%2225.15%22%20class%3D%22st0%22%20width%3D%222%22%20height%3D%2210.71%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 70px; height: 60px; display: inline-block; } .i-agreement { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2085.44%2058.69%22%20style%3D%22enable-background%3Anew%200%200%2085.44%2058.69%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M85.15%2C22.99c-0.39-0.39-1.02-0.39-1.41%2C0l-5.42%2C5.42L57.03%2C7.12l5.42-5.42c0.39-0.39%2C0.39-1.02%2C0-1.41%20s-1.02-0.39-1.41%2C0l-6.12%2C6.12c-0.19%2C0.19-0.29%2C0.44-0.29%2C0.71s0.11%2C0.52%2C0.29%2C0.71l0.86%2C0.86l-1.74%2C1.73%20c-0.96%2C0.95-2.23%2C1.48-3.59%2C1.48h-8.18c0%2C0-0.01%2C0-0.01%2C0h-7.28c-1.35%2C0-2.62-0.52-3.55-1.44l-1.68-1.83l0.79-0.79%20c0.19-0.19%2C0.29-0.44%2C0.29-0.71s-0.11-0.52-0.29-0.71L24.4%2C0.29c-0.39-0.39-1.02-0.39-1.41%2C0s-0.39%2C1.02%2C0%2C1.41l5.42%2C5.42%20L7.12%2C28.41l-5.42-5.42c-0.39-0.39-1.02-0.39-1.41%2C0s-0.39%2C1.02%2C0%2C1.41l6.12%2C6.12c0.19%2C0.19%2C0.44%2C0.29%2C0.71%2C0.29%20s0.52-0.11%2C0.71-0.29l4.23-4.23l8.01%2C8.01l-1.23%2C1.23c-0.87%2C0.87-1.34%2C2.02-1.34%2C3.24c0%2C1.22%2C0.48%2C2.37%2C1.34%2C3.24%20c0.68%2C0.68%2C1.54%2C1.11%2C2.47%2C1.27c-0.62%2C0.8-0.97%2C1.76-0.97%2C2.79c0%2C1.22%2C0.48%2C2.38%2C1.34%2C3.24c0.87%2C0.87%2C2.02%2C1.34%2C3.24%2C1.34%20c0.54%2C0%2C1.06-0.11%2C1.56-0.29c0.07%2C1.12%2C0.52%2C2.17%2C1.32%2C2.97c0.87%2C0.87%2C2.02%2C1.34%2C3.24%2C1.34c0.54%2C0%2C1.06-0.11%2C1.56-0.29%20c0.06%2C1.08%2C0.49%2C2.14%2C1.31%2C2.97c0.89%2C0.89%2C2.07%2C1.34%2C3.24%2C1.34c1.17%2C0%2C2.35-0.45%2C3.24-1.34l2.02-2.02%20c0.11-0.11%2C0.18-0.23%2C0.28-0.34l2.33%2C2.33c0.89%2C0.89%2C2.07%2C1.34%2C3.24%2C1.34c1.17%2C0%2C2.35-0.45%2C3.24-1.34%20c0.82-0.82%2C1.25-1.89%2C1.31-2.97c0.5%2C0.18%2C1.03%2C0.28%2C1.56%2C0.28c1.17%2C0%2C2.35-0.45%2C3.24-1.34c0.82-0.82%2C1.25-1.89%2C1.31-2.97%20c0.5%2C0.18%2C1.03%2C0.29%2C1.56%2C0.29c1.17%2C0%2C2.35-0.45%2C3.24-1.34c1.65-1.65%2C1.76-4.25%2C0.35-6.05c0.87-0.13%2C1.7-0.51%2C2.37-1.14%20c0.92-0.86%2C1.43-2.02%2C1.45-3.27c0.02-1.25-0.46-2.43-1.34-3.32l-1.19-1.19l8.01-8.01l4.23%2C4.23c0.19%2C0.19%2C0.44%2C0.29%2C0.71%2C0.29%20s0.52-0.11%2C0.71-0.29l6.12-6.12C85.54%2C24.01%2C85.54%2C23.38%2C85.15%2C22.99z%20M19.51%2C38.77c0-0.69%2C0.27-1.34%2C0.76-1.83l1.93-1.93%20c0%2C0%2C0.01%2C0%2C0.01-0.01c0%2C0%2C0-0.01%2C0.01-0.01l2.17-2.17c0.5-0.5%2C1.16-0.75%2C1.83-0.75c0.66%2C0%2C1.32%2C0.25%2C1.83%2C0.75%20c1.01%2C1.01%2C1.01%2C2.65%2C0%2C3.65l-4.11%2C4.11c-0.98%2C0.98-2.68%2C0.98-3.65%2C0C19.77%2C40.11%2C19.51%2C39.46%2C19.51%2C38.77z%20M23.1%2C47.89%20c-0.49-0.49-0.76-1.14-0.76-1.83c0-0.69%2C0.27-1.34%2C0.76-1.83l6.2-6.2c0.49-0.49%2C1.14-0.76%2C1.83-0.76c0.69%2C0%2C1.34%2C0.27%2C1.83%2C0.76%20c0.49%2C0.49%2C0.76%2C1.14%2C0.76%2C1.83c0%2C0.69-0.27%2C1.34-0.76%2C1.83l-6.2%2C6.2C25.78%2C48.87%2C24.08%2C48.87%2C23.1%2C47.89z%20M29.21%2C51.91%20c-0.49-0.49-0.76-1.14-0.76-1.83c0-0.69%2C0.27-1.34%2C0.76-1.83l4.11-4.11c0.5-0.5%2C1.16-0.75%2C1.83-0.75c0.66%2C0%2C1.32%2C0.25%2C1.83%2C0.75%20c1.01%2C1.01%2C1.01%2C2.65%2C0%2C3.65l-1.04%2C1.04c0%2C0-0.01%2C0-0.01%2C0.01l-1.23%2C1.24l-1.83%2C1.83C31.89%2C52.89%2C30.19%2C52.89%2C29.21%2C51.91z%20M38.98%2C55.94c-1.01%2C1-2.65%2C1.01-3.65%2C0c-1.01-1.01-1.01-2.65%2C0-3.65l1.23-1.24l0.79-0.79c0.5-0.5%2C1.16-0.75%2C1.82-0.75%20c0.66%2C0%2C1.32%2C0.25%2C1.83%2C0.75c1.01%2C1.01%2C1.01%2C2.65%2C0%2C3.65L38.98%2C55.94z%20M65.08%2C40.63c-1%2C0.94-2.64%2C0.88-3.65-0.13l-1.25-1.25%20l-4.54-4.54c-0.39-0.39-1.02-0.39-1.41%2C0s-0.39%2C1.02%2C0%2C1.41l2.94%2C2.94c0%2C0%2C0%2C0%2C0%2C0l1.61%2C1.61l3.55%2C3.55c1.01%2C1.01%2C1.01%2C2.65%2C0%2C3.65%20c-1.01%2C1.01-2.65%2C1.01-3.65%2C0l-1.04-1.04c0%2C0%2C0%2C0%2C0%2C0l-2.37-2.37l-4.67-4.67c-0.39-0.39-1.02-0.39-1.41%2C0s-0.39%2C1.02%2C0%2C1.41%20l2.94%2C2.94c0%2C0%2C0%2C0%2C0%2C0l1.74%2C1.74l2.38%2C2.38c1%2C1.01%2C1%2C2.64%2C0%2C3.65c-0.98%2C0.98-2.68%2C0.98-3.65%2C0l-1.04-1.04c0%2C0%2C0%2C0%2C0-0.01%20l-1.01-1.01l-4.99-4.99c-0.39-0.39-1.02-0.39-1.41%2C0s-0.39%2C1.02%2C0%2C1.41l3.98%2C3.98c0%2C0%2C0%2C0%2C0%2C0l1.01%2C1.01l1.02%2C1.02%20c1%2C1.01%2C1%2C2.64%2C0%2C3.65c-1.01%2C1.01-2.65%2C1.01-3.65%2C0l-2.8-2.8c0.33-1.48-0.06-3.1-1.22-4.25c-0.82-0.82-1.89-1.25-2.97-1.31%20c0.58-1.62%2C0.24-3.5-1.05-4.8c-0.82-0.82-1.89-1.25-2.97-1.31c0.18-0.49%2C0.29-1.02%2C0.29-1.56c0-1.22-0.48-2.37-1.34-3.24%20c-0.87-0.87-2.02-1.34-3.24-1.34c-0.14%2C0-0.27%2C0.03-0.41%2C0.04c0.2-1.38-0.21-2.84-1.28-3.9c-1.79-1.79-4.69-1.79-6.48%2C0l-1.41%2C1.41%20c-0.76-1.05-1.17-2.3-1.17-3.62c0-1.66%2C0.65-3.22%2C1.82-4.39c0.39-0.39%2C0.39-1.02%2C0-1.41c-0.39-0.39-1.02-0.39-1.41%2C0%20c-1.55%2C1.55-2.4%2C3.61-2.4%2C5.8c0%2C0.2%2C0.01%2C0.4%2C0.03%2C0.6l-4.93-4.93l14.84-14.84l1.66%2C1.81c1.34%2C1.33%2C3.11%2C2.05%2C4.99%2C2.05h2.54%20l-8.01%2C8.01c-0.65%2C0.65-0.94%2C1.57-0.78%2C2.47c0.16%2C0.9%2C0.74%2C1.67%2C1.56%2C2.05c3.11%2C1.47%2C6.83%2C0.82%2C9.27-1.61l2.69-2.69l6.18-0.03%20c1.18-0.04%2C2.41%2C0.48%2C3.27%2C1.35l13.46%2C13.46c0.5%2C0.5%2C0.77%2C1.17%2C0.76%2C1.87C65.89%2C39.49%2C65.6%2C40.15%2C65.08%2C40.63z%20M63.95%2C32.9%20l-4.39-4.39c1.13-1.44%2C1.74-3.2%2C1.74-5.05c0-2.19-0.85-4.25-2.4-5.8c-0.39-0.39-1.02-0.39-1.41%2C0c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41%20c1.17%2C1.17%2C1.82%2C2.73%2C1.82%2C4.39c0%2C1.32-0.41%2C2.57-1.17%2C3.62l-5.04-5.04c-1.23-1.23-2.93-1.93-4.67-1.93c-0.01%2C0-0.02%2C0-0.03%2C0%20l-6.59%2C0.03c-0.26%2C0-0.52%2C0.11-0.7%2C0.29l-2.98%2C2.98c-1.84%2C1.84-4.65%2C2.32-7%2C1.22c-0.24-0.11-0.4-0.33-0.45-0.59%20c-0.05-0.26%2C0.04-0.52%2C0.23-0.71l8.07-8.07c0.88-0.88%2C2.04-1.36%2C3.28-1.36h2.82c0%2C0%2C0%2C0%2C0%2C0h5.37c1.88%2C0%2C3.66-0.73%2C5-2.05%20l1.75-1.73l14.77%2C14.77L63.95%2C32.9z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M5%2C23.17c0.4%2C0%2C0.78-0.16%2C1.06-0.44c0.28-0.28%2C0.44-0.67%2C0.44-1.06c0-0.1-0.01-0.2-0.03-0.3%20c-0.02-0.09-0.05-0.19-0.08-0.28C6.35%2C21%2C6.3%2C20.91%2C6.25%2C20.83c-0.06-0.08-0.12-0.16-0.19-0.23c-0.55-0.55-1.56-0.55-2.12%2C0%20c-0.07%2C0.07-0.13%2C0.15-0.19%2C0.23C3.7%2C20.91%2C3.65%2C21%2C3.62%2C21.09c-0.04%2C0.09-0.07%2C0.19-0.09%2C0.28c-0.02%2C0.1-0.03%2C0.2-0.03%2C0.3%20c0%2C0.39%2C0.16%2C0.78%2C0.44%2C1.06C4.22%2C23.01%2C4.61%2C23.17%2C5%2C23.17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 86px; height: 59px; display: inline-block; } .i-moving { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2098.94%2051.35%22%20style%3D%22enable-background%3Anew%200%200%2098.94%2051.35%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M76.24%2C13.33c-0.55%2C0-1%2C0.45-1%2C1v11.7c0%2C0.55%2C0.45%2C1%2C1%2C1h15.27c0.55%2C0%2C1-0.45%2C1-1s-0.45-1-1-1H77.24v-10.7%20C77.24%2C13.78%2C76.79%2C13.33%2C76.24%2C13.33z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M95.76%2C19.17l-7.49-9.19c-1.16-1.43-2.89-2.25-4.73-2.25H70.46V3.54c0-1.95-1.59-3.54-3.54-3.54H28.08%20c-1.95%2C0-3.54%2C1.59-3.54%2C3.54v4.19H1c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h24.55c0.55%2C0%2C1-0.45%2C1-1c0-0.02-0.01-0.04-0.01-0.06V3.54%20c0-0.85%2C0.69-1.54%2C1.54-1.54h38.83c0.85%2C0%2C1.54%2C0.69%2C1.54%2C1.54v35.11c0%2C0.55%2C0.45%2C1%2C1%2C1s1-0.45%2C1-1V9.73h13.08%20c1.24%2C0%2C2.4%2C0.55%2C3.18%2C1.51l7.49%2C9.19c1.76%2C2.16%2C2.73%2C4.89%2C2.73%2C7.68v12c0%2C0.85-0.69%2C1.54-1.54%2C1.54h-3.07%20c-0.5-4.32-4.18-7.69-8.63-7.69s-8.13%2C3.37-8.63%2C7.69h-5.61H48.63c-0.5-4.32-4.18-7.69-8.63-7.69c-4.46%2C0-8.13%2C3.37-8.63%2C7.69%20h-3.29c-0.85%2C0-1.54-0.69-1.54-1.54v-9.79h6.5c0.55%2C0%2C1-0.45%2C1-1s-0.45-1-1-1H18.1c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h6.43v9.79%20c0%2C1.95%2C1.59%2C3.54%2C3.54%2C3.54h3.29c0.5%2C4.32%2C4.18%2C7.69%2C8.63%2C7.69c4.45%2C0%2C8.13-3.37%2C8.63-7.69h20.82h5.61%20c0.5%2C4.32%2C4.18%2C7.69%2C8.63%2C7.69s8.13-3.37%2C8.63-7.69h3.07c1.95%2C0%2C3.54-1.59%2C3.54-3.54v-12C98.94%2C24.86%2C97.81%2C21.69%2C95.76%2C19.17z%20M40%2C49.35c-3.69%2C0-6.69-3-6.69-6.69s3-6.69%2C6.69-6.69s6.69%2C3%2C6.69%2C6.69S43.69%2C49.35%2C40%2C49.35z%20M83.7%2C49.35%20c-3.69%2C0-6.69-3-6.69-6.69s3-6.69%2C6.69-6.69s6.69%2C3%2C6.69%2C6.69S87.39%2C49.35%2C83.7%2C49.35z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M31.54%2C22.46c0-0.55-0.45-1-1-1H12.4c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h18.14C31.1%2C23.46%2C31.54%2C23.01%2C31.54%2C22.46%20z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M29.05%2C15.59c0-0.55-0.45-1-1-1H6.7c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h21.34C28.6%2C16.59%2C29.05%2C16.14%2C29.05%2C15.59z%20%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M41.39%2C42.08c-0.04-0.09-0.09-0.17-0.14-0.26c-0.05-0.08-0.12-0.16-0.19-0.22c-0.07-0.07-0.14-0.14-0.22-0.19%20c-0.09-0.05-0.17-0.1-0.26-0.14c-0.09-0.04-0.19-0.07-0.28-0.08c-0.2-0.04-0.4-0.04-0.59%2C0c-0.1%2C0.01-0.19%2C0.04-0.28%2C0.08%20c-0.09%2C0.04-0.18%2C0.09-0.26%2C0.14s-0.16%2C0.12-0.23%2C0.19c-0.07%2C0.06-0.13%2C0.14-0.18%2C0.22c-0.06%2C0.09-0.1%2C0.17-0.14%2C0.26%20s-0.07%2C0.19-0.09%2C0.28c-0.02%2C0.1-0.03%2C0.2-0.03%2C0.3c0%2C0.4%2C0.16%2C0.78%2C0.44%2C1.06c0.14%2C0.14%2C0.31%2C0.25%2C0.49%2C0.32%20c0.18%2C0.08%2C0.37%2C0.12%2C0.57%2C0.12c0.2%2C0%2C0.4-0.04%2C0.58-0.12c0.18-0.07%2C0.34-0.18%2C0.48-0.32c0.15-0.14%2C0.25-0.31%2C0.33-0.49%20c0.08-0.18%2C0.11-0.37%2C0.11-0.57c0-0.1-0.01-0.2-0.03-0.3C41.45%2C42.27%2C41.43%2C42.17%2C41.39%2C42.08z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M85.08%2C42.08c-0.03-0.09-0.08-0.17-0.13-0.26c-0.06-0.08-0.12-0.16-0.19-0.22c-0.35-0.35-0.86-0.51-1.35-0.41%20c-0.1%2C0.01-0.19%2C0.04-0.28%2C0.08s-0.18%2C0.09-0.26%2C0.14c-0.09%2C0.05-0.16%2C0.12-0.23%2C0.19c-0.07%2C0.06-0.13%2C0.14-0.19%2C0.22%20c-0.05%2C0.09-0.1%2C0.17-0.14%2C0.26c-0.03%2C0.09-0.06%2C0.19-0.08%2C0.28c-0.02%2C0.1-0.03%2C0.2-0.03%2C0.3c0%2C0.39%2C0.15%2C0.77%2C0.44%2C1.06%20c0.14%2C0.14%2C0.3%2C0.25%2C0.49%2C0.32c0.18%2C0.08%2C0.37%2C0.12%2C0.57%2C0.12c0.4%2C0%2C0.78-0.16%2C1.06-0.44c0.14-0.14%2C0.25-0.31%2C0.33-0.49%20c0.07-0.18%2C0.11-0.37%2C0.11-0.57c0-0.1-0.01-0.2-0.03-0.3C85.15%2C42.27%2C85.12%2C42.17%2C85.08%2C42.08z%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2253.18%2C28.32%2053.18%2C30.32%2059.48%2C30.32%2059.48%2C21.04%2057.48%2C19.04%2057.48%2C28.32%20%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2240.88%2C21.05%2040.88%2C30.32%2051.18%2C30.32%2051.18%2C19.27%2049.18%2C19.27%2049.18%2C28.32%2042.88%2C28.32%2042.88%2C19.04%20%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M40.88%2C9.29v6.1l-3.15%2C3.15c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0L50.18%2C8.92l11.03%2C11.03%20c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29c0.39-0.39%2C0.39-1.02%2C0-1.41L50.88%2C6.79c-0.38-0.38-1.04-0.38-1.41%2C0l-6.59%2C6.59%20v-4.1H40.88z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 99px; height: 52px; display: inline-block; } .i-money { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2072.3%2047.62%22%20style%3D%22enable-background%3Anew%200%200%2072.3%2047.62%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M31.19%2C42.41c7.52%2C0%2C13.64-6.12%2C13.64-13.64c0-7.52-6.12-13.64-13.64-13.64c-7.52%2C0-13.64%2C6.12-13.64%2C13.64%20C17.55%2C36.29%2C23.67%2C42.41%2C31.19%2C42.41z%20M31.19%2C17.14c6.42%2C0%2C11.64%2C5.22%2C11.64%2C11.64S37.6%2C40.41%2C31.19%2C40.41%20s-11.64-5.22-11.64-11.64S24.77%2C17.14%2C31.19%2C17.14z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M60.02%2C9.92H2.35C1.05%2C9.92%2C0%2C10.98%2C0%2C12.27v32.99c0%2C1.3%2C1.05%2C2.35%2C2.35%2C2.35h57.67c1.3%2C0%2C2.35-1.05%2C2.35-2.35%20V12.27C62.38%2C10.98%2C61.32%2C9.92%2C60.02%2C9.92z%20M2%2C22.53c5.51-0.49%2C9.87-5.02%2C10.1-10.6H50.3c0.48%2C5.34%2C4.74%2C9.59%2C10.07%2C10.07v13.55%20c-5.34%2C0.48-9.59%2C4.74-10.07%2C10.07H12.07C11.59%2C40.28%2C7.34%2C36.03%2C2%2C35.55V22.53z%20M60.38%2C12.27v7.71c-4.23-0.46-7.6-3.83-8.06-8.06%20h7.71C60.22%2C11.92%2C60.38%2C12.08%2C60.38%2C12.27z%20M2.35%2C11.92h7.75c-0.23%2C4.48-3.69%2C8.11-8.1%2C8.6v-8.25C2%2C12.08%2C2.16%2C11.92%2C2.35%2C11.92z%20M2%2C45.27v-7.71c4.23%2C0.46%2C7.6%2C3.83%2C8.06%2C8.06H2.35C2.16%2C45.62%2C2%2C45.46%2C2%2C45.27z%20M60.02%2C45.62h-7.71c0.46-4.23%2C3.83-7.6%2C8.07-8.06%20v7.71C60.38%2C45.46%2C60.22%2C45.62%2C60.02%2C45.62z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M64.69%2C4.96H7.64c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h57.06c0.35%2C0%2C0.64%2C0.29%2C0.64%2C0.64v32.38c0%2C0.55%2C0.45%2C1%2C1%2C1%20s1-0.45%2C1-1V7.61C67.34%2C6.15%2C66.15%2C4.96%2C64.69%2C4.96z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M69.54%2C0H12.6c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h56.94c0.42%2C0%2C0.76%2C0.34%2C0.76%2C0.76v32.26c0%2C0.55%2C0.45%2C1%2C1%2C1%20s1-0.45%2C1-1V2.76C72.3%2C1.24%2C71.06%2C0%2C69.54%2C0z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M26.64%2C31.83c-0.37%2C0-0.58%2C0.22-0.58%2C0.6c0%2C0.13%2C0.05%2C0.57%2C0.58%2C0.57h3.76v2.88c0%2C0.48%2C0.27%2C0.75%2C0.8%2C0.75%20c0.22%2C0%2C0.78%2C0%2C0.78-0.75v-2.88h3.75c0.38%2C0%2C0.58-0.22%2C0.58-0.58c0-0.15-0.03-0.58-0.58-0.58h-3.75v-1.35L32%2C30.43h3.73%20c0.38%2C0%2C0.58-0.23%2C0.58-0.6c0-0.13-0.03-0.57-0.58-0.57h-3.01l3.06-4.98c0.17-0.27%2C0.27-0.42%2C0.27-0.63c0-0.38-0.45-0.68-0.85-0.68%20c-0.32%2C0-0.45%2C0.22-0.62%2C0.52l-3.4%2C5.61l-3.38-5.61c-0.2-0.32-0.32-0.52-0.65-0.52c-0.37%2C0-0.83%2C0.28-0.83%2C0.7%20c0%2C0.2%2C0.1%2C0.37%2C0.27%2C0.62l3.06%2C4.98h-3.01c-0.37%2C0-0.58%2C0.2-0.58%2C0.58c0%2C0.15%2C0.05%2C0.58%2C0.58%2C0.58h3.73l0.03%2C0.05v1.35H26.64z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 73px; height: 48px; display: inline-block; } .i-select { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2080.26%2070.12%22%20style%3D%22enable-background%3Anew%200%200%2080.26%2070.12%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.34%2C6.39h4.07v4.53l2-2V5.39c0-0.55-0.45-1-1-1H8.34c-0.55%2C0-1%2C0.45-1%2C1V17l2-2V6.39z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M47.46%2C26.29c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0s0.39-1.02%2C0-1.41L26.29%2C2.29c-0.01-0.01-0.03-0.02-0.05-0.03%20c-0.39-0.35-0.98-0.35-1.36%2C0.02c0%2C0-0.01%2C0-0.01%2C0.01l0%2C0L2.29%2C24.88l0%2C0c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41%20c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l0%2C0L25.58%2C4.41L47.46%2C26.29z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M28.55%2C47.17H9.34V25.58c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v22.58c0%2C0.55%2C0.45%2C1%2C1%2C1h20.2c0.55%2C0%2C1-0.45%2C1-1%20S29.1%2C47.17%2C28.55%2C47.17z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M37.16%2C37.97c0.26%2C0%2C0.51-0.1%2C0.71-0.29c0.39-0.39%2C0.39-1.02%2C0-1.41l-4.98-4.98c-0.39-0.39-1.02-0.39-1.41%2C0%20s-0.39%2C1.02%2C0%2C1.41l4.98%2C4.98C36.65%2C37.88%2C36.91%2C37.97%2C37.16%2C37.97z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M41.8%2C27.58v6.9c0%2C0.55%2C0.45%2C1%2C1%2C1s1-0.45%2C1-1v-6.9c0-0.55-0.45-1-1-1S41.8%2C27.03%2C41.8%2C27.58z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M47.93%2C37.49c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l4.8-4.8c0.39-0.39%2C0.39-1.02%2C0-1.41%20s-1.02-0.39-1.41%2C0l-4.8%2C4.8C47.54%2C36.47%2C47.54%2C37.1%2C47.93%2C37.49z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M36.53%2C47.47l-5.05%2C5.06c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29%20l5.05-5.06c0.39-0.39%2C0.39-1.02%2C0-1.41C37.56%2C47.08%2C36.92%2C47.08%2C36.53%2C47.47z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M27.79%2C41.62c-0.55%2C0-1%2C0.45-1%2C1c0%2C0.55%2C0.45%2C1%2C1%2C1l7.15%2C0c0.55%2C0%2C1-0.45%2C1-1c0-0.55-0.45-1-1-1L27.79%2C41.62z%22%20%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M75.68%2C44.81l-7.54-7.54c-1.42-1.42-3.66-1.65-5.21-0.54c-0.84%2C0.6-1.41%2C1.5-1.59%2C2.49%20c-1.29-0.58-2.81-0.49-3.95%2C0.33c-0.84%2C0.6-1.4%2C1.49-1.59%2C2.48c-1.29-0.59-2.82-0.5-3.96%2C0.32c-0.75%2C0.54-1.28%2C1.31-1.52%2C2.17%20l-4.52-4.52c-1.42-1.42-3.66-1.65-5.21-0.54c-0.95%2C0.69-1.55%2C1.74-1.65%2C2.9c-0.09%2C1.16%2C0.32%2C2.3%2C1.15%2C3.12l12.86%2C12.87l-2.81-0.5%20c-3.17-0.52-5.58%2C0.39-7.18%2C2.69c0%2C0%2C0%2C0%2C0%2C0c-0.45%2C0.65-0.56%2C1.47-0.3%2C2.23c0.27%2C0.76%2C0.88%2C1.35%2C1.65%2C1.58l17.49%2C5.26%20c1.25%2C0.33%2C2.52%2C0.5%2C3.79%2C0.5c2.84%2C0%2C5.64-0.82%2C8.06-2.41c3.49-2.29%2C5.84-6%2C6.46-10.17C80.78%2C53.02%2C79.13%2C48.26%2C75.68%2C44.81z%20M78.14%2C57.25c-0.54%2C3.66-2.52%2C6.78-5.58%2C8.79c-3.02%2C1.98-6.75%2C2.58-10.2%2C1.66L44.9%2C62.44c-0.22-0.07-0.31-0.25-0.33-0.32%20c-0.03-0.09-0.06-0.26%2C0.05-0.43c1.15-1.66%2C2.81-2.24%2C5.2-1.85l5.93%2C1.05c0.44%2C0.08%2C0.86-0.13%2C1.06-0.52%20c0.2-0.39%2C0.13-0.86-0.18-1.17L41.51%2C44.08c-0.41-0.41-0.61-0.97-0.57-1.54c0.05-0.58%2C0.34-1.09%2C0.82-1.44%20c0.76-0.55%2C1.89-0.4%2C2.62%2C0.33l6.95%2C6.95c0%2C0%2C0%2C0%2C0%2C0l4.2%2C4.2c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0c0.2-0.2%2C0.29-0.45%2C0.29-0.71%20s-0.1-0.51-0.29-0.71l-4.2-4.2c-0.41-0.41-0.61-0.97-0.57-1.54c0.05-0.58%2C0.34-1.09%2C0.82-1.44c0.76-0.55%2C1.88-0.41%2C2.62%2C0.33%20l5.43%2C5.43c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0s0.39-1.02%2C0-1.41l-4.16-4.16c-0.41-0.41-0.61-0.97-0.57-1.54c0.05-0.58%2C0.34-1.09%2C0.82-1.44%20c0.76-0.54%2C1.89-0.41%2C2.62%2C0.33l5.38%2C5.38c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0s0.39-1.02%2C0-1.41l-4.13-4.13c-0.41-0.41-0.61-0.97-0.57-1.54%20c0.05-0.58%2C0.34-1.09%2C0.82-1.44c0.76-0.54%2C1.89-0.4%2C2.62%2C0.33l7.54%2C7.54C77.27%2C49.23%2C78.71%2C53.35%2C78.14%2C57.25z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 81px; height: 71px; display: inline-block; } .i-inspection { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2077.17%2067.92%22%20style%3D%22enable-background%3Anew%200%200%2077.17%2067.92%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.34%2C6.39h4.07v4.52l2-2V5.39c0-0.55-0.45-1-1-1H8.34c-0.55%2C0-1%2C0.45-1%2C1v11.59l2-2V6.39z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M9.05%2C20.93L25.56%2C4.41l1.41%2C1.41l12.02%2C12.02c0.4-0.54%2C0.83-1.05%2C1.29-1.54L28.26%2C4.28l-1.99-1.99%20c-0.09-0.09-0.21-0.17-0.33-0.22c-0.08-0.03-0.16-0.04-0.25-0.05C25.65%2C2.02%2C25.61%2C2%2C25.56%2C2c-0.03%2C0-0.06%2C0.01-0.09%2C0.02%20c-0.1%2C0.01-0.2%2C0.02-0.29%2C0.06c-0.12%2C0.05-0.23%2C0.12-0.33%2C0.22l0%2C0l-9.45%2C9.45l-1.96%2C1.96l-4.11%2C4.11l-2%2C2l-5.05%2C5.05%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29L9.05%2C20.93L9.05%2C20.93z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M29.63%2C46.12c0.61-0.38%2C1.28-0.67%2C2-0.88V31.46c0-0.55-0.45-1-1-1H20.48c-0.55%2C0-1%2C0.45-1%2C1v15.66H9.34V25.56%20c0-0.55-0.45-1-1-1c-0.04%2C0-0.08%2C0.02-0.12%2C0.02c-0.45%2C0.06-0.8%2C0.4-0.85%2C0.85c-0.01%2C0.04-0.02%2C0.08-0.02%2C0.12v22.56%20c0%2C0.55%2C0.45%2C1%2C1%2C1h12.14c0.55%2C0%2C1-0.45%2C1-1V32.46h8.15V46.12z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M69.12%2C58.67h-5.91c-0.55%2C0-1%2C0.45-1%2C1s0.45%2C1%2C1%2C1h5.91c0.55%2C0%2C1-0.45%2C1-1S69.68%2C58.67%2C69.12%2C58.67z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M76.23%2C53.58c0-3.28-2.28-6.12-5.29-6.6l-4.66-0.81V28.04c0-7.11-4.91-13.06-11.43-14.45%20c-0.94-0.2-1.91-0.31-2.91-0.31c-4.01%2C0-7.63%2C1.71-10.24%2C4.44c-0.46%2C0.48-0.88%2C1.01-1.27%2C1.55c-1.77%2C2.45-2.83%2C5.48-2.83%2C8.77%20l0%2C2.82l0.01%2C15.31l-1.9%2C0.33l-2.76%2C0.48c-0.46%2C0.07-0.9%2C0.21-1.32%2C0.38c-0.71%2C0.28-1.34%2C0.69-1.89%2C1.2%20c-1.3%2C1.21-2.09%2C2.97-2.09%2C4.95l-0.2%2C2.82L26.7%2C66.85c-0.04%2C0.55%2C0.38%2C1.03%2C0.93%2C1.07c0.02%2C0%2C0.05%2C0%2C0.07%2C0c0.52%2C0%2C0.96-0.4%2C1-0.93%20l0.74-10.53l0.2-2.88c0-2.42%2C1.45-4.28%2C3.63-4.63l2.77-0.48l6.5-1.13c0.7%2C3.93%2C4.74%2C8.18%2C9.39%2C8.18s8.69-4.24%2C9.39-8.18l9.28%2C1.62%20c2.03%2C0.33%2C3.62%2C2.36%2C3.62%2C4.7l0.94%2C13.34c0.04%2C0.53%2C0.48%2C0.93%2C1%2C0.93c0.02%2C0%2C0.05%2C0%2C0.07%2C0c0.55-0.04%2C0.97-0.52%2C0.93-1.07%20L76.23%2C53.58z%20M39.6%2C30.86l0-2.82c0-7.04%2C5.54-12.76%2C12.34-12.76c0.92%2C0%2C1.82%2C0.11%2C2.69%2C0.31c5.52%2C1.27%2C9.65%2C6.37%2C9.65%2C12.45v17.78%20l-3.35-0.59l-2.88-2.8c2.56-2.88%2C4.21-7.56%2C4.21-12.95c0-0.05-0.02-0.09-0.03-0.13c-0.01-0.04%2C0-0.08-0.01-0.13%20c-0.01-0.02-0.02-0.04-0.03-0.06c-0.02-0.07-0.06-0.13-0.09-0.19c-0.03-0.05-0.06-0.1-0.1-0.15c-0.04-0.05-0.1-0.09-0.15-0.13%20c-0.05-0.04-0.1-0.07-0.15-0.1c-0.06-0.03-0.12-0.05-0.18-0.06c-0.06-0.02-0.12-0.03-0.19-0.04c-0.02%2C0-0.05-0.01-0.07-0.01%20c-0.05%2C0-0.09%2C0.02-0.13%2C0.03c-0.04%2C0.01-0.09%2C0-0.13%2C0.01c-1.13%2C0.3-2.31%2C0.45-3.5%2C0.45c-4.73%2C0-9.01-2.45-10.67-6.1%20c-0.23-0.5-0.82-0.73-1.32-0.5c-0.5%2C0.23-0.73%2C0.82-0.5%2C1.32c1.13%2C2.49%2C3.26%2C4.51%2C5.91%2C5.79c1.97%2C0.95%2C4.23%2C1.49%2C6.58%2C1.49%20c0.92%2C0%2C1.83-0.09%2C2.72-0.24c-0.23%2C4.29-1.6%2C8.02-3.6%2C10.32c-0.46%2C0.53-0.96%2C0.98-1.48%2C1.35c-0.98%2C0.69-2.06%2C1.08-3.19%2C1.08%20c-1.13%2C0-2.21-0.38-3.19-1.08c-0.52-0.37-1.02-0.82-1.48-1.35c-2.2-2.52-3.64-6.76-3.64-11.57v0c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1%20c0%2C5.39%2C1.65%2C10.07%2C4.21%2C12.95c-1.3%2C1.26-2.43%2C2.36-2.88%2C2.8l-3.35%2C0.58L39.6%2C30.86z%20M51.93%2C53.52c-4.09%2C0-7.21-4.06-7.49-6.94%20l2.85-2.76c1.39%2C1.06%2C2.96%2C1.67%2C4.64%2C1.67c1.68%2C0%2C3.25-0.61%2C4.64-1.67l2.85%2C2.77C59.15%2C49.46%2C56.02%2C53.52%2C51.93%2C53.52z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 78px; height: 68px; display: inline-block; } .i-loan { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2064.46%2064.46%22%20style%3D%22enable-background%3Anew%200%200%2064.46%2064.46%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M33.2%2C45.89v-3.48h4.52c0.46%2C0%2C0.7-0.26%2C0.7-0.7c0-0.18-0.04-0.7-0.7-0.7H33.2v-1.63l0.02-0.06h4.5%20c0.46%2C0%2C0.7-0.28%2C0.7-0.72c0-0.16-0.04-0.68-0.7-0.68h-3.64l3.7-6.01c0.2-0.32%2C0.32-0.5%2C0.32-0.76c0-0.46-0.54-0.83-1.03-0.83%20c-0.38%2C0-0.54%2C0.26-0.74%2C0.62l-4.1%2C6.77l-4.08-6.77c-0.24-0.38-0.38-0.62-0.78-0.62c-0.44%2C0-1%2C0.34-1%2C0.84%20c0%2C0.24%2C0.12%2C0.44%2C0.32%2C0.74l3.7%2C6.01h-3.64c-0.44%2C0-0.7%2C0.24-0.7%2C0.7c0%2C0.18%2C0.06%2C0.7%2C0.7%2C0.7h4.5l0.04%2C0.06v1.63h-4.54%20c-0.44%2C0-0.7%2C0.26-0.7%2C0.72c0%2C0.16%2C0.06%2C0.68%2C0.7%2C0.68h4.54v3.48c0%2C0.58%2C0.32%2C0.9%2C0.96%2C0.9C32.51%2C46.8%2C33.2%2C46.8%2C33.2%2C45.89z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M64.17%2C31.52l-7.1-7.1V4.31c0-0.55-0.45-1-1-1h-8.4c-0.55%2C0-1%2C0.45-1%2C1v9.72L32.94%2C0.29%20c-0.1-0.1-0.21-0.17-0.33-0.22c-0.07-0.03-0.15-0.03-0.22-0.04C32.34%2C0.02%2C32.29%2C0%2C32.23%2C0c-0.02%2C0-0.04%2C0.01-0.07%2C0.01%20c-0.11%2C0.01-0.21%2C0.02-0.31%2C0.06c-0.11%2C0.04-0.2%2C0.11-0.29%2C0.19c-0.01%2C0.01-0.03%2C0.01-0.04%2C0.03c0%2C0%2C0%2C0%2C0%2C0L0.29%2C31.52%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41s1.02%2C0.39%2C1.41%2C0L32.23%2C2.41l18.26%2C18.26l12.26%2C12.27c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29c0%2C0%2C0%2C0%2C0%2C0%20s0%2C0%2C0%2C0c0.26%2C0%2C0.51-0.1%2C0.71-0.29C64.56%2C32.55%2C64.56%2C31.91%2C64.17%2C31.52z%20M48.67%2C15.54V5.31h6.4v17.12l-3.4-3.4l-3.09-3.09%20C48.64%2C15.82%2C48.67%2C15.69%2C48.67%2C15.54z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M56.07%2C31.23c-0.55%2C0-1%2C0.45-1%2C1v30.23H9.42V32.23c0-0.55-0.45-1-1-1s-1%2C0.45-1%2C1v31.23c0%2C0.55%2C0.45%2C1%2C1%2C1%20h47.65c0.55%2C0%2C1-0.45%2C1-1V32.23C57.07%2C31.68%2C56.62%2C31.23%2C56.07%2C31.23z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M50.22%2C37.71c0-9.92-8.07-17.99-17.99-17.99c-9.92%2C0-17.99%2C8.07-17.99%2C17.99c0%2C9.92%2C8.07%2C17.99%2C17.99%2C17.99%20C42.15%2C55.7%2C50.22%2C47.63%2C50.22%2C37.71z%20M16.24%2C37.71c0-8.82%2C7.17-15.99%2C15.99-15.99s15.99%2C7.17%2C15.99%2C15.99%20c0%2C8.82-7.17%2C15.99-15.99%2C15.99S16.24%2C46.53%2C16.24%2C37.71z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 65px; height: 65px; display: inline-block; } .i-key { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2078.46%2062.17%22%20style%3D%22enable-background%3Anew%200%200%2078.46%2062.17%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M69.77%2C23.35c-0.05-0.67-0.16-1.33-0.29-1.98c-0.09-0.44-0.2-0.88-0.34-1.31c-0.07%2C0.46-0.16%2C0.92-0.27%2C1.38%20c-0.17%2C0.7-0.38%2C1.39-0.63%2C2.06c-0.14%2C0.37-0.27%2C0.73-0.43%2C1.09c-0.01%2C3.54-1.4%2C6.95-3.91%2C9.46c-3.9%2C3.9-9.7%2C5.01-14.78%2C2.84%20c-0.38-0.16-0.81-0.08-1.1%2C0.21l-2.95%2C2.95h-3.94c-1.03%2C0-1.87%2C0.84-1.87%2C1.87v3.35l-3.35%2C0c-1.03%2C0-1.87%2C0.84-1.87%2C1.87v3.35%20h-3.35c-1.03%2C0-1.87%2C0.84-1.87%2C1.87v3.94l-1.87%2C1.87H20.8v-6.16l20.67-20.67c-0.53-0.4-1.04-0.84-1.53-1.3L19.09%2C50.9%20c-0.19%2C0.19-0.29%2C0.44-0.29%2C0.71v7.57c0%2C0.55%2C0.45%2C1%2C1%2C1h7.57c0.27%2C0%2C0.52-0.11%2C0.71-0.29l2.46-2.46c0.19-0.19%2C0.29-0.44%2C0.29-0.71%20V52.5h4.22c0.55%2C0%2C1-0.45%2C1-1v-4.22l4.22%2C0c0.55%2C0%2C1-0.45%2C1-1v-4.22h4.22c0.27%2C0%2C0.52-0.11%2C0.71-0.29l2.77-2.77%20c5.68%2C2.15%2C12.03%2C0.8%2C16.34-3.52c3.1-3.1%2C4.74-7.39%2C4.49-11.78C69.8%2C23.58%2C69.77%2C23.47%2C69.77%2C23.35z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M54.09%2C13.53c0.11-0.13%2C0.24-0.25%2C0.36-0.38c0.66-0.66%2C1.47-1.25%2C2.41-1.77c0.02-0.01%2C0.05-0.02%2C0.07-0.04%20c-0.41-0.09-0.83-0.13-1.27-0.13c0%2C0%2C0%2C0%2C0%2C0c-2.06%2C0-3.88%2C1.01-5.01%2C2.56c-0.75%2C1.02-1.19%2C2.28-1.19%2C3.64%20c0%2C0.57%2C0.08%2C1.13%2C0.23%2C1.65c0.73%2C2.62%2C3.13%2C4.55%2C5.98%2C4.55c1.62%2C0%2C3.09-0.64%2C4.19-1.66c0.04-0.03%2C0.07-0.07%2C0.1-0.11%20c0.93-0.9%2C1.6-2.08%2C1.82-3.42c0.06-0.33%2C0.09-0.68%2C0.09-1.03c0-0.52-0.07-1.03-0.19-1.51c-0.76%2C0.22-1.39%2C0.47-1.89%2C0.72%20c0.05%2C0.26%2C0.08%2C0.52%2C0.08%2C0.8c0%2C0.08-0.02%2C0.15-0.02%2C0.23c-0.05%2C0.9-0.38%2C1.72-0.91%2C2.38c-0.46%2C0.57-1.06%2C1.03-1.75%2C1.3%20c-0.47%2C0.18-0.98%2C0.29-1.52%2C0.29c-2.09%2C0-3.82-1.54-4.14-3.54c-0.03-0.22-0.07-0.44-0.07-0.66C51.46%2C15.66%2C52.55%2C14.16%2C54.09%2C13.53%20z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M19.92%2C23.48l2.99-2.98l2.99%2C2.99c0.39%2C0.39%2C1.02%2C0.39%2C1.41%2C0l2.99-2.99l2.98%2C2.98%20c0.19%2C0.19%2C0.44%2C0.29%2C0.71%2C0.29h3.05h0.87c0.33%2C0.74%2C0.73%2C1.44%2C1.16%2C2.11c0.76%2C1.17%2C1.67%2C2.21%2C2.69%2C3.12%20c0.73%2C0.64%2C1.52%2C1.21%2C2.36%2C1.71c2.32%2C1.37%2C5%2C2.13%2C7.83%2C2.13c4.39%2C0%2C8.58-1.88%2C11.5-5.15c0.96-1.08%2C1.74-2.29%2C2.36-3.57%20c0.1-0.21%2C0.21-0.42%2C0.3-0.63c0.27-0.62%2C0.48-1.27%2C0.66-1.92c0.12-0.45%2C0.23-0.9%2C0.32-1.35c0.25-1.34%2C0.31-2.71%2C0.2-4.1%20c-0.01-0.16-0.01-0.32-0.03-0.48c-0.01-0.12-0.04-0.23-0.05-0.34c-0.18-0.01-0.35-0.01-0.53-0.01c-0.06%2C0-0.12%2C0-0.18%2C0%20c-0.11%2C0-0.2%2C0.01-0.31%2C0.01c-0.35%2C0.01-0.68%2C0.02-1.01%2C0.04c0.03%2C0.18%2C0.06%2C0.35%2C0.08%2C0.53c0.04%2C0.31%2C0.04%2C0.62%2C0.06%2C0.94%20c0.06%2C1.22-0.04%2C2.42-0.3%2C3.58c-0.49%2C2.2-1.53%2C4.25-3.08%2C5.99c-2.54%2C2.85-6.19%2C4.48-10.01%2C4.48c-3.17%2C0-6.13-1.1-8.46-3%20c-0.93-0.76-1.76-1.64-2.46-2.63c-0.61-0.86-1.13-1.79-1.53-2.8c-0.06-0.15-0.16-0.27-0.27-0.37c-0.18-0.16-0.41-0.26-0.66-0.26%20h-1.34H34.4l-2.79-2.79c-0.73-0.73-1.91-0.73-2.64%2C0l-2.37%2C2.37l-2.37-2.37c-0.73-0.73-1.91-0.73-2.64%2C0l-2.37%2C2.37l-2.37-2.37%20c-0.73-0.73-1.91-0.73-2.64%2C0l-2.79%2C2.79H8.77l-4.35-4.35l4.35-4.35h29.79c0.41%2C0%2C0.78-0.25%2C0.93-0.63%20c2.27-5.67%2C8.12-9.1%2C14.21-8.33c3.53%2C0.45%2C6.66%2C2.33%2C8.78%2C5.02c0.11%2C0.13%2C0.21%2C0.27%2C0.31%2C0.4c0.11-0.02%2C0.22-0.03%2C0.34-0.05%20c0.26-0.03%2C0.52-0.06%2C0.78-0.09c0.37-0.04%2C0.75-0.07%2C1.13-0.09c-2.4-3.84-6.44-6.6-11.09-7.19c-6.76-0.85-13.26%2C2.8-16.04%2C8.94%20H8.35c-0.27%2C0-0.52%2C0.11-0.71%2C0.29l-5.35%2C5.35C2.11%2C16.9%2C2%2C17.16%2C2%2C17.42s0.11%2C0.52%2C0.29%2C0.71l5.35%2C5.35%20c0.19%2C0.19%2C0.44%2C0.29%2C0.71%2C0.29h3.47c0.27%2C0%2C0.52-0.11%2C0.71-0.29l2.99-2.98l2.98%2C2.98C18.89%2C23.87%2C19.53%2C23.87%2C19.92%2C23.48z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M77.7%2C15.2c-1.47-2.07-4.99-3.55-9.44-3.86c-0.57-0.04-1.16-0.07-1.76-0.07c-0.14%2C0-0.28%2C0.01-0.43%2C0.01%20c-0.14%2C0-0.28%2C0.01-0.42%2C0.01c-0.22%2C0.01-0.44%2C0.02-0.66%2C0.03c-0.36%2C0.02-0.72%2C0.05-1.07%2C0.08c-0.42%2C0.04-0.83%2C0.1-1.23%2C0.16%20c-0.29%2C0.05-0.58%2C0.1-0.86%2C0.16c-0.72%2C0.15-1.41%2C0.33-2.04%2C0.55c-0.15%2C0.05-0.3%2C0.11-0.45%2C0.16c-0.81%2C0.3-1.54%2C0.65-2.17%2C1.05%20c-0.01%2C0-0.01%2C0.01-0.02%2C0.01c-1.64%2C1.05-2.61%2C2.4-2.61%2C3.92c0%2C0.75%2C0.24%2C1.47%2C0.7%2C2.13c0.74%2C0.13%2C1.53-0.1%2C2.05-0.66%20c-0.48-0.48-0.74-0.98-0.74-1.47c0-0.9%2C0.88-1.85%2C2.39-2.62c0.24-0.12%2C0.5-0.24%2C0.78-0.35c0.36-0.15%2C0.74-0.28%2C1.15-0.41%20c0.44-0.13%2C0.91-0.25%2C1.4-0.35c0.15-0.03%2C0.29-0.06%2C0.45-0.09c0.64-0.12%2C1.31-0.2%2C2.02-0.26c0.07-0.01%2C0.14-0.01%2C0.22-0.02%20c0.27-0.02%2C0.54-0.03%2C0.82-0.04c0.25-0.01%2C0.49-0.02%2C0.74-0.02c0.1%2C0%2C0.19%2C0.01%2C0.29%2C0.01c0.3%2C0%2C0.59%2C0.01%2C0.88%2C0.02%20c0.42%2C0.02%2C0.82%2C0.06%2C1.21%2C0.1c3.98%2C0.43%2C6.77%2C1.89%2C7.42%2C3.37c0.09%2C0.22%2C0.15%2C0.43%2C0.15%2C0.65c0%2C1.35-1.93%2C2.8-5.03%2C3.58%20c0.14%2C0.65%2C0.24%2C1.32%2C0.3%2C1.99c4.05-0.96%2C6.73-3.04%2C6.73-5.56C78.46%2C16.63%2C78.19%2C15.88%2C77.7%2C15.2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 79px; height: 63px; display: inline-block; } .i-setting { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2077.7%2065.14%22%20style%3D%22enable-background%3Anew%200%200%2077.7%2065.14%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M77.41%2C25.29L54.38%2C2.26c-0.19-0.19-0.44-0.29-0.71-0.29H40.19c-0.27%2C0-0.52%2C0.11-0.71%2C0.29L35.95%2C5.8%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41l11.6%2C11.6l-7.58%2C7.58c0.01%2C0.01%2C0.02%2C0.01%2C0.02%2C0.02l1.39%2C1.39l7.57-7.57l6.29%2C6.29l-7.57%2C7.57%20l1.41%2C1.41l7.57-7.57l9.05%2C9.05c0.19%2C0.19%2C0.44%2C0.29%2C0.71%2C0.29s0.52-0.11%2C0.71-0.29L77.41%2C26.7C77.8%2C26.31%2C77.8%2C25.68%2C77.41%2C25.29z%20M66.42%2C34.86L38.07%2C6.5l2.54-2.54h12.65L75.29%2C26L66.42%2C34.86z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M21.94%2C59.83c-1.74%2C1.74-4.56%2C1.74-6.29%2C0c-0.84-0.84-1.3-1.96-1.3-3.15s0.46-2.31%2C1.3-3.15L27.8%2C41.39%20L26.4%2C40c-0.01-0.01-0.01-0.02-0.02-0.02L14.23%2C52.12c-1.22%2C1.22-1.89%2C2.84-1.89%2C4.56s0.67%2C3.34%2C1.89%2C4.56%20c1.26%2C1.26%2C2.91%2C1.89%2C4.56%2C1.89c1.65%2C0%2C3.3-0.63%2C4.56-1.89L35.5%2C49.1l-1.41-1.41L21.94%2C59.83z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M47.68%2C36.92l-1.41-1.41l-6.29-6.3l-1.39-1.39c-0.01-0.01-0.02-0.01-0.03-0.02c-1.41-1.38-3.68-1.38-5.08%2C0.02%20L20.74%2C15.07c-0.54-0.54-0.87-1.26-0.93-2.02l-0.18-2.33c-0.11-1.37-0.89-2.57-2.09-3.23L7.73%2C2.12C7.34%2C1.91%2C6.86%2C1.98%2C6.54%2C2.29%20L2.29%2C6.54c-0.31%2C0.31-0.38%2C0.8-0.17%2C1.19l5.37%2C9.81c0.66%2C1.2%2C1.86%2C1.98%2C3.23%2C2.09l2.33%2C0.18c0.76%2C0.06%2C1.48%2C0.39%2C2.02%2C0.93%20l12.74%2C12.74c-0.68%2C0.68-1.05%2C1.59-1.05%2C2.55c0%2C0.95%2C0.37%2C1.85%2C1.04%2C2.53c0.01%2C0.01%2C0.01%2C0.02%2C0.02%2C0.03l1.39%2C1.39l6.29%2C6.29%20l1.41%2C1.41l13.05%2C13.05c1.58%2C1.58%2C3.7%2C2.39%2C5.78%2C2.39c1.8%2C0%2C3.58-0.61%2C4.95-1.85c1.57-1.41%2C2.47-3.35%2C2.52-5.46%20c0.06-2.11-0.74-4.09-2.23-5.58L47.68%2C36.92z%20M59.36%2C59.79c-2.18%2C1.96-5.76%2C1.75-7.98-0.47L38.33%2C46.27l-1.41-1.41l-6.29-6.29%20l-1.39-1.39c-0.01-0.01-0.01-0.02-0.02-0.03c-0.29-0.3-0.45-0.7-0.45-1.12c0-0.43%2C0.17-0.84%2C0.47-1.14l0.7-0.7c0%2C0%2C0%2C0%2C0%2C0%20l1.99-1.99l0.27-0.27l1.99-1.99c0%2C0%2C0%2C0%2C0%2C0l0.7-0.7c0.31-0.31%2C0.73-0.47%2C1.14-0.47c0.4%2C0%2C0.8%2C0.15%2C1.12%2C0.45%20c0.01%2C0.01%2C0.02%2C0.01%2C0.03%2C0.02l1.39%2C1.39l6.29%2C6.3l1.41%2C1.41l13.31%2C13.31c1.1%2C1.1%2C1.68%2C2.56%2C1.64%2C4.12%20C61.18%2C57.31%2C60.52%2C58.74%2C59.36%2C59.79z%20M9.24%2C16.58L4.24%2C7.43l3.19-3.19l9.15%2C5.01h0c0.61%2C0.33%2C1%2C0.94%2C1.05%2C1.63l0.18%2C2.33%20c0.09%2C1.24%2C0.63%2C2.4%2C1.51%2C3.28l12.74%2C12.74l-1.41%2C1.41l-0.01%2C0.01l-1.41%2C1.41L16.49%2C19.32c-0.88-0.88-2.04-1.41-3.28-1.51%20l-2.33-0.18C10.18%2C17.58%2C9.58%2C17.19%2C9.24%2C16.58z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M43.01%2C41.59l-1.41-1.41l-5.78-5.78c-0.21-0.21-0.48-0.3-0.75-0.28c-0.24%2C0.01-0.48%2C0.1-0.66%2C0.28%20s-0.27%2C0.42-0.28%2C0.66c-0.01%2C0.27%2C0.08%2C0.54%2C0.28%2C0.75l5.78%2C5.78l1.41%2C1.41L54.9%2C56.32c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29%20s0.51-0.1%2C0.71-0.29c0.39-0.39%2C0.39-1.02%2C0-1.41L43.01%2C41.59z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 89px; height: 75px; display: inline-block; } .i-reform { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2070.03%2070.03%22%20style%3D%22enable-background%3Anew%200%200%2070.03%2070.03%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%232E2D2C%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M70.03%2C25.5c0-0.83-0.32-1.61-0.91-2.19l-3.59-3.59c0%2C0%2C0%2C0%2C0%2C0s0%2C0%2C0%2C0l-5.07-5.07c0%2C0%2C0%2C0%2C0%2C0s0%2C0%2C0%2C0%20l-5.07-5.07c0%2C0%2C0%2C0%2C0%2C0s0%2C0%2C0%2C0l-8.66-8.66c-1.17-1.17-3.22-1.17-4.39%2C0L19.97%2C23.28c-1.19%2C1.19-1.85%2C2.78-1.85%2C4.47l0%2C10.39%20c0%2C1.04-0.46%2C2.03-1.27%2C2.7L4.16%2C51.38c-2.51%2C2.01-3.98%2C4.77-4.14%2C7.77c-0.16%2C2.9%2C0.93%2C5.67%2C3.06%2C7.8c2%2C2%2C4.55%2C3.08%2C7.25%2C3.08%20c0.18%2C0%2C0.37%2C0%2C0.55-0.01c3-0.17%2C5.76-1.63%2C7.76-4.13l10.54-12.71c0.67-0.8%2C1.65-1.27%2C2.7-1.27l10.39%2C0c1.69%2C0%2C3.28-0.66%2C4.47-1.85%20l1.36-1.36l0%2C0l0%2C0l4.81-4.81c0%2C0%2C0%2C0%2C0%2C0s0%2C0%2C0%2C0l16.2-16.2C69.71%2C27.11%2C70.03%2C26.33%2C70.03%2C25.5z%20M47.41%2C46.58L23.45%2C22.62%20l3.4-3.4L50.8%2C43.18L47.41%2C46.58z%20M42.28%2C49.92l-10.39%2C0c-1.64%2C0-3.19%2C0.72-4.24%2C1.99L17.09%2C64.63c-1.65%2C2.06-3.89%2C3.26-6.32%2C3.39%20c-2.32%2C0.13-4.55-0.75-6.28-2.48s-2.61-3.96-2.48-6.28c0.13-2.43%2C1.34-4.67%2C3.41-6.33l12.7-10.54c1.26-1.05%2C1.99-2.59%2C1.99-4.24%20l0-10.39c0-1.16%2C0.45-2.24%2C1.27-3.06l0.66-0.66l23.96%2C23.96l-0.66%2C0.66C44.52%2C49.47%2C43.43%2C49.92%2C42.28%2C49.92z%20M67.71%2C26.28%20C67.71%2C26.28%2C67.71%2C26.28%2C67.71%2C26.28L52.22%2C41.77L28.26%2C17.81L43.75%2C2.32C43.96%2C2.12%2C44.24%2C2%2C44.53%2C2s0.57%2C0.11%2C0.78%2C0.32%20l2.88%2C2.88L35.53%2C17.87c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29L49.61%2C6.62l3.66%2C3.66%20L43%2C20.54c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l10.26-10.26l3.66%2C3.66L45.67%2C28.02%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l12.67-12.67l3.66%2C3.66L53.15%2C30.69%20c-0.39%2C0.39-0.39%2C1.02%2C0%2C1.41c0.2%2C0.2%2C0.45%2C0.29%2C0.71%2C0.29s0.51-0.1%2C0.71-0.29l10.26-10.26l2.88%2C2.88%20c0.21%2C0.21%2C0.32%2C0.49%2C0.32%2C0.78S67.92%2C26.07%2C67.71%2C26.28z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.08%2C54.77c-1.13%2C0-2.19%2C0.44-2.99%2C1.24c-1.65%2C1.65-1.65%2C4.33%2C0%2C5.98c0.82%2C0.82%2C1.91%2C1.23%2C2.99%2C1.23%20c1.08%2C0%2C2.16-0.41%2C2.99-1.24c0.8-0.8%2C1.24-1.86%2C1.24-2.99c0-1.13-0.44-2.19-1.24-2.99S12.21%2C54.77%2C11.08%2C54.77z%20M12.65%2C60.57%20c-0.87%2C0.87-2.28%2C0.87-3.15%2C0c-0.87-0.87-0.87-2.28%2C0-3.15c0.42-0.42%2C0.98-0.65%2C1.57-0.65c0.59%2C0%2C1.15%2C0.23%2C1.57%2C0.65%20s0.65%2C0.98%2C0.65%2C1.57C13.31%2C59.59%2C13.08%2C60.15%2C12.65%2C60.57z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; width: 77px; height: 77px; display: inline-block; } /* ============================== common.scss ================================= */ html { font-size: 62.5%; height: 100%; height: -webkit-fill-availabel; } @media screen and (max-width: 1320px) { .is-drawerActive { position: fixed; width: 100%; height: 100%; } } /* 要素設定*/ body { letter-spacing: 0.13em; font-family: "Noto Sans JP", sans-serif; font-stretch: 50%; font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; line-height: 2; color: #161616; text-align: justify; font-weight: 400; background-color: #fff; color: #161616; position: relative; width: 100%; margin: 0 auto; overflow-x: hidden; min-height: -webkit-fill-availabel; position: relative; } @media screen and (max-width: 880px) { body { font-size: 13px; } } body::before { content: ""; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background-color: #161616; display: block; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.2s; transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.2s; transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.2s; transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.2s, -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.2s; will-change: transform; } body::after { content: ""; position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; background-color: #161616; opacity: 0.5; display: block; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: transform; } body.is-barba::before { -webkit-transform: scaleY(1); transform: scaleY(1); } body.is-barba::after { -webkit-transform: scaleY(1); transform: scaleY(1); } @supports (-webkit-touch-callout: none) { html { height: -webkit-fill-available; } body { min-height: 100vh; min-height: -webkit-fill-availabel; } } button, a { color: inherit; } /* responsive */ .sp-inline, .sp-block { display: none; } @media screen and (max-width: 1180px) { .sp-none { display: none; } .sp-inline { display: inline; } .sp-block { display: block; } } /*--------------------------------------------------------- ヘッダー ---------------------------------------------------------*/ .header .header__logo { -webkit-transition: all 0.5s linear; transition: all 0.5s linear; will-change: top left; position: fixed; z-index: 5; top: 80px; left: 100px; } .scroll .header .header__logo { mix-blend-mode: exclusion; } @media screen and (max-width: 1480px) { .header .header__logo { top: 5vw; left: 5%; } } @media screen and (max-width: 880px) { .header .header__logo { top: 36px; left: 36px; } } .header .header__logo a { display: block; } .header .header__logo .header__logo__img { width: 98px; height: 77px; fill: #fff; -webkit-transition: fill 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: fill 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } @media screen and (max-width: 880px) { .header .header__logo .header__logo__img { width: 58px; height: 45px; } } .is-drawerActive .header .header__logo .header__logo__img { fill: #fff; } .scroll .glob-nav { opacity: 0; pointer-events: none; } .scroll .hamburger { display: block; opacity: 1; pointer-events: auto; } .scroll .header__nav[aria-hidden=false] { pointer-events: auto; } /*--------------------------------------------------------- ハンバーガー ---------------------------------------------------------*/ div[data-barba=wrapper] { position: relative; } *::-webkit-scrollbar { /* Chrome, Safari 対応 */ display: none; } .hamburger { display: block; opacity: 0; pointer-events: none; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: transparent; cursor: pointer; position: fixed; top: 5vw; right: 5%; z-index: 4; width: 62px; height: 62px; margin: auto; outline: none; border-radius: 50%; background-color: #161616; border: 1px solid #161616; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } @media screen and (max-width: 1320px) { .hamburger { display: inline-block; opacity: 1; pointer-events: auto; } } @media screen and (max-width: 880px) { .hamburger { top: 36px; right: 36px; z-index: 4; width: 45px; height: 45px; } } @media (hover: hover) and (pointer: fine) { .hamburger:hover .hamburger__line::before { -webkit-transform: scaleX(1); transform: scaleX(1); } } .hamburger .hamburger__line { position: absolute; top: -6px; right: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 1px; background-color: #fff; -webkit-transition: inherit; transition: inherit; z-index: 4; } .hamburger .hamburger__line::before { position: absolute; display: block; width: 100%; height: 100%; background-color: inherit; content: ""; -webkit-transition: inherit; transition: inherit; top: 6px; -webkit-transform: scaleX(0.7); transform: scaleX(0.7); -webkit-transform-origin: left; transform-origin: left; } @media screen and (max-width: 1320px) { .hamburger .hamburger__line::before { top: 6px; -webkit-transform: scaleX(0.7); transform: scaleX(0.7); -webkit-transform-origin: left; transform-origin: left; } } .hamburger[aria-expanded=true] { mix-blend-mode: inherit; border: 1px solid #fff; } .hamburger[aria-expanded=true] .hamburger__line { top: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .hamburger[aria-expanded=true] .hamburger__line::before { top: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(60deg); transform: rotate(60deg); } .hamburger .hamburger__visuallyHidden { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); margin: -1px; } /*--------------------------------------------------------- ハンバーガーメニュー ---------------------------------------------------------*/ .header__nav { position: fixed; top: 0; right: 0; z-index: 3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; padding: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: padding; background-image: url(/assets/img/front/about.jpg); background-size: cover; background-position: center; } .header__nav .header__nav__list { width: 50%; font-size: 16px; position: fixed; top: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; height: 100%; margin: 0; padding: 125px 16px; background-color: #161616; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); overflow-y: scroll; } @media screen and (max-width: 768px) { .header__nav .header__nav__list { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .header__nav .header__nav__list .header__nav__item { list-style: none; padding: 0; width: 100%; } @media screen and (max-width: 1320px) { .header__nav .header__nav__list .header__nav__item { width: 100%; } } .header__nav .header__nav__list .header__nav__item.-contact { width: 100%; /* width: calc(50% - 10px); max-width: 320px; */ } @media screen and (max-width: 1180px) { .header__nav .header__nav__list .header__nav__item.-contact { width: 100%; margin-top: 36px; } } .header__nav .header__nav__list .header__nav__item.-tel { /* width: calc(50% - 10px); max-width: 320px; */ /* margin-left: 20px; */ } @media screen and (max-width: 1180px) { .header__nav .header__nav__list .header__nav__item.-tel { width: 100%; margin-top: 20px; margin-left: 0; } } .header__nav .header__nav__list .header__nav__item.-tel .c-btn { font-family: "Quicksand", sans-serif; font-size: 18px; padding: 0.6em 1.3em; /* width: calc(50% - 10px); */ max-width: 320px; margin-left: 0px; } .header__nav .header__nav__list .header__nav__item.-contact .c-btn{ /* width: calc(50% - 10px); */ max-width: 320px; margin-left: 0px; } .header__nav .header__nav__list .header__nav__item .c-btn { font-size: 13px; padding: 1.3em; letter-spacing: 0.15em; } .header__nav .header__nav__list .header__nav__item .c-btn .i-mail { margin-right: 1.2em; } .header__nav .header__nav__list .header__nav__item .c-btn .i-tel { margin-right: 0.2em; } .header__nav .header__nav__list .header__nav__item .c-btn .tel__name { font-size: 13px; margin-right: 20px; } .header__nav .header__nav__list .header__nav__item .headline { font-size: 18px; padding: 4.5px 21px; color: #fff; } .header__nav .header__nav__list .header__nav__item .submenu .headline { position: relative; padding: 4.5px 25px; margin-left: 45px; font-size: 16px; } @media screen and (max-width: 768px) { .header__nav .header__nav__list .header__nav__item .submenu .headline { padding: 2.5px 25px; margin-left: 25px; } } .header__nav .header__nav__list .header__nav__item .submenu .headline::before { content: ""; position: absolute; top: 22.5px; left: 0; width: 15px; height: 2px; background-color: #fff; } .header__nav .header__nav__list .header__nav__join { margin: 50px auto 80px; padding: 0; background-color: #e536a5; display: none; width: calc(100% - 20px); } @media screen and (max-width: 1320px) { .header__nav .header__nav__list .header__nav__join { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: calc(60% - 20px); } } @media screen and (max-width: 880px) { .header__nav .header__nav__list .header__nav__join { width: calc(100% - 20px); } } .header__nav .header__nav__list .header__nav__join a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; color: #fff; padding: 14px 20px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 880px) { .header__nav .header__nav__list .header__nav__join a { padding: 44px 20px; } } @media screen and (max-width: 880px) { .header__nav .header__nav__list .header__nav__join .header__nav__join__text { width: calc( 100% - 138px); } } .header__nav .header__nav__list .header__nav__join .header__nav__join__text .subline { font-family: "Oswald", sans-serif; line-height: 1; font-size: 22px; letter-spacing: -0.05em; } .header__nav .header__nav__list .header__nav__join .header__nav__join__text .headline { font-size: 11px; } .header__nav .header__nav__list .header__nav__join .header__nav__join__img { position: relative; display: block; width: 138px; height: 138px; } .header__nav .header__nav__list .header__nav__join .header__nav__join__img svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); fill: #fff; } .header__nav .header__nav__list .header__nav__join .header__nav__join__img svg.base { fill: #E536A5; } .header__nav .header__nav__list .header__nav__join .header__nav__join__img svg.circle { opacity: 0.4; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-name: circle; animation-name: circle; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .header__nav[aria-hidden=false] { opacity: 1; -webkit-transition-delay: 0; transition-delay: 0; } @media screen and (max-width: 1320px) { .header__nav[aria-hidden=false] { pointer-events: auto; } } @media screen and (max-width: 1320px) { .header__nav[aria-hidden=true] { opacity: 0; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; pointer-events: none; } } /*--------------------------------------------------------- グローバルメニュー ---------------------------------------------------------*/ .glob-nav { position: fixed; top: 80px; right: 100px; z-index: 3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: opacity 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: opacity; } @media screen and (max-width: 1480px) { .glob-nav { top: 5vw; right: 5%; } } @media screen and (max-width: 1320px) { .glob-nav { display: none; } } .glob-nav .glob-nav__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-right: 126px; } @media screen and (max-width: 1480px) { .glob-nav .glob-nav__list { margin-right: 64px; } } .glob-nav .glob-nav__list li { letter-spacing: 0.1em; } .glob-nav .glob-nav__list li:not(:first-child) { margin-left: 60px; } @media screen and (max-width: 1480px) { .glob-nav .glob-nav__list li:not(:first-child) { margin-left: 30px; } } .glob-nav .glob-nav__list li a { color: #fff; padding-bottom: 5px; line-height: 1; position: relative; } .glob-nav .glob-nav__list li a::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: #fff; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: left; transform-origin: left; } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__list li a:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } } /* サブメニューのスタイル */ .glob-nav .glob-nav__list li.has-submenu { position: relative; } .glob-nav .glob-nav__list li.has-submenu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; margin-left: 6px; margin-bottom: 2px; vertical-align: middle; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__list li.has-submenu:hover > a::after { /* -webkit-transform: rotate(225deg); transform: rotate(225deg); */ } } .glob-nav .glob-nav__list li.has-submenu .submenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; background-color: #161616; padding: 10px 0; min-width: 180px; z-index: 10; margin-top: 5px; -webkit-transition: opacity 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.4s cubic-bezier(0.55, 0.05, 0.22, 0.99); } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__list li.has-submenu:hover .submenu { opacity: 1; visibility: visible; } } .glob-nav .glob-nav__list li.has-submenu .submenu li { margin-left: 0; padding: 0 20px; } .glob-nav .glob-nav__list li.has-submenu .submenu li a { color: #fff; padding: 8px 0; display: block; } .glob-nav .glob-nav__list li.has-submenu .submenu li a::before { display: none; } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__list li.has-submenu .submenu li a:hover { color: #d7dede; } } .glob-nav .glob-nav__btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; min-width: 330px; } .glob-nav .glob-nav__btns .glob-nav__btns__mail { width: 62px; border: 1px solid #161616; } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__btns .glob-nav__btns__mail:hover .i-mail { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M31.985%2C29.625%20L4.151%2C29.625%20C2.105%2C29.625%200.440%2C27.961%200.440%2C25.914%20L0.440%2C4.575%20C0.440%2C2.528%202.105%2C0.864%204.151%2C0.864%20L31.985%2C0.864%20C34.31%2C0.864%2035.696%2C2.528%2035.696%2C4.575%20L35.696%2C25.914%20C35.696%2C27.961%2034.31%2C29.625%2031.985%2C29.625%20ZM33.840%2C4.575%20C33.840%2C3.551%2033.8%2C2.719%2031.985%2C2.719%20L4.151%2C2.719%20C3.128%2C2.719%202.296%2C3.551%202.296%2C4.575%20L2.296%2C25.914%20C2.296%2C26.937%203.128%2C27.770%204.151%2C27.770%20L31.985%2C27.770%20C33.8%2C27.770%2033.840%2C26.937%2033.840%2C25.914%20L33.840%2C4.575%20ZM20.755%2C17.816%20C19.939%2C18.363%2019.4%2C18.637%2018.69%2C18.637%20C17.133%2C18.637%2016.197%2C18.363%2015.381%2C17.815%20L6.560%2C11.934%20C6.133%2C11.650%206.18%2C11.72%206.302%2C10.647%20C6.585%2C10.220%207.160%2C10.106%207.589%2C10.389%20L16.412%2C16.272%20C17.419%2C16.949%2018.718%2C16.946%2019.723%2C16.274%20L28.687%2C10.298%20C29.114%2C10.12%2029.690%2C10.128%2029.973%2C10.554%20C30.258%2C10.980%2030.143%2C11.559%2029.716%2C11.841%20L20.755%2C17.816%20Z%22%2F%3E%3C%2Fsvg%3E"); } } .glob-nav .glob-nav__btns .glob-nav__btns__tel { font-family: "Quicksand", sans-serif; width: 73%; } @media (hover: hover) and (pointer: fine) { .glob-nav .glob-nav__btns .glob-nav__btns__tel:hover .i-tel { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M29.471%2C19.422%20C29.466%2C19.360%2029.454%2C19.305%2029.437%2C19.247%20C29.421%2C19.194%2029.403%2C19.141%2029.378%2C19.94%20C29.352%2C19.45%2029.322%2C19.2%2029.287%2C18.956%20C29.252%2C18.914%2029.217%2C18.872%2029.173%2C18.834%20C29.133%2C18.799%2029.89%2C18.771%2029.42%2C18.744%20C28.990%2C18.714%2028.938%2C18.690%2028.880%2C18.671%20C28.856%2C18.663%2028.837%2C18.645%2028.811%2C18.639%20L21.27%2C16.862%20C20.737%2C16.794%2020.437%2C16.883%2020.227%2C17.96%20L17.479%2C19.867%20C15.977%2C18.944%2014.581%2C17.853%2013.334%2C16.593%20C12.996%2C16.252%2012.447%2C16.253%2012.109%2C16.598%20C11.772%2C16.944%2011.774%2C17.500%2012.114%2C17.844%20C13.625%2C19.368%2015.330%2C20.680%2017.182%2C21.743%20C17.204%2C21.756%2017.227%2C21.760%2017.250%2C21.771%20C17.273%2C21.782%2017.295%2C21.790%2017.318%2C21.800%20C17.413%2C21.834%2017.509%2C21.856%2017.607%2C21.856%20C17.607%2C21.856%2017.607%2C21.856%2017.607%2C21.856%20L17.607%2C21.856%20C17.608%2C21.856%2017.608%2C21.856%2017.609%2C21.856%20C17.707%2C21.855%2017.802%2C21.834%2017.894%2C21.801%20C17.918%2C21.792%2017.941%2C21.782%2017.964%2C21.771%20C18.57%2C21.729%2018.146%2C21.673%2018.220%2C21.598%20L21.110%2C18.684%20L27.755%2C20.202%20L27.755%2C28.84%20C27.568%2C28.166%2027.210%2C28.247%2026.940%2C28.249%20C13.149%2C27.424%202.592%2C16.736%201.836%2C2.791%20C1.787%2C2.298%201.879%2C1.965%201.925%2C1.893%20L9.745%2C1.893%20L11.240%2C8.656%20L8.395%2C11.651%20C8.63%2C12.2%208.73%2C12.558%208.417%2C12.896%20C8.585%2C13.61%208.802%2C13.145%209.18%2C13.145%20C9.245%2C13.145%209.471%2C13.53%209.641%2C12.873%20L12.810%2C9.538%20C13.12%2C9.324%2013.95%2C9.22%2013.32%2C8.734%20L11.283%2C0.822%20C11.277%2C0.795%2011.259%2C0.775%2011.251%2C0.752%20C11.233%2C0.690%2011.208%2C0.638%2011.179%2C0.584%20C11.152%2C0.536%2011.125%2C0.493%2011.91%2C0.452%20C11.54%2C0.408%2011.13%2C0.370%2010.968%2C0.335%20C10.925%2C0.299%2010.883%2C0.270%2010.834%2C0.244%20C10.787%2C0.218%2010.738%2C0.200%2010.685%2C0.183%20C10.628%2C0.165%2010.572%2C0.152%2010.511%2C0.149%20C10.486%2C0.146%2010.464%2C0.133%2010.438%2C0.133%20L1.779%2C0.133%20C1.752%2C0.133%201.729%2C0.146%201.702%2C0.149%20C1.675%2C0.152%201.650%2C0.143%201.624%2C0.149%20C1.561%2C0.159%201.506%2C0.183%201.446%2C0.201%20C1.445%2C0.202%201.443%2C0.202%201.441%2C0.202%20C0.479%2C0.489%200.29%2C1.518%200.110%2C2.927%20C0.912%2C17.742%2012.153%2C29.129%2026.889%2C30.8%20C28.140%2C30.8%2029.487%2C29.474%2029.487%2C28.300%20L29.487%2C19.498%20C29.487%2C19.471%2029.474%2C19.448%2029.471%2C19.422%20Z%22%2F%3E%3C%2Fsvg%3E"); } } /*--------------------------------------------------------- フッター ---------------------------------------------------------*/ .footer-contact { padding: 0 50px; } @media screen and (max-width: 880px) { .footer-contact { padding: 0 16px; } } .footer-contact .footer-contact__container { background: #161616; color: #fff; width: 100%; padding: 110px 50px 120px; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__container { padding: 48px 20px 50px; } } .footer-contact .footer-contact__text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; letter-spacing: 0.13em; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__text { margin-top: 22px; text-align: center; } } .footer-contact .footer-contact__inner { margin: 70px auto 0; width: 100%; max-width: 700px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__inner { margin: 30px auto 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .footer-contact .footer-contact__inner .footer-contact__inner__tel { /* width: 50%; */ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 50px; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__inner .footer-contact__inner__tel { width: 80%; max-width: 320px; } } .footer-contact .footer-contact__inner .footer-contact__inner__tel .-link { font-family: "Quicksand", sans-serif; font-size: 40px; line-height: 1; letter-spacing: 0.04em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__inner .footer-contact__inner__tel .-link { font-size: 30px; letter-spacing: 0.03em; margin-top: 10px; } } .footer-contact .footer-contact__inner .footer-contact__inner__tel .-link .i-tel { width: 0.6em; height: 0.6em; margin-right: 0.4em; } .footer-contact .footer-contact__inner .footer-contact__inner__mail { width: 100%; color: #161616; margin-top: 30px; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__inner .footer-contact__inner__mail { width: 100%; margin-top: 40px; max-width: 320px; } } .footer-contact .footer-contact__inner .footer-contact__inner__mail .c-btn { /* width: 90%; */ width: 50%; /* margin-left: 10%; */ margin: 0 auto; padding: 1.2em 1em; } @media screen and (max-width: 880px) { .footer-contact .footer-contact__inner .footer-contact__inner__mail .c-btn { width: 100%; margin-left: 0; } } @media (hover: hover) and (pointer: fine) { .footer-contact .footer-contact__inner .footer-contact__inner__mail .c-btn:hover .i-mail { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M31.985%2C29.625%20L4.151%2C29.625%20C2.105%2C29.625%200.440%2C27.961%200.440%2C25.914%20L0.440%2C4.575%20C0.440%2C2.528%202.105%2C0.864%204.151%2C0.864%20L31.985%2C0.864%20C34.31%2C0.864%2035.696%2C2.528%2035.696%2C4.575%20L35.696%2C25.914%20C35.696%2C27.961%2034.31%2C29.625%2031.985%2C29.625%20ZM33.840%2C4.575%20C33.840%2C3.551%2033.8%2C2.719%2031.985%2C2.719%20L4.151%2C2.719%20C3.128%2C2.719%202.296%2C3.551%202.296%2C4.575%20L2.296%2C25.914%20C2.296%2C26.937%203.128%2C27.770%204.151%2C27.770%20L31.985%2C27.770%20C33.8%2C27.770%2033.840%2C26.937%2033.840%2C25.914%20L33.840%2C4.575%20ZM20.755%2C17.816%20C19.939%2C18.363%2019.4%2C18.637%2018.69%2C18.637%20C17.133%2C18.637%2016.197%2C18.363%2015.381%2C17.815%20L6.560%2C11.934%20C6.133%2C11.650%206.18%2C11.72%206.302%2C10.647%20C6.585%2C10.220%207.160%2C10.106%207.589%2C10.389%20L16.412%2C16.272%20C17.419%2C16.949%2018.718%2C16.946%2019.723%2C16.274%20L28.687%2C10.298%20C29.114%2C10.12%2029.690%2C10.128%2029.973%2C10.554%20C30.258%2C10.980%2030.143%2C11.559%2029.716%2C11.841%20L20.755%2C17.816%20Z%22%2F%3E%3C%2Fsvg%3E"); } } .footer-contact .footer-contact__inner .footer-contact__inner__mail .i-mail { margin-right: 1.2em; } .footer { padding: 0; position: relative; width: 100%; overflow: hidden; padding: 120px 0 60px; } @media screen and (max-width: 880px) { .footer { padding: 42px 0 60px; } } .footer .footer__container { width: 100%; max-width: 1920px; padding: 0 50px; } @media screen and (max-width: 880px) { .footer .footer__container { padding: 0 15px; } } .footer .fotter__logo { width: 280px; } @media screen and (max-width: 880px) { .footer .fotter__logo { width: 190px; margin: 0 auto; } } .footer .footer__bottom { margin-top: 22px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1180px) { .footer .footer__bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .footer .footer__bottom__map { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; flex: 1; } @media screen and (max-width: 880px) { .footer .footer__bottom__map { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .footer .footer__bottom__map li { letter-spacing: 0.18em; } @media screen and (max-width: 880px) { .footer .footer__bottom__map li { width: calc(100% / 3); text-align: center; line-height: 3.2; } } .footer .footer__bottom__map li:not(:last-child) { margin-right: 52px; } @media screen and (max-width: 880px) { .footer .footer__bottom__map li:not(:last-child) { margin-right: 0; } } .footer .footer__bottom__map li a { font-size: 14px; } @media screen and (max-width: 880px) { .footer .footer__bottom__map li a { font-size: 11px; } } .footer .footer__bottom__copy { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1180px) { .footer .footer__bottom__copy { margin-top: 28px; } } @media screen and (max-width: 880px) { .footer .footer__bottom__copy { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .footer .footer__bottom__copy .-icon { margin-right: 52px; } @media screen and (max-width: 880px) { .footer .footer__bottom__copy .-icon { margin-right: 0; } } .footer .footer__bottom__copy .-copy { font-size: 12px; font-family: "Oswald", sans-serif; letter-spacing: 0; line-height: 1.7; font-weight: 300; } #luxy { will-change: transform; } /*--------------------------------------------------------- マウスストーカー ---------------------------------------------------------*/ .js-cursor__main { pointer-events: none; position: fixed; top: 0; left: 0; width: 1rem; height: 1rem; background: #333641; border-radius: 50%; z-index: 1001; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; border: 1px solid #333641; } @media screen and (max-width: 1180px) { .js-cursor__main { display: none; } } .is-moved .js-cursor__main { opacity: 1; } .is-outside .js-cursor__main { opacity: 0; } .is-hover .js-cursor__main { width: 5rem; height: 5rem; top: -3.5rem; left: -3.5rem; mix-blend-mode: multiply; } .js-cursor__option { pointer-events: none; position: fixed; top: 0; left: 0; width: 4rem; height: 4rem; border-radius: 50%; background: #ddd; z-index: 1000; -webkit-transition: opacity 0.2s 0.2s, background 0.2s; transition: opacity 0.2s 0.2s, background 0.2s; } .is-moved .js-cursor__option { opacity: 0; } .is-outside .js-cursor__option { opacity: 0; } .is-hover .js-cursor__option { background: #00ffff; } .view-btn { position: relative; font-size: 2rem; font-weight: bold; line-height: 1; padding: 2rem 0; } @media screen and (max-width: 1180px) { .view-btn { font-size: 1.3rem; padding: 1.2rem 0; } } .view-btn::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #161616; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .view-btn:hover { color: #3560b8; } .view-btn:hover::before { -webkit-animation-name: linkborder; animation-name: linkborder; -webkit-animation-delay: cubic-bezier(0.55, 0.05, 0.22, 0.99); animation-delay: cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-animation-duration: 0.65s; animation-duration: 0.65s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .view-btn:hover .view-btn__svg { fill: #3560b8; } .view-btn .view-btn__svg { fill: #161616; } /*--------------------------------------------------------- common-data ---------------------------------------------------------*/ .pagetop { position: fixed; bottom: 0px; right: 46px; width: 100px; height: 100px; z-index: 2; mix-blend-mode: difference; } @media screen and (max-width: 1180px) { .pagetop { bottom: 0px; right: 16px; width: 44px; height: 44px; } } .pagetop::before { content: ""; position: absolute; bottom: 53px; right: 38px; background-color: #fff; width: 65px; height: 5px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media screen and (max-width: 1180px) { .pagetop::before { bottom: 22px; right: 14px; width: 22px; height: 3px; } } .pagetop::after { content: ""; position: absolute; bottom: 53px; right: -5px; background-color: #fff; width: 65px; height: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 1180px) { .pagetop::after { bottom: 22px; right: 0px; width: 22px; height: 3px; } } .pagetop .pagetop__visuallyHidden { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); margin: -1px; } .l-container { max-width: 1920px; padding: 0 50px; margin: 0 auto; } @media screen and (max-width: 768px) { .l-container { padding: 0 36px; } } @media screen and (max-width: 549px) { .l-container { padding: 0 18px; } } .s-container { max-width: 1300px; padding: 0 50px; margin: 0 auto; } @media screen and (max-width: 768px) { .s-container { padding: 0 36px; } } @media screen and (max-width: 549px) { .s-container { padding: 0 18px; } } .c-btn { background: #fff; margin: 0 auto; display: block; border: 1px solid #161616; padding: 14px; border-radius: 3em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #161616; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .c-btn.-black { background: #161616; border: 1px solid #fff; color: #fff; } @media (hover: hover) and (pointer: fine) { .c-btn.-black:hover { background: #fff; color: #161616; border: 1px solid #161616; } } @media (hover: hover) and (pointer: fine) { .c-btn:hover { background: #161616; color: #fff; border: 1px solid #fff; } } .c-btn2 { position: relative; display: inline-block; padding: 0 22px 0 4px; letter-spacing: 0.2em; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M0.0%2C6.999%20L16.0%2C6.999%20L16.0%2C8.999%20L0.0%2C8.999%20L0.0%2C6.999%20Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M9.0%2C0.0%20L9.0%2C16.0%20L7.0%2C16.0%20L7.0%2C0.0%20L9.0%2C0.0%20Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right center; } .c-btn2::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; display: block; width: 100%; height: 1px; background-color: #161616; } .c-headline { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-size: 36px; line-height: 1.5; padding-top: 40px; letter-spacing: 0.2em; font-weight: 400; } @media screen and (max-width: 880px) { .c-headline { font-size: 26px; padding-top: 27px; } } .c-headline::before { content: attr(data-ruby); position: absolute; top: 0; left: 0; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-family: "Oswald", sans-serif; line-height: 1; letter-spacing: 0.1em; text-transform: capitalize; font-size: 18px; font-weight: 400; } @media screen and (max-width: 880px) { .c-headline::before { font-size: 14px; } } .c-headline2 { position: relative; padding: 25px 80px 25px 30px; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 36px; line-height: 1; letter-spacing: 0.22em; display: inline-block; } @media screen and (max-width: 1320px) { .c-headline2 { font-size: 28px; padding: 25px 0; } } @media screen and (max-width: 768px) { .c-headline2 { -ms-writing-mode: initial; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; padding: 0; font-size: 24px; letter-spacing: 0.32em; } } .c-headline2::before { content: attr(data-ruby); display: block; font-family: "Oswald", sans-serif; font-weight: 300; font-size: 16px; letter-spacing: 0.07em; margin-left: 32px; } @media screen and (max-width: 1320px) { .c-headline2::before { font-size: 14px; margin-left: 24px; } } @media screen and (max-width: 768px) { .c-headline2::before { margin-left: 0; } } .c-headline2 span { position: relative; display: inline-block; padding-right: 18px; } @media screen and (max-width: 1320px) { .c-headline2 span { padding-right: 24px; } } @media screen and (max-width: 768px) { .c-headline2 span { padding-top: 16px; padding-right: 0; } } .c-headline2 span::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; display: block; background-color: #161616; } @media screen and (max-width: 768px) { .c-headline2 span::after { width: 100%; height: 0; display: none; } } .c-article { width: calc(100% / 3 - 60px); /* width: calc(calc(100% - 120px) / 3); */ display: block; position: relative; } @media screen and (max-width: 1180px) { .c-article { width: calc(100% / 3 - 30px); } } @media screen and (max-width: 768px) { .c-article { width: calc(100% / 2 - 15px); } } @media (hover: hover) and (pointer: fine) { .c-article:hover .c-article__figure .c-article__figure__img { -webkit-transform: scale(1.1); transform: scale(1.1); } .c-article:hover .c-article__content .c-btn2::before { -webkit-animation: linkborder 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); animation: linkborder 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } } .c-article a { display: block; } .c-article .c-article__figure { position: relative; height: 0; width: 100%; padding-top: 100%; overflow: hidden; } .c-article .c-article__figure .c-article__figure__image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-article .c-article__figure .c-article__figure__img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .c-article .c-article__figure .c-article__figure__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; } .c-article .c-article__figure .c-article__figure__sold { color: #fff; font-size: 32px; font-weight: bold; letter-spacing: 0.1em; font-family: "Oswald", sans-serif; } @media screen and (max-width: 768px) { .c-article .c-article__figure .c-article__figure__sold { font-size: 24px; } } .c-article .c-article__figure .c-article__figure__cat { position: absolute; top: 0; right: 0; z-index: 3; background-color: #161616; color: #fff; line-height: 2.2; padding: 0 10px; font-size: 14px; /* -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; */ /* text-orientation: sideways; */ } .c-article .c-article__figure .c-article__figure__cat__item { display: inline-block; } .c-article .c-article__content { padding-top: 30px; position: relative; } @media screen and (max-width: 1180px) { .c-article .c-article__content { padding-top: 15px; } } .c-article .c-article__content::after { content: ""; position: absolute; bottom: 0; right: 0; height: 20px; width: 20px; display: block; border-right: 2px solid #161616; border-bottom: 2px solid #161616; } .c-article .c-article__content .c-article__content__headline { font-size: 20px; } @media screen and (max-width: 768px) { .c-article .c-article__content .c-article__content__headline { font-size: 16px; line-height: 1.7; } } .c-article .c-article__content .c-article__content__tag { font-size: 16px; color: #b9b9b9; line-height: 1.7; } @media screen and (max-width: 768px) { .c-article .c-article__content .c-article__content__tag { font-size: 13px; margin-top: 10px; } } .c-newslist { border-top: 1px solid #161616; } .c-newslist .c-newslist__item a { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; border-bottom: 1px solid #161616; padding: 15px 15px; line-height: 1; min-height: 110px; } @media screen and (max-width: 768px) { .c-newslist .c-newslist__item a { padding: 20px 15px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .c-newslist .c-newslist__item a::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; display: block; width: 100%; height: 100%; background-color: #f2f2f2; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); } @media (hover: hover) and (pointer: fine) { .c-newslist .c-newslist__item a:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } } .c-newslist .c-newslist__item .c-newslist__item__time { font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 300; margin-right: 50px; width: 85px; } @media screen and (max-width: 768px) { .c-newslist .c-newslist__item .c-newslist__item__time { font-size: 13px; margin-right: 20px; width: 70px; } } .c-newslist__item__cat__wrap{ display: flex; flex-direction: column; gap: 10px; margin-right: 32px; } @media screen and (max-width: 768px) { .c-newslist__item__cat__wrap{ flex-direction: row; } } .c-newslist .c-newslist__item .c-newslist__item__cat { font-size: 15px; background: #161616; color: #fff; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-width: 120px; padding: 10px 1em; margin-right: 32px; } @media screen and (max-width: 768px) { .c-newslist .c-newslist__item .c-newslist__item__cat { font-size: 13px; padding: 6px 1em; margin-right: 0; min-width: 85px; } } .c-newslist .c-newslist__item .c-newslist__item__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 768px) { .c-newslist .c-newslist__item .c-newslist__item__title { width: 100%; margin-top: 18px; } } .c-mv { padding: 2.5vw 2.5% 0; } .c-mv .c-mv__inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 1; width: 100%; height: 500px; background-color: #161616; padding: 130px 7.5vw 100px; } @media screen and (max-width: 768px) { .c-mv .c-mv__inner { height: 300px; } } .c-mv .c-mv__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } .c-mv .c-mv__bg img { position: relative; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; width: 100%; height: 120%; -webkit-transition: all 0.1s linear; transition: all 0.1s linear; will-change: transform, left, width, height; } .c-mv .c-mv__headline { position: relative; z-index: 2; color: #fff; padding-top: 30px; font-size: 34px; letter-spacing: 0.3em; } @media screen and (max-width: 768px) { .c-mv .c-mv__headline { font-size: 26px; letter-spacing: 0.1em; width: 100%; } } .c-mv .c-mv__headline::before { content: attr(data-ruby); position: absolute; top: 0; left: 0; font-family: "Oswald", sans-serif; font-size: 16px; letter-spacing: 0.1em; } .c-breadcrumb { padding: 20px 0; } .c-breadcrumb .c-breadcrumb__list { width: 100%; max-width: 1360px; padding: 0 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-breadcrumb .c-breadcrumb__item { font-size: 12px; line-height: 1; margin-bottom: 1em; letter-spacing: 0; position: relative; } .c-breadcrumb .c-breadcrumb__item:first-child { font-family: "Oswald", sans-serif; } .c-breadcrumb .c-breadcrumb__item:not(:last-child) { padding-right: 2em; margin-right: 8px; } .c-breadcrumb .c-breadcrumb__item:not(:last-child)::before { content: ""; position: absolute; top: calc(50%); right: 0; display: block; width: 18px; height: 1px; background-color: #040e42; opacity: 0.2; } .c-breadcrumb .c-breadcrumb__item a { color: #3560b8; position: relative; text-decoration: underline; } .c-next-pager .c-next-pager__container { margin: 0 auto; width: 100%; max-width: 1200px; padding: 0; border-top: 1px solid #dcdee6; border-bottom: 1px solid #dcdee6; } .c-next-pager .c-next-pager__container a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding: 40px 60px 48px; width: 100%; position: relative; } @media screen and (max-width: 880px) { .c-next-pager .c-next-pager__container a { padding: 20px 14px 24px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .c-next-pager .c-next-pager__container .c-next-pager__figure { width: 200px; height: 200px; background: #3560b8; } .c-next-pager .c-next-pager__container .c-next-pager__title { width: calc(50% - 170px); padding: 15px 15px 15px 36px; } @media screen and (max-width: 1180px) { .c-next-pager .c-next-pager__container .c-next-pager__title { width: calc(100% - 200px); } } @media screen and (max-width: 880px) { .c-next-pager .c-next-pager__container .c-next-pager__title { width: 100%; padding: 14px 0; } } .c-next-pager .c-next-pager__container .c-next-pager__title .headline { font-size: 30px; font-weight: bold; line-height: 1.667; } @media screen and (max-width: 880px) { .c-next-pager .c-next-pager__container .c-next-pager__title .headline { font-size: 24px; } } .c-next-pager .c-next-pager__container .c-next-pager__title .subline { font-size: 13px; font-family: "Oswald", sans-serif; color: #3560b8; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; } @media screen and (max-width: 880px) { .c-next-pager .c-next-pager__container .c-next-pager__title .subline { font-size: 11px; } } .c-pager { margin-top: 50px; margin-bottom: 50px; font-weight: 500; letter-spacing: 0; } @media screen and (max-width: 768px) { .c-pager { margin-top: 30px; margin-bottom: 30px; } } .c-pager .wp-pagenavi { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; align-items: center; padding: 14px 0; max-width: 270px; margin: 0 auto; } .c-pager .previouspostslink { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; position: absolute; top: calc(50% - 6px); left: 0; display: block; width: 15px; height: 12px; background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2012%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23F8501D%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%229%2C0%207.6%2C1.4%2011.5%2C5.3%200%2C5.3%200%2C6.8%2011.2%2C6.8%207.6%2C10.5%209%2C11.9%2015%2C5.9%20%22%2F%3E%3C%2Fsvg%3E); background-repeat: no-repeat; background-size: contain; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-pager .first { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; color: #161616; padding: 0 1em; position: relative; } .c-pager .first::after { content: "..."; padding: 0 0.2em; position: absolute; right: -0.5em; top: 0; } .c-pager .page { padding: 0 1em; } .c-pager .smaller { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } .c-pager .current { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; color: #fff; background-color: #161616; border-radius: 50%; width: 35px; min-width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; padding: 0; } .c-pager .larger { -webkit-box-ordinal-group: 6; -webkit-order: 5; -ms-flex-order: 5; order: 5; } .c-pager .last { -webkit-box-ordinal-group: 7; -webkit-order: 6; -ms-flex-order: 6; order: 6; color: #161616; padding: 0 1em; position: relative; } .c-pager .last::before { content: "..."; padding: 0 0.2em; position: absolute; left: -0.5em; top: 0; } .c-pager .nextpostslink { -webkit-box-ordinal-group: 8; -webkit-order: 7; -ms-flex-order: 7; order: 7; position: absolute; top: calc(50% - 6px); right: 0; display: block; width: 15px; height: 12px; background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015%2012%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23F8501D%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%229%2C0%207.6%2C1.4%2011.5%2C5.3%200%2C5.3%200%2C6.8%2011.2%2C6.8%207.6%2C10.5%209%2C11.9%2015%2C5.9%20%22%2F%3E%3C%2Fsvg%3E); background-repeat: no-repeat; background-size: contain; } .c-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 5; opacity: 0; pointer-events: none; } .c-modal.is-open { pointer-events: auto; } .c-modal[aria-hidden=true] { opacity: 0; -webkit-animation: mmfadeOut 0s cubic-bezier(0.55, 0.05, 0.22, 0.99); animation: mmfadeOut 0s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .c-modal[aria-hidden=true] .swiper-container-fade .swiper-slide-active, .c-modal[aria-hidden=true] .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: none; } .c-modal[aria-hidden=false] { opacity: 1; pointer-events: auto; -webkit-animation: mmfadeIn 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99); animation: mmfadeIn 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99); } .c-modal[aria-hidden=false] .swiper-container-fade .swiper-slide-active, .c-modal[aria-hidden=false] .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .c-modal .c-modal__area { width: 100%; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } .c-modal .c-modal__area__dialog { width: calc(100% - 32px); max-width: calc(100% - 32px); max-height: calc(90vh - 60px); position: relative; cursor: initial; margin: 0 auto; display: block; background-color: #fff; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.09); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.09); overflow-y: scroll; } .c-modal .c-modal__area__dialog:hover .c-modal__area__close { opacity: 1; } .c-modal .c-modal__area__dialog.size { max-width: 900px; } .c-modal .c-modal__area__dialog.movie { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #000; overflow: hidden; } .c-modal .c-modal__area__dialog.movie .c-modal__area__close { z-index: 2; } .c-modal .c-modal__area__dialog.movie .c-modal__area__close::before { background-color: #fff; } .c-modal .c-modal__area__dialog.movie .c-modal__area__close::after { background-color: #fff; } .c-modal .c-modal__area__dialog.movie iframe { width: 100%; height: 56.25vw; max-height: 90vh; } .c-modal .c-modal__area__dialog .c-modal__area__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; -webkit-transition: all 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); opacity: 0; } .c-modal .c-modal__area__dialog .c-modal__area__close:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .c-modal .c-modal__area__dialog .c-modal__area__close::before { position: absolute; display: block; width: 120%; height: 3px; background-color: inherit; content: ""; -webkit-transition: inherit; transition: inherit; top: 24px; right: -5px; background-color: #161616; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c-modal .c-modal__area__dialog .c-modal__area__close::after { position: absolute; display: block; width: 120%; height: 3px; background-color: inherit; content: ""; -webkit-transition: inherit; transition: inherit; top: 24px; right: -5px; background-color: #161616; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .c-modal .c-modal__area__dialog .ps__thumb-y { background-color: #cacaca; } .c-modal .c-modal__area__dialog .ps--active-x > .ps__rail-x, .c-modal .c-modal__area__dialog .ps--active-y > .ps__rail-y { background-color: #efefef; } .c-modal .c-modal__area__dialog .ps__rail-y { width: 10px; } /* Animation */ @-webkit-keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } .s-news { padding: 130px 0; } @media screen and (max-width: 768px) { .s-news { padding: 60px 0; } } .c-404 { padding: 40px 20px; background-color: #e6dac7; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-404 .c-404__figure { margin: 80px 0; } .c-section { padding: 270px 2.5% 2.5vw; } @media screen and (max-width: 768px) { .c-section { padding: 130px 2.5% 60px; } } .c-section .detail__header .c-article__base__info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap; gap: 8px; } .c-section .detail__header .c-article__base__time { font-family: "Oswald", sans-serif; font-size: 15px; font-weight: 300; margin-right: 40px; } .c-section .detail__header .c-article__base__cat__wrap { display: flex; gap: 10px; } @media screen and (max-width: 768px) { /* .c-section .detail__header .c-article__base__cat__wrap { flex-direction: column; gap: 5px; } */ } .c-section .detail__header .c-article__base__cat { font-size: 13px; background: #161616; color: #fff; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-width: 120px; padding: 3px 0.5em; } .c-section .detail__header .c-article__base__headline { font-weight: 400; font-size: 40px; margin-top: 22px; letter-spacing: 0.1em; line-height: 1.3; padding-bottom: 25px; margin-bottom: 70px; border-bottom: 1px solid #161616; } .c-section .c-btn { max-width: 320px; } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } /* ============================== home.scss ================================= */ .s-mv { position: relative; z-index: 1; width: 100%; height: 100vh; min-height: 800px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 549px) { .s-mv { min-height: 550px; height: 550px; } } .s-mv::before { content: ""; position: absolute; bottom: 10px; left: calc(5% + 10px); z-index: 2; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210px%22%20height%3D%22101px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M0.0%2C0.0%20L0.999%2C0.0%20L0.999%2C99.999%20L0.0%2C99.999%20L0.0%2C0.0%20Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M8.567%2C85.687%20L9.432%2C86.187%20L1.432%2C100.44%20L0.567%2C99.544%20L8.567%2C85.687%20Z%22%2F%3E%3C%2Fsvg%3E"); display: block; width: 10px; height: 101px; will-change: background-position; background-position: -100% 0; -webkit-animation: mv-arrow 3.2s linear infinite both; animation: mv-arrow 3.2s linear infinite both; } .s-mv::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; display: block; background-color: #f2f2f2; width: 70%; height: 47%; } .s-mv .s-mv__headline { position: relative; z-index: 2; color: #fff; } .s-mv .s-mv__headline .s-mv__headline__ja { font-size: 46px; font-weight: bold; line-height: 1.565; text-align: center; letter-spacing: 0.28em; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif; } @media screen and (max-width: 768px) { .s-mv .s-mv__headline .s-mv__headline__ja { font-size: 50px; } } @media screen and (max-width: 549px) { .s-mv .s-mv__headline .s-mv__headline__ja { font-size: 25px; } } .s-mv .s-mv__headline .s-mv__headline__en { font-size: 22px; font-family: "Oswald", sans-serif; line-height: 1; text-align: center; font-weight: 300; margin-top: 20px; letter-spacing: 0.11em; } @media screen and (max-width: 768px) { .s-mv .s-mv__headline .s-mv__headline__en { font-size: 26px; } } @media screen and (max-width: 549px) { .s-mv .s-mv__headline .s-mv__headline__en { font-size: 13px; } } .s-mv .s-mv__bg { position: absolute; bottom: 0; left: 2.5%; z-index: 0; width: calc(100% - 5%); height: calc(100% - 2.5vw); overflow: hidden; } .s-mv .s-mv__bg .swiper-slide { will-change: transition, opacity; } .s-mv .s-mv__bg .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 6.5s linear; transition: -webkit-transform 6.5s linear; transition: transform 6.5s linear; transition: transform 6.5s linear, -webkit-transform 6.5s linear; will-change: transition; } .s-mv .s-mv__bg .swiper-slide img.mv1 { -o-object-position: 100% 100%; object-position: 100% 100%; } .s-mv .s-mv__bg .swiper-slide.swiper-slide-active img, .s-mv .s-mv__bg .swiper-slide.swiper-slide-duplicate-active img { -webkit-transform: scale(1.1); transform: scale(1.1); } .s-mv .s-mv__bg .swiper-slide.swiper-slide-prev img, .s-mv .s-mv__bg .swiper-slide.swiper-slide-duplicate-prev img { -webkit-transform: scale(1.2); transform: scale(1.2); } .s-property { position: relative; width: 100%; padding: 250px 0 130px; } @media screen and (max-width: 1320px) { .s-property { padding: 18vw 0 130px; } } @media screen and (max-width: 768px) { .s-property { padding: 15vw 0; } } .s-property.is-active .s-property__subline span { -webkit-transform: translateY(0); transform: translateY(0); } .s-property::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; display: block; background-color: #f2f2f2; width: 70%; height: 100%; } .s-property .s-property__subline { content: "Property Information"; position: absolute; top: 77px; left: 2.5%; z-index: 2; display: block; font-size: 170px; letter-spacing: 0.07em; font-family: "Oswald", sans-serif; color: #ebebeb; line-height: 1; font-weight: 300; overflow: hidden; } @media screen and (max-width: 1480px) { .s-property .s-property__subline { font-size: 9vw; } } .s-property .s-property__subline span { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform: translateY(100%); transform: translateY(100%); } .s-property .s-property__container { position: relative; z-index: 3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .s-property .s-property__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .s-property .s-property__headline::after { top: 25px; right: calc(80px + 50px); } .s-property .s-property__content { width: calc(100% - 220px); padding-right: 160px; } @media screen and (max-width: 1480px) { .s-property .s-property__content { padding-right: 10%; } } @media screen and (max-width: 1320px) { .s-property .s-property__content { padding-right: 0; } } @media screen and (max-width: 1180px) { .s-property .s-property__content { width: calc(100% - 160px); } } @media screen and (max-width: 768px) { .s-property .s-property__content { width: calc(100%); margin-top: 20px; } } .s-property .s-property__content .s-property__content__list { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 768px) { .s-property .s-property__content .s-property__content__list { margin-top: 20px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .s-property .s-property__content .s-property__content__list.is-active li { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .s-property .s-property__content .s-property__content__list li { -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: transform; -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; position: relative; } @media screen and (max-width: 768px) { .s-property .s-property__content .s-property__content__list li { margin-bottom: 40px; } } .s-property .s-property__content .s-property__content__list li:not(:nth-child(3n)) { margin-right: 90px; } @media screen and (max-width: 1180px) { .s-property .s-property__content .s-property__content__list li:not(:nth-child(3n)) { margin-right: 45px; } } @media screen and (max-width: 768px) { .s-property .s-property__content .s-property__content__list li:not(:nth-child(3n)) { margin-right: 0; } } .s-property .s-property__content .s-property__content__list li:nth-child(3n-1) { top: 100px; margin-bottom: 100px; } @media screen and (max-width: 768px) { .s-property .s-property__content .s-property__content__list li:nth-child(3n-1) { top: 0; margin-bottom: 40px; } } .s-property .s-property__content .s-property__content__list li:nth-child(1) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .s-property .s-property__content .s-property__content__list li:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .s-property .s-property__content .s-property__content__list li:nth-child(3) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .s-property .s-property__content .s-property__content__list li:nth-child(4) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .s-property .s-property__content .s-property__content__list li:nth-child(5) { -webkit-transition-delay: 1s; transition-delay: 1s; } .s-property .s-property__content .s-property__content__list li:nth-child(6) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .s-property .s-property__content .s-property__content__list .c-btn2 { margin-top: 44px; } @media screen and (max-width: 1180px) { .s-property .s-property__content .s-property__content__list .c-btn2 { margin-top: 15px; } } @media screen and (max-width: 768px) { .s-property .s-property__content .s-property__content__list .c-btn2 { margin-top: 20px; } } .s-property .s-property__content .c-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 105px auto 0; width: 320px; } @media screen and (max-width: 768px) { .s-property .s-property__content .c-btn { margin: 10px auto 0; width: 75%; min-width: 150px; } } .s-property__icon { position: absolute; top: -3rem; left: -3rem; z-index: 4; display: block; width: 100px; aspect-ratio: 1 / 1; background-color: #f8f992; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; line-height: 1; font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; } @media screen and (max-width: 1180px) { .s-property__icon{ top: -1.5rem; left: -1.5rem; width: 8rem; height: 8rem; font-size: 2.4rem; } } @media screen and (max-width: 768px) { .s-property__icon{ top: -1.5rem; left: -1.5rem; width: 7rem; height: 7rem; font-size: 2rem; } } .s-property__icon.--new{ background-color: #f8f992; } .s-property__icon.--sold{ background-color: #aceeff; letter-spacing: 0.12em; } .s-flow { background-color: #161616; color: #fff; overflow: hidden; } @media (hover: hover) and (pointer: fine) { .s-flow:hover .s-flow__figure img { width: calc(100% + 20px); height: calc(120% + 20px); max-width: calc(100% + 20px); left: -10px; } .s-flow:hover .s-flow__inner::after { -webkit-animation: linkborder 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); animation: linkborder 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); } } .s-flow:nth-child(even) .s-flow__container { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; } @media screen and (max-width: 768px) { .s-flow:nth-child(even) .s-flow__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .s-flow .s-flow__container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; height: 700px; } @media screen and (max-width: 768px) { .s-flow .s-flow__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; height: auto; } } .s-flow .s-flow__figure { width: 50%; position: relative; overflow: hidden; } @media screen and (max-width: 768px) { .s-flow .s-flow__figure { width: 100%; height: 70vw; } } .s-flow .s-flow__figure img { position: absolute; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; width: 100%; height: 120%; -webkit-transition: width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; transition: width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; transition: transform 0.1s linear, width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear; transition: transform 0.1s linear, width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; will-change: transform, left; } .s-flow .s-flow__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; width: 50%; height: 100%; padding: 50px 100px 50px 150px; } @media screen and (max-width: 1600px) { .s-flow .s-flow__inner { padding: 50px 2vw 50px 4vw; } } @media screen and (max-width: 768px) { .s-flow .s-flow__inner { width: 100%; height: auto; padding: 16vw 20px 20vw; } } .s-flow .s-flow__inner::after { content: ""; display: block; width: 38%; height: 1px; background-color: #fff; will-change: transform; } @media screen and (max-width: 1320px) { .s-flow .s-flow__inner::after { position: absolute; bottom: 100px; right: 50px; width: 110px; height: 17px; background-color: inherit; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22111px%22%20height%3D%2217px%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22Filter_0%22%3E%20%3CfeFlood%20flood-color%3D%22rgb(255%2C%20255%2C%20255)%22%20flood-opacity%3D%221%22%20result%3D%22floodOut%22%20%2F%3E%20%3CfeComposite%20operator%3D%22atop%22%20in%3D%22floodOut%22%20in2%3D%22SourceGraphic%22%20result%3D%22compOut%22%20%2F%3E%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22compOut%22%20in2%3D%22SourceGraphic%22%20%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23Filter_0)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M0.969%2C14.166%20L110.969%2C14.166%20L110.969%2C16.166%20L0.969%2C16.166%20L0.969%2C14.166%20Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M85.793%2C0.76%20L109.176%2C13.576%20L108.176%2C15.308%20L84.793%2C1.808%20L85.793%2C0.76%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-origin: border-box; } } @media screen and (max-width: 768px) { .s-flow .s-flow__inner::after { bottom: 40px; right: 5vw; width: 55px; height: 9px; background-size: contain; } } .s-flow .s-flow__content { width: calc(50%); } @media screen and (max-width: 1480px) { .s-flow .s-flow__content { width: 62%; padding-right: 1vw; } } @media screen and (max-width: 1320px) { .s-flow .s-flow__content { width: 100%; } } .s-flow .s-flow__content .s-flow__content__headline { position: relative; z-index: 1; padding-top: 20px; font-size: 26px; line-height: 1.615; font-weight: 300; letter-spacing: 0.23em; } @media screen and (max-width: 768px) { .s-flow .s-flow__content .s-flow__content__headline { font-size: 20px; } } .s-flow .s-flow__content .s-flow__content__headline::before { content: attr(data-ruby); position: absolute; font-family: "Oswald", sans-serif; top: 0; left: 0; z-index: 1; display: block; font-size: 16px; line-height: 1; letter-spacing: 0.05em; } .s-flow .s-flow__content .s-flow__content__text { margin-top: 30px; } @media screen and (max-width: 768px) { .s-flow .s-flow__content .s-flow__content__text { margin-top: 20px; } } .home-s-about { width: 100%; padding: 100px 2.5% 50px; } @media screen and (max-width: 768px) { .home-s-about { padding: 15vw 16px 50px; } } .home-s-about.is-active .s-about__subline span { -webkit-transform: translateY(0); transform: translateY(0); } .home-s-about .s-about__container { position: relative; width: 100%; height: 700px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 50px calc(5% + 50px); } @media screen and (max-width: 768px) { .home-s-about .s-about__container { height: auto; padding: 50px 15px; } } @media (hover: hover) and (pointer: fine) { .home-s-about .s-about__container:hover .s-about__bg img { width: calc(100% + 20px); height: calc(120% + 20px); max-width: calc(100% + 20px); left: -10px; } .home-s-about .s-about__container:hover .s-about__inner::after { -webkit-animation: linkborder 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); animation: linkborder 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); } } .home-s-about .s-about__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } .home-s-about .s-about__bg img { position: relative; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; width: 100%; height: 120%; -webkit-transition: width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; transition: width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; transition: transform 0.1s linear, width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear; transition: transform 0.1s linear, width 0.5s linear, height 0.5s linear, left 0.5s linear, max-width 0.5s linear, -webkit-transform 0.1s linear; will-change: transform, left, width, height; } .home-s-about .s-about__subline { position: absolute; bottom: 0; left: 2.5%; z-index: 2; display: block; font-size: 170px; letter-spacing: 0.07em; font-family: "Oswald", sans-serif; color: #f2f2f2; opacity: 0.1; line-height: 1; font-weight: 300; overflow: hidden; } @media screen and (max-width: 768px) { .home-s-about .s-about__subline { display: none; } } .home-s-about .s-about__subline span { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0.1; } .home-s-about .s-about__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; height: 100%; } .home-s-about .s-about__inner::after { content: ""; display: block; width: 38%; height: 1px; background-color: #fff; will-change: transform; z-index: 1; } @media screen and (max-width: 1320px) { .home-s-about .s-about__inner::after { position: absolute; bottom: calc(50% - 9px); right: 50px; width: 110px; height: 17px; background-color: inherit; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22111px%22%20height%3D%2217px%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22Filter_0%22%3E%20%3CfeFlood%20flood-color%3D%22rgb(255%2C%20255%2C%20255)%22%20flood-opacity%3D%221%22%20result%3D%22floodOut%22%20%2F%3E%20%3CfeComposite%20operator%3D%22atop%22%20in%3D%22floodOut%22%20in2%3D%22SourceGraphic%22%20result%3D%22compOut%22%20%2F%3E%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22compOut%22%20in2%3D%22SourceGraphic%22%20%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23Filter_0)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M0.969%2C14.166%20L110.969%2C14.166%20L110.969%2C16.166%20L0.969%2C16.166%20L0.969%2C14.166%20Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20d%3D%22M85.793%2C0.76%20L109.176%2C13.576%20L108.176%2C15.308%20L84.793%2C1.808%20L85.793%2C0.76%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-origin: border-box; } } @media screen and (max-width: 768px) { .home-s-about .s-about__inner::after { bottom: 0; right: 0; width: 55px; height: 9px; background-size: contain; } } .home-s-about .s-about__content { width: 50%; position: relative; color: #fff; z-index: 2; } @media screen and (max-width: 768px) { .home-s-about .s-about__content { width: 100%; } } .home-s-about .s-about__content .s-about__content__headline { position: relative; z-index: 1; padding-top: 30px; font-size: 36px; line-height: 1.615; font-weight: 300; letter-spacing: 0.23em; } @media screen and (max-width: 768px) { .home-s-about .s-about__content .s-about__content__headline { padding-top: 20px; font-size: 26px; } } .home-s-about .s-about__content .s-about__content__headline::before { content: attr(data-ruby); position: absolute; font-family: "Oswald", sans-serif; top: 0; left: 0; z-index: 1; display: block; font-size: 16px; line-height: 1; letter-spacing: 0.05em; } .home-s-about .s-about__content .s-about__content__text { line-height: 2.625; margin-top: 40px; } .s-news { position: relative; width: 100%; padding: 150px 0; } @media screen and (max-width: 768px) { .s-news { padding: 0 0 60px; } } .s-news.is-active .s-news__subline span { -webkit-transform: translateY(0); transform: translateY(0); } .s-news .s-news__subline { position: absolute; top: 0; right: 2%; z-index: -1; display: block; font-size: 170px; letter-spacing: 0.07em; font-family: "Oswald", sans-serif; color: #f2f2f2; line-height: 1; font-weight: 300; overflow: hidden; } @media screen and (max-width: 768px) { .s-news .s-news__subline { font-size: 70px; } } .s-news .s-news__subline span { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform: translateY(100%); transform: translateY(100%); } .s-news .s-news__container { width: 100%; max-width: 1660px; margin: 0 auto; padding: 0 2.5%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) { .s-news .s-news__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; padding: 8px 16px 0; } } .s-news .s-news__container .c-headline2 { padding: 0; } .s-news .s-news__container .c-headline2::after { top: 0; right: 50px; height: 100%; } .s-news .s-news__container .s-news__content { padding-left: 105px; width: calc(1200px + 105px); } @media screen and (max-width: 1480px) { .s-news .s-news__container .s-news__content { padding-left: 8%; width: calc(75% + 105px); } } @media screen and (max-width: 768px) { .s-news .s-news__container .s-news__content { padding-left: 0; width: 100%; margin-top: 40px; } } .s-news .s-news__container .c-btn { margin-top: 90px; width: 320px; } @media screen and (max-width: 768px) { .s-news .s-news__container .c-btn { margin-top: 50px; min-width: 160px; width: 75%; } } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } /* ============================== about.scss ================================= */ .s-about { position: relative; padding: 115px 0 145px; } @media screen and (max-width: 768px) { .s-about { padding: 60px 0 70px; } } .s-about::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: calc(100% - (100% - 1200px) / 4); height: 100%; background-color: #f2f2f2; } @media screen and (max-width: 768px) { .s-about::before { width: 100%; } } .s-about .s-about__headline { padding: 30px 0 50px; } @media screen and (max-width: 768px) { .s-about .s-about__headline { padding: 30px 0; } } .s-about .s-about__feel .s-about__feel__headline { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-size: 26px; line-height: 1.923; font-weight: 400; letter-spacing: 0.22em; margin-bottom: 50px; } @media screen and (max-width: 768px) { .s-about .s-about__feel .s-about__feel__headline { font-size: 22px; text-align: center; } } .s-about .s-about__feel .s-about__feel__headline span { font-size: 20px; } @media screen and (max-width: 768px) { .s-about .s-about__feel .s-about__feel__headline span { font-size: 16px; } } .s-about .s-about__feel .s-about__feel__text { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; line-height: 2.5; text-align: center; margin-top: 2.5em; } @media screen and (max-width: 549px) { .s-about .s-about__feel .s-about__feel__text { text-align: left; } } .s-about .s-about__introduction { margin-top: 110px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 70px 110px; background-color: #fff; } @media screen and (max-width: 768px) { .s-about .s-about__introduction { margin-top: 50px; padding: 35px 16px; } } .s-about .s-about__introduction .s-about__introduction__figure { position: relative; width: 100%; margin-bottom: 60px; } /* @media screen and (max-width: 1320px) { .s-about .s-about__introduction .s-about__introduction__figure { width: calc(50%); } } */ @media screen and (max-width: 768px) { .s-about .s-about__introduction .s-about__introduction__figure { margin-bottom: 30px; } } .s-about .s-about__introduction .s-about__introduction__figure img { z-index: 1; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .s-about .s-about__introduction .s-about__introduction__content { max-width: calc(640px + 60px); padding: 0 30px; } @media screen and (max-width: 1320px) { .s-about .s-about__introduction .s-about__introduction__content { padding-left: 30px; } } @media screen and (max-width: 768px) { .s-about .s-about__introduction .s-about__introduction__content { width: 100%; padding-left: 0; margin-bottom: 30px; } } .s-about .s-about__introduction .-message { font-size: 18px; line-height: 2; font-weight: 500; letter-spacing: 0.2em; margin-top: 30px; } @media screen and (max-width: 768px) { .s-about .s-about__introduction .-message { font-size: 16px; } } .s-about .s-about__introduction .s-about__introduction__content .-job { font-size: 14px; color: #707070; line-height: 1; } .s-about .s-about__introduction .s-about__introduction__content .-name { font-size: 26px; line-height: 1; margin-top: 15px; } .s-about .s-about__introduction .s-about__introduction__content .-skill { margin-top: 20px; } .s-about .s-about__introduction .s-about__introduction__content .-text { margin-top: 20px; } .s-mission { position: relative; background: #161616; color: #fff; padding: 150px 0 140px; } @media screen and (max-width: 768px) { .s-mission { padding: 60px 0; } } .s-mission .s-container { position: relative; z-index: 2; } .s-mission .s-mission__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; overflow: hidden; } .s-mission .s-mission__bg img { position: relative; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; width: 100%; height: 120%; -webkit-transition: all 0.1s linear; transition: all 0.1s linear; will-change: transform, left, width, height; } .s-mission .s-mission__list { margin: 60px auto 0; max-width: 930px; width: 100%; } @media screen and (max-width: 768px) { .s-mission .s-mission__list { margin: 30px auto 0; } } .s-mission .s-mission__list li { position: relative; padding-left: 1em; font-size: 18px; } @media screen and (max-width: 768px) { .s-mission .s-mission__list li { font-size: 14px; } } .s-mission .s-mission__list li::before { content: "・"; position: absolute; top: 0; left: 0; z-index: 1; } .s-mission .s-mission__list li:not(:last-child) { margin-bottom: 13px; } .s-cando { position: relative; padding: 150px 0 110px; margin-bottom: 120px; } @media screen and (max-width: 768px) { .s-cando { padding: 60px 0; margin-bottom: 60px; } } .s-cando::before { content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: calc(100% - (100% - 1200px) / 4); height: 100%; background-color: #f2f2f2; } .s-cando .s-cando__text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 60px; } @media screen and (max-width: 768px) { .s-cando .s-cando__text { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .s-cando .s-cando__list { margin-top: 100px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .s-cando .s-cando__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .s-cando .s-cando__list li { position: relative; width: calc(100% / 3 - 70px); padding: 30px 0; } @media screen and (max-width: 768px) { .s-cando .s-cando__list li { width: 100%; padding: 30px 0 50px; } } .s-cando .s-cando__list li::before { content: attr(data-ruby); position: absolute; top: 0; left: 0; font-size: 24px; font-family: "Oswald", sans-serif; font-weight: 300; line-height: 1; } .s-cando .s-cando__list li .s-cando__list__figure { margin: 0 auto; width: 150px; height: 150px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #fff; } @media screen and (max-width: 768px) { .s-cando .s-cando__list li .s-cando__list__figure { position: absolute; top: 20px; left: 0; z-index: -1; width: 80px; height: 80px; } } @media screen and (max-width: 768px) { .s-cando .s-cando__list li .s-cando__list__figure .i-research { width: 43px; height: 45px; } } @media screen and (max-width: 768px) { .s-cando .s-cando__list li .s-cando__list__figure .i-setting { width: 43px; height: 37px; } } @media screen and (max-width: 768px) { .s-cando .s-cando__list li .s-cando__list__figure .i-reform { width: 43px; height: 43px; } } .s-cando .s-cando__list li .s-cando__list__headline { margin-top: 25px; font-size: 22px; line-height: 1.545; text-align: center; } @media screen and (max-width: 768px) { .s-cando .s-cando__list li .s-cando__list__headline { margin-top: 0; font-size: 18px; text-align: left; padding-left: 100px; } } .s-cando .s-cando__list li .s-cando__list__text { margin-top: 30px; } .s-cando-sale{ padding: 0; } .s-cando-sale::before { display: none; } .s-cando-sale .s-cando__list li .s-cando__list__figure{ background-color: #f2f2f2; } .s-access { padding: 150px 0 0; } @media screen and (max-width: 768px) { .s-access { padding: 60px 0 0; } } .s-access .s-access__content { margin-top: 65px; /* display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; */ } @media screen and (max-width: 768px) { .s-access .s-access__content { /* -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; */ } } .s-access .s-access__content .s-access__content__table { /* width: calc(50% - 20px); */ /* border-top: 1px solid #161616; */ } @media screen and (max-width: 768px) { .s-access .s-access__content .s-access__content__table { width: 100%; } } @media screen and (max-width: 768px) { .s-access .s-access__content .s-access__content__table:nth-child(2) { border-top: none; } } .s-access .s-access__content .s-access__content__table dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 1px solid #161616; padding: 40px 30px; } @media screen and (max-width: 768px) { .s-access .s-access__content .s-access__content__table dl { padding: 26px 30px; } } .s-access .s-access__content .s-access__content__table dt { width: 15%; } @media screen and (max-width: 768px) { .s-access .s-access__content .s-access__content__table dt { width: 42%; } } .s-access .s-access__content .s-access__content__table dd { width: 85%; } @media screen and (max-width: 768px) { .s-access .s-access__content .s-access__content__table dd { width: 58%; } } .s-access .s-access__map { margin-top: 80px; position: relative; width: 100%; height: 0; padding-top: 40%; margin-bottom: 100px; } .s-access .s-access__map iframe { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; -webkit-filter: grayscale(1); filter: grayscale(1); } .s-store { padding: 150px 0 140px; } @media screen and (max-width: 768px) { .s-store { padding: 60px 0; } } .s-store__item + .s-store__item{ margin-top: 200px; } @media screen and (max-width: 1180px) { .s-store__item + .s-store__item{ margin-top: 100px; } } .s-store__item__content-wrapper{ display: flex; justify-content: space-between; gap: 50px; } @media screen and (max-width: 1180px) { .s-store__item__content-wrapper{ align-items: flex-start; } } @media screen and (max-width: 768px) { .s-store__item__content-wrapper{ flex-direction: column; gap: 30px; } } .s-store__headline{ margin-bottom: 50px; } @media screen and (max-width: 768px) { .s-store__headline{ margin-bottom: 30px; } } .s-store__imgbox{ width: 50%; } @media screen and (max-width: 768px) { .s-store__imgbox{ width: 100%; } } .s-store__textbox{ width: 50%; } @media screen and (max-width: 768px) { .s-store__textbox{ width: 100%; } } .s-store__item__headline { font-size: 26px; font-weight: 500; line-height: 2; } @media screen and (max-width: 768px) { .s-store__item__headline { font-size: 20px; } } .s-store__item__headline .i-external{ margin-left: 10px; } .s-store__item__address { font-size: 16px; line-height: 2; margin-top: 15px; margin-bottom: 15px; } @media screen and (max-width: 768px) { .s-store__item__address { font-size: 14px; margin-bottom: 10px; } } .s-store__item__address .number { font-family: "Oswald", sans-serif; } .s-store__item__table { /* width: calc(50% - 20px); */ /* border-top: 1px solid #161616; */ } @media screen and (max-width: 768px) { .s-store__item__table { width: 100%; } } .s-store__item__table dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 1px solid #161616; padding: 25px 0; } @media screen and (max-width: 768px) { .s-store__item__table dl { padding: 20px 0; } } .s-store__item__table dl:first-child { padding-top: 0px; } @media screen and (max-width: 1180px) { .s-store__item__table dl:first-child { padding-top: 0px; } } @media screen and (max-width: 768px) { .s-store__item__table dl:first-child { padding-top: 20px; } } .s-store__item__table dt { width: 18%; } @media screen and (max-width: 768px) { .s-store__item__table dt { width: 30%; } } .s-store__item__table dd { width: 82%; } @media screen and (max-width: 768px) { .s-store__item__table dd { width: 70%; } } .s-store .s-access__map { margin-top: 50px; position: relative; width: 100%; height: 0; padding-top: 40%; } @media screen and (max-width: 768px) { .s-store .s-access__map { margin-top: 30px; position: relative; width: 100%; height: 0; padding-top: 70%; } } .s-store .s-access__map iframe { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; -webkit-filter: grayscale(1); filter: grayscale(1); } /* ============================== staff ================================= */ .s-staff { padding: 135px 0 145px; } @media screen and (max-width: 768px) { .s-staff { padding: 60px 0; } } .s-staff--matsumoto{ padding: 0 0 158px; } @media screen and (max-width: 768px) { .s-staff--matsumoto{ padding: 0 0 60px; } } .s-staff__headline{ margin-bottom: 50px; } @media screen and (max-width: 768px) { .s-staff__headline{ margin-bottom: 30px; } } .s-staff__box{ margin-top: 75px; } @media screen and (max-width: 768px) { .s-staff__box{ margin-top: 50px; } } .s-staff__list{ display: flex; flex-wrap: wrap; gap: 70px; } @media screen and (max-width: 1480px){ .s-staff__list{ gap: 40px; } } @media screen and (max-width: 1180px){ .s-staff__list{ flex-direction: column; } } .s-staff__item{ position: relative; width: calc((100% - 70px) / 2); display: flex; gap: 50px; } @media screen and (max-width: 1480px){ .s-staff__item{ width: calc((100% - 40px) / 2); display: flex; } } @media screen and (max-width: 1180px){ .s-staff__item{ width: 100%; } } @media screen and (max-width: 768px){ .s-staff__item{ flex-direction: column; gap: 30px; padding: 0 6.7%; max-width: 500px; margin: 0 auto; } } .s-staff__item::after{ content: ''; width: 20px; height: 20px; border-right: 2px solid #161616; border-bottom: 2px solid #161616; position: absolute; right: 0; bottom: 0; } .s-staff__imgbox{ width: 45.8%; } @media screen and (max-width: 1480px){ .s-staff__imgbox{ width: 35%; } } @media screen and (max-width: 768px){ .s-staff__imgbox{ width: 100%; margin: 0 auto; } } .s-staff__imgbox__figure{ position: relative; width: 100%; height: 0; padding-top:calc(458 / 400 * 100%); margin-top: 7px; } .s-staff__imgbox__figure img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .s-staff__profile{ flex: 1; padding-right: 20px; } @media screen and (max-width: 1480px){ .s-staff__profile{ } } @media screen and (max-width: 768px){ .s-staff__profile{ padding-right: 0; } } .s-staff__name{ position: relative; font-size: 30px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; padding-bottom: 25px; margin-bottom: 52px; } @media screen and (max-width: 1480px) { .s-staff__name{ /* font-size: 26px; */ margin-bottom: 20px; } } @media screen and (max-width: 768px) { .s-staff__name{ font-size: 20px; text-align: center; } } .s-staff__name:before{ position: absolute; bottom: 0; left: 0; content: attr(data-ruby); display: block; font-size: 16px; letter-spacing: 0.1em; font-family: "Oswald", sans-serif; font-weight: 400; } @media screen and (max-width: 768px) { .s-staff__name:before{ font-size: 14px; display: flex; justify-content: center; width: 100%; } } .s-staff__spec{ margin-bottom: 38px; } @media screen and (max-width: 1480px) { .s-staff__spec{ margin-bottom: 20px; } } @media screen and (max-width: 768px) { .s-staff__spec{ margin-bottom: 20px; } } .s-staff__spec .-job{ font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; margin-bottom: 6px; } @media screen and (max-width: 1480px) { .s-staff__spec .-job{ /* font-size: 20px; */ } } @media screen and (max-width: 768px) { .s-staff__spec .-job{ font-size: 18px; } } .s-staff__spec .-skill{ font-size: 16px; line-height: 1.5; letter-spacing: 0.1em; } @media screen and (max-width: 1480px) { .s-staff__spec .-skill{ /* font-size: 15px; */ } } @media screen and (max-width: 768px) { .s-staff__spec .-skill{ font-size: 14px; } } .s-staff__notes{ } @media screen and (max-width: 768px) { .s-staff__notes{ } } .s-staff__notes dl{ margin-bottom: 18px; } @media screen and (max-width: 768px) { .s-staff__notes dl{ margin-bottom: 10px; } } .s-staff__notes dl dt{ position: relative; font-size: 18px; font-weight: 500; line-height: 1.8; letter-spacing: 0.1em; margin-bottom: 5px; padding-left:28px; } @media screen and (max-width: 1480px) { .s-staff__notes dl dt{ /* font-size: 16px; */ padding-left:23px; } } @media screen and (max-width: 768px) { .s-staff__others dl dt{ font-size: 16px; } } .s-staff__notes dl dt::before{ position: absolute; content: ''; top: 16px; left:0; display: inline-block; width: 15px; height: 1px; background-color: #161616; } @media screen and (max-width: 1480px) { .s-staff__notes dl dt::before{ width: 13px; } } .s-staff__notes dl dd{ font-size: 16px; line-height: 1.5; padding-left:28px; } @media screen and (max-width: 1480px) { .s-staff__notes dl dd{ /* font-size: 15px; */ } } @media screen and (max-width: 768px) { .s-staff__notes dl dd{ font-size: 14px; padding-left:23px; } } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } /* ============================== flow.scss ================================= */ .flow-tab { padding: 120px 0 60px; } @media screen and (max-width: 768px) { .flow-tab { padding: 60px 0 30px; } } .flow-tab .flow-tab__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .flow-tab .flow-tab__tab { width: calc(50% - 10px); border-top: 2px solid #161616; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 20px; } @media screen and (max-width: 768px) { .flow-tab .flow-tab__tab { padding: 20px 16px; } } .flow-tab .flow-tab__tab.-active { background-color: #161616; color: #fff; } .flow-content { padding: 40px 0; } .flow-content .flow-content__headline { position: relative; margin-top: -10px; padding: 30px 0 50px; text-align: center; font-size: 36px; font-weight: 300; letter-spacing: 0.23em; } @media screen and (max-width: 768px) { .flow-content .flow-content__headline { line-height: 1.4; font-size: 26px; } } .flow-content .flow-content__headline::before { content: attr(data-ruby); position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-family: "Oswald", sans-serif; font-size: 16px; letter-spacing: 0.05em; } .flow-content .flow-content__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .flow-content .flow-content__item:not(:last-child)::before { content: ""; position: absolute; top: 0; left: 75px; z-index: -1; width: 1px; height: 100%; background-color: #161616; } @media screen and (max-width: 768px) { .flow-content .flow-content__item:not(:last-child)::before { display: none; } } .flow-content .flow-content__item:not(:last-child) .flow-content__content { padding: 25px 0 120px 100px; } @media screen and (max-width: 768px) { .flow-content .flow-content__item:not(:last-child) .flow-content__content { padding: 0 0 60px; } } .flow-content .flow-content__item .flow-content__figure { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 150px; height: 150px; border: 1px solid #161616; border-radius: 50%; background-color: #fff; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: opacity transform; } .flow-content .flow-content__item .flow-content__figure.is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (max-width: 768px) { .flow-content .flow-content__item .flow-content__figure { position: absolute; top: 0; right: 0; z-index: 0; opacity: 0; -webkit-transform: scale(0.5) translateY(50px); transform: scale(0.5) translateY(50px); -webkit-transform-origin: top right; transform-origin: top right; } .flow-content .flow-content__item .flow-content__figure.is-active { opacity: 0.3; -webkit-transform: scale(0.5) translateY(0); transform: scale(0.5) translateY(0); } } .flow-content .flow-content__item .flow-content__content { padding: 25px 0 95px 100px; width: calc(100% - 150px); opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: opacity 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); will-change: opacity transform; } .flow-content .flow-content__item .flow-content__content.is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (max-width: 768px) { .flow-content .flow-content__item .flow-content__content { padding: 0; width: 100%; } } .flow-content .flow-content__item .flow-content__content .flow-content__content__headline { position: relative; padding-top: 25px; font-size: 26px; letter-spacing: 0.22em; font-weight: 400; } @media screen and (max-width: 768px) { .flow-content .flow-content__item .flow-content__content .flow-content__content__headline { font-size: 20px; letter-spacing: 0.1em; } } .flow-content .flow-content__item .flow-content__content .flow-content__content__headline::before { content: "Step." attr(data-ruby); position: absolute; top: 0; left: 0; font-family: "Oswald", sans-serif; font-weight: 300; font-size: 16px; line-height: 1; letter-spacing: 0.05em; } .flow-content .flow-content__item .flow-content__content .flow-content__content__text { margin-top: 20px; } .flow-content .flow-content__item .flow-content__content__subbox { width: 100%; margin-top: 50px; background-color: #f2f2f2; padding: 75px 120px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 1180px) { .flow-content .flow-content__item .flow-content__content__subbox { padding: 60px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 880px) { .flow-content .flow-content__item .flow-content__content__subbox { margin-top: 20px; padding: 30px 16px; } } .flow-content .flow-content__item .flow-contact__inner__tel { width: 50%; } @media screen and (max-width: 1180px) { .flow-content .flow-content__item .flow-contact__inner__tel { width: 80%; max-width: 320px; } } .flow-content .flow-content__item .flow-contact__inner__tel .-link { font-family: "Quicksand", sans-serif; font-size: 40px; line-height: 1; letter-spacing: 0.04em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } @media screen and (max-width: 1180px) { .flow-content .flow-content__item .flow-contact__inner__tel .-link { font-size: 32px; letter-spacing: 0.03em; margin-top: 10px; } } .flow-content .flow-content__item .flow-contact__inner__tel .-link .i-tel { width: 0.6em; height: 0.6em; margin-right: 0.4em; } .flow-content .flow-content__item .flow-contact__inner__mail { width: 50%; color: #161616; } @media screen and (max-width: 1180px) { .flow-content .flow-content__item .flow-contact__inner__mail { width: 100%; margin-top: 24px; max-width: 320px; } } .flow-content .flow-content__item .flow-contact__inner__mail .c-btn { width: 90%; margin-left: 10%; padding: 1.2em 1em; } @media screen and (max-width: 1180px) { .flow-content .flow-content__item .flow-contact__inner__mail .c-btn { width: 100%; margin: 0 auto; } } @media (hover: hover) and (pointer: fine) { .flow-content .flow-content__item .flow-contact__inner__mail .c-btn:hover .i-mail { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236px%22%20height%3D%2230px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M31.985%2C29.625%20L4.151%2C29.625%20C2.105%2C29.625%200.440%2C27.961%200.440%2C25.914%20L0.440%2C4.575%20C0.440%2C2.528%202.105%2C0.864%204.151%2C0.864%20L31.985%2C0.864%20C34.31%2C0.864%2035.696%2C2.528%2035.696%2C4.575%20L35.696%2C25.914%20C35.696%2C27.961%2034.31%2C29.625%2031.985%2C29.625%20ZM33.840%2C4.575%20C33.840%2C3.551%2033.8%2C2.719%2031.985%2C2.719%20L4.151%2C2.719%20C3.128%2C2.719%202.296%2C3.551%202.296%2C4.575%20L2.296%2C25.914%20C2.296%2C26.937%203.128%2C27.770%204.151%2C27.770%20L31.985%2C27.770%20C33.8%2C27.770%2033.840%2C26.937%2033.840%2C25.914%20L33.840%2C4.575%20ZM20.755%2C17.816%20C19.939%2C18.363%2019.4%2C18.637%2018.69%2C18.637%20C17.133%2C18.637%2016.197%2C18.363%2015.381%2C17.815%20L6.560%2C11.934%20C6.133%2C11.650%206.18%2C11.72%206.302%2C10.647%20C6.585%2C10.220%207.160%2C10.106%207.589%2C10.389%20L16.412%2C16.272%20C17.419%2C16.949%2018.718%2C16.946%2019.723%2C16.274%20L28.687%2C10.298%20C29.114%2C10.12%2029.690%2C10.128%2029.973%2C10.554%20C30.258%2C10.980%2030.143%2C11.559%2029.716%2C11.841%20L20.755%2C17.816%20Z%22%2F%3E%3C%2Fsvg%3E"); } } .flow-content .flow-content__item .flow-contact__inner__mail .i-mail { margin-right: 1.2em; } .sale-content-purchase { position: relative; padding: 150px 0 50px; margin-bottom: 150px; } .sale-content-purchase::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: calc(100% - (100% - 1280px) / 4); height: 100%; z-index: -1; background-color: #f2f2f2; } @media screen and (max-width: 1320px) { .sale-content-purchase::before { width: calc(85%); display: none; } } .sale-content-purchase .flow-content__item .flow-content__content__subbox { background-color: #fff; } @media screen and (max-width: 1320px) { .sale-content-purchase .flow-content__item .flow-content__content__subbox { background-color: #f2f2f2; } } .flow-content__figure .i-mail { width: 51px; height: 42px; } /* ============================== form.scss ================================= */ input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; color: inherit; } label { cursor: pointer; } /* スピンボタン非表示 chrome,safari */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button, input[type=month]::-webkit-outer-spin-button, input[type=month]::-webkit-inner-spin-button, input[type=datetime-local]::-webkit-outer-spin-button, input[type=datetime-local]::-webkit-inner-spin-button, input[type=week]::-webkit-outer-spin-button, input[type=week]::-webkit-inner-spin-button, input[type=time]::-webkit-outer-spin-button, input[type=time]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button { /*-webkit-appearance: none; margin: 0;*/ display: none; } /* スピンボタン非表示(firefox) */ input[type=number], input[type=month], input[type=datetime-local], input[type=week], input[type=time], input[type=date] { -moz-appearance: textfield; } /* クリアボタン非表示 */ input[type=date]::-webkit-clear-button, input[type=month]::-webkit-clear-button, input[type=datetime-local]::-webkit-clear-button, input[type=time]::-webkit-clear-button, input[type=week]::-webkit-clear-button { -webkit-appearance: none; } /* input */ input { border: 1px solid #d7dede; background-color: #f6f9f9; -webkit-transition: border 0.2s ease-out; transition: border 0.2s ease-out; color: inherit; outline: 0; padding: 1.7rem 1rem; } /* サーチキャンセルボタンのデザイン変更 */ input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; background-image: url(cancel.svg); background-repeat: no-repeat; background-size: cover; /* サーチキャンセルボタンを非表示にする場合 */ /*-webkit-appearance: none;*/ } input[type=search]::-webkit-search-decoration { display: none; } input[type=search]:focus { outline-offset: -2px; } /* パスワードの表示/非表示の切り替えスイッチ表示(IE、Edge)の非表示 */ input[type=password]::-ms-reveal { display: none; } /* デフォルトのinputを隠す */ input[type=radio] { display: initial; position: relative; opacity: 0; display: none; } /* ラベルの前の四角形を作る */ input[type=radio]::before { content: ""; position: absolute; border: 2px solid #343434; width: 16px; height: 16px; margin-top: 4px; } /* ラベルの前の四角形のフォーカス時 */ input[type=radio]:focus + label::before { border: 2px solid #e74c3c; } /* SVGの位置と大きさの指定 */ input[type=radio] + label > svg { width: 20px; height: 20px; position: relative; margin-right: 5px; left: 3px; top: 3px; } /* チェックマークの設定(未チェック時) */ input[type=radio] + label > svg > path { fill: none; stroke: #27ae60; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 100; stroke-opacity: 0; stroke-width: 8px; -webkit-transition: stroke-dashoffset 0.2s ease-out; transition: stroke-dashoffset 0.2s ease-out; } /* チェックマークの設定(チェック時) */ input[type=radio]:checked + label > svg > path { stroke-dashoffset: 0; stroke-opacity: 1; } /* ラベルの位置調整 */ input[type=radio] + label { left: -30px; position: relative; } /* デフォルトのinputを隠す */ input[type=checkbox] { display: initial; position: relative; opacity: 0; display: none; } /* ラベルの前の四角形を作る */ input[type=checkbox] + label::before { content: ""; position: absolute; border: 2px solid #343434; width: 16px; height: 16px; margin-top: 4px; } /* ラベルの前の四角形のフォーカス時 */ input[type=checkbox]:focus + label::before { border: 2px solid #e74c3c; } /* SVGの位置と大きさの指定 */ input[type=checkbox] + label > svg { width: 20px; height: 20px; position: relative; margin-right: 5px; left: 3px; top: 2px; } /* チェックマークの設定(未チェック時) */ input[type=checkbox] + label > svg > path { fill: none; stroke: #e74c3c; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-opacity: 0; stroke-width: 8px; -webkit-transition: stroke-dashoffset 0.1s ease-out; transition: stroke-dashoffset 0.1s ease-out; } /* チェックマークの設定(チェック時) */ input[type=checkbox]:checked + label > svg > path { stroke-dashoffset: 0; stroke-opacity: 1; } /* ラベルの位置調整 */ input[type=checkbox] + label { left: -30px; position: relative; } select { /* 右端の▼を消す */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; /* 代わりに任意の画像を指定 */ background: #eee url(triangle_down.svg) no-repeat center right 10px/16px 16px; background-size: 10px; } /* 右端の▼を消す(IE) */ select::-ms-expand { display: none; } select:focus { background: #eee url(triangle_up.svg) no-repeat center right 10px/16px 16px; background-size: 10px; border-bottom: 1px solid #e74c3c; outline: none; } textarea { padding: 1rem; border-radius: 0; resize: none; border: 1px solid #d7dede; background-color: #f6f9f9; -webkit-transition: border 0.2s ease-out; transition: border 0.2s ease-out; outline: none; width: 100%; } textarea::-webkit-scrollbar { width: 10px; } textarea::-webkit-scrollbar-track { background-color: #eee; } textarea::-webkit-scrollbar-thumb { background-color: #ccc; } textarea:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } input:-ms-input-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder, textarea:-ms-input-placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-ms-input-placeholder, :-ms-input-placeholder, ::-ms-input-placeholder, :-ms-input-placeholder { color: #d7dede !important; } input::-ms-input-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input::-ms-input-placeholder, input::-webkit-input-placeholder, textarea::-ms-input-placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-ms-input-placeholder, ::-ms-input-placeholder, ::-ms-input-placeholder, :-ms-input-placeholder { color: #d7dede !important; } input::placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, input:-ms-input-placeholder, textarea:-ms-input-placeholder, input::-ms-input-placeholder, textarea::-ms-input-placeholder, ::placeholder, ::-ms-input-placeholder, :-ms-input-placeholder { color: #d7dede !important; } /* auto complete(chrome) */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #eee inset; -webkit-text-fill-color: #333 !important; } input:invalid { /* 入力値がOKのときのスタイルを記述 */ } input:valid { /* 入力値がNGのときのスタイルを記述 */ } .form { padding: 6.6rem 0 8rem; } .form .form__inner { max-width: 1232px; margin: 0 auto; width: 100%; padding: 0 1.6rem; } .form .form__headline { font-size: 4rem; font-weight: bold; line-height: 1; position: relative; padding: 3.2rem 0; letter-spacing: 0.16em; margin-bottom: 2.8rem; } @media screen and (max-width: 1180px) { .form .form__headline { font-size: 3.2rem; } } .form .form__headline::before { content: ""; position: absolute; display: block; top: 0; left: 0; height: 0.4rem; width: 6rem; } input[type=checkbox] + .mwform-checkbox-field-text { position: relative; padding-left: 1rem; display: inline-block; } input[type=checkbox] + .mwform-checkbox-field-text::before { content: ""; position: absolute; top: calc(50% - 1.1rem); left: -27px; width: 1.8rem; height: 1.8rem; border: 1px solid #161616; } input[type=checkbox]:checked + .mwform-checkbox-field-text::after { content: ""; position: absolute; top: calc(50% - .8rem); left: -2.1rem; width: 0.5rem; height: 1rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 3px solid #222; border-right: 3px solid #222; } input[type=radio] { padding: 0rem 1rem; } input[type=radio] + .mwform-radio-field-text { position: relative; /* top: 0.4rem; */ margin-right: 3.2rem; } input[type=radio] + .mwform-radio-field-text::before { content: ""; position: absolute; top: calc(50% - 0.8rem); left: -2.6rem; width: 1.6rem; height: 1.6rem; border: 1px solid #161616; border-radius: 50%; } input[type=radio] + .mwform-radio-field-text::after { content: ""; position: absolute; top: calc(50% - .3rem); left: -2.1rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; opacity: 0; background-color: #333; } input[type=radio]:checked + .mwform-radio-field-text::after { opacity: 1; } .mw_wp_form { display: block; } @media screen and (max-width: 1320px) { .mw_wp_form { padding: 2rem 0; } } .mw_wp_form .common__links { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: 6.4rem; } @media screen and (max-width: 1180px) { .mw_wp_form .common__links { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .mw_wp_form .common__links__item { padding: 0 8.4rem 1.7rem 0.8rem; margin: 0 2.4rem; } @media screen and (max-width: 1180px) { .mw_wp_form .common__links__item { max-width: 50%; margin: 0 auto 4rem; } } @media screen and (max-width: 880px) { .mw_wp_form .common__links__item { padding: 0 3.4rem 1.7rem 0.8rem; } } .mw_wp_form .common__links__item .common__links__text::before { top: calc(50% - 0.7em); } @media screen and (max-width: 1320px) { .mw_wp_form .common__links__item .common__links__text::before { top: calc(50% - 0.9em); } } .mw_wp_form .common__links__item .common__links__text::after { top: calc(50% - 1.4em); } @media screen and (max-width: 1320px) { .mw_wp_form .common__links__item .common__links__text::after { top: calc(50% - 1.7em); } } .mw_wp_form .common__links__item[name=submitBack] { padding: 0 0.8rem 1.7rem 8.4rem; } @media screen and (max-width: 880px) { .mw_wp_form .common__links__item[name=submitBack] { padding: 0 0.8rem 1.7rem 6.2rem; } } .mw_wp_form .common__links__item[name=submitBack] .common__links__text::after { left: 18px; } .mw_wp_form .common__links__item[name=submitBack] .common__links__text::before { left: 32px; border-top: none; border-right: none; border-left: 2px solid #222; border-bottom: 2px solid #222; } @media screen and (max-width: 880px) { .mw_wp_form .common__links__item[name=submitBack] .common__links__text::before { left: 28px; border-left: 1px solid #222; border-bottom: 1px solid #222; } } .mw_wp_form .common__links__item[name=submitBack]:hover .common__links__text::before { -webkit-transform: translateX(-1rem) rotate(45deg); transform: translateX(-1rem) rotate(45deg); } .mw_wp_form .common__links__item[name=submitBack]:hover .common__links__text::after { -webkit-transform: translateX(-1rem); transform: translateX(-1rem); } .mw_wp_form .error { color: #f55; font-size: 1.4rem; } .mw_wp_form div.form_tr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 3rem; } @media screen and (max-width: 1480px) { .mw_wp_form div.form_tr { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; margin-bottom: 1rem; } } #wysiwyg .mw_wp_form div.form_tr { margin-bottom: 1rem; } .mw_wp_form .form_th { display: block; min-width: 24rem; margin-right: 2.5rem; font-size: 1.8rem; line-height: 1.4; position: relative; padding: 1.7rem 6rem 1.7rem 0; } @media screen and (max-width: 1480px) { .mw_wp_form .form_th { min-width: 100%; } } .mw_wp_form .form_th.required::after { content: "必須"; font-size: 14px; line-height: 1; position: absolute; right: 0; top: calc(1.8rem); display: block; padding: 0.3em 1rem; border: 1px solid #161616; color: #161616; } @media screen and (max-width: 1480px) { .mw_wp_form .form_th.required::after { position: relative; right: -10px; top: 0; display: inline-block; } } .mw_wp_form .form_td { width: 100%; max-width: calc(100% - 24rem - 2.5rem); } @media screen and (max-width: 1480px) { .mw_wp_form .form_td { max-width: calc(100%); } } .mw_wp_form .form_td .form_td__flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 880px) { .mw_wp_form .form_td .form_td__flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .mw_wp_form .form_td .form_td__flex:not(:last-child) { margin-bottom: 2rem; } .mw_wp_form .form_td .form_td__flex-label { max-width: 13rem; margin-right: 2rem; width: 100%; display: block; } @media screen and (max-width: 880px) { .mw_wp_form .form_td .form_td__flex-label { max-width: 100%; } } .mw_wp_form .form_td .form_td__flex-block { width: calc(100% - 13rem); } @media screen and (max-width: 880px) { .mw_wp_form .form_td .form_td__flex-block { width: 100%; } } .mw_wp_form .form_td.mw-radio { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 1480px) { .mw_wp_form .form_td.mw-radio { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .mw_wp_form .form_td.mw-radio .mwform-radio-field.horizontal-item { display: block; } .mwform-checkbox-field label, .mwform-radio-field label { padding-left: 3rem; } .mw_wp_form .form_td.mw-radio .mwform-checkbox-field.horizontal-item { display: block; margin: 1.7rem 0 1.3rem !important; width: 100%; } @media screen and (max-width: 1180px) { .mw_wp_form .form_td.mw-radio .mwform-checkbox-field.horizontal-item { width: 100%; } } @media screen and (max-width: 1480px) { .mw_wp_form .form_td.mw-radio label { display: block; padding: 0.5rem 0; } } .mw_wp_form .form_td .horizontal-item { margin: 0 10px 0 0 !important; } .mw_wp_form .form_td-ppolicy a { text-decoration: underline; } .mw_wp_form .error { display: block; width: 100%; margin: 0.5rem 0 0; } input { width: 100%; } .form_btn__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 8rem; } @media screen and (max-width: 1320px) { .form_btn__list { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 1180px) { .form_btn__list { margin-top: 4rem; } } .form_btn__list .c-btn { width: 100%; } .form_btn__list .c-btn.send-btn{ } @media screen and (max-width: 768px) { .form_btn__list .c-btn.send-btn{ margin-top: 2rem; } } .form_btn__list .form_btn__confirm { display: block; } .form_btn__list .form_btn__send, .form_btn__list .form_btn__back { display: none; } .form_iframe { width: 100%; max-width: 800px; height: 400px; overflow: scroll; padding: 32px 16px; border: 1px solid #d7dede; background-color: #f6f9f9; } .form_iframe p { margin-top: 0.5em; } .form_iframe p + p { margin-top: 0; } .form_iframe h5 { margin-top: 1em; } .mw_wp_form_confirm .form_td { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 15px 0; } .mw_wp_form_confirm .form_td.mw-radio { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .mw_wp_form_confirm .confirm-block { border: 1px solid #d7dede; background-color: #f6f9f9; padding: 2rem; } .mw_wp_form_confirm .form_btn__list .form_btn__confirm { display: none; } .mw_wp_form_confirm .form_btn__list .form_btn__send, .mw_wp_form_confirm .form_btn__list .form_btn__back { display: block; } .mw_wp_form_confirm .form_btn__list .form_btn__back { width: 40%; } @media screen and (max-width: 1320px) { .mw_wp_form_confirm .form_btn__list .form_btn__back { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; width: 100%; } } @media screen and (max-width: 1480px) { .mw_wp_form_confirm .form_btn__list .form_btn__back .form_btn__target { padding: 2em 1em; } } @media screen and (max-width: 1320px) { .mw_wp_form_confirm .form_btn__list .form_btn__back .form_btn__target { padding: 2em 2em; } } .mw_wp_form_confirm .form_btn__list .form_btn__back svg { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); left: 3.5em; right: auto; } .mw_wp_form_confirm .form_btn__list .form_btn__send { width: 55%; } @media screen and (max-width: 1320px) { .mw_wp_form_confirm .form_btn__list .form_btn__send { width: 100%; -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-bottom: 1em; } } .mw_wp_form_confirm .form_btn__back { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } .mw_wp_form_confirm .form_btn__back button { text-decoration: underline; } .section__send__link { border: 1px solid #e9e9e9; border-radius: 5px; width: 80rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto 8.2rem; padding: 4.8rem 2rem; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1320px) { .section__send__link { width: calc(100% - 2rem); padding: 2em 1em; margin: 0 auto 4.2rem; } } .section__send__link::before { content: ""; position: absolute; z-index: -1; background-color: #fafafa; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); transform: scaleX(0); } .section__send__link:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .section__send__link:hover .common__arrow { -webkit-animation: arrow cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s both; animation: arrow cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s both; } .section__send__link .send-link-text { font-size: 22px; line-height: 1; letter-spacing: 0.13em; } @media screen and (max-width: 1320px) { .section__send__link .send-link-text { font-size: 1.6rem; margin-right: 1rem; } } .section__send__link .send-link-arrow { position: absolute; top: calc(50% - 2.8rem); right: 3.4rem; } .section__contact .contact__finish .contact__finish__headline { font-size: 40px; line-height: 2; text-align: center; font-weight: 400; position: relative; margin-bottom: 2rem; padding-bottom: 3.4rem; letter-spacing: 0.07em; text-align: center; } @media screen and (max-width: 1320px) { .section__contact .contact__finish .contact__finish__headline { font-size: 2.6rem; line-height: 1.6; padding-bottom: 4.4rem; } } .section__contact .contact__finish .contact__finish__headline::after { content: ""; position: absolute; bottom: 0; left: 50%; background-color: #222222; width: 1px; height: 30px; } .section__contact .contact__finish .contact__finish__subline { line-height: 2.125; text-align: center; letter-spacing: 0.2em; margin-bottom: 6.4rem; } .section__contact .contact__finish .section__contact__link { border: 1px solid #e9e9e9; border-radius: 5px; width: 80rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto 8.2rem; padding: 4.8rem 2rem; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1320px) { .section__contact .contact__finish .section__contact__link { width: calc(100% - 2rem); padding: 2em 1em; margin: 0 auto 4.2rem; } } .section__contact .contact__finish .section__contact__link::before { content: ""; position: absolute; z-index: -1; background-color: #fafafa; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.3s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); transform: scaleX(0); } .section__contact .contact__finish .section__contact__link:hover::before { -webkit-transform: scaleX(1); transform: scaleX(1); } .section__contact .contact__finish .section__contact__link:hover .common__arrow { -webkit-animation: arrow cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s both; animation: arrow cubic-bezier(0.55, 0.05, 0.22, 0.99) 1s both; } .section__contact .contact__finish .section__contact__link .contact-link-text { font-size: 22px; line-height: 1; letter-spacing: 0.13em; } @media screen and (max-width: 1320px) { .section__contact .contact__finish .section__contact__link .contact-link-text { font-size: 1.6rem; margin-right: 1rem; } } .section__contact .contact__finish .section__contact__link .contact-link-arrow { position: absolute; top: calc(50% - 2.8rem); right: 3.4rem; } .section__contact .contact__finish .section__contact__link .contact-link-arrow svg { fill: none; stroke: #575757; stroke-linecap: round; stroke-linejoin: round; } @media screen and (max-width: 1320px) { .section__contact .contact__finish .section__contact__link .contact-link-arrow svg { width: 4rem; } } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } /* ============================== news.scss ================================= */ .main { padding: 120px 0 100px; position: relative; background: #e6dac7; } @media screen and (max-width: 880px) { .main { padding: 20px 0; } } .main .main__wrap { width: 100%; max-width: 1340px; padding: 0 20px; margin: 0 auto; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 1320px) { .main .main__wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-flow: column-reverse; -ms-flex-flow: column-reverse; flex-flow: column-reverse; } } .sidebar { width: 300px; } @media screen and (max-width: 1320px) { .sidebar { width: 100%; margin: 40px auto 20px; } } .sidebar .sidebar__inner { position: -webkit-sticky; position: sticky; top: 140px; left: 0; } .sidebar .sidebar__block:not(:last-child) { margin-bottom: 100px; } @media screen and (max-width: 880px) { .sidebar .sidebar__block:not(:last-child) { margin-bottom: 40px; } } .sidebar .sidebar__subline { font-size: 22px; line-height: 1; } .sidebar ul { margin-top: 28px; } .sidebar ul li a { padding-left: 30px; color: #f8501d; position: relative; } .sidebar ul li a::before { content: ""; position: absolute; top: calc(50% - 1px); left: 0; z-index: 2; display: block; width: 14px; height: 2px; background-color: #161616; } .sidebar ul li:not(:last-child) { margin-bottom: 12px; } .content { width: calc(100% - 300px); margin: 0 auto; position: relative; } @media screen and (max-width: 1320px) { .content { width: 100%; } } .content .content__section { width: 100%; } .content .report__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .content .c-article { margin-bottom: 50px; } .content .detail { border: 2px solid #161616; border-radius: 30px; background-color: #fff; width: 100%; padding: 80px 90px; } @media screen and (max-width: 1320px) { .content .detail { padding: 40px 15px; } } .content .detail .c-article__base__info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } .content .detail .c-article__base__cat { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: calc(100% - 100px); } .content .detail .c-article__base__cat a { position: relative; z-index: 3; display: inline-block; border: 2px solid #161616; background-color: #f8501d; color: #fff; border-radius: 2em; font-size: 14px; line-height: 2; padding: 0 13px; margin-bottom: 6px; } @media screen and (max-width: 880px) { .content .detail .c-article__base__cat a { font-size: 10px; line-height: 2.4; } } .content .detail .c-article__base__time { display: block; font-size: 16px; font-family: "Poppins"; color: #f8501d; text-align: right; text-transform: uppercase; line-height: 1; margin-right: 24px; } .content .detail .c-article__base__headline { margin-top: 4px; font-size: 30px; line-height: 1.6; font-weight: 700; overflow: hidden; display: block; width: 100%; padding-bottom: 26px; border-bottom: 2px solid #eeebe8; } @media screen and (max-width: 880px) { .content .detail .c-article__base__headline { font-size: 15px; } } .content .detail .detail__thum { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 50px; } .content .detail .detail__thum img { border-radius: 20px; } .content .detail #wysiwyg { margin-top: 50px; } /* 下線がうにょんってなって、うにょんってなるアニメーション */ @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50.1% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @media screen and (max-width: 1320px) { @-webkit-keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } @keyframes linkborder { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } 49.9% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 1; } 50% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 110px; opacity: 0; } 50.1% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 0; } 50.2% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: -110px; opacity: 1; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); background-position-x: 0; } } } /* 回転のアニメーション */ @keyframes circle { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 99.9%, to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 矢印が行って帰るアニメーション */ @keyframes c-arrow { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; } 50.1% { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } *[data-san=fade] { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=fade].is-active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } *[data-san=ttl] span { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=ttl].is-active span { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline] { opacity: 0; -webkit-transform: translateY(2em); transform: translateY(2em); -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform-origin: top center; transform-origin: top center; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline]::before { -webkit-transform: translateY(-2em) scaleX(0); transform: translateY(-2em) scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-backface-visibility: hidden; backface-visibility: hidden; } *[data-san=subline].is-active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } *[data-san=subline].is-active::before { -webkit-transform: translateY(0) scaleX(1); transform: translateY(0) scaleX(1); } /* テキストスライドのアニメーション */ @keyframes scrolltext { 0% { background-position: 0; } 100% { background-position: -3939px; } } @keyframes zoomUp { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .mv__swiper .swiper-slide-active img, .mv__swiper .swiper-slide-duplicate-active img, .mv__swiper .swiper-slide-prev img { -webkit-animation: zoomUp 10s linear 0s 1 normal both; animation: zoomUp 10s linear 0s 1 normal both; display: block; } .mv__swiper .slide-img img { display: block; } @keyframes mv-arrow { 0% { opacity: 0; bottom: calc(10px + 101px); } 40% { opacity: 0; bottom: calc(10px + 101px); } 50% { opacity: 1; bottom: 20px; } 90% { opacity: 1; bottom: 10px; } 100% { opacity: 0; bottom: calc(10px - 101px); } } /* ============================== property.scss ================================= */ .s-content { padding: 115px 0 10px; } @media screen and (max-width: 768px) { .s-content { padding: 50px 0 10px; } } .s-content .s-content__cat { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .s-content .s-content__cat li:not(:last-child) { margin-right: 40px; } .s-content .s-content__cat .s-content__cat__item { position: relative; padding-right: 10px; padding-top: 10px; } .s-content .s-content__cat .s-content__cat__item::before { content: attr(data-ruby); position: absolute; top: 0; right: 0; font-size: 10px; font-family: "Oswald", sans-serif; font-weight: 300; } .s-content .s-property__content__list { margin-top: 100px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } @media screen and (max-width: 768px) { .s-content .s-property__content__list { margin-top: 50px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .s-content .s-property__content__list .c-btn2 { margin-top: 44px; } @media screen and (max-width: 1180px) { .s-content .s-property__content__list .c-btn2 { margin-top: 15px; } } @media screen and (max-width: 768px) { .s-content .s-property__content__list .c-btn2 { margin-top: 20px; } } .s-content .c-article { margin-bottom: 100px; width: calc(calc(100% - 120px) / 3) } @media screen and (max-width: 1180px) { .s-content .c-article { width: calc((100% - 60px) / 3); } } @media screen and (max-width: 768px) { .s-content .c-article { width: calc((100% - 15px) / 2); } } .s-content .c-article:not(:nth-child(3n)) { margin-right: 60px; } @media screen and (max-width: 1180px) { .s-content .c-article:not(:nth-child(3n)) { margin-right: 30px; } } @media screen and (max-width: 768px) { .s-content .c-article:not(:nth-child(3n)) { margin-right: 0; } } /* 検索パネル */ .search_panel { max-width: 777px; margin-left: auto; padding-bottom: 20px; border-bottom: 1px solid #161616; } .search_block_wrap{ display: flex; flex-direction: column; gap: 30px; } .search_block{ display: flex; gap: 15px 60px; } @media screen and (max-width: 768px) { .search_block { flex-direction: column; } } .search_list { display: flex; flex-wrap: wrap; gap: 15px 30px; flex: 1; } @media screen and (max-width: 768px) { .search_list { gap: 15px 15px; } } .search_title{ font-size: 16px; font-weight: 500; color: #333; } .search_label { background-color: #f2f2f2; display: flex; align-items: center; justify-content: center; padding: 0px 10px; } .search_label input[type=checkbox] { display: initial; position: relative; opacity: 1; margin: 0 10px 0 0; width: 16px; height: 16px; padding: 0; background-color: #f2f2f2; border: 1px solid #161616; cursor: pointer; } .search_label input[type="checkbox"]:checked { } .search_label input[type="checkbox"]:checked::after { content: ''; position: absolute; top: -1px; left: 4px; width: 5px; height: 10px; border-bottom: 3px solid #161616; border-right: 3px solid #161616; transform: rotate(45deg); } .search_submit_btn{ margin-left: auto; margin-right: 0; margin-top: 10px; } @media screen and (max-width: 768px) { .search_submit_btn{ margin-top: 40px; } } .btn_arrow_txt{ position: relative; padding-right: 80px; } .btn_arrow_txt::before{ content: ""; position: absolute; width: 5rem; height: 5rem; background-color: #fff; top: 50%; right: 0; transform: translateY(-50%); z-index: 3; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cline x1='18' y1='30' x2='37' y2='30' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M32 22L40 30L32 38' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cline x1='18' y1='30' x2='37' y2='30' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M32 22L40 30L32 38' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .btn_arrow_txt::after{ content: ""; position: absolute; width: 5rem; height: 5rem; border-radius: 50%; background-color: #161616; border: 1px solid #161616; top: 50%; right: 2px; transform: translateY(-50%); z-index: 2; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .btn_arrow_txt:hover::before{ background-color: #161616; } .btn_arrow_txt:hover::after{ background-color: #fff; } /* お知らせ検索パネル */ .news_search_area { margin-bottom: 40px; } @media screen and (max-width: 768px) { .news_search_area { margin-top: 30px; margin-bottom: 30px; } } .news_search_block_wrap{ display: flex; flex-direction: column; gap: 30px; } .news_search_block{ display: flex; gap: 15px 60px; } @media screen and (max-width: 768px) { .news_search_block { flex-direction: column; } } .news_search_list { display: flex; flex-wrap: wrap; gap: 15px 30px; flex: 1; } @media screen and (max-width: 768px) { .news_search_list { gap: 15px 15px; } } .news_search_label { background-color: #f2f2f2; display: inline-flex; align-items: center; justify-content: center; padding: 2px 20px; text-decoration: none; color: #161616; cursor: pointer; transition: all 0.3s; border: 1px solid transparent; } .news_search_label:hover { background-color: #161616; color: #fff; } .news_search_label.checked { background-color: #161616; color: #fff; } .news_search_item_name { font-size: 14px; font-weight: 500; } .s-access-top { position: relative; width: 100%; padding: 250px 0 130px; } @media screen and (max-width: 1320px) { .s-access-top { padding: 18vw 0 130px; } } @media screen and (max-width: 768px) { .s-access-top { padding: 15vw 0; } } .s-access-top.is-active .s-access-top__subline span { -webkit-transform: translateY(0); transform: translateY(0); } /* .s-access-top::after { content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; display: block; background-color: #f2f2f2; width: 70%; height: 100%; } */ .s-access-top .s-access-top__subline { content: "Property Information"; position: absolute; top: 77px; left: 2.5%; z-index: 2; display: block; font-size: 170px; letter-spacing: 0.07em; font-family: "Oswald", sans-serif; color: #ebebeb; line-height: 1; font-weight: 300; overflow: hidden; } @media screen and (max-width: 1480px) { .s-access-top .s-access-top__subline { font-size: 9vw; } } .s-access-top .s-access-top__subline span { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); transition: transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99), -webkit-transform 0.5s cubic-bezier(0.55, 0.05, 0.22, 0.99); -webkit-transform: translateY(100%); transform: translateY(100%); } .s-access-top .s-access-top__container { position: relative; z-index: 3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .s-access-top .s-access-top__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; } } .s-access-top .s-access-top__headline::after { top: 25px; right: calc(80px + 50px); } .s-access-top .s-access-top__content { width: calc(100% - 220px); padding-right: 160px; } @media screen and (max-width: 1480px) { .s-access-top .s-access-top__content { padding-right: 10%; } } @media screen and (max-width: 1320px) { .s-access-top .s-access-top__content { padding-right: 0; } } @media screen and (max-width: 1180px) { .s-access-top .s-access-top__content { width: calc(100% - 160px); } } @media screen and (max-width: 768px) { .s-access-top .s-access-top__content { width: calc(100%); margin-top: 20px; } } .s-access-top__content__wrapper{ display: flex; justify-content: space-between; gap: 50px; } @media screen and (max-width: 1180px) { .s-access-top__content__wrapper{ gap: 30px; } } @media screen and (max-width: 768px) { .s-access-top__content__wrapper{ flex-direction: column; gap: 30px; } } .s-access-top__imgbox{ width: 50%; } @media screen and (max-width: 768px) { .s-access-top__imgbox{ width: 100%; } } .s-access-top__textbox{ width: 50%; } @media screen and (max-width: 768px) { .s-access-top__textbox{ width: 100%; } } .s-access-top__content__headline { font-size: 26px; font-weight: 500; line-height: 2; } @media screen and (max-width: 768px) { .s-access-top__content__headline { font-size: 20px; } } .s-access-top__content__headline .i-external{ margin-left: 10px; } .s-access-top__content__address { font-size: 16px; line-height: 2; margin-top: 15px; margin-bottom: 15px; } @media screen and (max-width: 768px) { .s-access-top__content__address { font-size: 14px; margin-bottom: 10px; } } .s-access-top__content__address .number { font-family: "Oswald", sans-serif; } .s-access-top__content__table { /* width: calc(50% - 20px); */ /* border-top: 1px solid #161616; */ } @media screen and (max-width: 768px) { .s-access-top__content__table { width: 100%; } } .s-access-top__content__table dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 1px solid #161616; padding: 25px 0; } @media screen and (max-width: 768px) { .s-access-top__content__table dl { padding: 20px 0; } } .s-access-top__content__table dl:first-child { padding-top: 0px; } @media screen and (max-width: 1180px) { .s-access-top__content__table dl:first-child { padding-top: 0px; } } @media screen and (max-width: 768px) { .s-access-top__content__table dl:first-child { padding-top: 20px; } } .s-access-top__content__table dt { width: 18%; min-width: 80px; margin-right: 10px; } @media screen and (max-width: 768px) { .s-access-top__content__table dt { width: 30%; } } .s-access-top__content__table dd { width: 82%; flex: 1; } @media screen and (max-width: 768px) { .s-access-top__content__table dd { width: 70%; } } .s-access-top .s-access-top__map { margin-top: 50px; position: relative; width: 100%; height: 0; padding-top: 40%; } @media screen and (max-width: 768px) { .s-access-top .s-access-top__map { margin-top: 30px; position: relative; width: 100%; height: 0; padding-top: 70%; } } .s-access-top .s-access-top __map iframe { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; -webkit-filter: grayscale(1); filter: grayscale(1); }