@charset "utf-8"; /* CSS Document */ img{ max-width: 100%; } .notes { font-size: 10px; line-height: 14px!important; display: block; } /*アコーディオン*/ .accbox { /*margin: 2em 0;*/ padding: 0; max-width: 100%; } .ac-box{ margin-bottom: 50px; } .ac-box.ex{ margin-bottom: 0px; } .accbox label { display: flex; margin: 0px 0; padding : 0px; color :#2f8fcf; font-weight: bold; cursor :pointer; transition: all 0.5s; font-feature-settings : "palt"; } /*.accbox label:hover { background :#85baef; }*/ .accbox input { display: none; } .accbox label img{ width: 218px; display: block; /*float: left; vertical-align: bottom;*/ } /*.accbox label.label_w206 img{ width: 206px; }*/ .accbox label span{ color:#fff; font-size:20px; line-height: 1.3; float: left; display: block; } .accbox label span,.accbox label span{ display: inline-block; vertical-align: top; } .accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 1s; } .accbox .tri { background: #61C1BE; color:#fff; padding:10px 0; text-align: center; width: 100%; } .accbox .tri > span{ transform: rotate( -180deg ); display: block; font-size:12px; margin-left: auto; margin-right: auto; width: 100%; } .cssacc:checked + .tri > span{ transform: rotate( 0deg ); } .cssacc:checked + .accshow,.cssacc:checked + label + .accshow { height: auto; opacity: 1; } .cssacc:checked + .tri + .accshow { height: auto; background: #f9f4d4; opacity: 1; } .cssacc:checked + .tri + .accshow.ac-box-wrap{ padding: 35px 40px; } .accbox .accshow.ac-box-wrap{ padding: 0px 40px; } .nav-list ul li { background: #999999; } .nav-list ul li a{ color:#fff; font-size:15px; line-height: 1; display: block; padding:12px 0; text-align: center; width: 100%; } .nav-list ul li.current{ background: #61C1BE; } .about-box{ display:flex; justify-content:space-between; margin-bottom: 20px; } .about-box .left-box{ width: 20%; /*float: left;*/ margin-right: 36px; } .about-box .left-box img{ width: 100%; } .about-box .right-box h2 span{ font-size:31px; color:#61C1BE; line-height: 1.7; font-weight: bold; background: linear-gradient(transparent 80%, #fff100 0%); } .about-box .right-box{ width: 75%; /*float: left;*/ } .about-box .right-box p{ font-size: 13px; } /*横並びリスト*/ .itemArea { background: #89a8ce; padding: 0px 28px 28px; } .itemList { margin: 15px auto; } .itemList__item:not(:last-child) { margin: 0 0 0px; } .itemList__item img { width: 100%; height: auto; } .itemList__item .arrow-img img { width: 8px; height: auto; padding-left: 2px; } .itemList .link{ text-align: right; padding-top: 6px; line-height: 1; } .itemList .link a{ color:#fff; text-decoration: underline; } .safetybox h2{ text-align: center; font-size:21px; line-height: 1; background:#89a8ce; color: #fff; padding-top: 16px; padding-bottom: 16px; font-weight: bold; } .itemname{ padding-top: 10px; padding-bottom: 10px; text-align: center; font-size:17px; line-height: 1; color:#58c3e5; font-weight: bold; } .itemname_01 { letter-spacing: -1px; } .mes-box{ margin-top: 43px; display: flex; } .mes-tex{ width: 70%; /* float: left; */ position: relative; background: #58c3e5; color:#fff; margin-right: 50px; padding:30px 30px; box-sizing: border-box; } .mes-tex::after{ content: ""; background: url(../../guide/pcserver/img/com_arrow.png) no-repeat right center; background-size:contain; padding-top: 33px; width: 33px; position: absolute; right:-32px; top:78px; } .mes-tex a { color:#ffffff; text-decoration: underline; } .mes-img{ width: 174px; /*float: left;*/ } .mes-img_02{ width: 190px; } .label1,.label2,.label3{ width: 100%; background: #1b2d5a; } .label1:hover,.label2:hover,.label3:hover{ opacity: 0.7; } .link-btn-area{ text-align: center; } .link-btn02 { color:#4c4948; background: none; padding: 10px 0px; text-align: center; } .link-btn02::before { background:url(../img/link_arrow_bg02.png) no-repeat left top; background-size:100%; } .merit-box >div{ width: calc((100% - 40px) / 2); } .merit-box .merit-name{ text-align: center; font-size:16px; line-height: 1; background:#89a8ce; color: #fff; padding-top: 8px; padding-bottom: 8px; font-weight: bold; margin-bottom: 20px; } /*アコーディオンの中身*/ .illustbox{ /*padding:20px 0 10px 0;*/ padding:20px 0 0 0; background: #fff; margin-bottom: 25px; } .illustbox.no-illust{ padding-top: 50%; } .illust-pt{ color: #58c3e5; font-size: 19px; /*line-height: 1;*/ line-height: 1.5; font-weight: bold; text-align: center; margin-bottom: 5px; } .illust-tex{ font-size:14px; text-align: center; font-weight: bold; padding:100px 0; } .illust-img{ /*padding:0px 10px;*/ padding:0; position: relative; } .illust-img img{ width:100%; } .illust-img .illust-visual { width:100%; border: 0; } .illust-img .illust-samp_list { width: 12vw; max-width:150px; position: absolute; top: 50px; right: 30px; } .illust-img .illust-samp_list.ex { top:10px; } .illust-img .illust-samp_list_03 { top:40px; } .illust-img .illust-samp01, .illust-img .illust-samp02 { /*max-height: 150px;*/ text-align: center; } .illust-img .illust-samp01 img, .illust-img .illust-samp02 img { max-height: 130px; width:auto; } .illust-img .illust-samp_list_02 { /*max-width:180px;*/ } .illust-img .illust-samp_list_02 .illust-samp01, .illust-img .illust-samp_list_02 .illust-samp02 { max-width:180px; max-height: none; } .illust-img .illust-samp_list_02 .illust-samp01 img, .illust-img .illust-samp_list_02 .illust-samp02 img { /*max-width:180px; max-height: none;*/ } .illust-img .img_wide img, .illust-img .img_wide img { max-height: none; } .illust-img .illust-samp01 { /*width:auto; max-width:130px; position: absolute; top:100px; right: 50px;*/ } .illust-img .illust-samp02 { /*width:auto; max-width:130px; position:relative;*/ } .case-box{ margin-bottom: 40px; padding-bottom: 25px; border-bottom: 1px solid #89a8ce; } .case-box2{ margin-bottom: 40px; padding-bottom: 25px; border-bottom: none; } .case-box3{ margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid #9fa0a0; } .ac-head1{ font-size:19px; line-height: 1; background: #89a8ce; color:#fff; padding:12px 0; margin-bottom: 20px; font-weight: bold; text-align: center; } .ac-head1-mini1{ margin-bottom: 15px; color: #6a8ab1; font-size:17px; font-weight: bold; } .ac-head1-mini1 .ac-head1-mini1_sub-txt { font-size:18px; letter-spacing: -1px; } .ac-head2{ font-size:19px; line-height: 1; background: #1b2d5a; color:#fff; padding:12px 0; margin-bottom: 20px; font-weight: bold; text-align: center; } .ac-head3{ font-size:27px; line-height: 1; background: #f39800; color:#fff; padding:10px 0; margin-bottom: 30px; font-weight: bold; text-align: center; } .ac-text1 { margin-bottom: 10px; } /*flex box*/ .flex_box { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex_r-c { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex_r { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex_c { display: -webkit-box; display: -ms-flexbox; display: flex; } .ta_c { text-align: center; } .fc_grey { color: #6a8ab1; } .fc_grey.bold{ font-weight: bold; } .link-text{ text-align: right; font-size: 15px; width: 100%; display: block; } .link-text a{ text-decoration: underline; color: #6a8ab1; } .column__text a { text-decoration: underline; color: #6a8ab1; } .mame-box-top{ /*background-image: url(../pcserver/img/mame_bg.png);*/ background-image: url(../../printer-guide/img/com_mame_bg.png); background-position: right top; background-repeat:no-repeat; background-size:100%; padding:10px 38px 10px; } .mame-box-bottom { background-image: url(../../printer-guide/img/com_mame_bg_2.png); background-position:right 30%; background-repeat:repeat-y; background-size:100%; padding:0px 38px 30px; margin-bottom: 45px; } .line_top { border-top: 1px solid #9fa0a0; } .line_top.ex { border-top: 1px solid #89a8ce; } .mame-box-bottom a { text-decoration: underline; color:#6a8ab1; } .mame-ttl{display:flex;justify-content: space-between;} .mame-ttl .img{ /* float: left; */ width: 185px; } .mame-ttl .txt{ width: calc(100% - 200px); /* float: right; */ font-size:19px; line-height:1.7; color:#58c3e5; font-weight: bold; } /*Apri list -start-*/ .bg_white { background-color: #ffffff; } .inner_box01 .apr_list { display: -webkit-box; display: -ms-flexbox; display: flex; } .inner_box01 .apr_icon { display: -webkit-box; display: -ms-flexbox; display: flex; } .inner_box01 .apr_icon .apr_img { max-width: 96px; } .inner_box01 .apr_icon .apr_img.ex { max-width: 160px; } .inner_box01 .apr_inf .apr_txt a { color: #6a8ab1; text-decoration: underline; } .inner_box01 .apr_inf .apr_btn_list { display: -webkit-box; display: -ms-flexbox; display: flex; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li a { display: block; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li img { width: 100%; } /*Apri list -end-*/ /*Print 3Step -start-*/ /*.box_ttl_p-step3 .icon_p-step3 { } .box_ttl_p-step3 .inf_p-step3 { } .box_ttl_p-step3 .img_icon_p-step3 { } .box_ttl_p-step3 .ttl_p-step3 { } .box_ttl_p-step3 .txt_s_p-step3 { }*/ /*ステップ*/ /*.p-step3_list { }*/ .p-step3_list .icon_step3_squea img{ height: 1.4em; width:auto; padding-right: 0.25em; } /* .p-step3_list .p-step3_li_01 { } .p-step3_list .p-step3_li_02 { }*/ .p-step3_list .p-step3_li_02 img { width: 100%; } /*.p-step3_list .p-step3_li_03 { } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { } .p-step3_list .p-step3_li_03 .box_step_arrow { } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow { } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow img { }*/ .p-step3_list .p-step3_li_03 .box_step_arrow .txt_step_arrow { background-color: #727171; color: #ffffff; line-height: 1.5em; } /*.p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { }*/ .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_ttl { color:#91add0; font-weight: bold; text-align: center; border:solid 1px #91add0; border-radius: 10px; } /*.p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_txt { }*/ .step_txt a { color: #6a8ab1; text-decoration: underline; } /*Print 3Step -end-*/ /*text space*/ .lts-05em { letter-spacing: -0.5em; } #kanren { margin-bottom: 40px; background-color: #fff; padding: 0 30px 35px; } #kanren #kanren_title { background-color: #1b2d5a; color: #fff; font-size: 19px; font-weight: bold; padding: 1px 0 2px; text-align: center; margin: 0 -30px 35px; } #kanren_system {display: flex;justify-content: space-between;} #kanren_system #system_txt_box { width: 60%; /* float: left; */ } #kanren_system #system_title{ padding-top: 28px; font-size: 25px; color: #6a8ab1;; margin-bottom: 60px; font-weight: bold; margin-left: -15px; } .kanren_stitle { color: #6a8ab1;; font-weight: bold; font-size: 17px; } #kanren_system #system_txt_box .kanren_txt { margin-top: 16px; } #kanren_system #system_img { /* float: right; */ /* margin-right: 25px; */ width: 30%; } #kanren_hakkou { margin-top: 15px; } #kanren_hakkou #hakkou_img { /*width: 684px;*/ margin: 22px auto 0; } #kanren_inq { margin-top: 30px; } #kanren_inq #kanren_inq_title { font-size: 16px; color: #6a8ab1; border: 1px solid #89a8ce; text-align: center; font-weight: bold; margin-bottom: 14px; } #kanren_inq .kanren_inq_block { width: calc((100% - 20px) / 2); float: left; } #kanren_inq .kanren_inq_block + .kanren_inq_block { padding-left: 20px; } #kanren_inq .kanren_inq_block p { text-align: center; } #kanren_inq .kanren_inq_block .inq_title { background-color: #89a8ce; color: #fff; font-size: 14px; } #kanren_inq .kanren_inq_block .company_name { font-size: 16px; font-weight: bold; color: #6a8ab1; margin: 5px 0 0px; } #kanren_inq .kanren_inq_block .company_address { margin-top: -4px; } #sst_link { } /*#sst_link .js-modal_trigger { color: #f00; font-size: 20px; margin-top: 10px; text-decoration: underline; }*/ #sst_link .modal { white-space: normal; } #sst_box #sst_title { font-size: 16px; font-weight: bold; } #sst_box .sst_stitle { font-weight: bold; } #sst_box ul { margin: 0; } #sst_box ul li { margin: 0; text-indent: -3em; padding-left: 3em; } #sst_box a { color: #6a8ab1; text-decoration: underline; } .img-box{ padding-left: 20px; padding-right: 20px; background: #fff; box-sizing: border-box; } .indent{ padding-left: 1rem; } .column__icon{ max-width: 118px; width: 12%; margin-left: 36px; margin-right: 36px; } .column__text { line-height: 1.9; max-width: 860px; } .column__text.ex{ width: 88%; } /*.column__icon img{ height: 84px; width: 84px; }*/ .illustbox.ex{ padding-top: 0; } @media screen and (min-width: 641px) { .column__row { display: -webkit-box; display: -ms-flexbox; display: flex; clear: both; /*max-width: 860px;*/ } .column__text { line-height: 1.9; /*max-width: 860px;*/ } .column__text img{ max-width: 100%; } .column__image { width: 28%; margin: 0 0 0 25px; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 1.5em; } .column__image.mbno{ margin-bottom: 0; } .column__image.ex{ margin-bottom: 10px; margin-right: 38px; width: 172px; } .column__image.long{ margin-bottom: 10px; margin-right: 0px; width: 50%; } .column__image.long.ptn2{ width: 50%; } .column__image.long.wt{ background: #fff; padding-top: 20px; padding-bottom: 20px; } .column__image.long.wt2{ background: #fff; padding:8px; } .column__image.long.wt-box{ background: #fff; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .column__image.long.wt3{ background: #fff; padding:16px 4px 8px 32px; box-sizing: border-box; width: 45%; } .column__image.long.wt4{ background: #fff; box-sizing: border-box; width: 35%; } .column__image.long.wt5{ background: #fff; box-sizing: border-box; padding:10px 15px; width: 60%; } .accbox label span.ptn1{ padding:20px 0 0 10px; width: 680px; /*float: left;*/ display: block; } .accbox label span.ptn2{ padding:38px 0 0 10px; width: 680px; /*float: left;*/ display: block; } .accbox label span.ptn1, .accbox label span.ptn2 { width:590px; } /*PC モーダルロング画像*/ .modal-content.topSection{ /*width: 883px;*/ /*width: 442px;*/ } .modal-content.topSection .img_long { text-align: center; } .modal-content.topSection .img_long img { /*height: 80vh;*/ height: 40vh; width: auto; margin-left: auto; margin-right: auto; } /*横並びリスト*/ .itemList { margin: 0px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .itemList::after { content: ""; display: block; width: 248px; } .itemList.col1{ width: 30%; } .itemList.col2{ width: 64%; } .itemList__item { width: calc((100% - 55px) / 3); } .itemList.col1 .itemList__item { width: 100%; } .itemList.col2 .itemList__item { width: 48%; } .merit-box{display:flex;justify-content: space-between;} .merit-box > .fleft{ /*float: left;*/ } .merit-box > .fright{ /*float: right;*/ } /*アコーディオンの中身*/ .ac-head1-mini1 span{ display: inline-block; vertical-align: middle; } .ac-head1-mini1{ line-height: 1; } .ac-head1-mini2{ line-height: 1.5; /*padding-left: 1em; text-indent: -1em;*/ } .ac-head1-mini1 .img{ width: 152px; /*margin-right: 28px;*/ margin-right: 5px; } .case-box2.pbn{ padding-bottom: 0; } .case-box2.mbn{ margin-bottom: 10px; } .ac-btn > p{ width: 48%; /*margin-left: auto; margin-right: auto;*/ } .ac-btn{ border-top: 1px solid #9FA0A0; padding-top: 40px; } .ac-btn h2{ font-size: 24px; line-height: 1.3; font-weight: bold; margin-bottom: 10px; text-align: center; } .case-box2.ex{ margin-bottom: 20px; } /*.ac-btn .fleft{ float:left; } .ac-btn .fright{ float:right; }*/ .itemabout{ font-size:0; display: flex; } .itemabout li{ display: inline-block; } .itemabout li:first-child{ max-width: 240px; vertical-align: middle; margin-right: 30px; } .itemabout li:nth-child(2){ max-width: 220px; vertical-align: top; margin-right: 20px; } .itemabout li:nth-child(2) .name{ margin-bottom: 25px; line-height: 1; font-size:27px; } .itemabout li:nth-child(2) .text{ margin-bottom: 25px; line-height: 1.5; font-size:18px; } .itemabout li:nth-child(2) .text .text_sub { font-size:12px; } .itemabout li:nth-child(2) .link-btn{ max-width: 182px; min-width: 182px; } .itemabout li:nth-child(2) .link-btn02{ text-align: center; } .itemabout li:last-child{ max-width: 270px; vertical-align: top; } /*flex_box*/ .flex_r-c { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex_r { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex_c { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*Apri list -start-*/ .inner_box01 { padding:25px 38px 25px; } .inner_box01 .apr_list { width: 100%; } .inner_box01 .apr_icon { width:176px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .inner_box01 .apr_inf { width:490px; padding-left:38px; } .inner_box01 .apr_inf .apr_ttl{ font-size:20px; } .inner_box01 .apr_inf .apr_txt_s { font-size:12px; } .inner_box01 .apr_inf .apr_btn_list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li { width:150px; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li:first-child { margin-right: 10px; } /*Apri list -end-*/ /*Print 3Step -start-*/ /*タイトル*/ .inner_box02 { padding:50px 20px 0; } .box_ttl_p-step3 .icon_p-step3 { width:190px; } .box_ttl_p-step3 .inf_p-step3 { width:auto; } .box_ttl_p-step3 .img_icon_p-step3 { width:100%; max-width: 120px; margin-left: auto; margin-right: auto; } .box_ttl_p-step3 .ttl_p-step3 { font-size:20px; } .box_ttl_p-step3 .txt_s_p-step3 { font-size:12px; } /*ステップ*/ .p-step3_list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .p-step3_list .p-step3_li_01 { width:190px; padding-right: 20px; } .p-step3_list .p-step3_li_02 { width:330px; } .p-step3_list .p-step3_li_03 { width:200px; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { width:200px; } .p-step3_list .p-step3_li_03 .box_step_arrow { width:200px; } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow { width:20px; position: relative; } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow img { position: absolute; top:50%; margin-top: -10px; } .p-step3_list .p-step3_li_03 .box_step_arrow .txt_step_arrow { width: 180px; padding:20px; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { width:180px; padding-left:20px; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_ttl { width:150px; font-size:20px; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_txt { font-size:12px; line-height: 1.5em; } .p-step3_list_03 .p-step3_li_02 img { width:153px; } /*Print 3Step -end-*/ #sst_link .modal-content.topSection { width: 600px; } .about-box{ margin-bottom: 50px; } } @media screen and (min-width: 769px) { .accbox label.visible_sp { display: none!important; } .nav-list ul{ border-bottom: 5px solid #61C1BE; font-size:0; list-style-type: none; padding: 0; margin: 0; letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する。 */ text-align: justify; text-justify: distribute-all-lines; } .nav-list ul::after{ content:""; display: inline-block; width: 100%; line-height:0; height: 0; } .nav-list ul li{ width: calc((100% - 6px) / 4); letter-spacing:normal; display: inline-block; } .nav-list ul li a{ letter-spacing: -1px; } .nav-list ul li:last-child{ margin-right: 0; letter-spacing: 0; } .accshow.pc-vis{ height: auto; opacity: 1; padding:0; background: #fff; } } @media screen and (min-width: 1053px) { .about-box .left-box{ width: 210px; } .about-box .right-box{ width: 614px; } .accbox label span{ font-size:25px; } } @media screen and (max-width: 768px) { .nav-list ul li a{ border-bottom: 1px solid #fff; } .accbox label.label0{ height: 39px; font-size:18px; line-height: 18px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #282a2f; color:#fff; } .accbox label.label0 button { -webkit-appearance: none; border: none; background: none; padding: 0; outline: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; } .accbox label.label0 button span { display: block; width: 21px; height: 21px; position: absolute; top: 50%; right: 0; margin: -10px -7px 0 0; z-index: 1; } .accbox label.label0 button span::before, .accbox label.label0 button span::after { content: ""; display: block; position: absolute; top: 10px; right: 10px; width: 21px; height: 1px; background: #ffffff; -webkit-transform-origin: center center; transform-origin: center center; z-index: 1; } .accbox label.label0 button span::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .cssacc:checked + label.label0 button span{ -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: -3px -3px 0 0; } } @media screen and (max-width: 640px) { .ac-box{ margin-bottom: 5%; } .ac-box.ex{ margin-bottom: 0%; } .accbox .accshow.ac-box-wrap{ padding: 0px 25px; } .cssacc:checked + .tri + .accshow.ac-box-wrap{ padding: 25px 25px; } .cssacc:checked + .tri + .accshow { padding: 5% 6%; } .accbox .tri { padding-top: 2%; padding-bottom: 2%; } .label1,.label2,.label3{ display: flex; } .accbox label span{ font-size:4.0vw; line-height: 1.2; width: 60%; display: block; /*float: left;*/ } .accbox label span.ptn1{ padding:3.2% 4% 0% 2%; } .accbox label span.ptn1.ex{ padding:0.8% 4% 0% 2%; } .accbox label span.ptn1.ex2{ padding:6% 4% 0% 2%; } .accbox label span.ptn2{ padding:3.2% 0% 0% 2%; } .accbox label span.ptn2.ex{ padding:6% 0% 0% 2%; } .accbox .tri > span { transform: rotate( -180deg ); display: block; font-size: 12px; width: 100%; } .accbox label img{ width: 35%; height: 100%;/* max-width: 116px; max-height: 76px;*/ /*float: left;*/ } .about-box{display:block} .about-box .left-box{ width: 100%; /*margin-left: auto; margin-right: auto; float: none;*/ } .about-box .right-box{ width: 100%; /*float: none;*/ } .safetybox h2{ font-size:14px; padding-top: 13px; padding-bottom: 13px; } .about-box .right-box h2 span { font-size: 24px; } .about-box .sp-icon{ width: 30%; float: left; } .about-box .sp-tex{ width: 65%; float: right; padding-top: 4.5%; } .about-box .sp-tex h2 span{ font-size:5.4vw; color:#61C1BE; line-height: 1.7; font-weight: bold; background: linear-gradient(transparent 80%, #fff100 0%); } /*横並びリスト*/ .itemArea { /*background: #edeff0;*/ padding: 0px 20px 22px; } .itemList { margin: 0px auto 15px; } .itemname{ padding-top: 4%; padding-bottom: 7%; font-size:14px; } .itemList__item:not(:last-child) { margin: 0 0 15px; } .mes-box{ margin-top: 8%; } .mes-tex{ width: 72%; float: left; position: relative; background: #58c3e5; color:#fff; margin-right: 0px; padding:5% 5%; font-size:13px; } .mes-tex::after{ content: ""; background: url(../../guide/pcserver/img/com_arrow.png) no-repeat right center; background-size: contain; padding-top: 12%; width: 12%; position: absolute; right: -7%; top: 10%; } .mes-img{ width: 25%; float: right; padding-top: 3%; } /*.mes-tex p{ font-size:13px; }*/ /*.mes-tex{ width: 100%; float: none; padding:3% 3%; } .mes-tex::after{ content: ""; background: url(../pcserver/img/com_arrow.png) no-repeat right center; background-size:contain; padding-top: 8%; width: 8%; position: absolute; right:0%; left:0; bottom:-8%; top:100%; } .mes-img{ width: 50%; float: none; margin-left: auto; margin-right:auto; margin-top: 10%; }*/ .merit-box > div{ width: 100%; } .merit-box .merit-name{ font-size:14px; padding-top: 4%; padding-bottom: 4%; margin-bottom: 5%; } .column__text{ margin-bottom: 5%; /*text-align: justify; word-break:keep-all!important;*/ } .case-box{ margin-bottom: 12%; padding-bottom: 12%; } .case-box2{ margin-bottom: 4%; padding-bottom: 4%; } .case-box3{ margin-bottom: 6%; padding-top: 5%; padding-bottom: 20%; } .case-box2.pbn{ padding-bottom: 5%; } .case-box2.mbn,.case-box2.mbnex{ margin-bottom: 0%; } .case-box2.mbnex{ padding-bottom: 1%; } /*アコーディオンの中身*/ .illustbox { padding: 5% 0; margin-bottom: 5%; } .illustbox.sp-ex{ padding: 0% 0; margin-bottom: 5%; } .illust-pt{ color:#516493; font-size:15px; line-height: 1.5; padding-left: 5%; padding-right: 5%; } .illust-tex{ padding:15% 4%; } .illust-img .illust-samp_list { width:80%; max-width: 90%; position: relative; top:auto; right: auto; margin-left: auto; margin-right: auto; padding-bottom: 5%; } .illust-img .illust-samp_list.ex { top:auto; } .illust-img .illust-samp_list_03 { top:auto; } .illust-img .illust-samp01, .illust-img .illust-samp02, .illust-img .illust-samp01 img, .illust-img .illust-samp02 img { height: auto; max-height: none; } /*.illust-img .illust-samp01 { width:100%; position: relative; top:auto; right: auto; margin-left: auto; margin-right: auto; } .illust-img .illust-samp02 { width:100%; position: relative; top:auto; right: auto; margin-left: auto; margin-right: auto; }*/ .illust-img .illust-samp_list_02 { max-width:none; } .illust-img .illust-samp_list_02 .illust-samp01, .illust-img .illust-samp_list_02 .illust-samp02 { max-width:none; } .illust-img .illust-samp_list_02 .illust-samp01 img, .illust-img .illust-samp_list_02 .illust-samp02 img { max-width:180px; max-height: none; } .ac-head1{ font-size:4.2vw; line-height: 1.2; padding:3% 3%; margin-bottom: 4%; } .ac-head1-mini1{ margin-bottom: 3%; margin-top: 3%; font-size:16px; } .ac-head2{ font-size:16px; line-height: 1; padding:3% 0; margin-bottom: 4%; } .ac-head3{ font-size:18px; line-height: 1; padding:3% 0; margin-bottom: 5%; } .link-text{ /*text-align: center;*/ font-size:13px; } .ac-head1-mini1 span{ display: block; } .ac-head1-mini1 .img{ width: 35%; margin-bottom: 3%; } .itemabout{display:block;} .itemabout li{ display: block; } .itemabout li:first-child{ width: 80%; margin-left: auto; margin-right: auto; } .itemabout li:nth-child(2){ width: 100%; margin-bottom: 18%; } .itemabout li:nth-child(2) .name{ margin-bottom:3%; line-height: 1; font-size:22px; } .itemabout li:nth-child(2) .text{ margin-bottom: 3%; line-height: 1.4; font-size:16px; } .itemabout li:nth-child(2) .link-btn{ max-width: 100%; min-width: 100%; } .itemabout li:nth-child(2) .link-btn02{ } .itemabout li:last-child{ width: 100%; } .mame-box-top{ background-size:180%; padding:2% 6% 2%; } .mame-box-bottom{ background-size:180%; padding:0 6% 6%; margin-bottom: 12%; } .mame-ttl{display:block;} .mame-ttl .img{ /*float: none;*/ width: 50%; margin-left: auto; margin-right: auto; } .mame-ttl .txt{ width: 100%; /*float: none;*/ font-size:16px; } /*flex-box*/ .flex_r-c { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex_r { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex_c { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /*Apri list -start-*/ .inner_box01 { padding:10% 5%; } .inner_box01 .apr_icon .apr_img.ex { padding-top: 4%; padding-bottom: 4%; max-width: 200px; } .inner_box01 .apr_list { width: 100%; } .inner_box01 .apr_icon { width:100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .inner_box01 .apr_inf { width:100%; padding-left:0; } .inner_box01 .apr_inf .apr_ttl{ font-size:20px; } .inner_box01 .apr_inf .apr_txt_s { font-size:12px; } .inner_box01 .apr_inf .apr_btn_list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li { width:100%; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li .apr_btn_img { max-width:150px; margin-left: auto; margin-right: auto; } .inner_box01 .apr_inf .apr_btn_list .apr_btn_li:first-child { margin-right: auto; } /*Apri list -end-*/ /*Print 3Step -start-*/ /*タイトル*/ .inner_box02 { padding: 10% 5% 0; } .box_ttl_p-step3 .icon_p-step3 { width:100%; } .box_ttl_p-step3 .inf_p-step3 { width:100%; } .box_ttl_p-step3 .img_icon_p-step3 { width:100%; max-width: 120px; margin-left: auto; margin-right: auto; } .box_ttl_p-step3 .ttl_p-step3 { font-size:20px; } .box_ttl_p-step3 .txt_s_p-step3 { font-size:12px; } /*ステップ*/ .p-step3_list { } .p-step3_list .p-step3_li_01 { width:100%; padding-right: 0; } .p-step3_list .p-step3_li_02 { width:100%; } .p-step3_list .p-step3_li_03 { width:100%; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { width:100%; } .p-step3_list .p-step3_li_03 .box_step_arrow { width:100%; } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow { width:100%; position: relative; height: 20px; } .p-step3_list .p-step3_li_03 .box_step_arrow .img_step_arrow img { position: relative; top:0; margin-top: 0; height: 20px; margin-left: auto; margin-right: auto; } .p-step3_list .p-step3_li_03 .box_step_arrow .txt_step_arrow { width: 90%; padding:5%; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 { width:100%; padding-left:0; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_ttl { width:100%; font-size:20px; } .p-step3_list .p-step3_li_03 .txt_p-step3_li_03 .p-step3_txt { font-size:12px; line-height: 1.5em; } .p-step3_list_03 .p-step3_li_02 img { width:100%; } /*Print 3Step -end-*/ #kanren { margin-bottom: 4%; padding: 0 10px 25px; } #kanren #kanren_title { font-size: 19px; padding: 1px 0 2px; margin: 0 -10px 3%; } #kanren_system {display: block;} #kanren_system #system_txt_box { width: auto; /*float: none;*/ } #kanren_system #system_title{ padding-top: 10px; font-size: 20px; margin-bottom: 6%; margin-left: 0px; text-align: center; } .kanren_stitle { font-size: 15px; margin-bottom: 3%; } #kanren_system #system_txt_box .kanren_txt { margin-top: 0px; } #kanren_system #system_img { /*float: none;*/ margin: 5% auto 0px; max-width: 210px; width: 100%; } #kanren_system #system_img img { width: 100%; } #kanren_hakkou { margin-top: 7%; } #kanren_hakkou #hakkou_img { max-width: 684px; width: 100%; margin: 3% auto 0; } #kanren_hakkou #hakkou_img img { width: 100%; } #kanren_inq { margin-top:10%; } #kanren_inq #kanren_inq_title { margin-bottom: 7%; } #kanren_inq .kanren_inq_block { width: auto; float: none; } #kanren_inq .kanren_inq_block + .kanren_inq_block { padding-left: 0px; margin-top: 4%; } #kanren_inq .kanren_inq_block .company_address { margin-top: 0px; } #sst_link .js-modal_trigger { margin-top: 2%; } } .product_feature_inner { width: 940px; margin: auto; padding-left: 5%; padding-right: 5%; /*padding-top: 7%;*/ padding-top: 7%; white-space: normal; box-sizing: border-box; } .product_feature_ttl { font-size: 40px; font-weight: 600; text-align: center; line-height: 1.5; margin-top: -15px; font-family: "Noto Sans JP", "Noto Sans CJK JP","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; } .product_feature1_img { float: left; margin-right: 30px; } .product_feature1_txt { float: left; width: 400px; } .product_feature_txt { font-size:14px; line-height: 1.85; } .product_feature1_link { margin-top: 5px; } .product_feature1_txt .btn_basic { font-size: 16px; margin-top: 10px; } .btn_basic { color: #27292f; background: #ffffff; } .btn_basic .btn_icon { color: #51595f; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-external-link:before { content: "\f08e"; } .product_feature { background: #edeff1; padding: 0 0 60px; } .link-btn-area li{ display: inline-block; } .product_feature_detail { margin-top: 50px; } .product_feature_detail { margin-top: 50px; } .product_feature1_img { float: left; margin-right: 30px; } .product_feature2_ttl { font-size: 20px; font-weight: 600; margin-bottom: 20px; } .product_feature1_img{ width: 400px!important; } .product_feature1_img.ex{ width: 294px!important; } .product_feature .btn{ -webkit-appearance: none; appearance: none; display: inline-block; box-sizing: border-box; margin: 0; padding: 13px 30px; text-align: center; text-decoration: none; color: inherit; cursor: pointer; border-radius: 3px; line-height: 1.5; } .product_feature .detailClose { position: absolute; bottom: 10px; right: 10px; display: block; width: auto; height: auto; line-height: 0; cursor: pointer; outline: none; border: none; margin: 0; padding: 0; background: transparent; } @media screen and (max-width: 640px){ .product_feature_inner { width: 90%; margin: auto; padding-left: 5%; padding-right: 5%; } .product_feature_ttl { font-size: 17px; margin-top: -6px; } .product_feature1_img, .product_feature1_txt { float: none; width: 100%; } .product_feature_txt { text-align: left; margin-top: 14px; margin-bottom: 0px; line-height: 1.75; } .product_feature1_link { text-align: center; } .product_feature1_txt .btn_basic { padding: 6px 15px; font-size: 12px; } .btn .btn_icon { margin-right: 4px; } .product_feature { padding: 0 0 40px; } .product_feature1_img, .product_feature1_txt { float: none; width: 100%; } .product_feature1_txt h4 { margin-top: 20px; } .product_feature2_ttl { font-size: 12px; margin-bottom: 12px; } .product_feature_detail.first{ margin-top: 7%; } .product_feature_detail { margin-top: 13%; } .product_feature1_img{ width: 100%!important; } .product_feature1_img.ex{ width: 100%!important; } .product_feature1_link { margin-top: 3%; } .about-box{ margin-bottom: 8%; display: block; } .column__image.long.wt{ background: #fff; padding-top: 5%; padding-bottom: 5%; } .column__image.long.wt2{ background: #fff; padding:8px 8px; } .column__image.long.wt3{ background: #fff; padding:16px 4px 8px 32px; box-sizing: border-box; } .column__image.long.wt4{ background: #fff; box-sizing: border-box; } .column__image.long.wt5{ background: #fff; padding:10px 15px; } .column__image.long.wt-box{ padding-left: 5%; padding-right: 5%; background: #fff; } .ac-btn{ border-top: 1px solid #9FA0A0; padding-top: 7%; } .img-box{ padding-left: 5%; padding-right: 5%; } .column__icon{ width: 50%; max-width: 96px; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } .case-box2.ex{ margin-bottom: 0; padding-bottom: 0; } .column__text.ex { width: 100%; } .ac-btn h2{ font-size: 4.0vw; text-align: center; font-weight: bold; } }