縲€/*-------------------------------------------------------------- TABLE OF CONTENT ---------------------------------------------------------------- | 1.3 LAYOUT 4.0 IMAGE 5.0 LAYOUT 6.0 COMPONENT | 6.1 CTA | 6.2 BUTTON | 6.3 LIST 7.0 SECTION | 7.1 HEADER | 7.2 HERO | 7.3 CUSTOMER | 7.4 FEATURE | 7.5 TESTIMONIAL | 7.6 CLOSE 8.0 MEDIA | 8.1 768PX | 8.2 1024PX | 8.3 1200PX --------------------------------------------------------------*/ :root { /*------------------------------------------------------------ | | 1.3 LAYOUT | ------------------------------------------------------------*/ --ui-layout-container: 1.25rem; --ui-layout-grid : 3.625rem; --ui-layout-gutter : 1rem; /* GAP */ --ui-gap-cta : .75rem; --ui-gap-hero : 2rem; --ui-gap-customer : 2rem; --ui-gap-feature : 2rem; --ui-gap-testimonial: 2rem; /* BORDER RADIUS */ --ui-radius-avatar: 10rem; --ui-radius-button: 5rem; } /*4.0 IMAGE --------------------------------------------------------------*/ img, svg { display: block; height: auto; margin: 0 auto; max-width: 100%; } /*5.0 LAYOUT --------------------------------------------------------------*/ .ui-layout-container { padding-left: var(--ui-layout-container); padding-right: var(--ui-layout-container); } .ui-layout-flex, .ui-layout-grid { justify-content: center; } .ui-layout-flex { display: flex; } .ui-layout-grid { display: grid; } li.ui-layout-column-3 { display: inline-block; width: 33%; } /*6.0 COMPONENT --------------------------------------------------------------*/ /*-------------------------------------------------------------- | | 6.1 CTA | --------------------------------------------------------------*/ .ui-component-cta { flex-direction: column; row-gap: var(--ui-gap-cta); } /*-------------------------------------------------------------- | | 6.2 BUTTON | --------------------------------------------------------------*/ a.bt { background-color: #F7CD46; border: 1px solid #F7CD46; color: #ffffff; display: inline-block; font-size: 13px; font-weight: bold; line-height: 40px; text-align: center; text-decoration: none; width: 200px; } /*-------------------------------------------------------------- | | 6.3 LIST | --------------------------------------------------------------*/ .ui-component-list { grid-template-columns: 1fr; row-gap: .75rem; } .ui-component-list--item { background-position: left center; background-repeat: no-repeat; background-size: 1.125rem; list-style: none; padding-left: 1.875rem; } .ui-component-list--item-check { background-image: url(/stg/download/70170356_check.png); } /*7.0 SECTION --------------------------------------------------------------*/ .ui-section-header { padding-bottom: 1.25rem; padding-top: 1.25rem; } .ui-section-header__layout { justify-content: space-between; } /* 7.2 HERO --------------------------------------------------------------*/ .ui-section-hero { padding-top: 2rem; text-align: center; } .ui-section-hero--image { margin-top: var(--ui-gap-hero); } /* 7.4 FEATURE --------------------------------------------------------------*/ .ui-section-feature { padding-bottom: 5rem; padding-top: 5rem; } .ui-section-feature__layout { row-gap: var(--ui-gap-feature); } .ui-section-feature__layout:nth-of-type(odd) div { grid-row-start: 1; } .ui-section-feature__layout:nth-of-type(even) { margin-bottom: 5rem; margin-top: 5rem; } /* 7.5 TEXT --------------------------------------------------------------*/ .ui-section-text { background-color: var(--ui-color-background-tertiary); padding-bottom: 5rem; padding-top: 5rem; text-align: center; } .ui-section-text__layout { margin-top: var(--ui-gap-text); row-gap: var(--ui-gap-text); } .ui-section-text--avatar { border-radius: var(--ui-radius-avatar); height: 20rem; width: 20rem; } .ui-section-text--quote { margin-bottom: 1rem; margin-top: 1rem; } .ui-section-text--author { line-height: 1.25; } /* IYAKU --------------------------------------------------------------*/ span.iyaku { font-weight: 600; border: solid 1px; padding: 5px; margin-right: 20px; } /*8.0 MEDIA --------------------------------------------------------------*/ @media screen and (min-width: 48rem) { /*------------------------------------------------------------ VARIABLE ------------------------------------------------------------*/ :root { /*---------------------------------------------------------- | | TYPOGRAPHY | ----------------------------------------------------------*/ /* FONT SIZE */ --ui-typography-h1: 2.1875rem; --ui-typography-h2: 1.75rem; --ui-typography-p : 1.125rem; --ui-typography-s : .875rem; /* MARGIN */ --ui-typography-margin-body: 1.25rem; /*---------------------------------------------------------- | | LAYOUT | ----------------------------------------------------------*/ --ui-layout-container: 4.25rem; --ui-layout-gutter : 1.5rem; /* GAP */ --ui-gap-hero : 3rem; --ui-gap-feature : 3rem; --ui-gap-text: 3rem; } /*------------------------------------------------------------ IMAGE ------------------------------------------------------------*/ .ui-image-half-left { padding-right: var(--ui-layout-gutter); } .ui-image-half-right { padding-left: var(--ui-layout-gutter); } /*------------------------------------------------------------ LAYOUT ------------------------------------------------------------*/ .ui-layout-container, .ui-layout-column-center { margin-left: auto; margin-right: auto; } .ui-layout-grid-2, .ui-layout-grid-3 { column-gap: var(--ui-layout-gutter); grid-template-columns: repeat(2, 1fr); justify-items: center; } .ui-layout-column-4 { width: calc((var(--ui-layout-grid) * 4) + (var(--ui-layout-gutter) * 3)); } .ui-layout-column-6 { width: calc((var(--ui-layout-grid) * 6) + (var(--ui-layout-gutter) * 5)); } /*------------------------------------------------------------ COMPONENT ------------------------------------------------------------*/ /*------------------------------------------------------------ | | LIST | ------------------------------------------------------------*/ .ui-component-list--item { background-size: 1.25rem; padding-left: 2rem; } /*------------------------------------------------------------ SECTION ------------------------------------------------------------*/ /*------------------------------------------------------------ | | HEADER | ------------------------------------------------------------*/ .ui-section-header { padding-bottom: 2rem; padding-top: 2rem; } } /*------------------------------------------------------------ | | CUSTOMER | ------------------------------------------------------------*/ .ui-section-customer__layout { column-gap: var(--ui-gap-customer); flex-direction: row; } .ui-section-customer--logo { margin-left: 0; margin-right: 0; } /*------------------------------------------------------------ | | FEATURE | ------------------------------------------------------------*/ .ui-section-feature__layout:nth-of-type(odd) div { grid-row-start: initial; } } /*------------------------------------------------------------ | | FOOTER | ------------------------------------------------------------*/ .ui-section-footer { padding-bottom: 2rem; padding-top: 2rem; } .ui-section-footer__layout { flex-direction: row; justify-content: space-between; position: relative; } .ui-section-footer--menu { left: 50%; position: absolute; transform: translateX(-50%); } } /*-------------------------------------------------------------- | | 8.2 1024PX | --------------------------------------------------------------*/ @media screen and (min-width: 64rem) { /*------------------------------------------------------------ VARIABLE ------------------------------------------------------------*/ :root { /*------------------------------------------------------------ | | 1.3 LAYOUT | ------------------------------------------------------------*/ --ui-layout-container: none; } /*------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------*/ a { transition: all 250ms ease; } a:not(.ui-component-button):hover { color: var(--ui-color-typography-body); } /*------------------------------------------------------------ LAYOUT ------------------------------------------------------------*/ .ui-layout-container { width: 60rem; } .ui-layout-grid-3 { grid-template-columns: repeat(3, 1fr); } } /*-------------------------------------------------------------- | | 8.3 1200PX | --------------------------------------------------------------*/ @media screen and (min-width: 75rem) { /*------------------------------------------------------------ VARIABLE ------------------------------------------------------------*/ :root { /*---------------------------------------------------------- | | TYPOGRAPHY | ----------------------------------------------------------*/ /* FONT SIZE */ --ui-typography-h1: 2.75rem; --ui-typography-h2: 2.1875rem; --ui-typography-h4: 1.3rem; /* MARGIN */ --ui-typography-margin-heading: 1rem; --ui-typography-margin-body : 1.75rem; /*---------------------------------------------------------- | | LAYOUT | ----------------------------------------------------------*/ --ui-layout-grid : 4rem; --ui-layout-gutter: 2rem; /* GAP */ --ui-gap-hero : 4rem; --ui-gap-customer : 4rem; --ui-gap-feature : 4rem; --ui-gap-text: 4rem; } /*------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------*/ .ui-text-intro { font-size: var(--ui-typography-h4); line-height: 2; margin-bottom: 20px; } p.ui-text-detail { font-size: var(--ui-typography-h4); margin: 20px; text-align:left; } /*------------------------------------------------------------ LAYOUT ------------------------------------------------------------*/ .ui-layout-container { width: 70rem; } /*------------------------------------------------------------ | | FEATURE | ------------------------------------------------------------*/ .ui-section-feature { padding-bottom: 7.5rem; padding-top: 7.5rem; } .ui-section-feature__layout:nth-of-type(even) { margin-bottom: 7.5rem; margin-top: 7.5rem; } /* LIST */ .ui-component-list-feature { column-gap: var(--ui-layout-gutter); grid-template-columns: repeat(2, 1fr); } /*------------------------------------------------------------ | | TESTIMONIAL | ------------------------------------------------------------*/ .ui-section-text { padding-bottom: 7.5rem; padding-top: 7.5rem; } /*------------------------------------------------------------ | | CLOSE | ------------------------------------------------------------*/ .ui-section-close { padding-top: 7.5rem; } } @media print, screen and (max-width:768px) { :root { /*------------------------------------------------------------ | | 1.3 LAYOUT | ------------------------------------------------------------*/ --ui-layout-container: 1.25rem; --ui-layout-grid : 3.625rem; --ui-layout-gutter : 1rem; /* GAP */ --ui-gap-cta : .75rem; --ui-gap-hero : 2rem; --ui-gap-customer : 2rem; --ui-gap-feature : 2rem; --ui-gap-testimonial: 2rem; /* BORDER RADIUS */ --ui-radius-avatar: 10rem; --ui-radius-button: 5rem; } /*4.0 IMAGE --------------------------------------------------------------*/ img, svg { display: block; height: auto; margin: 0 auto; max-width: 100%; } /*5.0 LAYOUT --------------------------------------------------------------*/ .ui-layout-container { padding-left: var(--ui-layout-container); padding-right: var(--ui-layout-container); } .ui-layout-flex, .ui-layout-flex { display: contents; } li.ui-layout-column-3 { width:100%; text-align: center; } /* 7.2 HERO --------------------------------------------------------------*/ .ui-section-hero { text-align: left; } /* 7.5 TEXT --------------------------------------------------------------*/ .ui-section-text { text-align: left; } .ui-section-text--avatar { border-radius: var(--ui-radius-avatar); height: 10rem; width: 10rem; } p.ui-text-intro { margin: 5% 0 5% 0; } .ui-text-detail { text-align:left; margin-top: 15px; } p.suji { margin-top: 15px; } }