@charset "UTF-8"; body{ -webkit-text-size-adjust:100% !important; /* landscape時文字サイズ */ } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ /*Responsive[Tablet] ------------------------------------------------------------------------------*/ @media screen and (max-width:1024px){ html {margin-right:0px;} body {font-family: 'Noto Sans JP', sans-serif; word-break: break-all;} .master_pc_view {display:none;} .master_sp_view {display:block;} #container {margin-top:64px;} /*header,footer,container ------------------------------------------------------------------------------*/ .header_container {width:auto;} .header_container a { -webkit-transition: none; transition: none; } .header_container a:hover {opacity:1;} #header .navi {display:block; font-size:12px;} #header .navi ul li {margin:0 10px;} #header .navi ul li.sns {float:left;} #header .navi ul li.sns div {width: 33%;} #header .navi ul.sub {display:none !important;} #footer .footermap {width:90%;} #footer .footermap ul {display:block; float:left; width: 20%; padding: 0 15px;} /*header ------------------------------------------------------------------------------*/ header .top {display:none;} header .middle {height:64px;} header .middle section {height:100%; padding:0;} header .middle section .logo {height:100%;} header .middle section .logo a {padding:16px;} header .middle section ul {height:100%;} header .middle section ul li.catalog img {height:40px;} header .middle section ul li.freedial {display:none;} header .middle section ul li.contact_v2 a {padding: 10px;} header .middle section ul li.menu {width:64px; height:100%; padding:0;} header.nav_open .middle section ul li.menu::after {position:fixed; top:63px; right:0; width:63px; height:1px; background:#212121; content:"";} header .middle section ul li.menu {display:flex; flex-direction:column; justify-content:center; align-items:center;} header .middle section ul li.menu button {display:flex; flex-direction:column; justify-content:center; align-items:center;} header .middle section ul li.menu button .hamburger {position:relative; transform:translateY(-2px);} header .middle section ul li.menu button .hamburger span {display:block; opacity:1; position:absolute; top:0; left:-14px; width:28px; height:2px; border-radius:3px; background:#333; transition:all 0.3s ease-out;} header .middle section ul li.menu button .hamburger span:nth-of-type(1) {top:-8px;} header .middle section ul li.menu button .hamburger span:nth-of-type(3) {top:8px;} header.nav_open .middle section ul li.menu {background:#212121; color:#fff;} header.nav_open .middle section ul li.menu button .hamburger span {background:#fff;} header.nav_open .middle section ul li.menu button .hamburger span:nth-of-type(1) {top:0px; transform:rotate(45deg);} header.nav_open .middle section ul li.menu button .hamburger span:nth-of-type(2) {opacity:0; width:0;} header.nav_open .middle section ul li.menu button .hamburger span:nth-of-type(3) {top:0px; transform:rotate(-45deg);} header .middle section ul li.menu p {line-height:1; transform: translateY(16px); font-size:10px;} header .middle section ul li.menu p::after {content:"メニュー";} header.nav_open .middle section ul li.menu p::after {content:"閉じる";} header .bottom {display:block; opacity:0; overflow:hidden; height:auto; min-height:0px; max-height:0px; padding:0px; border-bottom:none; transition: all 1s ease;} header.nav_open .bottom {display:block; opacity:1; min-height:calc(100lvh - 63px); max-height:calc(100lvh - 63px); padding-bottom:48px; overflow-y:scroll;} header .bottom > section {flex-direction:column; padding:0;} header .bottom > section nav {width:100%;} header .bottom > section nav ul.category {flex-direction:column; align-items:flex-start;} header .bottom > section nav ul.category > li {border-bottom:1px solid #000;} header .bottom > section nav ul.category li {width:100%;} header .bottom > section nav ul.category li.acc .acc_title {display:flex; width:100%;} header .bottom > section nav ul.category li.acc .acc_title .acc_icon {display:flex; justify-content:center; align-items:center; position:relative; width:64px; border-left:1px solid #000; cursor:pointer;} /* +-アイコン*/ header .bottom > section nav ul.category li.acc .acc_title .acc_icon:hover {background:#e0f2f7;} header .bottom > section nav ul.category li.acc .acc_title .acc_icon::before, header .bottom > section nav ul.category li.acc .acc_title .acc_icon::after {display:block; position:absolute; background:#5d5d5d; content:""; transition:all 0.5s ease-out;} header .bottom > section nav ul.category li.acc .acc_title .acc_icon::before {width:12px; height:2px;} header .bottom > section nav ul.category li.acc .acc_title .acc_icon::after {width:2px; height:12px;} header .bottom > section nav ul.category li.acc.contents_open .acc_title .acc_icon {background:#e0f2f7;} header .bottom > section nav ul.category li.acc.contents_open .acc_title .acc_icon::after {transform:rotate(90deg);} /* ↑↓アイコン header .bottom > section nav ul.category li.acc .acc_title .acc_icon::after {font-family:'Material Icons'; font-size:20px; content:"\e5cf"; transition:all 0.3s ease-out;} header .bottom > section nav ul.category li.acc.contents_open .acc_title .acc_icon::after {transform:rotate(-180deg);} */ header .bottom > section nav ul.category li .title a, header .bottom > section nav ul.category li.acc .acc_title a {justify-content:space-between; flex-grow:1; height:56px; padding:0 20px 0 16px; font-weight:bold; font-size:16px;} header .bottom > section nav ul.category li .title a::after, header .bottom > section nav ul.category li.acc .acc_title a::after {font-family:'Material Icons'; font-weight:normal; font-size:20px; content:"\e5cc";} header .bottom > section nav ul.category li.acc.hover_show .acc_title a::after {transform:rotate(0deg);} header .bottom > section nav ul.category li.acc .acc_contents {display:block; opacity:0; overflow:hidden; position:relative; height:auto; max-height:0px; transition:all 1s ease-out;} header .bottom > section nav ul.category li.acc.contents_open .acc_contents {opacity:1; max-height:calc(64px * 4 + 32px);} header .bottom > section nav ul.category li.acc.contents_open .acc_contents.row8 {max-height:calc(64px * 8 + 32px);} header .bottom > section nav ul.category li.acc.contents_open .acc_contents.row10 {max-height:calc(64px * 10 + 32px);} header .bottom > section nav ul.category li.acc .acc_contents .outer {padding:0;} header .bottom > section nav ul.category li.acc .acc_contents .outer .ul_title {display:none;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li {width:50%; min-height:64px; border-right:1px solid #212121;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li:nth-child(2n) {border-right:none;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li:nth-child(n+3) {border-top:1px solid #212121;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a {display:flex; justify-content:space-between; align-items:center; padding:8px 16px;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a {padding:8px 12px;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a::after {display:block; margin-left:0px; font-family: 'Material Icons'; font-size:20px; content:"\e5cc";} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a::after {display:none;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a img {width:56px; margin:0;} header .bottom > section nav ul.category li.acc .acc_contents .outer ul li a span {flex-grow:1; padding-left:8px;} header .bottom > section .box_right {width:100%;} header .bottom > section .box_right .telbanner {display:flex; flex-direction:column; align-items:center; width:fit-content; min-width:288px; margin:32px auto 0; padding:12px 24px; border-radius:50px; background:#fff; color:#000;} header .bottom > section .box_right .telbanner a img {height:48px;} header .bottom > section .box_right ul.otherlist {display:flex; justify-content:center; margin-top:32px; gap:24px;} header .bottom > section .box_right ul.otherlist li {font-size:12px;} header .bottom > section .box_right ul.sns {justify-content:center; gap:24px; margin-top:32px;} header .bottom > section .box_right ul.sns li a {width:40px;} /*footer ------------------------------------------------------------------------------*/ footer > section {padding:12px 16px 24px;} footer > section > ul {flex-direction: column; gap:0;} footer > section > ul > li {width:100%;} footer > section > ul > li dl.acc dt {margin:0; padding:0; font-size:16px;} footer > section > ul > li dl.acc dt .acc_title {display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:8px 0px; cursor:pointer;} footer > section > ul > li dl.acc dt .acc_title .acc_icon {display:flex; justify-content:center; align-items:center; position:relative; width:48px; border-left:1px solid #000; cursor:pointer;} footer > section > ul > li dl.acc dt .acc_title .acc_icon::before, footer > section > ul > li dl.acc dt .acc_title .acc_icon::after {display:block; position:absolute; background:#fff; content:""; transition:all 0.5s ease-out;} footer > section > ul > li dl.acc dt .acc_title .acc_icon::before {width:12px; height:2px;} footer > section > ul > li dl.acc dt .acc_title .acc_icon::after {width:2px; height:12px;} footer > section > ul > li dl.acc.contents_open dt .acc_title .acc_icon::after {transform:rotate(90deg);} //footer > section > ul > li dl.acc dd {display:none;} /* スライド */ footer > section > ul > li dl.acc dd {opacity:0; max-height:0; padding-left:16px; overflow:hidden; transition:all 1s ease-out;} footer > section > ul > li dl.acc.row8 dd {transition:all 1.5s ease-out;} footer > section > ul > li dl.acc.contents_open dd {opacity:1; max-height:calc(40px * 4 + 36px);} footer > section > ul > li dl.acc.contents_open.row8 dd {opacity:1; max-height:calc(40px * 8 + 36px);} footer > section > ul > li dl.acc dd ul {display:flex; flex-wrap:wrap; padding:12px 0 24px;} footer > section > ul > li dl.acc dd ul li {width:50%;} footer > section > ul > li dl.acc dd ul li a {display:block; min-height:40px; padding:8px 0 ; font-size:14px;} footer .pagetop {display:none; background:transparent; width:auto; height:auto;} footer .pagetop span {display:none;} /*home ------------------------------------------------------------------------------*/ .sub_container {width:auto; padding:0 20px 30px;} #home .news {float:none; width:auto; height:auto;} #home .casio {width:auto; margin-right:20px;} /*function ------------------------------------------------------------------------------*/ #function .mainbox {margin-top:30px;} #function .mainbox .pic {float:none; width:auto; margin-right:0; text-align:center;} #function .mainbox .txt {float:none; width:auto;} #function .mainbox .txt h1 {text-align:center;} #function .sbox01 {margin:30px 0;} #function .sbox01 .txt {float:none; width:auto; padding:20px;} #function .sbox01 .pic {float:none; width:auto; text-align:center;} #function .livemembers {position:relative; height:auto; margin:0;} #function .livemembers>div {position:static;} #function .livemembers .wow {right:10px; top:-40px;} .funcsub dt {width:30%; text-align:center;} .funcsub dd {width:65%; margin-left:2%;} #function .inner.productspec .box {flex-direction:column;} /*spec ------------------------------------------------------------------------------*/ #spec .mainbox .pic {width:50%; margin-right:5%;} #spec .mainbox .pic .spimg {display:block; margin-bottom:30px;} #spec .mainbox .txt {width:45%;} #spec .posanime {display:none;} #spec .speclist table.st {float:none; width:100%;} /*management ------------------------------------------------------------------------------*/ #management .topmain {aspect-ratio:7 / 3;} #management ul.contents li {padding-left:0px; padding-right:0px;} #management ul.contents li h2 {font-size:20px;} #management ul.contents li.population {grid-template-columns:auto; justify-items:center;} #management ul.contents li.population h2 {grid-column:auto;} #management ul.contents li.ad .image {flex-wrap:wrap; margin-top:24px;} #management ul.contents li.ad .image img:nth-of-type(1) {width:100%; max-width:368px; height:auto; aspect-ratio:368 / 186;} #management ul.contents li.customer figure img, #management ul.contents li.impression figure img {margin:16px auto;} #management ul.contents li.customer figure figcaption, #management ul.contents li.impression figure figcaption {margin-bottom:24px;} /*example ------------------------------------------------------------------------------*/ /*inquiry , catalog , contact , demoreq ------------------------------------------------------------------------------*/ #catalog .topicpath {display:none;} /*portal ------------------------------------------------------------------------------*/ #main,#sidebar {width:auto !important; float:none !important;} #sidebar a {color:#15a3c2 !important;} /*contact_confirmation ------------------------------------------------------------------------------*/ #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 .inner .pos img {max-width:640px; margin-right:-20px;} /*404 ------------------------------------------------------------------------------*/ #page404 {} #page404 .sub_container {margin:40 auto; text-align:center;} #page404 .pos {float:none;} #page404 .comment {float:none;} /*------------------------------------------------------------------------------ common ------------------------------------------------------------------------------*/ section.outer {padding:0 20px;} .wmax .sub_container {padding:50px 20px;} .fliplist .viewport .prev, .fliplist .viewport .next {display:none;} .contentlist li {width:31%;} .contentlist.clm4 li {width:22.6%;} .contentlink li {width:31%;} .txtlist li {width:44.8%;} .app_dl ul {margin:20px 0 40px;} img{max-width:100%; height:auto; float:none;} iframe{max-width:100%; height:auto; float:none;} 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{ -webkit-appearance:none; font-size:17px; width:100%; padding:0.3em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } select{background:#fff;} /*inc form_google.html タブレット ------------------------------------------------------------------------------*/ .master_form_google input, .master_form_google textarea, .master_form_google select {font-size:14px; padding:13px 16px;} } /*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/ /*Responsive[SmartPhone] ------------------------------------------------------------------------------*/ @media screen and (max-width:667px), only screen and (max-width:480px) and (orientation:portrait) { /*common --------------------------*/ body {font-family: 'Noto Sans JP', sans-serif; word-break: break-all;} section.outer {padding: 0 20px;} section.inner {padding:72px 0;} h2 {font-weight:bold; margin-bottom:20px;} h1.title {gap:10px; margin-bottom:48px; padding:0; font-size:24px;} h2.title {gap:10px; margin-bottom:48px; padding:0; font-size:24px;} .compo_group_title h1.title span.d_block {display:block;} .compo_group_title h2.title span.d_block {display:block;} .compo_linkarrow.sp_var {display:flex !important; justify-content:space-between; align-items:center; width:100%; height:44px; padding:0 16px; border:1px solid #15A3C2; background:#fff;} .compo_linkarrow.sp_var::after {transform:translateY(0px);} ul.compo_list {justify-content: center;} ul.compo_list > li {width:100%;} ul.compo_list.sp_column_2 {gap:10px;} ul.compo_list.sp_column_2 li {width:calc(100% / 2 - 5px);} .compo_slick .slide_items .slick-slide a {padding:0 8px;} .compo_slick .slide_items .slick-arrow {top:calc(50% - 30px); width:24px; height:40px; padding:0;} .compo_slick .compo_group_title {padding:0 20px;} .compo_slick .area_button {padding:0 20px;} .area_button {margin-top:48px;} /*header,footer,container ------------------------------------------------------------------------------*/ #header {border-bottom:1px solid #E6E6E6;} .header_container {width:auto; height:auto; padding:0px; min-width:320px;} #header .logo {padding:0 0 0 10px;} #header .logo a {display:block; width:115px; height:55px; background:url('/img/header/logo.png') no-repeat; background-size:auto 55px;} #header .menu {float:right; padding:9px 0 0 0;} #header .menu a {color:#000; font-size:14px;} #header .menu ul li {float:left; padding:0 5px 0 15px; border:none;} #header .menu ul li:first-child {padding:0;} #header .menu ul li.catalog a {display:block; background:none; width:auto; height:40px; line-height:40px;} #header .menu ul li.contact {display:none;} #header .menu ul li.contact a {display:block; background:none; width:auto; height:40px; line-height:40px;} #header .menu ul li span {display:block;} #header .spmenu {display:block; float:right; padding:15px 10px 0 0; width:40px; height:40px; background:url('/img/header/icon_menu.png') center center no-repeat; background-size:40px 40px;} #header .spmenu span {display:none;} #header .spmenu.close {background:url('/img/header/icon_menu_x.png') center center no-repeat; background-size:40px 40px;} #header .navi {display:none; color:#232323; height:auto; font-size:14px; box-shadow: 0px 6px 6px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 6px 6px rgba(0,0,0,0.3); -moz-box-shadow: 0px 6px 6px rgba(0,0,0,0.3);} #header .navi ul {width:auto; padding:0; background:#333333;} #header .navi ul li {float:left; width:49.7%; margin:0; text-align:center; border-bottom:1px solid #4D4D4D; border-right:1px solid #4D4D4D;} #header .navi ul li a {padding:3px 15px;} #header .navi ul li.home {float:none; width:100%;} #header .navi ul li.company {display:block;} #header .navi ul li.agent a {font-size:14px; background:#333333; height:39px; line-height:39px; padding:3px 15px; margin:0; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; -ms-border-radius:0px;} #header .navi ul li.facebook {} #header .navi ul li.facebook a {text-indent:0px; background:url('/img/icon/facebook_square.png') 10px center no-repeat; width:auto;} #header .navi ul.sub {display:block !important; width:auto; position:static; background:transparent; padding:0; border-top:1px solid #4D4D4D; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;} #header .navi ul.sub li {float:left; width:100%; margin:0;} #header .navi ul.sub li a {color:#CBCBCB !important; background:#333333 !important;} #container {margin-top:64px;} #footer {border-top:1px solid #4F4F4F;} #footer .pagetop {background:transparent; width:auto; height:auto;} #footer .pagetop span {display:none;} #footer .footermap {display:none;} #footer .footer_container {display:block; width:auto; padding:0 0 10px 0;} #footer .footer_container ul {width:100%; margin:0 auto 20px;} #footer .footer_container ul li {width:50%; float:left; margin:0; text-align:center; border-bottom:1px solid #4F4F4F;} #footer .footer_container ul li a {display:block; padding:0; height:40px; line-height:40px;} #footer .footer_container ul li:nth-child(odd) a{border-right:1px solid #4F4F4F;} .contactbox li {float:none; width:90%; height:auto; padding:20px 0 0 0; margin:0 auto 30px; text-align:center; border-left:none; border-top:1px solid #E6E6E6;} /*home ------------------------------------------------------------------------------*/ #home h1 {color:#9B9B9B; font-size: 10px; padding: 0 20px; margin: 75px 0 0 0;} #home .main {margin:0;} #home .main h2 {margin:0 0 20px 0;} #home .main .read {font-size:14px;} #home .main .read p {display:inline;} #home .main .mainimage .image {float:none; margin:20px 0 0 0;} #home .main .mainimage .contact {float:none; margin:0 0 15px 0;} #home .main .mainimage+p {text-align:left;} #home .main dl {margin:20px 0 0 0;} #home .sglite {padding-top:0px;} #home .sglite .photo {width:auto; margin:0 auto;} #home .sglite h1 {left:10px; bottom:15px;} #home .demobanner {display:none;} #home .demobanner_sp {display:block; width:auto; margin:40px auto 0px;} #home .newslist {float:none; width:auto; height:auto; margin:0;} #home .newslist li a em {display:block; width:auto;} #home .newslist li a p {display:block; margin-bottom:10px;} #home .banner {display:none; float:none; margin:0;} #home .main2 {display:none;} #home .mainsp {display:block;} #home .mainsp .tel {background:#1E1E1E; padding:20px; text-align:center;} #home .mainsp .tel img {width:65%;} .sub {padding:0 0 0 0;} #home .casio {display:none;} #home .portal ul {display: block; margin: 0 auto;} #home .portal ul li {float:none; width:auto; margin:20px;} #home .portal ul li p {font-size:14px; white-space: normal; overflow: auto;} #home .upinfo ul li {width:100%;} #home .upinfo ul li h2 {} #home .upinfo ul li .image {} #home .txtinfo {margin:30px auto 0; width:auto;} #home .txtinfo b {margin:5px 0;} #home .txtinfo h3 {color:#343434; font-size:18px;} #home section.maintop .bg {display:none;} #home section.maintop .maintopimg_sp {display:block; padding: 20px 10px 10px;} #home section.maintop .outer {padding:0px;} #home section.maintop .outer .box {max-width:100%; padding:32px 0 64px;} #home section.maintop .outer .box .area {padding:0 12px; align-items: center;} #home section.maintop .outer .box h1 {padding:6px 16px; margin:0; font-size:14px;} #home section.maintop .outer .box h2 {margin-top:12px; font-size:24px;} #home section.maintop .outer .box h2 span {font-size:22px;} #home section.maintop .outer .box ul {gap:1px; margin:0;} #home section.maintop .outer .box ul li {width:calc(100% / 4 - 1px); font-size:11px; white-space:nowrap;} #home section.maintop .outer .box ul li h3 {font-weight:normal;} #home section.maintop .outer .box ul li.f_xs h3 {font-size:11px; transform:scale(0.9);} #home section.maintop .outer .box ul.c2 {width: 100%; margin:-30px 0 5px;} #home section.maintop .outer .box .button {margin-top:32px;} #home section.maintop .outer .box .button a.button_primary {height:52px;} #home section.maintop .outer .box .button a.button_primary::after {top:-1px; left:8px; width:90px; height:62px; background-size:90px 62px;} #home section.maintop .outer .box .fukidashi {transform:translateY(52px);} #home section.maintop .outer .box .side {display: flex; margin: 0;} #home section.maintop .outer .box .side p {font-weight: 500;font-size: 14px;} #home section.maintop .outer .box h3 {font-size: 14px; line-height:1.8;} #home section.maintop .outer .box .point {width: 85vw; display: block; text-align: center; margin: 10px 0;} #home section.maintop .outer .box .point div {width: 100%; margin: 0 0 10px;} #home section.maintop .outer .box .point div img {float: left; padding: 10px 0 0 30px;} #home section.wrap.topslide .slick-slide {width:80px;} #home section.wrap.topslide .slider .image p {width:calc(100% - 1px); margin:4px auto 0px; padding:4px 0px; font-size:10px; } #home section.wrap.topslide .slider .image p span {display:block; transform:translateY(0px) scale(0.8);} #home section.wrap.campaign h4 {font-size:14px;} #home section.wrap.campaign h4 .zero {font-size:40px;} #home section.wrap.campaign h4 .en {font-size:20px;} #home section.wrap.aspos .compo_group_title {margin-bottom:0;} #home section.wrap.aspos .compo_group_title h4 {font-size:20px;} #home section.wrap.aspos .poscolors {flex-direction: column; margin-top:48px; padding-bottom:60%;} #home section.wrap.aspos .poscolors .left {order:2;} #home section.wrap.aspos .poscolors .left ul li {top:-12px; left:0;} #home section.wrap.aspos .poscolors .left ul li img {transform:scale(1.2);} #home section.wrap.aspos .poscolors .right {order:1;} #home section.wrap.aspos .poscolors .right ul {justify-content:center; gap:2px;} #home section.wrap.aspos .poscolors .right ul li::before {width:40px; height:40px;} #home section.wrap.aspos .poscolors .right ul li span {padding:2px 6px; white-space:nowrap;} #home section.wrap.usageindustry .outer .inner .group_list ul {gap:10px;} #home section.wrap.usageindustry .outer .inner .group_list ul li {width:calc(100% / 2 - 5px); max-width:100%;} #home section.wrap.usageindustry .outer .inner .group_list ul li a > div {padding:16px 12px;} #home section.wrap.usageindustry .outer .inner .group_list ul li a > div p.category {width:auto; padding:4px; font-size:13px;} #home section.wrap.worry ul.compo_list > li .text {padding:16px; text-align:left;} #home section.wrap.worry ul.compo_list > li .text p {text-align:justify;} #home section.wrap.worry ul.compo_list > li .text p span {display:inline;} #home section.wrap.flow .outer .inner .group_list ul {gap:10px;} #home section.wrap.flow .outer .inner .group_list ul li {width:calc(100% / 2 - 5px); max-width:100%; padding:16px;} #home section.wrap.flow .outer .inner .group_list ul li .bottom h5 {min-width:auto; margin:16px auto 12px; font-size:14px;} #home section.wrap.support .outer .inner .group_list ul li {width:100%;} #home section.wrap.faq .outer .inner .group_list ul li dl dt {padding:24px 0;} #home section.wrap.faq .outer .inner .group_list ul li dl dd {padding:0 0 24px 0;} /*guide ------------------------------------------------------------------------------*/ #guide .topmain {background:#015b90 url('/guide/img/mainbg_sp.jpg') center center no-repeat; background-size:cover;} #guide .topmain .image {padding:40px 0;} #guide section.inner .compo_group_title {margin-bottom:16px;} #guide section.inner .compo_group_title h1.title {margin-bottom:0;} #guide .featureslist01 ul li .box {flex-direction:column; gap:0px;} #guide .featureslist01 ul li .box .group_text {order:2; width:100%; font-size:14px;} #guide .featureslist01 ul li .box .group_text .number {transform:translateY(-24px);} #guide .featureslist01 ul li .box .group_text .area {padding:32px 0 0 0;} #guide .featureslist01 ul li .box .group_text .area h3 {font-size:18px; text-align:center;} #guide .featureslist01 ul li .box .group_img {order:1;} #guide .featureslist01 ul li .box .group_img img {transform:translateY(0px);} #guide .request .box ul {flex-direction: column;} #guide .support .box ul {flex-direction:column; gap:48px;} #guide .support .box ul li {max-width:100%; padding:0;} #guide .support .box ul li div.mgt32 {margin-top:24px;} #guide .wrap.contact .inner {padding:24px 0;} /*function ------------------------------------------------------------------------------*/ #function .mainbox {margin-top:0;} #function .sbox01 .pic img {margin:10px;} #function .livemembers .wow {left:90px; top:-20px;} .funcsub dt {float:none; width:auto;} .funcsub dd {float:none; width:auto; margin-left:0;} #function .oneframe > a {min-width:100%;} #function .oneframe {flex-direction:column; align-items:center;} #function .oneframe img {width:100%; max-width:100%; margin-inline:auto;} #function .oneframe hgroup h3 {text-align:center;} #function .oneframe hgroup .txtlink {margin-top:20px;} /*function powerec.html ------------------------------------------------------------------------------*/ #function.powerec .industrycase dl {padding:32px 20px;} #function.powerec .industrycase dl dd {flex-direction:column; align-items:center;} #function.powerec .industrycase dl dd p {margin-bottom:24px;} #function.powerec .industrycase dl dd h4 {text-align: center;} #function.powerec .industrycase dl dd hgroup{display:grid; grid-template-columns:auto; justify-items:center;} #function.powerec .compo_linkarrow.sp_var {height:auto; padding:12px 16px; line-height:1.2; box-sizing:border-box;} #function.powerec .compo_linkarrow::after {width:16px;} /*function pointsystem.html ------------------------------------------------------------------------------*/ #function.pointsystem .merit .inner {padding:0 20px;} #function.pointsystem .merit dl dt {flex-direction:column-reverse;} #function.pointsystem .merit dl dt img {width:100%; margin-left:0;} #function.pointsystem .merit dl dd {grid-template-columns:1fr;} #function.pointsystem .merit dl dd h5 {grid-column:1 / 2;} #function.pointsystem .merit dl dd img {max-width:none;} /*spec ------------------------------------------------------------------------------*/ #spec .mainbox {margin-top:0;} #spec .mainbox .pic {float:none; width:auto; margin-right:0; text-align:center;} #spec .mainbox .pic .spimg {display:block; padding: 0 24px; margin-bottom:30px;} #spec .mainbox .txt {float:none; width:auto;} #spec .posanime {display:none;} #spec .speclist table.st {float:none; width:100%;} #spec .specification .box {flex-direction: column;} #spec .specification .box .box_right .cashdrawer img {display:block; margin:0 auto 12px;} /*example ------------------------------------------------------------------------------*/ #example .page01 .txt {padding:20px; margin-left:15%;} #example .page02 .txt {padding:20px; margin-right:15%;} #example .spimage {display:block; height:auto;} .examplelist h1 span {display:block;} .examplelist .listtop div {float:none; width:90%; padding:0px 10px 40px; margin: 0 auto; text-align:center;} #example .case .shoptext {float:none; width:auto; margin-right:0;} #example .case .shopimg {float:none; margin:20px 0 0 0; text-align:center;} #example .case .img-l {float:none; margin:20px auto; text-align:center;} #example .case .img-r {float:none; margin:20px auto; text-align:center;} #example .case .text {margin:0 0 40px 0;} #example .case .img-r+.text {width:auto;} #example .case .group_value .box_pkcomment .area_comment {width:calc(100% - 60px);} #example .case .group_value .box_pkcomment .area_pk span {width:60px; height:60px;} #example .examplelist .listtop {} #example .examplelist .listtop .datehtml {width:calc(100% / 2 - 6px); margin:0 0 12px 12px;} #example .examplelist .listtop .datehtml:nth-of-type(3n+1) {margin-left:12px;} #example .examplelist .listtop .datehtml:nth-of-type(2n+1) {margin-left:0;} #example .examplelist .listtop .datehtml.dummy {display:none;} #example .examplelist .listtop .datehtml a {padding:12px;} #example .examplelist .listtop .datehtml a:hover {} #example .examplelist .listtop .datehtml a img {} #example .examplelist .listtop .datehtml a p {font-size:12px;} #example .examplelist .listtop .datehtml a .type {padding:4px 8px; margin-bottom:2px;} #example .examplelist .listtop .datehtml a .shop {font-size:10px;} #example .examplelist .listtop .datehtml a .catch {} /*company ------------------------------------------------------------------------------*/ #company .cname {margin:20px 0 40px;} #company .wmax iframe {width:90%; height:300px;} /*support ------------------------------------------------------------------------------*/ #support section.wrap .outer .inner .group_list ul li {width:100%;} /*flow ------------------------------------------------------------------------------*/ #flow section.wrap .outer .inner .group_list ul li {width:100%; padding-top:48px;} #flow section.wrap .outer .inner .group_list ul li .top span {top:-30px; left:36px;} /*industry ------------------------------------------------------------------------------*/ #industry section.wrap .outer .inner ul li .box {flex-direction: column;} #industry section.wrap .outer .inner ul li .box .group_text {order:2;} #industry section.wrap .outer .inner ul li .box .group_text h2 {margin:0 auto; text-align:center;} #industry section.wrap .outer .inner ul li .box .group_text h4 {text-align:center;} #industry section.wrap .outer .inner ul li .box .group_img {order:1;} /*inds共有 ------------------------------------------------------------------------------*/ #inds section.wrap.topmain .outer .inner {flex-direction: column;} #inds section.wrap.topmain .outer .inner .group_text {order:2;} #inds section.wrap.topmain .outer .inner .group_text h1 p.phrase {font-size:20px;} #inds section.wrap.topmain .outer .inner .group_img {order:1;} #inds section.wrap.cont_second .outer .inner {flex-direction: column;} #inds section.wrap.cont_second .outer .inner .group_text h2 p.phrase {font-size:20px;} /*inds.clinic ------------------------------------------------------------------------------*/ /*agent ------------------------------------------------------------------------------*/ #agent .work {width:auto; margin:10px auto 60px;} #agent .work li {} #agent .work li.li01 {width:auto; float:none;} #agent .work li.li02 {width:auto; float:none;} #agent .work li.li03 {float:none; background-position:10px bottom;} #agent .formarea table {width:90%; margin:0 auto;} #agent .formarea table td.btnarea {width:100%;} #agent .sendpage table th.btnarea {width:30%; text-align:left;} #agent .sendpage table td.btnarea {width:50%; text-align:center;} /*seminar ------------------------------------------------------------------------------*/ #seminar .cover {background:#333 url('/info/seminar/20181021/img/cover_sp.jpg') right top no-repeat; overflow:hidden; position:relative; width:100%; height:100%;} #seminar .cover_contents {width:auto; text-align:center;} #seminar h2 {font-size:200%; font-weight:bold; margin:0 0 10px 0;} #seminar .timeschedule ul {display:block;} #seminar .timeschedule li {width:auto; margin:0 0 30px 0;} #seminar .timeschedule li h5 {height:auto; margin:20px 0 10px;} #seminar .form {width:auto;} #seminar .form .comment {padding:30px 0;} #seminar .form .comment p {display:inline;} #seminar .formcomment {text-align:left;} #seminar .formcomment b {display:block;} #seminar .formcontainer {display:block;} #seminar .formcontainer .detail {width:auto; margin:10px 0;} #seminar .near {right:0px; top:50px;} #seminar .near img {width:50px;} /*faq ------------------------------------------------------------------------------*/ #faq section.wrap .outer .inner .content {flex-direction:column; gap:24px;} #faq section.wrap .outer .inner .content .left {order:2; width:100%;} #faq section.wrap .outer .inner .content .left ul li dl dt {padding:16px 8px;} #faq section.wrap .outer .inner .content .left ul li dl dt .title {padding-right:8px; text-align:left;} #faq section.wrap .outer .inner .content .left ul li dl dd {padding:0 8px 16px;} #faq section.wrap .outer .inner .content .right {order:1; width:100%;} #faq section.wrap .outer .inner .content .right .sticky {position:static;} #faq section.wrap .outer .inner .content .right .search .area input {height:48px;} #faq section.wrap .outer .inner .content .right .search .area button {width:96px; height:48px;} #faq section.wrap .outer .inner .content .right .category {position:relative;} #faq section.wrap .outer .inner .content .right h5 {position:relative;} #faq section.wrap .outer .inner .content .right .category ul {flex-wrap:nowrap; position:relative; top:0; left:-20px; overflow-x:scroll; width:calc(100% + 40px); padding:0 20px 16px;} #faq section.wrap .outer .inner .content .right .category ul li {min-width:100px; width:auto;} #faq section.wrap .outer .inner .content .right .category ul li a {height:40px; border-radius:19px;} /*casestudy ------------------------------------------------------------------------------*/ #casestudy .content {flex-direction:column; gap:24px; margin-top:48px;} #casestudy .content .left {order:2; width:100%;} #casestudy .content .left ul.prefectures li ul.shoplist {grid-template-columns:1fr 1fr; gap:32px 10px;} #casestudy .content .right {order:1; width:100%;} #casestudy .content .right .sticky .c_industry ul {display:flex; flex-wrap:nowrap; gap:4px; position:relative; top:0; left:-20px; overflow-x:scroll; width:calc(100% + 40px); padding:0 20px 16px;} #casestudy .content .right .sticky .c_industry ul li label {min-width:100px; height:32px; padding:0 16px; border:1px solid #e6e6e6; border-radius:14px; color:#333; text-align:center; white-space:nowrap;} #casestudy .content .right .sticky .c_industry ul li label:hover {border:1px solid #15a3c2; background:#15a3c210;} #casestudy .content .right .sticky .c_prefectures {margin-top:4px;} #casestudy .content .right .sticky .c_prefectures ul {flex-wrap:nowrap; position:relative; top:0; left:-20px; overflow-x:scroll; width:calc(100% + 40px); padding:0 20px 16px;} #casestudy .content .right .sticky .c_prefectures ul li {min-width:100px; width:auto;} /*inquiry , catalog , contact , demoreq ------------------------------------------------------------------------------*/ #demoreq h1, #catalog h1, #contact h1 {font-size:20px;} #inquiry .formarea {width:auto; min-height:700px;} #catalog .formarea {width:auto; min-height:1000px;} #contact .formarea {width:auto; min-height:800px;} #contact .sendpage, #catalog .sendpage {margin-top:50px;} #contact .slide01, #contact .slide02, #contact .sendpage, #catalog .slide01, #catalog .slide02, #catalog .sendpage {width:auto; margin:20px; height:700px;} #catalog ul.check li {float:none; width:auto; margin:10px 20px;} #contact .tel p {display:block; font-size:12px; margin:5px 0;} #contact .tel a {} #contact .tel img {width:90%;} #catalog .download {padding-top:20px;} #catalog .download ul li {display:block; width:auto; margin:10px 0 0;} #catalog .download ul li img {width:40%;} .inquirylink {margin:30px 0;} .inquirylink ul li {float:none; margin:20px 0;} .inquirylink ul li a {} .inquirylink ul li a img {width:auto;} .whiteform .toptext {margin:30px 0;} .whiteform .toptext p {display:inline;} .whiteform .res {width:auto; text-align:left;} .whiteform .res p {display:inline;} .whiteform .comment {width:auto;} .whiteform .comment p {display:inline; text-align:left;} .whiteform input[type="radio"] + label, .whiteform input[type="checkbox"] + label{display: inline-block; padding: 5px;} #formset {display:block; margin:0 auto;} #formset dl {display:block; padding:20px;} #formset dl dt {text-align:left; width:auto; padding:5px;} #formset input, #formset select, #formset textarea {width:100%;} .contact_footercomment {width:auto; margin:10px;} .contact_footercomment p {display:inline; text-align:left;} .contact_footercomment h6 {display: block;} /*contact ------------------------------------------------------------------------------*/ #contact .topbanner .mgtb30 {margin-bottom:16px;} #contact .campaign {padding:24px 16px;} #contact .campaign dl dd:nth-of-type(1) {text-align:left;} #contact .worries img {margin:16px auto 24px;} /*contact_thanks ------------------------------------------------------------------------------*/ #contact_thanks section.wrap.catalog .outer .inner .compo_group_title p {text-align:justify;} #contact_thanks section.wrap.demoapply .outer .inner .compo_group_title {padding:0 20px;} #contact_thanks section.wrap.demoapply .outer .inner .compo_group_title p {text-align:justify;} #contact_thanks section.wrap.demoapply h2.title {font-size:22px; letter-spacing:-0.5px;} #contact_thanks section.wrap.demoapply .outer .inner .reserve {padding:10px;} #contact_thanks section.wrap.demoapply .outer .inner .reserve iframe {height:2220px} /*contact_concise ------------------------------------------------------------------------------*/ #contact_concise section.form {padding:16px 16px;} /*contact_confirmation ------------------------------------------------------------------------------*/ #contact_confirmation .formTable {width: 100%; margin: 10px auto;} #contact_confirmation .formTable tr {display: table; width: 100%; margin: 0 0 15px;} #contact_confirmation .formTable th, #contact_confirmation .formTable td {display: block; width: auto;} #contact_confirmation .buttons {margin: 0px auto 20px;} #contact_confirmation input[type="submit"] {width: auto;} #contact_confirmation input[type="button"] {width: auto; margin-right:10px !important;} /*onlinedemo ------------------------------------------------------------------------------*/ #onlinedemo section.wrap.top .outer .inner .compo_group_title p {text-align:justify;} #onlinedemo section.wrap.top h1.title {font-size:22px; letter-spacing:-0.5px;} #onlinedemo section.wrap.demoapply .outer .inner {padding:32px 10px 10px;} #onlinedemo section.wrap.demoapply .outer .inner .reserve iframe {height:2220px} #onlinedemo section.wrap.catalog .outer .inner .compo_group_title p {text-align:justify;} /*portal ------------------------------------------------------------------------------*/ #main,#sidebar {width:auto !important; float:none !important;} #main .post .bodytxt p, #main .page .bodytxt p {font-size:16px;} #main .post.list .thumb, #main .post.list .txt {display:block !important; float:none !important; width:auto !important;} #main .post.list .thumb {text-align:center; margin-bottom:10px;} #main .post.list .thumb img {width:auto !important; height:auto !important;} #sidebar ul li a {padding:10px 0; line-height:2.5;} .searchbox {display:none !important;} #portal03 .searchbox {display:block !important;} #portal03 .searchbox input {width:100%;} /*form ------------------------------------------------------------------------------*/ .form table {width:90%; margin:0 auto;} .form table th {width:auto; padding:3px; text-align:left; display:block; font-size:85%;} .form table td {width:auto; padding:3px; text-align:left; display:block; margin-bottom:10px;} .form table th.btnarea {float:left; width:25%;} .form table td.btnarea {text-align:center;} .form .hissuicon {background:url('/img/hissu_sp.png') no-repeat; width:100px; height:36px; position:absolute; right:0px; top:-27px;} .sendpage table {width:90%; margin:0 auto;} .sendpage table td.btnarea {padding:8px;} .form table td input, .form table td select, .form table td textarea {width:100%;} .form table td textarea {height:80px; line-height:1;} .form .text p {display:inline;} /*inc form_google.html スマホ ------------------------------------------------------------------------------*/ .master_form_google textarea {min-height:160px;} .master_form_google input, .master_form_google textarea, .master_form_google select {font-size:14px; padding:13px 16px;} /*------------------------------------------------------------------------------ common ------------------------------------------------------------------------------*/ .path {display:none;} .youtube iframe {width:300px; height:169px;} .contentlist li, .contentlist li:first-child {float:none; width:100%; height:auto; margin:0 auto 40px; text-align:center;} .contentlist li p {margin:0; text-align:justify;} .contentlist.fc li p {text-align:center;} .contentlist.clm4 li, .contentlist.clm4 li:first-child {float:none; width:100%; height:auto; margin:0 auto 50px;} .contentlist.clm4 li p {font-size:14px;} .contentlink {padding:30px 0;} .contentlink li {width:90%;} .contentlink li, .contentlink li:first-child {float:none; margin:30px auto; text-align:center;} .txtlist li {float:none; width:90%; height:auto !important; margin:0 auto 20px;} .txtlist li h3 {font-size:14px;} .txtlist li p {font-size:14px;} /*ノーマルテーブル*/ table.nt {width:95%; margin:0 auto;} table.nt th, table.nt td {padding:3px; text-align:left; display:block;} table.nt td.space {padding:10px 0;} /*スペックテーブル*/ table.st {width:100%; border-collapse:separate; border-spacing:10px;} table.st thead th {background:transparent; font-weight:bold; font-size:12px;} table.st th, table.st td {padding:5px;} table.st th {display:block; font-size:12px; font-weight:normal; background:#f5ecbd; text-align:left; white-space:nowrap;} table.st td {display:block; background:#f4f2ef; text-align:left;} /*button ------------------------------------------------------------------------------*/ .txtlink a {display:block; border:1px solid #15A3C2; padding:10px 16px; background-position:right 16px center; text-align:left;} .txtlink a:hover {border:1px solid #000;} .button_primary {max-width:100%;} }