@charset "utf-8"; /*====================================*\ * TOC / Breakpoints *------------------------------------ * Foundation * Layout * Object * ├ Project * ├ Components * └ Utilities（原則編集禁止） *------------------------------------ * ブレークポイント一覧（モバイルファースト） * max-width: 30em ･･･ スマホ * → min-width: 48em ･･･ タブレット * → min-width: 66.875em ･･･ PC・大型タブレット * min-width: 80em ･･･ PCワイドディスプレイ *------------------------------------ * Webフォント一覧 * ・ Caveat (.wf-caveat-n4-active) ･･･ ロゴ・見出しの英数字 * ・ Abel (.wf-abel-n4-active) ･･･ インターフェ―ス・本文などの英数字 * 遅延読み込みを行っているため子孫セレクタで適用する（htmlタグにclassがつく） * 例）.wf-caveat-n4-active .classname { font-family: Caveat, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } *------------------------------------ * 配色 * #fff（白） ･･･ ベースカラー (75%) * #f9be40（山吹色） ･･･ メインカラー (12.5%) * #957122（黄土色） ･･･ メインカラー（背景白の時のフォントなど） * #3d3e50（濃紺） ･･･ メインカラー (12.5%) * #f0918f（桃色） ･･･ アクセントカラー (5%) \*====================================*/ /*============================================================================*\ $Foundation \*============================================================================*/ @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; } html { font-size: 62.5%; } body { background: #fff url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22176.389mm%22%20height%3D%22176.389mm%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23f9be40%3B%7D.b%7Bfill%3A%23f0918f%3B%7D.c%7Bopacity%3A.7%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20class%3D%22c%22%3E%3Crect%20class%3D%22a%22%20x%3D%22321.376%22%20y%3D%22280.497%22%20width%3D%223.6%22%20height%3D%2216.922%22%20transform%3D%22translate(-100.718%20379.806)%20rotate(-53.897)%22%2F%3E%3Crect%20class%3D%22a%22%20x%3D%2282.132%22%20y%3D%22332.961%22%20width%3D%2211.443%22%20height%3D%2211.443%22%2F%3E%3Crect%20class%3D%22a%22%20x%3D%22382.57%22%20y%3D%2247.1%22%20width%3D%2222.537%22%20height%3D%2222.537%22%20transform%3D%22translate(8.124%20157.058)%20rotate(-22.782)%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%2283.435%22%20y%3D%2249.14%22%20width%3D%2212.486%22%20height%3D%2212.486%22%20transform%3D%22translate(-12.896%2079.633)%20rotate(-45)%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M441.816%2C458.114l9.886%2C9.886-9.886%2C9.886-9.886-9.886%2C9.886-9.886M441.816%2C453.816l-14.184%2C14.184%2C14.184%2C14.184%2C14.184-14.184-14.184-14.184h0Z%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%2236.747%22%20y%3D%22174.698%22%20width%3D%2225.91%22%20height%3D%225.513%22%20transform%3D%22translate(-122.961%20113.049)%20rotate(-53.897)%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22213.154%22%20y%3D%22212.102%22%20width%3D%2210.677%22%20height%3D%2210.677%22%20transform%3D%22translate(-67.153%20101.57)%20rotate(-22.782)%22%2F%3E%3Crect%20class%3D%22a%22%20x%3D%22219.75%22%20y%3D%22398.94%22%20width%3D%2211.945%22%20height%3D%2211.945%22%20transform%3D%22translate(-139.183%20118.995)%20rotate(-22.782)%22%2F%3E%3Crect%20class%3D%22a%22%20x%3D%2225.587%22%20y%3D%22393.129%22%20width%3D%227.567%22%20height%3D%2235.564%22%20transform%3D%22translate(-319.935%20192.517)%20rotate(-53.897)%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22381.804%22%20y%3D%22219.171%22%20width%3D%2234.023%22%20height%3D%2234.023%22%20transform%3D%22translate(29.365%20516.079)%20rotate(-67.782)%22%2F%3E%3Crect%20class%3D%22a%22%20x%3D%22168.427%22%20y%3D%2298.771%22%20width%3D%2236.567%22%20height%3D%227.78%22%20transform%3D%22translate(-6.252%20193.023)%20rotate(-53.897)%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22136.334%22%20y%3D%22430.339%22%20width%3D%2221.585%22%20height%3D%2221.585%22%20transform%3D%22translate(-159.339%2091.386)%20rotate(-22.782)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); /* common/img/bg_tile.svg */ background-size: 250px 250px; color: #3d3e50; font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 1.4em; line-height: 1.625; } a { color: #a86462; word-break: break-all; transition: color .2s; } a:focus, a:hover { text-decoration: none; } a img { transition: opacity .2s; } a:focus img, a:hover img { opacity: .8; } /* リンク打消し */ .no-link { color: #3d3e50; text-decoration: none; transition: opacity .2s; } .no-link--action:focus, .no-link--action:hover { opacity: .8; } /* 画像リンク打消し */ .no-link-img img:focus, .no-link-img img:hover { opacity: 1; } @media (min-width: 48em) { body { background-size: 500px 500px; font-size: 1.6em; } } /*============================================================================*\ $Layout \*============================================================================*/ .wrapper { position: relative; width: 100%; max-width: 66.875em; /* 1070px(66.875em) - 15px - 15px = 1040px */ padding-left: 15px; padding-right: 15px; margin: 0 auto; } .wrapper--full { max-width: 100%; } /*============================================================================*\ $Object -- Project \*============================================================================*/ /*------------------------------------*\ Contents \*------------------------------------*/ /* Heading ---------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: bold; -moz-font-feature-settings: "pkna"; -webkit-font-feature-settings: "pkna"; font-feature-settings: "pkna"; } /* @note: line-heightをremで指定するとIEで崩れる */ .h1, .h2, .h3 { line-height: 1.4; letter-spacing: .05em; text-align: center; } .h1, .h2 { margin-bottom: 15px; } .h3 { margin-bottom: 10px; } .h4 { margin-bottom: 10px; font-size: 1.5rem; line-height: 1.6; letter-spacing: .05em; } .h4__sub { margin-left: 1em; font-size: 1.2rem; } .h5 { margin-bottom: 8px; line-height: 1.5; } /* Main */ .h-main { display: block; margin-top: .5em; } /* English */ .h-en { line-height: 1; letter-spacing: .05em; } .h-en--h1, .h-en--h2 { font-size: 2.2rem; } .h-en--h3 { font-size: 2rem; } .wf-caveat-n4-active .h-en { font-family: Caveat, Roboto, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .wf-caveat-n4-active .h-en--h1, .wf-caveat-n4-active .h-en--h2 { display: inline-block; transform: rotate(-3deg); font-size: 3.2rem; word-break: break-all; } .wf-caveat-n4-active .h-en--h3 { font-size: 2.3rem; } /* Hash */ .wf-caveat-n4-active .h-hash:before { content:"#"; font-size: .8em; margin-right: .25em; speak: none; } /* Line @note: 2行以上は線が消えるので、文字サイズを大きくして確認する 2行以上にしたい時は、.h-line__innerに適宜幅を指定する */ .h-line { overflow: hidden; } .h-line--center { text-align: center; } .h-line__inner { position: relative; display: inline-block; } .h-line__inner--center { padding-right: 10px; padding-left: 10px; } .h-line__inner--left { padding-right: 10px; } .h-line__inner:before, .h-line__inner:after { content: ""; position: absolute; top: 50%; height: 2px; width: 4096px; width: 100vw; margin-top: -1px; background-color: #3d3e50; } .h-line__inner:before { right: 100%; } .h-line__inner:after { left: 100%; } /* Section ---------------------------------- */ .section { padding-top: 15px; padding-bottom: 15px; } .section__lede { margin: 15px 0; font-weight: bold; line-height: 1.75; } @media (min-width: 48em) { /* Heading ---------------------------------- */ .h1 { margin-bottom: 40px; font-size: 2.2rem; } .h2 { margin-bottom: 40px; font-size: 1.8rem; } .h3 { margin-bottom: 20px; font-size: 1.8rem; } .h4 { margin-bottom: 20px; font-size: 2rem; } .h4__sub { font-size: 1.4rem; } .h-main { margin-top: 1em; } /* English */ .h-en--h1, .h-en--h2 { font-size: 5rem; } .h-en--h3 { font-size: 4rem; } .wf-caveat-n4-active .h-en--h1, .wf-caveat-n4-active .h-en--h2 { font-size: 6.8rem; } .wf-caveat-n4-active .h-en--h3 { font-size: 5.2rem; } /* Line */ .h-line__inner--center { padding-right: 20px; padding-left: 20px; } .h-line__inner--left { padding-right: 20px; } /* Section ---------------------------------- */ .section { padding-top: 60px; padding-bottom: 60px; } .section__lede { margin: 40px 0; } } /*------------------------------------*\ Header \*------------------------------------*/ .header { position: relative; padding: 15px 0; background: #3d3e50 url(../img/header_bg_other.jpg) no-repeat center; background-size: cover; color: #fff; } .header--what { background-image: url(../img/header_bg_what.jpg); } .header--interview { background-image: url(../img/header_bg_interview.jpg); } .header--support { background-image: url(../img/header_bg_support.jpg); } .header--contact { background-image: url(../img/header_bg_contact.jpg); } .header:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 40%; background: -moz-linear-gradient(top, rgba(61, 62, 80, .5) 0%, rgba(61, 62, 80, 0) 100%); background: -webkit-linear-gradient(top, rgba(61, 62, 80, .5) 0%,rgba(61, 62, 80, 0) 100%); background: linear-gradient(to bottom, rgba(61, 62, 80, .5) 0%,rgba(61, 62, 80, 0) 100%); } /* Site title ---------------------------------- */ .header-site-title { display: block; position: relative; z-index: 2; height: 47px; padding-right: 48px; text-align: center; } .no-js .header-site-title { padding: 0 15px; } .header-site-title img { width: 100%; max-width: 200px; } /* Skip navigation ---------------------------------- */ .skip-nav a { overflow: hidden; position: relative; z-index: 2; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; transition: none; } .skip-nav a:active, .skip-nav a:focus { display: block; top: 79px; left: 50%; clip: auto; width: 10em; padding: 1.5px 0; border: 2px solid #f9be40; margin-left: -5em; height: auto; background-color: rgba(61, 62, 80, .3); box-shadow: none; color: #f9be40; text-decoration: none; font-size: 1.4rem; font-weight: bold; text-align: center; } /* Global navigation ---------------------------------- */ .gnav { display: none; position: fixed; z-index: 100; top: 62px; right: 15px; width: 70%; box-shadow: 4px 4px 0 0 #3d3e50; font-weight: bold; line-height: 1.4; } .no-js .gnav { display: block; position: relative; top: auto; right: auto; width: 100%; } .gnav li + li { border-top: 2px solid #3d3e50; } .gnav a { display: block; padding: .75em .8em .75em 2.1751em; background-color: #f9be40; text-indent: -1.3751em; color: #3d3e50; text-decoration: none; } .gnav a:before { content: ""; display: inline-block; width: 0; height: 0; margin-right: .5em; margin-bottom: .2em; border-style: solid; border-width: 0 .875em .375em 0; /* font-size: 16px; = border-width: 0 14px 6px 0; */ border-color: transparent transparent #3d3e50 transparent; vertical-align: middle; transition: transform .2s; } .gnav a:focus:before, .gnav a:hover:before { transform: translateX(2px); } .header--what .gnav__what, .header--interview .gnav__interview, .header--support .gnav__support, .header--contact .gnav__contact { background-color: #3d3e50; color: #fff; } .header--what .gnav__what:before, .header--interview .gnav__interview:before, .header--support .gnav__support:before, .header--contact .gnav__contact:before { border-bottom-color: #fff; } /* Button */ .gnav-btn { position: fixed; z-index: 100; top: 15px; right: 15px; width: 48px; height: 48px; padding: 0; border: 2px solid #f9be40; background-color: transparent; color: #f9be40; line-height: 1; text-transform: uppercase; font-size: 11px; font-weight: bold; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; cursor: pointer; transition: .4s; } .no-js .gnav-btn { display: none; } .wf-abel-n4-active .gnav-btn { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: .1em; } .gnav-btn__txt { display: block; height: 100%; padding-top: 28px; } .gnav-btn:before, .gnav-btn:after, .gnav-btn__txt:before { content: ""; position: absolute; right: 0; left: 0; width: 24px; height: 2px; margin: auto; background-color: #f9be40; transition: .4s; } .gnav-btn:before { top: 6px; } .gnav-btn:after { top: 14px; } .gnav-btn__txt:before { top: 22px; } .gnav-btn:focus, .gnav-btn:hover { background-color: #f9be40; color: #3d3e50; } .gnav-btn:focus:before, .gnav-btn:focus:after, .gnav-btn:focus .gnav-btn__txt:before, .gnav-btn:hover:before, .gnav-btn:hover:after, .gnav-btn:hover .gnav-btn__txt:before { background-color: #3d3e50; } .gnav-btn.is-fixed { border-color: #3d3e50; background-color: rgba(255, 255, 255, .7); color: #3d3e50; } .gnav-btn.is-fixed:before, .gnav-btn.is-fixed:after, .is-fixed .gnav-btn__txt:before { background-color: #3d3e50; } .gnav-btn.is-active { border-color: #f9be40 #f9be40 #3d3e50; border-bottom-width: 3px; background-color: #f9be40; box-shadow: 4px 4px 0 0 #3d3e50; color: #3d3e50; } .gnav-btn.is-active:before, .gnav-btn.is-active:after { background-color: #3d3e50; } .gnav-btn.is-active:before { transform: translateY(7px) rotate(45deg); } .gnav-btn.is-active:after { transform: translateY(-1px) rotate(-45deg); } .gnav-btn.is-active .gnav-btn__txt:before { width: 0; opacity: 0; } /* Heading ---------------------------------- */ .header__heading { margin: 0; padding: 40px 0; border: 2px solid #f9be40; text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .3), 0 0 30px rgba(61, 62, 80, .3); } /* Introduction ---------------------------------- */ .header-intro { position: relative; z-index: 1; width: 100%; height: 32em; padding: 15px; border: 2px solid #f9be40; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 1.4rem; letter-spacing: .1em; line-height: 1.6; } .header-intro:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/header_bg_shadow.png) no-repeat center; background-size: contain; opacity: .5; } .header-intro-inner { position: absolute; right: 50%; transform: translateX(50%); height: 30em; } .ms .header-intro-inner { transform: translateX(25%); } /* Heading */ .header-intro__header { width: 4.5em; margin-left: 1.5em; } .header-intro__header img { width: 100%; } /* Body */ .header-intro__body { margin-top: 15px; text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .6), 0 0 30px #3d3e50; } .header-intro__body p { margin: 0 0 0 1em; } /* Scroll */ .header-intro__scroll { position: absolute; z-index: 1; right: 0; bottom: 40px; left: 0; margin: auto; font-size: 1.7rem; text-align: center; line-height: 1; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } .wf-caveat-n4-active .header-intro__scroll { font-family: Caveat, Roboto, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 2.3rem; } .header-intro__scroll a { display: inline-block; padding-bottom: 35px; color: #f9be40; text-decoration: none; transform: rotate(90deg); transition: transform .2s; } .header-intro__scroll a:after { content: ""; display: block; width: 54px; height: 13px; margin: -4px 0 0 25px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290.3%22%20height%3D%2236%22%20viewBox%3D%220%200%2090.3%2036%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bstroke-width%3A2px%3B%7D.a%2C.b%7Bfill%3Anone%3Bstroke%3A%23f9be40%3Bstroke-miterlimit%3A10%3B%7D.b%7Bstroke-width%3A3px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22b%22%20d%3D%22M.5%2C10l83.7%2C7.3L62.3%2C3.4l-1.4%2C17%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M18.3%2C29.2l48.2%2C4.2-12.6-8-.9%2C10.3%22%2F%3E%3C%2Fsvg%3E') no-repeat bottom; /* ../img/header_btn_arrow.svg */ } .header-intro__scroll a:focus, .header-intro__scroll a:hover { transform: rotate(92deg) translateX(5px); } /* Image ---------------------------------- */ .header-img { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .no-js .header-img { display: none; } .header-img__item { position: relative; width: 100%; height: 50%; } /* Heading */ .header-img__heading { position: absolute; z-index: 1; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; color: #f9be40; text-align: center; line-height: 1; letter-spacing: .1em; text-transform: uppercase; } .wf-abel-n4-active .header-img__heading { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .wf-abel-n4-active .header-img__heading:before { content:"#"; speak: none; } .header-img__heading--life { bottom: 10px; left: 22px; } .header-img__heading--work { right: 22px; bottom: 25px; transform: rotate(180deg); } /* List */ .header-img-list { height: 100%; } .header-img-list__item { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .header-img-list__item--life01 { background-image: url(../img/header_bg01_life.jpg); } .header-img-list__item--life02 { background-image: url(../img/header_bg02_life.jpg); } .header-img-list__item--work01 { background-image: url(../img/header_bg01_work.jpg); } .header-img-list__item--work02 { background-image: url(../img/header_bg02_work.jpg); } /* Slick */ .header-img .slick-list, .header-img .slick-track { overflow: hidden; /* はみ出し対策 */ height: 100%; } .header-img .slick-current { animation: scale 10s ease-out; } .header-img .is-pause .slick-current { animation-play-state: paused; } @keyframes scale { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } .header-img-btns { position: absolute; z-index: 1; bottom: 32px; left: 32px; opacity: .8; font-size: 1.4rem; } .header-img-dots .slick-dots { list-style: none; margin: 0; padding: 0; } .header-img-dots .slick-dots li { margin-bottom: 10px; } .header-img-dots .slick-dots button { display: block; overflow: hidden; width: 4.285714285714286em; /* 60px */ height: 5px; padding: 0; border: 2px solid #fff; background-color: #fff; text-indent: 100%; white-space: nowrap; cursor: pointer; transition: background .2s; } .header-img-dots .slick-dots button:focus, .header-img-dots .slick-dots button:hover, .header-img-dots .slick-dots .slick-active button { border-color: #f9be40; background-color: #f9be40; } .header-img-play__btn { position: relative; width: 4.285714285714286em; /* 60px */ padding: 1.5px 0 1.5px 18px; border: 2px solid #fff; background-color: transparent; font-weight: bold; letter-spacing: .05em; color: #fff; cursor: pointer; transition: .2s; } .header-img-play__btn:focus, .header-img-play__btn:hover, .header-img-play__btn.is-pause { background-color: #f9be40; border-color: #f9be40; color: #3d3e50; } .header-img-play__btn:before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 10px; height: 13px; margin: auto 0; border-right: 3px solid #fff; border-left: 3px solid #fff; transition: .2s; } .header-img-play__btn:focus:before, .header-img-play__btn:hover:before { border-color: #3d3e50; } .header-img-play__btn.is-pause:before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #3d3e50; } @media (max-width: 20em) { /* Introduction ---------------------------------- */ .header-intro { font-size: 4.5vw; } } @media (min-width: 48em) { .header { padding: 20px; } .header--index { height: 100vh; min-height: 48em; max-height: 1200px; } .header__inner { position: relative; /* JS trigger */ z-index: 1; height: 100%; padding: 30px 15px 15px; border: 2px solid #f9be40; } .header__inner:before, .header__inner:after { position: absolute; z-index: 1; top: 50%; color: #f9be40; line-height: 1; letter-spacing: .1em; text-transform: uppercase; font-size: 1.8rem; font-weight: bold; speak: none; } .wf-abel-n4-active .header__inner:before, .wf-abel-n4-active .header__inner:after { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .header__inner:before { content: "#life"; left: -17px; transform: rotate(90deg); padding-bottom: .8em; } .header__inner:after { content: "#work"; right: -17px; transform: rotate(-90deg); } .header__inner--index:before, .header__inner--index:after { content: none; } .header__wrapper { height: 100%; } /* Site title ---------------------------------- */ .header-site-title { width: 22.375em; /* 358px */ margin: 0 auto; height: auto; padding-right: 0; } .no-js .header-site-title { padding: 0; } .header-site-title img { width: 100%; max-width: inherit; } /* Skip navigation ---------------------------------- */ .skip-nav a:active, .skip-nav a:focus { top: -15px; right: 15px; left: auto; background-color: transparent; } /* Global navigation ---------------------------------- */ .gnav, .no-js .gnav { display: block; position: absolute; top: 5.625em; /* 90px */ right: 0; left: 0; width: auto; box-shadow: none; text-align: center; text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .3), 0 0 30px rgba(61, 62, 80, .3); } .gnav li { display: inline-block; } .gnav li + li { margin-left: 1.5em; border-top: none; } .gnav a { position: relative; padding: 6px 3px; border-bottom: 2px solid #fff; text-indent: 0; background-color: transparent; color: #fff; } .gnav a:focus, .gnav a:hover, .header--what .gnav__what, .header--interview .gnav__interview, .header--support .gnav__support, .header--contact .gnav__contact { color: #f9be40; background-color: transparent; } .gnav a:before { position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; margin-right: 0; margin-bottom: 0; border: none; background-color: #f9be40; opacity: 0; transform: scaleX(0); transition: .2s; } .gnav a:focus:before, .gnav a:hover:before, .header--what .gnav__what:before, .header--interview .gnav__interview:before, .header--support .gnav__support:before, .header--contact .gnav__contact:before { transform: scaleX(1); opacity: 1; } /* Button */ .gnav-btn { display: none; } /* Heading ---------------------------------- */ .header__heading { padding: 120px 0 60px; border: none; } /* Introduction ---------------------------------- */ .header-intro { height: 94%; border: none; font-size: 1.6rem; line-height: 1.8; } .header-intro:before { opacity: 1; } .header-intro-inner, .ms .header-intro-inner { top: 45%; transform: translate(58.5%, -50%); } /* Heading */ .header-intro__header { width: 6.1875em; /* 99px */ margin-left: 50px } /* Body */ .header-intro__body p { margin-right: 40px; } /* Scroll */ .header-intro__scroll { bottom: 100px; } .wf-caveat-n4-active .header-intro__scroll { font-size: 3rem; } .header-intro__scroll a:after { width: 90px; height: 20px; margin: -8px 0 0 60px; background-position: top; } /* Image ---------------------------------- */ .header-img:after { content: ""; display: block; clear: both; } .header-img__item { float: left; width: 50%; height: 100%; } /* Heading */ .header-img__heading { top: 50%; bottom: auto; display: inline-block; font-size: 1.8rem; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; } .header-img__heading--life { left: 5px; padding-bottom: .8em; transform: rotate(90deg); } .header-img__heading--work { right: 5px; transform: rotate(-90deg); } /* Slick */ .header-img-btns { bottom: 40px; left: 40px; } } @media (min-width: 48em) and (max-height:48em) { .header-intro-inner { top: 80px; transform: translate(58.5%, -0) } } @media (min-width: 66.875em) { /* Site title ---------------------------------- */ .header-site-title { display: inline-block; text-align: left; } /* Global navigation ---------------------------------- */ .gnav, .no-js .gnav { z-index: 2; top: 30px; right: 15px; left: auto; } /* Heading ---------------------------------- */ .header__heading { padding: 95px 0 60px; } } @media print and (max-width:47.9375em) { /* Global navigation ---------------------------------- */ .gnav { display: none!important; } .gnav-btn { position: absolute; top: 1px; } } /*------------------------------------*\ Footer \*------------------------------------*/ /* Contact ---------------------------------- */ .contact { background-color: #f9be40; text-align: center; } /* Item */ .contact__item { padding-bottom: 15px; } .contact__item + .contact__item { padding-top: 15px; padding-bottom: 0; border-top: 2px solid #3d3e50; } /* Tel */ .contact-tel { margin-bottom: 15px; font-size: 3.4rem; font-size: 12vw; line-height: 1; } .wf-abel-n4-active .contact-tel { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .contact-tel a { display: inline-block; color: #3d3e50; text-decoration: none; transition: transform .2s; } .contact-tel a:focus, .contact-tel a:hover { transform: scale(1.02); } .contact-tel__label { display: inline-block; margin: 0 .8em .5em 0; padding: .3em .5em; background-color: #3d3e50; color: #fff; font-size: 1.2rem; font-weight: bold; vertical-align: middle; } .contact-tel__caption { display: none; margin-bottom: .3em; font-size: 1.2rem; } /* 電話番号有効 */.mobile .contact-tel__caption { display: block; } .contact-tel__caption:before { content: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2218%22%20viewBox%3D%220%200%2014%2018%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D.b%7Bfill%3Anone%3Bstroke%3A%233d3e50%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M0%2C11h9v7H0v-7ZM6%2C6h3v5h-3v-5Z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M7.5%2C4V0M11%2C6l2-3M4%2C6l-2-3%22%2F%3E%3C%2Fsvg%3E'); /* ../img/icon_tap.svg */ margin-right: .2em; } /* Site title ---------------------------------- */ .footer-site-title { text-align: center; margin: 0 8% 10px; } /* Copyright ---------------------------------- */ .copyright { display: block; margin-top: 15px; font-size: 100%; text-align: center; line-height: 1; } @media (min-width: 30em) { /* Contact ---------------------------------- */ /* Tel */ .contact-tel { font-size: 4rem; } /* Site title ---------------------------------- */ .footer-site-title { max-width: 19.875em; /* 318px */ margin-left: auto; margin-right: auto; } } @media (min-width: 48em) { /* Contact ---------------------------------- */ .contact { display: table; table-layout: fixed; width: 100%; } /* Item */ .contact__item { display: table-cell; padding: 0 15px; border-right: 1px solid #3d3e50; } .contact__item + .contact__item { padding-top: 0; border-top: none; border-left: 1px solid #3d3e50; } .contact__item:last-child { border-right: none; } /* Tel */ .contact-tel { margin-bottom: 20px; font-size: 4rem; font-size: 5.5vw; } .contact-tel__label { font-size: 1.8rem; } .contact-tel__caption { font-size: 1.6rem; } /* Site title ---------------------------------- */ .footer-site-title { margin: 0 0 40px; } /* Sitemap ---------------------------------- */ .sitemap-list { line-height: 1.4; } .sitemap-list > li { margin-bottom: 40px; } .sitemap-list > li > ul { margin-left: .2em; } .sitemap-list > li > ul > li { margin-bottom: 6px; } .sitemap-list__heading { font-weight: bold; margin-bottom: 10px; } /* Copyright ---------------------------------- */ .copyright { margin-top: 40px; } } @media (min-width: 66.875em) { /* Contact ---------------------------------- */ /* Tel */ .contact-tel { font-size: 5.6rem; } } /*============================================================================*\ $Object -- Components \*============================================================================*/ /*------------------------------------*\ Breadcrumbs \*------------------------------------*/ .breadcrumbs { display: none; position: relative; background-color: #3d3e50; color: #fff; line-height: 1.3; } .breadcrumbs:before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #f9be40; } .breadcrumbs ol { position: relative; list-style: none; max-width: 65em; margin: 0 auto; padding: 0; background-color: #3d3e50; } .breadcrumbs ol:after { content: ""; display: block; clear: both; } .breadcrumbs li { position: relative; float: left; } .breadcrumbs__item { display: block; padding: .5em 1.25em .5em 2.5em; font-size: 1.4rem; color: #fff; text-decoration: none; } .breadcrumbs li:nth-child(odd) .breadcrumbs__item { background-color: #646573; } .breadcrumbs__item--top { background-color: #f9be40!important; color: #3d3e50; font-weight: bold; letter-spacing: .1em; transition: .2s; } a.breadcrumbs__item:focus, a.breadcrumbs__item:hover { color: #f9be40; } a.breadcrumbs__item--top:focus, a.breadcrumbs__item--top:hover { color: #3d3e50; opacity: .9; } .wf-abel-n4-active .breadcrumbs__item--top { font-family: Abel, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .breadcrumbs__item:before { content: ""; position: absolute; z-index: 1; top: 0; right: -1.571428571428571em; width: 0; height: 0; border-style: solid; border-width: 1.142857142857143em 0 1.142857142857143em 1.571428571428571em; /* 16px 0 16px 22px */ border-color: transparent transparent transparent #3d3e50; } .breadcrumbs li:nth-child(odd) .breadcrumbs__item:before { border-left-color: #646573; } .breadcrumbs__item--top:before { border-left-color: #f9be40!important; } @media (min-width: 66.875em) { .breadcrumbs { display: block; } } /*------------------------------------*\ Category photo \*------------------------------------*/ /* ul */.category-photo { list-style: none; margin: 0; padding: 0; text-align: center; font-weight: bold; text-shadow: 0 0 3px #3d3e50, 0 0 7px rgba(61, 62, 80, .5), 0 0 30px rgba(61, 62, 80, .5); } .category-photo-item { overflow: hidden; position: relative; display: block; padding: 15px; text-decoration: none; background-color: #3d3e50; color: #fff; } .category-photo-item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center 30%; background-size: cover; opacity: .6; transition: transform .2s; } a.category-photo-item:focus:before, a.category-photo-item:hover:before { transform: scale(1.1); } .category-photo-item__inner { position: relative; } /* Interview ---------------------------------- */ .category-photo-item--story:before { background-image: url(../img/interview_bg01.jpg); } .category-photo-item--mama:before { background-image: url(../img/interview_bg02.jpg); } @media (min-width: 48em) { .category-photo-item { padding: 60px 15px; } .category-photo-item:before { background-position: center; } } /*------------------------------------*\ Category icon \*------------------------------------*/ .category-icon { margin-bottom: 3px; text-align: center; background-color: #fff; border: 2px solid #3d3e50; box-shadow: 3px 3px 0 0 #3d3e50; font-weight: bold; } /* List ---------------------------------- */ .category-icon-list { list-style: none; margin: 0; padding: 0; line-height: 1.4; } .category-icon-list li { border: 1px solid #ebebed; } .category-icon-list a { display: block; padding: .9285714285714286em .4642857142857143em; color: #3d3e50; text-decoration: none; transition: background-color .2s; -moz-font-feature-settings: "pkna"; -webkit-font-feature-settings: "pkna"; font-feature-settings: "pkna"; letter-spacing: .025em; } .category-icon-list a:focus, .category-icon-list a:hover { background-color: #ebebed; } /* Main */ .category-icon-list--main a:before { content: ""; display: block; width: 3.857142857142857em; /* 54px */ height: 3.571428571428571em; /* 50px */ margin: 0 auto .7142857142857143em; /* 0 auto 10px*/ background-repeat: no-repeat; background-position: center; background-size: cover; } /* Other */ .category-icon-list--other a:before { content: ""; display: inline-block; width: 2.416666666666667em; /* 58px */ height: 1.166666666666667em; /* 28px */ margin-right: .8333333333333333em; /* 20px*/ background-repeat: no-repeat; background-position: center; background-size: cover; vertical-align: middle; } /* Icon */ .category-icon-list__tajimi:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22100%22%20viewBox%3D%220%200%20110%20100%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3B%7D.b%7Bfill%3Anone%3Bstroke%3A%233d3e50%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A6px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M55.88%2C36.72c9.864.011%2C17.851%2C8.016%2C17.84%2C17.88s-8.016%2C17.851-17.88%2C17.84c-9.852-.011-17.834-7.998-17.84-17.85.006-9.871%2C8.009-17.87%2C17.88-17.87M55.88%2C30.72c-13.178%2C0-23.86%2C10.682-23.86%2C23.86s10.682%2C23.86%2C23.86%2C23.86%2C23.854-10.676%2C23.86-23.85c.006-13.178-10.672-23.864-23.85-23.87-.003%2C0-.007%2C0-.01%2C0Z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M69.91%2C69.49l19.09%2C19.09%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M14.45%2C19.85l10.61%2C10.61M40.12%2C10.72v15M5.32%2C45.52h15%22%2F%3E%3C%2Fsvg%3E') } /* ../img/what_icon_tajimi_ovr.svg */ .category-icon-list__tour:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22100%22%20viewBox%3D%220%200%20110%20100%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M21.76%2C1.81c-8.16%2C1.44-13.61%2C9.22-12.17%2C17.38l2.26%2C12.8%2C9.93%2C19.57%2C16.97-2.99%2C2.64-21.79-2.26-12.8C37.69%2C5.82%2C29.91.37%2C21.76%2C1.81Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M23.54%2C69.53c.96%2C5.44%2C6.15%2C9.07%2C11.58%2C8.11%2C5.44-.96%2C9.07-6.15%2C8.11-11.58l-2.26-12.8-19.7%2C3.47s2.27%2C12.8%2C2.27%2C12.8Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M88.24%2C22.44c-8.15-1.44-15.93%2C4.01-17.37%2C12.17l-2.26%2C12.8%2C2.64%2C21.79%2C16.97%2C2.99%2C9.93-19.57%2C2.26-12.8c1.44-8.16-4.01-15.94-12.17-17.38Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M66.76%2C86.68c-.96%2C5.44%2C2.67%2C10.63%2C8.11%2C11.58%2C5.44.96%2C10.63-2.67%2C11.58-8.11l2.26-12.8-19.7-3.47s-2.25%2C12.8-2.25%2C12.8Z%22%2F%3E%3C%2Fsvg%3E') } /* ../img/what_icon_tour_ovr.svg */ .category-icon-list__movie:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22100%22%20viewBox%3D%220%200%20110%20100%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M55%2C14c-19.882%2C0-36%2C16.118-36%2C36s16.118%2C36%2C36%2C36%2C36-16.118%2C36-36c-.06-19.857-16.143-35.94-36-36ZM46%2C62.8v-25.6l23%2C12.8-23%2C12.8Z%22%2F%3E%3C%2Fsvg%3E') } /* ../img/what_icon_movie_ovr.svg */ .category-icon-list__district:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%22100%22%20viewBox%3D%220%200%20110%20100%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cellipse%20class%3D%22a%22%20cx%3D%2255%22%20cy%3D%2292%22%20rx%3D%228.49%22%20ry%3D%223.26%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M83.11%2C32.74c0-15.464-12.536-28-28-28s-28%2C12.536-28%2C28c0%2C1.125.042%2C3.26%2C0%2C3.26%2C0%2C14.46%2C26.01%2C50.3%2C27.9%2C52.84v.16l.06-.08.06.08-.02-.16c1.89-2.54%2C27.89-38.38%2C27.89-52.84-.02%2C0%2C.11-2.147.11-3.26ZM55.11%2C47.74c-8.284%2C0-15-6.716-15-15s6.716-15%2C15-15%2C15%2C6.716%2C15%2C15-6.716%2C15-15%2C15Z%22%2F%3E%3C%2Fsvg%3E') } /* ../img/what_icon_district_ovr.svg */ .category-icon-list__living:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2298%22%20height%3D%2290%22%20viewBox%3D%220%200%2098%2090%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%235cbaea%3Bstroke%3A%235cbaea%3Bstroke-miterlimit%3A10%3Bstroke-width%3A1.5px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M20.51%2C63.66h-6.1v11.49h-6.69v-20.25h-.04v-.56h-1.72l-.73-.01%2C7.34-14.91%2C4.39-8.91%2C4.28%2C8.27%2C2.53%2C4.96.01-.02.02.03%2C5.84-11.88%2C2.61-5.28h-.01l.01-.03H14.73L1.07%2C54.34l-.26.56-.06.11v1.01h3.23v22.86h20.33v-3.73h-3.8v-11.49Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M96.49%2C51.35l-17.85-34.63h-3.3v-7.39h-12.14v7.39h-22.71l-3.32%2C6.76-.89%2C1.81-.62%2C1.27-10.11%2C20.59-1.72%2C3.52-.35.69-.07.14v1.23h4v28h64.65v-29.38s4.43%2C0%2C4.43%2C0ZM71.69%2C25.77h-4.85v-12.77h4.85v12.77ZM87.5%2C76.06v.05h-24.4v-24.76h24.4v24.71ZM47.57%2C76.11v-14.05h-7.45v14.05h-8.2v-25.45h-3l8.19-16.66%2C3.14-6.38.5-1%2C1.56-3.16.93-1.84%2C2.59%2C5%2C12.5%2C24.17v25.32h-10.76Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M40.15%2C40.57h-.03v9.66h7.45v-9.66h-7.42Z%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_living.svg */ .category-icon-list__resettlement:before { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2298%22%20height%3D%2290%22%20viewBox%3D%220%200%2098%2090%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23ef878d%3Bstroke-width%3A0%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M48.997%2023.304%2020.849%2048.57v34.001c0%201.233.944%202.258%202.124%202.258h7.911c1.166%200%202.124-1.025%202.124-2.258v-19.34c0-1.263.944-2.258%202.11-2.258h12.576c1.166%200%202.11.995%202.11%202.258v19.34c0%201.233.944%202.258%202.124%202.258h23.11c1.166%200%202.124-1.025%202.124-2.258V48.585L48.999%2023.304h-.002Zm18.71%2032.322c0%201.159-.874%202.094-1.957%202.094h-8.855c-1.082%200-1.957-.936-1.957-2.094V47.59c0-1.159.875-2.094%201.957-2.094h8.855c1.083%200%201.957.936%201.957%202.094v8.036Z%22%20class%3D%22a%22%2F%3E%3Crect%20width%3D%224.247%22%20height%3D%226.469%22%20x%3D%2242.214%22%20y%3D%2267.168%22%20class%3D%22a%22%20rx%3D%221.523%22%20ry%3D%221.523%22%2F%3E%3Cpath%20d%3D%22M76.776%2030.113V15.219c0-1.055-.8-1.91-1.785-1.91h-5.653c-.986%200-1.785.855-1.785%201.91v6.612L49%205.171%2012%2038.396v13.586l37-33.225%2037%2033.225V38.396l-9.224-8.283Z%22%20class%3D%22a%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_resettlement.svg */ .category-icon-list__medical:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2298%22%20height%3D%2290%22%20viewBox%3D%220%200%2098%2090%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23bb889f%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M74.77%2C45.18c-8.107.041-14.647%2C6.647-14.606%2C14.754.033%2C6.561%2C4.416%2C12.303%2C10.736%2C14.066l.25.07c-2.831%2C8.102-11.694%2C12.375-19.796%2C9.544-6.217-2.173-10.39-8.028-10.414-14.614h1.91v-8.77c14.18-3.76%2C25-23.94%2C25-37.58%2C0-10.11-4.71-16.64-14-19.47V1.18c-.015-.634-.517-1.149-1.15-1.18h-5.47c-1.517.005-2.745%2C1.233-2.75%2C2.75v5.25c.005%2C1.517%2C1.233%2C2.745%2C2.75%2C2.75h5.47c.587%2C0%2C1.088-.422%2C1.19-1%2C5.39%2C2.25%2C7.77%2C6.25%2C7.77%2C12.9-.159%2C4.255-1.109%2C8.443-2.8%2C12.35-.13.32-.25.64-.4%2C1l-.31-.21c-2.15%2C3.21-9.33%2C6.56-19.94%2C6.56s-17.77-3.35-19.93-6.55l-.28.2c-1.929-4.201-3.012-8.741-3.19-13.36%2C0-6.2%2C2.14-10.11%2C6.77-12.38.33-.16.64-.33%2C1-.48.102.578.603.999%2C1.19%2C1h5.45c1.53.006%2C2.774-1.23%2C2.78-2.76%2C0-.007%2C0-.013%2C0-.02V2.75C31.995%2C1.226%2C30.755-.006%2C29.23%2C0c-.013%2C0-.027%2C0-.04%2C0h-5.45c-.668%2C0-1.21.542-1.21%2C1.21v2.31l-.1-.31c-9.23%2C2.79-13.89%2C9.36-13.89%2C19.44%2C0%2C13.63%2C10.86%2C33.81%2C25%2C37.58v8.77h1.91c-.003%2C11.598%2C9.396%2C21.003%2C20.994%2C21.006%2C9.515.003%2C17.842-6.392%2C20.296-15.586%2C8.036-1.076%2C13.678-8.463%2C12.601-16.499-.979-7.309-7.228-12.757-14.601-12.731M74.74%2C51.43c4.667%2C0%2C8.45%2C3.783%2C8.45%2C8.45s-3.783%2C8.45-8.45%2C8.45-8.45-3.783-8.45-8.45h0c.006-4.665%2C3.785-8.444%2C8.45-8.45M53.74%2C44.35c-4.21%2C5.89-9.71%2C10.26-15.57%2C10.26s-11.33-4.38-15.54-10.28c4.982%2C1.852%2C10.266%2C2.758%2C15.58%2C2.67%2C4.364.031%2C8.709-.572%2C12.9-1.79.92-.27%2C1.82-.56%2C2.67-.9%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M74.77%2C65.5c3.104%2C0%2C5.62-2.516%2C5.62-5.62s-2.516-5.62-5.62-5.62c-3.104%2C0-5.62%2C2.516-5.62%2C5.62s2.516%2C5.62%2C5.62%2C5.62h0%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_medical.svg */ .category-icon-list__work:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234.572mm%22%20height%3D%2231.75mm%22%20viewBox%3D%220%200%2098%2090%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23f39b41%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M88.857%2C63.653c0-1.91-1.548-3.458-3.458-3.458H12.601c-1.91%2C0-3.458%2C1.548-3.458%2C3.458l-2.643%2C15.985c0%2C1.91%2C1.548%2C3.458%2C3.459%2C3.458h78.083c1.91%2C0%2C3.458-1.548%2C3.458-3.458l-2.643-15.985ZM26.142%2C76.88h-12.19c-.78%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h12.19c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411ZM27.249%2C72.176h-11.415c-.78%2C0-1.412-.632-1.412-1.411s.632-1.411%2C1.412-1.411h11.415c.779%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411ZM28.77%2C67.471h-10.35c-.78%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h10.35c.78%2C0%2C1.412.632%2C1.412%2C1.411s-.632%2C1.411-1.412%2C1.411ZM45.444%2C76.88h-12.19c-.779%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h12.19c.78%2C0%2C1.412.632%2C1.412%2C1.411s-.632%2C1.411-1.412%2C1.411ZM45.555%2C72.176h-11.415c-.78%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h11.415c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411ZM45.707%2C67.471h-10.35c-.779%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h10.35c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411ZM52.293%2C64.649h10.35c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411h-10.35c-.78%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411ZM52.445%2C69.353h11.415c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411h-11.415c-.779%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411ZM64.746%2C76.88h-12.19c-.78%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h12.19c.78%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411ZM67.818%2C66.06c0-.78.632-1.411%2C1.411-1.411h10.35c.779%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411h-10.35c-.78%2C0-1.411-.632-1.411-1.411ZM69.34%2C70.764c0-.78.632-1.411%2C1.412-1.411h11.415c.779%2C0%2C1.411.632%2C1.411%2C1.411s-.632%2C1.411-1.411%2C1.411h-11.415c-.78%2C0-1.412-.632-1.412-1.411ZM84.049%2C76.88h-12.19c-.779%2C0-1.411-.632-1.411-1.411s.632-1.411%2C1.411-1.411h12.19c.78%2C0%2C1.412.632%2C1.412%2C1.411s-.632%2C1.411-1.412%2C1.411Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M82.938%2C57.937H15.063c-3.309%2C0-6-2.691-6-6V12.812c0-3.309%2C2.691-6%2C6-6h67.875c3.309%2C0%2C6%2C2.691%2C6%2C6v39.125c0%2C3.309-2.691%2C6-6%2C6ZM15.063%2C12.812h-.004l.004%2C39.125h67.875V12.812H15.063Z%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_work.svg */ .category-icon-list__process:before { background-image:url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2227%22%20viewBox%3D%220%200%2058%2027%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M17.91%2C20.36c-1.46.21-2.92.47-4.35.76L9.91%2C3.63l-.49.1-2.22.5-.15.06c-1.793%2C1.091-3.55%2C2.238-5.27%2C3.44l-.29.21.79%2C2.62.57-.4c1.47-1%2C3-2.06%2C4.53-3l3.41%2C14.6c-1.43.34-2.86.73-4.28%2C1.16l-.51.08.77%2C2.56.48-.14c3.619-1.077%2C7.312-1.886%2C11.05-2.42l.5-.07-.39-2.65-.5.08Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M34.19%2C3c-.608-.53-1.315-.935-2.08-1.19-1.178-.341-2.406-.48-3.63-.41-.87.004-1.733.16-2.55.46-.751.272-1.446.678-2.05%2C1.2-.561.49-1.011%2C1.093-1.32%2C1.77-.31.679-.441%2C1.426-.38%2C2.17l.07.94h.44l2.13.16h.57l-.07-1.36c-.024-.344.041-.689.19-1%2C.158-.329.383-.622.66-.86.318-.268.68-.478%2C1.07-.62.436-.158.896-.239%2C1.36-.24h.84c.451-.005.9.062%2C1.33.2.39.119.754.313%2C1.07.57.298.245.535.557.69.91.175.41.25.855.22%2C1.3-.042.742-.218%2C1.471-.52%2C2.15-.336.795-.748%2C1.555-1.23%2C2.27-.513.753-1.067%2C1.478-1.66%2C2.17-.61.72-1.23%2C1.41-1.83%2C2-1.33%2C1.4-2.84%2C2.89-4.63%2C4.55l-.18.17.17%2C2.12h.5c3.711-.286%2C7.437-.303%2C11.15-.05h.5l.18-2.67h-.5c-2.43-.17-4.89-.22-7.32-.16%2C1.22-1.17%2C2.32-2.29%2C3.34-3.4.58-.64%2C1.16-1.31%2C1.72-2%2C.56-.686%2C1.081-1.404%2C1.56-2.15.477-.736.889-1.512%2C1.23-2.32.337-.78.54-1.612.6-2.46.158-1.588-.451-3.156-1.64-4.22Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M56.42%2C8.57c-.162-.724-.476-1.406-.92-2-.482-.64-1.074-1.189-1.75-1.62-.739-.47-1.555-.809-2.41-1l-1.05-.24c-.856-.195-1.739-.239-2.61-.13-.797.095-1.57.335-2.28.71-.657.344-1.234.825-1.69%2C1.41-.444.585-.733%2C1.273-.84%2C2l-.14.93.42.12%2C2%2C.63.54.17.31-1.34c.056-.337.197-.653.41-.92.231-.288.521-.523.85-.69.373-.189.775-.311%2C1.19-.36.464-.058.934-.034%2C1.39.07l.82.19c.449.093.878.262%2C1.27.5.35.22.659.501.91.83.225.297.385.637.47%2C1%2C.085.328.085.672%2C0%2C1l-.25.92c-.089.332-.257.637-.49.89-.246.267-.542.484-.87.64-.36.167-.745.272-1.14.31-.432.042-.868.012-1.29-.09l-1.51-.33-.49-.1-.56%2C2.62.49.1%2C1.46.32c.407.091.794.257%2C1.14.49.315.214.586.485.8.8.202.301.339.642.4%2C1%2C.076.329.076.671%2C0%2C1l-.5%2C1.6c-.092.335-.256.645-.48.91-.461.544-1.105.9-1.81%2C1-.373.057-.754.04-1.12-.05l-.68-.15c-.357-.081-.696-.227-1-.43-.299-.199-.56-.449-.77-.74-.204-.283-.353-.602-.44-.94-.071-.33-.071-.67%2C0-1l.24-1.33h-3.01l-.14.93c-.112.707-.071%2C1.43.12%2C2.12.185.663.49%2C1.287.9%2C1.84.845%2C1.146%2C2.079%2C1.946%2C3.47%2C2.25l.83.19c.439.104.889.158%2C1.34.16.264%2C0%2C.528-.021.79-.06.699-.089%2C1.376-.302%2C2-.63.61-.326%2C1.155-.76%2C1.61-1.28.462-.542.803-1.176%2C1-1.86l.38-1.28c.153-.536.211-1.094.17-1.65-.013-.49-.101-.976-.26-1.44-.153-.464-.368-.904-.64-1.31-.118-.167-.245-.327-.38-.48.2-.06.39-.14.57-.22.457-.199.887-.454%2C1.28-.76.383-.303.719-.66%2C1-1.06.299-.412.525-.872.67-1.36l.19-.64c.212-.701.243-1.444.09-2.16Z%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_process.svg */ .category-icon-list__qa:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2228%22%20viewBox%3D%220%200%2058%2028%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M15.2%2C7c-.113-.73-.413-1.419-.87-2-.469-.582-1.055-1.059-1.72-1.4-.722-.369-1.504-.606-2.31-.7-.879-.118-1.772-.084-2.64.1l-1.79.41c-.867.193-1.695.531-2.45%2C1-.697.455-1.304%2C1.034-1.79%2C1.71-.451.593-.771%2C1.274-.94%2C2-.159.722-.128%2C1.473.09%2C2.18l3%2C10c.193.686.535%2C1.321%2C1%2C1.86.47.52%2C1.033.947%2C1.66%2C1.26.626.315%2C1.303.518%2C2%2C.6.67.105%2C1.352.098%2C2.02-.02.85%2C1.06%2C1.7%2C2.15%2C2.51%2C3.25l.19.26.31-.07%2C1.75-.36.78-.08-.45-.63c-.72-1-1.46-2-2.23-3%2C.428-.176.834-.401%2C1.21-.67.548-.392%2C1.028-.872%2C1.42-1.42.387-.544.672-1.154.84-1.8.165-.654.195-1.334.09-2l-1.68-10.48ZM13.9%2C18.9c-.092.343-.248.665-.46.95-.22.296-.491.55-.8.75-.332.216-.702.369-1.09.45l-1.31.3c-.382.094-.779.118-1.17.07-.373-.046-.736-.157-1.07-.33-.315-.162-.597-.383-.83-.65-.231-.262-.398-.573-.49-.91l-2.81-10.1c-.085-.328-.085-.672%2C0-1%2C.089-.365.256-.706.49-1%2C.265-.336.586-.624.95-.85.395-.264.831-.46%2C1.29-.58l1.54-.35c.328-.074.664-.111%2C1-.11h.46c.414.085.81.24%2C1.17.46.331.164.624.396.86.68.217.266.361.582.42.92l1.89%2C10.32c.058.326.044.66-.04.98ZM36.37%2C9.71l.1-2.11h-.57l-2.16.21h-.44v1.72h-4.05c-.444.017-.887-.044-1.31-.18-.385-.122-.747-.308-1.07-.55-.297-.219-.549-.494-.74-.81-.183-.303-.286-.647-.3-1l-.07-1.22c-.024-.344.041-.689.19-1%2C.159-.334.388-.631.67-.87.328-.271.7-.484%2C1.1-.63.445-.164.915-.252%2C1.39-.26h.85c.475-.005.948.066%2C1.4.21.402.13.778.329%2C1.11.59.29.228.528.514.7.84.159.309.235.653.22%2C1v1l.57-.06%2C2.19-.21.44-.17v-.44c.038-.736-.113-1.469-.44-2.13-.361-.641-.851-1.199-1.44-1.64-.633-.501-1.351-.883-2.12-1.13-.832-.289-1.71-.424-2.59-.4l-1.1.02c-.886.022-1.762.195-2.59.51-.76.271-1.465.678-2.08%2C1.2-.57.498-1.027%2C1.111-1.34%2C1.8-.303.67-.43%2C1.407-.37%2C2.14l.08%2C1c.055.489.19.965.4%2C1.41.203.454.473.875.8%2C1.25.333.376.709.711%2C1.12%2C1%2C.16.11.33.22.51.32-.164.118-.32.245-.47.38-.383.337-.72.724-1%2C1.15-.259.418-.451.873-.57%2C1.35-.122.49-.162.997-.12%2C1.5l.08%2C1.06c.06.704.271%2C1.386.62%2C2%2C.345.605.799%2C1.141%2C1.34%2C1.58.553.44%2C1.179.778%2C1.85%2C1%2C.704.244%2C1.446.359%2C2.19.34h.88c.863-.005%2C1.715-.192%2C2.5-.55.566-.255%2C1.092-.592%2C1.56-1%2C.353.434.78.803%2C1.26%2C1.09.73.42%2C1.549.663%2C2.39.71h.69l.63-2.62-1-.08c-.346-.017-.686-.102-1-.25-.26-.129-.488-.314-.67-.54-.182-.236-.318-.504-.4-.79-.093-.325-.14-.662-.14-1l.19-4.19c.893.047%2C1.783.103%2C2.67.17h.5l.21-2.65h-.5c-.913%2C0-1.83-.023-2.75-.07ZM33.19%2C12.3l-.1%2C4.06c-.015.35-.111.693-.28%2C1-.34.624-.894%2C1.103-1.56%2C1.35-.355.135-.731.206-1.11.21h-.74c-.391.016-.782-.045-1.15-.18-.362-.12-.701-.303-1-.54-.276-.225-.507-.499-.68-.81-.168-.308-.264-.65-.28-1l-.04-1.39c-.024-.342.035-.685.17-1%2C.14-.327.348-.62.61-.86.293-.266.632-.476%2C1-.62.398-.16.821-.245%2C1.25-.25h2.07l1.84.03ZM57.4%2C24.5c-.127-6.927-.702-13.838-1.72-20.69l-.05-.34-.33-.08-1.19-.26-.34-.07-.19.29c-3.77%2C5.803-7.157%2C11.846-10.14%2C18.09l-.29.61.67.1%2C1.92.29.37.06.16-.33c.64-1.3%2C1.31-2.62%2C2-3.91%2C2%2C.38%2C4.08.82%2C6.07%2C1.33.08%2C1.45.14%2C2.92.19%2C4.39v.37l.36.1%2C1.87.54.65.2-.01-.69ZM54.16%2C16.8c-1.52-.37-3-.71-4.57-1%2C1.21-2.2%2C2.5-4.4%2C3.82-6.56.31%2C2.51.59%2C5.05.75%2C7.56Z%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_qa.svg */ .category-icon-list__parenting:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2298%22%20height%3D%2290%22%20viewBox%3D%220%200%2098%2090%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%238fc31f%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M29.28%2C43.59v27.61c.006%2C7.868%2C6.382%2C14.244%2C14.25%2C14.25h11c7.851-.028%2C14.2-6.399%2C14.2-14.25v-27.61H29.28ZM45.19%2C66.1c0-.659-.531-1.195-1.19-1.2h-8.74v-5.39h8.74c.66.06%2C1.244-.426%2C1.304-1.086.06-.66-.426-1.244-1.086-1.304-.073-.007-.146-.007-.219%2C0h-8.74v-7.54h27.48v21.62c-.005%2C4.556-3.694%2C8.249-8.25%2C8.26h-11c-4.56-.006-8.254-3.7-8.26-8.26v-3.9h8.77c.663%2C0%2C1.2-.537%2C1.2-1.2M68.63%2C29.37h-3.2c-1.5-6.26-5.51-11.28-10.66-13.47v-6.14c0-3.187-2.583-5.77-5.77-5.77s-5.77%2C2.583-5.77%2C5.77v6.14c-.38.17-.76.34-1.12.53-4.888%2C2.74-8.36%2C7.451-9.53%2C12.93h-3.21c-2.135.005-3.865%2C1.735-3.87%2C3.87v3.11c-.006%2C2.105%2C1.676%2C3.826%2C3.78%2C3.87h39.42c2.1-.049%2C3.776-1.769%2C3.77-3.87v-3.11c0-2.137-1.733-3.87-3.87-3.87h0M43.44%2C26.36l-.23.15c-.975.53-2.178.385-3-.36-1.058-1.051-1.063-2.761-.012-3.818.004-.004.008-.008.012-.012.753-.839%2C1.936-1.143%2C3-.77.302.112.578.286.81.51%2C1.057%2C1.058%2C1.057%2C2.772%2C0%2C3.83-.06.07-.14.13-.2.2-.119.103-.246.197-.38.28%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/support_icon_parenting.svg */ /* Heading ---------------------------------- */ .category-heading { padding-bottom: .25em; border-bottom: 3px solid; } .category-heading--parenting { border-color: #8fc31f; } .category-heading--resettlement { border-color: #ef878d; } .category-heading--living { border-color: #5cbaea; } .category-heading--work { border-color: #f39b41; } .category-heading--medical { border-color: #bb889f; } @media (min-width: 48em) { /* List ---------------------------------- */ /* Main */ .category-icon-list--main a { padding: 2em 1em; font-size: 1.8rem; } .category-icon-list--main a:before { width: 5.444444444444444em; /* 98px */ height: 5em; /* 90px */ margin-bottom: 1.388888888888889em; /* 25px*/ } /* Other */ .category-icon-list--other a { padding: 1em .5em; font-size: 2.2rem; } } /*------------------------------------*\ Tables \*------------------------------------*/ table { width: 100%; max-width: 100%; margin-bottom: 1em; } th, td { padding: 8px 16px; border-bottom: 1px solid #c4c5ca; text-align: inherit; } thead { border-bottom: 2px solid #646573; font-size: .9375em; font-size: calc(1em - 1px); } tbody th { background-color: #ebebed; } /* Caption */ caption { padding: 8px 0; font-size: .875em; font-size: calc(1em - 2px); } caption[data-position="top"] { caption-side: top; } caption[data-position="bottom"] { caption-side: bottom; } caption[data-align="center"] { text-align: center; } caption:before { content: attr(data-prefix); font-weight: bold; } /* With border */ .table-bordered thead { border-bottom: none; background-color: #3d3e50; color: #fff; } .table-bordered th, .table-bordered td { border: 1px solid #c4c5ca; } /* No border */ .table-no-border thead, .table-no-border th, .table-no-border td { border: none; background-color: transparent; } /* No style */ .table-no-style { width: auto; } .table-no-style thead { border: none; color: inherit; font-size: inherit; } .table-no-style th, .table-no-style td { padding: 0; border: none; background-color: transparent; } /* Responsive */ @media only screen and (max-width:47.9375em) { .table-responsive { display: block; width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .table-responsive table { margin-bottom: 4px; } .table-responsive td, .table-responsive th { padding: 6px 10px; white-space: nowrap; } } .table-responsive::-webkit-scrollbar { height:6px; } .table-responsive::-webkit-scrollbar-track { -webkit-box-shadow: none; box-shadow: none ; background-color: #ebebed; } .table-responsive::-webkit-scrollbar-thumb { background-color: #3d3e50; } /*------------------------------------*\ Buttons \*------------------------------------*/ .btn { display: inline-block; overflow: visible; position: relative; max-width: 100%; margin: 0 3px 3px 0; padding: .64285714285em 50px .64285714285em 1.42857142857em; border-radius: 0; font-weight: bold; line-height: 1.3; text-align: center; text-decoration: none !important; vertical-align: middle; letter-spacing: .05em; -moz-font-feature-settings: "pkna"; -webkit-font-feature-settings: "pkna"; font-feature-settings: "pkna"; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: .2s; /* base theme */ border: 2px solid #3d3e50; box-shadow: 3px 3px 0 0 #3d3e50; background-color: #fff; color: #3d3e50; } .btn:not(:disabled) { cursor: pointer; } .btn:after { content: ""; position: absolute; top: 50%; right: 10px; width: 30px; height: 10px; margin-top: -5px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2271%22%20height%3D%2252%22%20viewBox%3D%220%200%2071%2052%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bstroke%3A%23957122%3B%7D.a%2C.b%2C.c%2C.d%7Bfill%3Anone%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%3B%7D.b%7Bstroke%3A%23f9be40%3B%7D.c%7Bstroke%3A%233d3e50%3B%7D.d%7Bstroke%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22c%22%20d%3D%22M0%2C9h36l-14-7v11%22%2F%3E%3Cpath%20class%3D%22d%22%20d%3D%22M0%2C22h36l-14-7v11%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M0%2C35h36l-14-7v11%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M41%2C7.1h25.9l-9.9-5.1v7.9%22%2F%3E%3Cpath%20class%3D%22d%22%20d%3D%22M41%2C17.2h25.9l-9.9-5.1v7.9%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M41%2C27.2h25.9l-9.9-5.1v7.9%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M0%2C48h36l-14-7v11M41%2C37.2h25.9l-9.9-5.1v7.9%22%2F%3E%3C%2Fsvg%3E') no-repeat right top; /* common/img/icon_arrow.svg */ transform: rotate(-5deg); transition: .2s; } .btn:focus:after, .btn:hover:after { transform: translateX(2.5px); } .btn:active:after { transform: translateX(5px) rotate(5deg); } @media (min-width: 48em) { .btn { padding: .90625em 76px .90625em 1.8125em; } .btn:after { right: 20px; width: 41px; height: 13px; margin-top: -6.5px; background-position: left top; } } /* Style ---------------------------------- */ /* Fill */ .btn--fill { background-color: #3d3e50; color: #fff; } .btn--fill:after { background-position: right -10px; } /* Outline */ .btn--outline { background-color: transparent; } /* Flat */ .btn--flat { padding: .64285714285em 1.42857142857em; border-color: #fff; box-shadow: none; color: #957122; } .btn--flat:focus, .btn--flat:hover { border-color: #957122; background-color: #957122; color: #fff; } .btn--flat:active { opacity: .7; } .btn--flat:after { content: none; } /* Option @note: option同士は組み合わせて使用しない ---------------------------------- */ /* Primary */ .btn--primary { border-color: #957122; box-shadow: 3px 3px 0 0 #957122; color: #957122; } .btn--primary:after { background-position: right -20px; } .btn--fill.btn--primary, .btn--outline.btn--primary { border-color: #f9be40; box-shadow: 3px 3px 0 0 #f9be40; color: #f9be40; } .btn--fill.btn--primary:after, .btn--outline.btn--primary:after { background-position: right -30px; } /* Reversal */ .btn--reversal { background-color: #3d3e50; box-shadow: 3px 3px 0 0 #fff; color: #fff; } .btn--reversal:after { background-position: right -10px; } .btn--fill.btn--reversal { border-color: #fff; background-color: #fff; color: #3d3e50; } .btn--fill.btn--reversal:after { background-position: right 0; } .btn--outline.btn--reversal { border-color: #fff; background-color: transparent; } .btn--flat.btn--reversal { border-color: #957122; box-shadow: none; background-color: #957122; color: #fff; } .btn--flat.btn--reversal:focus, .btn--flat.btn--reversal:hover { border-color: #fff; background-color: #fff; color: #957122; } /* Disabled */ .btn--disabled, .btn:disabled { padding: .64285714285em 1.42857142857em; border-color: #666; box-shadow: 3px 3px 0 0 #666; color: #666; pointer-events: none; } .btn:disabled:after, .btn--disabled:after { content: none; } .btn--fill.btn--disabled, .btn--fill:disabled { background-color: #666; color: #fff; } .btn--flat.btn--disabled, .btn--flat:disabled { border-color: #fff; box-shadow: none; } .btn--flat.btn--disabled:focus, .btn--flat.btn--disabled:hover { background-color: #fff; color: #666; } @media (min-width: 48em) { /* Style ---------------------------------- */ /* Fill */ .btn--fill:after { background-position: left -13px; } .btn--fill.btn--reversal:after { background-position: left 0; } /* Flat */ .btn--flat { padding: .90625em 1.8125em; } /* Option ---------------------------------- */ /* Primary */ .btn--primary:after { background-position: left -26px; } .btn--fill.btn--primary:after, .btn--outline.btn--primary:after { background-position: left -39px; } /* Reversal */ .btn--reversal:after { background-position: left -13px; } /* Disabled */ .btn--disabled, .btn:disabled { padding: .90625em 1.8125em; } /* SNS ---------------------------------- */ .btn--insta:after, .btn--fb:after { background-position: left -13px; } } /* Sizes ---------------------------------- */ .btn--large { font-size: 1.6rem; } .btn--small, .btn--xsmall { padding: .64285714285em 1.42857142857em; font-size: 1.4rem; } .btn--small:after, .btn--xsmall:after { content: none; } @media (min-width: 48em) { /* Sizes ---------------------------------- */ .btn--large { font-size: 1.8rem; } .btn--small { padding: .90625em 1.8125em; } .btn--xsmall { padding: .64285714285em .714285714285em; } } /* SNS @note: アイソレーションエリアはアイコンの半分 ---------------------------------- */ .btn--fb, .btn--insta { padding-top: 20px; padding-bottom: 20px; margin: 0; box-shadow: none; color: #fff; } .btn--fb:before, .btn--insta:before { content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 15px 0 -45px; } .btn--fb:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cdefs%3E%3Cstyle%3E.c%7Bfill%3A%23fff%3B%7D.d%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22a%22%20class%3D%22c%22%20d%3D%22M30%2C15C30%2C6.716%2C23.284%2C0%2C15%2C0S0%2C6.716%2C0%2C15c0%2C7.035%2C4.843%2C12.937%2C11.376%2C14.558v-9.974h-3.093v-4.584h3.093v-1.975c0-5.106%2C2.311-7.472%2C7.323-7.472.95%2C0%2C2.59.186%2C3.261.373v4.155c-.354-.037-.969-.056-1.733-.056-2.46%2C0-3.41.932-3.41%2C3.354v1.621h4.9l-.842%2C4.584h-4.058v10.306c7.427-.897%2C13.183-7.221%2C13.183-14.89Z%22%2F%3E%3Cpath%20id%3D%22b%22%20class%3D%22d%22%20d%3D%22M20.875%2C19.584l.842-4.584h-4.9v-1.621c0-2.422.95-3.354%2C3.41-3.354.764%2C0%2C1.379.019%2C1.733.056v-4.155c-.671-.186-2.311-.373-3.261-.373-5.012%2C0-7.323%2C2.366-7.323%2C7.472v1.975h-3.093v4.584h3.093v9.974c1.161.288%2C2.374.442%2C3.624.442.615%2C0%2C1.221-.038%2C1.817-.11v-10.306h4.058Z%22%2F%3E%3C%2Fsvg%3E'); } /* url../img/icon_fb.svg */ .btn--insta:before { background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22a%22%20d%3D%22M15%2C2.7c4%2C0%2C4.5%2C0%2C6.1.1.9%2C0%2C1.9.2%2C2.8.5%2C1.3.5%2C2.3%2C1.5%2C2.8%2C2.8.3.9.5%2C1.9.5%2C2.8.1%2C1.6.1%2C2.1.1%2C6.1s0%2C4.5-.1%2C6.1c0%2C.9-.2%2C1.9-.5%2C2.8-.5%2C1.3-1.5%2C2.3-2.8%2C2.8-.9.3-1.8.5-2.8.5-1.6.1-2.1.1-6.1.1s-4.5%2C0-6.1-.1c-.9%2C0-1.9-.2-2.8-.5-1.3-.5-2.3-1.5-2.8-2.8-.3-1-.5-1.9-.5-2.9-.1-1.5-.1-2-.1-6s0-4.5.1-6.1c0-.9.2-1.9.5-2.8.5-1.3%2C1.5-2.3%2C2.8-2.8%2C1-.3%2C1.9-.5%2C2.8-.5%2C1.6-.1%2C2.1-.1%2C6.1-.1M15%2C0c-4.1%2C0-4.6%2C0-6.2.1-1.2%2C0-2.5.3-3.6.7C3.2%2C1.6%2C1.6%2C3.2.8%2C5.2.3%2C6.3.1%2C7.6.1%2C8.8c-.1%2C1.6-.1%2C2.1-.1%2C6.2s0%2C4.6.1%2C6.2c0%2C1.2.3%2C2.5.7%2C3.6.8%2C2%2C2.4%2C3.6%2C4.4%2C4.4%2C1.2.4%2C2.4.7%2C3.6.7%2C1.6.1%2C2.1.1%2C6.2.1s4.6%2C0%2C6.2-.1c1.2%2C0%2C2.5-.3%2C3.6-.7%2C2-.8%2C3.6-2.4%2C4.4-4.4.4-1.2.6-2.4.7-3.6.1-1.6.1-2.1.1-6.2s0-4.6-.1-6.2c0-1.2-.3-2.5-.7-3.6-.8-2-2.4-3.6-4.4-4.4-1.2-.4-2.4-.7-3.6-.7-1.6-.1-2.1-.1-6.2-.1Z%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M15%2C7.3c-4.3%2C0-7.7%2C3.4-7.7%2C7.7s3.4%2C7.7%2C7.7%2C7.7%2C7.7-3.4%2C7.7-7.7-3.4-7.7-7.7-7.7ZM15%2C20c-2.8%2C0-5-2.2-5-5s2.2-5%2C5-5%2C5%2C2.2%2C5%2C5c0%2C2.7-2.2%2C5-5%2C5Z%22%2F%3E%3Ccircle%20class%3D%22a%22%20cx%3D%2223%22%20cy%3D%227%22%20r%3D%221.8%22%2F%3E%3C%2Fsvg%3E'); } /* ../img/icon_insta.svg */ .btn--fb:after, .btn--insta:after { background-position: right -10px; } /* Facebook */ .btn--fb { border-color: #0866ff; background-color: #0866ff; } /* Instagram */ .btn--insta { border-color: #ff0069; background-color: #ff0069; } @media (min-width: 48em) { /* SNS ---------------------------------- */ .btn--fb:after, .btn--insta:after { background-position: left -13px; } } /*------------------------------------*\ Label \*------------------------------------*/ .label { display: inline-block; margin-right: .5em; margin-left: .5em; padding: .3em .5em; background-color: #3d3e50; color: #fff; font-size: .86em; font-weight: bold; line-height: 1; } /* Table */ .label--th { width: 5.5em; margin-left: 0; text-align: center; } /* Radius ---------------------------------- */ .label-radius { position: relative; display: block; margin: auto auto 5px; width: 1.681818181818182em; /* 37px */ height: 1.681818181818182em; border-radius: 50%; font-size: 2.2rem; line-height: 1.681818181818182; text-align: center; } .wf-caveat-n4-active .label-radius { font-family: Caveat, Roboto, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .label-radius:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2220%22%20viewBox%3D%220%200%2040%2020%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%233d3e50%3B%7D.a%2C.b%2C.c%2C.d%7Bstroke-width%3A0px%3B%7D.b%7Bfill%3A%23f9be40%3B%7D.c%7Bfill%3A%23f8ec42%3B%7D.d%7Bfill%3A%23f0918f%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22b%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%2F%3E%3Ccircle%20class%3D%22a%22%20cx%3D%2210%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20class%3D%22a%22%20d%3D%22M10%2C10c-2.2%2C0-4%2C1.7-4%2C3.9v2.1h8v-2.1c0-2.2-1.8-3.9-4-3.9Z%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M36.7%2C10.2l2.4-4.4c1.2%2C2.7%2C1.2%2C5.7-.1%2C8.4%2C0%2C0-2.3-4-2.3-4Z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M30.8%2C0c2.9.2%2C5.5%2C1.7%2C7.2%2C4l-2.4%2C4.4L30.8%2C0Z%22%2F%3E%3Cpath%20class%3D%22d%22%20d%3D%22M35.7%2C12.1l2.3%2C3.9c-1.6%2C2.1-4%2C3.5-6.6%2C3.8%2C0%2C0%2C4.3-7.7%2C4.3-7.7Z%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M29.3%2C19.9c-5.5-.4-9.6-5.2-9.2-10.7.4-4.7%2C4-8.6%2C8.7-9.2l5.9%2C10.2s-5.4%2C9.7-5.4%2C9.7Z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top; /* ../../common/img/icon_circle.svg */ background-size: 3.363636363636364em 1.681818181818182em; /* 74px 37px */ } .label-radius--deg45:before { transform: rotate(45deg)} .label-radius--deg90:before { transform: rotate(90deg)} .label-radius--deg135:before { transform: rotate(135deg)} .label-radius__inner { position: absolute; top: 0; right: 0; left: 0; } .label-radius__sub { position: absolute; top: .35em; right: 0; left: 0; margin: 0 auto; font-size: 1rem; font-weight: bold; } .wf-caveat-n4-active .label-radius__sub { font-family: Caveat, Roboto, -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .label-radius__main { position: absolute; top: .25em; right: 0; left: 0; margin: 0 auto; } @media (min-width: 48em) { /* Radius ---------------------------------- */ .label-radius { margin-bottom: 15px; width: 2em; /* 60px */ height: 2em; font-size: 3rem; line-height: 2em; } .label-radius:before { background-size: 4em 2em; } /* 120px 60px */ .label-radius__sub { top: -.7em; font-size: 1.4rem; } } /*------------------------------------*\ Arrow links \*------------------------------------*/ /* @note: