@charset "UTF-8"; /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*########################################################################################## ##// マルデバLP共通CSS //################################################################### ##########################################################################################*/ * { box-sizing: border-box; } body { font-family: "Noto Sans JP", sans-serif, "メイリオ", Meiryo, "LucidaGrande", Verdana, "ヒラギノ角ゴProW3", "HiraginoKakuGothicPro", Osaka, "ＭＳＰゴシック", sans-serif; overflow-x: hidden; } #header div { /*width: 818px;*/ height: 68px; margin: 0 auto; position: relative; } #header h1 { position: absolute; top: 10px; left: 0; } #header figure { position: absolute; top: 15px; right: 0; } #contents #regist button { cursor: pointer; } #footer { /*width: 838px; margin: 0 auto; padding: 30px 0; background: url(/cs/lp/md/common/images/footer.png) no-repeat; p { text-align: center; font-size: 14px; }*/ } @media screen and (max-device-width: 767px) { #header { box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3); height: 55px; border-bottom: 5px solid #079F5D; } #header div { width: 100%; height: auto; } #header h1 { left: 5px; } #header h1 img { width: auto; height: 30px; } #header figure { top: 18px; right: 5px; } #header figure img { width: 50px; height: auto; } #footer { /*width: 100%; padding: 10px 0; background: none; border-top: 1px solid #0075C1; p { font-size: 12px; } */ } } /*########################################################################################## ##// マルデバLP/001/a/ CSS //############################################################### ##########################################################################################*/ /*--------------------------------- 00 ページ内共通 01 #header 02 #contents 02-01 #visual メインビジュアル 02-02 regiregist 購入ボタン 02-03 #example 「うちの子に限って」 02-04 #about「i-フィルター for マルチデバイス」とは？ 02-05 #price こんなに便利！ 02-06 #reasons 選ばれています 02-07 #step 3つのステップ 02-08 aside 注記 03 #footer 04 js/effect # brakepoint # PC >= 1024px 768 <= iPad & PC(small) <= 1023 sp <= 767 # main-content-width # 990px ---------------------------------*/ /*--------------------------------- 00 ページ内共通 ---------------------------------*/ mark.effect-fade { opacity: 1; transition: background-size .8s; } mark.effect-fade.effect-scroll { background-size: 100% 10px !important; } .mark { font-weight: 800; background-color: transparent; background-image: linear-gradient(to right, #ffff3c 0%, #ffff3c 100%); background-repeat: no-repeat; background-size: 0 5px; background-position: left bottom; color: inherit; } @media screen and (max-device-width: 767px) { .hide-sp, .for-pc, .for-ipad { display: none !important; } } @media screen and (min-device-width: 768px) and (max-device-width: 1023px) { .hide-ipad, .for-pc, .for-sp { display: none !important; } } @media screen and (min-device-width: 1024px) { .hide-pc, .for-ipad, .for-sp { display: none !important; } } .red { color: #F81400; } /*--------------------------------- 01 #header ---------------------------------*/ #header { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; } @media screen and (max-width: 1023px) { #header { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #header { padding-right: 3vw; padding-left: 3vw; } } /*--------------------------------- /*02 #contents ---------------------------------*/ #contents { text-align: center; color: #212121; } #contents sup { vertical-align: super; font-size: 40%; } #contents small { font-size: 82%; } #contents a:link, #contents a:visited { color: #0078bd; text-decoration: none; transition: all 0.5s ease 0s; word-break: break-all; } #contents a:hover { color: #CC0000; } #contents .note { text-align: left; font-size: 12px; line-height: 1.6; } @media screen and (min-width: 1024px) { #contents .note { max-width: 990px; margin-right: auto; margin-left: auto; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #contents .note { width: 96vw; margin-right: 2vw; margin-left: 2vw; } } @media screen and (max-width: 767px) { #contents .note { width: 94vw; margin-right: 3vw; margin-left: 3vw; } } /*02-01 #visual メインビジュアル ---------------------------------*/ #visual { /* 親子背景 キャッチ ---------------------------------*/ /* ロゴとキャンペーン ---------------------------------*/ /* クラウン4つのメリット ---------------------------------*/ /* 価格Table ---------------------------------*/ } @media screen and (min-width: 768px) { #visual > div:nth-child(1) { border-top: 5px solid #07a55d; } } #visual > div:nth-child(1) p { height: 488px; background: url(/cs/lp/md/common/images/001/season/visual_season.jpg) no-repeat top center; background-size: cover; } #visual > div:nth-child(1) p img { display: block; margin: 0 auto; height: 100%; width: auto; } @media screen and (max-width: 767px) { #visual > div:nth-child(1) p img { height: auto; width: 100%; } } @media screen and (max-width: 1023px) { #visual > div:nth-child(1) p { height: 46vw; background-color: rgba(255, 255, 255, 0.1); background-blend-mode: lighten; } } @media screen and (max-width: 767px) { #visual > div:nth-child(1) p { border-top: none; height: 62vw; background-position: 55% 50%; } } #visual > div:nth-child(2) { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; max-width: 990px; letter-spacing: -1em; margin-top: 20px; } @media screen and (max-width: 1023px) { #visual > div:nth-child(2) { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #visual > div:nth-child(2) { padding-right: 3vw; padding-left: 3vw; } } #visual > div:nth-child(2) * { letter-spacing: normal; } @media screen and (max-width: 767px) { #visual > div:nth-child(2) { margin-top: 0; } } #visual > div:nth-child(2) > div:nth-child(1) h2 { text-align: center; padding: 1em .5em 0; font-size: 25px; font-weight: 800; line-height: 1.8; } @media screen and (max-width: 1023px) { #visual > div:nth-child(2) > div:nth-child(1) h2 { font-size: 3vw; } } @media screen and (max-width: 767px) { #visual > div:nth-child(2) > div:nth-child(1) h2 { font-size: 5vw; } } #visual > div:nth-child(2) > div:nth-child(1) h3 { font-size: 17px; font-weight: 400; margin: 0 0 1.5em; line-height: 2; } #visual > div:nth-child(2) > div:nth-child(1) h3 strong { font-weight: 800; } @media screen and (max-width: 1023px) { #visual > div:nth-child(2) > div:nth-child(1) h3 { font-size: 18px; } } @media screen and (max-width: 767px) { #visual > div:nth-child(2) > div:nth-child(1) h3 { font-size: 18px; margin-top: 0; display: none; } } #visual > div:nth-child(3) { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; max-width: 990px; letter-spacing: -1em; margin-top: 20px; } @media screen and (max-width: 1023px) { #visual > div:nth-child(3) { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #visual > div:nth-child(3) { padding-right: 3vw; padding-left: 3vw; } } #visual > div:nth-child(3) * { letter-spacing: normal; } @media screen and (min-width: 1024px) { #visual > div:nth-child(3) { padding-right: 0; padding-left: 0; } } #visual > div:nth-child(3) h1 { text-align: center; } #visual > div:nth-child(3) h1 img { width: 507px; } @media screen and (max-width: 1023px) { #visual > div:nth-child(3) h1 img { width: 50vw; display: block; margin: 0 auto; } } @media screen and (max-width: 767px) { #visual > div:nth-child(3) h1 img { width: 75vw; margin-top: 20px; } } #visual > div:nth-child(3) ul { letter-spacing: -1em; } #visual > div:nth-child(3) ul * { letter-spacing: normal; } #visual > div:nth-child(3) ul li { display: inline-block; width: 23%; margin-right: 2.6%; } #visual > div:nth-child(3) ul li:nth-child(4) { margin-right: 0; } #visual > div:nth-child(3) ul li svg.crown_bg { background: url(/cs/lp/md/common/images/001/season/crown_bg.svg) center center/contain no-repeat; max-width: 100%; } #visual > div:nth-child(3) ul li svg.crown_bg .text { fill: #212121; font-family: "Noto Sans JP", sans-serif, "メイリオ", Meiryo, "LucidaGrande", Verdana, "ヒラギノ角ゴProW3", "HiraginoKakuGothicPro", Osaka, "ＭＳＰゴシック", sans-serif; font-weight: 700; } #visual > div:nth-child(3) ul li svg.crown_bg .attention { fill: #d30100; font-family: "Noto Sans JP", sans-serif, "メイリオ", Meiryo, "LucidaGrande", Verdana, "ヒラギノ角ゴProW3", "HiraginoKakuGothicPro", Osaka, "ＭＳＰゴシック", sans-serif; font-weight: 900; } #visual > div:nth-child(3) ul li svg.crown_bg .font55 { font-size: 55px; } #visual > div:nth-child(3) ul li svg.crown_bg .font42 { font-size: 42px; } #visual > div:nth-child(3) ul li svg.crown_bg .font26 { font-size: 24px; } #visual > div:nth-child(3) ul li svg.crown_bg .font16 { font-size: 16px; letter-spacing: -.02em; } #visual > div:nth-child(3) ul li svg.crown_bg .font10 { font-size: 10px; } @media screen and (min-width: 768px) and (max-width: 1023px) { #visual > div:nth-child(3) ul li svg.crown_bg { height: auto; } } @media screen and (max-width: 767px) { #visual > div:nth-child(3) ul li svg.crown_bg { height: auto; } } @media screen and (max-width: 767px) { #visual > div:nth-child(3) ul li { width: 44vw; margin-right: 1.5vw; margin-left: 1.5vw; } #visual > div:nth-child(3) ul li:nth-child(3), #visual > div:nth-child(3) ul li:nth-child(4) { margin-top: 3vw; } #visual > div:nth-child(3) ul li:nth-child(4) { margin-right: 1.5vw; } } #visual > div:nth-child(4) { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; max-width: 990px; margin-top: 10px; } @media screen and (max-width: 1023px) { #visual > div:nth-child(4) { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #visual > div:nth-child(4) { padding-right: 3vw; padding-left: 3vw; } } #visual > div:nth-child(4) h3 { font-size: 18px; font-weight: 600; margin: 0 auto .3em; line-height: 1.6; } @media screen and (max-width: 1023px) { #visual > div:nth-child(4) h3 { font-size: 20px; } } @media screen and (max-width: 767px) { #visual > div:nth-child(4) h3 { font-size: 15px; } } #visual > div:nth-child(4) h4 { font-size: 30px; font-weight: 800; margin-bottom: .25em; } @media screen and (max-width: 1023px) { #visual > div:nth-child(4) h4 { padding-left: 30px; font-size: 30px; } } @media screen and (max-width: 767px) { #visual > div:nth-child(4) h4 { font-size: 6vw; padding-left: 0; margin-left: -3vw; margin-right: -3vw; } } #visual > div:nth-child(4) h4 + p { font-size: 15px; line-height: 1.2; } #visual > div:nth-child(4) table { width: 100%; border-collapse: collapse; border: 3px solid #a2a2a2; margin: 20px auto; } #visual > div:nth-child(4) table th { border: 1px solid #a2a2a2; padding: .2em; vertical-align: middle; } #visual > div:nth-child(4) table td { border: 1px solid #a2a2a2; letter-spacing: -.5em; padding: .2em .2em .2em 2em; text-align: left; vertical-align: middle; } #visual > div:nth-child(4) table td > span { display: inline-block; letter-spacing: normal; vertical-align: middle; } #visual > div:nth-child(4) table td > span:nth-child(2) { width: 7em; height: 2.5em; padding: .75em 0; margin-right: .5em; text-align: center; background-color: #F81400; color: #ffe43c; line-height: 1; clip-path: polygon(0% 20%, 80% 20%, 80% 0%, 100% 50%, 80% 100%, 80% 80%, 0% 80%); } #visual > div:nth-child(4) table td > span:nth-child(3) { font-size: 110%; } #visual > div:nth-child(4) table td > span:nth-child(4) { font-weight: 800; background-color: transparent; background-image: linear-gradient(to right, #ffff3c 0%, #ffff3c 100%); background-repeat: no-repeat; background-size: 0 5px; background-position: left bottom; color: inherit; } #visual > div:nth-child(4) table td > span:nth-child(4) strong { font-size: 150%; } @media screen and (min-width: 768px) and (max-device-width: 1023px) { #visual > div:nth-child(4) table th { padding: .2em 1%; width: 8.5em; } #visual > div:nth-child(4) table th > span { display: inline-block; } #visual > div:nth-child(4) table th span:nth-child(1) { display: block; } #visual > div:nth-child(4) table td { padding: .2em 1%; } } @media screen and (max-width: 767px) { #visual > div:nth-child(4) table { display: block; padding: 0; } #visual > div:nth-child(4) table th { display: block; border-bottom: none; } #visual > div:nth-child(4) table th span { background-color: rgba(0, 148, 93, 0.1); display: block; padding: .5em 0; } #visual > div:nth-child(4) table td { border-top: none; padding: 1em 0; text-align: center; display: block; font-size: 90%; } #visual > div:nth-child(4) table td:nth-child(1) { font-size: 80%; } } /*02-02 regiregist 購入ボタン ---------------------------------*/ div.regist article { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; /* 赤サークル ---------------------------------*/ /* ---------------------------------*/ /*div a:nth-child(2) span{ @media screen and (max-width: 767px) { margin-left: 3vw; display: block; } }*/ } @media screen and (max-width: 1023px) { div.regist article { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { div.regist article { padding-right: 3vw; padding-left: 3vw; } } div.regist article h3 { font-size: 30px; font-weight: 800; margin-bottom: .5em; } @media screen and (max-width: 1023px) { div.regist article h3 { padding-left: 30px; font-size: 30px; } } @media screen and (max-width: 767px) { div.regist article h3 { font-size: 20px; padding-left: 0; margin-left: -3vw; margin-right: -3vw; } } div.regist article p.filtering-shear { position: relative; margin: -9em 0 0 3em; background: #ffc300; color: #d30100; width: 10em; height: 10em; border-radius: 50%; text-align: center; font-size: 12px; } @media screen and (max-width: 1023px) { div.regist article p.filtering-shear { margin: -10em 0 0 0; } } div.regist article p.filtering-shear span { position: absolute; display: inline-block; width: 10em; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; line-height: 1.3; } div.regist article p.filtering-shear strong { line-height: 75%; font-weight: 600; font-size: 31px; letter-spacing: -.05em; } div.regist article p.filtering-shear strong sup { font-size: 12px; color: #fff; } @media screen and (max-width: 767px) { div.regist article p.filtering-shear { position: static; margin-top: 0; display: block; background: transparent; color: #F81400; width: auto; height: auto; border-radius: 0; text-align: left; font-size: 14px; padding: .5em; border: 1px solid #F81400; } div.regist article p.filtering-shear span { position: static; font-size: 14px; width: 100%; text-align: center; left: auto; top: auto; -webkit-transform: translateY(-7%); transform: translateY(-7%); } div.regist article p.filtering-shear span br { display: none; } div.regist article p.filtering-shear strong { font-size: 23px; line-height: 1; } } div.regist article h4 { font-size: 15px; line-height: 1.2; margin-top: -1.5em; } @media screen and (max-width: 1023px) { div.regist article h4 { margin-top: -.5em; } } @media screen and (max-width: 767px) { div.regist article h4 { margin-top: 0; } } div.regist article div { letter-spacing: -1em; } div.regist article div * { letter-spacing: 0; } div.regist article form { display: inline-block; } div.regist article p.freetrial { /* /csr/のみ利用 */ font-size: 18px; color: #F81400; margin-top: 1em; } div.regist article p.freetrial strong { font-size: 150%; font-weight: 600; } @media screen and (max-width: 767px) { div.regist article p.freetrial { font-size: 18px; } } div.regist article a > span { display: inline-block; width: 14em; text-align: center; background-color: #F81400; font-size: 27px; font-weight: 600; color: #FFF; border-radius: .2em; padding: .8em 0; margin: 10px; cursor: pointer; } @media screen and (max-width: 1023px) { div.regist article a > span { padding: .75em 0; width: 12.5em; } } @media screen and (max-width: 767px) { div.regist article a > span { padding: .75em 0; font-size: 20px; margin: 10px 0; width: 80vw; } } div.regist article a > span:hover { opacity: .7; } div.regist article a > span > span.slashBox { display: block; letter-spacing: -.5em; color: #FFFF3C; font-size: 22px; font-weight: 500; text-align: center; line-height: 1.1; margin-bottom: .75em; } div.regist article a > span > span.slashBox * { letter-spacing: normal; } div.regist article a > span > span.slashBox:before { content: ""; display: inline-block; margin-right: 0; vertical-align: middle; width: 1.5em; height: 2.4em; background-color: #FFFF3C; clip-path: polygon(50% 0, 25% 0%, 73% 100%, 85% 100%); } div.regist article a > span > span.slashBox span { display: inline-block; vertical-align: middle; } div.regist article a > span > span.slashBox:after { content: ""; display: inline-block; margin-left: 0; vertical-align: middle; width: 1.5em; height: 2.4em; background-color: #FFFF3C; clip-path: polygon(50% 0, 75% 0, 27% 100%, 15% 100%); } @media screen and (max-width: 1023px) { div.regist article a > span > span.slashBox { font-size: 15px; } } div.regist article a > span > span.slashBox strong { font-size: 120%; } div.regist article a > span.smallBtn { display: inline-block; width: 12em; padding: .5em 0; margin: 10px; cursor: pointer; } @media screen and (max-width: 1023px) { div.regist article a > span.smallBtn { padding: .75em 0; width: 12.5em; } } @media screen and (max-width: 767px) { div.regist article a > span.smallBtn { padding: .75em 0; font-size: 20px; margin: 10px 0; width: 80vw; } } div.regist article a > span.smallBtn span.slashBox { display: block; letter-spacing: -.5em; } div.regist article a > span.smallBtn span.slashBox * { letter-spacing: normal; } div.regist article a > span.smallBtn span.slashBox:before { content: ""; display: inline-block; margin-right: 0; vertical-align: middle; width: 1.5em; height: 1.2em; background-color: #FFFF3C; clip-path: polygon(50% 0, 25% 0%, 73% 100%, 85% 100%); } div.regist article a > span.smallBtn span.slashBox span { display: inline-block; vertical-align: middle; } div.regist article a > span.smallBtn span.slashBox:after { content: ""; display: inline-block; margin-left: 0; vertical-align: middle; width: 1.5em; height: 1.2em; background-color: #FFFF3C; clip-path: polygon(50% 0, 75% 0, 27% 100%, 15% 100%); } /*02-09 #point 「i-フィルター」ができること ---------------------------------*/ #point h2 { background: #00945d; margin: 1em 0; padding: .4em 0; font-size: 34px; font-weight: 600; color: #FFF; font-size: 1.875rem; margin-bottom: 0; } #point h2 b { color: #ffff3c; } @media screen and (max-width: 1023px) { #point h2 { font-size: 22px; } } @media screen and (max-width: 767px) { #point h2 { font-size: 16px; line-height: 1.5; } } @media screen and (max-width: 1024px) { #point h2 { font-size: 1.25rem; } } #point > div { max-width: 945px; margin-right: auto; margin-left: auto; text-align: left; letter-spacing: -1em; } #point > div * { letter-spacing: 0; } @media screen and (min-width: 1024px) { #point > div { margin-top: 80px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #point > div { margin-top: 60px; } } @media screen and (max-width: 767px) { #point > div { margin-top: 20px; } } #point > div h3 { font-size: 3.125rem; letter-spaceng: -.01em; margin-left: 10px; } @media screen and (min-width: 768px) and (max-width: 1024px) { #point > div h3 { font-size: 2.5rem; } } @media screen and (max-width: 767px) { #point > div h3 { font-size: 1.25rem; } } @media screen and (max-width: 767px) { #point > div h3 { text-align: center; } } #point > div h3 > span.num { vertical-align: middle; position: relative; display: inline-block; width: 1.5em; height: 1.5em; text-align: center; border-radius: 50%; background-color: #00945d; margin-right: .6em; margin-bottom: 10px; } #point > div h3 > span.num > * { display: inline-block; width: 100%; position: absolute; left: 0; top: 50%; font-size: 0.9em; color: #FFF; line-height: 1; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #point > div h3 > span.num > * { top: 44%; font-size: .9em; } #point > div h3 span.txt { display: inline-block; font-weight: 900; vertical-align: middle; margin-bottom: 10px; } @media screen and (max-width: 767px) { #point > div h3 span.txt { display: block; } } #point > div figure { display: inline-block; padding: 20px 26px; vertical-align: middle; } @media screen and (min-width: 1024px) { #point > div figure { padding-left: 115px; width: 298px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #point > div figure { padding-left: 88.75px; width: 271.75px; } } @media screen and (max-width: 767px) { #point > div figure { display: block; text-align: center; } } #point > div > div { display: inline-block; font-size: 16px; line-height: 1.25; vertical-align: middle; } @media screen and (min-width: 1024px) { #point > div > div { width: 647px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #point > div > div { width: calc(100% - (157px + 88.75px + 26px)); } } @media screen and (max-width: 767px) { #point > div > div { margin: 10px; padding: 0; } } #point > div > div h4 { font-size: 1.6875rem; letter-spacing: -.01em; margin-bottom: .3em; } @media screen and (max-width: 1024px) { #point > div > div h4 { font-size: 1.25rem; } } #point > div > div p { font-size: 18px; line-height: 1.5; } @media screen and (max-width: 1024px) { #point > div > div p { font-size: 1rem; } } @media screen and (max-width: 1023px) { #point > div > div p { padding-right: 10px; } } /*02-03 #example 「うちの子に限って」 ---------------------------------*/ #example { /* 子供背景 テキストボックス ---------------------------------*/ /* 子供たちを狙ったインターネット犯罪が急上昇中！ ---------------------------------*/ /* 下向き矢印型：緑ボックス ---------------------------------*/ } #example h2 { background: #00945d; margin: 1em 0; padding: .4em 0; font-size: 34px; font-weight: 600; color: #FFF; background-color: #7d807d; margin-top: 20px; margin-bottom: .6em; line-height: 1.1; } #example h2 b { color: #ffff3c; } @media screen and (max-width: 1023px) { #example h2 { font-size: 22px; } } @media screen and (max-width: 767px) { #example h2 { font-size: 16px; line-height: 1.5; } } @media screen and (min-width: 1024px) { #example h2 { margin-top: 100px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #example h2 { margin-top: 75px; } } @media screen and (max-width: 767px) { #example h2 { margin-top: 20px; margin-bottom: 0; } } #example h2 small { font-size: 76%; display: inline-block; font-weight: 400; } #example h2 span { display: inline-block; } #example h3 { margin: 1.5em auto 1em; font-size: 22px; font-weight: 800; } #example h3 span { display: inline-block; } #example ul.worry { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; width: 990px; height: 340px; font-size: 20px; line-height: 1.5; background: url(/cs/lp/md/common/images/001/common/example/photo_child.jpg?v2) no-repeat top center; background-size: cover; } @media screen and (max-width: 1023px) { #example ul.worry { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #example ul.worry { padding-right: 3vw; padding-left: 3vw; } } #example ul.worry li { text-align: left; font-weight: bold; } @media screen and (min-width: 768px) { #example ul.worry { position: relative; } #example ul.worry li { position: absolute; text-shadow: 0 0 10px white; } #example ul.worry li:nth-child(1) { top: 8%; left: 3%; } #example ul.worry li:nth-child(2) { top: 35%; left: 3%; } #example ul.worry li:nth-child(3) { top: 64%; left: 3%; } #example ul.worry li:nth-child(4) { top: 8%; left: auto; right: 3%; text-align: right; } #example ul.worry li:nth-child(5) { top: 35%; left: auto; right: 3%; text-align: right; } #example ul.worry li:nth-child(6) { top: 64%; left: auto; right: 3%; text-align: right; } } @media screen and (max-width: 1023px) { #example ul.worry { width: 100vw; height: 265px; padding-right: 2vw; padding-left: 2vw; font-size: 17px; } } @media screen and (max-width: 767px) { #example ul.worry { font-size: 18px; height: auto; line-height: 1.5; margin-bottom: 0; padding-top: .5em; padding-bottom: .5em; background-image: url(/cs/lp/md/common/images/001/common/example/photo_child_sp.jpg); } #example ul.worry li { padding: .5em 0 .5em 1em; } } #example ul.risk { margin: -20px auto 20px; padding-bottom: 40px; max-width: 990px; border-bottom: dashed #a8a8a8 1px; } #example ul.risk li { display: inline-block; width: 18%; } #example ul.risk li img { max-width: 15vw; } #example ul.risk li:nth-child(1) { transition-delay: 100ms; } #example ul.risk li:nth-child(2) { transition-delay: 200ms; } #example ul.risk li:nth-child(3) { transition-delay: 300ms; } #example ul.risk li:nth-child(4) { transition-delay: 400ms; } #example ul.risk li:nth-child(5) { transition-delay: 500ms; } @media screen and (max-width: 767px) { #example ul.risk { margin-top: 20px; } #example ul.risk li { display: inline-block; width: 32%; } #example ul.risk li img { max-width: 100%; } } #example aside { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; letter-spacing: -1em; } @media screen and (max-width: 1023px) { #example aside { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #example aside { padding-right: 3vw; padding-left: 3vw; } } #example aside * { letter-spacing: 0; } #example aside div { width: 42%; margin: 0 2%; display: inline-block; } @media screen and (max-width: 767px) { #example aside div { width: auto; margin: 0; } #example aside div:nth-child(2) { border-top: dotted #212121 1px; padding-top: 10px; margin-top: 10px; } } #example aside div p { font-size: 21px; line-height: 1.5; font-weight: bold; } #example aside div p b { color: #d90100; } #example aside div figure { margin-top: 1em; } #example aside div figure img { max-width: 100%; height: auto; } #example aside div figure + p { margin-top: 1em; font-size: 16px; } #example aside div:nth-child(1) { transition-delay: 100ms; } #example aside div:nth-child(2) { transition-delay: 200ms; } #example aside .note { text-align: center; margin-top: 1em; } #example h3.arrow { position: relative; width: 990px; margin: 1em auto 70px; padding: .6em 0 0; background: #00945d; color: #FFF; font-size: 28px; text-align: center; line-height: 1.2; } @media screen and (max-width: 1023px) { #example h3.arrow { width: 100vw; padding-right: 2vw; padding-left: 2vw; font-size: 22px; } } @media screen and (max-width: 767px) { #example h3.arrow { font-size: 20px; } } #example h3.arrow strong { font-weight: 600; } #example h3.arrow small { font-size: 70%; } #example h3.arrow b { color: #ffff3c; } #example h3.arrow:after { content: ""; position: absolute; left: 0; bottom: -40px; width: 0; height: 0; border-top: 40px solid #00945d; border-left: 495px solid #FFF; border-right: 495px solid #FFF; } @media screen and (max-width: 1023px) { #example h3.arrow:after { border-left: 50vw solid #FFF; border-right: 50vw solid #FFF; } } #example h3.arrow + p.recommend { text-align: center; font-weight: 600; font-size: 21px; margin-bottom: .8em; } @media screen and (max-width: 1023px) { #example h3.arrow + p.recommend { font-size: 18px; } } @media screen and (max-width: 767px) { #example h3.arrow + p.recommend { font-size: 15px; } } /*02-04 #about「i-フィルター for マルチデバイス」とは？ ---------------------------------*/ #about { /* 学生背景 テキストボックス ---------------------------------*/ /* 7つの特徴 ---------------------------------*/ /* 純国産だから充実サポート ---------------------------------*/ } #about h2 { background: #00945d; margin: 1em 0; padding: .4em 0; font-size: 34px; font-weight: 600; color: #FFF; text-align: center; } #about h2 b { color: #ffff3c; } @media screen and (max-width: 1023px) { #about h2 { font-size: 22px; } } @media screen and (max-width: 767px) { #about h2 { font-size: 16px; line-height: 1.5; } } @media screen and (max-width: 1024px) { #about h2 { margin-bottom: 0; } } #about .about_text { text-align: left; margin-top: 48px; margin-bottom: 10px; padding: 0 0 .5em 1em; line-height: 1.5; background: url(/cs/lp/md/common/images/001/common/about/photo_student.jpg) no-repeat top right; } #about .about_text mark { font-weight: 800; background-color: transparent; background-image: linear-gradient(to right, #ffff3c 0%, #ffff3c 100%); background-repeat: no-repeat; background-size: 0 5px; background-position: left bottom; color: inherit; font-weight: 400; } @media screen and (min-width: 1024px) { #about .about_text { width: 990px; margin-right: auto; margin-left: auto; font-size: 25px; background-size: auto 340px; } #about .about_text em { font-size: 32px; line-height: 1.4; } #about .about_text strong { font-size: 130%; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #about .about_text { width: 100vw; font-size: 20px; background-size: auto 265px; } #about .about_text em { font-size: 34px; } #about .about_text strong { font-size: 130%; } } @media screen and (max-width: 767px) { #about .about_text { width: 100vw; padding-top: 76px; font-size: 16px; background-size: auto 185px; } #about .about_text em { font-size: 25px; } #about .about_text strong { font-size: 130%; } } #about .about_text + .note { margin-bottom: 20px; } @media screen and (min-width: 1024px) { #about .about_text + .note { padding-left: 34px; } } #about article { width: 990px; margin: 0 auto; text-align: left; border-bottom: dashed #a8a8a8 1px; letter-spacing: -1em; } #about article * { letter-spacing: 0; } #about article figure { display: inline-block; width: 35%; padding: 20px 30px; vertical-align: middle; text-align: right; } #about article > div { display: inline-block; width: 65%; padding: 20px 0; font-size: 16px; line-height: 1.25; vertical-align: middle; } #about article > div h4 { margin-bottom: .5em; } #about article > div h4 span { display: inline-block; font-size: 36px; font-weight: 900; } #about article > div p { margin-bottom: .5em; font-size: 18px; font-weight: bold; } #about article > div aside { margin-top: .5em; display: inline-block; background-color: #b1b1b1; font-size: 18px; color: #FFF; padding: 0.2em 2em 0.3em; border-radius: 2px; line-height: 1; } @media screen and (max-width: 767px) { #about article > div aside { width: 100%; margin-left: auto; margin-right: auto; padding-left: .5em; } } #about article > div aside dl * { display: inline-block; } #about article > div aside li:not(:last-child):after { content: " / "; } @media screen and (min-width: 768px) and (max-width: 1023px) { #about article { width: 100vw; } #about article div h4 span { font-size: 28px; font-weight: bold; } } @media screen and (max-width: 767px) { #about article { width: 100vw; } #about article figure, #about article > div { width: 100%; padding: 3vw 3vw 6vw; font-size: 15px; font-weight: normal; } #about article figure { padding: 6vw 0 0; text-align: center; } #about article div h4 { text-align: center; } #about article div h4 span { display: block; font-size: 22px; font-weight: bold; } #about article div h4 strong { font-size: 14px; } #about article p { margin: 1em 0; } } #about article:nth-child(8) { border-bottom: none; } #about h3.arrow { position: relative; width: 990px; margin: 1em auto 70px; padding: .6em 0 0; background: #00945d; color: #FFF; font-size: 28px; text-align: center; line-height: 1.2; background-image: url(/cs/lp/md/common/images/001/common/about/support01.png), url(/cs/lp/md/common/images/001/common/about/support02.png); background-repeat: no-repeat, no-repeat; background-position: 30px center, 857px center; background-size: auto 130px, auto 130px; } @media screen and (max-width: 1023px) { #about h3.arrow { width: 100vw; padding-right: 2vw; padding-left: 2vw; font-size: 22px; } } @media screen and (max-width: 767px) { #about h3.arrow { font-size: 20px; } } #about h3.arrow strong { font-weight: 600; } #about h3.arrow small { font-size: 70%; } #about h3.arrow b { color: #ffff3c; } #about h3.arrow:after { content: ""; position: absolute; left: 0; bottom: -40px; width: 0; height: 0; border-top: 40px solid #00945d; border-left: 495px solid #FFF; border-right: 495px solid #FFF; } @media screen and (max-width: 1023px) { #about h3.arrow:after { border-left: 50vw solid #FFF; border-right: 50vw solid #FFF; } } #about h3.arrow + p.recommend { text-align: center; font-weight: 600; font-size: 21px; margin-bottom: .8em; } @media screen and (max-width: 1023px) { #about h3.arrow + p.recommend { font-size: 18px; } } @media screen and (max-width: 767px) { #about h3.arrow + p.recommend { font-size: 15px; } } @media screen and (max-width: 1023px) { #about h3.arrow { background-position: 13px center, calc(857 / 1024 * 100vw) center; background-size: auto 105px, auto 105px; } } @media screen and (max-width: 767px) { #about h3.arrow { padding-top: 60px; background-position: calc(50vw - 40px) 10px, calc(50vw + 0px) 10px; background-size: auto 46px, auto 46px; } } #about h3.arrow b { font-size: 48px; font-weight: 800; } @media screen and (max-width: 1023px) { #about h3.arrow b { font-size: 42px; } } @media screen and (max-width: 767px) { #about h3.arrow b { font-size: 28px; } } /*02-06 #reasons 選ばれています ---------------------------------*/ #reasons { /* 段落 ---------------------------------*/ /* 下向き矢印型：緑ボックス ---------------------------------*/ /* #reasons の後だけ、p.filtering-shearを表示しない ---------------------------------*/ } #reasons h2 { background: #00945d; margin: 1em 0; padding: .4em 0; font-size: 34px; font-weight: 600; color: #FFF; } #reasons h2 b { color: #ffff3c; } @media screen and (max-width: 1023px) { #reasons h2 { font-size: 22px; } } @media screen and (max-width: 767px) { #reasons h2 { font-size: 16px; line-height: 1.5; } } #reasons h3 { width: 990px; background: #00945d; margin: 1em auto; padding: .5em 0; font-size: 26px; font-weight: 600; color: #FFF; } #reasons h3 b { color: #ffff3c; } @media screen and (max-width: 1023px) { #reasons h3 { width: 100vw; padding-right: 2vw; padding-left: 2vw; font-size: 20px; } } @media screen and (max-width: 767px) { #reasons h3 { font-size: 16px; line-height: 1.5; } } #reasons h4 { font-weight: bold; line-height: 1.5; margin-bottom: 1em; } @media screen and (min-width: 1024px) { #reasons h4 { font-size: 28px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #reasons h4 { font-size: 25px; } } @media screen and (max-width: 767px) { #reasons h4 { font-size: 18px; padding: 0 1em; } } #reasons mark { font-weight: 800; background-color: transparent; background-image: linear-gradient(to right, #ffff3c 0%, #ffff3c 100%); background-repeat: no-repeat; background-size: 0 5px; background-position: left bottom; color: inherit; } #reasons em { font-size: 170%; } #reasons article { margin: 0 auto; padding: 2em 0; border-bottom: dashed #a8a8a8 1px; line-height: 1.5; } #reasons article figure { display: inline-block; } #reasons article.reason01 { padding-top: 0; } @media screen and (max-width: 767px) { #reasons article.reason01 div ul { padding: 8vw 5vw 0; } #reasons article.reason01 div ul:after { display: block; content: ""; width: 90vw; height: 36vw; background: url(/cs/lp/md/common/images/001/common/reasons/logo_kidsdesign.png?20200730) no-repeat center center/contain; } } @media screen and (max-width: 767px) { #reasons article.reason01 div ul li { background: url(/cs/lp/md/common/images/001/common/ico_crown.png) no-repeat left center/30px auto; font-size: 16px; color: #787878; line-height: 1.5; padding: 0 0 0 36px; margin: 0 auto 16px; border: none; text-align: left; } } #reasons article.reason01 div ul li strong { color: #ee4619; font-weight: bold; } #reasons article.reason01 div ul li sup { font-size: 40%; } #reasons article.reason02 figure, #reasons article.reason02 img { max-width: 800px; width: 94%; } #reasons article.reason03 li { margin-top: .5em; margin-right: .5em; display: inline-block; background-color: #b1b1b1; font-size: 18px; color: #FFF; padding: 0.2em 2em 0.3em; border-radius: 2px; line-height: 1; } #reasons article.reason04 { padding-bottom: 1em 0; border-bottom: none; } #reasons article.reason04 span { color: #0077ca; } #reasons article.reason04 figure figure { margin: 0 10px 10px; } #reasons article.reason04 img { width: 100%; } @media screen and (min-width: 1023px) { #reasons article.reason05 { padding-left: 100px; padding-right: 100px; } } @media screen and (min-width: 768px) { #reasons article.reason05 div { display: inline-block; width: calc(100% - 382px - 30px); margin-right: 20px; } } #reasons article.reason05 h4 { font-weight: 400; letter-spacing: .5em; } #reasons article.reason05 p { text-align: left; } #reasons article.reason05 p strong { font-size: 21px; font-weight: 800; } @media screen and (max-width: 1023px) { #reasons article.reason05 p strong { font-size: 18px; } } @media screen and (max-width: 767px) { #reasons article.reason05 p strong { font-size: 14px; } } #reasons article.reason05 img { width: 100%; } @media screen and (min-width: 1023px) { #reasons article.reason06 { padding-left: 100px; padding-right: 100px; } } #reasons article.reason06 h4 { font-weight: 400; letter-spacing: .5em; } #reasons article.reason06 p { text-align: left; } #reasons article.reason06 p strong { font-size: 21px; font-weight: 800; } @media screen and (max-width: 1023px) { #reasons article.reason06 p strong { font-size: 18px; } } @media screen and (max-width: 767px) { #reasons article.reason06 p strong { font-size: 14px; } } #reasons article.reason07 { padding-bottom: 1em 0; border-bottom: none; } @media screen and (min-width: 1023px) { #reasons article.reason07 { padding-left: 100px; padding-right: 100px; } } @media screen and (min-width: 768px) { #reasons article.reason07 div { display: inline-block; width: calc(100% - 100px - 30px); } } #reasons article.reason07 h4 { font-weight: 400; letter-spacing: .5em; } #reasons article.reason07 p { text-align: left; } #reasons article.reason07 p strong { font-size: 21px; font-weight: 800; } @media screen and (max-width: 1023px) { #reasons article.reason07 p strong { font-size: 18px; } } @media screen and (max-width: 767px) { #reasons article.reason07 p strong { font-size: 14px; } } #reasons article.reason07 img { width: 100%; } @media screen and (min-width: 1024px) { #reasons article { width: 990px; font-size: 18px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #reasons article { width: 100vw; font-size: 18px; } } @media screen and (max-width: 767px) { #reasons article { width: 100vw; font-size: 14px; padding: 2em 3vw; } } #reasons h2 + p { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; font-size: 21px; font-weight: 800; line-height: 1.6; margin-bottom: 1em; } @media screen and (max-width: 1023px) { #reasons h2 + p { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #reasons h2 + p { padding-right: 3vw; padding-left: 3vw; } } @media screen and (max-width: 1023px) { #reasons h2 + p { font-size: 18px; } } @media screen and (max-width: 767px) { #reasons h2 + p { font-size: 14px; } } #reasons h3.arrow { position: relative; width: 990px; margin: 1em auto 70px; padding: .6em 0 0; background: #00945d; color: #FFF; font-size: 28px; text-align: center; line-height: 1.2; } @media screen and (max-width: 1023px) { #reasons h3.arrow { width: 100vw; padding-right: 2vw; padding-left: 2vw; font-size: 22px; } } @media screen and (max-width: 767px) { #reasons h3.arrow { font-size: 20px; } } #reasons h3.arrow strong { font-weight: 600; } #reasons h3.arrow small { font-size: 70%; } #reasons h3.arrow b { color: #ffff3c; } #reasons h3.arrow:after { content: ""; position: absolute; left: 0; bottom: -40px; width: 0; height: 0; border-top: 40px solid #00945d; border-left: 495px solid #FFF; border-right: 495px solid #FFF; } @media screen and (max-width: 1023px) { #reasons h3.arrow:after { border-left: 50vw solid #FFF; border-right: 50vw solid #FFF; } } #reasons h3.arrow + p.recommend { text-align: center; font-weight: 600; font-size: 21px; margin-bottom: .8em; } @media screen and (max-width: 1023px) { #reasons h3.arrow + p.recommend { font-size: 18px; } } @media screen and (max-width: 767px) { #reasons h3.arrow + p.recommend { font-size: 15px; } } #reasons + div.regist { padding-bottom: 40px; } #reasons + div.regist p.filtering-shear { visibility: hidden; } @media screen and (max-width: 767px) { #reasons + div.regist p.filtering-shear { display: none; } } /*02-07 #step 3つのステップ ---------------------------------*/ #step { width: 100%; /*メインコンテンツ幅990px*/ max-width: 1023px; padding-right: 17px; padding-left: 17px; margin: 0 auto; background-color: #fff6d9; line-height: 1.5; /* 3つのステップ ---------------------------------*/ /* 便利な自動更新 ---------------------------------*/ } @media screen and (max-width: 1023px) { #step { width: 100vw; padding-right: 2vw; padding-left: 2vw; } } @media screen and (max-width: 767px) { #step { padding-right: 3vw; padding-left: 3vw; } } @media screen and (min-width: 1024px) { #step { max-width: 100%; padding-left: calc(50% - 790px /2); padding-right: calc(50% - 790px /2); } } #step h2 { color: #ff6b00; letter-spacing: .2em; padding: .4em 0; } #step h2 small { display: inline-block; font-size: 70%; vertical-align: 17%; } @media screen and (min-width: 1024px) { #step h2 { font-size: 48px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { #step h2 { font-size: 31px; } } @media screen and (max-width: 767px) { #step h2 { font-size: 20px; } } #step > ol { letter-spacing: -1em; } #step > ol * { letter-spacing: 0; } #step > ol * { box-sizing: border-box; } @media screen and (min-width: 768px) { #step > ol li { display: inline-block; width: calc( ( 100% - 8px ) / 3 + 10px); height: 206px; border: 5px solid #ff6b00; background-color: #FFF; font-size: 14px; vertical-align: top; } } @media screen and (max-width: 767px) { #step > ol li { font-size: 14px; } } @media screen and (min-width: 768px) { #step > ol li:nth-child(1), #step > ol li:nth-child(2) { position: relative; margin-right: 4px; width: calc( ( 100% - 8px ) / 3 - 5px); } #step > ol li:nth-child(1):before, #step > ol li:nth-child(2):before { content: ""; position: absolute; top: -5px; right: 0; width: 0; height: 0; border-left: 30px solid transparent; border-top: 103px solid #ff6b00; border-bottom: 103px solid #ff6b00; } #step > ol li:nth-child(1):after, #step > ol li:nth-child(2):after { content: ""; position: absolute; top: -5px; right: -5px; width: 0; height: 0; border-left: 30px solid transparent; border-top: 103px solid #fff6d9; border-bottom: 103px solid #fff6d9; } } #step > ol li:nth-child(1) h3 span, #step > ol li:nth-child(2) h3 span { text-indent: -30px; } #step > ol li:nth-child(1) p, #step > ol li:nth-child(2) p { margin-left: -30px; } @media screen and (max-width: 767px) { #step > ol li h3 { background-color: #ff6b00; color: #FFF; margin-bottom: .5em; } } @media screen and (min-width: 768px) { #step > ol li h3 span:nth-child(1) { display: block; padding: .2em; font-size: 24px; color: #ff6b00; } } @media screen and (min-width: 768px) { #step > ol li h3 span:nth-child(2) { display: block; padding: .2em; background-color: #ff6b00; font-size: 24px; color: #FFF; } } #step > ol li p { margin-bottom: .5em; } @media screen and (min-width: 768px) { #step > ol li p { position: relative; height: 7em; } } @media screen and (min-width: 768px) { #step > ol li p span { position: absolute; display: inline-block; width: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } #step dl { background: #fff; margin: 20px auto; padding: 10px; letter-spacing: -1em; } #step dl * { letter-spacing: 0; } #step dl strong { color: #079F5D; } @media screen and (min-width: 768px) { #step dl { width: 100%; max-width: 990px; } } @media screen and (min-width: 768px) { #step dl dt { font-size: 18px; margin-bottom: .5em; } } @media screen and (max-width: 767px) { #step dl dt { font-size: 15px; margin-bottom: .5em; } } #step dl dd:nth-child(2) { text-align: left; } @media screen and (min-width: 768px) { #step dl dd:nth-child(2) { display: inline-block; vertical-align: top; font-size: 15px; width: 33%; margin: 0 1%; } } @media screen and (max-width: 767px) { #step dl dd:nth-child(2) { font-size: 15px; } } #step dl dd:nth-child(3) { text-align: left; } @media screen and (min-width: 768px) { #step dl dd:nth-child(3) { display: inline-block; vertical-align: top; width: 65%; } } #step dl dd:nth-child(3) figure img { margin-bottom: 10px; } @media screen and (max-width: 767px) { #step dl dd:nth-child(3) figure img { width: 90%; } } #step dl dd:nth-child(3) figure figcaption { font-size: 12px; } /*02-08 aside 注記 ---------------------------------*/ @media screen and (min-width: 768px) { #footer-note { width: 100%; max-width: 990px; margin: 0 auto; } } #footer-note p { font-size: 12px; text-align: left; padding-bottom: 1em; } #footer-note ul, #footer-note li { font-size: 12px; text-align: left; margin-right: 1em; } @media screen and (min-width: 768px) { #footer-note li { display: inline-block; } } /*--------------------------------- 03 #footer ---------------------------------*/ #footer { padding: 1em; background-color: #fff6d9; font-size: 12px; } /*--------------------------------- 04 04 js/effect ---------------------------------*/ /*スクロールでふわふわするJS ... /cs/lp/md/common/js/default.js ---------------------------------*/ .effect-fade { opacity: 0; transform: translate(0, 0); transition: all 300ms; transition-timing-function: ease-out; } @print { .effect-fade { opacity: 1; transform: translate(0, 0); } } .effect-fade.up { transform: translate(0, 20px); } .effect-fade.down { transform: translate(0, -20px); } .effect-fade.side { transform: translate(60px, 0); overflow: hidden; } .effect-fade.big { transform: scale(0.8, 0.8); } .effect-fade.effect-scroll { opacity: 1; transform: translate(0, 0); transform: scale(1, 1); } .delay1 { transition-delay: 100ms; } .delay2 { transition-delay: 200ms; } .delay3 { transition-delay: 300ms; } .delay4 { transition-delay: 400ms; } .delay5 { transition-delay: 500ms; } .delay6 { transition-delay: 600ms; } .delay7 { transition-delay: 700ms; } .delay8 { transition-delay: 800ms; } .delay9 { transition-delay: 900ms; }