@charset "UTF-8"; /*reset ------------------------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} ul,li{list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; text-decoration:none;} table {border-collapse:collapse; border-spacing:0;} input, select, img {vertical-align:middle;} hr {display:block; height:1px; border:0; margin:1em 0; padding:0; border-top:1px solid #E6E6E6;} html {font-size:62.5%;} body {font-size:14px; line-height:1.6; color:#333333; font-family: "Noto Sans JP", "メイリオ", "Meiryo", sans-serif; word-break: break-all;} a {color:#15a3c2; outline:none;} a:hover {color:#303030;} h1 {font-size:26px; font-weight:bold;} h2 {font-size:26px; font-weight:bold;} button {padding:0; outline:none; border:none; background:none; font:inherit; color:inherit; cursor:pointer;} /*root --------------------------*/ :root{ --color_bg_gr_black:linear-gradient(45deg, rgba(3,2,2,1) 50%, rgba(30,28,28,1) 50%); --color_bg_gr_white:linear-gradient(45deg, rgba(230,229,226,1) 50%, rgba(235,234,232,1) 50%); --color_bg_gr_blue:linear-gradient(45deg, rgba(104,196,202,1) 50%, rgba(130,207,212,1) 50%); --color_bg_gr_green:linear-gradient(45deg, rgba(175,210,76,1) 50%, rgba(190,219,105,1) 50%); --color_bg_gr_pink:linear-gradient(45deg, rgba(254,69,91,1) 50%, rgba(254,99,119,1) 50%); } /*common --------------------------*/ section * {box-sizing:border-box;} section.wrap {width:100%;} section.wrap.color01 {background:#f3f9fc;} section.outer {width:100%; max-width:960px; margin:0 auto; padding:0 10px; box-sizing:border-box;} section.inner {padding:96px 0;} section.inner.h_s {padding:72px 0;} section.inner.h_xs {padding:48px 0;} section.inner.h_xxs {padding:24px 0;} section.inner .compo_group_title h1.title {margin-top:0px;} section.inner .compo_group_title h2.title {margin-top:0px;} h1.title {display:flex; align-items:center; gap:24px; width:100%; max-width:780px; margin:0 auto 64px; padding:0 24px; box-sizing:border-box; font-weight:bold; font-size:26px; white-space:nowrap;} h1.title::before, h1.title::after {display:block; width:100%; height:1px; background:#333; content:"";} h2.title {display:flex; align-items:center; gap:24px; width:100%; max-width:780px; margin:0 auto 64px; padding:0 24px; box-sizing:border-box; font-weight:bold; font-size:26px; white-space:nowrap;} h2.title::before, h2.title::after {display:block; width:100%; height:1px; background:#333; content:"";} .master_pc_view {display:block;} .master_sp_view {display:none;} .compo_group_title {margin-bottom:48px; font-size:16px;} .compo_group_title h1.title {margin-top:96px;} .compo_group_title h2.title {margin-top:96px;} .compo_group_title h2.lead, .compo_group_title h3.lead, .compo_group_title h4 {width:100%; max-width:620px; margin:0 auto 16px; font-size:16px; text-align:center;} .compo_group_title p {width:100%; max-width:620px; margin:0 auto; font-size:14px; text-align:justify;} .compo_group_title.light {color:#fff;} .compo_group_title.light h1.title::before, .compo_group_title.light h1.title::after {background:#fff;} .compo_group_title.light h2.title::before, .compo_group_title.light h2.title::after {background:#fff;} .compo_linkarrow {color:#15a3c2;} .compo_linkarrow::after {display:inline-block; transform:translateY(2px); width:14px; height:14px; margin-left:4px; background:url(/img/button/txtlink.png) right center no-repeat; content:"";} .compo_linkarrow:hover::after {background:url(/img/button/txtlink_on.png);} ul.compo_list {display:flex; flex-wrap:wrap; gap:48px 20px;} ul.compo_list.gap20 {gap:20px;} ul.compo_list > li {width:calc(100% / 3 - 14px); background:#fff; font-size:14px;} ul.compo_list > li .pic a {display:block; transition:all 0.3s ease-in-out;} ul.compo_list > li .pic a:hover {opacity:0.5;} ul.compo_list > li .pic img {width:100%;} ul.compo_list > li .text {padding:20px 4px 0; text-align:justify;} ul.compo_list > li .text h5 {margin-bottom:12px; font-weight:bold; font-size:14px; text-align:center;} ul.compo_list > li .text .link {margin-top:12px; text-align:right;} .compo_case.case_bg_white section.wrap.color01 {background:#fff;} .compo_caselist {padding:96px 0;} .compo_caselist .compo_group_title h1.title {margin-top:0;} .compo_caselist .compo_group_title h2.title {margin-top:0;} .compo_caselist .wmax.fliparea {border:none; background:none;} .compo_caselist .wmax.fliparea .fliplist {padding:0;} .compo_caselist .wmax.fliparea .fliplist .pagetitle {display:none;} .compo_caselist .wmax.fliparea .fliplist .viewport .slick {padding:0;} .compo_slick {} .compo_slick section.outer {max-width:100%; padding:0 0;} .compo_slick .slide_items {position:relative; width:100%; height:100%;} .compo_slick .slide_items img {width:100%; object-fit:cover;} .compo_slick .slide_items a {display:block; padding:0 10px; color:#898989; cursor:grab;} .compo_slick .slide_items a:active {cursor:grabbing;} .compo_slick .slide_items a strong {display:block; margin-top:10px; font-size:12px; font-weight:normal; text-align:center; line-height:1.2;} .compo_slick .slide_items .slick-arrow {opacity:0.6; position:absolute; top:calc(50% - 40px); z-index:1; width:40px; padding:30px 15px; border:none; text-indent:-9999px; cursor:pointer;} .compo_slick .slide_items .slick-arrow.slick-prev {left:0; background: #333 url(/img/button/arrow_left.png) center center no-repeat; border-radius:0 4px 4px 0;} .compo_slick .slide_items .slick-arrow.slick-next {right:0;background: #333 url(/img/button/arrow_right.png) center center no-repeat; border-radius:4px 0 0 4px;} .area_button {margin-top:64px;} .material-symbols-rounded {vertical-align: middle; margin:0 5px 0 0;} /*header ------------------------------------------------------------------------------*/ header * {box-sizing:border-box;} header {position:fixed; top:0; left:0; z-index:9999; width:100%;} header section {width:100%; max-width:1032px; margin:0 auto; padding:0 48px; box-sizing:border-box;} header .top {display:flex; align-items:center; height:32px; border-bottom:1px solid #f3f9fc; background:#f3f9fc;} header .top > section {display:flex; justify-content:space-between; font-size:10px;} header .top > section .slogan {margin:0; padding:0; font-weight:normal; font-size:10px !important;} header .top > section .slogan strong {font-weight:normal;} header .top > section ul {display:flex; align-items:center; gap:24px;} header .top > section ul li {} header .top > section ul li a {color:#333333;} header .middle {display:flex; align-items:center; height:70px; border-bottom:1px solid #f3f9fc; background:#f3f9fc;} header .middle > section {display:flex; justify-content:space-between; align-items:center;} header .middle > section .logo {height:40px;} header .middle > section .logo a {display:block; height:100%;} header .middle > section .logo a img {height:100%;} header .middle > section > ul {display:flex; align-items:center; gap:10px;} header .middle > section > ul > li:nth-child(n+2) {padding-left:24px; border-left:1px solid #e6e6e6;} header .middle > section > ul > li a {display:block;} header .middle > section > ul > li.menu {display:none;} header .middle section ul li.freedial {display:none;} header .middle section ul li.contact_v2 a {display: flex; color: #fff; background: #15A3C2; outline:1px solid #15A3C2; border-radius: 50px; padding: 10px 24px; font-size: 16px; font-weight: 500; transition:all 0.3s ease-out;box-sizing: border-box;} header .middle section ul li.contact_v2 a:hover {background:#23D6FD; outline:1px solid #23D6FD; color: #fff;} header .middle section ul li.contact_v2 a img {filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(2%) hue-rotate(255deg) brightness(107%) contrast(100%);} header .bottom {height:40px; border-bottom:1px solid #d1edf4; box-sizing:border-box; background:#f3f9fc; color:#333333; font-size:14px;} header .bottom a {color:#000000dd;} header .bottom a:hover {color:#000000dd;} header .bottom > section {display:flex; justify-content:space-between; align-items:center; height:100%;} header .bottom > section nav {height:100%;} header .bottom > section nav ul.category {display:flex; align-items:center; gap:0px; height:100%;} header .bottom > section nav ul.category > li {height:100%;} header .bottom > section nav ul.category li.acc {position:static;} header .bottom > section nav ul.category li .title, header .bottom > section nav ul.category li.acc .acc_title {height:100%;} header .bottom > section nav ul.category li .title a, header .bottom > section nav ul.category li.acc .acc_title a {display:flex; align-items:center; height:100%; padding:0 16px; line-height:1;} header .bottom > section nav ul.category li .title a:hover, header .bottom > section nav ul.category li.acc .acc_title a:hover {background:#e0f2f7;} header .bottom > section nav ul.category li.acc .acc_title a span:first-child {margin-right:4px;} header .bottom > section nav ul.category li.acc .acc_title a::after {font-family: 'Material Icons'; font-size:20px; content:"\e5c5"; transition:all 0.3s ease-out;} header .bottom > section nav ul.category li.acc.hover_show .acc_title a::after {transform:rotate(-180deg);} header .bottom > section nav ul.category li.acc .acc_title .acc_icon {display:none;} header .bottom > section nav ul.category li.acc .acc_contents {display:none; position:absolute; left:0; width:100%; background:#e0f2f7; border-bottom: 1px solid #c1e5ef;} header .bottom > section nav ul.category li.acc.hover_show .acc_contents {display:block;} header .bottom > section nav ul.category li.acc .acc_contents .outer {padding:32px 10px 48px;} header .bottom > section nav ul.category li.acc .acc_contents .outer .ul_title {display:flex; align-items:center; width:fit-content; margin:0 0 12px 12px; font-size:16px; font-weight:bold;} header .bottom > section nav ul.category li.acc .acc_contents .outer .ul_title::after {margin-left:4px; font-family:'Material Icons'; font-size:24px; content:"\e5cc";} header .bottom > section nav ul.category li.acc .acc_contents .outer ul {display:flex; flex-wrap:wrap; align-content:stretch; width:100%; box-sizing:border-box; border:none;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li {width:calc(100% / 6);} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a {display:block; height:100%; padding:12px 12px 8px;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a:hover {background:#78bccb; color:#fff; filter:brightness(104%);} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a img {width:100%; margin-bottom:8px;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a span {display:block; font-size:12px; font-weight:bold; line-height:1.3;} header .bottom > section .box_right ul.sns {display:flex; align-items:center;} header .bottom > section .box_right ul.sns li a {display:flex; justify-content:center; align-items:center; width:36px; height:40px;} header .bottom > section .box_right ul.sns li a img {width:24px;} /*footer ------------------------------------------------------------------------------*/ footer {width:100%; background:#296583; color:#fff;} footer * {box-sizing:border-box;} footer a {color:#ffffffa1;} footer a:hover {color:#fff;} footer > section {width:100%; max-width:1032px; margin:0 auto; padding:96px 48px 48px; } footer > section > ul {display:flex; gap:24px;} footer > section > ul > li {width:calc(100% / 6);} footer > section > ul > li.col2 {flex-grow:1;} footer > section > ul > li dl {width:100%; font-size:12px;} footer > section > ul > li dl dt {margin-bottom:8px; padding-bottom:4px; border-bottom:1px solid #ffffff6e;} footer > section > ul > li dl dd {font-size:12px;} footer > section > ul > li dl dd ul li a {display:inline-block; padding:2px 0;} footer > section > ul > li dl dd ul li a.icon_blank::after {display:inline-block; margin-left:4px; font-family: 'Material Icons'; font-size:14px; line-height:1; content:"\e89e"; transform:translateY(3px);} footer > section > ul > li.col2 dl dd ul {display:flex; flex-wrap: wrap;} footer > section > ul > li.col2 dl dd ul li {width:50%;} footer > section .sns {display:flex; justify-content:center; align-items:center; margin-top:48px;} footer > section .sns ul {display:flex; justify-content:center; align-items:center; gap:16px;} footer > section .sns ul li a {display:flex; justify-content:center; align-items:center; gap:24px; width:40px; height:40px;} footer > section .sns ul li a img {width:24px;} footer > section .copyright {margin-top:24px; font-size:10px; text-align:center;} footer > section .copyright p {opacity:0.8;} footer .pagetop {position:fixed; bottom:60px; right:30px; color:#000; cursor:pointer; background:url('/img/button/pagetop.png'); width:60px; height:60px; z-index:1;} footer .pagetop span {display:none;} /*header,footer,container ------------------------------------------------------------------------------*/ #header {width:100%; position:fixed; top:0; left:0; z-index:9999; background:#fff;} .header_container {width:940px; height:80px; padding:0 10px; margin:0 auto;} .header_container a { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header_container a:hover {opacity:0.5;} #header .logo {float:left; padding:0;} #header .logo a {display:block; width:180px; height:80px; background:url('/img/header/logo.png') no-repeat; background-size:auto 80px;} #header .logo strong {display:none;} #header .menu {float:right; padding:20px 0 0 0;} #header .menu ul li {float:left; padding:0 0 0 30px; border-left:1px solid #D6D3CE;} #header .menu ul li:first-child {padding:0 25px 0 0; border-left:none;} #header .menu ul li.catalog a {display:block; background:url('/img/header/catalog.png') no-repeat; width:145px; height:46px;} #header .menu ul li.contact a {display:block; background:url('/img/header/contact.png') no-repeat; width:192px; height:46px;} #header .menu ul li span {display:none;} #header .spmenu {display:none;} #header .navi {display:block; width:100%; height:39px; color:#232323; background:#333333; border-top:1px solid #e6e6e6; font-size:14px;} #header .navi>ul {width:940px; padding:0 10px; margin:0 auto;} #header .navi ul li {float:left; margin:0 5px;} #header .navi ul li a {display:block; color:#CBCBCB; height:39px; line-height:39px; padding:0 8px;} #header .navi ul li a:hover {color:#fff;} #header .navi ul li.agent a {font-size:12px; background:#000; height:25px; line-height:24px; padding:0 10px; margin:7px 0 0 0; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px;} #header .navi ul li.company {display:none;} #header .navi ul li.sns {float:right; margin:0;} #header .navi ul li.sns img {height:18px;} #header .navi ul li.sns div {float:left;} #header .navi ul.sub {display:none; width:368px; position:absolute; background:#4d4d4d; padding:10px; -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:0px 3px 3px rgba(0, 0, 0, 0.4);} #header .navi ul.sub:after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} #header .navi ul.sub li {float:left; width:160px; margin:0 10px;} #header .navi ul.sub li a {color:#AAAAAA !important; background: #4D4D4D !important;} #header .navi ul.sub li a:hover {color:#fff !important;} #home #header .navi ul li.home a, #compo_linkarrow sp_var #header .navi ul li.compo_linkarrow sp_var a, #function #header .navi ul li.function a, #spec #header .navi ul li.spec a, #example #header .navi ul li.example a, #support #header .navi ul li.support a, #portal01 #header .navi ul li.portal a, #portal02 #header .navi ul li.news a, #portal03 #header .navi ul li.faq a, #portal04 #header .navi ul li.marketing a, #agent #header .navi ul li.agent a {color:#fff; background: #565656;} #container {margin-top:142px; min-height:700px;} #footer {position:relative; width:100%; background:#1e1e1e; color:#F7F7F7; font-size:12px;} #footer a {color:#F7F7F7;} #footer .pagetop {position:fixed; bottom:60px; right:30px; color:#000; cursor:pointer; background:url('/img/button/pagetop.png'); width:60px; height:60px; z-index:1;} #footer .pagetop span {display:none;} #footer .footermap {width:960px; padding:100px 0 50px; margin:0 auto;} #footer .footermap ul {display:block; float:left; width: 210px; padding: 0 15px;} #footer .footermap ul li {display:block; float:none; line-height:2;} #footer .footermap ul li strong {display:block; padding: 0 0 5px 0;margin: 0 0 10px 0;border-bottom:1px solid #333333;} #footer .footermap ul li a {color:#898989; display:block;} #footer .footermap ul li a:hover {color:#fff;} #footer .footer_container {display:none;} .contactbox {margin:30px 0;} .contactbox li {float:left; width:31.9%; height:auto; border-left:1px solid #E6E6E6; text-align:center;} .contactbox li:first-child {border:none;} .contactbox li .pic img {width:300px; height:auto;} /*home ------------------------------------------------------------------------------*/ #home .main {margin:20px 0;} #home .main h2 {margin:0 0 30px 0;} #home .main .read {font-size:16px; line-height:1.6;} #home .main .read strong {font-weight:normal;} #home .main .mainimage {} #home .main .mainimage:after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} #home .main .mainimage .image {float:right; margin:-45px 0 0 0;} #home .main .mainimage .contact {float:left; margin:65px 0 0 0; text-align:center;} #home .main .mainimage .contact p {display:inline-block; vertical-align:top; margin:5px;} #home .main .mainimage+p {font-size:16px; text-align:center; margin:0;} #home .main .mainimage+p strong {font-weight:normal;} #home .main dl {margin:30px 0 0 120px;} #home .main dl dt {display:block; float:left; color:#fff; background:#E60024; padding:0 5px; margin:0 5px 0 0; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;} #home .main dl dd {display:block; float:left;} #home .main dl dd strong {font-weight:normal;} .sub {position:relative; background:#fff; padding:40px 0 0 0;} #home .sglite {text-align:center; padding-top:20px;} #home .sglite .photo {position:relative; width:665px; padding-top:30px; margin:0 auto;} #home .sglite .catch {margin:0;} #home .sglite h1 {color:#888888; font-size:90%; font-weight:normal; position:absolute; left:50px; bottom:75px;} #home .demobanner {max-width:820px; margin:40px auto 0px;} #home .demobanner a {display:block; transition:all 0.3s ease-in-out;} #home .demobanner a:hover {opacity:0.5;} #home .demobanner a img {width:100%;} #home .demobanner_sp {display:none;} #home .information {background:#333333; color:#fff; padding:15px; margin:0;} #home .newslist {width:620px; padding:10px 10px 20px; margin:0 auto;} #home .newslist li {display:block;} #home .newslist li a {display:block; padding:3px 0;} #home .newslist li a em {display:table-cell; width:130px; font-style:normal; white-space:nowrap; padding-right:10px; color:#898989; font-size:11px;} #home .newslist li a p {display:table-cell; color:#dbdbdb;} #home .newslist li a span {color:#fff; background:#c80505; font-size:11px; padding:0px 5px 1px 5px; margin-left:3px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px;} #home .newslist li a:hover em, #home .newslist li a:hover p {color:#fff;} #home .information .txtlink a:hover {color:#15a3c2; background-image:url('/img/button/txtlink.png');} #home .function.txtlist li {height:70px;} #home .casio {position:relative; text-align:right; width:940px; margin: -65px auto 0;} #home .portal {margin:0 0 30px 0;} #home .portal ul {display: table;margin: 0 auto;} #home .portal ul li {float:left; background:#fff; width:250px; padding:5px 5px 15px; margin:0 25px;} #home .portal ul li a {display:block; color:#333333;} #home .portal ul li .image {margin:0 0 10px 0; overflow:hidden;} #home .portal ul li .image img {width:100%;} #home .portal ul li em {display:block; font-style:normal; font-size:11px; color:#898989;} #home .portal ul li p {font-size:12px; white-space: nowrap; overflow: hidden;} #home .upinfo {} #home .upinfo ul {display:flex; flex-wrap:wrap; gap:10px;} #home .upinfo ul li {width:calc(100% /2 - 5px);} #home .upinfo ul li a {display:flex; width:100%; height:100%; padding:4px; background:#fff; border:1px solid #e6e6e6;} #home .upinfo ul li h2 {} #home .upinfo ul li .image {width:140px; height:100px; overflow:hidden;} #home .upinfo ul li .image img {width:100%;} #home .upinfo ul li .text {display:flex; flex-direction:column; justify-content:space-between; width:calc(100% - 140px); padding:8px 8px 8px 12px; color:#333; font-size:14px;} #home .upinfo ul li .text em {display:block; color:#898989; font-style:normal; font-size:11px;} #home .upinfo ul li .text h5 {flex-grow:1; padding-top:4px; font-size:14px; font-weight:normal; text-align:justify; line-height:1.3;} #home .upinfo ul li .text p {color:#898989; font-size:11px; text-align:right;} #home .txtinfo {margin:30px auto 0; width:630px; border:1px solid #D0D0D0;} #home .txtinfo:after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} #home .txtinfo a {display:block; padding:10px 15px;} #home .txtinfo small {display:inline-block; font-size:11px; background:#14A2C3; color:#fff; padding:2px 7px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;} #home .txtinfo b {display:block; color:#343434; margin:5px 0 0 0;} #home .txtinfo h3 {color:#343434; font-size:20px; line-height:1.4; font-weight:normal;} #home section.maintop {position:relative; background: #f3f9fc url('/img/home/cover.svg') no-repeat; background-size: cover; overflow: hidden;} #home section.maintop .bg {position:relative; top:0; left:0; width:960px; height:auto; background:#fff; margin: 0 auto;} #home section.maintop .bg video {width:100%; height:100%; outline:none; border:none; filter:drop-shadow(0px 0px rgba(0,0,0,0));} #home section.maintop .maintopimg {display:block; max-width: 450px; float: right; padding: 80px 0 0 0;} #home section.maintop .maintopimg img {height: 415px;} #home section.maintop .maintopimg_sp {display:none;} #home section.maintop .outer {position:relative;} #home section.maintop .outer .box {display:flex; max-width:490px; flex-direction:column; align-items:center; width:100%; padding:96px 0 50px;} #home section.maintop .outer .box .area {display: flex; flex-direction: column;} #home section.maintop .outer .box h1 {color:#333; font-weight:800; font-size:18px; text-align:left;} #home section.maintop .outer .box h2 {margin:3px 0 10px; color:#1e1e1e; font-weight:800; font-size:30px; line-height:1.4;} #home section.maintop .outer .box h2 span {padding:0 2px; font-size:26px;} #home section.maintop .outer .box ul {display:flex; flex-wrap:wrap; gap:2px; margin-top:4px;} #home section.maintop .outer .box ul li {display:flex; justify-content:center; align-items:center; width:calc(100% / 4 - 2px); height:28px; border-radius:6px; border:1px solid #e6e6e6; background:#fff; font-weight:bold; font-size:12px; font-feature-settings:"palt";} #home section.maintop .outer .box ul li h3 {font-size:12px; font-weight:normal;} #home section.maintop .outer .box ul li.f_xs h3 {font-size:12px;} #home section.maintop .outer .box ul.c2 {margin-top:28px;} #home section.maintop .outer .box ul.c2 li {width:calc(100% / 2 - 2px); height:28px; border-radius:0px; color:#fff; border:none; background:#C7B10A; --r: 0.4em; clip-path: polygon(0 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 0 100%, var(--r) 50%);} #home section.maintop .outer .box .button {margin-top:36px;} #home section.maintop .outer .box .button a.button_primary {position:relative; width:300px; max-width:300px; height:64px; border-radius:32px; font-size:18px; filter:drop-shadow(0px 2px 2px rgb(0 0 0 / 20%));} #home section.maintop .outer .box .button a.button_primary::after {display:block; position:absolute; top:0; left:0; width:100px; height:72px; background:url('/img/home/pawanarekun.png') top left / 100px 72px no-repeat; content:""; transform:translate(-32px, 16px);} #home section.maintop .outer .box .button a.button_primary_v2 {display: flex; color: #fff; background: #15A3C2; outline:1px solid #15A3C2; border-radius: 50px; padding: 10px 38px; font-size: 16px; font-weight: 500; transition:all 0.3s ease-out;} #home section.maintop .outer .box .button a.button_primary_v2:hover {background:#23D6FD; outline:1px solid #23D6FD; color:#fff;} #home section.maintop .outer .box .button a.button_primary_v2 a img {filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(2%) hue-rotate(255deg) brightness(107%) contrast(100%);} #home section.maintop .outer .box .fukidashi {transform:translateY(40px);} #home section.maintop .outer .box .fukidashi p {width:fit-content; background-image:linear-gradient(rgba(0 0 0 / 0) 60%, #FFEB3B 60%); font-size:13px; font-weight:normal;} #home section.maintop .outer .box .fukidashi p::before, #home section.maintop .outer .box .fukidashi p::after {display:inline-block; transform:rotate(-25deg) translateY(3px); width:1px; height:14px; margin:0 12px 0 8px; background:#333; content:"";} #home section.maintop .outer .box .fukidashi p::after {transform:rotate(25deg) translateY(3px); margin:0 8px 0 12px;} #home section.maintop .outer .box .side {display: flex; margin: 0 0 20px;} #home section.maintop .outer .box .side p {background: #CDA214;color: #fff;font-weight: 500;font-size: 15px;border-radius: 20px;padding: 3px 10px;margin: 0 8px 0 0;} #home section.maintop .outer .box h3 {color:#1e1e1e; font-weight:700; font-size:16px; line-height:1.8;} #home section.maintop .outer .box .read {font-size: 15px; line-height:2;} #home section.maintop .outer .box .point {width: 450px; display: flex; text-align: center; justify-content: space-between; margin: 25px 0 0;} #home section.maintop .outer .box .point div {background: #fff;padding: 10px;border-radius: 10px;box-shadow: 0px 2px 10px 0px rgb(21 163 194 / 15%); text-align: center;} #home section.maintop .outer .box .point p {font-size: 14px; margin: 12px 0 0; line-height: 1.4;} #home section.maintop .outer .box .point strong {font-size: 18px; font-weight: bold; color: #019CC0;} #home section.wrap.topslide {padding:0 0 24px; background:#f3f9fc;} #home section.wrap.topslide .slider .image {padding:0;} #home section.wrap.topslide .slider .image p {width:calc(100% - 4px); padding:4px 4px; margin:6px auto 12px; border:1px solid #e6e6e6; border-radius:24px; background:#fff; font-size:11px; line-height:1; text-align:center; white-space:nowrap;} #home section.wrap.topslide .slick-slide {outline:none;} #home section.wrap.campaign {display:none; box-sizing:border-box; padding:36px 20px 48px;} #home section.wrap.campaign h4 {margin-bottom:12px; font-size:18px; text-align:center;} #home section.wrap.campaign h4 span {display:inline-block; line-height:1;} #home section.wrap.campaign h4 .zero {margin:0 2px 0 4px; font-size:42px; transform:translateY(3px);} #home section.wrap.campaign h4 .en {margin-right:4px; font-size:24px;} #home section.wrap.campaign h4 .en ruby rt {font-size:10px; transform:translateY(2px);} #home section.wrap.campaign .mgtb30 {margin:0;} #home section.wrap.campaign .mgtb30 a {display:block;} #home section.wrap.aspos .compo_group_title h2 {} #home section.wrap.aspos .compo_group_title .photo {display:block; margin:0 auto 24px;} #home section.wrap.aspos .compo_group_title h4 {margin-bottom:24px; font-size:22px;} #home section.wrap.aspos .compo_group_title p {font-size:16px;} #home section.wrap.aspos .poscolors {display:flex; gap:48px; margin-top:96px; padding:24px; border:1px solid #e6e6e6; background:#f3f9fc;} #home section.wrap.aspos .poscolors .left {flex-grow:1;} #home section.wrap.aspos .poscolors .left ul {position:relative;} #home section.wrap.aspos .poscolors .left ul li {opacity:0; position:absolute; top:-24px; left:-20px; transition:all 0.5s ease-in-out;} #home section.wrap.aspos .poscolors .left ul li img {transform:scale(1.1); width:100%;} #home section.wrap.aspos .poscolors.c_black .left ul li.black, #home section.wrap.aspos .poscolors.c_white .left ul li.white, #home section.wrap.aspos .poscolors.c_blue .left ul li.blue, #home section.wrap.aspos .poscolors.c_green .left ul li.green, #home section.wrap.aspos .poscolors.c_pink .left ul li.pink {opacity:1;} #home section.wrap.aspos .poscolors .right {width:100%; max-width:436px;} #home section.wrap.aspos .poscolors .right h5 {margin-bottom:12px; font-size:22px;} #home section.wrap.aspos .poscolors .right p {font-size:14px; text-align:justify;} #home section.wrap.aspos .poscolors .right p.note {margin-top:8px; font-size:10px;} #home section.wrap.aspos .poscolors .right ul {display:flex; gap:12px; margin-top:24px;} #home section.wrap.aspos .poscolors .right ul li {font-size:12px; text-align:center; cursor:pointer;} #home section.wrap.aspos .poscolors .right ul li::before {display:block; width:64px; height:64px; margin:0 auto 12px; border-radius:50%; box-sizing:border-box; content:"";} #home section.wrap.aspos .poscolors .right ul li:hover::before {outline:2px solid #15A3C2; outline-offset:4px;} #home section.wrap.aspos .poscolors .right ul li:hover span {background:#d1eef4;} #home section.wrap.aspos .poscolors .right ul li.black::before {background:var(--color_bg_gr_black);} #home section.wrap.aspos .poscolors .right ul li.white::before {border:1px solid #e6e6e6; background:var(--color_bg_gr_white);} #home section.wrap.aspos .poscolors .right ul li.blue::before {background:var(--color_bg_gr_blue);} #home section.wrap.aspos .poscolors .right ul li.green::before {background:var(--color_bg_gr_green);} #home section.wrap.aspos .poscolors .right ul li.pink::before {background:var(--color_bg_gr_pink);} #home section.wrap.aspos .poscolors .right ul li span {padding:2px 12px; border:1px solid #e6e6e6; border-radius:14px; background:#fff;} #home section.wrap.aspos .poscolors.c_black .right ul li.black::before, #home section.wrap.aspos .poscolors.c_white .right ul li.white::before, #home section.wrap.aspos .poscolors.c_blue .right ul li.blue::before, #home section.wrap.aspos .poscolors.c_green .right ul li.green::before, #home section.wrap.aspos .poscolors.c_pink .right ul li.pink::before {outline:2px solid #15A3C2; outline-offset:4px;} #home section.wrap.aspos .poscolors.c_black .right ul li.black span, #home section.wrap.aspos .poscolors.c_white .right ul li.white span, #home section.wrap.aspos .poscolors.c_blue .right ul li.blue span, #home section.wrap.aspos .poscolors.c_green .right ul li.green span, #home section.wrap.aspos .poscolors.c_pink .right ul li.pink span {background:#15A3C2; color:#fff;} #home section.wrap.usageindustry .outer .inner .group_list ul {display:flex; flex-wrap:wrap; gap:20px;} #home section.wrap.usageindustry .outer .inner .group_list ul li {width:calc(100% / 3 - 14px);} #home section.wrap.usageindustry .outer .inner .group_list ul li a {display:block; height:100%; border:1px solid #e6e6e6; background:#fff; color:#333; transition:all 0.3s ease-in-out;} #home section.wrap.usageindustry .outer .inner .group_list ul li a:hover {opacity:0.7;} #home section.wrap.usageindustry .outer .inner .group_list ul li a img {width:100%;} #home section.wrap.usageindustry .outer .inner .group_list ul li a > div {padding:16px 24px;} #home section.wrap.usageindustry .outer .inner .group_list ul li a > div p {text-align:center;} #home section.wrap.usageindustry .outer .inner .group_list ul li a > div p.category {width:190px; margin:0 auto 6px; padding:2px; border-radius:16px; background:#15a3c2; color:#fff; font-weight:bold; font-size:16px;} #home section.wrap.worry ul.compo_list > li .box {display:flex; flex-direction:column; height:100%;} #home section.wrap.worry ul.compo_list > li .pic {padding-top:16px;} #home section.wrap.worry ul.compo_list > li .text {flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; padding:20px; text-align:center;} #home section.wrap.worry ul.compo_list > li .text p span {display:block;} #home section.wrap.worry ul.compo_list > li .text .link {text-align:center;} #home section.wrap.flow .outer .inner .group_list ul {display:flex; flex-wrap:wrap; align-items:stretch; gap:20px;} #home section.wrap.flow .outer .inner .group_list ul li {display:flex; flex-direction:column; align-items:center; width:calc(100% / 3 - 14px); max-width:300px; padding:24px; background:#fff; text-align:justify;} #home section.wrap.flow .outer .inner .group_list ul li .top {position:relative;} #home section.wrap.flow .outer .inner .group_list ul li .top img {display:block; height:96px; margin:0 auto;} #home section.wrap.flow .outer .inner .group_list ul li .top span {position:absolute; top:-4px; left:-4px;width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-weight:bold; line-height:1.7; text-align:center;} #home section.wrap.flow .outer .inner .group_list ul li .bottom {display:flex; flex-direction:column; align-items:center;} #home section.wrap.flow .outer .inner .group_list ul li .bottom h5 {margin:12px auto 4px; font-weight:bold; font-size:16px; text-align:center;} #home section.wrap.faq .outer .inner .group_list ul li {max-width:780px; margin:0 auto;} #home section.wrap.faq .outer .inner .group_list ul li:nth-last-child(1) {border-bottom:1px solid #e6e6e6;} #home section.wrap.faq .outer .inner .group_list ul li dl dt {display:flex; justify-content:space-between; padding:24px; border-top:1px solid #e6e6e6; font-weight:bold; font-size:16px; cursor:pointer;} #home section.wrap.faq .outer .inner .group_list ul li dl dt .q {display:flex; justify-content:center; align-items:center; transform:translateY(1px); width:24px; height:24px; padding:0 12px; margin-right:8px; border-radius:4px; background:#15a3c2; color:#fff; font-size:14px; line-height:1;} #home section.wrap.faq .outer .inner .group_list ul li dl dt .title {flex-grow:1; text-align:justify; padding-right:24px;} #home section.wrap.faq .outer .inner .group_list ul li dl dt .icon {position:relative; height:24px; padding:0 12px;} #home section.wrap.faq .outer .inner .group_list ul li dl dt .icon::before, #home section.wrap.faq .outer .inner .group_list ul li dl dt .icon::after {position:absolute; top:11px; left:4px; width:16px; height:2px; background:#333; content:""; transition:all 0.5s ease-out;} #home section.wrap.faq .outer .inner .group_list ul li dl dt .icon::after {transform:rotate(-90deg);} #home section.wrap.faq .outer .inner .group_list ul li dl dt.active .icon::after {transform:rotate(0deg);} #home section.wrap.faq .outer .inner .group_list ul li dl dd {display:none; padding:0 72px 24px 54px; font-size:14px; text-align:justify;} #home section.wrap.support .outer .inner .group_list ul {display:flex; flex-wrap:wrap; align-items:stretch; gap:20px;} #home section.wrap.support .outer .inner .group_list ul li {width:calc(100% / 3 - 14px); padding:24px; background:#fff; text-align:justify;} #home section.wrap.support .outer .inner .group_list ul li img {display:block; height:96px; margin:0 auto;} #home section.wrap.support .outer .inner .group_list ul li h5 {width:100%; max-width:230px; margin:8px auto 6px; padding:2px; border-radius:16px; background:#296583; color:#fff; font-weight:bold; font-size:16px; text-align:center;} #home section.wrap.support .outer .inner .group_list ul li h6 {margin:12px 0 4px; font-weight:bold; font-size:16px; text-align:center;} /*guide ------------------------------------------------------------------------------*/ #guide .topmain {width:100%; background:#d2d2d2 url('/guide/img/mainbg.jpg') center center no-repeat; background-size:cover;} #guide .topmain .image {padding:48px 0;} #guide .topmain .image img {display:block; width:100%; max-width:740px; margin:0 auto;} #guide .featureslist01 ul li {padding-bottom:48px; border-bottom:1px solid #e6e6e6;} #guide .featureslist01 ul li:nth-child(n+2) {padding:48px 0;} #guide .featureslist01 ul li .box {display:flex; align-items:stretch; gap:20px; text-align:justify;} #guide .featureslist01 ul li .box .group_text {position:relative; width:540px; font-size:16px;} #guide .featureslist01 ul li .box .group_text .number {position:absolute; top:0; left:0; color:#15A3C210; font-weight:bold; font-size:150px; line-height:1;} #guide .featureslist01 ul li .box .group_text .area {position: relative; z-index:1; padding:48px 0 0 48px;} #guide .featureslist01 ul li .box .group_text .area h3 {margin-bottom:16px; font-size:22px;} #guide .featureslist01 ul li .box .group_text .area a {display:inline-block; margin-top:16px;} #guide .featureslist01 ul li .box .group_img {display:flex; justify-content:center; align-items:center; flex-grow:1;} #guide .featureslist01 ul li .box .group_img a {display:block; transform:translateY(32px); transition:all 0.3s ease-in-out;} #guide .featureslist01 ul li .box .group_img a:hover {opacity:0.5;} #guide .featureslist01 ul li .box .group_img a img {} #guide .featureslist02 {margin-top:96px;} #guide .request .box ul {display:flex; justify-content:center;} #guide .support .box ul {display:flex; justify-content:center; align-items:stretch; gap:20px;} #guide .support .box ul li {display:flex; flex-direction:column; justify-content:space-between; width:100%; max-width:300px; padding:24px; background:#fff; text-align:justify;} #guide .support .box ul li img {display:block; height:96px; margin:0 auto;} #guide .support .box ul li h5 {width:100%; max-width:230px; margin:8px auto 12px; padding:2px; border-radius:16px; background:#296583; color:#fff; font-weight:bold; font-size:16px; text-align:center;} /*function ------------------------------------------------------------------------------*/ #function .mainbox {margin-top:30px;} #function .mainbox .pic {float:left; width:540px; margin-right:20px;} #function .mainbox .txt {float:left; width:380px;} #function .mainbox .txt h1 {display:block; font-size:26px; font-weight:900; margin-bottom:30px;} #function .mainbox .txt p {font-size:15px; line-height:1.8; text-align: justify; word-break: inherit;} #function .sbox01 {border:1px solid #ddd; padding:10px; margin:0 0 60px 0;} #function .sbox01 .txt {float:left; width: 425px; padding: 20px;} #function .sbox01 .pic {float:right; width:450px; text-align: right;} #function .sbox01 .txt h2 {font-size:18px; font-weight:700; margin-bottom: 20px;} #function .scin .pic.border {border:1px solid #e6e6e6;} #function .livemembers {position:relative; height:615px; margin:30px 0 0 0;} #function .livemembers>div {position:absolute;} #function .livemembers .wow {position:absolute; left:310px; top:-35px;} .funclist .flipsnap div {width:220px !important; padding:50px 20px !important;}/* widthやpaddingサイズ変更時はflipsnapのdistanceも変更*/ .funclist .flipsnap div a img {width:220px;} .funcsub dl {border-top:1px solid #E6E6E6; padding:60px 0 40px;} .funcsub dl:first-child {border-top:none; padding-top:0;} .funcsub dt {float:left; width:300px; text-align:center;} .funcsub dd {float:left; width:620px; margin-left:20px;} .funcsub h3 {font-size:14px;} .funcsub h4 {font-size:14px; margin-bottom:5px;} .funcsub li {margin-bottom:30px;} #function .inner.productspec .box {display:flex; justify-content:center; align-items:center; gap:20px; margin-bottom:24px;} #function .inner.productspec .box img {width:100%; max-width:380px;} #function .inner.productspec .box dl {width:100%; max-width:380px; font-size:16px;} #function .inner.productspec .box dl dt {margin-bottom:16px; font-weight:bold;} #function .inner.productspec .box dl dd {display:flex; align-items:flex-start;} #function .inner.productspec .box dl dd:nth-child(n+2) {margin-top:4px;} #function .inner.productspec .box dl dd::before {margin-right:4px; color:#15A3C2; font-family:'Material Icons'; font-size:20px; content:"\e86c"; transform:translateY(-4px);} #function .inner.productspec button {margin-top:24px;} #function .oneframe {display:flex; align-items:flex-start; gap:20px; width:100%; max-width:780px; margin:0 auto; padding:20px; border:1px solid #e6e6e6; text-align:justify; box-sizing:border-box;} #function .oneframe > a {display:block; width:100%; min-width:300px;} #function .oneframe > a img {display:block;} #function .oneframe hgroup {flex-grow:1;} #function .oneframe hgroup h3 {margin-top:10px; font-size:14px;} #function .oneframe hgroup p {margin-top:12px;} #function .oneframe hgroup .txtlink {margin-top:12px;} /*function powerec.html ------------------------------------------------------------------------------*/ #function.powerec .industrycase dl {margin-bottom:48px; padding:48px; border-radius:4px; border:1px solid #e6e6e6;} #function.powerec .industrycase dl dt {font-size:20px; font-weight:bold; text-align:center;} #function.powerec .industrycase dl dd {display:flex; align-items:flex-start; gap:20px; padding:48px 0;} #function.powerec .industrycase dl dd:nth-of-type(n+2) {border-top:1px solid #e6e6e6;} #function.powerec .industrycase dl dd:nth-last-of-type(1) {padding-bottom:0;} #function.powerec .industrycase dl dd img {width:100%; min-width:300px;} #function.powerec .industrycase dl dd .category {width:fit-content; margin-bottom:4px; padding:8px 12px; border-radius:4px; border:1px solid #e6e6e6; font-size:12px; line-height:1;} #function.powerec .industrycase dl dd h4 {margin:12px 0; font-size:16px;} #function.powerec .industrycase dl dd p {margin-bottom:20px; text-align:justify; text-box-trim:trim-both;} /*function pointsystem.html ------------------------------------------------------------------------------*/ #function.pointsystem .merit {padding:72px 0;} #function.pointsystem .merit .inner {width:100%; max-width:800px; margin-inline:auto; padding:0 20px; box-sizing:border-box;} #function.pointsystem .merit h3 {margin-bottom:56px; font-size:20px; text-align:center;} #function.pointsystem .merit p {text-align:justify;} #function.pointsystem .merit dl dt {display:flex; align-items:center} #function.pointsystem .merit dl dt hgroup {padding:24px 32px 32px; border:1px solid #e6e6e6; background:#ffffffd6; z-index:1;} #function.pointsystem .merit dl dt hgroup h4 {padding-bottom:8px; margin-bottom:16px; border-bottom:1px solid #89898980; font-size:16px;} #function.pointsystem .merit dl dt hgroup p {font-size:15px;} #function.pointsystem .merit dl dt img {margin-left:-140px;} #function.pointsystem .merit dl dd {display:grid; grid-template-columns:auto auto; align-items:center; gap:20px; margin-top:32px;} #function.pointsystem .merit dl dd h5 {grid-column:1 / 3; padding-bottom:8px; border-bottom:1px solid #89898990; font-size:16px;} #function.pointsystem .merit dl dd h5 span {display:block; margin-bottom:2px; color:#15a3c296; font-size:13px; line-height:1;} #function.pointsystem .merit dl dd img {width:100%; max-width:300px; margin-inline:auto;} #function.pointsystem .merit.shop dl dt hgroup {background:#f3f9fcd6;} /*industry ------------------------------------------------------------------------------*/ #industry section.wrap {width:100%; min-height:750px;} #industry section.wrap .outer .inner {} #industry section.wrap .outer .inner ul {} #industry section.wrap .outer .inner ul li {padding:48px 0;} #industry section.wrap .outer .inner ul li:nth-of-type(1) {padding-top:0;} #industry section.wrap .outer .inner ul li:nth-of-type(n+2) {border-top:1px solid #e6e6e6;} #industry section.wrap .outer .inner ul li .box {display:flex; align-items:center; gap:24px;} #industry section.wrap .outer .inner ul li .box .group_text {width:100%; max-width:460px; text-align:justify;} #industry section.wrap .outer .inner ul li .box .group_text h2 {width:fit-content; background:linear-gradient(transparent 50%, #f9fcc2 50%); font-size:22px; line-height:1.3;} #industry section.wrap .outer .inner ul li .box .group_text h4 {margin-top:16px; font-size:16px;} #industry section.wrap .outer .inner ul li .box .group_text p {margin-top:12px;} #industry section.wrap .outer .inner ul li .box .group_text a {display:inline-block; margin-top:16px;} #industry section.wrap .outer .inner ul li .box .group_img {} #industry section.wrap .outer .inner ul li .box .group_img a {display:block; transition:all 0.3s ease-in-out;} #industry section.wrap .outer .inner ul li .box .group_img a:hover {opacity:0.5;} #industry section.wrap .outer .inner ul li .box .group_img a img {width:100%;} /*inds共有 ------------------------------------------------------------------------------*/ /* #inds section.wrap.topmain {background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url('/img/common/industry/clinic.jpg'); background-size:cover;} */ #inds section.wrap.topmain {position:relative; background:url('/img/common/industry/clinic.jpg') no-repeat center center / cover;} #inds section.wrap.topmain::before {position:absolute; top:0; right:0; bottom:0; left:0; background:#296583b3; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); content:"";} #inds section.wrap.topmain .outer {position:relative;} #inds section.wrap.topmain .outer .inner {display:flex; align-items:center; gap:24px;} #inds section.wrap.topmain .outer .inner {padding:48px 0 72px;} #inds section.wrap.topmain .outer .inner .group_text {width:100%; max-width:460px; color:#fff; text-align:justify;} #inds section.wrap.topmain .outer .inner .group_text h1 p.catch {color:#ffffffab; font-size:16px; font-weight:bold; line-height:1.6;} #inds section.wrap.topmain .outer .inner .group_text h1 p.phrase {margin-bottom:24px; font-size:24px; font-weight:bold; line-height:1.6;} #inds section.wrap.topmain .outer .inner .group_text p {font-size:15px; line-height:1.8;} #inds section.wrap.topmain .outer .inner .group_text {} #inds section.wrap.topmain .outer .inner .group_img img {width:100%;} #inds section.wrap.cont_second .outer .inner {display:flex; align-items:center; gap:24px;} #inds section.wrap.cont_second .outer .inner {padding:72px 0} #inds section.wrap.cont_second .outer .inner .group_text {width:100%; max-width:460px; text-align:justify;} #inds section.wrap.cont_second .outer .inner .group_text h2 p.catch {color:#898989; font-size:14px; font-weight:bold; line-height:1.6;} #inds section.wrap.cont_second .outer .inner .group_text h2 p.phrase {margin-bottom:24px; font-size:24px; font-weight:bold; line-height:1.6;} #inds section.wrap.cont_second .outer .inner .group_text p {font-size:15px; line-height:1.8;} #inds section.wrap.cont_second .outer .inner .group_text {} #inds section.wrap.cont_second .outer .inner .group_img img {width:100%;} #inds section.wrap.cont_third .outer .inner {padding-top:0;} /*inds.clinic ------------------------------------------------------------------------------*/ /*inds.salon ------------------------------------------------------------------------------*/ #inds.salon section.wrap.topmain {background:url('/img/common/industry/salon.jpg') no-repeat center center / cover;} /*inds.beauty ------------------------------------------------------------------------------*/ #inds.beauty section.wrap.topmain {background:url('/img/common/industry/beauty.jpg') no-repeat center center / cover;} /*inds.b_clinic ------------------------------------------------------------------------------*/ #inds.b_clinic section.wrap.topmain {background:url('/img/common/industry/b_clinic.jpg') no-repeat center center / cover;} /*inds.studio ------------------------------------------------------------------------------*/ #inds.studio section.wrap.topmain {background:url('/img/common/industry/studio.jpg') no-repeat center center / cover;} /*inds.petsalon ------------------------------------------------------------------------------*/ #inds.petsalon section.wrap.topmain {background:url('/img/common/industry/petsalon.jpg') no-repeat center center / cover;} /*spec ------------------------------------------------------------------------------*/ #spec .mainbox {margin-top:30px;} #spec .mainbox .pic {float:left; width:540px; margin-right:20px;} #spec .mainbox .pic .spimg {display:none;} #spec .mainbox .txt {float:left; width:380px; margin:16px 0 32px;} #spec .mainbox .txt h1 {display:block; font-size:18px; font-weight:900; margin-bottom:24px;} #spec .mainbox .txt h3 {margin-bottom:16px;} #spec .mainbox .txt p {font-size:14px; line-height:1.8;} #spec .mainbox .txt ul {margin-bottom:12px;} #spec .mainbox .txt li {display:flex; align-items:flex-start; font-size:14px;} #spec .mainbox .txt li::before {margin-right:4px; color:#15A3C2; font-family:'Material Icons'; font-size:20px; content:"\e86c"; transform:translateY(-6px);} #spec .mainbox .txt .textlink {margin-top:8px;} #spec .posanime {position:relative; width:540px; height:320px;} #spec .posanime .black {position:absolute; left:0; top:0;} #spec .posanime .white {position:absolute; left:0; top:0;} #spec .posanime .whitepos {position:absolute; left:0; top:0;} #spec .posanime .timechart {position:absolute; left:280px; top:86px; width:224px; height:145px; overflow:hidden;} #spec .posanime .hand {position:absolute; left:312px; top:165px;} #spec .posanime .black {padding: 0 24px;} #spec .posanime .black img {width:100%;} #spec .speclist table.st {float:left; width:50%;} #spec .specification .poscolor {display:none;} #spec .specification .poscolor img {display:block; width:100%; max-width:800px; margin:0 auto;} #spec .specification .box {display:flex; gap:20px;} #spec .specification .box table {width:100%; border-collapse:separate; border-spacing:4px;} #spec .specification .box table tr th, #spec .specification .box table tr td {padding:8px; font-weight:normal; font-size:12px; text-align:left;} #spec .specification .box table tr th {background:#f5ecbd;} #spec .specification .box table tr td {background:#f4f2ef;} #spec .specification .box > div {flex-grow:1;} #spec .specification .box .caption {display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:8px; font-weight:bold; font-size:14px; text-align:left;} #spec .specification .box .caption ul {display:flex; align-items:center; gap:4px; transform:translateY(-1px);} #spec .specification .box .box_right .caption ul li {display:block; width:16px; height:16px; border-radius:8px; box-sizing:border-box;} #spec .specification .box .box_right .caption ul li span {display:none;} #spec .specification .box .box_right .caption ul li:nth-of-type(1) {background:var(--color_bg_gr_black);} #spec .specification .box .box_right .caption ul li:nth-of-type(2) {border:1px solid #e6e5e2; background:var(--color_bg_gr_white);} #spec .specification .box .box_right .caption ul li:nth-of-type(3) {background:var(--color_bg_gr_blue);} #spec .specification .box .box_right .caption ul li:nth-of-type(4) {background:var(--color_bg_gr_green);} #spec .specification .box .box_right .caption ul li:nth-of-type(5) {background:var(--color_bg_gr_pink);} #spec .specification .box .box_right .cashdrawer {margin-top:0px;} #spec .specification .box .box_right .cashdrawer img {height:90px; margin-bottom:12px;} /*management ------------------------------------------------------------------------------*/ #management .topmain {background-image:url('/management/img/mainbg.jpg'); background-image:image-set(url('/management/img/mainbg.jpg') 1x, url('/management/img/mainbg@2x.jpg') 2x); background-position:center bottom 26%; background-size:cover; background-repeat:no-repeat; aspect-ratio:10 / 3;} #management .top .outer {} #management .top .outer .inner {display:grid; justify-content:center;} #management .top .outer .inner .compo_group_title {margin-bottom:0;} #management .top .outer .inner figcaption {margin-top:24px; font-size:16px; font-weight:bold; text-align:center;} #management .top .outer .inner figcaption span {display:inline-block;} #management ul.contents {padding:0 20px;} #management ul.contents li {width:100%; max-width:940px; margin:0 auto; padding:clamp(3rem, 1.757rem + 5.3vw, 6rem) 80px; border-top:1px solid #e6e6e6;} #management ul.contents li:nth-last-of-type(1) {padding-bottom:clamp(6rem, 4.757rem + 5.3vw, 9rem);} #management ul.contents li h2 {margin-bottom:24px; font-size:22px; text-align:center;} #management ul.contents li h2 span {display:inline-block;} #management ul.contents li.population {display:grid; grid-template-columns:auto auto; gap:24px;} #management ul.contents li.population h2 {grid-column:1 / 3; margin-bottom:0;} #management ul.contents li.ad {} #management ul.contents li.ad .image {display:flex; justify-content:center; gap:10px; margin-top:48px;} #management ul.contents li.ad .image img {padding:8px 24px; border:1px solid #e6e6e6; border-radius:6px;} #management ul.contents li.customer figure img, #management ul.contents li.impression figure img {display:block; margin:48px auto 24px;} #management ul.contents li.customer figure figcaption, #management ul.contents li.impression figure figcaption {margin-bottom:48px; font-size:16px; font-weight:bold; text-align:center;} #management ul.contents li.impression h2 {margin-top:48px;} #management ul.contents li.cycle dl {display:grid; grid-template-columns:1fr 1fr; justify-items:center; gap:4px; margin:48px 0;} #management ul.contents li.cycle dl dt {grid-column:1 / 3; margin-bottom:8px; padding:10px 24px; border-radius:4px; border:1px solid #296583; background:#fff; color:#296583; font-size:16px; font-weight:bold;} #management ul.contents li.cycle dl dd {display:grid; justify-content:center; justify-items:center; align-content:start; gap:12px; position:relative; padding:24px clamp(0.75rem, 0.439rem + 1.33vw, 1.5rem) 30px; border-radius:4px; border:1px solid #e6e6e6; background:#fff;} #management ul.contents li.cycle dl dd img {} #management ul.contents li.cycle dl dd h3 {display:grid; place-content:center; width:100%; max-width:154px; height:32px; border-radius:16px; background:#296583; color:#fff; text-box-trim:trim-both;} #management ul.contents li.cycle dl dd p {} #management ul.contents li.cycle dl dd .flow {position:absolute; width:32px; height:32px; background:#296583; color:#fff; font-weight:bold;} #management ul.contents li.cycle dl dd .flow span {text-box-trim:trim-both;} #management ul.contents li.cycle dl dd:nth-of-type(1) .flow {bottom:0; right:0; border-radius:100% 0 4px 0;} #management ul.contents li.cycle dl dd:nth-of-type(1) .flow span {position:absolute; bottom:4px; right:8px;} #management ul.contents li.cycle dl dd:nth-of-type(2) .flow {bottom:0; left:0; border-radius:0 100% 0 4px;} #management ul.contents li.cycle dl dd:nth-of-type(2) .flow span {position:absolute; bottom:4px; left:8px;} #management ul.contents li.cycle dl dd:nth-of-type(3) .flow {top:0; right:0; border-radius:0 4px 0 100%;} #management ul.contents li.cycle dl dd:nth-of-type(3) .flow span {position:absolute; top:2px; right:8px;} #management ul.contents li.cycle dl dd:nth-of-type(4) .flow {top:0; left:0; border-radius:4px 0 100% 0;} #management ul.contents li.cycle dl dd:nth-of-type(4) .flow span {position:absolute; top:2px; left:8px;} /*example ------------------------------------------------------------------------------*/ #example .cover .path li a {color: #9D9D9D;} #example .cover {overflow:hidden; position:relative; width:100%; height:100%; min-height:450px; background:#333 center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #example .page01, #example .page02 {overflow:hidden; width:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #example .page01 .txt {background:#fff; padding:40px 80px 40px 40px; margin-left:59%;} #example .page02 .txt {background:#fff; padding:60px 40px 60px 80px; margin-right:41%;} #example .spimage {display:none;} #example .txt h2 {font-size:16px; font-weight:normal;} #example .txt h3 {font-size:18px; font-weight:normal; margin-bottom:40px;} #example .txt b {color:#898989; font-size:12px; font-weight:normal; margin-bottom:20px;} #example .txt dl {margin:0 0 30px 0;} #example .txt dl dt {font-size:11px; color:#898989;} #example .txt dl dd {font-size:12px; margin:0 0 15px 0;} #example .txt .article {padding:20px 0;} .examplelist h1 {font-weight:normal; text-align:center; margin:0 0 30px 0;} .examplelist .flipsnap div {width:200px; padding:50px 20px; text-align:center;}/* widthやpaddingサイズ変更時はflipsnapのdistanceも変更*/ .examplelist .listtop div {float:left; width:280px; padding:0px 15px 40px; text-align:center;} .examplelist .listtop div a img {-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .examplelist .listtop div a:hover img {opacity:0.5;} .examplelist .flipsnap a, .examplelist .listtop a {color:#898989; display:block;} .examplelist .flipsnap strong, .examplelist .listtop strong {font-weight:normal; font-size:12px;} .examplelist .flipsnap p, .examplelist .listtop p {font-size:11px; margin:10px 0 0;} #example .examplelist .listtop {display:flex; flex-wrap:wrap; justify-content:start; align-items:stretch;} #example .examplelist .listtop .datehtml {width:calc(100% / 3 - 16px); padding:0; margin-bottom:24px; margin-left:24px; box-sizing:border-box; float:none;} #example .examplelist .listtop .datehtml:nth-of-type(3n+1) {margin-left:0;} #example .examplelist .listtop .datehtml a {width:100%; height:100%; padding:24px; background:#F4F2EF; box-sizing:border-box; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;} #example .examplelist .listtop .datehtml a:hover {opacity:0.5;} #example .examplelist .listtop .datehtml a img {} #example .examplelist .listtop .datehtml a p {font-size:14px; color:#333;} #example .examplelist .listtop .datehtml a .type {min-width:100px; font-weight:bold; padding:4px 24px; margin:12px auto 4px; background:#fff; border:1px solid #d6d3ce; border-radius:16px; box-sizing:border-box; display:inline-block;} #example .examplelist .listtop .datehtml a .shop {font-size:14px; font-weight:normal; color:#333; display:block;} #example .examplelist .listtop .datehtml a .catch {margin-top:8px;} #example .case {width:100%; font-size:15px;} #example .case a {text-decoration:underline;} #example .case hr {margin:40px 0;} #example .case h1 {font-size:24px; font-weight:normal; margin:0 0 50px 0; text-align:center;} #example .case h2 {font-size:16px; font-weight:bold; color:#575757; display:inline-block; border-left:7px solid #575757; padding-left:8px; margin:10px 0 30px 0;} #example .case h3 {font-size:15px; font-weight:normal; margin:0 0 10px 0;} #example .case h4 {font-size:20px; font-weight:normal; margin:0 0 10px 0;} #example .case h5 {font-size:14px; font-weight:normal; color:#909090; text-align:center; margin:0 0 20px 0;} #example .case .shoptext {float:left; width:530px; margin-right:50px;} #example .case .shoptext small {font-size:11px; color:#898989;} #example .case .shoptext em {font-size:14px; font-style:normal; color:#898989; display:block; margin:0 0 20px 0;} #example .case .shopimg {float:left;} #example .case .img-l {float:left; margin:0 50px 50px 0;} #example .case .img-r {float:right; margin:0 0 50px 50px;} #example .case .text {margin:0 0 60px 0; text-align:justify; text-justify:inter-ideograph; -webkit-text-size-adjust:100%; word-break:normal;} #example .case .img-r+.text {width:530px;} #example .case .group_value {} #example .case .group_value h3 {font-size:16px; font-weight:bold; text-align:center; letter-spacing:0.4px; color:#575757; margin-bottom:8px; display:flex; justify-content:center; align-items:center;} #example .case .group_value h3::before, #example .case .group_value h3::after {content:""; height:1px; background:#E6E6E6; display:block; flex-grow:1;} #example .case .group_value h3 span {padding:0 12px;} #example .case .group_value .box_thumb {} #example .case .group_value .box_thumb img {max-width:160px; margin:20px auto 12px; display:block;} #example .case .group_value .box_value {display:flex; justify-content:center;} #example .case .group_value .box_value span {width:48px; height:48px; background:url('/img/common/svg/icon_valuestar_on.svg') no-repeat; display:block;} #example .case .group_value.star0 .box_value span {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star1 .box_value span:nth-of-type(2) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star1 .box_value span:nth-of-type(3) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star1 .box_value span:nth-of-type(4) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star1 .box_value span:nth-of-type(5) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star2 .box_value span:nth-of-type(3) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star2 .box_value span:nth-of-type(4) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star2 .box_value span:nth-of-type(5) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star3 .box_value span:nth-of-type(4) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star3 .box_value span:nth-of-type(5) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star4 .box_value span:nth-of-type(5) {background:url('/img/common/svg/icon_valuestar_off.svg') no-repeat;} #example .case .group_value.star5 .box_value span {background:url('/img/common/svg/icon_valuestar_on.svg') no-repeat;} #example .case .group_value .box_pkcomment {max-width:696px; margin:24px auto 0; position:relative;} #example .case .group_value .box_pkcomment .area_comment {width:calc(100% - 80px); text-align:justify; letter-spacing:-0.4px; padding:16px 16px; background:#F4F2EF; border:1px solid #E6E6E6; border-radius:8px; filter:drop-shadow(1px 0px 0px #E6E6E6); box-sizing:border-box; position:relative;} #example .case .group_value .box_pkcomment .area_comment::before {content:""; width:0; height:0; border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent #F4F2EF; filter:drop-shadow(1px 0px 0px #e5e2d8); position:absolute; top:24px; left:100%; display:block;} #example .case .group_value.star0 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました。";} #example .case .group_value.star1 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました。";} #example .case .group_value.star2 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました。";} #example .case .group_value.star3 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました。";} #example .case .group_value.star4 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました！";} #example .case .group_value.star5 .box_pkcomment .area_comment::after {content:"貴重なご意見ありがとうございました！";} #example .case .group_value .box_pkcomment .area_pk {position:absolute; top:0; right:0;} #example .case .group_value .box_pkcomment .area_pk span {width:80px; height:80px; display:block;} #example .case .group_value.star0 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_0.svg') no-repeat;} #example .case .group_value.star1 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_1.svg') no-repeat;} #example .case .group_value.star2 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_2.svg') no-repeat;} #example .case .group_value.star3 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_3.svg') no-repeat;} #example .case .group_value.star4 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_4.svg') no-repeat;} #example .case .group_value.star5 .box_pkcomment .area_pk span {background:url('/img/common/svg/icon_valuechara_5.svg') no-repeat;} /*demo（共通） ------------------------------------------------------------------------------*/ //#demo {background:url('/demo/img/bg.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #demo h1 {margin:50px 0 30px;} #demo .vx100 {background:url('/demo/img/vx100.png') no-repeat; width:854px; height:654px; padding:54px 0 0 54px; margin:0 auto;} .demo_reserve, .demo_check {position:relative; width:800px; height:600px; overflow:hidden;} .demo_reserve .screen, .demo_check .screen {position:absolute; left:0; top:0;} .demo_reserve .screen p, .demo_check .screen p {background:url('/img/space.png');} .demo_reserve .desc, .demo_check .desc {position:absolute; left:0; top:0; padding:16px 16px 16px 70px; background:#15a3c2 url('/demo/img/pawanarekun_02.png') 10px 0px no-repeat; color:#fff; text-align:left; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3); box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3); font-weight:bold;} .demo_reserve .desc:after, .demo_check .desc:after {content:""; position:absolute; left:50%; top:-15px; margin-left:-12px; display:block; width:0px; height:0px; border-style:solid; border-width:0 12px 15px 12px; border-color:transparent transparent #15a3c2 transparent;} .demo_reserve .descunder, .demo_check .descunder {background:#15a3c2 url('/demo/img/pawanarekun_03.png') 10px 0px no-repeat;} .demo_reserve .descunder:after, .demo_check .descunder:after {content:""; position:absolute; left:50%; top:50px; margin-left:-12px; display:block; width:0px; height:0px; border:12px solid transparent; border-top:15px solid #15a3c2;} #demo .changebutton {width:120px; height:67px; margin:0 auto 40px;} #demo .changebutton a span {display:none;} #demo .changebutton a {display:block; width:120px; height:67px; background:url('/demo/img/navi.png');} #demo .changebutton.reserve a {background-position:0px 0px;} #demo .changebutton.reserve a:hover {background-position:-120px 0px;} #demo .changebutton.reserve a:active{background-position:-240px 0px;} #demo .changebutton.check a {background-position:0px -100px;} #demo .changebutton.check a:hover {background-position:-120px -100px;} #demo .changebutton.check a:active {background-position:-240px -100px;} #demo .reserve_path {display:block; width:105px; height:275px; background:url('/demo/img/navi.png') -0px -200px; margin:0 auto;} #demo .check_path {display:block; width:105px; height:275px; background:url('/demo/img/navi.png') -0px -600px; margin:0 auto;} #demo .tel {margin:50px 0;} #demo .tel .txtlink {margin:5px 20px 5px 0; text-align:right;} #demo .tel .txtlink a:hover {color:#15a3c2; background-image:url('/img/button/txtlink.png');} #demo .button01.restart {position:absolute; left:318px; top:375px; width:250px;} #demo .button01.reserve {position:absolute; left:318px; top:430px; width:250px;} #demo .button01.check {position:absolute; left:318px; top:430px; width:250px;} #demo .button01.close {position:absolute; left:318px; top:485px; width:250px;} #demo .button01 a {border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -moz-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3); box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3);} .demo_reserve .s01 {left:0; top:0;} .demo_reserve .s01 p {position:absolute; left:262px; top:159px; width:357px; height:54px; border:2px dotted #15a3c2; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; cursor:pointer;} .demo_reserve .s02 {left:800px; top:0;} .demo_reserve .s02 p {position:absolute; left: 17px; top: 39px; width: 220px; height: 60px; cursor:pointer;} .demo_reserve .s03 {background:url('/demo/img/reserve_04.png') no-repeat; height:100px;} .demo_reserve .s04 {left:0; top:0;} .demo_reserve .s04 p {position:absolute; left: 0px; top: 108px; width: 800px; height: 52px; border-radius:0; cursor:pointer;} .demo_reserve .s05 {left:800px; top:0;} .demo_reserve .s05 p {position:absolute; left: 560px; top: 309px; width: 224px; height: 48px; cursor:pointer;} .demo_reserve .s06 {left:800px; top:0;} .demo_reserve .s06 p {position:absolute; left: 411px; top: 82px; width: 262px; height: 53px; cursor:pointer; border-radius:0;} .demo_reserve .s07 {left:0; top:0;} .demo_reserve .s07 p {position:absolute; left: 329px; top: 532px; width: 142px; height: 62px; cursor:pointer;} .demo_reserve .s08 {left:-800px; top:0;} .demo_reserve .s08 p {position:absolute; left: 329px; top: 532px; width: 142px; height: 62px; cursor:pointer;} .demo_reserve .s09 {left:-800px; top:0;} .demo_reserve .s10 {left:-800px; top:0;} .demo_reserve .s10 p {position:absolute; left: 258px; top: 155px; width: 364px; height: 56px; cursor:pointer;} .demo_reserve .s11 {left:0; top:0;} .demo_reserve .s12 {left:179px; top:0;} .demo_reserve .s12 p {position:absolute; left: 258px; top: 155px; width: 364px; height: 56px; cursor:pointer;} .demo_reserve .s13 {left:0; top:0;} .demo_reserve .s13 p {position:absolute; left: 250px; top: 250px; width: 144px; height: 48px; cursor:pointer;} .demo_reserve .s14 {left:0; top:0;} .demo_reserve .s15 {left:0; top:0;} .demo_reserve .s16 {left:0; top:0;} .demo_reserve .s17 {left:0; top:0;} .demo_reserve .s17 p {position:absolute; left: 190px; top: 410px; width: 205px; height: 66px; cursor:pointer;} .demo_reserve .s18 {left:0; top:0;} .demo_reserve .d01 {left:292px; top:223px;} .demo_reserve .d02 {left:30px; top:172px; z-index:5;} .demo_reserve .d03 {left:480px; top:220px; z-index:5;} .demo_reserve .d03::after {top:76px; left:64%;} .demo_reserve .d04 {left:398px; top:146px; z-index:5;} .demo_reserve .d05 {left:304px; top:463px; z-index:5;} .demo_reserve .d06 {left:240px; top:438px; z-index:5;} .demo_reserve .d06::after {top:76px;} .demo_reserve .d07 {left:248px; top:223px; background: #15a3c2 url(/demo/img/pawanarekun_01.png) 10px 0px no-repeat;} .demo_reserve .d08 {left:16px; top:109px;} .demo_reserve .d09 {left:460px; top:223px;} .demo_reserve .d10 {left:220px; top:311px;} .demo_reserve .d11 {left:106px; top:487px;} .demo_check .s01 {left:0; top:0;} .demo_check .s01 p {position:absolute; left:258px; top:155px; width: 365px; height: 56px; cursor:pointer;} .demo_check .s02 {left:800px; top:0;} .demo_check .s02 p {position:absolute; left: 561px; top: 531px; width: 223px; height: 63px; cursor:pointer;} .demo_check .s03 {left:800px; top:0;} .demo_check .s03 p {position:absolute; left: 561px; top: 531px; width: 223px; height: 63px; cursor:pointer;} .demo_check .s04 {left:800px; top:0;} .demo_check .s04 p {position:absolute; left: 20px; top: 98px; width: 370px; height: 55px; cursor:pointer;} .demo_check .s05 {left:0; top:0;} .demo_check .s06 {left:0; top:0;} .demo_check .s07 {left:0; top:0;} .demo_check .s08 {left:0; top:0;} .demo_check .s08off {left:0; top:0;} .demo_check .s08off p {position:absolute; left: 562px; top: 532px; width: 222px; height: 61px; cursor:pointer;} .demo_check .s09 {left:800px; top:0;} .demo_check .s09 p {position:absolute; left: 562px; top: 532px; width: 222px; height: 61px; cursor:pointer;} .demo_check .s10 {left:800px; top:0;} .demo_check .d01 {left:278px; top: 223px;} .demo_check .d02 {left:550px; top: 438px; z-index:5;} .demo_check .d02::after {top:76px;} .demo_check .d03 {left:508px; top: 438px; z-index:5;} .demo_check .d03::after {top:76px; left:160px;} .demo_check .d04 {left:108px; top: 165px; z-index:5;} .demo_check .d05 {left:581px; top: 467px; z-index:5;} .demo_check .d06 {left:536px; top: 438px; z-index:5;} .demo_check .d06::after {top:76px; left:55%;} .demo_check .d07 {left:264px; top: 223px; background: #15a3c2 url(/demo/img/pawanarekun_01.png) 10px 0px no-repeat;} .demo_check p, .demo_reserve p {border-radius:8px; animation:bghere 3s linear infinite forwards; white-space:nowrap;} @keyframes bghere {0%{background:#15a3c200;}50%{background:#15a3c280;}100%{background:#15a3c200;}} html:has(#demo.px-1000), #demo.px-1000 {height:100%;} #demo.px-1000 .wrapper {display:grid; grid-template-rows:auto 1fr; height:100%;} #demo.px-1000 .top {padding:32px 20px 0; border-bottom:1px solid #898989; background:#F9F9F9; } #demo.px-1000 .top .group {margin-bottom:24px; transform:translateX(-80px);} #demo.px-1000 .top .group a.logo {display:block; width:256px; margin:0 auto 24px;} #demo.px-1000 .top .group p {text-align:center;} #demo.px-1000 .top .tab {display:flex; justify-content:center; align-items:end; gap:4px; transform:translateX(-80px);} #demo.px-1000 .top .tab a {display:flex; justify-content:center; align-items:center; gap:4px; width:280px; height:46px; padding:16px 0 14px; border:1px solid #898989; border-bottom:none; border-radius:8px 8px 0px 0px; background:#F4F2EF; font-size:18px; font-weight:bold; line-height:1; transition:all 0.05s ease-out; cursor:pointer;} #demo.px-1000 .top .tab a::before {font-family: 'Material Icons'; font-size:26px; font-weight:normal; transform:translateY(1px);} #demo.px-1000 .top .tab a:nth-of-type(1)::before {content:"\ebcc";} #demo.px-1000 .top .tab a:nth-of-type(2)::before {content:"\ef6e";} #demo.px-1000 .top .tab a.stay {height:56px; background:#fff; color:#333; transform:translateY(1px);} #demo.px-1000 .top .tab a.stay:hover {color:#333;} #demo.px-1000 .top .tab a.default {color:#15a3c290;} #demo.px-1000 .top .tab a.default:hover {height:54px; background:#e8f0f2; color:#15a3c2;} #demo.px-1000 .main {display:flex; justify-content:center; align-items:flex-start; gap:24px; padding:56px 0 80px; background:url('/demo/img/bg.jpg') no-repeat; background-color:rgba(255,255,255,0.6); background-blend-mode:lighten; background-size:cover; } #demo.px-1000 .main .flow {order:2; position:relative; width:160px; height:100%;} #demo.px-1000 .main .flow ul {position: absolute; top:24px; left:0;} #demo.px-1000 .main .flow ul li {position:relative;} #demo.px-1000 .main .flow ul li:not(:last-child) {padding-bottom:24px;} #demo.px-1000 .main .flow ul li:not(:last-child)::before {content:""; position:absolute; top:5px; left:9px; width:2px; height:100%; background:#898989;} #demo.px-1000 .main .flow ul li:not(:last-child)::after {content:""; position:absolute; top:5px; left:8px; width:4px; height:0%; background:#15a3c2; transition:all 1.5s linear;} #demo.px-1000 .main .flow.step2 ul li:nth-of-type(1)::after {height:100%;} #demo.px-1000 .main .flow.step3 ul li:nth-of-type(1)::after, #demo.px-1000 .main .flow.step3 ul li:nth-of-type(2)::after {height:100%;} #demo.px-1000 .main .flow.step4 ul li:nth-of-type(1)::after, #demo.px-1000 .main .flow.step4 ul li:nth-of-type(2)::after, #demo.px-1000 .main .flow.step4 ul li:nth-of-type(3)::after {height:100%;} #demo.px-1000 .main .flow ul li h2 {display:flex; align-items:center; gap:4px; position:relative; margin-bottom:4px; font-size:15px; font-weight:bold; color:#898989; z-index:2;} #demo.px-1000 .main .flow ul li h2 span {display:grid; place-content:center; width:20px; height:20px; border-radius:50%; background:#898989; color:#fff; font-size:12px; font-weight:bold; line-height:1;} #demo.px-1000 .main .flow ul li p {padding-left:24px; color:#898989; font-size:13px; font-weight:500; line-height:1.5; font-feature-settings:"palt"; text-align:justify;} #demo.px-1000 .main .flow ul li.stay h2 {color:#333;} #demo.px-1000 .main .flow ul li.stay h2 span {animation:stepbg 2.5s ease-out 1 forwards;} @keyframes stepbg {0%{background:#898989;}100%{background:#15a3c2;}} #demo.px-1000 .main .flow.step1 ul li:not(:nth-of-type(1)) h2, #demo.px-1000 .main .flow.step2 ul li:not(:nth-of-type(2)) h2, #demo.px-1000 .main .flow.step3 ul li:not(:nth-of-type(3)) h2, #demo.px-1000 .main .flow.step4 ul li:not(:nth-of-type(4)) h2 {color:#898989;} #demo.px-1000 .main .flow ul li p {color:#333;} #demo.px-1000 .main .flow.step1 ul li:not(:nth-of-type(1)) p, #demo.px-1000 .main .flow.step2 ul li:not(:nth-of-type(2)) p, #demo.px-1000 .main .flow.step3 ul li:not(:nth-of-type(3)) p, #demo.px-1000 .main .flow.step4 ul li:not(:nth-of-type(4)) p {color:#898989;} #demo.px-1000 .main .frame {order:1; width:auto; margin:0; padding:0 24px; border-radius:20px; border:28px solid #212121; background:#000; outline:4px solid #000000; outline-offset:-4px;} #demo.px-1000 .main .frame + p {margin-top:8px; color:#898989; font-size:10px; text-align:right;} #demo.px-1000 .main .flow .line {} /*company ------------------------------------------------------------------------------*/ #company .cname {margin:20px 0 90px;} #company .wmax iframe {width:100%; height:400px; margin:60px auto;} /*privacy ------------------------------------------------------------------------------*/ #privacy h1 {font-size:16px; margin:0;} /*support ------------------------------------------------------------------------------*/ #support section.wrap {width:100%; min-height:750px; background:#4B4B4B url('/support/img/bg.jpg') center center no-repeat; background-size:cover;} #support section.wrap .outer .inner {} #support section.wrap .outer .inner .group_list {} #support section.wrap .outer .inner .group_list ul {display:flex; flex-wrap:wrap; align-items:stretch; gap:20px;} #support section.wrap .outer .inner .group_list ul li {width:calc(100% / 3 - 14px); padding:24px; background:#fff; text-align:justify;} #support section.wrap .outer .inner .group_list ul li img {display:block; height:96px; margin:0 auto;} #support section.wrap .outer .inner .group_list ul li h5 {width:100%; max-width:230px; margin:8px auto 6px; padding:2px; border-radius:16px; background:#296583; color:#fff; font-weight:bold; font-size:16px; text-align:center;} #support section.wrap .outer .inner .group_list ul li h6 {margin:12px 0 4px; font-weight:bold; font-size:16px; text-align:center;} #support section.wrap .outer .inner .group_list ul li p {} /*flow ------------------------------------------------------------------------------*/ #flow section.wrap {width:100%; min-height:750px; background:#4B4B4B url('/flow/img/bg.jpg') top center no-repeat; background-size:cover;} #flow section.wrap .outer .inner .group_list ul {display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:20px;} #flow section.wrap .outer .inner .group_list ul li {display:flex; flex-direction:column; align-items:center; width:calc(100% / 3 - 14px); padding:24px; background:#fff; text-align:justify;} #flow section.wrap .outer .inner .group_list ul li .top {position:relative;} #flow section.wrap .outer .inner .group_list ul li .top img {display:block; height:96px; margin:0 auto;} #flow section.wrap .outer .inner .group_list ul li .top span {position:absolute; top:-4px; left:-4px;width:24px; height:24px; border-radius:50%; background:#333; color:#fff; font-weight:bold; line-height:1.7; text-align:center;} #flow section.wrap .outer .inner .group_list ul li .bottom {display:flex; flex-direction:column; align-items:center;} #flow section.wrap .outer .inner .group_list ul li .bottom h5 {width:100%; max-width:230px; margin:8px auto 12px; padding:2px; border-radius:16px; background:#296583; color:#fff; font-weight:bold; font-size:16px; text-align:center;} /*agent ------------------------------------------------------------------------------*/ #agent .work {width:720px; margin:10px auto 50px;} #agent .work li {background:#000; color:#fff; padding:12px 10px; margin:5px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px;} #agent .work li.li01 {width:200px; float:left; background:#769dd5 url('/agent/img/icon01.png') 10px bottom no-repeat; padding-left:70px;} #agent .work li.li02 {width:340px; float:left; background:#769dd5 url('/agent/img/icon02.png') 10px bottom no-repeat; padding-left:70px;} #agent .work li.li03 {float:left; background:#94c363 url('/agent/img/cara01.png') 10px 3px no-repeat; padding-left:110px;} #agent .formarea {margin:50px auto;} #agent .formarea table {margin:0 275px 0 auto;} #agent .sendpage {text-align:center;} #agent .sendpage table {width:auto; max-width:600px; margin:0 auto;} #agent .sendpage table td.btnarea {padding:8px; text-align:center;} /*seminar ------------------------------------------------------------------------------*/ #seminar .cover .path li a {color: #9D9D9D;} #seminar .cover {background:#EDF1F0 url('/info/seminar/20181021/img/cover.jpg') no-repeat; overflow:hidden; position:relative; width:100%; height:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #seminar .cover_contents {width:420px; word-break:normal;} #seminar .cover_contents .free {background:#E60024; color:#fff; font-size:130%; font-weight:bold; letter-spacing:10px; text-align:center; padding:5px; margin:10px 0 15px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;} #seminar h2 {font-size:270%; font-weight:bold; line-height:1.1; margin:0 0 4px 0;} #seminar h2 small {font-size:60%; margin-left:5px;} #seminar h2 img {width:100%;} #seminar h3 {font-size:115%; font-weight:bold; line-height:1.2; margin:0 0 10px 0;} #seminar h3 img {height:32px;} #seminar .day {font-size:180%; font-weight:bold; margin: 10px 0;} #seminar .day em {font-size:70%; font-style:normal;} #seminar .hosoku {border:1px dotted #ff0000; color:#ff0000; background:#fff; padding:10px; margin:30px 0;} #seminar .timeschedule {margin:30px 0 0;} #seminar .timeschedule ul {display:flex;} #seminar .timeschedule li {position: relative; color:#555; border: 4px dotted #ededed; width:29%; padding:1em; margin:2em 1em; border-radius: 7px 0 7px 0;} #seminar .timeschedule li:before, #seminar .timeschedule li:after {content: ''; position: absolute; width:10px; height: 10px; border: 3px solid #ededed; border-radius: 50%;} #seminar .timeschedule li:after {top:-12px; left:-12px;} #seminar .timeschedule li:before {bottom:-12px; right:-12px;} #seminar .timeschedule li em {display:block; font-style:normal; text-align:center;} #seminar .timeschedule li h5 {font-size:16px; height:40px; color:#000; margin:20px 0 10px; line-height:1.2;} #seminar .timeschedule li h5 p {display:inline; background:#FFFA94;} #seminar .timeschedule li p:nth-of-type(1){} #seminar .timeschedule li p:nth-of-type(2){font-size:11px; border-top:1px dotted #ddd; padding-top:10px; margin:15px 0 0 0;} #seminar .timeschedule li p strong {font-size:15px;} #seminar .timeschedule li p:nth-of-type(3){font-size:11px;} #seminar .formcomment {font-size:15px; text-align:center; border-top:5px solid #eee; padding:30px 0;} #seminar .formcontainer {display:flex;} #seminar .formcontainer .detail {width:43%; margin:30px 30px 0 0;} #seminar .formcontainer .detail tr {display:block; margin:0 0 20px 0;} #seminar .formcontainer .detail th {display:block; text-align:left; color:#b0b0b0; font-size:12px;} #seminar .formcontainer .detail td {display:block; text-align:left; font-size:16px; padding-left:10px;} #seminar .form {padding:20px; border:1px solid #eee; -moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); box-shadow:0 5px 5px rgba(0, 0, 0, 0.1);} #seminar .form input[type="radio"] {width:auto;} #seminar .form .hissu {color:#ff0000; font-style:normal;} #seminar .form .submit {text-align: center;} #seminar .form .submit input {width:auto; height:50px; padding:0 30px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;} #seminar .form textarea:focus, #seminar .form select:focus, #seminar .form input:focus {border: 1px solid #15A3C2;} #seminar .form .comment {font-size: 24px; padding:150px 0 0;} #seminar .thankscomment {position: relative; background:#fff; border: 2px solid #E60024; width:calc(90%); padding:2em 1em; margin:2em 0; border-radius: 3px 0 3px 0;} #seminar .thankscomment:before, #seminar .thankscomment:after {content: ''; position: absolute; width:10px; height: 10px; border: 2px solid #E60024; border-radius: 50%;} #seminar .thankscomment:after {top:-12px; left:-12px;} #seminar .thankscomment:before {bottom:-12px; right:-12px;} #seminar .thankscomment h3 {color:#E60024;} #seminar .near {position:absolute; right:10px; top:40px;} /*faq --------------------------*/ #faq input:focus {outline:none; border:1px solid #15A3C2;} #faq section.wrap .outer .inner .content {display:flex; gap:40px;} #faq section.wrap .outer .inner .content .left {flex-grow:1; width:calc(100% - 40px);} #faq section.wrap .outer .inner .content .left .noresults {padding:24px; border:1px solid #e6e6e6; border-radius:4px; background:#f3f9fc; text-align:center;} #faq section.wrap .outer .inner .content .left .noresults h6 {font-size:16px;} #faq section.wrap .outer .inner .content .left .noresults p {margin-top:16px;} #faq section.wrap .outer .inner .content .left .noresults a {margin-top:24px;} #faq section.wrap .outer .inner .content .left ul li h5 {display:none; padding:4px 12px; min-height:32px; border-radius:4px; background:#f4f2ef; font-size:14px; font-weight:bold; line-height:1;} #faq section.wrap .outer .inner .content .left ul li:has(dl.show) h5 {display:grid; place-items:center left;} #faq section.wrap .outer .inner .content .left ul li {max-width:780px; margin:0 auto;} #faq section.wrap .outer .inner .content .left ul li:has(dl.show):nth-child(n+2) {padding-top:32px;} #faq section.wrap .outer .inner .content .left ul li dl {border-bottom:1px solid #e6e6e6;} #faq section.wrap .outer .inner .content .left ul li dl dt {display:flex; justify-content:space-between; padding:24px; font-weight:bold; font-size:16px; cursor:pointer;} #faq section.wrap .outer .inner .content .left ul li dl dt .q {display:flex; justify-content:center; align-items:center; transform:translateY(1px); width:24px; height:24px; padding:0 12px; margin-right:8px; border-radius:4px; background:#15a3c2; color:#fff; font-size:14px; line-height:1;} #faq section.wrap .outer .inner .content .left ul li dl dt .title {flex-grow:1; text-align:justify; padding-right:24px; transform:translateY(2px);} #faq section.wrap .outer .inner .content .left ul li dl dt .icon {position:relative; height:24px; padding:0 12px;} #faq section.wrap .outer .inner .content .left ul li dl dt .icon::before, #faq section.wrap .outer .inner .content .left ul li dl dt .icon::after {position:absolute; top:11px; left:4px; width:16px; height:2px; background:#333; content:""; transition:all 0.5s ease-out;} #faq section.wrap .outer .inner .content .left ul li dl dt .icon::after {transform:rotate(-90deg);} #faq section.wrap .outer .inner .content .left ul li dl dt.active .icon::after {transform:rotate(0deg);} #faq section.wrap .outer .inner .content .left ul li dl dd {display:none; padding:0 72px 24px 54px; font-size:14px; text-align:justify;} #faq section.wrap .outer .inner .content .left ul li dl dd .notes {color:#898989; font-size:12px;} #faq section.wrap .outer .inner .content .left ul li dl dd .portal {margin-top:12px; padding:12px; background:#F7F7F7;} #faq section.wrap .outer .inner .content .left ul li dl dd .portal h6 {margin-bottom:4px ;font-size:12px; font-weight:bold;} #faq section.wrap .outer .inner .content .right {min-width:220px; width:220px;} #faq section.wrap .outer .inner .content .right h5 {margin-bottom:4px; color:#898989; font-size:12px; font-weight:bold;} #faq section.wrap .outer .inner .content .right .sticky {position:sticky; top:calc(152px + 48px);} #faq section.wrap .outer .inner .content .right .search .area {display:flex; gap:4px;} #faq section.wrap .outer .inner .content .right .search .area input {width:calc((100% - 4px) - 38px); height:40px;} #faq section.wrap .outer .inner .content .right .search .area button {display:grid; place-items:center; width:40px; height:40px; border-radius:4px; background:#15a3c2; color:#fff; font-size:24px; font-family:'Material Icons';} #faq section.wrap .outer .inner .content .right .category {margin-top:24px;} #faq section.wrap .outer .inner .content .right .category ul {display:flex; flex-wrap:wrap; gap:4px;} #faq section.wrap .outer .inner .content .right .category ul li {width:calc(50% - 2px);} #faq section.wrap .outer .inner .content .right .category ul li a {display:grid; place-items:center; width:100%; height:32px; border:1px solid #e6e6e6; border-radius:14px; color:#333;} #faq section.wrap .outer .inner .content .left:has(li dl) + .right .category li a {opacity:0.3; pointer-events:none;} #faq section.wrap .outer .inner .content .left:has(li dl) + .right .category li a:hover {background:#fff;} #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(1) dl.show) + .right .category li:nth-of-type(1) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(2) dl.show) + .right .category li:nth-of-type(2) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(3) dl.show) + .right .category li:nth-of-type(3) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(4) dl.show) + .right .category li:nth-of-type(4) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(5) dl.show) + .right .category li:nth-of-type(5) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(6) dl.show) + .right .category li:nth-of-type(6) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(7) dl.show) + .right .category li:nth-of-type(7) a, #faq section.wrap .outer .inner .content .left:has(li:nth-of-type(8) dl.show) + .right .category li:nth-of-type(8) a {opacity:1; pointer-events:auto;} #faq section.wrap .outer .inner .content .left:has(li dl.show) + .right .category li a:hover {border:1px solid #15a3c2; background:#15a3c210;} /*casestudy --------------------------*/ #casestudy .wrap {overflow:clip;} #casestudy .shoplogo {width:100vw; margin-left:calc(50% - 50vw);} #casestudy .content {display:flex; gap:40px; margin-top:72px;} #casestudy .content .left {flex-grow:1; width:calc(100% - 40px);} #casestudy .content .left .noresults {display:none; padding:24px; border:1px solid #e6e6e6; border-radius:4px; background:#f3f9fc; text-align:center;} #casestudy .content .left.none .noresults {display:block;} #casestudy .content .left .noresults h6 {font-size:16px;} #casestudy .content .left .noresults p {margin-top:16px;} #casestudy .content .left ul.prefectures {display:grid; gap:48px;} #casestudy .content .left ul.prefectures li h5 {display:grid; place-items:center left; margin-bottom:24px; padding:4px 12px; min-height:32px; border-radius:4px; background:#f4f2ef; font-size:14px; font-weight:bold; line-height:1;} #casestudy .content .left ul.prefectures li h5.noshop {display:none;} #casestudy .content .left ul.prefectures li ul.shoplist {display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px 20px;} #casestudy .content .left ul.prefectures li ul.shoplist li {display:grid; justify-items:start; align-content:flex-start;} #casestudy .content .left ul.prefectures li ul.shoplist li img {width:100%; margin-bottom:12px;} #casestudy .content .left ul.prefectures li ul.shoplist li .industrylist {display:flex; flex-wrap:wrap; gap:4px;} #casestudy .content .left ul.prefectures li ul.shoplist li .industry {padding:4px 12px; border-radius:4px; border:1px solid #e6e6e6; font-size:12px; text-box-trim:trim-both; line-height:1;} #casestudy .content .left ul.prefectures li ul.shoplist li p {margin-top:8px;} #casestudy .content .left ul.prefectures li ul.shoplist li h6 {display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; margin-top:2px; font-size:16px; font-weight:bold; line-height:1.3;} #casestudy .content .left ul.prefectures li ul.shoplist li h6 span {font-size:12px; font-weight:normal;} #casestudy .content .left ul.prefectures li ul.shoplist li h6 span::before {content:"("; padding-right:2px;} #casestudy .content .left ul.prefectures li ul.shoplist li h6 span::after {content:")"; padding-left:2px;} #casestudy .content .left ul.prefectures li ul.shoplist li a {order:5; display:flex; align-items:center; gap:4px; width:fit-content; margin-top:6px;} #casestudy .content .left ul.prefectures li ul.shoplist li a::before {content:""; display:block; width: 0; height: 0; border-style: solid; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #15a3c2; border-right: 0;} #casestudy .content .left ul.prefectures li ul.shoplist li a:hover::before {border-left:8px solid #333;} #casestudy .content .left p.comment {margin-top:48px; color:#898989; font-size:12px;} #casestudy .content .left.none p.comment {display:none;} #casestudy .content .right {min-width:220px; width:220px;} #casestudy .content .right .sticky {position:sticky; top:calc(152px + 48px);} #casestudy .content .right .sticky h5 {margin-bottom:4px; color:#898989; font-size:12px; font-weight:bold;} #casestudy .content .right .sticky .c_industry input[type="radio"] {display:none;} #casestudy .content .right .sticky .c_industry label {display:grid; align-items:center; width:fit-content; height:24px;} #casestudy .content .right .sticky .c_industry label:hover {background:#ECECEC;} #casestudy .content .right .sticky .c_prefectures {margin-top:24px;} #casestudy .content .right .sticky .c_prefectures ul {display:flex; flex-wrap:wrap; gap:4px;} #casestudy .content .right .sticky .c_prefectures ul li {width:calc(50% - 2px);} #casestudy .content .right .sticky .c_prefectures ul li a {display:grid; place-items:center; width:100%; height:32px; border:1px solid #e6e6e6; border-radius:14px; color:#333;} #casestudy .content .right .sticky .c_prefectures ul li a:hover {border:1px solid #15a3c2; background:#15a3c210;} #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(1)) + .right .c_prefectures ul li:nth-of-type(1) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(2)) + .right .c_prefectures ul li:nth-of-type(2) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(3)) + .right .c_prefectures ul li:nth-of-type(3) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(4)) + .right .c_prefectures ul li:nth-of-type(4) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(5)) + .right .c_prefectures ul li:nth-of-type(5) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(6)) + .right .c_prefectures ul li:nth-of-type(6) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(7)) + .right .c_prefectures ul li:nth-of-type(7) a, #casestudy .content .left:has(ul.prefectures li.hide:nth-of-type(8)) + .right .c_prefectures ul li:nth-of-type(8) a {opacity:0.3; pointer-events:none;} /*inquiry , catalog , contact , demoreq ------------------------------------------------------------------------------*/ #catalog .path li a, #contact .path li a {color:;} #demoreq h1, #catalog h1, #contact h1 {font-size:26px;} #inquiry .formarea {position:relative; width:100%; min-height:660px; overflow:hidden;} #demoreq .formarea {position:relative; width:100%; min-height:660px; overflow:hidden;} #catalog .formarea, #contact .formarea {position:relative; width:100%; min-height:660px; overflow:hidden;} #inquiry .formarea {background:#ffffff url('/inquiry/img/bg.jpg') top center no-repeat; min-height:850px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #demoreq .formarea {background:#ffffff url('/demoreq/img/bg.jpg') top center no-repeat fixed; min-height:750px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #catalog .formarea {background:#ffffff url('/catalog/img/bg.jpg') top center no-repeat; min-height:850px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #contact .formarea {background:#ffffff; min-height:1300px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #contact .slide01, #contact .slide02, #contact .sendpage, #catalog .slide01, #catalog .slide02, #catalog .sendpage {position:absolute; left:0; right:0; width:600px; height:700px; margin:auto; text-align:center;} #catalog .sendpage, #catalog .slide01 {top:80px;} #catalog .slide02 {top:800px;} #contact .slide01 {top:80px;} #contact .slide02 {top:800px;} #catalog ul.check li {float:left; width:280px; margin:10px;} #catalog ul.sending li {width:144px; font-size:12px;} #catalog ul.check input {display:none;} #catalog ul.check input[type="checkbox"]+label, #catalog ul.check input[type="radio"]+label {display:block; padding:10px 5px; cursor:pointer; color:#333333; background:#fff; border:1px solid #296583; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; vertical-align: middle; text-align:center;} #catalog ul.check input[type="checkbox"]+label:hover, #catalog ul.check input[type="radio"]+label:hover {border:1px solid #296583; background:#E7F1DA;} #catalog ul.check input[type="checkbox"]+label:active, #catalog ul.check input[type="radio"]+label:active {background:#94C363;} #catalog ul.check input[type="checkbox"]:checked+label, #catalog ul.check input[type="radio"]:checked+label {background:#94C363 url('/img/checked.png') 15px center no-repeat; border:1px solid #296583; color:#fff;} #catalog .topicpath {position:relative; left:20px; top:70px; background:url('/catalog/img/catalog_topicpath.png') no-repeat; background-position:0px 0px; width:150px; height:190px;} #catalog .topicpath.path03 {background-position:-300px 0px;} #catalog .topicpath.path04 {background-position:-450px 0px;} #contact .telbox {white-space: nowrap;} #contact .telbox em {font-size: 14px;font-weight:bold;font-style:normal;text-align:right;display:block;padding: 0 10px 0 0;} #contact .telbox p {font-size: 26px;font-weight: bold;color:#000;letter-spacing: -1px;} #contact .telbox p:before {content:url('/img/icon/freedial.png');} #contact .tel {margin:0 0 30px 0;} #contact .tel p {display:none;} #contact .mail {margin-top:50px;} #contact .mail input {background-image:url('/contact/img/mailicon.png'); background-repeat:no-repeat; background-position:center center;} #contact .telprev input {background-image:url('/contact/img/telicon.png'); background-repeat:no-repeat; background-position:center center; width:60px; height:60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;} #contact .mail input { animation: mail 2s ease-in-out infinite; -webkit-animation: mail 2s ease-in-out infinite; } @keyframes mail{ 0% {transform: translate(0px, 0px);} 50% {transform: translate(0px, 20px);} 100% {transform: translate(0px, 0px);} } @-webkit-keyframes mail { 0% {-webkit-transform: translate(0px, 0px);} 50% {-webkit-transform: translate(0px, 20px);} 100% {-webkit-transform: translate(0px, 0px);} } #contact .infobox {border:1px solid #94C363; background:#94C363; padding:20px 10px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px;} #contact .infobox a {color:#fff; text-decoration:underline;} #contact .kanryo {margin:12px 0 16px;} #contact .catalog {} #catalog .tel {margin:0 auto 40px;} #catalog .tel a {color:#fff; padding:10px 10px 10px 38px; background:#15A3C2 url('/contact/img/telicon.png') 10px center no-repeat; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} #catalog .download {text-align:center;} #catalog .download .banner a {display:block; max-width:468px; margin:0 auto 24px; border:1px solid #ddd;} #catalog .download .banner a img {width:100%;} #catalog .download h1 {font-size:16px; font-weight:bold; margin-bottom:4px;} #catalog .download ul {} #catalog .download ul:after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} #catalog .download ul li {display: inline-block; width:260px; margin:10px;} #catalog .download ul li .button02 a {padding:14px 10px 10px;} #catalog .download ul li h3 {font-size:13px; font-weight:500; color:#333; padding:2px 20px; margin-bottom:12px; background:#fff; border:1px solid #bbb; border-radius:18px; display:inline-block;} #catalog .download ul li img {width:50%; box-shadow:0px 3px 3px rgba(0, 0, 0, 0.1); margin:0 auto 20px; display:block;} #catalog .download ul li p.pdf {width:160px; padding:6px 4px; margin:0 auto 4px; background:#15a3c2; border-radius:4px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display:flex; justify-content:center; align-items:center;} #catalog .download ul li p.pdf span {font-size:14px; font-weight:bold; color:#fff;} #catalog .download ul li p.pdf::before {content:""; width:20px; height:16px; background:url('/img/common/icon_pdf.png') no-repeat; background-size:14px auto; display:block;} #catalog .download ul li .button02 a:hover p.pdf {background:#277789;} #catalog .download ul li .button02 a:hover p.pdf span {} .inquirylink {margin:100px 0;} .inquirylink ul li {float:left; text-align:center; margin:10px 5px;} .inquirylink ul li a {display:inline-block; color:#fff; padding:20px 10px 10px; background:rgba(21,163,194,0.8);} .inquirylink ul li a:hover {background:rgba(21,163,194,1);} .inquirylink ul li a img {width:275px;} #formset {display:inline-block; margin:0 auto;} #formset dl {display:flex; border-top:1px solid #E6E6E6; border-bottom:1px solid #E6E6E6; padding:20px 90px; margin-top:-1px;} #formset dl dt {text-align:left; width:200px; padding:5px 0 0 0;} #formset dl dd {text-align:left;} #formset dl ul li {} #formset input, #formset select, #formset textarea {width:400px;} #formset input[type="radio"] {width:auto;} .contact_footercomment {background:#fff; font-size:12px; width:500px; padding:15px 10px; margin:10px auto; border:1px solid #ddd; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .contact_footercomment h6 {display: inline-block; font-size:12px; padding: 5px 20px; margin:0 0 10px 0; background:#eee; border-radius: 2em;} /*contact ------------------------------------------------------------------------------*/ #contact h1 {text-align:center;} #contact .sub_container {width:100%; box-sizing:border-box;} #contact .path {width:940px; margin:0 auto;} /*contact_thanks ------------------------------------------------------------------------------*/ #contact_thanks #a8sales {display:block; max-height:0;} #contact_thanks section.inner {} #contact_thanks section.inner .compo_group_title h2.title {margin:0 auto 32px;} #contact_thanks section.inner .compo_group_title h2.title span.caption {display:block; font-size:16px; text-align:center;} #contact_thanks section.inner .compo_group_title h2.title span.caption span {padding:0 2px;} #contact_thanks section.inner .compo_group_title h2.title span.caption img {display:inline-block; height:14px; margin-right:6px; letter-spacing:0.2px; transform:translateY(-1px);} #contact_thanks section.wrap.catalog .outer .inner .compo_group_title p {text-align:center;} #contact_thanks section.wrap.demoapply {background:#f4f4f4;} #contact_thanks section.wrap.demoapply .outer {max-width:100%; padding:0;} #contact_thanks section.wrap.demoapply .outer .inner {padding:96px 0 0;} #contact_thanks section.wrap.demoapply .outer .inner .compo_group_title p {text-align:center;} #contact_thanks section.wrap.demoapply .outer .inner .reserve iframe {width:100%; height:1960px} /*contact.error ------------------------------------------------------------------------------*/ #contact.error {} #contact.error .contents {max-width:600px; margin:24px auto; padding:24px;} #contact.error .contents .box {} #contact.error .contents .box .logo {} #contact.error .contents .box .logo a {display:block; max-width:280px; margin:0 auto;} #contact.error .contents .box .title {display:flex; justify-content:center; align-items:center; margin-top:24px;} #contact.error .contents .box .title h1 {font-size:20px; font-weight:bold; line-height:1.3;} #contact.error .contents .box .title img {transform:translateY(-4px); width:80px;} #contact.error .contents .box .error_text {margin-top:20px; text-align:center;} #contact.error .contents .box .error_text ul {width:246px; margin:12px auto; padding:16px; border:1px solid #ddd; border-radius:4px; background:#f3f3f3; text-align:left;} #contact.error .contents .box .bottom {margin-top:48px; text-align:center;} #contact.error .contents .box .bottom a {color:#15A3C2; text-decoration:underline;} #contact.error .contents .box .bottom a.btn {display:block; width:200px; margin:0 auto 32px; padding:16px 24px; border-radius:4px; background:#15A3C2; color:#fff; font-weight:bold; text-align:center; text-decoration:none;} /*contact_concise ------------------------------------------------------------------------------*/ #contact_concise .concise_header {width:100%; background:#fff; border-bottom: 1px solid #E6E6E6;} #contact_concise .concise_header > div {max-width:984px; height:56px; padding:0 24px; margin:0 auto; box-sizing:border-box; display:flex; justify-content:center; align-items:center;} #contact_concise .concise_header > div .logo img {width:100%; height:20px;} #contact_concise section.form {padding:32px 24px;} #contact_concise section.form h2 {font-size:14px; text-align:center;} #contact_concise .concise_footer {width:100%; padding:24px; box-sizing:border-box;} #contact_concise .concise_footer p {font-size:10px; text-align:center; color:#bbb;} /*contact_confirmation ------------------------------------------------------------------------------*/ #contact_confirmation .logo {margin: 40px;} #contact_confirmation .logo img {height: 45px;} #contact_confirmation .formTable {width: 99%; margin: 10px auto;} #contact_confirmation .formTable th, #contact_confirmation .formTable td {font-size: 1.4rem; font-weight: normal; border: 1px solid #ddd; padding: 5px 10px;} #contact_confirmation .formTable th {width: 170px; background:#f5f5f5; white-space: nowrap;} #contact_confirmation .formTable td {font-size: 1.6rem; border-left: 1px solid #ddd;} #contact_confirmation .buttons {display: flex; justify-content:center; margin: 20px auto;} #contact_confirmation .buttons input {font-size: 1.6rem; flex-grow: 3; box-shadow: 0 2px 0 rgb(17 123 147);} #contact_confirmation .buttons input[type="button"] {color: #333; background:#dbdbdb; flex-grow: 1; box-shadow: 0 2px 0 rgb(187 187 187); margin-right:10px;} /*onlinedemo ------------------------------------------------------------------------------*/ #onlinedemo section.wrap.top {background:#f4f4f4;} #onlinedemo section.wrap.top .outer .inner {padding:48px 0 0;} #onlinedemo section.wrap.top .outer .inner .compo_group_title {margin-bottom:0px;} #onlinedemo section.wrap.top .outer .inner .compo_group_title p {text-align:center;} #onlinedemo section.wrap.top .inner .pos {display:flex; justify-content:center; margin-bottom:16px;} #onlinedemo section.wrap.top .inner .pos img {width:100%; max-width:700px; margin-right:-94px;} #onlinedemo section.inner .compo_group_title h1.title {margin:0 auto 32px;} #onlinedemo section.inner .compo_group_title h1.title span.caption {display:block; font-size:16px; text-align:center;} #onlinedemo section.inner .compo_group_title h1.title span.caption span {padding:0 2px;} #onlinedemo section.inner .compo_group_title h1.title span.caption img {display:inline-block; height:14px; margin-right:6px; letter-spacing:0.2px; transform:translateY(-1px);} #onlinedemo section.wrap.demoapply .outer {max-width:100%; padding:0; background:#f4f4f4;} #onlinedemo section.wrap.demoapply .outer .inner {padding:64px 0 0;} #onlinedemo section.wrap.demoapply .outer .inner .reserve iframe {width:100%; height:1960px} #onlinedemo section.wrap.catalog .outer .inner .compo_group_title p {text-align:center;} /*form ------------------------------------------------------------------------------*/ .form input[type="submit"], .form input[type="button"]{ -webkit-appearance:none; color:#fff; background:#15A3C2; border:none; outline:none; padding:0; margin:20px 0; font-family:Arial, sans-serif; font-size:14px; text-transform:uppercase; font-weight:bold; cursor:pointer; width:100px; height:100px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form input[type="submit"]:hover, .form input[type="button"]:hover{ background:#20C0E5; border:none; } .form input[type="submit"]:disabled, .form input[type="button"]:disabled{ color:#8E8E8E; background:#333333; border:none; } input::-moz-focus-inner, button::-moz-focus-inner{ border:none; } .form .mail input[type="submit"], .form .mail input[type="button"], .form .next input[type="submit"], .form .next input[type="button"]{width:100px; height:100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;} .form .prev input[type="button"]{width:60px; height:60px; font-size:12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;} .form table {} .form table th {padding:8px; text-align:right; font-weight:normal;} .form table td {padding:8px; text-align:left;} .form table td>div {position:relative;} .form table td.btnarea {text-align:center;} .form .hissu {color:#94C363;} .form .hissuicon {background:url('/img/hissu.png') no-repeat; width:139px; height:40px; position:absolute; right:-130px; top:-4px;} .sendpage table {width:600px;} .sendpage table th {width:120px; padding:8px; text-align:right; font-weight:normal; color:#94c363;} .sendpage table td {padding:8px; text-align:left;} .sendpage table td.btnarea {padding:8px 135px 8px 0;} .form table td input, .form table td select, .form table td textarea {width:300px;} .form table td select.time {width:130px;} input[type="submit"], input[type="button"]{ color:#fff; background:#15A3C2; border:none; padding:15px 30px; margin:20px 0; font-family:Arial, sans-serif; font-size:14px; text-transform:uppercase; font-weight:bold; cursor:pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.5s; transition: all 0.5s; } input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="time"], input[type="number"], input[type="datetime"], input[type="month"], input[type="week"], input[type="date"], input[type="time"], select, textarea{border:0; font-size:14px; font-family:Arial, sans-serif; padding:10px; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.1); box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.1); } textarea:focus, select:focus, input:focus {outline:none; border:1px solid #296583;} .whiteform .toptext {margin:0 0 30px 0;} .whiteform .text {text-align:center; margin:0 0 30px 0;} .whiteform .text ul {display:inline-block; text-align:left; margin:0 0 20px 0;} .whiteform .res {position: relative; width:620px; background:#F5ECBD; padding:10px; margin:0 auto;} .whiteform .res:after {content: ""; position: absolute; top: -10px; left: 50%; margin-left: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #F5ECBD transparent;} .whiteform .comment {background:#fff; font-size:12px; width:500px; padding:15px 10px; margin:10px auto; border:1px solid #ddd; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .whiteform .form {margin:0 auto;} .whiteform .form table {margin:0 auto;} .whiteform .form table th {width:auto; white-space:nowrap;} .whiteform .form .hissu {display:inline-block; color:#F25130; background:#fff; border:1px solid #F25130; font-style:normal; font-size:12px; padding:2px 6px; margin:0 0 0 5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;} .whiteform table td input, .whiteform table td select, .whiteform table td textarea {width:350px;} .whiteform textarea:focus, .whiteform select:focus, .whiteform input:focus{ border: 1px solid rgba(242, 81, 48, 1); -webkit-box-shadow: 0 0 5px rgba(242, 81, 48, 0.9); -moz-box-shadow: 0 0 5px rgba(242, 81, 48, 0.9); box-shadow: 0 0 5px rgba(242, 81, 48, 0.9); } .whiteform input[type="submit"], .whiteform input[type="button"] {width:auto; height:auto; padding:20px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;} .whiteform input[type="radio"], .whiteform input[type="checkbox"] {width:auto;} .whiteform input[type="radio"] + label, .whiteform input[type="checkbox"] + label{display: inline-block; padding: 2px 5px;} .whiteform input[type="radio"]:checked + label span, .whiteform input[type="checkbox"]:checked + label span{background: #FFF670;} /*inc form_google.html ------------------------------------------------------------------------------*/ .master_form_google input, .master_form_google textarea, .master_form_google select {width:100%; height:48px; font-size:14px; font-family:'Noto Sans JP', sans-serif; line-height:1; padding:13px 16px; background:#fff; border:solid 1px #bbbbbb; border-radius:4px; outline:none; box-sizing:border-box;} .master_form_google textarea {min-height:320px; text-align:justify; line-height:1.6;} .master_form_google select {-webkit-appearance:none; -moz-appearance:none; appearance:none;} .master_form_google select option {padding:12px;} .master_form_google input[type="submit"] {max-width:216px; font-weight:normal; margin:24px auto 0 !important; background:#15A3C2; border:none; -webkit-box-shadow: 0 2px 0 rgb(17 123 147); -moz-box-shadow:0 2px 0 rgb(17 123 147); box-shadow:0 2px 0 rgb(17 123 147); display:block;} .master_form_google input:focus, .master_form_google textarea:focus, .master_form_google select:focus {border:solid 1px #15A3C2;} .master_form_google input::placeholder, .master_form_google textarea::placeholder, .master_form_google select::placeholder {font-size:14px; color:#bbb;} .master_form_google input::-webkit-input-placeholder, .master_form_google textarea::-webkit-input-placeholder, .master_form_google select::-webkit-input-placeholder {padding-top:0.2em;}/*--ios placeholder位置ずれ--*/ .master_form_google .style_select {width:100%; position:relative;} .master_form_google .style_select::after {content:""; width:0; height:0; margin-top:-4px; border-style:solid; border-width:8px 4px 0 4px; border-color:#000000 transparent transparent transparent; position:absolute; top:50%; right:16px;} .master_form_google .concise_header {width:100%; background:#fff; border-bottom: 1px solid #E6E6E6;} .master_form_google .concise_header > div {max-width:984px; height:56px; padding:0 24px; margin:0 auto; box-sizing:border-box; display:flex; justify-content:center; align-items:center;} .master_form_google .concise_header > div .logo img {width:100%; height:20px;} .master_form_google {width:100%; max-width:480px; padding:24px; margin:0 auto; box-sizing:border-box;} .master_form_google form .group > div {margin-top:24px; transition:all 1.0s ease;} .master_form_google form .group > div:nth-of-type(1) {margin-top:0;} .master_form_google form .group > div .any, .master_form_google form .group > div .ques {font-size:14px; margin-bottom:6px;} .master_form_google form .group > div .any::before, .master_form_google form .group > div .ques.req::before {content:"任意"; font-size:10px; font-weight:normal; color:#fff; line-height:1; padding:4px 4px; margin-right:4px; background:#bbb; border-radius:4px; transform: translateY(-1.6px); display:inline-block;} .master_form_google form .group > div .ques.req::before {content:"必須"; background:#8E7744;} .master_form_google form .group > div .box {margin-top:8px; transition:all 1.0s ease; will-change:transform;} .master_form_google form .group > div .box:nth-of-type(1) {margin-top:0;} .master_form_google form .group > div .box label {display:block;} .master_form_google form .group > div .ques span {font-size:10px; padding-left:12px;} .master_form_google form .group > div.industry .box.other {max-height:0; margin-top:0; opacity:0; visibility:hidden;} .master_form_google form .group > div.industry .box.other.show {max-height:100px; margin-top:8px; opacity:1; visibility:visible;} .master_form_google form .group > div.address {max-height:0; margin-top:0; opacity:0; visibility:hidden; transition:all 1.0s ease; will-change:transform;} .master_form_google form .group > div.address.show {max-height:200px; margin-top:24px; opacity:1; visibility:visible;} .master_form_google form .group > div.address .box label p {font-size:12px;} .master_form_google form .group > div.address .box label input {margin-top:2px;} .master_form_google form .group > div.address .box label.postcode {} .master_form_google form .group > div.address .box .area {width:100%; display:flex; justify-content:space-between;} .master_form_google form .group > div.address .box .area label {width:calc(50% - 6px); margin-bottom:8px;} .master_form_google form .group > div.address.show {} .master_form_google .privacy {text-align:center; margin-top:24px;} .master_form_google .privacy a {text-decoration:underline;} .master_form_google .contactcomment {max-width:480px; font-size:12px; padding:24px; margin:24px auto 0; background:#fff; border:1px solid #ddd; border-radius:4px;} .master_form_google .contactcomment p {text-align:justify;} .master_form_google .contactcomment a {text-decoration:underline;} /*404 ------------------------------------------------------------------------------*/ #page404 {background:#B3DDE6;} #page404 a {text-decoration:underline; color:#000;} #page404 .sub_container {margin:130px auto;} #page404 .pos {float:right;} #page404 .comment {float:left; padding-top:20px;} #page404 .logo img {height:25px;} #page404 .pos { animation: pos 1s ease-out 1; -webkit-animation: pos 1s ease-out 1; } @keyframes pos{ 0% {transform: translate(300px, 0px); opacity:0.0;} 100% {transform: translate(0px, 0px); opacity:1.0;} } @-webkit-keyframes pos { 0% {-webkit-transform: translate(300px, 0px); opacity:0.0;} 100% {-webkit-transform: translate(0px, 0px); opacity:1.0;} } /*------------------------------------------------------------------------------ common ------------------------------------------------------------------------------*/ .contrast, .opc {-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a:hover img.opc, .opc:hover {opacity:0.5;} .contrast:hover {-webkit-filter:contrast(120%); -moz-filter:contrast(120%); -ms-filter:contrast(120%); -o-filter:contrast(120%); filter:contrast(120%);} .invisible {display:none;} .sub_container {width:940px; padding:0 10px 30px; margin:0 auto;} .full_container {width:100%; height:100%;} .full_container table.full {width:100%; min-width:1100px;} .full_container table.full th {width:180px; background:#1E1E1E; color:#fff; font-weight:normal; vertical-align:middle; text-align:center;} .full_container table.full td {vertical-align:middle; text-align:center;} .full_container .logo {margin:20px 0 50px 0;} .full_container .logo a img {width:120px;} .wmax {width:100%;} .wmax .sub_container {padding:50px 10px;} .wmax.color01 {background:#f3f9fc;}/*オプション、サブ機能で使用*/ .wmax.fliparea {background:#F4F2EF; border-top:1px solid #E6E6E6;} .fliplist {text-align:center; padding:60px 0 10px;} .fliplist .pagetitle {padding:0;} .fliplist .viewport {position:relative; overflow:hidden; cursor:grab;} .fliplist .viewport:active {cursor:grabbing;} .fliplist .flipsnap {overflow:hidden; width:4800px;} .fliplist .flipsnap div {float:left; width:200px; padding:50px 20px; text-align:center;}/* widthやpaddingサイズ変更時はflipsnapのdistanceも変更*/ .fliplist .flipsnap div a {cursor:grab;} .fliplist .flipsnap div a:active {cursor:grabbing;} .fliplist .flipsnap div a img {-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .fliplist .flipsnap div a:hover img {opacity:0.5;} .fliplist .flipsnap a {color:#898989; display:block;} .fliplist .flipsnap strong {display:block; margin-top:10px; font-weight:normal; font-size:12px; line-height:1.2;} .fliplist .flipsnap p {font-size:11px; margin:10px 0 0; line-height:1.2;} .fliplist .flipsnap p.catch {display:none;} .fliplist .viewport .prev, .fliplist .viewport .next {position:absolute; top:120px; background:#333; color:#fff; width:5px; padding:30px 15px; cursor:pointer; opacity:0.6;} .fliplist .viewport .prev {background:#333 url('/img/button/arrow_left.png') center center no-repeat; left:0; border-radius:0 4px 4px 0; -webkit-border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0;} .fliplist .viewport .next {background:#333 url('/img/button/arrow_right.png') center center no-repeat; right:0; border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px;} .path {display:block; padding:15px 0; font-size:11px;} .path ul {clear:both;} .path ul::after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} .path li {float:left;} .path li a {display:block; background:url('/img/path.png') no-repeat; background-position:-0px -50px; padding-left:20px; color:#333333; line-height:24px;} .path li a:hover {color:#8E8E8E;} .path li:first-child a {background-position:-0px -0px; width:24px; height:24px; padding:0;} .path li:first-child span {display:none;} .path.light li a {background-position: 0px -150px; color:#fff; opacity:0.8;} .path.light li a:hover {opacity:1;} .path.light li:first-child a {background-position: 0px -100px;} .pagetitle {font-size:16px; padding:0 0 20px 0;} .infobox {border:1px solid #94C363; background:#94C363; padding:20px 10px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px;} .infobox a {color:#fff; text-decoration:underline;} .youtube {text-align:center;} .youtube iframe {width:840px; height:463px;} .contentlist {} .contentlist li {float:left; width:31.9%; height:auto; margin-left:20px; margin-bottom:50px;} .contentlist li:first-child {margin-left:0px;} .contentlist li .pic {overflow:hidden;} .contentlist li h3 {font-size:14px; text-align:center; margin:20px 5px 15px;} .contentlist li p {margin:0 5px; text-align:justify; word-break:normal;} .contentlist li .txtlink {margin-top:15px; text-align:right;} .contentlist li img {width:100%;} .contentlist li a img { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .contentlist li a img:hover {opacity:0.5;} .contentlist.clm4 li {width:23.4%; height:auto; margin-left:20px;} .contentlist.clm4 li:first-child {margin-left:0px;} .contentlist.clm4 li h3 {font-size:14px;} .contentlist.clm4 li p {font-size:12px;} /*マウスオーバーで画像拡大*/ .contentlink {padding:60px 0;} .contentlink li {float:left; position:relative; width:31.9%; margin-left:20px;} .contentlink li:first-child {margin:0px;} .contentlink li span {display:block; overflow:hidden;} .contentlink li strong {display:block; text-align:center; color:#000; font-weight:300; margin:5px 0;} .contentlink li img{width:100%; -webkit-transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; } .contentlink li:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1); } .txtlist {} .txtlist li {float:left; width:46.8%; padding:10px; margin:0 5px 10px; background:#fafafa;} .txtlist li h3 {font-size:12px; margin-bottom:10px;} .txtlist li p {font-size:12px;} .app_dl ul {display:flex; justify-content:center; margin:20px auto;} .app_dl ul li {margin:10px;} .app_dl ul li img {width:150px;} /*ノーマルテーブル*/ table.nt{} table.nt th, table.nt td {padding:2px 10px;} table.nt th {font-size:12px; font-weight:normal; color:#898989; text-align:right;} table.nt td {text-align:left;} table.nt td.space {padding:10px 0;} /*スペックテーブル*/ table.st {border-collapse:separate; border-spacing:10px;} table.st thead th {background:transparent; font-weight:bold; font-size:14px;} table.st th, table.st td {padding:10px;} table.st th {font-size:12px; font-weight:normal; background:#f5ecbd; text-align:left; white-space:nowrap;} table.st td {background:#f4f2ef; text-align:left;} ul.disc {margin-left:20px;} ul.disc li {list-style:disc;} .spinleft{ -webkit-animation: spinleft 2.0s linear infinite; -moz-animation: spinleft 2.0s linear infinite; -ms-animation: spinleft 2.0s linear infinite; -o-animation: spinleft 2.0s linear infinite; animation: spinleft 2.0s linear infinite; } @-webkit-keyframes spinleft { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(-360deg);} } @-moz-keyframes spinleft { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(-360deg);} } @-ms-keyframes spinleft { 0% {-ms-transform: rotate(0deg);} 100% {-ms-transform: rotate(-360deg);} } @-o-keyframes spinleft { 0% {-o-transform: rotate(0deg);} 100% {-o-transform: rotate(-360deg);} } @keyframes spinleft { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} } /*button ------------------------------------------------------------------------------*/ .button01 a {display:block; text-align:center; background:#15A3C2; color:#fff; padding:10px; -webkit-transition: all 0.5s; transition: all 0.5s;} .button01 a:hover {background-color:#20C0E5;} .button02 a {display:block; text-align:center; padding:10px; background-color:rgba(32,192,229,0.06); border:1px solid #20C0E5; -webkit-transition: all 0.5s; transition: all 0.5s;} .button02 a:hover {background-color:rgba(32,192,229,0.9);} .button_primary {display:flex; justify-content:center; align-items:center; width:100%; max-width:220px; height:56px; padding:16px; margin:0 auto; border-radius:4px; box-sizing:border-box; background:#15A3C2; color:#fff; font-weight:bold; font-size:16px; line-height:1.5; transition: all 0.5s;} .button_primary:hover {background-color:#20C0E5; color:#fff;} .button_secondary {display:flex; justify-content:center; align-items:center; width:100%; max-width:220px; height:56px; padding:16px; margin:0 auto; border:1px solid #15A3C2; border-radius:4px; box-sizing:border-box; background:#fff; color:#15A3C2; font-weight:bold; font-size:16px; line-height:1.5; transition: all 0.5s;} .button_secondary:hover {background-color:#d3ecf1; color:#20C0E5;} .button_primary.h_s, .button_secondary.h_s {height:48px; padding:0 16px;} .button_primary.h_xs, .button_secondary.h_xs {height:40px; padding:0 16px;} .txtlink a {background:url('/img/button/txtlink.png') right center no-repeat; padding-right:18px; margin-right:3px;} .txtlink a:hover {background-image:url('/img/button/txtlink_on.png');} /*web font ------------------------------------------------------------------------------*/ .NotoSans-Thin {font-weight: 100;} .NotoSans-Light {font-weight: 200;} .NotoSans-DLight{font-weight: 300;} .NotoSans {font-weight: 400;} .NotoSans-Medium{font-weight: 500;} .NotoSans-Bold {font-weight: 700;} .NotoSans-Black {font-weight: 900;} /*common ------------------------------------------------------------------------------*/ .underline {text-decoration:underline;} .fserif {font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;} /* 明朝体 */ .fsserif {font-family: 'Lucida Grande', "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;} /* ゴシック体 */ .fmono {font-family: "Osaka−等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace;} /* 等幅 */ .fe {font-family:'Roboto Condensed', sans-serif} .fb {font-weight:bold;} .f10 {font-size:10px; font-size:1.0rem;} .f11 {font-size:11px; font-size:1.1rem;} .f12 {font-size:12px; font-size:1.2rem;} .f13 {font-size:13px; font-size:1.3rem;} .f14 {font-size:14px; font-size:1.4rem;} .f15 {font-size:15px; font-size:1.5rem;} .f16 {font-size:16px; font-size:1.6rem;} .f17 {font-size:17px; font-size:1.7rem;} .f18 {font-size:18px; font-size:1.8rem;} .f19 {font-size:19px; font-size:1.9rem;} .f20 {font-size:20px; font-size:2.0rem;} .f21 {font-size:21px; font-size:2.1rem;} .f22 {font-size:22px; font-size:2.2rem;} .f23 {font-size:23px; font-size:2.3rem;} .f24 {font-size:24px; font-size:2.4rem;} .f25 {font-size:25px; font-size:2.5rem;} .f26 {font-size:26px; font-size:2.6rem;} .f27 {font-size:27px; font-size:2.7rem;} .f28 {font-size:28px; font-size:2.8rem;} .f29 {font-size:29px; font-size:2.9rem;} .f30 {font-size:30px; font-size:3.0rem;} .f31 {font-size:31px; font-size:3.1rem;} .f32 {font-size:32px; font-size:3.2rem;} .f33 {font-size:33px; font-size:3.3rem;} .f34 {font-size:34px; font-size:3.4rem;} .f35 {font-size:35px; font-size:3.5rem;} .f36 {font-size:36px; font-size:3.6rem;} .f37 {font-size:37px; font-size:3.7rem;} .f38 {font-size:38px; font-size:3.8rem;} .f39 {font-size:39px; font-size:3.9rem;} .f40 {font-size:40px; font-size:4.0rem;} .f41 {font-size:41px; font-size:4.1rem;} .f42 {font-size:42px; font-size:4.2rem;} .f43 {font-size:43px; font-size:4.3rem;} .f44 {font-size:44px; font-size:4.4rem;} .f45 {font-size:45px; font-size:4.5rem;} .fc {text-align:center;} .fl {text-align:left;} .fr {text-align:right;} .ft {vertical-align:top;} .img-l {float:left;} .img-r {float:right;} .clear {clear:both;} .clfx:after {content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} .center {margin:0 auto;} .mg10 {margin:10px;} .mg20 {margin:20px;} .mg30 {margin:30px;} .mg40 {margin:40px;} .mg50 {margin:50px;} .mgtb10 {margin:10px 0;} .mgtb20 {margin:20px 0;} .mgtb30 {margin:30px 0;} .mglr10 {margin:0 10px;} .mglr20 {margin:0 20px;} .mglr30 {margin:0 30px;} .mgr10 {margin-right:10px;} .mgl10 {margin-left:10px;} .mgt10 {margin-top:10px;} .mgt20 {margin-top:20px;} .mgt24 {margin-top:24px;} .mgt30 {margin-top:30px;} .mgt32 {margin-top:32px;} .mgt40 {margin-top:40px;} .mgt48 {margin-top:48px;} .mgt50 {margin-top:50px;} .mgt56 {margin-top:56px;} .mgt60 {margin-top:60px;} .mgt64 {margin-top:64px;} .mgt70 {margin-top:70px;} .mgt72 {margin-top:72px;} .mgt80 {margin-top:80px;} .mgt88 {margin-top:88px;} .mgt90 {margin-top:90px;} .mgt96 {margin-top:96px;} .mgt100 {margin-top:100px;} .mgb10 {margin-bottom:10px;} .mgb20 {margin-bottom:20px;} .mgb24 {margin-bottom:24px;} .mgb30 {margin-bottom:30px;} .mgb32 {margin-bottom:32px;} .mgb40 {margin-bottom:40px;} .mgb48 {margin-bottom:48px;} .mgb50 {margin-bottom:50px;} .mgb56 {margin-bottom:56px;} .mgb60 {margin-bottom:60px;} .mgb64 {margin-bottom:64px;} .mgb70 {margin-bottom:70px;} .mgb72 {margin-bottom:72px;} .mgb80 {margin-bottom:80px;} .mgb88 {margin-bottom:88px;} .mgb90 {margin-bottom:90px;} .mgb96 {margin-bottom:96px;} .mgb100 {margin-bottom:100px;} .pd10 {padding:10px;} .pd20 {padding:20px;} .pd30 {padding:30px;} .pd40 {padding:40px;} .pd50 {padding:50px;} .pdt5 {padding-top:5px;} .pdt10 {padding-top:10px;} .pdt20 {padding-top:20px;} .pdt30 {padding-top:30px;} .pdt40 {padding-top:40px;} .pdt50 {padding-top:50px;} .pdt60 {padding-top:60px;} .pdl10 {padding-left:10px;} .pdl20 {padding-left:20px;} .pdl30 {padding-left:30px;} .pdl40 {padding-left:40px;} .pdl50 {padding-left:50px;} .pdl60 {padding-left:60px;} .pdr10 {padding-right:10px;} .pdr20 {padding-right:20px;} .pdr30 {padding-right:30px;} .pdr40 {padding-right:40px;} .pdr50 {padding-right:50px;} .pdr60 {padding-right:60px;} .fkng {font-feature-settings:"palt";} .fls1 {letter-spacing: 0.05em;} .fls2 {letter-spacing: 0.1em;} .fls3 {letter-spacing: 0.15em;} .fls4 {letter-spacing: 0.2em;} .fls5 {letter-spacing: 0.25em;} .fls6 {letter-spacing: 0.3em;}