@charset "UTF-8"; #lower_img { background-image: url(../img/service/lower_img.jpg);} .website_lower { background-image: url(../img/service/website/lower_img.jpg) !important;} #corporate_box .title_box { background-image: url(../img/service/website/corporate_bg.jpg);} #recruit_box .title_box { background-image: url(../img/service/website/recruit_bg.jpg);} #lp_box .title_box { background-image: url(../img/service/website/lp_bg.jpg);} .system_lower { background-image: url(../img/service/system/lower_img.jpg) !important;} #app_box .title_box { background-image: url(../img/service/system/app_bg.jpg);} #ec_box .title_box { background-image: url(../img/service/system/ec_bg.jpg);} #cms_box .title_box { background-image: url(../img/service/system/cms_bg.jpg);} .video-photo_lower { background-image: url(../img/service/video-photo/lower_img.jpg) !important;} #webmovie_box .title_box { background-image: url(../img/service/video-photo/webmovie_bg.jpg);} #recruitmovie_box .title_box { background-image: url(../img/service/video-photo/recruitmovie_bg.jpg);} #edit_box .title_box { background-image: url(../img/service/video-photo/edit_bg.jpg);} .dtp_lower { background-image: url(../img/service/dtp/lower_img.jpg) !important;} .consulting_lower { background-image: url(../img/service/consulting/lower_img.jpg) !important;} .mtpt_minus { margin-top: -90px; padding-top: 90px;} @media screen and (max-width: 640px) { .mtpt_minus { margin-top: 0; padding-top: 0;}} #service_block { padding: 50px 0 0;} #service_block .intro_box { text-align: center; font-size: 18px; font-weight: 500; letter-spacing: 0.1em; line-height: 200%; margin: 50px 0 60px;} #service_block .tile_box { margin-bottom: 100px;} #service_block .tile_box li { display: block; float: left; width: 47%; background-size: cover; background-repeat: no-repeat; position: relative;} #service_block .tile_box li:nth-child(2n+1){ margin-right: 6%;} #service_block .tile_box li img{ display: block; margin: 0 auto;} #service_block .tile_box .text_box { padding: 30px 0 0 0; text-align: left; position: relative; z-index: 10; height: 220px;} #service_block .tile_box .text_box h3 { font-size: 18px; margin-bottom: 10px; padding-bottom: 10px; position: relative; border-bottom: 1px solid #f1f1f1;} #service_block .tile_box .text_box h3::before{ content: ""; width: 25px; height: 1px; background: #17a5d6; position: absolute; left: 0; bottom: -1px; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;} #service_block .tile_box li:hover .text_box h3::before{ width: 100%;} #service_block .tile_box li:hover .text_box h3{ color: #17a5d6;} #service_block .tile_box .text_box .btn_box { font-family: 'Josefin Sans', sans-serif; text-align: right; font-size: 14px; margin-bottom: 30px; padding: 3px 0; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; position: absolute; content: ""; bottom: 0; right: 0; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;} #service_block .tile_box li a:hover .text_box .btn_box{ color: #3577c7;} .contact_contents_box { margin-bottom: 100px;} .contact_contents_box h3 { font-size: 16px; text-align: center; color: #000;} .contact_contents_box h3 span { display: block; font-family: 'Josefin Sans', sans-serif; font-size: 30px; font-weight: 600; color: #335fce; margin-bottom: 10px;} .contact_contents_box .intro_text { font-size: 16px; font-weight: 500; text-align: center; margin-top: 35px;} .contact_contents_box .two_box { width: 70%; margin: 35px auto 0;} .contact_contents_box .box_style { float: left; width: 48%; margin-right: 2.5%;} .contact_contents_box .box_style:last-child { margin-right: 0;} .contact_contents_box .tel_box p { font-family: 'Josefin Sans', sans-serif; font-size: 46px; margin-top: 15px; color: #000;} .contact_contents_box .tel_box p span { font-size: 24px; margin-right: 10px;} .contact_contents_box .contact_btn_box a { display: block; width: 290px; background: #e96e20; color: #fff; font-size: 16px; font-weight: 500; text-align: center; padding: 20px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; position: relative;} .contact_contents_box .contact_btn_box a:after { content: ""; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto 0; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #fff;} .contact_contents_box .contact_btn_box a:hover { background: #000;} @media screen and (max-width: 1200px) { .contact_contents_box .two_box { width: 100%;}} @media screen and (max-width: 920px) { .contact_contents_box .box_style { float: none !important; width: 100%; margin: 0 auto;} .contact_contents_box .tel_box { margin-bottom: 25px; text-align: center;} .contact_contents_box .contact_btn_box a { margin: 0 auto;}} @media screen and (max-width: 840px) { #service_block .text_box .txt { font-size: 15px;}} @media screen and (max-width: 640px) { #fix_bottom_menu { width: 100%; position: fixed; bottom: 0; left: 0; overflow: hidden; background: #333; z-index: 999;} #fix_bottom_menu li { float: left; border-top: 1px solid #474747;} #fix_bottom_menu li a { display: block; font-size: 12px; font-weight: 500; text-align: center; padding: 8px 0; color: #fff; position: relative;} #fix_bottom_menu li a:before { content: ""; box-sizing: border-box; width: 12px; height: 12px; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto 0; border: 1px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;} #fix_bottom_menu li a:after{ content: ""; position: absolute; right: 15px; top: 0; bottom: 0; width: 4px; height: 4px; margin: auto 0; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg);} #fix_bottom_menu.two_column li { width: 50%;} #fix_bottom_menu.two_column li:nth-child(even) { border-left: 1px solid #474747;} #fix_bottom_menu.three_column li { width: 50%;} #fix_bottom_menu.three_column li:first-child { width: 100%;} #fix_bottom_menu.three_column li:last-child { border-left: 1px solid #474747;} #service_block .intro_box { font-size: 13px; line-height: 180%; margin: 5px 5% 40px;} #service_block .tile_box .text_box h3 { font-size: 16px;} #service_block .text_box .txt { font-size: 13px; line-height: 180%;} #service_block .tile_box li:after { width: 12px; height: 12px;} #service_block .tile_box .text_box .btn_box{ font-size: 12px;} .works_box h3 { font-size: 15px; margin-bottom: 30px;} .works_box h3 span { font-size: 26px;} .works_box .swiper-container { margin: 40px auto !important;} .works_box .works_slide .swiper-button-prev, .works_box .works_slide .swiper-button-next { width: 35px; height: 60px;} .works_box .swiper-button-next, .works_box .swiper-container-rtl .swiper-button-prev { right: 0 !important;} .works_box .swiper-button-prev, .works_box .swiper-container-rtl .swiper-button-next { left: 0 !important;} .contact_contents_box { margin-bottom: 50px;} .contact_contents_box .contents_inner { padding: 45px 15px 30px;} .contact_contents_box .intro_text { font-size: 14px; line-height: 160%;} .contact_contents_box .two_box { width: 100%;} .contact_contents_box .tel_box p { font-size: 35px;} .contact_contents_box .tel_box p span { font-size: 18px; margin-right: 5px;} .contact_contents_box .contact_btn_box a { width: 100%; font-size: 14px;} .contact_contents_box h3 { font-size: 15px;} .contact_contents_box h3 span { font-size: 26px;}} @media screen and (max-width: 500px) { #service_block .tile_box { margin-bottom: 60px;} #service_block .tile_box li{ float: none; width: 100%;} #service_block .tile_box .text_box{ height: auto; padding: 20px 0 80px 0;}} #service_block .catch_box .text_box { width: 56%;} #service_block .catch_box .text_box h3 { font-size: 20px; font-weight: 600; color: #081b26; margin-bottom: 25px;} #service_block .catch_box .text_box .txt { font-size: 15px; font-weight: 400; line-height: 230%; letter-spacing: 0.05em; margin-bottom: 1.3em; color: #000;} @media screen and (max-width: 1080px) { #service_block .catch_box .text_box .txt { font-size: 14.5px;}} #service_detail_box .service_menu { padding-bottom: 90px; max-width: 100%; width: 77%;} #service_detail_box .service_menu li { width: 23.5%; margin-right: 2%; margin-bottom: 2%; float: left; background: #fff; border: 1px solid #9a9a9a; transition: 0.2s; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;} #service_detail_box .service_menu li:nth-child(4n) { margin-right: 0;} #service_detail_box .service_menu li:hover { background: #eee;} #service_detail_box .service_menu li a { display: block; font-size: 15px; font-weight: 600; text-align: center; padding: 25px 0; color: #333; position: relative;} #service_detail_box .service_menu li a:before { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; width: 7px; height: 7px; border-top: 1.5px solid #333; border-right: 1.5px solid #333; -webkit-transform: rotate(135deg); transform: rotate(135deg);} #service_detail_box .service_menu li a:hover:before { bottom: -10px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;} #service_block .particle_box { position: relative;} #service_detail_box .catch_box { width: 1100px; margin: 0 auto; margin-top: 70px; padding-bottom: 80px; overflow: hidden;} #service_detail_box .page_title { font-size: 40px; font-weight: 800; text-align: center; padding-bottom: 15px;} #service_detail_box .catch_box .catch_txt { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 30px; color: #000; line-height: 180%; letter-spacing: 0.1em; margin-bottom: 30px; padding-bottom: 25px; position: relative; z-index: 10;} #service_detail_box .catch_box .catch_txt:before { content: ""; width: 30px; height: 3px; background: #335fce; position: absolute; left: 0; bottom: 0;} #service_detail_box .catch_box .img_box { width: 36%; background-size: cover; background-position: center;} #service_detail_box #web_catch { height: 450px; background-image: url("../img/service/website/title_img.jpg");} #service_detail_box #system_catch { height: 440px; background-image: url("../img/service/system/title_img.jpg");} #service_detail_box #videophoto_catch { height: 340px; background-image: url("../img/service/video-photo/title_img.jpg");} #service_detail_box #dtp_catch { height: 400px; background-image: url("../img/service/dtp/title_img.jpg");} #service_detail_box #consulting_catch { height: 400px; background-image: url("../img/service/consulting/title_img.jpg");} #service_detail_box .content_h4 { font-family: 'Noto Sans JP', sans-serif; font-size: 30px; font-weight: 600; line-height: 130%; letter-spacing: 0.1em; text-align: center; margin-bottom: 25px;} #service_detail_box .content_h4 span { display: block; font-size: 20px; color: #335fce; font-family: 'Josefin Sans', sans-serif; line-height: 1; letter-spacing: 0.05em; margin-bottom: 8px; text-transform: uppercase;} @media screen and (max-width: 1330px) { #service_detail_box #web_catch { height: 360px;} #service_detail_box .service_menu { padding: 0 0 8%;}} @media screen and (max-width: 1100px) { #service_detail_box .catch_box { width: 90%; margin: 0 auto;}} @media screen and (max-width: 680px) { #service_detail_box .service_menu { display: none; width: 90%; margin-top: 0;} #service_detail_box .service_menu li { width: 49%; margin-right: 2%;} #service_detail_box .service_menu li:nth-child(4n) { margin-right: 2%;} #service_detail_box .service_menu li:nth-child(2n) { margin-right: 0;} #service_detail_box .service_menu li a { font-size: 12px; padding: 12px 0;} #service_detail_box .catch_box .catch_txt { font-size: 18px; margin-bottom: 30px;}} #reason_box ul { margin: 90px 0 120px;} #reason_box li { float: left; width: 31%; margin-right: 3.5%; padding: 25px 20px; position: relative;} #reason_box li:nth-child(3n) { margin-right: 0;} #reason_box li img { display: block; margin: 0 auto 25px;} #reason_box li p { font-size: 14px; font-weight: 500; line-height: 180%;} #reason_box li span { font-size: 40px; font-style: oblique; color: #b9d0e0;} .title_box { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;} .title_box h4 { font-size: 26px; font-weight: 500; line-height: 160%; margin-bottom: 40px;} .title_box h4 span.en { display: inline-block; font-size: 18px; font-family: 'Josefin Sans', sans-serif; line-height: 160%; margin-bottom: 15px; padding: 3px 10px 0; background: #404040; color: #fff;} .title_box h4 .text_color { font-weight: 800;} .title_box .text_box { width: 100%; height: 100%; padding: 70px 0; background: rgb(255 255 255 / 90%);} .title_box .text_box h5 { font-size: 22px; padding-bottom: 15px; margin-bottom: 25px; border-bottom: 2px solid #000;} .title_box .text_box .intro_text { font-size: 14px; font-weight: 500; text-align: center; line-height: 200%; max-width: 1100px; margin: 0 auto; padding: 0 5%;} @media screen and (max-width: 1280px) { .title_box .text_box .intro_text { font-size: 14.5px;}} @media screen and (max-width: 640px) { .title_box .text_box { padding: 8% 0px;} .title_box .text_box .intro_text { font-size: 13px;} .title_box .img_box.sp { display: block;}} .detail_catch { font-size: 30px; font-weight: 800; line-height: 150%; letter-spacing: 0.05em; text-align: center; color: #000; margin-bottom: 1em;} .detail_content { margin: 0 auto 60px; padding: 120px 0 0;} .detail_content .detail_catch { font-size: 26px; font-weight: 800; line-height: 150%; letter-spacing: 0.05em; text-align: center; color: #000; margin-bottom: 80px;} .detail_content .detail_head { font-size: 30px; font-weight: 600; text-align: center; margin-bottom: 80px; color: #000; position: relative; z-index: 20;} .detail_content .detail_head span { display: block; font-family: 'Josefin Sans', sans-serif; font-size: 110px; font-weight: 800; margin-bottom: 5px; -webkit-text-stroke: 1px; color: #f9f9f9; position: absolute; left: 0; right: 0; top: 0; z-index: -1;} .detail_box { width: 1000px; margin: 0 auto 55px;} .detail_box .img_box { width: 29%;} .detail_box .img_box img { object-fit: cover; object-position: top; font-family: 'object-fit: cover; object-position: top;'; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;} #recruit_box .detail_box .img_box img { object-fit: cover; height: 270px;} .detail_box .text_box { width: 65%;} .detail_box h4 { font-size: 20px; font-weight: 800; line-height: 150%; margin-bottom: 20px; padding: 20px 15px 20px 40px; position: relative; color: #000; background: #f7f7f7; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;} .detail_box h4:after { content: ""; width: 6px; height: 55%; background: #000000; position: absolute; left: 20px; top: 0; bottom: 0; margin: auto 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;} .detail_box h4 span.en { display: block; font-family: 'Josefin Sans', sans-serif; font-size: 18px; width: 70px; height: 22px; letter-spacing: 0.05em; line-height: 1; color: #ffffff; margin-bottom: 10px; padding: 3px 0 2px 5px; background: #c21818; position: relative;} .detail_box h4 span.en:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 12px; border-color: transparent transparent transparent #c21818; position: absolute; right: -12px; top: 0;} .detail_box .text p { font-size: 15px; font-weight: 500; line-height: 200%; color: #000; background: #fdfdfd; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;} @media screen and (max-width: 1280px) { .detail_content { padding: 80px 0 0;} .detail_content .detail_head span { font-size: 130px;} .detail_box { width: 100%;} .detail_box .img_box img { height: 100%;}} @media screen and (max-width: 640px) { .detail_box { margin-bottom: 0; padding: 0 0 20px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border: none;} .detail_content:before { border-width: 35px 50px 0 50px;} .detail_content .contents_inner { width: 100%;} .detail_content .detail_head { font-size: 17px; margin-bottom: 30px;} .detail_box h4:before { width: 6px; height: 100%;} .detail_content .detail_head span { font-size: 40px;} .detail_box .img_box { width: 100%;} .detail_box .img_box img { width: 100%; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0;} .detail_content { width: 100%; margin: 40px auto 50px; padding: 45px 0 5px;} .detail_content .detail_catch { font-size: 18px; margin-bottom: 30px; padding: 0 1em;} .detail_box h4 { width: 83%; font-size: 17px; margin-bottom: 10px; padding: 10px 15px 10px 25px; background: #fff; -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; -ms-border-top-left-radius: 0; -o-border-top-left-radius: 0; border-top-left-radius: 0;} .detail_box h4:after { width: 7px; left: 10px;} .detail_box h4 span.en { font-size: 13.5px; width: 65px; height: 18px;} .detail_box h4 span.en:after { border-width: 9px 0 9px 9px; right: -9px;} .detail_box .text_box { width: 100%; margin-top: -40px;} .detail_box .text p { font-size: 13.5px; line-height: 200%; padding: 0 20px; border: none;}} .nayami_box { padding: 80px 0 110px; background: #f0f4f7; position: relative;} .nayami_box::after{ content: ""; width: 100%; height: 300px; content: ""; background-image: url(../img/common/dot_blue.svg); background-repeat: repeat; background-size: 10px; position: absolute; left: 0; bottom: 0; z-index: 0;} .nayami_box .contents_inner { width: 1100px; max-width: 100%; margin: 0 auto;} .nayami_box h4 { font-size: 34px !important; font-weight: 800; text-align: center; letter-spacing: 0 !important; margin-bottom: 50px;} .nayami_box h4 span { display: inline-block !important; font-size: 34px !important; line-height: 1.8em !important; color: #335fce !important;} .nayami_box h4:after { display: none !important;} .nayami_box ul{ position: relative; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -ms-flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;} .nayami_box ul li { width: 31.3333%; margin-right: 3%; padding: 25px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08);} .nayami_box ul li:nth-child(3n) { margin-right: 0;} .nayami_box ul li img { display: block; margin: 0 auto;} .nayami_box ul li h5 { font-size: 18px; font-weight: 800; text-align: center; color: #323232; padding: 25px 0 20px;} .nayami_box ul li p { font-size: 15px; line-height: 200%;} .nayami_box ul li p span { background: linear-gradient(transparent 65%, #fff9b2 65%); font-weight: 600; color: #1d1d1d;} @media screen and (max-width: 1330px) { .nayami_box h4, .nayami_box h4 span { font-size: 30px !important;} .nayami_box ul li { width: 32%; margin-right: 2%;}} @media screen and (max-width: 1180px) { .nayami_box .contents_inner { width: 90%;} .nayami_box ul li p { font-size: 14px;} .nayami_box ul li h5 { font-size: 16px; line-height: 160%; letter-spacing: 0; margin-bottom: 20px; padding: 10px 0 15px;}} @media screen and (max-width: 840px) { .nayami_box ul li { width: 100%; float: none; font-size: 16px;} .nayami_box ul li{ margin-right: 0; margin-bottom: 4%; height: auto !important;}} @media screen and (max-width: 640px) { .nayami_box { padding: 60px 0;} .nayami_box ul{ width: 90%; margin: 0 auto;} .nayami_box ul li{ margin-bottom: 10%;} .nayami_box ul li img{ width: 160px;} .nayami_box ul li h5{ margin-bottom: 0;} .nayami_box h4, .nayami_box h4 span { font-size: 21px !important;} .nayami_box h4 { margin-bottom: 20px; line-height: 160%;}} #other_box { margin-top: 80px; padding: 0 25px 0;} #other_box .catch { font-size: 28px; font-weight: 600; letter-spacing: 0.1em; line-height: 180%; text-align: center;} @media screen and (max-width: 1330px) { #other_box .catch { font-size: 23px;}} @media screen and (max-width: 1280px) { #service_detail_box .catch_box .img_box { width: 36%; height: 340px; box-shadow: none;} #service_block .catch_box .text_box { width: 56%;} #service_detail_box .catch_box { margin-top: 50px; padding-bottom: 90px; width: 90%;} #service_detail_box .catch_box .catch_txt { font-size: 26px;}} @media screen and (max-width: 1080px) { #service_detail_box .catch_box .catch_txt { font-size: 29px;} #reason_box li { width: 32%; margin-right: 2%;} #reason_box li span { font-size: 34px;} #reason_box li img { margin-bottom: 10px;} #reason_box li p { font-size: 16px; text-align: left;} #other_box .catch { font-size: 26px;}} @media screen and (max-width: 840px) { #service_block { padding: 50px 0 70px;} #service_detail_box .catch_box { margin-top: 70px; padding-bottom: 40px;} #service_detail_box .catch_box .catch_txt { font-size: 28px;} #service_detail_box #web_catch { height: 290px;} #service_detail_box #dtp_catch { height: 290px;} #reason_box ul { margin: 70px 0;} #reason_box li { float: left; width: 49%; margin-right: 2%; margin-bottom: 4%;} #reason_box li:nth-child(2n) { margin-right: 0;} #other_box { padding-bottom: 85px;} #other_box .catch { font-size: 22px;}} @media screen and (max-width: 640px) { #service_block { padding: 40px 0 0;} #service_detail_box { padding: 15px 0 0;} #service_detail_box .content_h4 { font-size: 17px; margin-bottom: 20px; padding-bottom: 12px;} #service_detail_box .content_h4 span { font-size: 16px; margin-bottom: 5px;} #service_detail_box .content_h4:after { bottom: -7px;} #service_detail_box .catch_box { margin-top: 0; padding-bottom: 30px;} #service_detail_box .catch_box .catch_txt { font-size: 16px; text-align: center; padding-bottom: 10px; margin-bottom: 35px;} #service_detail_box .catch_box .catch_txt:before { right: 0; margin: 0 auto;} #service_detail_box .sp_img_box { margin-bottom: 15px;} #service_detail_box .catch_box .catch_txt { font-size: 19px; letter-spacing: 0; margin-bottom: 20px; padding-bottom: 15px;} #service_block .catch_box .text_box { margin-top: 50px;} #service_block .catch_box .text_box { width: 100%; margin-top: 10px; padding: 0;} #service_detail_box .catch_box .img_box { float: none !important; width: 80%; margin: 0 auto 30px;} #service_block .catch_box .text_box .txt { font-size: 13px; line-height: 200%; margin-bottom: 1em;} #reason_box ul { margin: 40px 0 50px;} #reason_box li { float: left; width: 100%; height: auto !important; margin-bottom: 30px; padding: 15px 20px 20px;} #reason_box li p { font-size: 15px;} #reason_box li img { margin: 0 auto 15px; width: 75px;} .nayami_box .contents_inner { width: 95%;} #other_box { margin-top: 0; padding-bottom: 0;} #other_box .catch { font-size: 16px;}} .system_case_box li{ float: left; width: 45.75%; margin-right: 8.5%; margin-bottom: 5%;} .system_case_box li:nth-child(2n) { margin-right: 0;} .system_case_box li img{ margin: 0 auto;} .system_case_box h4 { padding: 40px 0; font-size: 20px; text-align: center;} .system_case_box h6{ font-size: 16px; display: inline; line-height: 1.8em; background: linear-gradient(transparent 65%, #fff9b2 65%);} .system_case_box p.text_box{ font-size: 15px; margin-top: 0.5em; line-height: 200%;} .system_case_box .item{ margin-bottom: 20px;} .system_case_box .item p{ float: left; width: 49%; text-align: center; font-size: 16px; padding: 6px 0 9px; margin-bottom: 2%; border: solid 2px #3a5db5; color: #3a5db5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;} .system_case_box .item p:nth-child(2n+1){ margin-right: 2%;} @media screen and (max-width: 1000px) { .system_case_box .item p{ font-size: 14px;}} @media screen and (max-width: 840px) { .system_case_box .item p{ float: none; width: 100%;}} @media screen and (max-width: 640px) { .system_case_box ul{ width: 95%; margin: 0 auto;} .system_case_box li{ float: none; width: 100%; margin-bottom: 10%;} .system_case_box .item p{ float: left; width: 49%;} .system_case_box h4 { font-size: 16px; padding: 30px 0;} .system_case_box p{ font-size: 13px;}}