@charset "UTF-8"; /*------------------------------------------------------ 　Foundation ------------------------------------------------------*/ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) 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-inline-size: 100%; max-block-size: 100%; } /* 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数管理 ------------------------------------------------------*/ /*------------------------------------------------------ 　変数管理 ------------------------------------------------------*/ /*------------------------------------------------------ 　common ------------------------------------------------------*/ * { box-sizing: border-box; } html { font-size: 1rem; font-size: calc(10px * 1); position: relative; scroll-behavior: smooth; } html body { min-width: 1152px; background: #F9F9F9; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; font-size: 1.5rem; letter-spacing: 0.1em; color: #3E4142; } html body h1, html body h2 { letter-spacing: 0.1em; } html body img { width: 100%; vertical-align: bottom; } html body main { margin-top: 8rem; } @media (max-width: 767px) { html body { min-width: 375px; max-width: 767px; font-size: 1.4rem; margin: 0 auto; } html body main { margin-top: 3.2rem; } } /*------------------------------------------------------ 　Layout ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　header ------------------------------------------------------*/ #header.hide { top: -8rem; } .l-header { position: fixed; top: 0; z-index: 1010; width: 100%; background: #F9F9F9; box-shadow: 0 0 16px rgba(0, 0, 0, 0.18); transition: all 1.4s ease; } .l-header__inner { max-width: 1344px; margin: auto; padding: 2.4rem 3.2rem; display: flex; justify-content: space-between; align-items: center; } .l-header__inner .l-header__logo { width: 13.6rem; } .l-header__inner .l-header__link-wrapper { display: flex; align-items: center; } .l-header__inner .l-header__link-wrapper .l-header__menu { display: flex; align-items: center; gap: 4rem; margin-right: 4rem; } .l-header__inner .l-header__link-wrapper .l-header__menu-language { position: relative; padding: 0.4rem 0.8rem 0.4rem 2.8rem; border: 1px solid #DEE2E4; border-radius: 0.2rem; cursor: pointer; } .l-header__inner .l-header__link-wrapper .l-header__menu-language::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.4rem; width: 2rem; height: 2rem; background-image: url(../img/common/icon_language.png); background-size: contain; vertical-align: middle; } .l-header__inner .l-header__link-wrapper .l-header__menu-language .bogo-language-dropdown { cursor: pointer; } .l-header__inner .l-header__link-wrapper .l-header__btns { display: flex; gap: 1.6rem; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signup-link { padding: 0.8rem 2.4rem; background: #F4992F; border-radius: 5px; transition: all 0.5s ease-in-out; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signup-link-txt { font-size: 1.6rem; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signup-link:hover { opacity: 0.6; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signin-link { padding: 0.8rem 2.4rem; border: 1px solid #0D69A7; border-radius: 5px; transition: all 0.5s ease-in-out; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signin-link-txt { font-size: 1.6rem; color: #0D69A7; } .l-header__inner .l-header__link-wrapper .l-header__btns .l-header__signin-link:hover { opacity: 0.6; } .l-header__inner .l-g-nav__hamburger--open { display: none; } @media (max-width: 767px) { .l-header__inner { max-width: 737px; padding: 1.6rem 2rem; } .l-header__inner .l-header__logo { width: 13rem; } .l-header__inner .l-header__link-wrapper .l-header__menu { display: none; } .l-header__inner .l-header__link-wrapper .l-header__btns { display: none; } .l-header__inner .l-header__link-wrapper .l-g-nav { position: relative; width: 2rem; height: 1.6rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar { position: absolute; content: ""; width: 100%; height: 2px; background: #333333; border-radius: 50vw; transform: translateY(-50%); transition: all 0.4s ease; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(1) { top: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(2) { top: 50%; left: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(3) { top: 100%; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(1) { top: 50%; border-radius: 100vw; transform: rotate(-45deg); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(2) { left: 100%; opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(3) { top: 50%; border-radius: 100vw; transform: rotate(45deg); } .l-header__inner .l-g-nav__hamburger--open { position: fixed; display: block; top: 6rem; right: -100%; width: 100%; height: 100vh; background: #F9F9F9; z-index: 1030; transition: all 0.6s ease; } .l-header__inner .l-g-nav__hamburger--open.panelactive { right: 0; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list { padding: 3.2rem 2rem; display: flex; flex-direction: column; gap: 1.6rem; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-g-nav__hamburger-item a { display: block; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-g-nav__hamburger-language { position: relative; padding: 0.8rem 0.8rem 0.8rem 2.8rem; border: 1px solid #DEE2E4; border-radius: 0.2rem; cursor: pointer; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-g-nav__hamburger-language::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0.4rem; width: 2rem; height: 2rem; background-image: url(../img/common/icon_language.png); background-size: contain; vertical-align: middle; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-g-nav__hamburger-language .bogo-language-dropdown { cursor: pointer; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signup-link { background: #F4992F; border-radius: 5px; transition: all 0.5s ease-in-out; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signup-link-txt { font-size: 1.6rem; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signup-link:hover { opacity: 0.6; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signin-link { border: 1px solid #0D69A7; border-radius: 5px; transition: all 0.5s ease-in-out; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signin-link-txt { font-size: 1.6rem; color: #0D69A7; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signin-link:hover { opacity: 0.6; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signup-link, .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-header__signin-link { padding: 1.6rem 3.2rem; display: flex; justify-content: center; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　footer ------------------------------------------------------*/ .l-footer { background: #333333; } .l-footer__inner { max-width: 1152px; margin: auto; padding: 4.8rem 2.4rem 2.4rem 2.4rem; } .l-footer__inner .l-footer__wrapper { margin-bottom: 3.2rem; display: flex; gap: 2.4rem; font-size: 1.2rem; } .l-footer__inner .l-footer__copylight { font-size: 1.2rem; color: #888888; } .l-footer-lower { background: #F9F9F9; } @media (max-width: 767px) { .l-footer__inner { padding: 3.2rem 2rem 0.8rem 2rem; } .l-footer__inner .l-footer__wrapper { margin-bottom: 2.4rem; flex-wrap: wrap; gap: 0; } .l-footer__inner .l-footer__wrapper .l-footer__link { padding-top: 0.8rem; padding-bottom: 0.8rem; width: 50%; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Contents ------------------------------------------------------*/ .l-contents-cover { max-width: 1100px; padding: 0.8rem 2.4rem 12rem 2.4rem; margin: auto; display: flex; justify-content: space-between; } .l-contents-cover .p-main-area { padding: 4rem; width: 70%; background: #ffffff; } .l-contents-cover .p-side-area { width: 28%; } @media (max-width: 767px) { .l-contents-cover { padding: 0.8rem 1.6rem 6.4rem 1.6rem; flex-direction: column; } .l-contents-cover .p-main-area { padding: 3.2rem 2rem; width: 100%; } .l-contents-cover .p-side-area { width: 100%; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　SignUp ------------------------------------------------------*/ .l-signup { position: relative; } .l-signup::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 86%; background-image: url(../../resources/img/top/img_mv-bg_pc.jpg); background-size: cover; z-index: -1; } .l-signup__inner { max-width: 1100px; margin: auto; padding-top: 0; padding-bottom: 0; display: flex; justify-content: space-around; align-items: center; } .l-signup__inner .l-signup__img { width: 56%; } .l-signup__inner .l-signup__main { margin-top: 3.2rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; width: 40%; } .l-signup__inner .l-signup__main .l-signup__ttl { font-size: 2.6rem; line-height: 1.6em; letter-spacing: 0.1em; } @media (max-width: 767px) { .l-signup::after { height: 100%; } .l-signup__inner { padding-left: 2rem; padding-right: 2rem; flex-direction: column-reverse; gap: 4rem; } .l-signup__inner .l-signup__img { width: 100%; max-width: 48rem; } .l-signup__inner .l-signup__main { width: 100%; } .l-signup__inner .l-signup__main .l-signup__ttl { font-size: 2.2rem; } } /*====================================================== 　Object ======================================================*/ /*------------------------------------------------------ 　Component ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H1 Title ------------------------------------------------------*/ .c-ttl__h1 { font-size: 3rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h1 { font-size: 2.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H2 Title ------------------------------------------------------*/ .c-ttl__h2 { margin-bottom: 8rem; position: relative; text-align: center; color: #3E4142; font-size: 3.8rem; font-weight: 700; } .c-ttl__h2::after { position: absolute; content: ""; bottom: -2.4rem; left: 50%; transform: translateX(-50%); width: 6.4rem; height: 4px; background: linear-gradient(to right, #0D69A7, #64B2E6); } .c-ttl__h2--sub { margin-bottom: 4.8rem; font-size: 3.2rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h2 { margin-bottom: 6.4rem; font-size: 3.2rem; letter-spacing: 0em; } .c-ttl__h2::after { width: 4.8rem; } .c-ttl__h2--sub { margin-bottom: 3.2rem; font-size: 2.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H3 Title ------------------------------------------------------*/ .c-ttl__h3 { margin-bottom: 2.4rem; font-size: 2.4rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h3 { font-size: 2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H4 Title ------------------------------------------------------*/ .c-ttl__h4 { font-size: 2rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h4 { font-size: 1.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Side-menu Title ------------------------------------------------------*/ .c-side__ttl { position: relative; padding-bottom: 1.2rem; font-size: 1.8rem; font-weight: 700; } .c-side__ttl::before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 2px; background: #DEE2E4; } .c-side__ttl::after { position: absolute; content: ""; bottom: 0; left: 0; width: 5.6rem; height: 2px; background: linear-gradient(to right, #0D69A7, #64B2E6); } @media (max-width: 767px) { .c-side__ttl::before { height: 3px; } .c-side__ttl::after { height: 3px; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .c-txt__main { line-height: 2; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Btn ------------------------------------------------------*/ .c-btn__signup { position: relative; width: 31rem; box-shadow: 6px 6px 3px rgba(13, 105, 167, 0.3); } .c-btn__signup-link { display: inline-block; padding: 1.6rem 2.4rem; width: 100%; background: #ffffff; border-radius: 5px; transition: all 0.5s ease-in-out; } .c-btn__signup-link-txt { color: #0D69A7; font-size: 1.8rem; font-weight: 700; } .c-btn__signup-link-icon { height: 2rem; transform: rotate(-90deg); } .c-btn__signup-link:hover { opacity: 0.6; } .c-btn__signup-icon { position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2.4rem; width: 1.2rem; height: 1.8rem; background: none; background-image: url(../img/common/icon_arrow_b.svg); background-size: cover; } .c-btn__section { position: relative; margin-top: 3.2rem; } .c-btn__section-link { display: inline-block; padding: 1.6rem 2.4rem; width: 100%; background: #0D69A7; border-radius: 5px; transition: all 0.5s ease-in-out; } .c-btn__section-link-txt { font-size: 1.8rem; } .c-btn__section-link-icon { height: 2rem; transform: rotate(-90deg); } .c-btn__section-link:hover { opacity: 0.6; } .c-btn__section-icon { position: absolute; content: ""; top: 50%; transform: translateY(-50%); right: 2.4rem; width: 1.2rem; height: 1.8rem; background: none; background-image: url(../img/common/icon_arrow_w.svg); background-size: cover; } .c-btn__paid-plan { margin: 0 3.2rem; text-align: center; color: #ffffff; font-weight: 500; } .c-btn__paid-plan-link { padding: 1.2rem 2.4rem; display: block; background: #F4992F; border-radius: 5px; transition: all 0.5s ease-in-out; } .c-btn__paid-plan-link-txt { font-size: 1.6rem; } .c-btn__paid-plan-link:hover { opacity: 0.6; } .c-btn__free-plan { margin: 0 3.2rem; text-align: center; font-weight: 500; } .c-btn__free-plan-link { padding: 1.2rem 2.4rem; display: block; border: 1px solid #F4992F; border-radius: 5px; transition: all 0.5s ease-in-out; } .c-btn__free-plan-link-txt { font-size: 1.6rem; color: #F4992F; } .c-btn__free-plan-link:hover { opacity: 0.6; } .c-btn__enterprise-plan { font-weight: 500; } .c-btn__enterprise-plan-link { padding: 1.2rem 6.4rem; display: block; background: #ffffff; border: 1px solid #0D69A7; border-radius: 5px; transition: all 0.5s ease-in-out; } .c-btn__enterprise-plan-link-txt { font-size: 1.6rem; color: #0D69A7; } .c-btn__enterprise-plan-link:hover { opacity: 0.6; } @media (max-width: 767px) { .c-btn__signup { margin: auto; } .c-btn__enterprise-plan { width: 100%; } .c-btn__enterprise-plan-link:hover { opacity: 1; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Breadcrumb ------------------------------------------------------*/ .c-breadcrumb { max-width: 1100px; padding: 0.8rem 2.4rem; margin: auto; } .c-breadcrumb__ul { display: flex; gap: 1.6rem; } .c-breadcrumb__ul .c-breadcrumb__li { color: #888888; } .c-breadcrumb__ul .c-breadcrumb__li-nolink { color: #3E4142; } .c-breadcrumb__ul .c-breadcrumb__arrow { width: 0.8rem; } .c-breadcrumb__ul .c-breadcrumb__arrow img { vertical-align: baseline; } /*------------------------------------------------------ 　Project ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article Title ------------------------------------------------------*/ .p-ttl__inner { margin-bottom: 3.2rem; } .p-ttl__inner .p-ttl-label__wrapper { display: flex; gap: 0.8rem; } .p-ttl__inner .p-ttl-label__wrapper .p-ttl-label { padding: 0.4rem 2.4rem; background: linear-gradient(to right, #0D69A7, #64B2E6); border-radius: 50vw; } .p-ttl__inner .p-ttl-date__wrapper .p-ttl-date__icon { display: inline-block; width: 1.4rem; height: 1.4rem; } .p-ttl__inner .p-ttl-date__wrapper .p-ttl-date__icon img { vertical-align: middle; } .p-ttl__inner .p-ttl-date__wrapper .p-ttl-date__txt { font-size: 1.2rem; color: #888888; } @media (max-width: 767px) { .p-ttl__inner { margin-bottom: 1.6rem; } .p-ttl__inner .p-ttl-label__wrapper .p-ttl-label { padding: 0.4rem 1.6rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article MainVisual ------------------------------------------------------*/ .p-mv__inner { margin-bottom: 3.2rem; } .p-mv__inner .p-mv__img { width: 100%; } @media (max-width: 767px) { .p-mv__inner { margin-bottom: 2.4rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article side-area ------------------------------------------------------*/ .p-side-area { display: flex; flex-direction: column; gap: 4rem; } .p-side-area .p-side-column__inner .p-side-column__ul { margin-top: 1.6rem; display: grid; grid-gap: 1.6rem; } .p-side-area .p-side-column__inner .p-side-column__ul .p-side-column__li a { display: flex; justify-content: space-between; } .p-side-area .p-side-column__inner .p-side-column__ul .p-side-column__li a .p-side-column__img { width: 40%; } .p-side-area .p-side-column__inner .p-side-column__ul .p-side-column__li a .p-side-column__txt { width: 55%; font-size: 1.4rem; } @media (max-width: 767px) { .p-side-area { margin-top: 6.4rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article category ------------------------------------------------------*/ .p-category__inner .p-category__ul .p-category__li { padding: 1.2rem 0; border-bottom: 1px solid #DEE2E4; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article Copiru Check ------------------------------------------------------*/ .p-article__copiru-check { margin-bottom: 4rem; padding: 0.8rem; background: #EFF3F6; border-radius: 0.5rem; } @media (max-width: 767px) { .p-article__copiru-check { margin-bottom: 3.2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article Table of Contents ------------------------------------------------------*/ .p-article__table-of-contents { margin-bottom: 8rem; padding: 2.4rem 4rem; background: #EFF3F6; border-radius: 0.5rem; } .p-article__table-of-contents #p-article-table-of-contents__ttl { margin-bottom: 1.6rem; font-size: 2rem; font-weight: 700; } .p-article__table-of-contents #p-article-table-of-contents__headinglist { display: flex; flex-direction: column; gap: 0.8rem; } .p-article__table-of-contents #p-article-table-of-contents__headinglist a { position: relative; padding-left: 1.2rem; color: #3E4142; text-decoration: none; } .p-article__table-of-contents #p-article-table-of-contents__headinglist a::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 0.6rem; height: 0.6rem; background: #0D69A7; border-radius: 50vw; } .p-article__table-of-contents #p-article-table-of-contents__headinglist .table_of_content_h2 { font-size: 1.6rem; } .p-article__table-of-contents #p-article-table-of-contents__headinglist .table_of_content_h2::before { width: 0.6rem; height: 0.6rem; } .p-article__table-of-contents #p-article-table-of-contents__headinglist .table_of_content_h3 { margin-left: 2.4rem; font-size: 1.4rem; } .p-article__table-of-contents #p-article-table-of-contents__headinglist .table_of_content_h3::before { width: 0.4rem; height: 0.4rem; } @media (max-width: 767px) { .p-article__table-of-contents { margin-bottom: 6.4rem; padding: 1.6rem 2.4rem; } .p-article__table-of-contents #p-article-table-of-contents__ttl { font-size: 1.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article Author ------------------------------------------------------*/ .p-article__author { margin-top: 6.4rem; } .p-article__author .p-article-author__cover { padding: 2.4rem; display: flex; align-items: center; gap: 2.4rem; background: #EFF3F6; border-radius: 0.5rem; } .p-article__author .p-article-author__cover .p-article-author__img { width: 8rem; height: 8rem; border-radius: 50%; overflow: hidden; } .p-article__author .p-article-author__cover .p-article-author__txt { width: calc(100% - 8rem - 2.4rem); } .p-article__author .p-article-author__cover .p-article-author__txt .p-article-author__ttl { margin-bottom: 0.8rem; font-size: 1.6rem; } .p-article__author .p-article-author__cover .p-article-author__txt .p-article-author__description { margin-bottom: 0; } @media (max-width: 767px) { .p-article__author .p-article-author__cover { padding: 1.6rem; gap: 1.6rem; align-items: flex-start; } .p-article__author .p-article-author__cover .p-article-author__img { width: 6rem; height: 6rem; } .p-article__author .p-article-author__cover .p-article-author__txt { width: calc(100% - 6rem - 1.6rem); } .p-article__author .p-article-author__cover .p-article-author__txt .p-article-author__ttl { font-size: 1.5rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article Latest Column ------------------------------------------------------*/ .p-article__latest-column { margin-top: 6.4rem; } .p-article__latest-column .p-article-latest-column__ul { margin-top: 1.6rem; display: grid; grid-gap: 1.6rem; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li { padding-left: 0; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li::before { display: none; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a { display: flex; justify-content: space-between; text-decoration: none; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__img { width: 30%; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt { width: 68%; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt .p-article-latest-column__ttl { font-size: 1.5rem; font-weight: 700; color: #3E4142; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt .p-article-latest-column__date .p-article-date__icon { display: inline-block; width: 1.4rem; height: 1.4rem; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt .p-article-latest-column__date .p-article-date__icon img { vertical-align: middle; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt .p-article-latest-column__date .p-article-date__txt { font-size: 1.2rem; color: #888888; } @media (max-width: 767px) { .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__img { width: 40%; } .p-article__latest-column .p-article-latest-column__ul .p-article-latest-column__li a .p-article-latest-column__txt { width: 56%; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Article rich text ------------------------------------------------------*/ .p-article__inner h1 { margin-bottom: 3.2rem; font-size: 3rem; font-weight: 700; } .p-article__inner h2 { margin-bottom: 3.2rem; font-size: 2.8rem; font-weight: 700; position: relative; padding-bottom: 1.2rem; } .p-article__inner h2::before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 4px; background: #DEE2E4; } .p-article__inner h2::after { position: absolute; content: ""; bottom: 0; left: 0; width: 6.4rem; height: 4px; background: linear-gradient(to right, #0D69A7, #64B2E6); } .p-article__inner h3 { margin-bottom: 3.2rem; font-size: 2.4rem; font-weight: 700; position: relative; padding: 0.8rem; padding-left: 2.4rem; background: #EFF3F6; } .p-article__inner h3::before { position: absolute; content: ""; top: 0; left: 0; width: 6px; height: 100%; background: #0D69A7; } .p-article__inner h4 { margin-bottom: 3.2rem; font-size: 2rem; font-weight: 700; position: relative; padding-left: 1.6rem; } .p-article__inner h4::before { position: absolute; content: ""; top: 0; left: 0; width: 4px; height: 100%; background: #0D69A7; } .p-article__inner h5 { margin-bottom: 3.2rem; font-size: 1.8rem; font-weight: 700; position: relative; padding-left: 1.6rem; } .p-article__inner h5::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 0.8rem; height: 0.8rem; background: #0D69A7; border-radius: 0.2rem; } .p-article__inner h6 { margin-bottom: 3.2rem; font-size: 1.6rem; font-weight: 700; position: relative; padding-left: 1.2rem; } .p-article__inner h6::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 0.6rem; height: 0.6rem; background: #0D69A7; border-radius: 50vw; } .p-article__inner p { margin-bottom: 3.2rem; font-size: 1.6rem; } .p-article__inner strong { font-weight: 700; } .p-article__inner s { text-decoration: line-through; } .p-article__inner em { font-style: italic; } .p-article__inner sup { font-size: 1.2rem; vertical-align: top; } .p-article__inner sub { font-size: 1.2rem; vertical-align: bottom; } .p-article__inner a { color: #0D69A7; text-decoration: underline; } .p-article__inner blockquote { margin-bottom: 4rem; padding: 1.6rem 4rem; background: #EFF3F6; border-left: 6px solid #ccc; } .p-article__inner blockquote p { position: relative; margin-bottom: 0.8rem; font-size: 1.6rem; } .p-article__inner blockquote p::before { position: absolute; content: ""; top: 0; left: -2.4rem; width: 2rem; height: 1.6rem; background-image: url(../img/article/icon_blockquote.svg); background-size: contain; background-repeat: no-repeat; vertical-align: middle; } .p-article__inner blockquote p::after { position: absolute; content: ""; bottom: 0; right: -1.6rem; width: 2rem; height: 1.6rem; background-image: url(../img/article/icon_blockquote.svg); background-size: contain; background-repeat: no-repeat; vertical-align: middle; rotate: 180deg; } .p-article__inner blockquote cite { position: relative; padding-left: 4.8rem; font-size: 1.2rem; } .p-article__inner blockquote cite::before { position: absolute; content: "引用："; top: 0; left: 0; } .p-article__inner ul { margin-bottom: 4rem; display: grid; gap: 0.8rem; } .p-article__inner ul li { position: relative; padding-left: 1.2rem; } .p-article__inner ul li::before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 0.4rem; height: 0.4rem; background: #0D69A7; border-radius: 50vw; } .p-article__inner ol { margin-bottom: 4rem; display: grid; gap: 0.8rem; } .p-article__inner ol li { position: relative; list-style: decimal; list-style-position: inside; } .p-article__inner ol li::marker { color: #0D69A7; } @media (max-width: 767px) { .p-article__inner h1 { font-size: 2.8rem; } .p-article__inner h2 { margin-bottom: 2.4rem; font-size: 2.6rem; padding-bottom: 0.8rem; } .p-article__inner h2::after { width: 4.8rem; } .p-article__inner h3 { margin-bottom: 2.4rem; font-size: 2.2rem; padding: 0.4rem; padding-left: 1.6rem; } .p-article__inner h4 { margin-bottom: 2.4rem; padding-left: 1.2rem; } .p-article__inner h5 { margin-bottom: 2.4rem; } .p-article__inner h6 { margin-bottom: 2.4rem; } .p-article__inner p { margin-bottom: 2.4rem; font-size: 1.5rem; } .p-article__inner sup { font-size: 1rem; } .p-article__inner sub { font-size: 1rem; } .p-article__inner blockquote { margin-bottom: 3.2rem; padding: 1.6rem 2.4rem 1.6rem 3.2rem; } .p-article__inner blockquote p { font-size: 1.5rem; } .p-article__inner blockquote p::before { left: -2.4rem; width: 1.8rem; height: 1.4rem; } .p-article__inner blockquote p::after { right: -1.2rem; width: 1.8rem; height: 1.4rem; } .p-article__inner ul { margin-bottom: 3.2rem; } .p-article__inner ol { margin-bottom: 3.2rem; } } /*------------------------------------------------------ 　Utility ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　White Text ------------------------------------------------------*/ .u-txt--white { color: #ffffff; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Emphasis Text ------------------------------------------------------*/ .u-txt__emphasis--y { color: #FFEC47; font-weight: 700; } .u-txt__emphasis--b { color: #0D69A7; font-weight: 700; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .u-txt--medium { font-weight: 500; } .u-txt--bold { font-weight: 700; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Text align ------------------------------------------------------*/ .u-txt__center { text-align: center; } .u-txt__right { text-align: right; } .u-txt__left { text-align: left; } /*------------------------------------------------------ 　JS ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　JS Fade-in ------------------------------------------------------*/ .js__fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .js__fade-in.appear { opacity: 1; transform: translateY(0); } .js__fade-in.appear > * { opacity: 0; transform: translateY(20px); animation: fadeInMove 0.6s ease-out forwards; } .js__fade-in.appear > *:nth-child(1) { animation-delay: 0s; } .js__fade-in.appear > *:nth-child(2) { animation-delay: 0.5s; } .js__fade-in.appear > *:nth-child(3) { animation-delay: 1s; } .js__fade-in.appear > *:nth-child(4) { animation-delay: 1.5s; } .js__fade-in.appear > *:nth-child(5) { animation-delay: 2s; } .js__fade-in.appear > *:nth-child(6) { animation-delay: 2.5s; } .js__fade-in.appear > *:nth-child(7) { animation-delay: 3s; } .js__fade-in.appear > *:nth-child(8) { animation-delay: 3.5s; } .js__fade-in.appear > *:nth-child(9) { animation-delay: 4s; } .js__fade-in.appear > *:nth-child(10) { animation-delay: 4.5s; } @keyframes fadeInMove { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }/*# sourceMappingURL=single.css.map */