@charset "UTF-8"; /********************************************* reset and normalize **********************************************/ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; height: auto; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /********************************************* basics **********************************************/ /********************************************* global/variables/ **********************************************/ /********************************************* variable **********************************************/ /********************************************* foundation/setting/_color.scss **********************************************/ /* 以下、上記で指定した変数内で指定する */ /*---------------設定ここまで---------------*/ /********************************************* ブレイクポイントの設定 foundation/setting/_responsive.scss **********************************************/ /********************************************* scss/global/variables/_typography.scss フォントの指定 **********************************************/ /* 日本語のフォントの指定 */ /* 英語フォントの指定 */ /* 文字サイズ(px) */ /*---------------設定ここまで---------------*/ /* japanese */ /* english */ /*@mixin font-en { font-family: $font-en; }*/ /* font-weight:100 */ /* font-weight:200 */ /* font-weight:300 */ /* font-weight:400 */ @font-face { font-family: "YakuHanJP"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../font/yakuhan/YakuHanJP/YakuHanJP-Regular.eot"); src: url("../../font/yakuhan/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2"), url("../../font/yakuhan/YakuHanJP/YakuHanJP-Regular.woff") format("woff"); unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08, U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d; } /* font-weight:500 */ /* font-weight:700 */ @font-face { font-family: "YakuHanJP"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../font/yakuhan/YakuHanJP/YakuHanJP-Bold.eot"); src: url("../../font/yakuhan/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2"), url("../../font/yakuhan/YakuHanJP/YakuHanJP-Bold.woff") format("woff"); unicode-range: U+3001, U+3002, U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f, U+3010, U+3011, U+3014, U+3015, U+30fb, U+ff01, U+ff08, U+ff09, U+ff1a, U+ff1b, U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d; } /* font-weight:900 */ #lh-125 { line-height: 1.25; } /********************************************* global/function/ **********************************************/ /********************************************* function **********************************************/ /********************************************* 計算用に単位を削除する **********************************************/ /********************************************* function **********************************************/ /********************************************* pxをremに変換する ex.font-size:rem(14px) **********************************************/ /********************************************* global/mixin **********************************************/ /********************************************* mixin **********************************************/ /********************************************* global/variables/ **********************************************/ /********************************************* Break Pointの設定に基づいたMedia Queryの生成 scss/global/mixin/_responsive.scss **********************************************/ body { width: 100%; } @media (min-width: 1480px) { body { width: 100%; } } @media (max-width: 1479px) { body { width: 100%; } } @media screen and (max-width: 1240px) { body { width: 100%; } } @media (min-width: 1024px) { body { width: 100%; } } @media (max-width: 1023px) { body { width: 100%; } } @media (min-width: 768px) { body { width: 100%; } } @media (max-width: 767px) { body { width: 100%; } } @media (min-width: 640px) { body { width: 100%; } } @media (max-width: 639px) { body { width: 100%; } } @media (min-width: 375px) { body { width: 100%; } } @media (max-width: 374px) { body { width: 100%; } } /********************************************* hoverメディアクエリのショートコード(SPでhoverを無効にする為) @include hover(){color:$c-primary;}] 参考：https://zenn.dev/tak_dcxi/articles/2cc1828e9c1fe2#hover%E3%81%AE%E6%8C%87%E5%AE%9A **********************************************/ /********************************************* global/function/ **********************************************/ /********************************************* global/variables/ **********************************************/ /********************************************* mixin **********************************************/ /********************************************* font-sizeをremに変換し、line-heightを近い数字の4の倍数の値に設定し、倍数に変換する typo($font-size,$line-height) ex. @include typo(30px,1.5); >> font-size:1.875rem;line-height:2.75rem; **********************************************/ html { font-size: 18px; scroll-behavior: smooth; } @media (max-width: 1479px) { html { font-size: 18px; } } @media (max-width: 1023px) { html { font-size: 16px; } } @media (max-width: 639px) { html { font-size: 14px; } } @media (max-width: 767px) { html { scroll-behavior: initial; } } body { font-weight: 400; background: #fff; color: #000; font-family: "YakuHanJP", sans-serif; -webkit-font-smoothing: antialiased; position: relative; line-height: 1; min-width: 1024px; } .is-drawer-open body { padding-right: calc(100vw - 100%); } @media (max-width: 767px) { body { min-width: 0; padding-bottom: 70px; } } /********************************************* link **********************************************/ a { text-decoration: none; color: #000; } a img { text-decoration: none; } a:hover { color: #1a35bb; text-decoration: none; } a[data-mfp-src] { cursor: pointer; } /********************************************* layout/ **********************************************/ /********************************************* layout/_container.scss

