/* ------------------------------------------ LAYOUTS ------------------------------------------ */ * { box-sizing: border-box; } body { padding-top: 50px; background: #fff; font:15px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 150%; } a:link { color: #00a78b; text-decoration: none; } a:hover { color: #ddd; text-decoration: underline; } a:visited { color: #00a78b; text-decoration: none; } a:active { color: #02B290; text-decoration: none; } header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: rgba(255,255,255,0.95); border-bottom: solid 1px #e9e9e9; z-index: 1000; } header .inner { width: 100%; max-width: 980px; margin: 0 auto; } header h1 { width: 225px; float: left; padding: 8px 0; } header h1 img { width: 225px; height: 34px; } header .login-btn { float: right; display: inline-block; margin-left: 0.7em; padding-top: 8px; } header nav, #local-header nav { display: inline-block; float: right; line-height: 48px; } header nav ul li, #local-header nav ul li { position: relative; display: inline-block; } header nav ul li a, #local-header nav ul li a { display: inline-block; padding: 0 0.7em; } header nav.global-navi-201506 ul li a, #local-header nav.global-navi-201506 ul li a { padding: 0 0.7em; font-size: 86%; } header nav ul li a:hover, #local-header nav ul li a:hover { text-decoration: none; background: #f1f1f1; color: #00a78b; } header nav ul li.active a { } header nav ul li.active:after, #local-header nav ul li.active:after { border:5px solid transparent; border-top-color:#00a78b; border-bottom-width:0; content:""; display:block; left:50%; top:0; position:absolute; width:0; margin-left: -4px; } #mainvisual { position: relative; width: 100%; padding: 4em 0; margin-bottom: 3em; background-size: cover; text-align: center; color: #fff; letter-spacing: 0.1em; } #mainvisual .overray { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,167,139,0.95); z-index: 10; } #mainvisual .inner { position: relative; width: 100%; max-width: 980px; margin: 0 auto; z-index: 100; } #mainvisual h1 { margin-bottom: 30px; font-size: 50px; } #mainvisual h1.small-title { font-size: 38px; } #mainvisual h1.tos-title { font-size: 36px; margin-bottom: 0.3em; line-height: 1; } #mainvisual h1 a{ color: #fff; } #mainvisual ul { margin-top: 2em; margin-bottom: 0; padding-left: 1em; text-align: center; } #mainvisual ul li { display: inline-block; margin: 0 0.3em; } #mainvisual ul li a { padding: 0.5em 1em; color: #fff; border: solid 1px #fff; text-shadow: none; } #mainvisual ul li a:hover { text-decoration: none; background: rgba(255,255,255,0.2); } #mainvisual ul li.active a { background: rgba(255,255,255,0.2); } #mainvisual .links { margin-top: 1em; } #mainvisual .links a { color: #fff; text-decoration: underline; } #mainvisual .links a:hover { text-decoration: none; } #mainvisual .btngroup { margin-top: 1em; } .content { } .content-default { max-width: 980px; margin: 0 auto; word-break: break-all; } .content h2 { margin-bottom: 15px; font-size: 170%; font-weight: normal; } .content p { margin-bottom: 1em; } footer a:link { color: #fff; } footer a:visited { color: #fff; } #footer-top { padding: 1em 0; text-align: center; background: #00A78B; color: #fff; } #footer-top .logo { margin-bottom: 0.5em; } #footer-top .copyright a, #footer-top .copyright span { padding: 0 0.5em; } #footer-btm { margin: 0; background: #111; font-size: 79%; color: #fff; } #footer-btm .inner { width: 100%; max-width: 980px; margin: 0 auto; } #footer-btm .inner .col-group { margin: 0; padding: 2em 0; } #footer-btm p { font-size: 114%; } #footer-btm ul li a i { padding-right: 0.5em; } #page-bottom-buttons { padding: 2em 0; background: url(/.assets/bg-mainvisual-top02.png); text-align: center; border-top: solid 1px #e1e1e1; } #page-bottom-buttons .lead { margin-bottom: 1em; font-weight: bold; font-size: 1.5em; line-height: 1.3; } #page-bottom-buttons .btn { min-width: 300px; margin: 0 0.5em; } #page-bottom-buttons p { margin-bottom: 1em; } #page-bottom-buttons p:last-of-type { margin-bottom: 0; } #page-bottom-buttons p.title-last { margin-top: 2em; } #page-bottom-buttons i.icon-trial { position: relative; top: 2px; display: inline-block; width: 12px; height: 16px; background: url(/.assets/icon-btn.png) no-repeat; background-size: 12px 16px; } #page-bottom-pronet { padding: 2.5em 0 1.5em 0; text-align: center; border-top: solid 1px #e1e1e1; background: #2B3039 url(/.assets/bg-pronet.png) no-repeat 10px 10px; background-size: 63px 62px; color: #fff; } #page-bottom-pronet h1 { font-size: 28px; font-weight: normal; margin-bottom: 20px; line-height: 1; } #page-bottom-pronet .text { margin-bottom: 1.5em; } #page-bottom-pronet .btn { min-width: 220px; } /* ------------------------------------------ GRID ------------------------------------------ */ .grid-guide { background: none repeat scroll 0 0 rgba(220, 220, 220, 0.3); padding: 1em 0; text-align: center; } .col { float: left; margin-left: 4%; } .col:first-of-type { margin-left: 0; } .col-group { margin-bottom: 3.3em; } .col-1 { border-left-width: 0; margin-left: 2%; width: 6.5%; } .col-2 { border-left-width: 0; margin-left: 2%; width: 15%; } .col-3 { border-left-width: 0; margin-left: 2%; width: 23.5%; } .col-4 { border-left-width: 0; margin-left: 2%; width: 32%; } .col-5 { border-left-width: 0; margin-left: 2%; width: 40.5%; } .col-6 { border-left-width: 0; margin-left: 4%; width: 48%; } .col-7 { border-left-width: 0; margin-left: 2%; width: 57.5%; } .col-8 { border-left-width: 0; margin-left: 2%; width: 66%; } .col-9 { border-left-width: 0; margin-left: 2%; width: 74.5%; } .col-10 { border-left-width: 0; margin-left: 2%; width: 83%; } .col-11 { border-left-width: 0; margin-left: 2%; width: 91.5%; } .col-12 { margin-left: 0; width: 100%; } /* ------------------------------------------ BTN and FORM ------------------------------------------ */ article textarea, article input[type="text"], article [type="password"], article input[type="datetime"], article input[type="datetime-local"], article input[type="date"], article input[type="month"], article input[type="time"], article input[type="week"], article input[type="number"], article input[type="email"], article input[type="url"], article input[type="search"], article input[type="tel"], article input[type="color"], article .uneditable-input { display: inline-block; padding: 7px 5px; background-color: #FFFFFF; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; font-size: 1rem; } article textarea:focus,article input[type=text]:focus,article input[type=password]:focus,article input[type=datetime]:focus,article input[type=datetime-local]:focus,article input[type=date]:focus,input[type=month]:focus,article input[type=time]:focus,input[type=week]:focus,article input[type=number]:focus,article input[type=email]:focus,input[type=url]:focus,article input[type=search]:focus,article input[type=tel]:focus,article input[type=color]:focus,article .uneditable-input:focus{ border-color:#138e9f; outline:0; outline:thin dotted \9; box-shadow:inset 0 1px 1px rgba(0,0,0,.1),0 0 8px rgba(118,224,239,.8); } input[type="radio"],input[type="checkbox"] { position: relative; top: -0.13rem; margin-right: 0.5rem; margin-left: 1rem; } .btn { display: inline-block; background: #02B290; background: -webkit-linear-gradient(top, #02B290, #00A784); background-image: linear-gradient(#02B290 0px, #00A784 100%); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-radius: 0.2rem; border-style: solid; border-width: 1px; color: #fff !important; cursor: pointer; margin: 0; padding: 0.3rem 1.5rem; text-align: center; transition: all 0.2s ease-out 0s; font-size: 100%; } .btn:hover { background: #00A784; background: -webkit-linear-gradient(top, #00A784, #00A17F); background-image: linear-gradient(#00A784 0px, #00A17F 100%); text-decoration: none; } .btn:active { background: -webkit-linear-gradient(top, #02B290, #00A784); background-image: linear-gradient(#02B290 0px, #00A784 100%); } .btn-large { padding: 1rem 3rem; } .btn-primary { background: #F01952; background: -webkit-linear-gradient(top, #F01952, #DC1348); background-image: linear-gradient(#F01952 0px, #DC1348 100%); } .btn-primary:hover { background: #DC1348; background: -webkit-linear-gradient(top, #DC1348, #F01952); background-image: linear-gradient(#DB053E 0px, #CA0035 100%); } .btn-primary:active { background: -webkit-linear-gradient(top, #F01952, #DC1348); background-image: linear-gradient(#CA0035 0px, #DB053E 100%); } .btn-secondary { background: #FFB628; background: -webkit-linear-gradient(top, #FFB628, #FFA214); background-image: linear-gradient(#FFB628 0px, #FFA214 100%); color: #111; } .btn-secondary:hover { background: #FFA214; background: -webkit-linear-gradient(top, #FFA214, #FC8E00); background-image: linear-gradient(#FFA214 0px, #FC8E00 100%); } .btn-secondary:active { background: -webkit-linear-gradient(top, #FC8E00, #FFA214); background-image: linear-gradient(#FC8E00 0px, #FFA214 100%); } .btn-gray { color: #111 !important; background: #FEFEFE; background: -webkit-linear-gradient(top, #FEFEFE, #DCDCDC); background-image: linear-gradient(#FEFEFE 0px, #DCDCDC 100%); } .btn-gray:hover { background: #DCDCDC; background: -webkit-linear-gradient(top, #DCDCDC, #FEFEF); background-image: linear-gradient(#DCDCDC 0px, #FEFEF 100%); } .btn-gray:active { background: -webkit-linear-gradient(top, #FEFEFE, #DCDCDC); background-image: linear-gradient(#FEFEFE 0px, #DCDCDC 100%); } .btn-normal { color: #111; background-image: linear-gradient(#fff 0px, #e9e9e9 100%); } .btn-normal:hover { background-image: linear-gradient(#f9f9f9 0px, #d9d9d9 100%); } .btn-normal:active { background-image: linear-gradient(#d9d9d9 0px, #f9f9f9 100%); } /* ------------------------------------------ COMMON STYLES ------------------------------------------ */ .content table { width: 100%; margin-bottom: 1em; text-align: center; border-top: solid 1px #d1d1d1; border-left: solid 1px #d1d1d1; } .content table th { padding: 0.6em 1em; background: #CCE8E1; border-right: solid 1px #d1d1d1; border-bottom: solid 1px #d1d1d1; text-align: center; } .content table th.price { background: #008A68; color: #fff; } .content table td { padding: 1em; border-right: solid 1px #d1d1d1; border-bottom: solid 1px #d1d1d1; text-align: center; } .content table td.price { background: #FFF6E5; font-weight: bold; } .content ul { margin-bottom: 1em; list-style: disc; list-style-position: inside; } /* ------------------------------------------ TOP ------------------------------------------ */ #mainvisual-top { width: 100%; background: url(/.assets/bg-mainvisual-top.png) no-repeat center top; background-size: cover; border-bottom: solid 1px #fff; } #mainvisual-top .inner { max-width: 980px; margin: 0 auto; padding: 4em 0 0 0; text-align: center; } #mainvisual-top .inner h1 { margin-bottom: 0.6em; font-size: 321%; font-weight: normal; } #mainvisual-top .inner h1 span { color: #19B899; font-weight: bold; } #mainvisual-top .inner p { margin-bottom: 1em; font-size: 121%; line-height: 150%; } #mainvisual-top .inner p.note { font-size: 93%; } #mainvisual-top .inner .trial { display: inline-block; margin-bottom: 2em; padding: 1em 3em; background: rgba(255,255,255,0.7); box-shadow: 0 1px 0px #ccc; } #mainvisual-top .mainvisual-top-wrap .inner .trial { padding: 1em 1em; } #mainvisual-top .inner .trial .trial-text { position: relative; top: 0.25em; padding-right: 0.25em; font-size: 265%; } #mainvisual-top .inner .trial .trial-btn .btn { width: 340px; padding-left: 0; padding-right: 0; margin: 0 5px; } #mainvisual-top iframe { width: 800px; height: 450px; margin-bottom: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.12); } #mainvisual-top .caution { max-width: 800px; margin: 0 auto 20px auto; text-align: right; font-size: 13px; } .mainvisual-image { width: 100%; min-height: 321px; background: url(/.assets/mainvisual-image.png) no-repeat center bottom; text-align: center; } .mainvisual-top-wrap { padding: 3em 0 5em 0; background-image: url(/.assets/bg-mainvisual-wrap01-6d2f906c.png), url(/.assets/bg-mainvisual-wrap02.png) ; background-repeat: no-repeat, no-repeat ; background-position: right, left ; } .mainvisual-top-ver2 { padding-bottom: 0 !important; background-image: url(/.assets/bg-paper.jpg) !important; border-bottom: none !important; } .mainvisual-top-ver2-wrap { padding-bottom: 3em; background: url(/.assets/minvisual-bg-ver2-fa3b538f.png) no-repeat top center; background-size: cover; } .mainvisual-top-ver2 .top-video { width: 750px; margin: 0 auto; text-align: right; font-size: 79%; } .mainvisual-top-ver2 .top-video p { margin-bottom: 0 !important; } .mainvisual-top-ver2 .inner .trial { backgorund: rgba(255,255,255,0.5); } .mainvisual-top-ver2 .lead span { display: inline-block; padding: 0.2em 2em; border: solid 1px #111; background: #fff; font-size: 79%; } .account-link { margin-bottom: 15px; } .account-link a { display: inline-block; padding: 5px 15px 5px 20px; background: #fff url(/.assets/icon-links.png) no-repeat left; border: solid 1px #00a78b; } .account-link a:hover { text-decoration: none; background: #f9f9f9 url(/.assets/icon-links.png) no-repeat left; } #top-video { padding: 3em 0 2em; background: url(/.assets/bg-top-video-8b067d54.jpg) no-repeat top center; } #top-video .top-video-inner { width: 750px; margin: 0 auto; } #top-video .top-video-inner p { margin-bottom: 0; text-align: right; color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); } #top-news { width: 100%; padding: 4em 0 2em 0; background: url(/.assets/bg-top-news.png); text-align: center; } #top-features { width: 100%; padding: 4em 0 2em 0; background: url(/.assets/bg-top-features.png); text-align: center; } #top-news .inner, #top-features .inner { max-width: 980px; margin: 0 auto; } #top-news .col-group { margin: 0; } #top-news h1, #top-features h1 { margin-bottom: 0.5em; font-size: 300%; font-weight: normal; } #top-news ul { margin-bottom: 0; } #top-news ul li { position: relative; width: 98%; float: left; margin: 0 2% 1em 0; background: #fff; box-shadow: 0 1px 0px #ccc; list-style: none; text-align: left; } #top-news ul li:nth-child(even) { margin-right: 0; } #top-news ul li a.entry { display: block; padding: 0.7em 0.5em; color: #111; } #top-news ul li a.entry:hover { text-decoration: none; background: #FFFCF4; } #top-news ul li a.entry .entrydate { padding-left: 100px; margin-bottom: 0.5em; color: #999; } #top-news ul li a.category { position: absolute; top: 10px; left: -7px; display: inline-block; width: 100px; background: #02B290; color: #fff; font-size: 79%; text-align: center; } #top-news ul li a.category-features { background: #B22848; } #top-news ul li a.category-media { background: #2882B2; } #top-news ul li a.category-press { background: #FFB628; } #top-news .top-news-social { margin-top: 2em; font-size: 86%; } #top-news .top-news-social strong { font-size: 142%; font-weight: bold; } #top-news .top-news-social .btn { width: 30%; margin: 0 0.5em; } #top-news .top-news-social a { display: inline-block; margin: 0 0.5em; } #top-news .top-news-social a img { width: 230px; height: auto; } #top-news .top-news-social .btn span { position: relative; } #top-news .top-news-social .btn i { position: absolute; top: -0.1em; left: -1em; font-size: 25px; } #top-news .top-news-social .btn-twitter { background: #55ACEE; background: -webkit-linear-gradient(top, #69C0FF, #55ACEE); background-image: linear-gradient(#69C0FF 0px, #55ACEE 100%); } #top-news .top-news-social .btn-twitter:hover { background: #4198DA; background: -webkit-linear-gradient(top, #55ACEE, #4198DA); background-image: linear-gradient(#55ACEE 0px, #4198DA 100%); text-decoration: none; } #top-news .top-news-social .btn-twitter:active { background: -webkit-linear-gradient(top, #4198DA, #55ACEE); background-image: linear-gradient(#4198DA 0px, #55ACEE 100%); } #top-news .top-news-social .btn-facebook { background: #3C599F; background: -webkit-linear-gradient(top, #506DB3, #3C599F); background-image: linear-gradient(#506DB3 0px, #3C599F 100%); } #top-news .top-news-social .btn-facebook:hover { background: #28458B; background: -webkit-linear-gradient(top, #3C599F, #28458B); background-image: linear-gradient(#3C599F 0px, #28458B 100%); text-decoration: none; } #top-news .top-news-social .btn-facebook:active { background: -webkit-linear-gradient(top, #28458B, #3C599F); background-image: linear-gradient(#28458B 0px, #3C599F 100%); } #top-features .lead { display: inline-block; padding: 0.25em 0.5em; border: solid 1px #111; } #top-features h2 { font-size: 149%; } #top-features p.icon { margin-bottom: 15px; font-size: 335%; line-height: 1; } #top-features .col-group { margin: 0 0 1.5em 0; } /* ------------------------------------------ NEWS ------------------------------------------ */ #news { } #news img { border: 1px solid #ccc; } #news img.noborder { border: none; } #news ul.entrylist { list-style: none; } #news ul.entrylist li { margin-bottom: 0.5em; padding-left: 0; background: none; } #news .entrylist li .entrydate { display: block; margin-bottom: 5px; font-size: 86%; } #news .entrylist li a { display: block; margin-bottom: 15px; padding-bottom: 15px; border-bottom: solid 1px #e1e1e1; font-size: 114%; } #news .entrylist li.page-navigation-list-item { display: inline-block; } #news .entrylist li.page-navigation-list-item a { border-bottom: none; } #news article h1 { padding-bottom: 15px; margin-bottom: 15px; font-size: 30px; font-weight: normal; line-height: 130%; border-bottom: dotted 1px #ccc; } #news article h2 { padding: 0.5em; font-size: 23px; font-weight: bold; line-height: 1.3; background: #f9f9f9; border-left: solid 2px #00a78b; margin-bottom: 15px; } #news article h3 { font-size: 20px; margin-bottom: 15px; line-height: 1.3; } #news article h4 { font-size: 17px; margin-bottom: 15px; } #news article h5 { font-size: 15px; font-weight: bold; margin-bottom: 15px; } #news article ul, #news article ol { margin-bottom: 2em; list-style-position: inside; } #news article ol li { list-style: decimal; list-style-position: inside; } #news article ul li ul, #news article ul li ol, #news article ol li ul, #news article ol li ol { padding-left: 2em; } #news article ul { } #news article li { margin-bottom: 0.5em; background: url(/.assets/icon-li.gif) no-repeat 0 7px; padding-left: 0.8em; list-style: none; } #news article p { margin-bottom: 2em; } #news article pre { padding: 1em; margin-bottom: 2em; background: #f9f9f9; border: solid 1px #e1e1e1; word-break: break-all; } #news article blockquote { padding: 1em; margin-bottom: 2em; background: #f9f9f9; border: solid 1px #e1e1e1; } #news article .entry-header { margin-bottom: 2em; } #news article .entry-meta { width: 50%; float: left; } #news article .entry-meta ul li { display: inline-block; } .entry-social { width: 50%; float: right; padding-right: 5px; text-align: right; vertical-align: top; } .entry-social .fb_iframe_widget span { position: relative; top: -2px; width: 150px !important; } .entry-social div { display: inline-block; margin-left: 10px; vertical-align: top; } #news article iframe { max-width: 100%; } #news article .entry-meta .entrydate { display: block; color: #999; } #news aside { margin-left: 2%; } #news aside nav { margin-bottom: 2em; } #news aside nav h1 { padding: 0.7em; background: #00a78b; color: #fff; font-weight: normal; text-align: center; } #news aside nav ul { list-style: none; } #news aside nav ul li a { display: block; padding: 0.7em 1em; background: #f9f9f9; border-bottom: solid 1px #fff; } #news aside nav ul li a:hover { background: #f1f1f1; text-decoration: none; color: #00a78b; } #news aside .sidebox { padding: 0.7em 1em; background: #f9f9f9; text-align: center; } #news aside nav.banners a { display: block; margin-bottom: 0.7em; } #news aside nav.banners a:last-of-type { margin-bottom: 0; } #news aside nav.banners a img { max-width: 100%; } .page-navigation { text-align: center; } .page-navigation ul { display: block; padding-bottom: 10px; list-style: outside none none; } #content main section.entrylist .page-navigation li { border-bottom: medium none; display: inline-block; } .page-navigation li a { padding: 0 10px; } .page-navigation li a[rel="prev"]::before { content: "<"; margin-right: 0.3em; } .page-navigation li a[rel="next"]::after { content: ">"; margin-left: 0.3em; } /* ------------------------------------------ FUNCTION ------------------------------------------ */ #function { margin-top: -3em; } #function section { width: 100%; background: url(/.assets/bg-col6-right.jpg) repeat-y center; } #function section:nth-child(even) { background: url(/.assets/bg-col6-left.jpg) repeat-y center; } #function section#features-index-btm { padding: 2em 0; text-align: center; background: #e1e1e1 !important; } #function section#features-index-btm .btn { padding-left: 8em; padding-right: 8em; } #function section .col-group { width: 100%; max-width: 980px; margin: 0 auto; } #function h2 { font-weight: normal; } #function h2 i { padding-right: 5px; color: #00A78B; font-size: 30px; } #function .col { padding: 2em 0; } #function .col p.image { margin-bottom: 0; text-align: center; } #function #function-smartphone { position: relative; padding-bottom: 0; } #function #function-smartphone .image { position: absolute; bottom: 0; width: 100%; } #function #function-app { position: relative; padding-bottom: 0; } #function #function-app .image { position: absolute; bottom: 0; width: 100%; } .detai-box p { font-size: 86%; line-height: 150%; } .detail-icon { display: block; float: left; width: 75px; height: 75px; margin: 1em 1em 1em 0; border-radius: 50%; background: #00A78B; color: #fff; text-align: center; } .detail-icon i { position: relative; top: 17px; font-size: 35px; } #detail-icon-sp i { position: relative; top: 15px; left: 1px; font-size: 40px; } #detail-icon-github { margin-top: 0.5em; } #detail-icon-github i { position: relative; top: 18px; left: 2px; } #to-function-detail { position: relative; } #to-function-detail .btn { position: absolute; top: 38%; display: block; width: 100%; tet-align: center; } #features-list h2 { text-align: center; } #features-list table th { width: 25%; text-align: left; vertical-align: middle; background: #008A68; color: #fff; } #features-list table td { text-align: left; } #features-list table tr:nth-child(even) td { background: #f1f1f1; } #features-list table p.links { margin-top: 1em; margin-bottom: 0; } #features-list section { margin-bottom: 3em; } #features-comapre h2 { text-align: center; } #features-comapre table th { background: #f1f1f1; } #features-comapre table th.software { width: 18%; background: #004B9A; color: #fff; } #features-comapre table th.web { width: 18%; background: #00A78B; color: #fff; } #features-comapre table td { text-align: left; } #features-comapre table td.software { background: #E0E9F3; text-align: center; } #features-comapre table td.web { background: #E0F4F1; text-align: center; } #compare-image { margin-bottom: 2em; } #compare-image img { position: relative; left: -10px; } /* ------------------------------------------ USECASES ------------------------------------------ */ #usecases .col-group { max-width: 980px; margin: 0 auto; } #usecases section { padding-top: 3em; border-bottom: solid 1px #e1e1e1; } #usecases section h1 { max-width: 980px; margin: 0 auto 20px auto; padding-bottom: 20px; font-size: 35px; font-weight: normal; text-align: center; border-bottom: solid 1px #e1e1e1; } #usecases section:nth-child(even) { background: #F1F1F1; } #usecases section:first-of-type { padding-top: 0; } #usecases section h2 { padding-top: 15px; margin-bottom: 20px; font-weight: bold; } #usecases section h3 { margin-bottom: 15px; } /* ------------------------------------------ BUY ------------------------------------------ */ #buy { text-align: center; } #buy section h1 { margin-bottom: 1em; font-size: 30px; font-weight: normal; } #buy span { display: block; padding: 1.5em; background: #f1f1f1; box-shadow: 0 1px 0 #ccc; font-size: 20px; } #buy section a.col-6 i { display: block; font-size: 50px; } #buy section a.col-6:hover { background: #f5f5f5; box-shadow: 0 1px 0 #bbb; color: #00a78b; text-decoration: none; } /* ------------------------------------------ PRICE ------------------------------------------ */ #price .image { text-align: center; } #price h2 { border-bottom: 1px solid #e1e1e1; font-size: 32px; padding-bottom: 15px; text-align: left; } #price-plan section { margin-bottom: 1em; padding-bottom: 1em; border-bottom: solid 1px #e9e9e9; } #plan-buy { margin-bottom: 4em; } #plan-buy .note { font-size: 86%; } #plan-buy section { padding: 1.5em 1em 1em 1em; margin-bottom: 2em; background: #f1f1f1; border: solid 1px #e1e1e1; } #plan-buy section h3 { margin-bottom: 0.7em; padding-bottom: 0.7em; font-size: 135%; border-bottom: solid 1px #ccc; } #plan-buy section .btngroup { text-align: center; } #plan-buy section .btngroup i { position: relative; top: 0.1em; font-size: 163%; } .price-trial-btn { text-align: center; } c { font-size: 93%; } #flow .col-12{ font-size:1.1em } #flow .btngroup { margin-bottom: 4em; text-align: center; } #flow .btngroup a { width: 48%; box-sizing: border-box; margin: 0 0.5em; padding-left: 1em; padding-right: 1em; } #flow .btngroup a i { font-size: 163%; position: relative; top: 0.1em; } #flow li{ margin-bottom: 0.5em; background: url(/.assets/icon-li.gif) no-repeat 0 7px; padding-left: 0.8em; list-style: none; } #flow .plan-flow-others .btngroup a { width: 32%; font-size: 79%; } .btn-buy { font-size: 93%; } table.plan-tb th { width: 20%; } table.plan-tb-201601 th { background: #00a78b; color: #fff; vertical-align: middle; } table.plan-tb-201601 td.plan-title { background: #B2E4DC; font-weight: bold; } table.plan-tb-201601 th a { color: #fff; text-decoration: underline; font-weight: normal; line-height: 1.4; } table.plan-tb-201601 th a:hover { text-decoration: none; } table.plan-tb th span { display: block; margin-top: 0.5em; font-size: 86%; line-height: 1.2; } table.plan-tb td { width: 40%; } table.plan-tb-201601 td { vertical-align: middle; } table.plan-tb tr:nth-child(even) td { background: #f1f1f1; } table.plan-tb td img { max-width: 340px; } table.plan-tb td .title { font-weight: bold; } table.plan-tb td .disc { font-size: 86%; } table.plan-tb td span.price { font-weight: bold; } /* ------------------------------------------ FAQ ------------------------------------------ */ #faq-top { margin-top: -3em; } #faq-top section { width: 100%; padding: 2em 0; background: url(/.assets/bg-col6-right.jpg) repeat-y center; } #faq-top section .col-group { width: 100%; max-width: 980px; margin: 0 auto; } #faq-top h2 { text-align: center; } #faq-top ul { border: solid 1px #d1d1d1; } #faq-top .col-group ul li { border-bottom: solid 1px #d1d1d1; list-style: none; } #faq-top .col-group ul li:last-of-type { border-bottom: none; } #faq-top .col-group ul li a { display: block; padding: 0.8em 0.8em; background: #fff; } #faq-top .col-group ul li a:hover { text-decoration: none; color: #00a78b; background: #f1f1f1; } #plan-price .btngroup { text-align: center; margin-top: 2em; } #plan-price .note { text-align: center; font-size: 86%; } #plan-flow ol { list-style: none; } #plan-flow ol li { position: relative; padding: 1.5em; margin-bottom: 2em; background: #f1f1f1; } #plan-flow ol li span { position: absolute; top: -15px; left: -15px; display: block; width: 40px; height: 40px; background: #00a78b; color: #fff; border-radius: 50%; font-size: 25px; text-align: center; line-height: 40px; } #plan-flow ol li p { margin-bottom: 0; } #plan-flow ol li p.note { margin-top: 0.5em; font-size: 86%; } #plan-flow ol li p.title { font-size: 121%; } #license-information-top table th { width: 25%; } #license-information-top table td { text-align: left; } .trial-box .btn-primary { background: linear-gradient(#f01952 0px, #dc1348 100%) repeat scroll 0 0 #f01952; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-radius: 0.3rem; border-style: solid; border-width: 1px; color: #fff !important; cursor: pointer; display: inline-block; font-size: 100%; margin: 0; padding: 1rem 5.5rem; text-align: center; text-decoration: none; transition: all 0.2s ease-out 0s; } #features-comapre table.compare-tb02 { margin-bottom: 3em; } #features-comapre table.compare-tb02 th { vertical-align: middle; width: 33.3%; } #features-comapre table.compare-tb02 td.title { background: #f3f3f3; text-align: center; font-weight: bold; } #features-comapre table.compare-tb02 td.product-name { text-align: center; font-weight: bold; } #features-comapre table.compare-tb02 td.product-mtnet { background: #CCEDE8; } #features-comapre table.compare-tb02 td.product-mt { background: #CCDBEB; } #features-comapre table.compare-tb02 td ul { padding-left: 0; margin-bottom: 0; } #features-comapre table.compare-tb02 td ul li { margin-bottom: 0.5em; background: url(/.assets/icon-li.gif) no-repeat 0 7px; padding-left: 0.8em; list-style: none; } #features-comapre table.compare-tb02 td ul li:last-of-type { margin-bottom: 0; } #features-comapre table.compare-tb02 td span.price { display: block; font-weight: bold; } #features-comapre table.compare-tb02 td.a-center { text-align: center; } .flow-container { max-width: 800px; margin: 0 auto; padding-bottom: 3em; } .flowbox { position: relative; padding: 1.5em; background: #efefef; font-size: 114%; } .flowbox .number { position: absolute; top: -20px; left: -20px; display: block; width: 50px; height: 50px; padding-top: 12px; background: #00a78b; color: #fff; border-radius: 50%; text-align: center; font-size: 25px; } .flowbox .app-button { text-align: center; } .flowbox:after { content: ""; position: absolute; bottom: -20px; left: 50%; margin-left: -20px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 20px 20px 0 20px; border-color: #efefef transparent transparent transparent; } .bottom-information { margin-top: 3em; padding: 1.5em; text-align: center; border-radius: 15px; border: 4px solid #bbb; } #news article .bottom-information p { margin-bottom: 1em; text-align: left; } #news article .bottom-information img { width: 100px; height: 100px; border: none; float: left; margin-right: 20px; } .fb_iframe_widget span { width: 450px !important; } .mainvisual-usecase { margin-bottom: 0 !important; } #usecase-top { padding: 4em 0 3em 0; background: #f1f1f1; } #usecase-top h1 { margin-bottom: 1em; font-size: 200%; text-align: center; } #usecases-list .inner { max-width: 980px; margin: 0 auto; } #usecase_recent li { width: 31%; float: left; margin-right: 3.5%; margin-bottom: 15px; list-style: none; } #usecase_recent li a { display: block; box-shadow: 1px 1px 2px #d9d9d9; background: rgba(255,255,255,1); color: #111; } #usecase_recent li a:hover { text-decoration: none; background: rgba(255,255,255,0.7); } #usecase_recent li:nth-child(3n) { margin-right: 0; } #usecase_recent li img { width: 100%; } #usecase_recent li .entry-meta { padding: 1em; } #usecase_recent .entry-title { font-weight: bold; } #usecase_recent .entry-excerpt { margin-bottom: 0; font-size: 86%; } #usecase_pickup { position: relative; margin-bottom: 3em; box-shadow: 1px 1px 2px #d9d9d9; } #usecase_pickup .icon-pickup { position: absolute; top: -30px; left: 30px; display: inline-block; width: 150px; height: 30px; background: #00a78b; color: #fff; text-align: center; line-height: 30px; } #usecase_pickup a { display: block; color: #111; background: rgba(255,255,255,1); } #usecase_pickup a:hover { text-decoration: none; background: rgba(255,255,255,0.7); } #usecase_pickup figure { width: 50%; float: left; margin-right: 2em; } #usecase_pickup .entry-detail { padding: 1.5em 1.5em 1.5em 0; } #usecase_pickup .entry-meta { margin-bottom: 1em; } #usecase_pickup .entry-title { font-size: 121%; font-weight: bold; } #usecase_pickup figure img { width: 100%; } #usecase-other { padding: 3em 0; } #usecase-other .lead { text-align: center; } #usecase-other .inner { max-width: 980px; margin: 0 auto; } #usecase-other h1 { margin-bottom: 1em; font-size: 200%; text-align: center; } #usecase-other ul li { position: relative; width: 31%; float: left; margin: 0 3.5% 15px 0; list-style: none; border: solid 1px #e1e1e1; } #usecase-other ul li img { width: 100%; } @media(min-width:767px){ #usecase-other ul li img { height: 201px; } } #usecase-other ul li p { position: absolute; bottom: 0; width: 100%; padding: 1em 0 0.5em 0; margin-bottom: 0; text-align: center; color: #fff; background: rgba(0,0,0,0.8); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.85)); background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.85)); background-image: linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0.85) 100%); z-index: 3; } #usecase-other ul li:nth-child(3n) { margin-right: 0; } #usecase-other .contenthover { width: 100%; height: 100%; color: #fff; } #usecase-other .contenthover a { color: #fff; } #usecase-other .ch_hover { z-index: 100 !important; } #usecase-other .contenthover .to-detail { width: 100%; height: 100%; } #usecase-other .to-detail a { box-sizing: border-box; width: 100%; height: 100%; padding: 5em 0 0 0; display: block; text-align: center; } #usecase-other .to-detail a:hover { text-decoration: none; } #usecase-other .to-detail a small { font-size: 86%; } #usecases-list .to-alllist { text-align: center; } #usecases-list .to-alllist .btn { width: 50%; } body#mtnet-signup { background: #F3F3F3; } body#mtnet-signup header { margin-bottom: 50px; background: none; border-bottom: none; height: auto; left: 0; position: static; text-align: center; } body#mtnet-signup header h1 { float: none; padding: 0; margin-bottom: 20px; width: auto; } body#mtnet-signup header h1 img { position: relative; left: -55px; width: 680px; height: auto; } body#mtnet-signup header p { font-size: 40px; letter-spacing: 1px; } #mtnet-signup #content { max-width: 900px; margin: 0 auto; padding-bottom: 30px; } #mtnet-signup-form { margin-bottom: 60px; text-align: center; } #mtnet-signup-form p { margin-bottom: 10px; } #signup-request-form { background: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 0 #ccc; padding: 1em 0; font-size: 121%; line-height: 40px; } #signup-request-form input[type="email"] { width: 420px; height: 40px; margin: 0 0.5em; } #signup-request-form button { position: relative; top: 1px; width: 150px; height: 40px; } #mtnet-signup-flow h2 { margin-bottom: 15px; font-size: 25px; color: #00B294; text-align: center; } #mtnet-signup-flow ul { position: relative; } #mtnet-signup-flow ul:before { position: absolute; top: 45px; left: 21px; display: block; content: ""; width: 8px; height: 34px; background: #00B295; } #mtnet-signup-flow ul li { margin-bottom: 25px; } #mtnet-signup-flow ul li span { display: block; width: 50px; height: 50px; float: left; border-radius: 25px; background: #00B295; color: #fff; font-size: 25px; line-height: 50px; text-align: center; } #mtnet-signup-flow ul li p { margin-left: 60px; } #mtnet-signup-flow ul li p.caution { margin: 10px 0 15px 60px; font-size: 86%; } #mtnet-signup-flow ul li .mtnet-signup-flow-menu { margin-left: 60px; } #mtnet-signup-flow ul li .mtnet-signup-flow-menu a { box-sizing: border-box; display: block; width: 48%; float: left; background: #fff url("/.assets/icon-links.png") no-repeat left center; border: 1px solid #00a78b; padding: 5px 15px 5px 20px; } #mtnet-signup-flow ul li .mtnet-signup-flow-menu a:first-of-type { margin-right: 4%; } /* ------------------------------------------ edit 201512 ------------------------------------------ */ .information-area a { display: block; background: rgba(25, 183, 153, 0.8) ; color: #fff; text-align: center; } .information-area a:hover { background: rgba(25, 183, 153, 1) ; text-decoration: none; } .information-area a span { position: relative; display: inline-block; padding: 0.7em; } .information-area a span:before { position: absolute; top: 0; left: -40px; width: 40px; height: 50px; display: block; content: " "; background: url(/.assets/icon-info-menu.png) no-repeat; } .mainvisual-top-ver3 { background: url(/.assets/bg-main-ver3_low.jpg) no-repeat center top !important; background-size: cover; } .mainvisual-top-ver3-wrap { padding: 50px 0; margin: 0 auto; text-align: center; } .mainvisual-top-ver3 h1 { margin-bottom: 30px; } .mainvisual-top-ver3 h1 img { width: 768px; } .mainvisual-top-ver3 h2 { margin-bottom: 20px; font-weight: normal; font-size: 35px; line-height: 1.3; } .mainvisual-top-ver3 h2 strong { color: #00A68B; } .mainvisual-top-ver3 ul { margin-bottom: 30px; } .mainvisual-top-ver3 ul li { position: relative; display: inline-block; margin: 0 1.3em; } .mainvisual-top-ver3 ul li.feature01 { top: 80px; } .mainvisual-top-ver3 ul li.feature02 { top: 20px; } .mainvisual-top-ver3 ul li.feature04 { top: 20px; } .mainvisual-top-ver3 ul li.feature05 { top: 80px; } .mainvisual-top-ver3 ul li img { width: 180px; height: 175px; } .mainvisual-top-ver3 p { font-size: 18px; line-height: 1.4; } .registarea { padding: 30px; background: #00A78B; text-align: center; color: #fff; } .registarea .catch { position: relative; top: 0.2em; display: inline-block; margin-right: 0.5em; font-size: 35px; } .content .registarea p.catch-btm { line-height: 1; font-size: 28px; margin-bottom: 20px; } .registarea-top { margin-bottom: 15px; } .content .registarea p { margin-bottom: 0; } #top-features { border-bottom: solid 1px #e1e1e1; background: rgba(0, 0, 0, 0) url("https://movabletype.net/.assets/bg-top-features.png") repeat scroll; } #top-features .btngroup a { width: 40%; margin: 0 0.5em; } #top-features .btngroup a small { font-size: 12px; } #top-themes { padding: 60px 0 45px 0; text-align: center; background: rgba(0, 0, 0, 0) url("/.assets/bg-gallery.png") no-repeat fixed center top / cover; background: radial-gradient(#f6f6f6 ,#efefef ); } #top-themes h1 { margin-bottom: 30px; font-size: 250%; font-weight: normal; line-height: 1.2; } #theme-slider { max-height: 424px; overflow: hidden; padding: 0 55px 40px 55px; } #top-themes p.lead { margin-bottom: 2em; } #theme-slider li { margin-bottom: 30px; } #theme-slider li a { display: block; padding: 10px; background: #fff; text-align: center; box-shadow: 0px 0px 3px rgba(0,0,0,0.2); color: #333; } #theme-slider li a:hover { text-decoration: none; color: #999; } #theme-slider li a figure { display: block; margin-bottom: 10px; } #theme-slider li a p { margin-bottom: 0; } #theme-slider li a p.name { font-size: 20px; font-weight: bold; } #top-themes .bx-wrapper .bx-viewport { overflow: visible !important; left: 0; border-width: 0; box-shadow: none; } #top-themes .bx-wrapper .bx-controls-direction a { display: block; height: 40px; position: absolute; text-indent: -9999px; width: 40px; z-index: 9999; border-top: solid 1px #333; border-right: solid 1px #333; margin-top: -20px; z-index: 1000; } #top-themes .bx-controls-direction { } #top-themes .bx-wrapper .bx-prev { background: none; left: -35px; top: 50%; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } #top-themes .bx-wrapper .bx-next { background: none; right: -35px; top: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); } #top-themes .bx-wrapper .bx-pager { bottom: -40px; } #top-themes .bx-wrapper .bx-pager.bx-default-pager a { height: 13px; width: 13px; border-radius: 50%; background: #aaa; } #top-themes .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } #top-themes .to-list { padding-top: 20px; display: inline-block; } #top-themes .to-list h2 { position: relative; top: 0.2em; display: inline-block; margin-right: 0.5em; } #theme-slider-sp { display: none; } #page-bottom-pronet { border-top: none; } #top-news { background: #f1f1f1; } #top-features .col i { color: #00A68B; } #top-themess .bx-wrapper .bx-pager.bx-default-pager a { background: #999; } #feature-mobile p.icon { margin-bottom: 0px; } #feature-mobile p.icon i { position: relative; top: -3px; font-size: 65px; } #top-news .lead { min-height: 3em; } .btn-account { display: inline-block; padding: 0.5em 8em; font-size: 20px; color: #fff; line-height: 46px; text-decoration: none; border: solid 5px #fff; box-shadow: 2px 2px 2px rgba(0,0,0,0.3); border-radius: 5px; background: #F01952; background:linear-gradient(to right, #F01952, #AE1141); background:-webkit-linear-gradient(left, #F01952, #AE1141); } .btn-account:hover { background: #D4174B; background:linear-gradient(to right, #D4174B, #910E36); background:-webkit-linear-gradient(left, #D4174B, #910E36); } .btn-account:active { background: #910E36; background:linear-gradient(to right, #910E36, #D4174B); background:-webkit-linear-gradient(left, #910E36, #D4174B); } .btn-account img { display: inline-block; width: 32px; margin-right: 0.3em; } .plan-flow-201602 .lead { font-size: 135%; margin-bottom: 1em; } .plan-flow-201602 h3.title { font-size: 121%; font-weight: normal; } .plan-flow-201602 p { margin-top: 15px; } .plan-flow-201602 .plan-flow-others { margin-bottom: 3em; } .plan-flow-201602 .plan-flow-others .btngroup { margin-bottom: 2em !important; } .plan-flow-others .links a { display: block; padding: 0.6em 1.5em 0.6em 1.5em; background: #f1f1f1 url(/.assets/icon-links.png) no-repeat left; border: solid 1px #e1e1e1; text-align: left; } .plan-flow-others .links a:hover { background: #e9e9e9 url(/.assets/icon-links.png) no-repeat left; border: solid 1px #ccc; color: #00a78b; text-decoration: none; } .plan-flow-others .lead { font-size: 135%; } #features-list table.features-list-tb th { text-align: center; line-height: 1.3; } #features-list table.features-list-tb th.col1 { width: 24%; } #features-list table.features-list-tb th.col2 { width: 26%; } #features-list table.features-list-tb th.col3 { width: 36%; } #features-list table.features-list-tb th.col4 { width: 14%; } #features-list table.features-list-tb td { } #features-list table.features-list-tb td small { font-size: 79%; } #features-list table.features-list-tb td.title { background: #e1e1e1; font-weight: bold; border-bottom: solid 1px #fff; } #features-list table.features-list-tb td.feature-name { font-weight: bold; } #features-list table.features-list-tb tr:last-of-type td.title { border-bottom: solid 1px #d1d1d1; } #features-list table.features-list-tb td.acenter { vertical-align: middle; text-align: center; } #features-list table.features-list-tb td i { font-size: 135%; } #features-list .point { text-align: right; } #content-ssl ul { list-style: none; } #content-ssl ul li { margin-bottom: 40px; } .ssl-top ul li h4 { background: #ededed; border-left: 2px solid #00a78b; font-size: 20px; margin-bottom: 15px !important; padding: 0.6em; } #content-ssl h2 { margin-bottom: 20px; padding-bottom: 40px; border-bottom: dotted 1px #ccc; text-align: center; margin-bottom: 45px; font-size: 200%; font-weight: bold; line-height: 1.3; } #content-ssl h3 { text-align: center; margin-bottom: 15px; font-size: 149%; } #content-ssl h4 { margin-bottom: 7px; font-size: 20px; } #content-ssl h4 i { color: #00a78b; } #content-ssl section { margin-bottom: 5em; } #ssl-about p.lead { margin-bottom: 4em; } #ssl-about h3 { margin-bottom: 30px; } #ssl-about section { margin-bottom: 5em; } #content-ssl ul.normal-list { list-style: inside none disc; } #content-ssl ul.normal-list li { margin-bottom: 10px; } #content-ssl small { font-size: 79%; } .ssl-about-image { text-align: center; } #function-sec2 .col { min-height: 590px; } #move h2 { margin-bottom: 30px; font-size: 200%; text-align: center; font-weight: bold; } #move p.lead { margin-bottom: 30px; text-align: center; } #move-feature p.icon { height: 70px; margin-bottom: 15px; font-size: 70px; text-align: center; color: #00a78b; } #move-feature h3 { margin-bottom: 20px; font-size: 20px; text-align: center; } #move-feature p.small { font-size: 86%; } #move-feature .col-group { margin-bottom: 15px; } #move-migration { margin-bottom: 5em; padding: 30px; border: solid 1px #e1e1e1; background: #f1f1f1; text-align: center; } #move-migration h3 { margin-bottom: 30px; font-size: 20px; line-height: 1.3; } #move-migration p.btngroup { margin-bottom: 0; } #move-consideration { margin-bottom: 5em; } #move-consideration h2 { margin-bottom: 45px; } #move-consideration h3 { margin-bottom: 20px; font-size: 20px; text-align: center; } #move-consideration .btngroup { text-align: center; } #move-consideration .btngroup .btn { width: 80%; } #move-consideration .btngroup .btn small { font-size: 79%; } #move-faq { margin-bottom: 5em; } #move-faq dl { background: #f1f1f1; border-bottom: dotted 1px #999; } #move-faq dt { padding: 1em 1.5em 1em 1.5em; font-weight: bold; cursor: pointer; } #move-faq dt span { width: 20px; font-size: 145%; color: #066ba9; float: left; } #move-faq dt p { padding-top: 3px; margin-left: 30px; margin-bottom: 0; } #move-faq dd { display: none; padding: 0.5em 1.5em 1em 1.5em; } #move-faq dd p { padding-top: 3px; margin-left: 30px; margin-bottom: 0; } #move-faq dd span { width: 20px; font-size: 145%; color: #ed4276; float: left; font-weight: bold; } .localnav { margin-bottom: 4em; text-align: left; } .localnav ul { margin-bottom: 0; } .localnav ul li { width: 33.3%; float: left; list-style: none; padding-left: 0; background: none; } .localnav ul li a { padding: 0.8em 1.5em; display: block; background: #f1f1f1 url("/.assets/icon-links.png") no-repeat scroll left center; border: 1px solid #e1e1e1; } .localnav ul li:first-of-type a { border-right: none; } .localnav ul li a:hover { color: #00a78b; background-color: #e9e9e9; } #move ul li { background: url(/.assets/icon-li.gif) no-repeat 0 7px; padding-left: 0.8em; list-style: none; } #move .localnav ul li { padding-left: 0; background: none; } .sidebar-bnr-box { margin-bottom: 2em; } .sidebar-bnr-box img { max-width: 100%; } .mainvisual-mailmagazine { margin-bottom: 0 !important; word-break: break-all; } .content-mailmagazine { max-width: 100%; padding: 3em 15px !important; background: #f1f1f1; } .content-mailmagazine ul { max-width: 580px; margin: 0 auto; list-style: none; } .content-mailmagazine ul li { margin-bottom: 3em; } .content-mailmagazine ul li:last-of-type { margin-bottom: 0; } .content-mailmagazine ul li a { display: block; background: #fff; box-shadow: 0px 0px 20px rgba(0,0,0,0.15); } .content-mailmagazine ul li a .mailmagazine-title { padding: 0.8em; font-size: 114%; } #price-top { background: url(/.assets/bg-main-ver3_low.jpg) no-repeat scroll center top / cover ; border-bottom: 1px solid #fff; width: 100%; } #price-top .inner { max-width: 980px; margin: 0 auto; padding: 4em 0; text-align: center; } .mainvisual-mb0 { margin-bottom: 0px !important; } #price-top h2 { margin-bottom: 30px; font-size: 40px; } #price-top p.lead { margin-bottom: 30px; } .planwrap { width: 840px; margin: 0 auto; } .plan-inner { position: realtive; background: #fff; } .standard .plan-inner { box-shadow: 0px 2px 2px rgba(0,0,0,0.2); } .planbox { width: 280px; float: left; } .pro { } .pro { } .plan-name { padding: 20px 0; background: #FFCC00; color: #fff; font-size: 25px; font-weight: bold; } .plan-name .icon { display: block; margin-bottom: 5px; } .plan-detail { padding: 30px 15px 15px 15px; } .plan-detail ul li { margin-bottom: 25px; } .plan-detail ul li .title { position: relative; top: -3px; color: #999999; font-weight: bold; } .plan-detail ul li .price { display: block; margin-top: 5px; font-size: 32px; font-weight: bold; color: #FFCC00; } .plan-detail ul li small { display: block; margin-top: 5px; font-size: 86%; color: #999999; } .plan-detail ul li .detail { display: inline-block; margin-left: 7px; font-size: 25px; font-weight: bold; } .plan-inner .example { background: #F1F1F1; } .plan-inner .example .example-title { padding: 5px; background: #26BB9B; color: #fff; } .plan-inner .example .example-inner { padding: 15px; } .plan-inner .example .example-inner ul li { padding-left: 12px; margin-bottom: 3px; font-size: 86%; text-align: left; background: url(/.assets/icon-li.gif) no-repeat 0 7px; } .plan-inner .example .example-inner ul li:last-of-type { margin-bottom: 0; } /* ------------------------------------------ for tablet ------------------------------------------ */ @media(max-width:768px){ body { padding-top: 0; } header { position: static; height: auto; } header h1 { width: 100%; float: none; text-align: center; } header .login-btn { display: block; width: 98%; float: none; margin: 0 auto; padding-top: 0; text-align: center; } header .login-btn a { width: 100%; } header nav { display: block; padding: 0.5em; float: none; line-height: 200%; text-align: center; } #mainvisual-top .inner { padding: 2em 0 0; } #mainvisual-top .inner h1 { font-size: 245%; line-height: 130%; } #mainvisual-top .inner .trial .trial-text { display: block; margin-bottom: 0.5em; font-size: 245%; line-height: 130%; } #mainvisual-top .inner .trial .trial-btn { display: block; margin-bottom: 0.5em; } #top-content section { padding-left: 1em; padding-right: 1em; } footer { } footer .col { float: none; } footer .col-3 { margin-left: 0; width: 100%; padding-left: 1em; padding-right: 1em; margin-bottom: 1em; text-align: center; } footer .col-3 ul li { display: inline-block; margin-right: 1em; } #mainvisual .inner { padding: 0 1em; } #mainvisual h1 { line-height: 130%; } #mainvisual h1 a{ color:#fff; } #mainvisual ul { padding-left: 0; } #function { padding: 0 1em 3em 1em; } #function .col-6 { float: none; width: 100%; margin-left: 0; } #function section { background: none; width: 100%; } #function section:nth-child(2n) { background: none; } #function section .col { height: auto !important; } #function #function-app .image { bottom: 0; position: static; width: 100%; } .content { padding: 0 0 3em 0; } .content-default { padding: 0 1em; } .content img { max-width: 100%; height: auto; } .content-default .col-1, .content-default .col-2, .content-default .col-3, .content-default .col-4, .content-default .col-5, .content-default .col-6, .content-default .col-7, .content-default .col-8, .content-default .col-9, .content-default .col-10, .content-default .col-11, .content-default .col-12 { width: 100%; float: none !important; } #usecases section .col-6 { width: 100%; float: none; margin: 0 1em 0 0; padding: 0 1em 1em 1em; text-align:center ; } #buy span.col-6 { width: 100%; float: none; margin-bottom: 1em; margin-left: 0; } #top-news .top-news-social .btn { width: 100%; margin: 0 0 1em 0; } #faq-top { padding-bottom: 0; } #faq-top .col-group { padding-left: 1em; padding-right: 1em; } #faq-top section { width: 100%; padding: 2em 0; background: none; } #faq-top .col-6 { margin-bottom: 2em; margin-left: 0; } table.plan-tb td img { display: none; } #page-bottom-pronet { padding-left: 1em; padding-right: 1em; } .mainvisual-top-ver2-wrap { padding-left: 1em; padding-right: 1em; } .mainvisual-top-ver2 .lead span { padding: 0.5em 1em; line-height: 1.3; } .mainvisual-top-ver2 .top-video { width: 100% !important; } .mainvisual-top-ver2-wrap iframe { width: 100% !important; } .bottom-information { margin-bottom: 2em; } #mtnet-signup #content { padding: 30px 1em 0 1em; } body#mtnet-signup header h1 img { position: relative; left: -50px; width: 600px; height: auto; } body#mtnet-signup header p { font-size: 37px; letter-spacing: 0; } .mainvisual-top-ver3 h1 img { width: 500px; } .mainvisual-top-ver3 h2 { font-size: 25px; } .mainvisual-top-ver3 ul li { position: relative; display: inline-block; margin: 0 0.5em; } .mainvisual-top-ver3 ul li img { width: 120px; height: auto; } .mainvisual-top-ver3 p { font-size: 13px; line-height: 1.4; } .mainvisual-top-ver3 ul li.feature01, .mainvisual-top-ver3 ul li.feature05 { top: 50px; } .registarea-top { line-height: 1.2; } .registarea .catch { display: block; margin-bottom: 15px; font-size: 25px; } #top-features .btngroup a { width: 45%; margin: 0 0.3em; padding-left: 0 !important; padding-right: 0 !important; } #top-themes h1 { margin-bottom: 30px; font-size: 25px; font-weight: normal; line-height: 1.2; } #theme-slider li a p.excerpt { font-size: 11px; } .content .registarea p.catch-btm { line-height: 1; font-size: 25px; margin-bottom: 20px; } #top-content { padding-bottom: 0; } .content h2 { font-size: 160%; } #top-features .btngroup a { width: 47%; font-size: 93%; } #features-list table.features-list-tb thead { top: 0px !important; } #move .col { margin-bottom: 30px; } #move .col-6 { margin-left: 0; } #page-bottom-buttons .btn { margin-bottom: 1em; } .sidebar-bnr-box { text-align: center; } #mainvisual-top iframe { width: 95%; height: 400px; margin: 0 auto 5px auto; } } /* ------------------------------------------ for sp ------------------------------------------ */ @media(max-width:480px){ header nav { padding: 0; margin-top: 0.5em; } header nav ul { border-top: solid 1px #e1e1e1; } header nav ul li { display: block; width: 50%; float: left; border-right: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; } header nav ul li:nth-child(even) { border-right: 0; } header nav ul li a { display: block; } header nav.global-navi-201506 ul li a { padding: 0.3em 0.6em; font-size: 65%; background: #f1f1f1; } header nav.global-navi-201506 ul li a:hover { background: #fff; } #mainvisual h1 { font-size: 35px; } #mainvisual h1.tos-title { font-size: 30px; line-height: 1.2; } #mainvisual-top { padding: 0 1em; } #mainvisual-top h1 { } #mainvisual-top .inner .trial .trial-text { font-size: 150%; padding-right: 0; margin-bottom: 0.5em; position: static; } .mainvisual-image { display: none; } #top-news ul li { width: 100%; } #top-news .col-6 { margin-left:0px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; float: none !important; } #mainvisual-top .inner .trial .trial-btn .btn { width: 100%; } #mainvisual-top .inner .trial .trial-text { font-size: 200%; line-height: 1; } #mainvisual ul li a { font-size: 86%; } #function section#features-index-btm { padding-left: 1em; padding-right: 1em; } #function section#features-index-btm .btn { width: 100%; padding-left: 0; padding-right: 0; } #page-bottom-buttons .btn:first-of-type { margin-bottom: 1em; } table.plan-tb { font-size: 72%; } .content h2 { line-height: 1.2; } #function section#features-index-btm { background: #fff !important; } table#compare-tb { font-size: 58%; line-height: 1.3; } #page-bottom-pronet h1 { line-height: 1.2; } .mainvisual-top-ver2 { padding-left: 0 !important; padding-right: 0 !important; } .mainvisual-top-ver2 .inner h1 { font-size: 200% !important; line-height: 130%; } .mainvisual-top-ver2 .inner .trial .trial-text { font-size: 145% !important; } .mainvisual-top-ver2 .inner .trial { width: 100%; padding-left: 15px !important; padding-right: 15px !important; } .mainvisual-top-ver2 .top-video iframe { height: 230px !important; } #top-news .col-6 { margin-bottom: 3em; } .fb_iframe_widget span { width: 200px !important; } #mtnet-signup #content { padding: 15px 1em 0 1em; } body#mtnet-signup header h1 { margin-bottom: 10px; } body#mtnet-signup header h1 img { position: relative; left: 0; width: 100%; } body#mtnet-signup header p { font-size: 18px; letter-spacing: 0; } body#mtnet-signup header { margin-bottom: 30px; } #signup-request-form { padding: 1em; } #signup-request-form input[type="email"] { width: 100%; height: 40px; margin: 0 0 10px 0; } #signup-request-form button { width: 100%; } #mtnet-signup-flow h2 { margin-bottom: 15px; font-size: 20px; } #mtnet-signup-flow ul:before { display: none; } #mtnet-signup-flow ul li .mtnet-signup-flow-menu a { width: 100%; float: none; margin-bottom: 10px; } #mtnet-signup-flow ul li .mtnet-signup-flow-menu a:first-of-type { margin-right: 0; } #usecase-top h1 { margin-bottom: 50px; } #usecases-list .inner { padding-left: 1em; padding-right: 1em; } #usecase_pickup .icon-pickup { left: 10px; } #usecase_pickup figure { width: 100%; float: none; margin-right: 0; } #usecase_pickup .entry-detail { padding: 1em; } #usecase_pickup .entry-title { margin-bottom: 10px; } #usecase_recent li { width: 100%; float: none; margin-right: 0; margin-bottom: 15px; list-style: none; } #usecase_recent .entry-title { margin-bottom: 10px; } #usecases-list .to-alllist .btn { width: 100%; } #usecase-other h1 { line-height: 1.2; } #usecase-other ul li { position: relative; width: 100%; float: none; margin: 0 0 15px 0; list-style: none; } #usecase-other { padding-bottom: 0; } .information-area a span { font-size: 13px; } .information-area a span:before { display: none; } .mainvisual-top-ver3 h1 img { width: 100%; } .mainvisual-top-ver3 h2 { font-size: 20px; } .mainvisual-top-ver3 ul li { margin-bottom: 15px; } .mainvisual-top-ver3 ul li img { width: 120px; height: auto; } .mainvisual-top-ver3 ul li.feature01, .mainvisual-top-ver3 ul li.feature05 { top: 0; } .mainvisual-top-ver3 ul li.feature02, .mainvisual-top-ver3 ul li.feature04 { top: 0; } .btn-account { width: 100%; padding: 0.5em 0; font-size: 20px; color: #fff; } #top-features .btngroup a { width: 100%; margin: 0 0 15px 0; } #theme-slider { display: none; } #theme-slider-sp { display: block; height: 340px; overflow: hidden; } #theme-slider-sp ul li { margin-bottom: 100px; } #theme-slider-sp ul li a { display: block; padding: 10px; background: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.2); } #theme-slider-sp ul li a p.name { margin: 10px 0 5px 0; font-size: 18px; font-weight: bold; } #theme-slider-sp ul li a p.excerpt { margin-bottom: 0; } #top-themes .btn { width: 100%; } #page-bottom-buttons { padding-left: 1em; padding-right: 1em; } #page-bottom-buttons .btn { width: 100%; margin: 0 0 15px 0; } #top-themes .bx-wrapper .bx-controls-direction { display: none; } .registarea .catch { font-size: 20px; } #top-features h1 { font-size: 30px; } .content .registarea p.catch-btm { font-size: 20px; } #page-bottom-pronet h1 { font-size: 20px; } #top-news .top-news-social a { display: inline-block; margin: 0 0 1em 0; } #top-news .top-news-social a img { width: 100%; height: auto; } #flow .btngroup a { width: 100%; margin: 0 0 1em 0; } #flow .plan-flow-others .btngroup a { width: 100%; font-size: 100%; } #features-list table.features-list-tb { font-size: 65%; } #mainvisual h1.small-title { font-size: 30px; } .localnav ul li { width: 100%; float: none; } .localnav ul li a { border-bottom: none; } .localnav ul li:first-of-type a { border-right: 1px solid #e1e1e1; } .localnav ul li:last-of-type a { border-bottom: 1px solid #e1e1e1; } .content-mailmagazine ul li { margin-bottom: 2em; } #news aside nav.banners a img { width: 100%; } #mainvisual-top iframe { height: 200px; } } /* ------------------------------------------ ClearFix ------------------------------------------ */ .group, .col-group { zoom:1; } .group:after, .col-group:after { content: ""; display: block; clear: both; }