#stage, h3, h4, h5, h6, section p { margin-left: auto; margin-right: auto; } #header #headerrightarea, #header .headertop { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; } #feature-1 .ytb, #nav-list a { text-decoration: none; } html { font-size: 62.5%; } body { font-size: 10px; font-size: 1rem; font-family: Arial, Verdana, 'Lucida Grande', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif; word-wrap: break-word; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { text-align: center; font-size: 250%; margin-top: 0; } h2 { margin-bottom: 5rem; font-size: 330%; } h2, h3, h4, h5, h6 { width: 96%; margin-bottom: 1.5rem; text-align: center; font-size: 6.4vw; font-weight: 400; font-weight: normal; margin: 0 auto 1.5rem auto; } h4, h5, h6 { font-size: 200%; } a img, img { border: 0; } figure > figcaption { text-align: center; font-size: 2vw; padding-top: 1rem; padding-bottom: 2rem; } section > div { margin-bottom: 0; padding-top: 3rem; } /*section:nth-child(even)>div { background-color:#f0f0f0; }*/ #feature-3, #feature-5, #feature-6 { background-color: #f0f0f0; } section p { font-size: 1.8rem; font-weight: 200; line-height: 1.5; width: 90%; margin-bottom: 10rem; } .textsmall { font-size: 86% !important; } #stage { width: 100%; min-width: 320px; min-width: 32rem; overflow: hidden; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAACCAYAAABsfz2XAAAAF0lEQVQYV2N88eLFfwYSAOP///9J0gAAHPsHtgDKa8YAAAAASUVORK5CYII=) left bottom repeat-x; } #header { border-bottom: 1px solid #ccc; border-bottom: .1rem solid #ccc; width: 100%; box-sizing: border-box; background-color: #fff; background: -webkit-linear-gradient(bottom, #fff 0, #efefef 3%, #fff 10%, #fff 100%); background: linear-gradient(to top, #fff 0, #efefef 3%, #fff 10%, #fff 100%); box-shadow: 0 0 3px #ccc; box-shadow: 0 0 .3rem #ccc; margin: 0 auto 1.5rem; position: relative; z-index: 1000; } #header #corporatesymbol { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 0; margin: 0; } #header #corporatesymbol a { display: block; } #header #corporatesymbol img { max-width: 55px; max-width: 5.5rem; height: auto; line-height: 0; } #header #headerrightarea { -webkit-box-flex: 5; -webkit-flex: 5; -ms-flex: 5; flex: 5; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #header #headerrightarea img { max-width: 100%; height: auto; } #header .headertop { display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: 0; padding: .5rem 1.1rem .8rem; background: 0 0; } #header .container { min-width: 320px; min-width: 32rem; } #site-nav { margin-bottom: 3rem; background-color: #fcfcfc; } #site-nav.nav-fixed { position: fixed; top: 0; z-index: 10; zoom: 1; width: 100%; height: auto; background-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #site-nav.nav-fixed .nav-w { padding-top: 1rem; border-radius: 0 0 .5rem .5rem; background-color: #fcfcfc; } #site-nav.nav-fixed .nav-w:after { box-shadow: 1px 1px 10px #ccc; box-shadow: .1rem .1rem 1rem #ccc; border-radius: 0 0 .5rem .5rem; } #site-nav #site-nav-headline { position: relative; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 1.1rem 1rem; } #site-nav #site-nav-headline h1, #site-nav #site-nav-headline h2, #site-nav #site-nav-headline h3, #site-nav #site-nav-headline h4, #site-nav #site-nav-headline h5, #site-nav #site-nav-headline h6 { color: #666; margin: 0; -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; text-align: left; } #site-nav #site-nav-headline button { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: .7rem 0; background-color: #333; border: 0; font-size: 160%; color: #fff; cursor: pointer; } #site-nav #site-nav-headline button:active, #site-nav #site-nav-headline button:focus { outline: 0; } #site-nav #site-nav-headline button i { -webkit-transition: all .3s; transition: all .3s; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #site-nav #site-nav-headline button i:before { font-size: 130%; } #site-nav #site-nav-menu { display: none; width: 100%; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; -ms-grid-row-align: stretch; align-items: stretch; list-style-type: none; margin: 0; padding-left: 0; padding-bottom: 1rem; position: absolute; z-index: 10; zoom: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #site-nav #site-nav-menu li { position: relative; font-size: 150%; color: #333; background-image: -webkit-linear-gradient(top, #f7f7f7 0, #ebebeb 100%); background-image: linear-gradient(to bottom, #f7f7f7 0, #ebebeb 100%); border-bottom: 1px solid #d1d1d1; border-bottom: .1rem solid #d1d1d1; } #site-nav #site-nav-menu li:first-child { border-top: 1px solid #d1d1d1; border-top: .1rem solid #d1d1d1; } #site-nav #site-nav-menu li:after { content: "\f054"; font-family: FontAwesome; position: absolute; top: 16px; top: 1.6rem; right: 12px; right: 1.2rem; } #site-nav #site-nav-menu a { display: block; position: relative; padding: 1.5rem 3.5rem 1.4rem 1.2rem; text-decoration: none; font-weight: 600; color: #333; } #site-nav .container.nav-w { width: 100%; } #site-nav .nav-w { position: relative; } #site-nav .nav-w:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-shadow: 0 0 0 transparent; border-radius: 0; -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #feature-1, #feature-1 .ytb, #feature-3 { position: relative; } #location { display: none; } #feature-1 h1 img, #feature-1 h2 img, #feature-1 h3 img, #feature-1 h4 img, #feature-1 h5 img, #feature-1 h6 img { margin-right: 2rem; } div#fmvHeader { max-width: 980px; margin: 5px auto 30px; height: auto; font-size: 1rem; } div#fmvHeader div.tag { float: right; text-align: right; font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } div#fmvHeader div.tag img { margin-top: 12px; margin-bottom: 10px; } div#fmvHeader div.tag .fundMsg { font-size: 140%; font-weight: bold; margin: 0; } @media only screen and (max-width: 768px) { div#fmvHeader { margin-bottom: 10px; margin-left: 0px; margin-right: 0px; padding: 0 10px; } div#fmvHeader div.tag { width: 96%; float: none; display: block; text-align: left; white-space: normal!important; } } #feature-1 div { padding-right: 10px; padding-left: 10px; } #feature-1 div.main_v { margin-bottom: 30px; } #feature-1 h1 img { margin-right: 0; opacity: 1; height: auto; max-width: 100%; } #feature-1 .type_name { max-width: 980px; margin: 0 auto 30px; text-align: right; font-size: 18px; color: #000; width: 98%; } @media screen and (max-width: 768px) { #feature-1 h1 { max-width: 344px; margin: 0 auto; } #feature-1 .flex-box > div:last-child { padding: 0; } } #feature-1 h1 img + img { margin-top: 50px; } #feature-1 #lead { margin-top: 0; margin-bottom: 4.5rem; width: 80%; font-size: 9.5vw; font-weight: 100; line-height: 1; text-align: center; opacity: 1; } #feature-1 #lead small { font-size: 40%; letter-spacing: 3px; letter-spacing: .3rem; opacity: 1; } #feature-1 .respon-img { opacity: 1; } #feature-1 .respon-img.right { margin-right: auto; width: 100%/* 120% */; height: auto; max-width: 100%; margin-bottom: 0; /* -webkit-transform:rotate(-4deg); -ms-transform:rotate(-4deg); transform:rotate(-4deg); */ } #feature-1 .mar_lr0 { margin: 0 -20px !important; } #feature-1 .flex-box div h1.ahc2_title { width: 100%; } #feature-1 .ytb { display: block; margin-left: auto; margin-right: auto; } #feature-1 .ytb:hover { opacity: .8; } #feature-2 .flex-box > div:last-child figure img:first-child, #feature-2.effect .flex-box > div:last-child figure img:last-child { opacity: 0; } /*#feature-2 p { margin-bottom:3rem; }*/ #feature-2 .flex-box > div:first-child figure img { margin-bottom: 5rem; } #feature-2 .flex-box > div:last-child { position: relative; width: 100%; } #feature-2 .flex-box > div:last-child:before { content: ""; display: block; padding-top: 79.65%; } #feature-2 .flex-box > div:last-child figure img { position: absolute; top: 0; width: 100%; height: auto; max-width: 850px; max-width: 85rem; -webkit-transition: all 1.5s ease-out 0s; transition: all 1.5s ease-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #feature-2 .flex-box > div:last-child figure img:last-child { opacity: 1; } #feature-2 .flex-box > div:last-child figure img.change:first-child { opacity: 0; } #feature-2 .flex-box > div:last-child figure img.change:last-child { opacity: 1; } #feature-3 h3, #feature-3 h4, #feature-3 h5, #feature-3 h6, #feature-3 p, #feature-2.effect .flex-box > div:last-child figure img:first-child { opacity: 1; } #feature-3 div.pc { } #feature-3 div.container { width: 100%; } #feature-3 figure { /* width: 78%; position: relative; margin-top:100px; margin: 0; line-height: 0;*/ margin: 0; } #feature-3 figure img { width: 100%; } #feature-3 img.pc { -webkit-transition: all 1.5s linear 0s; transition: all 1.5s linear 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #feature-3 img.sp { position: absolute; top: -105px; left: -33px; } #feature-3 .container .flex-box > div:last-child img { /* width: auto; position: absolute; top: -346px; left: 48px; */} #feature-3 .container .flex-box > div:last-child, #feature-2 { position: relative; } #feature-4 { position: relative; } #feature-4 .func_contents { margin: 3rem auto 4rem; } #feature-4 .flex-box > div:last-child { position: relative; width: 100%; } #feature-4 .flex-box > div:last-child:before { content: ""; display: block; padding-top: 109%; } #feature-4 .flex-box > div:last-child figure img { position: absolute; top: 0; left: 0; width: 130%; height: auto; -webkit-transition: all 1.5s ease-out 0s; transition: all 1.5s ease-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #feature-4 .flex-box > div:last-child figure img:first-child { opacity: 0; } #feature-4 .flex-box > div:last-child figure img:last-child { opacity: 1; } #feature-4 .flex-box > div:last-child figure img.change:first-child { opacity: 0; } #feature-4 .flex-box > div:last-child figure img.change:last-child { opacity: 1; } #feature-5 .flex-box > div:last-child figure img:first-child, #feature-5.effect .flex-box > div:last-child figure img:last-child { opacity: 0; } #feature-5 p { margin-bottom: 3rem; } #feature-5 .flex-box > div:first-child figure img { margin-bottom: 5rem; } #feature-5 .flex-box > div:last-child { position: relative; width: 100%; } #feature-5 .flex-box > div:last-child:before { content: ""; display: block; /*padding-top:79.65%;*/ } #feature-5 .flex-box > div:last-child figure img { position: absolute; top: 0; width: 100%; height: auto; max-width: 850px; max-width: 85rem; -webkit-transition: all 1.5s ease-out 0s; transition: all 1.5s ease-out 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #feature-5 .flex-box > div:last-child figure img:last-child { opacity: 1; } #feature-5 .flex-box > div:last-child figure img.change:first-child { opacity: 0; } #feature-5 .flex-box > div:last-child figure img.change:last-child { opacity: 1; } #feature-5 { padding-top: 40px; } #feature-5 .bannar { position: relative; } #feature-5 .bannar .btn { position: absolute; bottom: 9%; left: 10%; text-align: left; } #feature-5 img { width: 100%; } #feature-5 .bannar .btn img { width: 65%; } @media screen and (max-width:950px) { #feature-5 .bannar .btn { left: 10%; } } #feature-6 > .virtual-p { width: 100%; margin-bottom: 3rem; } #feature-6 .flex-box > div figure, #nav-list dl { margin: 0; } #feature-6 > .virtual-p:before { content: ""; display: block; padding-top: 75%; } #feature-6 h2, #feature-6 h3, #feature-6 h4, #feature-6 h5, #feature-6 h6 { font-weight: 900; width: 96%; } #feature-6 img.respon-img { max-width: 640px; max-width: 64rem; width: 100%; } #feature-6 .btn-1:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } #sns { display: none; } #sns .sns-logo { font-size: 20px; color: #666; } #sns .sns-logo a { color: #666; opacity: .8; -webkit-transform: rotate(0) scale(1, 1); -ms-transform: rotate(0) scale(1, 1); transform: rotate(0) scale(1, 1); -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1); transition: all .3s cubic-bezier(.4, 0, .2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #sns .sns-logo a:hover { opacity: 1; -webkit-transform: rotate(360deg) scale(1.5, 1.5); -ms-transform: rotate(360deg) scale(1.5, 1.5); transform: rotate(360deg) scale(1.5, 1.5); -webkit-backface-visibility: hidden; backface-visibility: hidden; } #nav-list dl > dt > button > i, #pagetop { -webkit-backface-visibility: hidden; } #sns .sns-logo .fa-stack-1x { color: #fff; } #sns .sns-logo.tw a:hover { color: #5ea9dd; } #sns .sns-logo.fb a:hover { color: #385185; } #sns .sns-logo.gp a:hover { color: #db4437; } #nav-list { padding-left: 0; padding-right: 0; } #nav-list dl > dt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0; border-top: 1px solid #bbb; border-top: .1rem solid #bbb; padding: .3rem 1.5rem .3rem 1.2rem; position: relative; background: -webkit-linear-gradient(top, #f0f0f0 0, #f7f7f7 100%); background: linear-gradient(to bottom, #f0f0f0 0, #f7f7f7 100%); } #pagetop a, .virtual-p { background-repeat: no-repeat; } #nav-list dl > dt > a, #nav-list dl > dt > span { font-size: 13px; font-size: 1.3rem; font-weight: 600; } #nav-list dl > dt > button { font-size: 20px; font-size: 2rem; cursor: pointer; margin-left: auto; } #nav-list dl > dt > button > i { -webkit-transform: rotateX(0); transform: rotateX(0); -webkit-transition: all .3s linear; transition: all .3s linear; backface-visibility: hidden; } #nav-list dl > dt > button.open > i { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } #nav-list dl > dd { margin: 0; font-size: 12px; font-size: 1.2rem; overflow: hidden; } #nav-list dl > dd > ul { list-style-type: none; margin: 0; padding: 0; height: auto; } #nav-list dl > dd > ul > li { position: relative; border-top: 1px solid #bbb; border-top: .1rem solid #bbb; padding: 1.2rem 2rem 1.2rem 1.2rem; } #nav-list dl > dd > ul > li:after { position: absolute; right: 24px; right: 2.4rem; content: "\f054"; font-family: FontAwesome; color: #333; } #nav-list dl > dd > ul > li > a { display: inline; color: #333; } #nav-list a:hover { text-decoration: underline; cursor: pointer; } #nav-list a:visited { color: #609; } #nav-list a:link { color: #039; } #nav-list .nav-w { width: 100%; } #pagetop { position: relative; border-top: 1px solid #b8b8b8; border-top: .1rem solid #b8b8b8; height: 60px; height: 6rem; backface-visibility: hidden; } #pagetop a, #pagetop img { width: 49px; opacity: 1; -webkit-backface-visibility: hidden; } #pagetop p { position: absolute; margin: 0; line-height: 0; right: 10px; right: 1rem; bottom: 5px; bottom: .5rem; z-index: 1; display: block; } #pagetop img { width: 4.9rem; height: auto; -webkit-transition: all .3s linear; transition: all .3s linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; backface-visibility: hidden; } #pagetop a { display: block; width: 4.9rem; height: 49px; height: 4.9rem; -webkit-transition: all .3s linear; transition: all .3s linear; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; backface-visibility: hidden; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABiCAYAAACrpQYOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2NTg5RUFCODUwMjA2ODExODIyQUVDQjZGNUVENjEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NEIwRkY3QUQ1QUExMUU0OEI5NDkyODdGQ0QwNDlENSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NEIwRkY3OUQ1QUExMUU0OEI5NDkyODdGQ0QwNDlENSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwMjIxNGY0LWRmZmYtNDcxZS05YzJkLTFjMmYwODg1ZTVlMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NTg5RUFCODUwMjA2ODExODIyQUVDQjZGNUVENjEyQiIvPiA8L3Jk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); background-position: center center; background-size: cover; } #pagetop a:hover, #pagetop a:hover img { opacity: .8; } #pagetop.fixed { display: none; } #pagetop.fixed.display-block { display: block; -webkit-animation: anime-opacity 1.5s ease-out 0s 1 normal; animation: anime-opacity 1.5s ease-out 0s 1 normal; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } #pagetop.fixed p { position: fixed; bottom: 40px; bottom: 4rem; } #creditline { background-color: #666; border-top: 1px solid #eee; border-top: .1rem solid #eee; padding-top: 1.2rem; padding-bottom: 1.2rem; } #creditline p { margin: 0 auto; text-align: center; font-size: 90%; color: #fff; } .block-center, .block-left, .container, .virtual-p { margin-right: auto; } .block-center, .block-right, .container, .virtual-p { margin-left: auto; } #creditline p a { color: #fff; text-decoration: none; } #creditline .flex-box div:first-child, .pc, .pc-inline { display: none; } .sp { display: block; } .sp img.w100 { width: 100%; } .sp-inline { display: inline; } .display-none, .read-only { display: none; } .display-block { display: block; } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .display-table { display: table; } .display-table-cell { display: table-cell; } .container { max-width: 100%; } .container.nav-w { position: relative; } .virtual-p { background-position: 50% 50%; background-size: contain; } .clearfix:after, .container:after { content: ""; display: block; clear: both; } .block-center, .block-left, .block-right { display: block; } .bg-ececec { color: #666; background-color: #ececec; } .btn-1 { display: block; font-size: 1.8rem; width: 200px; width: 20rem; text-align: center; border: 1px solid #999; border: .1rem solid #999; padding: 1rem 0; margin: 2rem auto; text-decoration: none; color: #fff; background: url(/overseas/hk/zh/uh/1907/images/arrow_r.png) no-repeat right 50% #2878c8; -webkit-transition: all .3s; transition: all .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .btn-1:hover { background-color: #5393d3; border-color: #bcbcbc; box-shadow: 0 0 2rem #bcbcbc; color: #fff; } .b-l, .b-lr { border-left: 1px solid transparent; } .b-lr, .b-r { border-right: 1px solid transparent; } .series-name { color: #fff; white-space: nowrap; padding: 4px 8px; font-size: 140%; } .dropdown:after { content: "\f0d7"; font-family: FontAwesome; } .bgcolor-rh { background-color: #286f93; } .bgcolor-qh33 { background-color: #e8be00; } .bgcolor-ah-g { background-color: #38464e; } .bgcolor-ah { background-color: #941c61; } .bgcolor-sh { background-color: #04626e; } .bgcolor-ch { background-color: #635100; } .bgcolor-uh { background-color: #c7000d; } .bgcolor-gh { background-color: #9b9b79; } .bgcolor-fh { background-color: #00376f; } .bgcolor-wh { background-color: #c66121; } .bgcolor-dh { background-color: #006634; } /* .cstmTableTab_area */ .cstmTableTab_area { margin: 15px 0 0; padding: 0; width: 100%; } .cstmTableTab_area .cstmTableTab { display: inline-block; width: 50%; list-style: none; } .cstmTableTab_area .cstmTableTab a { display: block; padding: 1em 1.5em; background-color: #ffffff; color: #323232; font-size: 160%; font-weight: bold; text-align: center; text-decoration: none; border: solid 1px #696969; } .cstmTableTab_area .cstmTableTab:first-child a { margin-right: 10px; } .cstmTableTab_area .cstmTableTab:last-child a { margin-left: 10px; } .cstmTableTab_area .cstmTableTab a.current { background-color: #323232; color: #FFFFFF; border: solid 1px #323232; } @media screen and (max-width:768px) { .cstmTableTab_area .cstmTableTab a { font-size: 130%; } } /* .cstmTable_area */ .cstmTable_area { display: none; margin-top: 30px; } .cstmTable_area:before { border-top: solid 1px; display: block; content: " "; } .cstmTable_area:before { border-color: #323232; } /* .cstmTable */ .cstmTable { font-size: 120%; line-height: 1.6; text-align: center; border-collapse: collapse; /* border-top:solid 1px #696969;*/ border-bottom: solid 1px #696969; table-layout: fixed; width: 100%; } .cstmTable th, .cstmTable td { border-top: solid 1px #696969; padding: 15px 4px; } .cstmTable tr:first-child th, .cstmTable tr:first-child td { border-top: none; } .cstmTable th { background-color: #f5f5f5; width: 20%; } .cstmTable td { border-left: solid 1px #696969; } .cstmTable .bdrNone { border-left: none; } /* .fmlistnone */ .fmlistnone { margin-top: 0; padding-left: 10px; } .fmlistnone li { list-style: none; } /* .fmv5_footnote */ .fmv5_footnote { text-align: left; margin-bottom: 20px; line-height: 1.6; } .fmv5_footnote dt, .fmv5_footnote dd { float: left; font-size: 120%; margin: 0; } .fmv5_footnote dt:after { content: " : "; width: 0.5em; height: auto; margin-left: 0.5em; display: block; float: right; } .fmv5_footnote dt { width: 30px; } .fmv5_footnote dt.w_0 { width: 0px; } .fmv5_footnote dt.w_0:after { content: none; } .fmv5_footnote dd { width: calc(100% - 30px); } .fmv5_footnote.diff-numnone dt:after { margin-left: 0; } .fmv5_footnote.diff-numnone dt { width: 25px; } .fmv5_footnote.diff-numnone dd { width: calc(100% - 25px); } /* .cstmMdl */ .cstmMdlImg { position: relative; width: 100%; background: url(/overseas/hk/zh/uh/1907/images/uh_feature_custom.png) no-repeat 50% 0 / 770px; } .cstmMdlImg:before { content: ""; display: block; padding-top: 600px; } .cstmMdlTxt { margin-bottom: 1.8rem; margin-top: 0; font-size: 160%; width: 96%; } /*#more1 .func_ttl h4:before{ background:url(/overseas/hk/zh/func/1907/images/icon_01-01.png) no-repeat;}*/ #more3 .func_ttl h4:before { background: url(/overseas/hk/zh/uh/1907/images/icon46x46_nokanakey.png) no-repeat; } #more5 .func_ttl h4:before { background: url(/overseas/hk/zh/uh/1907/images/icon46x46_custommaidplus.png) no-repeat; } #more6 .func_ttl h4:before { background: url(/overseas/hk/zh/uh/1907/images/icon46x46_warrant.png) no-repeat; } #more7 .func_ttl h4:before { background: url(/overseas/hk/zh/uh/1907/images/icon46x46_privacy.png) no-repeat; } /* more7_flex */ .more7_flex { display: flex; align-items: flex-end; justify-content: space-around; } .more7_flex p { margin: 0 auto 30px; font-size: 130%; } .more7_flex_item { width: 50%; align-self: flex-end; } @media screen and (max-width:950px) { .more7_flex { display: block; } .more7_flex_item { width: 90%; margin: 0 auto; } } @media screen and (max-width:950px) { .cstmMdlImg { background-size: 105%; } .cstmMdlImg:before { padding-top: 80%; } } @media screen and (min-width:769px) { #globalNaviArea > .globalNaviBlock, #globalNaviArea > .globalNaviBlock ul.menu { width: 100%; max-width: 980px; } #header .headertop, section > div { padding-bottom: 0; padding-top: 0; } #site-nav.nav-fixed .nav-w, section > div { padding-top: 0; } #globalNaviArea .globalNavi:hover > .menuListBlock, #location, img.block-img { display: block; } #feature-1, #header { min-height: 1px; } #feature-1 h1 { text-align: left; margin-top: 120px; } #feature-1 div.logoBox { position: relative; width: 980px; margin: 0 auto; } #feature-1 div.logoBox > img { position: absolute; top: 14px; left: 18px; } @media screen and (max-width:980px) { #feature-1 div.logoBox > img { left: 10px; } } #feature-1 #lead, #header, #site-nav, section p { margin-bottom: 0; } #nav-list, #pagetop { background-color: #f5f5f5; background-image: -webkit-linear-gradient(top, #f5f5f5 0, #ddd 100%); } h1, h2, h3, h4, h5, h6 { font-size: 140%; } h2, h4, h5, h6 { font-size: 330%; letter-spacing: -1px; letter-spacing: -.1rem; font-weight: normal; } h3 { font-size: 250%; letter-spacing: -1px; letter-spacing: -.1rem; font-weight: normal; } img.block-img.left { margin-right: auto; } img.block-img.center { margin-left: auto; margin-right: auto; } img.block-img.right { margin-left: auto; } figure > figcaption { position: absolute; bottom: 0; left: 35%; font-size: 120%; font-weight: 300; color: #666; } section p { font-size: 180%; line-height: 1.8; text-align: justify; text-justify: inter-ideograph; } section .container > .flex-box > div:first-child, section .container > .flex-box > div:last-child { width: 50%; } #header { border: 0; box-shadow: none; background-image: none; } #header #corporatesymbol img { max-width: none; } #feature-1 .container:last-child, #site-nav #site-nav-menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; } #globalNaviArea .globalNavi:hover > .menuListBlock td, #globalNaviArea .globalNavi:hover > .menuListBlock th { font-size: 14px; font-size: 1.4rem; line-height: 25px; line-height: 2.5rem; text-align: center; } #globalNaviArea .globalNavi:hover > .menuListBlock li { font-size: 14px; font-size: 1.4rem; line-height: 25px; line-height: 2.5rem; } #globalNaviArea .globalNavi:hover > .menuListBlock a:link { color: #039; } #globalNaviArea .globalNavi:hover > .menuListBlock a:visited { color: #609; } #site-nav #site-nav-headline { display: block; position: static; padding: 0; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } #site-nav #site-nav-headline h1, #site-nav #site-nav-headline h2, #site-nav #site-nav-headline h3, #site-nav #site-nav-headline h4, #site-nav #site-nav-headline h5, #site-nav #site-nav-headline h6 { text-align: center; } #site-nav #site-nav-headline button { display: none; } #site-nav #site-nav-menu { position: static; padding: 0; min-width: inherit; -webkit-box-flex: 5; -webkit-flex: 5; -ms-flex: 5; flex: 5; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #site-nav #site-nav-menu li { font-size: 140%; color: #666; background-image: none; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; border-bottom: 0 none; border-left: 1px solid #d1d1d1; } #site-nav #site-nav-menu li:first-child { border-top-color: transparent; } #site-nav #site-nav-menu li:last-child { border-bottom-color: transparent; } #site-nav #site-nav-menu li:after { position: static; content: ""; } #site-nav #site-nav-menu li:hover:after { color: #000; text-shadow: 3px 2px 8px #ccc; width: 100%; } #site-nav #site-nav-menu a { display: inline-block; font-weight: 200; color: #999; padding: 0; } #site-nav #site-nav-menu a:hover { text-decoration: none; } #site-nav #site-nav-menu a:hover:after { font-weight: 300; color: #000; border-bottom: .2rem solid #000; width: 100%; } #site-nav #site-nav-menu a:after { content: attr(data-text); position: absolute; width: 0; height: 100%; overflow: hidden; top: 0; left: 0; color: transparent; -webkit-transition: color .3s linear .2s, border .3s linear 0s; transition: color .3s linear .2s, border .3s linear 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-bottom: .2rem solid transparent; } #site-nav .container > div { height: 40px; padding: 0 10px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } #site-nav .container.nav-w { width: 980px; } #location { background: #f7f7f7; border: 1px solid #eee; padding: 0; margin-bottom: 15px; text-align: left; } #location ol { padding: 7px 10px; margin: 0; list-style: none; font-size: 130%; } #location ol.location-inside { font-weight: 400; } #location li { display: inline; margin: 0 2px 0 0; line-height: 1.3; } #location li a { margin-right: 2px; } #location li a:active, #location li a:link, #location li a:visited { margin-right: 2px; text-decoration: none; } #location li a:link { color: #003399; } #location li a:hover { margin-right: 2px; text-decoration: underline; } #productPage a:active { color: #cc3300; } #feature-1 #lead { width: auto; margin-top: 120px; font-size: 720%; line-height: .8; } #feature-1 .respon-img.right { width: auto; margin-right: 0; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); /* margin-left: -60px;*/ } #feature-3 { margin-bottom: 0; background: url(/overseas/hk/zh/uh/2011/images/uh_feature_02.png) no-repeat center top; } #feature-3 .container .flex-box { height: 770px; } #feature-3 .container .box { height: 840px; display: block; position: relative; } #feature-3 .container .box .lead { width: 40%; position: absolute; top: 15%; right: 5%; } #feature-1 .flex-box > div:first-child { /* -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; */ z-index:5; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; /*ustify-content:flex-start;*/ justify-content: space-between; padding: 0; margin-right: -10%; width: 40.36%; text-align: left; } #feature-1 .flex-box > h2.ahc2_title { margin: 0; max-width: none; } #feature-1 .flex-box > div:last-child { /* width:430px; */ padding: 0; width: 74.49%; margin-left: -5%; } #feature-1 .flex-box > div:last-child figure { margin: 0; } #feature-1 .ytb { max-width: 650px; } #feature-3.effect img.pc { opacity: 0; } #feature-3 h3, #feature-3 h4, #feature-3 h5, #feature-3 h6 { margin-top: 0; margin-bottom: 0; text-align: center; } #feature-3 img.pc { position: absolute; top: -110px; left: -71px; opacity: 1; } #feature-3 .container .flex-box > div:last-child { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #feature-2 p { margin-top: 0; margin-bottom: 10px; } #feature-2 .flex-box { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; /*height:688px;*/ height: 470px; } #feature-2 .flex-box > div:first-child figure { width: 90%; } #feature-2 .flex-box > div:first-child figure img { display: block; max-width: 70%; height: auto; margin: 4rem auto 0; } #feature-2 .flex-box > div:last-child:before, #feature-4 .flex-box > div:last-child:before { display: inline; } #feature-2 .flex-box > div:last-child { width: 50%; } #feature-2 .flex-box > div:last-child figure img { width: auto; top: 12px; top: 1.2rem; right: 0; } #feature-4.effect .flex-box > div:last-child figure img:first-child { opacity: 1; } #feature-4.effect .flex-box > div:last-child figure img:last-child { opacity: 0; } #feature-4 { margin-bottom: 0; } #feature-4 p { margin-top: 0; } #feature-4 .flex-box > div:last-child { width: 50%; } #feature-4 .flex-box > div:last-child figure img { top: 84px; top: 8.4rem; } #feature-4 .flex-box { height: 735px; } #feature-5 p { margin-top: 0; margin-bottom: 10px; } #feature-5 .flex-box { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; /*height:800px;*/ height: 300px; } #feature-5 .flex-box > div:first-child figure { width: 90%; } #feature-5 .flex-box > div:first-child figure img { display: block; max-width: 70%; height: auto; margin: 4rem auto 0; } #feature-5 .flex-box > div:last-child:before, #feature-4 .flex-box > div:last-child:before { display: inline; } #feature-5 .flex-box > div:last-child { width: 50%; } #feature-5 .flex-box > div:last-child figure img { width: auto; top: 12px; top: 1.2rem; right: 0; } #feature-6 > .clearfix, #feature-6 > .container { width: 100%; margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #feature-6 > .virtual-p { max-width: 1200px; } #feature-6 > .virtual-p:before { padding-top: 78%; } #feature-6 h2, #feature-6 h3, #feature-6 h4, #feature-6 h5, #feature-6 h6 { margin: 0; width: auto; font-weight: 600; letter-spacing: .1rem; } #feature-6 img.respon-img { max-width: 90%; max-height: 640px; max-height: 64rem; width: auto; height: auto; } #feature-6 .container { margin-bottom: 0; } #feature-6 .flex-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } #feature-6 .flex-box > div:first-child { padding-top: 50px; padding-bottom: 20px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #nav-list div, #sns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; } #feature-6 .flex-box > div:last-child { width: 100%; } #feature-6 .btn-1 { margin: 0; -webkit-animation: none; animation: none; } #sns { display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 80px; } #sns .flex-box { width: 16%; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } #nav-list .nav-w, .container, .container.nav-w { width: 980px; } #nav-list { padding-top: 22px; padding-bottom: 25px; border-top: 1px solid #d2d2d2; background-image: linear-gradient(to bottom, #f5f5f5 0, #ddd 100%); } #nav-list div { display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } #nav-list dl > dt { display: block; border-top: 0 none; border-bottom: 1px solid #bbb; padding: 0 0 5px 9px; } #nav-list dl > dt .sp-list-btn { display: none; } #nav-list dl > dd { padding: 3px 0 0 9px; } #nav-list dl > dd > ul > li { position: static; margin-top: 5px; border-top: 0 none; padding: 0; line-height: 1.9; } #nav-list dl > dd > ul > li:after { position: static; content: ""; } #nav-list dl > dd > ul > li > a { text-decoration: none; padding: 0; color: #2f3e8d; } #nav-list dl > dd > ul > li > a:hover { text-decoration: underline; } .product_wrap { max-width: 980px; margin: 0 auto 20px; padding: 0 60px; } .product_wrap p { text-align: right; padding: 0; } .product_wrap p a { font-size: 14px; text-decoration: none; padding: 10px 10px; color: #FFF; background: #666; border-radius: 6px; transition: 0.3s all ease-in-out 0s; } .product_wrap p a:hover { opacity: 0.7; } #pagetop { border-top: 0 none; height: 0; background-image: linear-gradient(to bottom, #f5f5f5 0, #ddd 100%); } #pagetop p { bottom: 10px; } #pagetop.fixed p { bottom: 50px; } #creditline { padding-top: 8px; padding-bottom: 18px; border-top-color: #c2c2c2; } #creditline p { font-size: 130%; } #creditline .flex-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 10px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #creditline .flex-box div:first-child { display: inherit; } #creditline .flex-box div:first-child ul, .flex-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; } #creditline .flex-box div:first-child ul { display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0; padding-left: 0; list-style-type: none; font-size: 130%; } #creditline .flex-box div:first-child ul li { margin-right: 18px; } #creditline .flex-box div:first-child ul li:last-child { margin-right: 0; } #creditline .flex-box div:first-child ul li a { color: #fff; text-decoration: none; } #creditline .flex-box div:first-child ul li a:hover { text-decoration: underline; } #creditline .flex-box div:last-child { margin-left: auto; } .pc-inline { display: inline; } .pc { display: block; } .sp, .sp-inline { display: none; } .virtual-p { background-size: cover; } .flex-box { display: flex; -webkit-box-pack: center; /*-webkit-justify-content:center;*/ -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .flex-box > div:first-child { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .float-left { float: left; } .float-right { float: right; } } @media screen and (max-width:768px) { figure { margin: 1em 10px; } #feature-1 .type_name { font-size: 15px; width: 95%; } .sp_disNon { display: none !important; } #feature-1 h1.ahc2_title { text-align: center; margin-top: 30px; } #feature-1 h1.ahc2_title img { width: 85%; display: block; margin-left: auto; margin-right: auto; } #feature-1 h1 img + img { margin-top: 5%; } #feature-1 .link_youTube { margin-bottom: 3rem; } #feature-1 img.respon-img.pc { display: none; } img.respon-img { display: block; max-width: 90%; height: auto; } #feature-2 .flex-box > div:last-child figure img:last-child { position: static; } #feature-2 .flex-box > div:last-child:before { padding-top: 0; } #feature-3 .container .flex-box figure { margin-bottom: 2em; width: 100%; } #feature-3 .container .flex-box > div:last-child img { width: auto; position: static; width: 100%; } section #feature-3 .container .box .lead p { margin-bottom: 0rem; } #feature-4 .flex-box > div:last-child figure img { width: 100%; } #feature-5 .flex-box > div:last-child figure img { position: static; } #feature-5 .flex-box > div:last-child:before { padding-top: 0; } img.respon-img { display: block; max-width: 90%; height: auto; } img.respon-img.left { margin-right: auto; } img.respon-img.center { margin-left: auto; margin-right: auto; } img.respon-img.right { margin-left: auto; } .container.link_youTube figure { margin: 0; } } @media screen and (min-width:460px) { .cstmMdlTxt { width: 450px; text-align: center; } } @media screen and (max-width:479px) { #header #headerrightarea { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } #feature-3 .feature_accordion--wrap { margin-top: 0; } @media screen and (min-width: 769px) { #feature-3 .feature_accordion--wrap { margin-top: -82px; min-height: 82px; position: relative; } /* .txt_func */ h5.ttl_lv3.custom { width: 89%; } } @-webkit-keyframes btn-shadow { from, to { box-shadow: 0 0 0 #transparent; } 25%, 75% { box-shadow: 0 0 2rem #bcbcbc; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50%, 60% { box-shadow: 0 0 2rem #585858; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } ; } @keyframes btn-shadow { from, to { box-shadow: 0 0 0 #transparent; } 25%, 75% { box-shadow: 0 0 2rem #bcbcbc; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50%, 60% { box-shadow: 0 0 2rem #585858; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } ; } @-webkit-keyframes feature-1-text-effect { from { -webkit-transform: scale(500); transform: scale(500); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(10); transform: scale(10); opacity: .2; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @keyframes feature-1-text-effect { from { -webkit-transform: scale(500); transform: scale(500); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(10); transform: scale(10); opacity: .2; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @-webkit-keyframes feature-1-img-effect { from { -webkit-transform: scale(500); transform: scale(500); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @keyframes feature-1-img-effect { from { -webkit-transform: scale(500); transform: scale(500); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @-webkit-keyframes feature-3-img-effect { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(1); transform: scale(1); opacity: .8; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @keyframes feature-3-img-effect { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(1); transform: scale(1); opacity: .8; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @-webkit-keyframes feature-3-img-effect-2 { from { -webkit-transform: translateX(20rem); transform: translateX(20rem); opacity: 0; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: translateX(20rem); transform: translateX(20rem); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } ; } @keyframes feature-3-img-effect-2 { from { -webkit-transform: translateX(20rem); transform: translateX(20rem); opacity: 0; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: translateX(20rem); transform: translateX(20rem); opacity: 0; } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } ; } @-webkit-keyframes feature-text-effect { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(1); transform: scale(1); opacity: .2; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @keyframes feature-text-effect { from { -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } 90% { -webkit-transform: scale(1); transform: scale(1); opacity: .2; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } ; } @-webkit-keyframes feature-text-effect-ltr { from { -webkit-transform: translateX(-20rem); transform: translateX(-20rem); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } ; } @keyframes feature-text-effect-ltr { from { -webkit-transform: translateX(-20rem); transform: translateX(-20rem); opacity: 0; -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1); animation-timing-function: cubic-bezier(0, 0, .2, 1); } to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } ; } @-webkit-keyframes anime-opacity { from { opacity: 0; } to { opacity: 1; } ; } @keyframes anime-opacity { from { opacity: 0; } to { opacity: 1; } ; } @-webkit-keyframes anime-scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @keyframes anime-scale { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @-webkit-keyframes anime-scaleX { from { -webkit-transform: scaleX(0); transform: scaleX(0); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } ; } @keyframes anime-scaleX { from { -webkit-transform: scaleX(0); transform: scaleX(0); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } ; } @-webkit-keyframes anime-scaleY { from { -webkit-transform: scaleY(0); transform: scaleY(0); } to { -webkit-transform: scaleY(1); transform: scaleY(1); } ; } @keyframes anime-scaleY { from { -webkit-transform: scaleY(0); transform: scaleY(0); } to { -webkit-transform: scaleY(1); transform: scaleY(1); } ; } @-webkit-keyframes anime-scale3d { from { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); -webkit-transform-origin: 25% 75%; transform-origin: 25% 75%; } to { -webkit-transform: scale3d(1, 1, .1); transform: scale3d(1, 1, .1); } ; } @keyframes anime-scale3d { from { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); -webkit-transform-origin: 25% 75%; transform-origin: 25% 75%; } to { -webkit-transform: scale3d(1, 1, .1); transform: scale3d(1, 1, .1); } ; } @-webkit-keyframes anime-scale-2 { from { -webkit-transform: scale(0); transform: scale(0); } 90% { -webkit-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @keyframes anime-scale-2 { from { -webkit-transform: scale(0); transform: scale(0); } 90% { -webkit-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @-webkit-keyframes anime-scale-3 { from { -webkit-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @keyframes anime-scale-3 { from { -webkit-transform: scale(1.2); transform: scale(1.2); } to { -webkit-transform: scale(1); transform: scale(1); } ; } @-webkit-keyframes anime-rotate { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } ; } @keyframes anime-rotate { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } ; } @-webkit-keyframes anime-rotateX { from { -webkit-transform: rotateX(0); transform: rotateX(0); } to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } ; } @keyframes anime-rotateX { from { -webkit-transform: rotateX(0); transform: rotateX(0); } to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } ; } @-webkit-keyframes anime-rotateY { from { -webkit-transform: rotateY(0); transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } ; } @keyframes anime-rotateY { from { -webkit-transform: rotateY(0); transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } ; } @-webkit-keyframes anime-rotateXYZ { from { opacity: 0; -webkit-transition: rotateX(45deg) rotateY(90deg) rotateZ(180deg); transition: rotateX(45deg) rotateY(90deg) rotateZ(180deg); } to { opacity: 1; -webkit-transform: scale(1) rotateX(0) rotateY(0) rotateZ(0); transform: scale(1) rotateX(0) rotateY(0) rotateZ(0); } ; } @keyframes anime-rotateXYZ { from { opacity: 0; -webkit-transition: rotateX(45deg) rotateY(90deg) rotateZ(180deg); transition: rotateX(45deg) rotateY(90deg) rotateZ(180deg); } to { opacity: 1; -webkit-transform: scale(1) rotateX(0) rotateY(0) rotateZ(0); transform: scale(1) rotateX(0) rotateY(0) rotateZ(0); } ; } @-webkit-keyframes anime-skew { from { -webkit-transform: skew(45deg, 45deg); transform: skew(45deg, 45deg); } to { -webkit-transform: skew(0, 0); transform: skew(0, 0); } ; } @keyframes anime-skew { from { -webkit-transform: skew(45deg, 45deg); transform: skew(45deg, 45deg); } to { -webkit-transform: skew(0, 0); transform: skew(0, 0); } ; } @-webkit-keyframes anime-skewX { from { -webkit-transform: skewX(90deg); transform: skewX(90deg); } to { -webkit-transform: skewX(0); transform: skewX(0); } ; } @keyframes anime-skewX { from { -webkit-transform: skewX(90deg); transform: skewX(90deg); } to { -webkit-transform: skewX(0); transform: skewX(0); } ; } @-webkit-keyframes anime-skewY { from { -webkit-transform: skewY(90deg); transform: skewY(90deg); } to { -webkit-transform: skewY(0); transform: skewY(0); } ; } @keyframes anime-skewY { from { -webkit-transform: skewY(90deg); transform: skewY(90deg); } to { -webkit-transform: skewY(0); transform: skewY(0); } ; } @-webkit-keyframes anime-transleteX-200to0 { from { -webkit-transform: translateX(200px); transform: translateX(200px); } to { -webkit-transform: translateX(0); transform: translateX(0); } ; } @keyframes anime-transleteX-200to0 { from { -webkit-transform: translateX(200px); transform: translateX(200px); } to { -webkit-transform: translateX(0); transform: translateX(0); } ; } @-webkit-keyframes anime-translate3d--300to0 { from { -webkit-transform: translate3d(-300px, 0, -30px); transform: translate3d(-300px, 0, -30px); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } ; } @keyframes anime-translate3d--300to0 { from { -webkit-transform: translate3d(-300px, 0, -30px); transform: translate3d(-300px, 0, -30px); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } ; } @-webkit-keyframes anime-skewX-45degto0-rotateX--45degto0 { from { -webkit-transform: skewX(45deg) rotateX(-45deg); transform: skewX(45deg) rotateX(-45deg); } to { -webkit-transform: skewX(0) rotateX(0); transform: skewX(0) rotateX(0); } ; } @keyframes anime-skewX-45degto0-rotateX--45degto0 { from { -webkit-transform: skewX(45deg) rotateX(-45deg); transform: skewX(45deg) rotateX(-45deg); } to { -webkit-transform: skewX(0) rotateX(0); transform: skewX(0) rotateX(0); } ; } @-webkit-keyframes anime-nanika { from { -webkit-transform: rotateX(45deg) translate(0, 0); transform: rotateX(45deg) translate(0, 0); } to { -webkit-transform: rotateX(45deg) translate(0, -10000px); transform: rotateX(45deg) translate(0, -10000px); } ; } @keyframes anime-nanika { from { -webkit-transform: rotateX(45deg) translate(0, 0); transform: rotateX(45deg) translate(0, 0); } to { -webkit-transform: rotateX(45deg) translate(0, -10000px); transform: rotateX(45deg) translate(0, -10000px); } ; } @-webkit-keyframes anime-pagetop { from, to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: .8; -webkit-transform: translateY(-100px); transform: translateY(-100px); } ; } @keyframes anime-pagetop { from, to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60% { opacity: .8; -webkit-transform: translateY(-100px); transform: translateY(-100px); } ; } @-webkit-keyframes anime-shine { from { -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0); background: rgba(255, 255, 255, .5); } to { -webkit-transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 150%, 0); transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 150%, 0); background: rgba(255, 255, 255, .5); } ; } @keyframes anime-shine { from { -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0); transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -120%, 0); background: rgba(255, 255, 255, .5); } to { -webkit-transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 150%, 0); transform: rotate3d(0, 0, 1, -25deg) translate3d(0, 150%, 0); background: rgba(255, 255, 255, .5); } ; } @-webkit-keyframes anime-blur-rotate { from { -webkit-filter: grayscale(30%) blur(10px); filter: grayscale(30%) blur(10px); -webkit-transform: rotateX(-90deg) rotateY(-45deg); transform: rotateX(-90deg) rotateY(-45deg); } to { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transform: rotateX(0) rotateY(0); transform: rotateX(0) rotateY(0); } ; } @keyframes anime-blur-rotate { from { -webkit-filter: grayscale(30%) blur(10px); filter: grayscale(30%) blur(10px); -webkit-transform: rotateX(-90deg) rotateY(-45deg); transform: rotateX(-90deg) rotateY(-45deg); } to { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transform: rotateX(0) rotateY(0); transform: rotateX(0) rotateY(0); } ; } /* ------------------------------------------------------------------ プロモーションページ旧機種化用 ------------------------------------------------------------------ */ /* Header */ #header { margin: 0 auto 1.5rem; } #header div.headertop { border: none; padding: 0px 7px; } /* Fujitsu logo */ #header div#corporatesymbol { margin-top: -1px; } #header div#corporatesymbol p { margin: 0px; line-height: 1; } #header div#corporatesymbol img { vertical-align: bottom; } #header .headerrightarea { margin: 8px 11px 7px 0; } /* FMWORLD logo */ #header div#headerrightarea { padding-top: 2px; } /* AzbyClub logo */ #header div#azbylogo { width: 626px; } #header div#azbylogo p { margin: 0 0 5px; line-height: 1; text-align: right; } #header div#azbylogo img { vertical-align: bottom; } /* azbynavi */ #header #azbynavi { width: 626px; font-size: 120%; } #header #azbynavi ul { float: right; margin: 0px; padding: 0px; list-style: none; } #header #azbynavi ul li { float: left; margin: 0px 0px 0px 10px; padding: 0px 0px 0px 14px; background: url(/images/common/images/head-icon-arrow.gif) no-repeat left 0.1em; } #header #azbynavi ul li a:link { color: #003399; text-decoration: none; } #header #azbynavi ul li a:hover { text-decoration: underline; } #header #azbynavi ul li a:visited { color: #660099; } #header #azbynavi ul li a:active { color: #cc3300; } /* 旧機種コメント */ .lyt-top p.kakokisyu { font-size: 120%; text-align: left; } /* azbyfooter調整 */ .contentsarea.pPage { width: 980px; margin: 0 auto; font-size: 130%; margin-bottom: 35px; } .contentsarea.pPage a:link { color: #003399; text-decoration: none; } .contentsarea.pPage a:hover { text-decoration: underline; } .contentsarea.pPage a:visited { color: #660099; } .contentsarea.pPage a:active { color: #cc3300; } @media print, screen and (min-width:769px) { /* header調整 */ .header_sp { display: none; } /* メインビジュアル位置調整 */ .lyt-top .flex-box { height: 535px; } .lyt-top .bg1 { height: 700px; } #feature-1 .bg1 { background-position: center 70px; } } @media print, screen and (max-width:768px) { /* header調整 */ #header { min-height: 40px; } #corporatesymbol_sp { position: absolute; left: 5px; top: 3px; } #sitelogo_sp { text-align: center; padding: 10px 0 0 0; } #sitelogo_sp a img { margin-top: -5px; } } /* ------------------------------------------------------------------ プロモーションページ旧機種化用 用 ------------------------------------------------------------------ */ .lyt-top { width: 100%; max-width: 980px; margin: 0 auto; }