@charset "UTF-8"; /*=============================================== # font-size =================================================*/ /*========================================================================== # reset - ブラウザの差異や不要なスタイルを無くすためのスタイル ========================================================================== */ html { scroll-behavior: smooth; } body { margin-right: 0; margin-left: 0; font-size: 16px; } .p-touch_wrap h1, .p-touch_wrap h2, .p-touch_wrap h3, .p-touch_wrap h4, .p-touch_wrap h5, .p-touch_wrap h6, .p-touch_wrap p, .p-touch_wrap ul, .p-touch_wrap ol, .p-touch_wrap dd, .p-touch_wrap dt { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; list-style: none; } /* cutting-head e変更 納品時削除 ================================*/ /*=============================================== # common =================================================*/ .wrap { overflow: hidden; line-break: normal; } .p-touch_wrap { width: 100%; font-size: 16px; color: #000; font-family: 'Noto Sans JP', serif; line-height: 2; letter-spacing: 0.1em; position: relative; font-weight: 400; z-index: 1; overflow-x: hidden; background-color: #F0F0EF; padding-bottom: 200px; } .p-touch_wrap a { cursor: pointer; text-decoration: none; } @media screen and (max-width: 1100px) { .p-touch_wrap { font-size: 16px; } } @media screen and (max-width: 767px) { .p-touch_wrap { font-size: 15px; padding-bottom: 130px; } } .p-touch_wrap img { width: 100%; } .p-touch_wrap iframe { width: 100%; height: inherit; } .container { max-width: 1080px; margin: 0 auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: 0 20px; position: relative; z-index: 11; } @media screen and (max-width: 1279px) { .container { padding: 0 20px; } } @media screen and (max-width: 767px) { .container { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; padding: 0 15px; } } @media screen and (max-width: 767px) { .is-pc { display: none !important; } } .is-sp { display: none !important; } @media screen and (max-width: 767px) { .is-sp { display: block !important; } } /*=============================================== # メイン =================================================*/ .mv { width: 100%; } .mv h1 { margin-bottom: -10px; } /* section ================================*/ section { word-break: break-all; } .section_title { text-align: center; } .section_title h2 { font-family: 'ヒラギノ角ゴシック','Hiragino Sans', 'Noto Sans JP',sans-serif; position: relative; display: inline-block; padding-bottom: 55px; font-size: 60px; font-size: 3.75rem; line-height: 1.5; font-weight: 600; } @media screen and (max-width: 1279px) { .section_title h2 { font-size: 50px; font-size: 3.125rem; } } @media screen and (max-width: 767px) { .section_title h2 { font-size: 38px; font-size: 2.375rem; padding-bottom: 35px; } } .section_title h2::after { position: absolute; content: ""; background: #152D9B; width: 16px; height: 16px; right: -22px; bottom: 71px; border-radius: 50%; } @media screen and (max-width: 767px) { .section_title h2::after { width: 13px; height: 13px; right: -16px; bottom: 51px; } } .section_title h2::before { position: absolute; content: ""; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #152D9B; height: 5px; width: 112px; } @media screen and (max-width: 767px) { .section_title h2::before { width: 95px; } } .btn { border: 1px solid #000; border-radius: 100px; display: block; width: 380px; line-height: 1; padding: 20px 0; text-align: center; font-size: 20px; font-size: 1.25rem; font-weight: 500; color: #000; position: relative; } @media screen and (max-width: 767px) { .btn { width: 350px; font-size: 16px; font-size: 1rem; } } .btn::after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 11px; border-color: transparent transparent transparent #000000; top: 50%; right: 25px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*=============================================== # section_one =================================================*/ .section_one { background-color: #fff; padding-top: 125px; padding-bottom: 140px; } @media screen and (max-width: 767px) { .section_one { padding-top: 80px; padding-bottom: 90px; } } .section_one_text { margin-top: 60px; text-align: center; } @media screen and (max-width: 767px) { .section_one_text { text-align: left; margin-top: 50px; } } .section_one_text p { color: #646464; letter-spacing: 0; font-size: 16px; font-size: 1rem; line-height: 2; } @media screen and (max-width: 767px) { .section_one_text p { line-height: 1.875; } } /*=============================================== # section_two =================================================*/ .section_two { padding-top: 100px; } .section_two_top { margin-top: 100px; } @media screen and (max-width: 767px) { .section_two_top { margin-top: 70px; } } .section_two_bottom { margin-top: 65px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); gap: 35px; } @media screen and (max-width: 767px) { .section_two_bottom { margin: auto; margin-top: 50px; width: 80%; -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); gap: 25px; } } /*=============================================== # section_t_three =================================================*/ .section_t_three { margin-top: 125px; } .section_t_three_wrap01 { position: relative; padding-top: 132px; } @media screen and (max-width: 1100px) { .section_t_three_wrap01 { padding-top: 250px; } } @media screen and (max-width: 767px) { .section_t_three_wrap01 { padding-top: 0; } } .section_t_three_wrap01_img { position: absolute; content: ""; width: 50%; top: 0; left: 0; } @media screen and (max-width: 1100px) { .section_t_three_wrap01_img { width: 60%; } } @media screen and (max-width: 767px) { .section_t_three_wrap01_img { position: static; width: 90%; } } .section_t_three_wrap01_content { background-color: #F0F0EF; max-width: 560px; margin-left: auto; position: relative; padding-top: 90px; padding-left: 72px; padding-right: 10px; padding-bottom: 75px; } @media screen and (max-width: 1279px) { .section_t_three_wrap01_content { padding-top: 60px; padding-left: 52px; padding-right: 10px; padding-bottom: 65px; } } @media screen and (max-width: 1100px) { .section_t_three_wrap01_content { width: 70%; } } @media screen and (max-width: 767px) { .section_t_three_wrap01_content { width: 80%; padding-left: 30px; padding-top: 40px; padding-bottom: 40px; -webkit-transform: translateY(-200px); transform: translateY(-200px); } } @media screen and (max-width: 550px) { .section_t_three_wrap01_content { -webkit-transform: translateY(-150px); transform: translateY(-150px); width: 77%; } } .section_t_three_wrap01_content_side { position: absolute; width: 150px; right: 0; top: 0; } @media screen and (max-width: 767px) { .section_t_three_wrap01_content_side { width: 120px; } } @media screen and (max-width: 550px) { .section_t_three_wrap01_content_side { width: 80px; } } .section_t_three_wrap01_content_side.-two { top: -110px; } .section_t_three_content_title p { font-size: 24px; font-size: 1.5rem; letter-spacing: 0; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 767px) { .section_t_three_content_title p { font-size: 20px; font-size: 1.25rem; } } .section_t_three_content_title h2 { font-size: 36px; font-size: 2.25rem; letter-spacing: 0; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 767px) { .section_t_three_content_title h2 { font-size: 22px; font-size: 1.375rem; } } @media screen and (max-width: 550px) { .section_t_three_content_title h2 { font-size: 20px; font-size: 1.25rem; } } .section_t_three_content_text { margin-top: 36px; max-width: 393px; } @media screen and (max-width: 767px) { .section_t_three_content_text { margin-top: 25px; } } .section_t_three_content_text h3 { font-size: 24px; font-size: 1.5rem; letter-spacing: 0; font-weight: bold; line-height: 1.5; } @media screen and (max-width: 767px) { .section_t_three_content_text h3 { font-size: 20px; font-size: 1.25rem; } } @media screen and (max-width: 550px) { .section_t_three_content_text h3 { font-size: 18px; font-size: 1.125rem; } } .section_t_three_content_text p { margin-top: 15px; font-size: 16px; font-size: 1rem; color: #646464; letter-spacing: 0; } @media screen and (max-width: 550px) { .section_t_three_content_text p { font-size: 14px; font-size: 0.875rem; } } .section_t_three_content_text p a { color: #646464; text-decoration: underline; } .section_t_three_wrap02 { margin-top: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 1279px) { .section_t_three_wrap02 { margin-top: 180px; } } @media screen and (max-width: 1100px) { .section_t_three_wrap02 { margin-top: 150px; } } @media screen and (max-width: 767px) { .section_t_three_wrap02 { gap: 40px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: -100px; } } .section_t_three_wrap02.-two { margin-top: 150px; } @media screen and (max-width: 1279px) { .section_t_three_wrap02.-two { margin-top: 180px; } } @media screen and (max-width: 1100px) { .section_t_three_wrap02.-two { margin-top: 150px; } } @media screen and (max-width: 767px) { .section_t_three_wrap02.-two { margin-top: -100px; } } .section_t_three_wrap02_content { width: 37%; margin-top: -36px; } @media screen and (max-width: 1279px) { .section_t_three_wrap02_content { width: 43%; } } @media screen and (max-width: 1100px) { .section_t_three_wrap02_content { width: 45%; } } @media screen and (max-width: 767px) { .section_t_three_wrap02_content { margin-top: -25px; width: 100%; } } .section_t_three_wrap02_img { width: 50%; } @media screen and (max-width: 767px) { .section_t_three_wrap02_img { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; width: 100%; } } /*=============================================== # section_t_four =================================================*/ .section_t_four { margin-top: 200px; } @media screen and (max-width: 767px) { .section_t_four { margin-top: 100px; } } .section_t_four_wrap01 { position: relative; padding-top: 289px; } @media screen and (max-width: 1100px) { .section_t_four_wrap01 { padding-top: 350px; } } @media screen and (max-width: 767px) { .section_t_four_wrap01 { padding-top: 0; } } .section_t_four_wrap01_img { position: absolute; content: ""; width: 50%; top: 0; right: 0; } @media screen and (max-width: 1100px) { .section_t_four_wrap01_img { width: 60%; } } @media screen and (max-width: 767px) { .section_t_four_wrap01_img { position: static; width: 90%; margin-left: auto; } } .section_t_four_wrap01_content { background-color: #F0F0EF; max-width: 642px; margin-right: auto; position: relative; padding-top: 90px; padding-right: 55px; padding-bottom: 5px; padding-left: 10px; } @media screen and (max-width: 1279px) { .section_t_four_wrap01_content { padding: 90px 35px 5px 10px; } } @media screen and (max-width: 1100px) { .section_t_four_wrap01_content { width: 70%; } } @media screen and (max-width: 767px) { .section_t_four_wrap01_content { width: 80%; padding-right: 30px; padding-top: 40px; padding-bottom: 40px; -webkit-transform: translateY(-200px); transform: translateY(-200px); } } @media screen and (max-width: 550px) { .section_t_four_wrap01_content { -webkit-transform: translateY(-100px); transform: translateY(-100px); width: 77%; } } .section_t_four_wrap01_content_side { position: absolute; width: 150px; left: 0; top: 0; } @media screen and (max-width: 767px) { .section_t_four_wrap01_content_side { width: 120px; } } @media screen and (max-width: 550px) { .section_t_four_wrap01_content_side { width: 80px; left: -20px; } } .section_t_four_wrap01_content_side.-two { top: -110px; } .section_t_four_content_title { margin-left: auto; max-width: 399px; } .section_t_four_content_title p { font-size: 24px; font-size: 1.5rem; letter-spacing: 0; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 767px) { .section_t_four_content_title p { font-size: 20px; font-size: 1.25rem; } } .section_t_four_content_title h2 { font-size: 36px; font-size: 2.25rem; letter-spacing: 0; font-weight: bold; line-height: 1.8; } @media screen and (max-width: 767px) { .section_t_four_content_title h2 { font-size: 22px; font-size: 1.375rem; } } @media screen and (max-width: 550px) { .section_t_four_content_title h2 { font-size: 20px; font-size: 1.25rem; } } .section_t_four_content_text { margin-top: 36px; margin-left: auto; max-width: 415px; } @media screen and (max-width: 767px) { .section_t_four_content_text { margin-top: 25px; } } .section_t_four_content_text h3 { font-size: 24px; font-size: 1.5rem; letter-spacing: 0; font-weight: bold; line-height: 1.5; } @media screen and (max-width: 767px) { .section_t_four_content_text h3 { font-size: 20px; font-size: 1.25rem; } } @media screen and (max-width: 550px) { .section_t_four_content_text h3 { font-size: 18px; font-size: 1.125rem; } } .section_t_four_content_text p { margin-top: 15px; font-size: 16px; font-size: 1rem; color: #646464; letter-spacing: 0; } @media screen and (max-width: 550px) { .section_t_four_content_text p { font-size: 14px; font-size: 0.875rem; } } .section_t_four_content_text p a { color: #646464; text-decoration: underline; } .section_t_four_wrap02 { margin-top: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 1279px) { .section_t_four_wrap02 { margin-top: 180px; } } @media screen and (max-width: 1100px) { .section_t_four_wrap02 { margin-top: 150px; } } @media screen and (max-width: 767px) { .section_t_four_wrap02 { gap: 40px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: -100px; } } .section_t_four_wrap02.-two { margin-top: 150px; } @media screen and (max-width: 1279px) { .section_t_four_wrap02.-two { margin-top: 180px; } } @media screen and (max-width: 1100px) { .section_t_four_wrap02.-two { margin-top: 150px; } } @media screen and (max-width: 767px) { .section_t_four_wrap02.-two { margin-top: -100px; } } .section_t_four_wrap02_content { width: 38.5%; margin-top: -36px; } @media screen and (max-width: 1279px) { .section_t_four_wrap02_content { width: 43%; } } @media screen and (max-width: 1100px) { .section_t_four_wrap02_content { width: 45%; } } @media screen and (max-width: 767px) { .section_t_four_wrap02_content { margin-top: -25px; width: 100%; } } .section_t_four_wrap02_img { width: 50%; } @media screen and (max-width: 767px) { .section_t_four_wrap02_img { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; width: 100%; } } /* section_detail ================================*/ .section_detail { margin-top: 100px; } @media screen and (max-width: 767px) { .section_detail { margin-top: 70px; } } .section_detail_head { cursor: pointer; background-color: #152D9B; padding: 20px 40px; } @media screen and (max-width: 767px) { .section_detail_head { padding: 15px 30px; } } @media screen and (max-width: 550px) { .section_detail_head { padding: 15px 15px; padding-right: 30px; } } .section_detail_head h3 { font-size: 20px; font-size: 1.25rem; color: #fff; line-height: 1; position: relative; } @media screen and (max-width: 767px) { .section_detail_head h3 { font-size: 18px; font-size: 1.125rem; } } @media screen and (max-width: 550px) { .section_detail_head h3 { font-size: 16px; font-size: 1rem; line-height: 1.3; } } .section_detail_head h3::after { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 13px 7.5px 0 7.5px; border-color: #ffffff transparent transparent transparent; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 767px) { .section_detail_head h3::after { right: -15px; } } .accordion-open h3::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); -webkit-transition: all 0.3s; transition: all 0.3s; } .accordion-body { display: none; } .section_detail_body { border: #707070 1px solid; border-top: none; } .section_detail_top_item { padding-top: 100px; max-width: 1051px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1100px) { .section_detail_top_item { width: 98%; padding-top: 80px; } } @media screen and (max-width: 767px) { .section_detail_top_item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding-top: 50px; width: 96%; } } .section_detail_top_item:nth-child(2n) { margin-left: auto; } @media screen and (max-width: 767px) { .section_detail_top_item { margin: auto; } } .section_detail_top_item_img { width: 51.3%; } @media screen and (max-width: 767px) { .section_detail_top_item_img { width: 100%; -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } } .section_detail_top_item_content { width: 38.1%; } @media screen and (max-width: 1100px) { .section_detail_top_item_content { width: 45%; } } @media screen and (max-width: 767px) { .section_detail_top_item_content { width: 100%; } } .section_detail_top_item_content h4 { font-size: 24px; font-size: 1.5rem; letter-spacing: 0; font-weight: bold; line-height: 1.5; } @media screen and (max-width: 1100px) { .section_detail_top_item_content h4 { font-size: 22px; font-size: 1.375rem; } } @media screen and (max-width: 767px) { .section_detail_top_item_content h4 { font-size: 20px; font-size: 1.25rem; } } .section_detail_top_item_content p { color: #646464; font-size: 16px; font-size: 1rem; letter-spacing: 0; line-height: 2; margin-top: 25px; } @media screen and (max-width: 767px) { .section_detail_top_item_content p { margin-top: 15px; font-size: 14px; font-size: 0.875rem; } } .section_detail_bottom { margin: auto; margin-top: 100px; max-width: 1020px; } @media screen and (max-width: 1100px) { .section_detail_bottom { width: 98%; } } @media screen and (max-width: 767px) { .section_detail_bottom { width: 96%; margin-top: 80px; } } .section_detail_bottom_title { position: relative; text-align: center; } .section_detail_bottom_title::after { position: absolute; content: ""; background: #000; height: 2px; width: 30%; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -2; } @media screen and (max-width: 1100px) { .section_detail_bottom_title::after { width: 25%; } } @media screen and (max-width: 767px) { .section_detail_bottom_title::after { width: 18%; } } @media screen and (max-width: 550px) { .section_detail_bottom_title::after { width: 10%; } } .section_detail_bottom_title::before { position: absolute; content: ""; background: #000; height: 2px; width: 30%; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -2; } @media screen and (max-width: 1100px) { .section_detail_bottom_title::before { width: 25%; } } @media screen and (max-width: 767px) { .section_detail_bottom_title::before { width: 18%; } } @media screen and (max-width: 550px) { .section_detail_bottom_title::before { width: 10%; } } .section_detail_bottom_title h4 { display: inline-block; position: relative; text-align: center; font-size: 24px; font-size: 1.5rem; letter-spacing: 0; line-height: 1.5; font-weight: bold; } @media screen and (max-width: 1100px) { .section_detail_bottom_title h4 { font-size: 20px; font-size: 1.25rem; } } @media screen and (max-width: 767px) { .section_detail_bottom_title h4 { font-size: 18px; font-size: 1.125rem; } } @media screen and (max-width: 550px) { .section_detail_bottom_title h4 { font-size: 16px; font-size: 1rem; } } .section_detail_bottom_title h4::after { position: absolute; content: ""; background: url(/-/media/cojp/product/labelwriter/special/cube/team/img/Use) center center/contain no-repeat; width: 214px; height: 100px; top: -50px; right: -100px; z-index: -3; } @media screen and (max-width: 1100px) { .section_detail_bottom_title h4::after { width: 180px; height: 90px; top: -45px; } } @media screen and (max-width: 767px) { .section_detail_bottom_title h4::after { width: 150px; height: 70px; top: -35px; right: -50px; } } .section_detail_table { margin-top: 80px; } @media screen and (max-width: 767px) { .section_detail_table { margin-top: 40px; } } .section_detail_table_body { width: 100%; } @media screen and (max-width: 767px) { .section_detail_table_body { overflow: scroll; } } .section_detail_table_body table { border-collapse: collapse; border-spacing: 0; } @media screen and (max-width: 767px) { .section_detail_table_body table { width: 652px; } } .section_detail_table_body table td, .section_detail_table_body table th { text-align: center; font-size: 16px; font-size: 1rem; letter-spacing: 0; line-height: 1.5; } @media screen and (max-width: 767px) { .section_detail_table_body table td, .section_detail_table_body table th { font-size: 14px; font-size: 0.875rem; } } .section_detail_table_body table th { width: 15.2%; font-weight: bold; } .section_detail_table_body table td { width: 21.2%; } .section_detail_table_body table td span { font-size: 12px; font-size: 0.75rem; } .section_detail_table_body table img { width: 100%; } .section_detail_table_body table .l02 td, .section_detail_table_body table .l02 th, .section_detail_table_body table .l03 td, .section_detail_table_body table .l03 th, .section_detail_table_body table .l04 td, .section_detail_table_body table .l04 th, .section_detail_table_body table .l05 td, .section_detail_table_body table .l05 th { padding: 15px 3px; } @media screen and (max-width: 767px) { .section_detail_table_body table .l02 td, .section_detail_table_body table .l02 th, .section_detail_table_body table .l03 td, .section_detail_table_body table .l03 th, .section_detail_table_body table .l04 td, .section_detail_table_body table .l04 th, .section_detail_table_body table .l05 td, .section_detail_table_body table .l05 th { padding: 10px 3px; } } .section_detail_table_body table .l02 th, .section_detail_table_body table .l03 th, .section_detail_table_body table .l04 th, .section_detail_table_body table .l05 th { border-left: #707070 1px solid; border-right: #707070 1px solid; } .section_detail_table_body table .l02 td:last-child, .section_detail_table_body table .l03 td:last-child, .section_detail_table_body table .l04 td:last-child, .section_detail_table_body table .l05 td:last-child { border-right: #707070 1px solid; } .section_detail_table_body table .l01 { -webkit-transform: translateY(0px); transform: translateY(0px); } .section_detail_table_body table .l02 th { border-top: #707070 1px solid; } .section_detail_table_body table .l02 td { border-top: #707070 1px solid; } .section_detail_table_body table .l02 td:nth-child(2n) { background-color: #F4F4F3; } .section_detail_table_body table .l03 th { background-color: #F4F4F3; } .section_detail_table_body table .l03 td:nth-child(2n+1) { background-color: #F4F4F3; } .section_detail_table_body table .l04 td:nth-child(2n) { background-color: #F4F4F3; } .section_detail_table_body table .l05 th { background-color: #F4F4F3; border-bottom: #707070 1px solid; } .section_detail_table_body table .l05 td { border-bottom: #707070 1px solid; } .section_detail_table_body table .l05 td:nth-child(2n+1) { background-color: #F4F4F3; } /* ryuuyoububun ================================*/ .section_detail_app { padding-bottom: 100px; } @media screen and (max-width: 767px) { .section_detail_app { padding-bottom: 0; } } #app_dl { width: 100%; background-color: #F0F0F0; margin: 60px 0 0 0; padding: 60px 0; } #app_dl .tit { text-align: center; font-size: 25px; font-weight: bold; letter-spacing: 0.1em; } #app_dl .tit span { font-size: 18px; } #app_dl .app_flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #app_dl .app_flex > div { margin: 0 20px; } #app_dl .box01 { width: 440px; margin: 42px auto 0 auto; /* height: 110px; */ } #app_dl .box01 .left { width: 100px; float: left; } #app_dl .box01 .left img { width: initial; } #app_dl .box01 .rgt { float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #app_dl .box02 { width: 460px; margin: 55px auto 0 auto; } #app_dl .box02 .txt001 { width: 460px; border-bottom: 1px solid #000000; text-align: center; font-size: 16px; font-weight: bold; padding: 0 0 10px 0; } #app_dl .box02 ul { margin: 25px 0 0 0; } #app_dl .box02 li { width: 225px; float: left; margin: 0 10px 0 0; } body .app_flex a:link { color: #000; text-decoration: none; } #app_dl .box02 li.last { margin: 0; } .btn_dc { width: 451px; height: 115px; text-align: center; border: 1px solid #4e1d1d !important; margin: 75px auto 0 auto !important; } .btn_dc img { width: 449px; height: 113px; } @media screen and (max-width: 767px) { #app_dl { width: 100%; background-color: #F0F0F0; margin: 30px 0 0 0; padding: 0px 0; padding-top: 50px; } #app_dl .tit { width: 90%; text-align: center; font-size: 20px; margin: 0 auto; font-weight: bold; letter-spacing: 0.1em; line-height: 1.7; } #app_dl .tit span { font-size: 24px; } #app_dl .box01 { width: 90%; margin: 25px auto 0 auto; } #app_dl .box01 .left { width: 100%; text-align: center; } #app_dl .box01 .rgt { width: 100%; } #app_dl .box02 { width: 90%; margin: 40px auto 20px auto; } #app_dl .box02 .txt001 { width: 100%; border-bottom: 1px solid #000000; text-align: center; font-weight: bold; padding: 0 0 10px 0; line-height: 1.5; } #app_dl .box02 ul { margin: 25px 0 0 0; width: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #app_dl .box02 li { width: 45%; float: left; } #app_dl .box02 li.last { margin: 0; } .btn_dc { width: 70%; text-align: center; margin: 45px auto 0 auto !important; padding: 1px 0 0 0; border: none !important; } .btn_dc img, .btn_dc02 img, .btn_pro img { width: 90%; border: 1px solid #000000; height: initial; } } /*# sourceMappingURL=style.css.map */