**********************************************/ .l-container { margin-left: auto; margin-right: auto; width: 82.5%; } @media (min-width: 768px) { .l-container { width: 92%; } } .l-container.-xl { max-width: 1344px; width: 96%; } @media (max-width: 767px) { .l-container.-xl { width: 95%; } } .l-container.-lg { max-width: 1200px; } .l-container.-md { max-width: 940px; } .l-container.-sm { max-width: 780px; } /********************************************* footer **********************************************/ .l-footer { visibility: hidden; padding: 48px 0 32px; background: #fff; color: #000; font-size: 16px; position: sticky; top: 100vh; } @media (max-width: 1479px) { .l-footer { font-size: 14px; } } @media (max-width: 639px) { .l-footer { font-size: 13px; } } .l-footer__content-1 { padding-right: 28px; } @media (max-width: 1023px) { .l-footer__content-1 { width: 100%; padding-right: 0; margin-bottom: 20px; } } .l-footer__content-2 { padding-right: 40px; } @media (max-width: 1479px) { .l-footer__content-2 { padding-right: 4vw; } } @media (max-width: 1023px) { .l-footer__content-2 { width: 100%; padding-right: 5vw; } } @media (max-width: 639px) { .l-footer__content-2 { padding-right: 0; } } .l-footer__logo { margin-bottom: 28px; } .l-footer__logo img { width: 290px; height: auto; max-width: 100%; } @media (max-width: 1023px) { .l-footer__logo { margin-bottom: 20px; } } @media (max-width: 639px) { .l-footer__logo img { width: 240px; } } .l-footer__contact { display: flex; justify-content: space-between; align-items: flex-start; } @media (max-width: 639px) { .l-footer__contact { display: block; } } .l-footer__btn { position: relative; display: inline; font-weight: 700; } .l-footer__btn a { background: #333; display: inline-block; min-width: 160px; padding: 17px 25px; text-align: center; color: #fff; } .l-footer__catch { line-height: 1.5em; } @media (max-width: 1479px) { .l-footer__catch { letter-spacing: 0.04em; } } @media (max-width: 1023px) { .l-footer__catch { letter-spacing: 0.09em; } } @media (max-width: 639px) { .l-footer__catch { margin-bottom: 1em; } } .l-footer__back { background: #000; width: 4vw; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; } @media (max-width: 1023px) { .l-footer__back { width: 5vw; } } @media (max-width: 639px) { .l-footer__back { display: none; } } .l-footer__back img { width: 13px; } .l-footer__copy { font-size: 14px; margin-top: 24px; } @media (max-width: 1479px) { .l-footer__copy { font-size: 12px; } } .l-footer__copy p a { color: #000; text-decoration: underline; } @media (max-width: 639px) { .l-footer__copy p { margin: 0.5em 0 0; } } .l-footer-nav { border-bottom: #eee 1px solid; padding-bottom: 16px; margin-bottom: 28px; } @media (max-width: 1023px) { .l-footer-nav { border-top: #eee 1px solid; padding-top: 20px; margin-bottom: 20px; padding-bottom: 8px; } } .l-footer-nav__list { display: flex; flex-flow: row wrap; } .l-footer-nav__list a { color: #000; } .l-footer-nav__item { margin-right: 24px; margin-bottom: 8px; } .l-footer-nav__item:last-child { margin-right: 0; } @media (max-width: 1479px) { .l-footer-nav__item { margin-right: 20px; } } /********************************************* grid関連のレイアウト **********************************************/ .c-grid { display: flex; justify-content: flex-start; flex-flow: row wrap; } @media (min-width: 1024px) { .c-grid__col-1 { width: 33.3333333333%; } } @media (min-width: 1480px) { .c-grid__col-1 { width: 440px; } } @media (min-width: 1024px) { .c-grid__col-2 { width: 66.6666666667%; } } @media (min-width: 1480px) { .c-grid__col-2 { width: 880px; } } @media (max-width: -1) { .c-grid__col-tab-1 { width: 33.3333333333%; } } @media (max-width: -1) { .c-grid__col-tab-2 { width: 66.6666666667%; } } @media (max-width: -1) { .c-grid__col-tab-half { width: 50%; } } @media (max-width: 639px) { .c-grid__col-sp-1 { width: 33.3333333333%; } } @media (max-width: 639px) { .c-grid__col-sp-2 { width: 66.6666666667%; } } @media (max-width: 639px) { .c-grid__col-sp-half { width: 50%; } } /********************************************* layout/_header.scss ・header ・global nav ・drawer menu **********************************************/ .l-header { opacity: 0; position: fixed; right: 30px; top: 40px; z-index: 1001; min-width: 1024px; } @media (max-width: 1479px) { .l-header { right: 24px; top: 32px; } } @media (max-width: 767px) { .l-header { right: 0; top: 0; } } .l-header__inner { padding: 0; } .l-header-nav { display: flex; justify-content: flex-end; } .l-header-nav__list { display: flex; font-size: 15px; letter-spacing: 0.04em; font-weight: 700; border-radius: 25px; padding-left: 20px; height: 50px; background: #fff; } @media (min-width: 768px) { .l-header-nav__list { visibility: visible !important; } } @media (max-width: 767px) { .l-header-nav__list { right: 0; top: 0; position: fixed; text-align: center; flex-direction: column; justify-content: flex-start; padding-top: 24vw; width: 100%; min-height: 100%; background: none; z-index: 10000; border-radius: 0; font-size: 7vw; visibility: hidden; } .l-header-nav__list::before { content: ""; position: fixed; right: 0; top: 0; background: #f4d145; width: 40px; height: 40px; transition: width 0.4s, height 0.4s; display: block; } } .is-drawer-open .l-header-nav__list { width: 100vw; overflow-y: auto; } .is-drawer-open .l-header-nav__list::before { width: 100%; height: 100%; z-index: -1; } .l-header-nav__item a { cursor: pointer; text-decoration: none; transition: color 0.8s; display: flex; align-items: center; color: #1a35bb; line-height: 50px; padding: 0 16px; } @media (max-width: 1479px) { .l-header-nav__item a { padding: 0 11px; } } @media (max-width: 767px) { .l-header-nav__item a { padding: 0; opacity: 0; } .is-drawer-open .l-header-nav__item a { opacity: 1; transition: opacity 0.4s 0.4s; } } .l-header-nav__item a:focus { color: #1a35bb; } @media (hover: hover) and (pointer: fine) { .l-header-nav__item a:hover { color: #1a35bb; } } @media (max-width: 767px) { .l-header-nav__item { margin-top: 8vw; } .l-header-nav__item:first-child { margin-top: 0; } } .l-header-nav__btn { background: #f4d145; color: #1a35bb; display: flex; align-items: center; border-radius: 25px; padding: 0 24px !important; margin-left: 20px; } .l-header-nav__btn img { margin-left: 8px; } @media (max-width: 767px) { .l-header-nav__btn { display: none !important; } } /*** ハンバーガーボタン ***/ .l-header-hamburger { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; width: 60px; height: 60px; background: #f4d145; border-radius: 0 0 0 7.5px; z-index: 10001; } @media (min-width: 768px) { .l-header-hamburger { display: none; } } .l-header-hamburger__inner { width: 27px; height: 24px; position: relative; } .l-header-hamburger__bar { position: absolute; left: 0; z-index: 10100; width: 5px; height: 5px; background-color: #1a35bb; border-radius: 50%; transition: all 0.4s; } .l-header-hamburger__bar:nth-of-type(1) { top: 0; left: 11px; } .l-header-hamburger__bar:nth-of-type(2) { top: 9.5px; left: 11px; } .l-header-hamburger__bar:nth-of-type(3) { bottom: 0; left: 11px; } .is-drawer-open .l-header-hamburger__bar { width: 100%; height: 2px; border-radius: 0; left: 0; } .is-drawer-open .l-header-hamburger__bar:nth-of-type(1) { transform: translateY(11px) rotate(-45deg); } .is-drawer-open .l-header-hamburger__bar:nth-of-type(2) { opacity: 0; } .is-drawer-open .l-header-hamburger__bar:nth-of-type(3) { transform: translateY(-11px) rotate(45deg); } /********************************************* layout/_main.scss **********************************************/ .l-main { visibility: hidden; position: relative; overflow-x: hidden; } /********************************************* layout/_side.scss **********************************************/ /********************************************* object/component **********************************************/ .c-btn-1 { display: inline-flex; align-items: center; padding: 14px 16px 14px 32px; background: #f4d145; border-radius: 30px; position: relative; overflow: hidden; } @media (max-width: 767px) { .c-btn-1 { padding: 10px 12px 10px 24px; } } .c-btn-1__text { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 4; } @media (max-width: 767px) { .c-btn-1__text { font-size: 12px; } } .c-btn-1__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20px; background: #fff; position: relative; z-index: 1; } @media (max-width: 767px) { .c-btn-1__icon { width: 24px; height: 24px; margin-left: 16px; } } .c-btn-1__icon img { position: relative; z-index: 2; transition: transform 0.3s; } .c-btn-1__icon::before, .c-btn-1__icon::after { content: ""; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; position: absolute; border-radius: 50%; } .c-btn-1__icon::before { z-index: 1; background: #fff; transition: background-color 0.3s; } .c-btn-1__icon::after { z-index: 0; background: #f7f7f7; transition: transform 0.3s; } .c-btn-1:hover { color: #000; } .c-btn-1:hover .c-btn-1__icon img { transform: translateX(1px); } .c-btn-1:hover .c-btn-1__icon::after { transform: scale(15); } .c-btn-1:hover .c-btn-1__icon-scl22::after { transform: scale(22); } .c-btn-1:hover .c-btn-1__icon::before { background-color: #f4d145; } .c-btn-1-blue { display: inline-flex; align-items: center; padding: 14px 16px 14px 32px; background: #1a35bb; border-radius: 30px; position: relative; overflow: hidden; } @media (max-width: 767px) { .c-btn-1-blue { padding: 10px 12px 10px 24px; } } .c-btn-1-blue__text { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 4; color: #fff; } @media (max-width: 767px) { .c-btn-1-blue__text { font-size: 12px; } } .c-btn-1-blue__icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20px; background: #fff; position: relative; z-index: 1; } @media (max-width: 767px) { .c-btn-1-blue__icon { width: 24px; height: 24px; margin-left: 16px; } } .c-btn-1-blue__icon img { position: relative; z-index: 2; transition: transform 0.3s; } .c-btn-1-blue__icon::before, .c-btn-1-blue__icon::after { content: ""; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; position: absolute; border-radius: 50%; } .c-btn-1-blue__icon::before { z-index: 1; background: #fff; transition: background-color 0.3s; } .c-btn-1-blue__icon::after { z-index: 0; background: #f7f7f7; transition: transform 0.3s; color: #000; } .c-btn-1-blue:hover { color: #fff; } .c-btn-1-blue:hover .c-btn-1-blue__icon img { transform: translateX(1px); } .c-btn-1-blue:hover .c-btn-1-blue__icon::after { transform: scale(23); } @media (max-width: 767px) { .c-btn-1-blue:hover .c-btn-1-blue__icon::after { transform: scale(27); } } .c-btn-1-blue:hover .c-btn-1-blue__icon::before { background-color: #1a35bb; } .c-btn-2 { display: inline-flex; align-items: center; } .c-btn-2__text { color: #1a35bb; font-size: 18px; font-weight: 700; transition: color 0.3s, transform 0.2s; } @media (max-width: 767px) { .c-btn-2__text { font-size: 14px; } } .c-btn-2__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 16px; background: #f4d145; transition: transform 0.3s; } @media (max-width: 767px) { .c-btn-2__icon { width: 40px; height: 40px; margin-left: 12px; } } .c-btn-2:hover .c-btn-2__text { color: #24315c; transform: translateX(2px); } .c-btn-2:hover .c-btn-2__icon { transform: scale(1.25); } .c-heading-1 { font-size: 48px; line-height: 1.3333; letter-spacing: 0.05em; font-weight: 700; } @media (max-width: 1479px) { .c-heading-1 { font-size: 42px; } } @media (max-width: 767px) { .c-heading-1 { font-size: 26px; } } .c-heading-2 { font-size: 42px; line-height: 1.3333; letter-spacing: 0.05em; font-weight: 700; } @media (max-width: 1479px) { .c-heading-2 { font-size: 32px; } } @media (max-width: 767px) { .c-heading-2 { font-size: 21px; } } .c-heading-3 { font-size: 20px; line-height: 1.35; font-weight: 700; } @media (max-width: 767px) { .c-heading-3 { font-size: 16px; } } /********************************************* loading **********************************************/ .c-loading { position: fixed; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 10000; background: #fff; background-size: 200% 200%; } .c-loading__loader { position: relative; width: 457px; height: 85px; } @media (max-width: 639px) { .c-loading__loader { width: 229px; height: 43px; } } .c-loading__loader img { width: 457px; height: 85px; } @media (max-width: 639px) { .c-loading__loader img { width: 229px; height: 43px; } } .c-loading__logo { position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; transform: translate(-100%, 0); } .c-loading__logo img { position: absolute; transform: translate(100%, 0); } .c-loading__bg { opacity: 0.1; filter: grayscale(100%); } .c-text-lg { font-size: 23px; line-height: 24px; } @media (max-width: 767px) { .c-text-lg { font-size: 16px; line-height: 1.5em; } } .c-text-md { font-size: 18px; line-height: 30px; } @media (max-width: 767px) { .c-text-md { font-size: 14px; line-height: 1.5em; } } .c-text-sm { font-size: 16px; line-height: 22px; } @media (max-width: 767px) { .c-text-sm { font-size: 12px; line-height: 1.5em; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ /* Icons */ /*@if $slick-font-family == "slick" { @font-face { font-family: "slick"; src: slick-font-url("slick.eot"); src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } }*/ /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir=rtl] .slick-prev { left: auto; right: -25px; } .slick-prev:before { content: "←"; } [dir=rtl] .slick-prev:before { content: "→"; } .slick-next { right: -25px; } [dir=rtl] .slick-next { left: -25px; right: auto; } .slick-next:before { content: "→"; } [dir=rtl] .slick-next:before { content: "←"; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } .c-text-slidein { transform: translate(-100%, 0); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s; overflow: hidden; display: block; } .c-text-slidein > span { display: block; transform: translate(100%, 0); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s; opacity: 0; } .c-text-slidein.-slow { transition-duration: 1.8s; } .c-text-slidein.-slow span { transition-duration: 1.8s; } .c-text-slidein.-visible { transform: translate(0, 0); } .c-text-slidein.-visible span { transform: translate(0, 0); opacity: 1; } .c-fadeup { opacity: 0; transform: translateY(30px); } .c-zoomout { opacity: 0; transform: scale(1.14); } /********************************************* object/project **********************************************/ .p-mv { background: url(../../img/birdcall/mv_bg.svg) calc(50vw - 95px) top no-repeat; min-height: 600px; } @media (max-width: 767px) { .p-mv { background: url(../../img/birdcall/mv_bg_sp.webp) left bottom 7.5vw/100% no-repeat; } } .p-mv__container { display: flex; justify-content: space-between; padding-top: 146px; } @media (max-width: 767px) { .p-mv__container { display: block; padding-top: 66px; } } .p-mv__content { flex: 1; } .p-mv__logo span { font-size: 18px; font-weight: 700; display: block; line-height: 42px; padding-left: 54px; background: url(../../img/birdcall/icon_x.svg) left center/44px no-repeat; letter-spacing: 0.05em; } @media (max-width: 767px) { .p-mv__logo span { background-size: 9.6vw; padding-left: 12vw; font-size: 3.125vw; } } @media (max-width: 767px) { .p-mv__logo img { width: 75.625vw; height: auto; } } @media (max-width: 767px) { .p-mv__copy img { width: 62.5vw; height: auto; } } .p-mv__list { display: flex; max-width: 460px; align-items: center; } .p-mv__btn { display: inline-block; color: #000; background-color: #F4D145; cursor: pointer; display: grid; place-content: center; line-height: 60px; padding: 0 16px 0 40px; text-decoration: none; transition: all 0.5s ease 0s; border: 1px solid transparent; border-radius: 30px; width: 290px; margin-right: 4px; box-shadow: 4px 4px 0px 0px #1a35bb; position: relative; top: 0; left: 0; } .p-mv__btn .c-btn-1-blue__text { color: #000; } .p-mv__btn::before { content: ""; position: absolute; display: block; width: 17px; height: 32px; left: 40px; top: 50%; transform: translateY(-50%); background-image: url(../../img/birdcall/p-mv__btn-icon.svg); background-size: 17px 32px; background-repeat: no-repeat; } @media (max-width: 767px) { .p-mv__btn::before { left: 56px; } } .p-mv__btn:hover { box-shadow: 0px 0px 0px 0px #1a35bb; top: 4px; left: 4px; } .p-mv__btn:hover span { color: #000; } .p-mv__item { display: flex; align-items: center; font-size: 16px; font-weight: 700; text-align: center; line-height: 1.5; margin-right: 23px; letter-spacing: 0.025em; } @media (max-width: 767px) { .p-mv__item { font-size: 13px; margin-right: 24px; } } @media (max-width: 639px) { .p-mv__item { font-size: 11px; margin-right: 20px; } } .p-mv__item span { padding: 0 8px 0.25em; } .p-mv__item::before, .p-mv__item::after { content: ""; display: block; width: 17px; height: 57px; background: url(../../img/birdcall/mv_laurels.svg) center center/cover no-repeat; } @media (max-width: 767px) { .p-mv__item::before, .p-mv__item::after { width: 15px; height: 50px; } } @media (max-width: 639px) { .p-mv__item::before, .p-mv__item::after { width: 12px; height: 40px; } } .p-mv__item::after { transform: scale(-1, 1); } .p-mv__item:first-child { max-width: 167px; } .p-mv-slide { width: 594px; margin-right: 4.333%; } @media screen and (max-width: 1240px) { .p-mv-slide { width: 50vw; margin-right: 0; } } @media (max-width: 767px) { .p-mv-slide { width: 100vw; margin: 0 -8.75vw; margin-top: 16vw; } } .p-mv-slide__pic { margin-bottom: 14px; background: #1a35bb; border-radius: 30px; } @media (max-width: 767px) { .p-mv-slide__pic { border-radius: 15px; margin-bottom: 12px; } .p-mv-slide__pic img { width: 90%; margin: 0 auto; } } .p-mv-slide__heading { font-size: 30px; line-height: 1.2; font-weight: 700; color: #1a35bb; margin-left: 24px; } .p-mv-slide__heading span { font-size: 14px; margin-bottom: 4px; display: block; } @media (max-width: 767px) { .p-mv-slide__heading { font-size: 20px; margin-left: 20px; } .p-mv-slide__heading span { font-size: 10px; } } .p-mv-slide__text { padding-left: 24px; } @media (max-width: 1023px) { .p-mv-slide__text { padding-left: 20px; font-size: 20px; } } .p-mv-slide .slick-prev, .p-mv-slide .slick-next { width: 46px; height: 46px; background: url(../../img/birdcall/mv_slide_arrow.svg) center center/cover no-repeat; z-index: 1; top: 176px; } .p-mv-slide .slick-prev::before, .p-mv-slide .slick-next::before { display: none; } .p-mv-slide .slick-prev.slick-disabled, .p-mv-slide .slick-next.slick-disabled { background-image: url(../../img/birdcall/mv_slide_arrow_disable.svg); } @media screen and (max-width: 1240px) { .p-mv-slide .slick-prev, .p-mv-slide .slick-next { top: 15vw; } } @media (max-width: 767px) { .p-mv-slide .slick-prev, .p-mv-slide .slick-next { width: 26px; height: 26px; top: 23.4vw; } } .p-mv-slide .slick-next { right: 0; } @media (max-width: 767px) { .p-mv-slide .slick-next { right: 5.5vw; } } .p-mv-slide .slick-prev { left: 0; transform: scale(-1, 1) translate(0, -50%); } @media (max-width: 767px) { .p-mv-slide .slick-prev { left: 5.5vw; } } .p-mv-slide .slick-slide { margin: 0 24px; } @media (max-width: 767px) { .p-mv-slide .slick-slide { margin: 0 8.75vw; } } .p-mv-slide .slick-dots { bottom: 22%; padding-right: 24px; text-align: right; line-height: 10px; } @media screen and (max-width: 1126px) { .p-mv-slide .slick-dots { bottom: 28%; } } @media screen and (max-width: 1045px) { .p-mv-slide .slick-dots { bottom: 33%; } } @media screen and (max-width: 1005px) { .p-mv-slide .slick-dots { bottom: 30%; } } @media screen and (max-width: 980px) { .p-mv-slide .slick-dots { bottom: 35%; } } @media screen and (max-width: 875px) { .p-mv-slide .slick-dots { bottom: 40%; } } @media screen and (max-width: 850px) { .p-mv-slide .slick-dots { bottom: 42%; } } @media screen and (max-width: 800px) { .p-mv-slide .slick-dots { bottom: 47%; } } @media screen and (max-width: 767px) { .p-mv-slide .slick-dots { bottom: 80px; } } @media screen and (max-width: 487px) { .p-mv-slide .slick-dots { bottom: 95px; } } @media (max-width: 767px) { .p-mv-slide .slick-dots { line-height: 6px; padding-right: calc(8.75vw + 12px); } } .p-mv-slide .slick-dots li { margin: 0 0 0 9px; width: 10px; height: 10px; } @media (max-width: 767px) { .p-mv-slide .slick-dots li { margin: 0 0 0 6px; width: 6px; height: 6px; } } .p-mv-slide .slick-dots li button { width: 10px; height: 10px; line-height: 10px; } @media (max-width: 767px) { .p-mv-slide .slick-dots li button { line-height: 6px; width: 6px; height: 6px; } } .p-mv-slide .slick-dots li button:before { content: ""; display: block; width: 10px; height: 10px; background: #fff; border-radius: 5px; opacity: 1; } @media (max-width: 767px) { .p-mv-slide .slick-dots li button:before { border-radius: 3px; width: 6px; height: 6px; } } .p-mv-slide .slick-dots li.slick-active button:before { background: #1a35bb; } .p-company-slider__heading { font-size: 30px; line-height: 41px; font-weight: 700; } @media (max-width: 639px) { .p-company-slider__heading { font-size: 20px; } } .p-company-slider__slider { position: relative; display: flex; width: 9999px; overflow: hidden; } .p-company-slider__list { display: flex; align-items: center; position: relative; } .p-company-slider__list:last-child { position: absolute; left: 1900px; width: 1900x; } .p-company-slider__list li { margin-right: 36px; } .p-company-slider__slider2 { position: relative; display: flex; width: 9999px; overflow: hidden; } .p-company-slider__list2 { display: flex; align-items: center; position: relative; } .p-company-slider__list2:last-child { position: absolute; left: 1975px; width: 1975px; } .p-company-slider__list2 li { margin-right: 32px; } .p-introduction { display: flex; justify-content: space-between; } @media (max-width: 767px) { .p-introduction { display: block; } } .p-introduction__content { width: 500px; } @media (max-width: 767px) { .p-introduction__content { width: 100%; margin-right: 0; } } .p-introduction__content .c-heading-1 { margin-right: -2em; } .p-introduction__pic { width: 700px; height: auto; opacity: 0; transform: translateY(-40px); position: relative; } @media (max-width: 767px) { .p-introduction__pic { max-width: none; width: 100vw; margin-left: -8.5%; } } .p-introduction__pic img { width: 100%; height: auto; display: block; } .p-introduction__pic-support, .p-introduction__pic-strategy, .p-introduction__pic-campaign { position: absolute; transition: all 0.3s ease 0s; } .p-introduction__pic-support img, .p-introduction__pic-strategy img, .p-introduction__pic-campaign img { max-width: 290px; height: auto; } @media (max-width: 767px) { .p-introduction__pic-support img, .p-introduction__pic-strategy img, .p-introduction__pic-campaign img { max-width: 200px; } } .p-introduction__pic-support::after, .p-introduction__pic-strategy::after, .p-introduction__pic-campaign::after { content: ""; position: absolute; pointer-events: none; transition: all 0.3s ease 0s; } .p-introduction__pic-support:hover, .p-introduction__pic-strategy:hover, .p-introduction__pic-campaign:hover { opacity: 0.7; } .p-introduction__pic-support { top: 8%; left: 8%; } @media (max-width: 767px) { .p-introduction__pic-support { top: 10%; left: 28%; transform: translateX(-20%); } } @media (max-width: 639px) { .p-introduction__pic-support { left: 25%; transform: translateX(-30%); } } .p-introduction__pic-support::after { background: url(../../img/birdcall/icon-bar_down.png) center center/contain no-repeat; width: 60px; height: 60px; bottom: -100%; right: 18%; } @media (max-width: 767px) { .p-introduction__pic-support::after { bottom: -92%; height: 35px; width: 50px; } } .p-introduction__pic-support:hover::after { opacity: 1; } .p-introduction__pic-strategy { top: 50%; right: 0; } @media (max-width: 767px) { .p-introduction__pic-strategy { top: 40%; right: 5%; } } .p-introduction__pic-strategy::after { background: url(../../img/birdcall/icon-bar_up.png) center center/contain no-repeat; width: 60px; height: 60px; bottom: 100%; right: 52%; } @media (max-width: 767px) { .p-introduction__pic-strategy::after { height: 45px; width: 50px; right: 42%; } } .p-introduction__pic-campaign { bottom: 17%; right: 19%; } @media (max-width: 767px) { .p-introduction__pic-campaign { bottom: 20%; right: 30%; } } @media (max-width: 639px) { .p-introduction__pic-campaign { right: 15%; transform: translateX(-10%); } } .p-introduction__pic-campaign::after { background: url(../../img/birdcall/icon-bar_up.png) center center/contain no-repeat; width: 60px; height: 52px; bottom: 100%; right: 65%; } @media (max-width: 767px) { .p-introduction__pic-campaign::after { height: 45px; width: 52px; } } .p-feature { scroll-margin-top: 120px; background: #f7f7f7; border-radius: 16px; padding: 60px 72px; } @media (max-width: 767px) { .p-feature { scroll-margin-top: 60px; } } @media (max-width: 1479px) { .p-feature { padding: 48px 5vw; } } @media (max-width: 767px) { .p-feature { padding: 36px 6.25vw; } } .p-feature-campaign__content { display: flex; } @media (max-width: 767px) { .p-feature-campaign__content { display: block; } } .p-feature-campaign__heading { width: 619px; } @media (max-width: 767px) { .p-feature-campaign__heading { width: 100%; } } .p-feature-campaign__text { max-width: 528px; flex: 1; transition-delay: 0.3s; } .p-feature-campaign__text span { transition-delay: 0.3s; } @media (max-width: 767px) { .p-feature-campaign__text { width: 100%; } } .p-feature-thumbnail-list { display: flex; justify-content: space-between; } @media (max-width: 767px) { .p-feature-thumbnail-list { width: 177.75vw; justify-content: flex-start; } } @media (max-width: 767px) { .p-feature-thumbnail-list__wrapper { overflow-x: scroll; margin-right: -6.25vw; } } .p-feature-thumbnail-list__item { max-width: 372px; width: 32%; opacity: 0; transform: translateY(30px); } .p-feature-thumbnail-list__item:hover { opacity: 0.7; } @media (max-width: 767px) { .p-feature-thumbnail-list__item { width: 53vw; max-width: none; margin-right: 6.25vw; } } .p-feature-thumbnail-list__item a:hover .p-feature-thumbnail-list__title { color: #1a35bb; } .p-feature-thumbnail-list__item a:hover .p-feature-thumbnail-list__text { color: #000; } .p-feature-thumbnail-list__pic { margin-bottom: 12px; } .p-feature-thumbnail-list__pic img { width: 100%; height: auto; } .p-feature-thumbnail-list__title { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; } @media (max-width: 1479px) { .p-feature-thumbnail-list__title { font-size: 21px; } } @media (max-width: 767px) { .p-feature-thumbnail-list__title { font-size: 16px; } } .p-feature-strategy { display: flex; justify-content: space-between; align-items: flex-start; } @media (max-width: 767px) { .p-feature-strategy { display: block; } } .p-feature-strategy__content { width: 60%; max-width: 660px; } @media (max-width: 767px) { .p-feature-strategy__content { max-width: none; width: 100%; } } .p-feature-strategy__text { max-width: 506px; } @media (max-width: 767px) { .p-feature-strategy__text { max-width: none; } } .p-feature-strategy__pic { margin-right: -40px; max-width: 556px; width: 48%; height: auto; background: url(../../img/birdcall/feature_bg_01.svg) center center/0px no-repeat; opacity: 0; transform: translateY(-40px); } @media (max-width: 767px) { .p-feature-strategy__pic { margin-right: -3.33vw; margin-left: -3.33vw; width: auto; } } .p-feature-strategy__pic img { width: 100%; height: auto; background: url(../../img/birdcall/feature_bg_02.svg) center center/0px no-repeat; } .p-feature-round-list { display: flex; flex-flow: row wrap; margin-top: -16px; } @media (max-width: 767px) { .p-feature-round-list { margin-top: -12px; } } .p-feature-round-list__item { background: #1a35bb; color: #fff; font-size: 16px; line-height: 1em; padding: 10px 20px; border-radius: 18px; text-align: center; font-weight: 700; margin-right: 16px; margin-top: 16px; } @media (max-width: 767px) { .p-feature-round-list__item { font-size: 12px; padding: 8px 16px; margin-right: 8px; margin-top: 12px; } } .p-feature-support { display: flex; justify-content: space-between; align-items: flex-end; } @media (max-width: 767px) { .p-feature-support { display: block; } } .p-feature-support__content { max-width: 600px; width: 50%; } @media (max-width: 767px) { .p-feature-support__content { width: 100%; max-width: none; } } .p-feature-icon-list { flex: 1; margin-left: 48px; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (max-width: 767px) { .p-feature-icon-list { margin-left: 0; gap: 10px; } } .p-feature-icon-list__item { text-align: center; background: #fff; padding: 24px 12px; border-radius: 20px; opacity: 0; transform: translateY(30px); } @media (max-width: 767px) { .p-feature-icon-list__item { padding: 12px 8px; border-radius: 10px; } } .p-feature-icon-list__pic { margin-bottom: 16px; } @media (max-width: 767px) { .p-feature-icon-list__pic { margin-bottom: 8px; } } .p-feature-icon-list__pic img { width: 55px; height: auto; } @media (max-width: 767px) { .p-feature-icon-list__pic img { width: 40px; } } .p-feature-icon-list__title { font-size: 20px; line-height: 1.4; } @media (max-width: 767px) { .p-feature-icon-list__title { font-size: 12px; } } .p-cta { border-radius: 48px; padding: 76px 0; background-image: url(../../img/birdcall/cta_bg_01.svg), url(../../img/birdcall/cta_bg_02.svg); background-position: right center; background-size: 0, 0; background-repeat: no-repeat; position: relative; overflow: hidden; } @media (max-width: 767px) { .p-cta { background-image: url(../../img/birdcall/cta_bg_01_sp.svg), url(../../img/birdcall/cta_bg_02_sp.svg); background-position: right bottom; padding: 0; border-radius: 0 20px 20px 0; } } .p-cta__text { font-size: 28px; line-height: 1.5; } @media (max-width: 767px) { .p-cta__text { font-size: 17px; line-height: 1.7; } } .p-cta__pic { position: absolute; z-index: 0; right: 0; bottom: -1px; width: 629px; opacity: 0; transform: translateX(100px); } @media (max-width: 767px) { .p-cta__pic { width: 100%; position: relative; margin-top: 20px; margin-bottom: -1px; } } .p-cta__pic img { width: 100%; height: auto; } .p-cta02 { border-radius: 48px; padding: 38px 67px 32px; background-position: right center; background-size: 0, 0; background-repeat: no-repeat; position: relative; overflow: hidden; border: 5px solid #1A35BB; } @media (max-width: 767px) { .p-cta02 { background-position: right bottom; border-radius: 20px; padding: 62px 42px 0; } } .p-cta02 img { max-width: 400px; } @media (max-width: 767px) { .p-cta02 img { max-width: 100%; } } .p-cta02__text { font-size: 28px; line-height: 1.5; font-weight: 700; margin: 20px 0; color: #1A35BB; } @media (max-width: 767px) { .p-cta02__text { font-size: 17px; line-height: 1.7; } } .p-cta02__text02 { font-size: 18px; max-width: 505px; line-height: 1.66; } .p-cta02__pic { position: absolute; z-index: 0; right: 0; bottom: -1px; width: 629px; width: 40%; height: auto; transform: translateX(100px); } @media (max-width: 767px) { .p-cta02__pic { width: 100%; position: relative; margin-top: 20px; margin-bottom: -1px; } } .p-cta02__pic img { width: 100%; height: auto; } .p-function { scroll-margin-top: 120px; } @media (max-width: 767px) { .p-function { scroll-margin-top: 60px; } } @media (max-width: 767px) { .p-function__section { margin: 0 -6.25vw; } } .p-function__heading { background: #f7f7f7; color: #24315c; font-size: 24px; line-height: 44px; font-weight: 700; letter-spacing: 0.05em; padding: 6px 0; text-align: center; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } @media (max-width: 767px) { .p-function__heading { font-size: 19px; line-height: 42px; border-radius: 4px; margin-bottom: 24px; padding: 2px 0; } } .p-function__heading-comment { font-size: 16px; margin-left: 36px; letter-spacing: 0.05em; } @media (max-width: 767px) { .p-function__heading-comment { font-size: 12px; margin-left: 16px; } } .p-function__grid-1 { display: flex; justify-content: space-between; } @media (max-width: 767px) { .p-function__grid-1 { display: block; } } .p-function__grid-1 > * { border-left: 1px dashed #707070; width: 33.3333333333%; padding: 0; } .p-function__grid-1 > *:first-child { border: none; } @media (max-width: 767px) { .p-function__grid-1 > * { border: none; border-top: 1px dashed #707070; width: 100%; margin-top: 24px; padding: 24px 6.25vw 0; } .p-function__grid-1 > *:first-child { border: none; padding: 0; margin: 0; } } .p-function__grid-2 { display: grid; gap: 80px; grid-template-columns: 1fr 1fr; } @media (max-width: 767px) { .p-function__grid-2 { display: block; } } @media (max-width: 767px) { .p-function__grid-2 .p-function__item { width: 33.3%; } } .p-function__grid-2 .p-function__list { opacity: 0; transform: translateY(30px); } .p-function__sub-section { opacity: 0; transform: translateY(30px); } .p-function__sub-heading { font-size: 20px; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 16px; text-align: center; color: #24315c; } @media (max-width: 767px) { .p-function__sub-heading { font-size: 18px; } } .p-function__list { display: flex; justify-content: space-around; padding: 0 16px; align-items: baseline; } @media (max-width: 767px) { .p-function__list { padding: 0; } } .p-function__item { text-align: center; } .p-function__icon { margin-bottom: 4px; } .p-function__icon img { width: 80px; height: auto; } @media (max-width: 767px) { .p-function__icon img { width: 40px; } } .p-function__text { font-size: 16px; line-height: 1.5em; color: #707070; } @media (max-width: 767px) { .p-function__text { font-size: 12px; } } .p-function__icon-plus { text-align: center; margin: 40px 0; } @media (max-width: 767px) { .p-function__icon-plus { margin: 24px 0; } .p-function__icon-plus img { width: 24px; } } #icon-dm img { zoom: 0.7; position: relative; top: -14px; } .p-price { scroll-margin-top: 120px; } @media (max-width: 767px) { .p-price { scroll-margin-top: 60px; width: 95%; } } .p-price__wrapper { background: #f7f7f7; border-radius: 50px; color: #24315c; padding: 32px 28px 8px; overflow-x: auto; } @media (max-width: 767px) { .p-price__wrapper { border-radius: 24px; padding: 24px 16px 4px; margin-right: -2.5vw; } } .p-price__table { width: 100%; min-width: 1120px; } @media (max-width: 767px) { .p-price__table { min-width: 780px; } } .p-price__table tbody tr { border-top: 1px dashed #24315c; } .p-price__table tbody th { vertical-align: middle; white-space: nowrap; padding: 20px 0; } @media (max-width: 767px) { .p-price__table tbody th { padding: 14px 0; } } .p-price__table tbody td { padding: 20px; text-align: center; vertical-align: middle; } @media (max-width: 767px) { .p-price__table tbody td { padding: 14px 0; } } .p-price__title { font-size: 24px; line-height: 1.25; } @media (max-width: 767px) { .p-price__title { font-size: 16px; } } .p-price__text { font-size: 14px; line-height: 1.4; text-align: center; } @media (max-width: 767px) { .p-price__text { font-size: 10px; } } .p-price__text-small { font-size: 12px; line-height: 1.5; margin-top: 1em; } @media (max-width: 767px) { .p-price__text-small { font-size: 10px; } } .p-price__list { font-size: 12px; letter-spacing: 0.05em; list-style: disc; margin-left: 1.5em; margin-top: 1em; } @media (max-width: 767px) { .p-price__list { font-size: 10px; } } .p-price__list li { margin-top: 2px; line-height: 1.5em; } .p-price__list li:first-child { margin-top: 0; } .p-price__icon img { width: 32px; height: auto; } @media (max-width: 767px) { .p-price__icon img { width: 24px; } } .p-price-plan { white-space: nowrap; text-align: center; padding: 0 0 20px; } @media (max-width: 767px) { .p-price-plan { padding-bottom: 12px; } } .p-price-plan__text { font-size: 12px; line-height: 1.25; } @media (max-width: 767px) { .p-price-plan__text { font-size: 10px; } } .p-price-plan__title { background: #fff; border-radius: 6px; padding: 6px 20px; border: #707070 1px solid; width: -moz-fit-content; width: fit-content; margin: 12px auto; font-size: 14px; line-height: 1em; } @media (max-width: 767px) { .p-price-plan__title { font-size: 12px; margin: 10px auto 8px; border-radius: 4px; padding: 4px 16px; } } .p-price-plan__price { font-size: 20px; line-height: 1em; } @media (max-width: 767px) { .p-price-plan__price { font-size: 16px; } } .p-problem { scroll-margin-top: 120px; } @media (max-width: 767px) { .p-problem { scroll-margin-top: 60px; } } .p-problem__case { display: flex; justify-content: space-between; align-items: flex-end; flex-flow: row wrap; } .p-problem__heading-1 { width: 436px; background: #1a35bb; color: #fff; border-radius: 28px; font-size: 36px; line-height: 1.3; letter-spacing: 0.05em; padding: 32px 36px; font-weight: 700; } @media (max-width: 767px) { .p-problem__heading-1 { font-size: 21px; width: 70%; min-width: 230px; padding: 16px 20px; border-radius: 20px; } } .p-problem__heading-1 img { display: block; margin-bottom: 12px; } @media (max-width: 767px) { .p-problem__heading-1 img { width: 48px; margin-bottom: 8px; } } .p-problem__heading-2 { font-size: 16px; line-height: 1.5; letter-spacing: 0.03em; background: #fff; line-height: 2.37; border: 2px solid #1a35bb; border-radius: 21px; padding: 0 21px; font-weight: 700; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .p-problem__heading-2 { font-size: 12px; border-width: 1px; line-height: 24px; border-radius: 13px; padding: 0 12px; } } .p-problem__heading-3 { color: #1a35bb; font-size: 38px; letter-spacing: 0.05em; line-height: 1em; font-weight: 700; width: 112px; } @media (max-width: 767px) { .p-problem__heading-3 { font-size: 21px; width: auto; } } .p-problem__solution { width: 320px; background: #f4d145; color: #1a35bb; border-radius: 28px; padding: 24px 24px 32px; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; font-weight: 700; } @media (max-width: 767px) { .p-problem__solution { margin-left: auto; margin-top: 20px; } } @media (max-width: 767px) { .p-problem__solution { font-size: 14px; line-height: 1.5; padding: 16px 20px 20px; border-radius: 20px; width: 70%; min-width: 240px; } } .p-problem__outcome { width: 100%; border-radius: 28px; background: #f7f7f7; padding: 56px 36px 36px; display: flex; justify-content: space-between; flex-flow: row wrap; } @media (max-width: 767px) { .p-problem__outcome { display: block; border-radius: 20px; padding: 24px 20px 32px; } } .p-problem__list { flex: 1; } @media (max-width: 767px) { .p-problem__list { margin-top: 20px; } } .p-problem__item { background: url(../../img/birdcall/problem_icon_check.svg) left 1px/28px no-repeat; font-size: 20px; line-height: 28px; margin-top: 10px; padding-left: 40px; } @media (max-width: 767px) { .p-problem__item { background-size: 14px; background-position: left 3px; padding-left: 24px; } } .p-problem__item:first-child { margin-top: 0; } @media (max-width: 767px) { .p-problem__item { font-size: 14px; line-height: 19px; } } .p-problem__btn { width: 100%; } .p-problem .c-btn-1__icon::after { background: #fff; } .p-faq { scroll-margin-top: 120px; } @media (max-width: 767px) { .p-faq { scroll-margin-top: 60px; } } .p-faq__list { display: grid; gap: 24px 80px; grid-template-columns: 1fr 1fr; font-size: 16px; line-height: 28px; } @media (max-width: 767px) { .p-faq__list { font-size: 14px; display: block; } } .p-faq__item { margin-top: 20px; } .p-other-service { background-color: #f7f7f7; } .p-other-service__heading { font-size: 42px; line-height: 1; letter-spacing: 0.05em; margin: 0 auto 40px; font-weight: 400; color: #24315c; } @media (max-width: 767px) { .p-other-service__heading { font-size: 26px; } } .wpinfo { position: relative; width: 92%; max-width: 1200px; overflow: hidden; margin: 0 auto; } .wpinfo h2 { font-size: 42px; line-height: 1; letter-spacing: 0.05em; margin: 0 auto 40px; font-weight: 400; color: #24315c; } @media (max-width: 767px) { .wpinfo h2 { font-size: 26px; } } .wpinfo-content { margin-right: -43px; display: flex; border-radius: 6px; } @media (max-width: 767px) { .wpinfo-content { flex-wrap: wrap; display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-right: calc(2px - 4vw); } } .wpinfo-content .slick-dots { position: absolute; left: 328px; top: -62px; width: auto; display: flex; height: 2px; } @media (max-width: 767px) { .wpinfo-content .slick-dots { left: 200px; top: -56px; } } .wpinfo-content .slick-dots li { width: 78px; height: 2px; background: #1a35bb; display: block; margin: 0 10px 0 0; opacity: 0.53; } .wpinfo-content .slick-dots li.slick-active { opacity: 1; } @media (max-width: 767px) { .wpinfo-content .slick-dots li { width: 28px; margin: 0 6px 0 0; } } .wpinfo .slick-slide { margin: 0 45px 0 0; width: calc((100% - 90px) / 3); border-radius: 6px; border: #d2d5de 1px solid; overflow: hidden; padding-bottom: 24px; box-shadow: 0 0 20px rgba(36, 49, 92, 0.1); } @media (max-width: 767px) { .wpinfo .slick-slide { margin: 0 4vw 0 0; width: calc((100% - 4vw) / 2); } } .wpinfo-content-item img { width: 100%; margin: 0 auto; position: relative; transform: scale(1); transition: 0.3s ease-in-out; } .wpinfo-content-item img:hover { transform: rotate(-5deg) scale(1.2); } .wpinfo-content-item figcaption { font-size: 20px; line-height: 1.4; margin: 18px 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 56px; } @media (max-width: 767px) { .wpinfo-content-item figcaption { font-size: 14px; line-height: 1.5; height: 42px; } } .wpinfo-content-item .mask { display: block; line-height: 0; overflow: hidden; } .wpinfo-content-item a.icon_window-wp { font-size: 15px; display: block; text-align: right; padding-right: 32px; background: url(../../img/birdcall/wpinfo_icon_external.svg) right center no-repeat; } @media (max-width: 767px) { .wpinfo-content-item a.icon_window-wp { font-size: 10px; background-size: 10px; padding-right: 20px; } } .wpinfo-content-item figcaption, .wpinfo-content-item a.icon_window-wp { margin-left: 20px; margin-right: 20px; } @media (max-width: 767px) { .wpinfo-content-item figcaption, .wpinfo-content-item a.icon_window-wp { margin-left: 12px; margin-right: 12px; } } .wpinfo-btn { margin-top: 64px; text-align: center; } @media (max-width: 767px) { .wpinfo-btn { margin-top: 40px; } } .wpinfo-btn a { color: #24315c; font-size: 15px; max-width: 324px; width: 90%; line-height: 78px; text-align: center; border: 1px solid #24315c; border-radius: 40px; transition: 0.2s background-color; display: inline-block; } .wpinfo-btn a::after { content: url(../../img/birdcall/wpinfo_icon_external.svg); margin-left: 8px; vertical-align: -2px; } @media (max-width: 767px) { .wpinfo-btn a { font-size: 14px; line-height: 60px; } } .wpinfo-btn a:hover { background: #24315c; color: #fff; } .wpinfo-btn a:hover::after { content: url(../../img/birdcall/wpinfo_icon_external_white.svg); } .p-fixed-btn { position: fixed; bottom: 0; left: 0; width: 100%; background: #1a35bb; height: 70px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); transform: translateY(70px); } @media (min-width: 768px) { .p-fixed-btn { display: none; } } /********************************************* utility/ **********************************************/ @media (min-width: 640px) { .u-hidden-pc { display: none; } .u-hidden-tab { display: block; } } @media (max-width: 639px) { .u-hidden-tab { display: none; } } @media (max-width: 639px) { .u-hidden-sp { display: none; } } .u-mt-0 { margin-top: 0px; } .u-mb-0 { margin-bottom: 0px; } .u-pt-0 { padding-top: 0px; } .u-pb-0 { padding-bottom: 0px; } .u-mt-1 { margin-top: 4px; } .u-mb-1 { margin-bottom: 4px; } .u-pt-1 { padding-top: 4px; } .u-pb-1 { padding-bottom: 4px; } .u-mt-2 { margin-top: 8px; } .u-mb-2 { margin-bottom: 8px; } .u-pt-2 { padding-top: 8px; } .u-pb-2 { padding-bottom: 8px; } .u-mt-3 { margin-top: 12px; } .u-mb-3 { margin-bottom: 12px; } .u-pt-3 { padding-top: 12px; } .u-pb-3 { padding-bottom: 12px; } .u-mt-4 { margin-top: 16px; } .u-mb-4 { margin-bottom: 16px; } .u-pt-4 { padding-top: 16px; } .u-pb-4 { padding-bottom: 16px; } .u-mt-5 { margin-top: 20px; } .u-mb-5 { margin-bottom: 20px; } .u-pt-5 { padding-top: 20px; } .u-pb-5 { padding-bottom: 20px; } .u-mt-6 { margin-top: 24px; } .u-mb-6 { margin-bottom: 24px; } .u-pt-6 { padding-top: 24px; } .u-pb-6 { padding-bottom: 24px; } .u-mt-7 { margin-top: 28px; } .u-mb-7 { margin-bottom: 28px; } .u-pt-7 { padding-top: 28px; } .u-pb-7 { padding-bottom: 28px; } .u-mt-8 { margin-top: 32px; } .u-mb-8 { margin-bottom: 32px; } .u-pt-8 { padding-top: 32px; } .u-pb-8 { padding-bottom: 32px; } .u-mt-9 { margin-top: 36px; } .u-mb-9 { margin-bottom: 36px; } .u-pt-9 { padding-top: 36px; } .u-pb-9 { padding-bottom: 36px; } .u-mt-10 { margin-top: 40px; } .u-mb-10 { margin-bottom: 40px; } .u-pt-10 { padding-top: 40px; } .u-pb-10 { padding-bottom: 40px; } .u-mt-11 { margin-top: 44px; } .u-mb-11 { margin-bottom: 44px; } .u-pt-11 { padding-top: 44px; } .u-pb-11 { padding-bottom: 44px; } .u-mt-12 { margin-top: 48px; } .u-mb-12 { margin-bottom: 48px; } .u-pt-12 { padding-top: 48px; } .u-pb-12 { padding-bottom: 48px; } .u-mt-14 { margin-top: 56px; } .u-mb-14 { margin-bottom: 56px; } .u-pt-14 { padding-top: 56px; } .u-pb-14 { padding-bottom: 56px; } .u-mt-16 { margin-top: 64px; } .u-mb-16 { margin-bottom: 64px; } .u-pt-16 { padding-top: 64px; } .u-pb-16 { padding-bottom: 64px; } .u-mt-20 { margin-top: 80px; } .u-mb-20 { margin-bottom: 80px; } .u-pt-20 { padding-top: 80px; } .u-pb-20 { padding-bottom: 80px; } .u-mt-24 { margin-top: 96px; } .u-mb-24 { margin-bottom: 96px; } .u-pt-24 { padding-top: 96px; } .u-pb-24 { padding-bottom: 96px; } .u-mt-28 { margin-top: 112px; } .u-mb-28 { margin-bottom: 112px; } .u-pt-28 { padding-top: 112px; } .u-pb-28 { padding-bottom: 112px; } .u-mt-32 { margin-top: 128px; } .u-mb-32 { margin-bottom: 128px; } .u-pt-32 { padding-top: 128px; } .u-pb-32 { padding-bottom: 128px; } .u-mt-36 { margin-top: 144px; } .u-mb-36 { margin-bottom: 144px; } .u-pt-36 { padding-top: 144px; } .u-pb-36 { padding-bottom: 144px; } .u-mt-40 { margin-top: 160px; } .u-mb-40 { margin-bottom: 160px; } .u-pt-40 { padding-top: 160px; } .u-pb-40 { padding-bottom: 160px; } .u-mt-44 { margin-top: 176px; } .u-mb-44 { margin-bottom: 176px; } .u-pt-44 { padding-top: 176px; } .u-pb-44 { padding-bottom: 176px; } .u-mt-48 { margin-top: 192px; } .u-mb-48 { margin-bottom: 192px; } .u-pt-48 { padding-top: 192px; } .u-pb-48 { padding-bottom: 192px; } @media (max-width: 767px) { /* 20221216_margin整理用タブレット */ .md\:u-mt-0 { margin-top: 0px; } .md\:u-mb-0 { margin-bottom: 0px; } .md\:u-pt-0 { padding-top: 0px; } .md\:u-pb-0 { padding-bottom: 0px; } .md\:u-mt-1 { margin-top: 4px; } .md\:u-mb-1 { margin-bottom: 4px; } .md\:u-pt-1 { padding-top: 4px; } .md\:u-pb-1 { padding-bottom: 4px; } .md\:u-mt-2 { margin-top: 8px; } .md\:u-mb-2 { margin-bottom: 8px; } .md\:u-pt-2 { padding-top: 8px; } .md\:u-pb-2 { padding-bottom: 8px; } .md\:u-mt-3 { margin-top: 12px; } .md\:u-mb-3 { margin-bottom: 12px; } .md\:u-pt-3 { padding-top: 12px; } .md\:u-pb-3 { padding-bottom: 12px; } .md\:u-mt-4 { margin-top: 16px; } .md\:u-mb-4 { margin-bottom: 16px; } .md\:u-pt-4 { padding-top: 16px; } .md\:u-pb-4 { padding-bottom: 16px; } .md\:u-mt-5 { margin-top: 20px; } .md\:u-mb-5 { margin-bottom: 20px; } .md\:u-pt-5 { padding-top: 20px; } .md\:u-pb-5 { padding-bottom: 20px; } .md\:u-mt-6 { margin-top: 24px; } .md\:u-mb-6 { margin-bottom: 24px; } .md\:u-pt-6 { padding-top: 24px; } .md\:u-pb-6 { padding-bottom: 24px; } .md\:u-mt-7 { margin-top: 28px; } .md\:u-mb-7 { margin-bottom: 28px; } .md\:u-pt-7 { padding-top: 28px; } .md\:u-pb-7 { padding-bottom: 28px; } .md\:u-mt-8 { margin-top: 32px; } .md\:u-mb-8 { margin-bottom: 32px; } .md\:u-pt-8 { padding-top: 32px; } .md\:u-pb-8 { padding-bottom: 32px; } .md\:u-mt-9 { margin-top: 36px; } .md\:u-mb-9 { margin-bottom: 36px; } .md\:u-pt-9 { padding-top: 36px; } .md\:u-pb-9 { padding-bottom: 36px; } .md\:u-mt-10 { margin-top: 40px; } .md\:u-mb-10 { margin-bottom: 40px; } .md\:u-pt-10 { padding-top: 40px; } .md\:u-pb-10 { padding-bottom: 40px; } .md\:u-mt-11 { margin-top: 44px; } .md\:u-mb-11 { margin-bottom: 44px; } .md\:u-pt-11 { padding-top: 44px; } .md\:u-pb-11 { padding-bottom: 44px; } .md\:u-mt-12 { margin-top: 48px; } .md\:u-mb-12 { margin-bottom: 48px; } .md\:u-pt-12 { padding-top: 48px; } .md\:u-pb-12 { padding-bottom: 48px; } .md\:u-mt-14 { margin-top: 56px; } .md\:u-mb-14 { margin-bottom: 56px; } .md\:u-pt-14 { padding-top: 56px; } .md\:u-pb-14 { padding-bottom: 56px; } .md\:u-mt-16 { margin-top: 64px; } .md\:u-mb-16 { margin-bottom: 64px; } .md\:u-pt-16 { padding-top: 64px; } .md\:u-pb-16 { padding-bottom: 64px; } .md\:u-mt-20 { margin-top: 80px; } .md\:u-mb-20 { margin-bottom: 80px; } .md\:u-pt-20 { padding-top: 80px; } .md\:u-pb-20 { padding-bottom: 80px; } .md\:u-mt-24 { margin-top: 96px; } .md\:u-mb-24 { margin-bottom: 96px; } .md\:u-pt-24 { padding-top: 96px; } .md\:u-pb-24 { padding-bottom: 96px; } .md\:u-mt-28 { margin-top: 112px; } .md\:u-mb-28 { margin-bottom: 112px; } .md\:u-pt-28 { padding-top: 112px; } .md\:u-pb-28 { padding-bottom: 112px; } .md\:u-mt-32 { margin-top: 128px; } .md\:u-mb-32 { margin-bottom: 128px; } .md\:u-pt-32 { padding-top: 128px; } .md\:u-pb-32 { padding-bottom: 128px; } .md\:u-mt-36 { margin-top: 144px; } .md\:u-mb-36 { margin-bottom: 144px; } .md\:u-pt-36 { padding-top: 144px; } .md\:u-pb-36 { padding-bottom: 144px; } .md\:u-mt-40 { margin-top: 160px; } .md\:u-mb-40 { margin-bottom: 160px; } .md\:u-pt-40 { padding-top: 160px; } .md\:u-pb-40 { padding-bottom: 160px; } .md\:u-mt-44 { margin-top: 176px; } .md\:u-mb-44 { margin-bottom: 176px; } .md\:u-pt-44 { padding-top: 176px; } .md\:u-pb-44 { padding-bottom: 176px; } .md\:u-mt-48 { margin-top: 192px; } .md\:u-mb-48 { margin-bottom: 192px; } .md\:u-pt-48 { padding-top: 192px; } .md\:u-pb-48 { padding-bottom: 192px; } } @media (max-width: 639px) { .sm\:u-mt-0 { margin-top: 0px; } .sm\:u-mb-0 { margin-bottom: 0px; } .sm\:u-pt-0 { padding-top: 0px; } .sm\:u-pb-0 { padding-bottom: 0px; } .sm\:u-mt-1 { margin-top: 4px; } .sm\:u-mb-1 { margin-bottom: 4px; } .sm\:u-pt-1 { padding-top: 4px; } .sm\:u-pb-1 { padding-bottom: 4px; } .sm\:u-mt-2 { margin-top: 8px; } .sm\:u-mb-2 { margin-bottom: 8px; } .sm\:u-pt-2 { padding-top: 8px; } .sm\:u-pb-2 { padding-bottom: 8px; } .sm\:u-mt-3 { margin-top: 12px; } .sm\:u-mb-3 { margin-bottom: 12px; } .sm\:u-pt-3 { padding-top: 12px; } .sm\:u-pb-3 { padding-bottom: 12px; } .sm\:u-mt-4 { margin-top: 16px; } .sm\:u-mb-4 { margin-bottom: 16px; } .sm\:u-pt-4 { padding-top: 16px; } .sm\:u-pb-4 { padding-bottom: 16px; } .sm\:u-mt-5 { margin-top: 20px; } .sm\:u-mb-5 { margin-bottom: 20px; } .sm\:u-pt-5 { padding-top: 20px; } .sm\:u-pb-5 { padding-bottom: 20px; } .sm\:u-mt-6 { margin-top: 24px; } .sm\:u-mb-6 { margin-bottom: 24px; } .sm\:u-pt-6 { padding-top: 24px; } .sm\:u-pb-6 { padding-bottom: 24px; } .sm\:u-mt-7 { margin-top: 28px; } .sm\:u-mb-7 { margin-bottom: 28px; } .sm\:u-pt-7 { padding-top: 28px; } .sm\:u-pb-7 { padding-bottom: 28px; } .sm\:u-mt-8 { margin-top: 32px; } .sm\:u-mb-8 { margin-bottom: 32px; } .sm\:u-pt-8 { padding-top: 32px; } .sm\:u-pb-8 { padding-bottom: 32px; } .sm\:u-mt-9 { margin-top: 36px; } .sm\:u-mb-9 { margin-bottom: 36px; } .sm\:u-pt-9 { padding-top: 36px; } .sm\:u-pb-9 { padding-bottom: 36px; } .sm\:u-mt-10 { margin-top: 40px; } .sm\:u-mb-10 { margin-bottom: 40px; } .sm\:u-pt-10 { padding-top: 40px; } .sm\:u-pb-10 { padding-bottom: 40px; } .sm\:u-mt-11 { margin-top: 44px; } .sm\:u-mb-11 { margin-bottom: 44px; } .sm\:u-pt-11 { padding-top: 44px; } .sm\:u-pb-11 { padding-bottom: 44px; } .sm\:u-mt-12 { margin-top: 48px; } .sm\:u-mb-12 { margin-bottom: 48px; } .sm\:u-pt-12 { padding-top: 48px; } .sm\:u-pb-12 { padding-bottom: 48px; } .sm\:u-mt-14 { margin-top: 56px; } .sm\:u-mb-14 { margin-bottom: 56px; } .sm\:u-pt-14 { padding-top: 56px; } .sm\:u-pb-14 { padding-bottom: 56px; } .sm\:u-mt-16 { margin-top: 64px; } .sm\:u-mb-16 { margin-bottom: 64px; } .sm\:u-pt-16 { padding-top: 64px; } .sm\:u-pb-16 { padding-bottom: 64px; } .sm\:u-mt-20 { margin-top: 80px; } .sm\:u-mb-20 { margin-bottom: 80px; } .sm\:u-pt-20 { padding-top: 80px; } .sm\:u-pb-20 { padding-bottom: 80px; } .sm\:u-mt-24 { margin-top: 96px; } .sm\:u-mb-24 { margin-bottom: 96px; } .sm\:u-pt-24 { padding-top: 96px; } .sm\:u-pb-24 { padding-bottom: 96px; } .sm\:u-mt-28 { margin-top: 112px; } .sm\:u-mb-28 { margin-bottom: 112px; } .sm\:u-pt-28 { padding-top: 112px; } .sm\:u-pb-28 { padding-bottom: 112px; } .sm\:u-mt-32 { margin-top: 128px; } .sm\:u-mb-32 { margin-bottom: 128px; } .sm\:u-pt-32 { padding-top: 128px; } .sm\:u-pb-32 { padding-bottom: 128px; } .sm\:u-mt-36 { margin-top: 144px; } .sm\:u-mb-36 { margin-bottom: 144px; } .sm\:u-pt-36 { padding-top: 144px; } .sm\:u-pb-36 { padding-bottom: 144px; } .sm\:u-mt-40 { margin-top: 160px; } .sm\:u-mb-40 { margin-bottom: 160px; } .sm\:u-pt-40 { padding-top: 160px; } .sm\:u-pb-40 { padding-bottom: 160px; } .sm\:u-mt-44 { margin-top: 176px; } .sm\:u-mb-44 { margin-bottom: 176px; } .sm\:u-pt-44 { padding-top: 176px; } .sm\:u-pb-44 { padding-bottom: 176px; } .sm\:u-mt-48 { margin-top: 192px; } .sm\:u-mb-48 { margin-bottom: 192px; } .sm\:u-pt-48 { padding-top: 192px; } .sm\:u-pb-48 { padding-bottom: 192px; } } .u-text-right { text-align: right; } .u-text-left { text-align: left; } .u-text-center { text-align: center; } @media (max-width: 767px) { .md\:u-text-right { text-align: right; } .md\:u-text-left { text-align: left; } .md\:u-text-center { text-align: center; } } @media (max-width: 639px) { .sm\:u-text-right { text-align: right; } .sm\:u-text-left { text-align: left; } .sm\:u-text-center { text-align: center; } } .u-fw-700 { font-weight: 700; } .u-fc-blue { color: #1a35bb; } .u-fc-navy { color: #24315c; }/*# sourceMappingURL=style.css.map */