@charset "UTF-8"; /* @include animation(anime-opening_face 4s ease 0.5s); @include keyframes(anime-opening_face){ 0% { transform: translate(-50%,100%); } 30% { transform: translate(-50%,0); } 70% { transform: translate(-50%,0); } 100%{ transform: translate(-50%,100%); } } */ @media screen and (max-width: 640px) { .mod-freeHTML .pc_only { display: none; } } @media (min-width: 641px) { .mod-freeHTML .sp_only { display: none; } } .mod-freeHTML .br-product_link_point { position: absolute; top: 0; left: 0; margin-top: -10px; display: block; } .mod-freeHTML .mod-headingLv1 { margin-bottom: 0; } .mod-freeHTML .mod-productLineUp2_heading { display: inline-block; } .mod-freeHTML .mod-productLineUp3_icon { margin-bottom: 5px; } .mod-freeHTML .br-product_main { /*============================== reset ==============================*/ width: 100%; background: #f2f2f2; text-align: center; } .mod-freeHTML .br-product_main * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_main *:before, .mod-freeHTML .br-product_main *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_main img { max-width: 100%; } .mod-freeHTML .br-product_main ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_main a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_main a:focus { outline: none; } .mod-freeHTML .br-product_main sup, .mod-freeHTML .br-product_main sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_main sup { bottom: 1ex; } .mod-freeHTML .br-product_main sub { top: 0.5ex; } .mod-freeHTML .br-product_main p { margin: 0; } .mod-freeHTML .br-product_copy { /*============================== reset ==============================*/ text-align: center; margin: 45px auto 60px; } .mod-freeHTML .br-product_copy * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_copy *:before, .mod-freeHTML .br-product_copy *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_copy img { max-width: 100%; } .mod-freeHTML .br-product_copy ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_copy a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_copy a:focus { outline: none; } .mod-freeHTML .br-product_copy sup, .mod-freeHTML .br-product_copy sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_copy sup { bottom: 1ex; } .mod-freeHTML .br-product_copy sub { top: 0.5ex; } .mod-freeHTML .br-product_copy p { margin: 0; } .mod-freeHTML .br-product_copy .product-copy_text { display: inline-block; font-weight: bold; line-height: 1; margin: 0; font-size: 38px; background: linear-gradient(transparent 98%, #000000 0%); } .mod-freeHTML .br-product_lineup { /*============================== reset ==============================*/ } .mod-freeHTML .br-product_lineup * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_lineup *:before, .mod-freeHTML .br-product_lineup *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_lineup img { max-width: 100%; } .mod-freeHTML .br-product_lineup ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_lineup a { text-decoration: none; } .mod-freeHTML .br-product_lineup a:focus { outline: none; } .mod-freeHTML .br-product_lineup sup, .mod-freeHTML .br-product_lineup sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_lineup sup { bottom: 1ex; } .mod-freeHTML .br-product_lineup sub { top: 0.5ex; } .mod-freeHTML .br-product_lineup p { margin: 0; } .mod-freeHTML .br-product_lineup > ul { display: flex; justify-content: space-around; align-items: flex-start; gap: 60px; width: 100%; margin: 0 auto; flex-wrap: wrap; max-width: 1200px; padding-top: 80px; } .mod-freeHTML .br-product_lineup > ul > li { display: flex; flex-direction: column; width: calc((100% - 60px) / 2); margin: 0; } .mod-freeHTML .br-product_lineup > ul > li:nth-child(3) .product-lineup_wrap, .mod-freeHTML .br-product_lineup > ul > li:nth-child(4) .product-lineup_wrap { margin: 30px 0 0; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn { width: 100%; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap { display: flex; height: 100%; margin: 30px 0; gap: 40px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap + .product-lineup_wrap { margin-top: 30px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap[data-css="wrap02"] { margin-bottom: 70px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap[data-css="wrap03"] { margin-bottom: 100px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap[data-css="wrap04"] { margin-bottom: 48px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img { width: calc(280px / (570px - 40px) * 100%); display: flex; flex-direction: column; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a { flex-grow: 1; width: 100%; display: flex; align-items: center; background: #fde7e4; font-weight: bold; color: #f97e6f; position: relative; border: 4px solid #f97e6f; font-size: 18px; padding: 20px 50px 20px 20px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a::before { content: ""; display: block; position: absolute; z-index: 1; width: 32px; height: 100%; background: #f97e6f; top: 0; right: 0; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a::after { content: ""; display: block; position: absolute; top: 50%; right: 0; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; transform: rotate(45deg) translateY(-50%); width: 12px; height: 12px; margin-right: 15px; z-index: 2; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { width: calc(250px / (570px - 40px) * 100%); } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_label { display: inline-block; padding: 0 0.5em; font-size: 14px; font-weight: bold; background-color: #F5F5F5; color: #000000; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag { width: 100%; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag li { font-weight: bold; font-size: 14px; line-height: 1.5; padding: 0.4em 1em; border-bottom: 0.5px solid #000000; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag li:last-of-type { border-bottom: none; text-align: right; padding: 0; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business .product-lineup_btn > a { background: #25a6c0; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business .product-lineup_wrap .product-lineup_img > a { color: #25a6c0; border-color: #25a6c0; background: #e3f4f4; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business .product-lineup_wrap .product-lineup_img > a::before { background-color: #25a6c0; } .mod-freeHTML .br-product_link { /*============================== reset ==============================*/ margin-top: 60px; margin-bottom: 75px; padding: 0 40px; } .mod-freeHTML .br-product_link * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_link *:before, .mod-freeHTML .br-product_link *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_link img { max-width: 100%; } .mod-freeHTML .br-product_link ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_link a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_link a:focus { outline: none; } .mod-freeHTML .br-product_link sup, .mod-freeHTML .br-product_link sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_link sup { bottom: 1ex; } .mod-freeHTML .br-product_link sub { top: 0.5ex; } .mod-freeHTML .br-product_link p { margin: 0; } .mod-freeHTML .br-product_link .product-link_btn { width: 100%; } .mod-freeHTML .br-product_link .product-link_btn > li { width: 100%; max-width: 424px; } .mod-freeHTML .br-product_feature { /*============================== reset ==============================*/ background: #EBF0F5; padding: 80px 10px; } .mod-freeHTML .br-product_feature * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_feature *:before, .mod-freeHTML .br-product_feature *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_feature img { max-width: 100%; } .mod-freeHTML .br-product_feature ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_feature a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_feature a:focus { outline: none; } .mod-freeHTML .br-product_feature sup, .mod-freeHTML .br-product_feature sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_feature sup { bottom: 1ex; } .mod-freeHTML .br-product_feature sub { top: 0.5ex; } .mod-freeHTML .br-product_feature p { margin: 0; } .mod-freeHTML .br-product_feature .product-feature_inner { max-width: 1052px; width: 100%; margin: 0 auto; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_title { text-align: center; margin-bottom: 55px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_copy { text-align: center; font-size: 23px; font-weight: bold; margin-top: 40px; letter-spacing: 0.1em; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list { max-width: 1140px; margin: 0 auto; padding: 0 10px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { position: relative; display: flex; gap: 60px; margin-top: 60px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li + li { margin-top: 110px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; width: calc(898 / 1140 * 100%); } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_btn { width: 100%; margin-top: 20px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text { width: calc(100% - 408px - 22.5px); font-size: 14px; padding-left: 30px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit { display: block; font-weight: bold; line-height: 1.54; font-size: 31px; margin: 0; padding: 0 0 3.9682539683% 0; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_num { position: absolute; bottom: 0; left: 0; width: 100%; margin-bottom: 0; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_img { width: 408px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_att { text-align: right; margin: 70px 0 0; font-size: 10px; padding: 0 10px; } .mod-freeHTML .br-product_feature .br-product_link { margin-bottom: 0; } .mod-freeHTML .br-product_function { /*============================== reset ==============================*/ margin: 180px auto 160px; } .mod-freeHTML .br-product_function * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_function *:before, .mod-freeHTML .br-product_function *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_function img { max-width: 100%; } .mod-freeHTML .br-product_function ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_function a { text-decoration: none; } .mod-freeHTML .br-product_function a:focus { outline: none; } .mod-freeHTML .br-product_function sup, .mod-freeHTML .br-product_function sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_function sup { bottom: 1ex; } .mod-freeHTML .br-product_function sub { top: 0.5ex; } .mod-freeHTML .br-product_function .product-function_inner { max-width: 1052px; padding: 0; width: 100%; margin: 0 auto; text-align: center; } .mod-freeHTML .br-product_function .product-function_inner .product-function_title { position: relative; margin: 0 auto 55px; text-align: center; display: inline-block; background: linear-gradient(transparent 98%, #000000 0%); } .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_tit { margin: 0; font-weight: bold; line-height: 1; font-size: 38px; display: inline-block; } .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_icon { position: absolute; left: 0; margin-left: -25px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text { display: block; margin: 60px 0 0; text-align: center; font-size: 19px; line-height: 1.84; letter-spacing: 0.05em; font-feature-settings: "palt"; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner { position: relative; display: inline-block; width: 100%; max-width: 895px; text-align: center; background: #ffffff; border-radius: 30px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: 0; height: 0; border-style: solid; border-width: 20px 10px 0 10px; border-color: #ffffff transparent transparent transparent; } .mod-freeHTML .br-product_function .product-function_inner .product-function_list { display: flex; justify-content: center; align-items: center; } .mod-freeHTML .br-product_function .product-function_inner .product-function_list:first-of-type { margin-top: 40px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li { display: flex; text-align: center; flex-direction: column; justify-content: flex-end; align-items: stretch; max-width: 170px; width: 32%; } .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li + li { margin-left: 80px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li .product-function_sub { display: block; font-size: 19px; font-weight: bold; margin-bottom: 15px; line-height: 1.5; } .mod-freeHTML .br-product_function .product-function_inner .product-function_btn { display: block; width: 100%; max-width: 670px; margin: 50px auto 0; } .mod-freeHTML .br-product_know { /*============================== reset ==============================*/ margin-top: 240px; } .mod-freeHTML .br-product_know * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_know *:before, .mod-freeHTML .br-product_know *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_know img { max-width: 100%; } .mod-freeHTML .br-product_know ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_know a { text-decoration: none; } .mod-freeHTML .br-product_know a:focus { outline: none; } .mod-freeHTML .br-product_know sup, .mod-freeHTML .br-product_know sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_know sup { bottom: 1ex; } .mod-freeHTML .br-product_know sub { top: 0.5ex; } .mod-freeHTML .br-product_know p { margin: 0; } .mod-freeHTML .br-product_know .product-know_inner { max-width: 1052px; width: 100%; padding: 0 10px; margin: 0 auto; text-align: center; } .mod-freeHTML .br-product_know .product-know_inner .product-know_title { text-align: center; margin-bottom: 20px; display: inline-block; position: relative; background: linear-gradient(transparent 98%, #000000 0%); } .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_tit { display: inline-block; margin: 0; font-size: 38px; font-weight: bold; line-height: 1; } .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon { position: absolute; } .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon.product-know_icon1 { left: 0; transform: translateX(-100%); margin-left: -25px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon.product-know_icon2 { right: 0; transform: translateX(100%); margin-right: -25px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_main { width: 93.023255814%; margin: 40px auto 0; } .mod-freeHTML .br-product_know .product-know_inner .product-know_text { text-align: center; font-size: 14px; margin-bottom: 50px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li { display: flex; text-align: center; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 50%; padding: 0px 45px 0 75px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head { text-align: left; margin-top: 0; margin-bottom: auto; font-size: 14px; padding: 0 35px 35px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box { border: 2px solid #4a4a4a; padding: 20px 0; border-radius: 10px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box .product-know_sub { display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #4a4a4a; margin-bottom: 15px; position: relative; margin: 0 35px 10px; padding-bottom: 5px; line-height: 1; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box .product-know_sub .product-know_att { text-align: right; font-size: 10px; line-height: 1; margin: 0; margin-top: 5px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_btn { margin-top: 35px; display: block; width: 100%; } .mod-freeHTML .br-product_bar { /*============================== reset ==============================*/ margin-top: 220px; } .mod-freeHTML .br-product_bar * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_bar *:before, .mod-freeHTML .br-product_bar *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_bar img { max-width: 100%; } .mod-freeHTML .br-product_bar ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_bar a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_bar a:focus { outline: none; } .mod-freeHTML .br-product_bar sup, .mod-freeHTML .br-product_bar sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_bar sup { bottom: 1ex; } .mod-freeHTML .br-product_bar sub { top: 0.5ex; } .mod-freeHTML .br-product_bar p { margin: 0; } .mod-freeHTML .br-product_bar .product-bar_att { text-align: left; font-size: 10px; } .mod-freeHTML .br-product_bar .product-bar_line { margin-top: 10px; display: block; width: 100%; height: 1px; background: #787878; } .mod-freeHTML .br-product_osusume .product-lineup_item_title { text-align: center; position: relative; } .mod-freeHTML .br-product_osusume .product-lineup_item_title::before { content: ""; display: block; width: 100%; height: 2px; background: #000; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .mod-freeHTML .br-product_osusume .product-lineup_item_title > span { position: relative; display: inline-block; font-size: 38px; font-weight: bold; color: #000; background: #ffffff; padding: 0 1em; } .mod-freeHTML .br-product_osusume .product-lineup_item_title > span::before, .mod-freeHTML .br-product_osusume .product-lineup_item_title > span::after { content: ""; display: block; width: 2px; height: 100%; background: #000; position: absolute; top: 50%; transform-origin: center; } .mod-freeHTML .br-product_osusume .product-lineup_item_title > span::before { left: 0; transform: translateY(-50%) rotate(-30deg); } .mod-freeHTML .br-product_osusume .product-lineup_item_title > span::after { right: 0; transform: translateY(-50%) rotate(30deg); } .mod-freeHTML .br-product_other { /*============================== reset ==============================*/ margin-top: 140px; margin-bottom: 310px; } .mod-freeHTML .br-product_other * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_other *:before, .mod-freeHTML .br-product_other *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_other img { max-width: 100%; } .mod-freeHTML .br-product_other ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_other a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_other a:focus { outline: none; } .mod-freeHTML .br-product_other sup, .mod-freeHTML .br-product_other sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_other sup { bottom: 1ex; } .mod-freeHTML .br-product_other sub { top: 0.5ex; } .mod-freeHTML .br-product_other p { margin: 0; } .mod-freeHTML .br-product_other .product-other_title { margin-bottom: 60px; text-align: center; } .mod-freeHTML .br-product_other .product-other_title_txt { background: linear-gradient(transparent 98%, #000000 0%); font-size: 38px; font-weight: bold; display: inline-block; } .mod-freeHTML .br-product_other .product-other_list { width: 100%; max-width: 1020px; display: grid; gap: 30px 60px; grid-template-columns: repeat(2, 1fr); margin: 100px auto 0; } .mod-freeHTML .br-product_other .product-other_list + .product-other_list { margin: 0 auto; } .mod-freeHTML .br-product_other .product-other_list_item { border-radius: 5px; display: flex; flex-direction: column; background-color: #E7F1F9; } .mod-freeHTML .br-product_other .product-other_model { height: 6.5em; padding: 10px 20px 0; border-radius: 5px; font-size: 26px; display: flex; align-items: center; justify-content: space-between; background-color: #8CB6D1; } .mod-freeHTML .br-product_other .product-other_model_txt { color: #ffffff; font-weight: bold; letter-spacing: 0.04em; line-height: 1.25em; flex-shrink: 1; } .mod-freeHTML .br-product_other .product-other_model_txt .number { font-size: 0.61538em; } .mod-freeHTML .br-product_other .product-other_model_img { width: 40%; flex-shrink: 0; } .mod-freeHTML .br-product_other .product-other_dtl { margin: 20px 20px 0; } .mod-freeHTML .br-product_other .product-other_dtl_box { margin-bottom: 30px; } .mod-freeHTML .br-product_other .product-other_dtl_txt { margin-bottom: 1.5em; } .mod-freeHTML .br-product_other .product-other_dtl_heading { margin-bottom: 15px; padding: 0.25em; color: #00a0c7; border: solid 1px #00a0c7; border-radius: 3px; font-weight: bold; letter-spacing: 0.06em; text-align: center; } .mod-freeHTML .br-product_other .product-other_dtl_heading--fill { background: #00a0c7; color: #ffffff; } .mod-freeHTML .br-product_other .product-other_dtl_arrow { width: 70px; margin: 15px auto; } .mod-freeHTML .br-product_other .product-other_btn { padding: 40px 0; margin-top: auto; } .mod-freeHTML .br-product_other .product-other_btn a { display: block; } .mod-freeHTML .br-product_other .product-other_btn--foil, .mod-freeHTML .br-product_other .product-other_btn--sublimation { margin-top: auto; } .mod-freeHTML .br-product_menu { /*============================== reset ==============================*/ padding: 80px 0 190px; } .mod-freeHTML .br-product_menu * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_menu *:before, .mod-freeHTML .br-product_menu *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML .br-product_menu img { max-width: 100%; } .mod-freeHTML .br-product_menu ul { list-style: none; margin: 0; padding: 0; } .mod-freeHTML .br-product_menu a { text-decoration: none; display: inline; } .mod-freeHTML .br-product_menu a:focus { outline: none; } .mod-freeHTML .br-product_menu sup, .mod-freeHTML .br-product_menu sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } .mod-freeHTML .br-product_menu sup { bottom: 1ex; } .mod-freeHTML .br-product_menu sub { top: 0.5ex; } .mod-freeHTML .br-product_menu p { margin: 0; } .mod-freeHTML .br-product_menu_select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; } .mod-freeHTML .br-product_menu_select .br-product_menu_select_ttl { margin-bottom: 15px; border-bottom: solid 1px #000000; } .mod-freeHTML .br-product_menu_select_inner { display: flex; gap: 15px; } .mod-freeHTML .br-product_menu_select_btn { width: 100%; } .mod-freeHTML .br-product_menu_select_btn a { width: 100%; height: 100%; padding: 1em; background: #f97e6f; color: #ffffff; font-size: 18px; font-weight: bold; line-height: 1.25; text-align: center; display: block; position: relative; } .mod-freeHTML .br-product_menu_select_btn a::after { content: ""; width: 12px; height: 12px; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; transform: rotate(45deg) translateY(-50%); margin-top: -1px; position: absolute; right: 25px; } .mod-freeHTML .br-product_menu_select_btn a.btn-business { background: #25a6c0; } .mod-freeHTML .br-product_menu_select_btn a.btn-inkjet { background: #d52d3e; } .mod-freeHTML .br-product_menu_select_btn a.btn-laser { background: #0056b5; } .mod-freeHTML .br-product_menu_select_btn a .small { font-size: 0.777778em; } .mod-freeHTML .br-product_menu_anchor { margin: 0 0 30px; display: flex; justify-content: center; align-items: stretch; gap: 0 20px; } .mod-freeHTML .br-product_menu_anchor_btn a { width: 100%; height: 100%; padding: 1.5em 2em; background: #F5F5F5; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; position: relative; line-height: 1.125; border-bottom: 2px solid #000000; } .mod-freeHTML .br-product_menu_anchor_btn a::after { content: ""; width: 12px; height: 12px; border-bottom: 2px solid #000000; border-right: 2px solid #000000; position: absolute; top: 50%; right: 1em; transform: translate(0, calc(-50% - 4px)) rotate(45deg); } /* .mod-freeHTML{ .mod-headingLv3{ margin-top: 0; } } .mod-freeHTML{ .mod2-freep0036{ margin-bottom: 80px; } } */ @media (min-width: 641px) { .mod-freeHTML .br-product_main .product-product_main_img img { height: 30dvh; min-height: 200px; max-height: 385px; object-fit: cover; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_main .product-product_main_img img { height: auto; min-height: 140px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_copy { margin: 4.6875% auto; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_copy .product-copy_text { font-size: 16px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_copy .product-copy_text { background: linear-gradient(transparent 94%, #000000 0%); } } @media screen and (max-width: 1000px) { .mod-freeHTML .br-product_lineup > ul > li { width: 100%; margin: 0 10px; } } @media screen and (max-width: 1000px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home1 { order: 1; } } @media screen and (max-width: 900px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home2 { order: 2; } } @media screen and (max-width: 1000px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business1 { margin-left: 10px; order: 3; } } @media (min-width: 641px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business2 { margin-left: 30px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business2 { margin-left: 10px; order: 4; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn { margin-bottom: 30px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap + .product-lineup_wrap { margin-top: 4.6875%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img { width: calc(246 / 503 * 100%); } } @media (min-width: 641px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a { min-height: 135px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a { font-size: 12px; border-width: 2px; padding: 10px 25px 10px 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a::before { width: 20px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a::after { width: 8px; height: 8px; margin-right: 10px; border-width: 2px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { width: calc(220 / 503 * 100%); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_label { font-size: 12px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li { font-size: 10px; padding: 0.3em 1em; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_link { margin: 9.375% 0; padding: 0 30px; } } @media (min-width: 641px) { .mod-freeHTML .br-product_link .product-link_btn { display: flex; justify-content: center; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_link .product-link_btn { display: block; } } @media (min-width: 641px) { .mod-freeHTML .br-product_link .product-link_btn > li { flex-basis: 50%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_link .product-link_btn > li { max-width: none; } } @media (min-width: 641px) { .mod-freeHTML .br-product_link .product-link_btn > li + li { margin-left: 20px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_link .product-link_btn > li + li { margin-top: 4.6875%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature { padding: 70px 0 50px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_title { width: 100%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_title { width: 79.6875%; margin: 0 auto 7.8125%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_copy { font-size: 18px; letter-spacing: 0.05em; margin-top: 20px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list { position: relative; margin: 0 auto; padding-left: 0; padding-right: 0; width: 87.5%; max-width: 503px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { border-bottom: none; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { border-bottom: none; padding-bottom: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li + li { margin-top: 9.375%; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap { display: block; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap { display: block; } } @media (min-width: 641px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_btn { padding-left: 30px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_btn { padding-left: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_btn { width: 100%; margin: 30px auto 0; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text { width: 100%; padding-left: 0; margin-bottom: 30px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text { font-size: 20px; width: 100%; padding-left: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head { border-bottom: none; position: relative; min-height: 4.5em; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit br { display: none; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit { font-size: 29px; font-feature-settings: "palt"; letter-spacing: 0.1em; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit br { display: block; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit br.pc_only { display: none; } } @media (min-width: 641px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_num { max-width: 200px; transform: translateX(-100%); } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_num { width: 11.9047619048%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_num { width: 102%; transform: translateX(-4.7169811321%); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_dis { width: 100%; margin: 20px 0 0; font-size: 14px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_img { width: 100%; margin: 0 auto; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_img img { width: 100%; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_att { margin-right: 5.5555555556%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_att { font-size: 10px; width: 100%; margin: 40px 0 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title { margin-bottom: 6.25%; border-bottom: none; text-align: left; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title { background: linear-gradient(transparent 94%, #000000 0%); } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_tit { font-size: 24px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_tit { font-size: 18px; line-height: 1.4; } } @media (min-width: 641px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_icon { bottom: 0; transform: translateX(-100%); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_icon { width: 20px; margin-left: -10px; top: 50%; transform: translateX(-100%) translateY(-50%); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner { font-size: 12px; width: 79.6875%; margin: 0 auto; margin-bottom: 7.8125%; text-align: left; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner br { display: none; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list { margin: 0 auto; padding: 0 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li + li { margin-left: 3%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li .product-function_sub { font-size: 14px; margin-top: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_btn { margin: 7.8125% auto 0; padding: 0 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know { margin: 60px auto; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title { margin-bottom: 6.25%; border: none; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title { background: linear-gradient(transparent 94%, #000000 0%); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_tit { font-size: 18px; line-height: 1.4; } } @media (min-width: 641px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon { bottom: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon { width: 45px; top: 50%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon.product-know_icon1 { transform: translateX(-100%) translateY(-50%); margin-left: -10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon.product-know_icon2 { transform: translateX(100%) translateY(-50%); margin-right: -10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_main { margin: 40px auto 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_text { text-align: left; font-size: 14px; margin: 30px auto 60px; width: 100%; max-width: 503px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_text .cmn-nowrap { white-space: wrap; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_text br { display: none; } } @media (min-width: 641px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list { display: flex; justify-content: center; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list { display: block; margin: 0 auto; width: 100%; max-width: none; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li { width: 100%; padding: 0; } } @media (min-width: 641px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li + li { border-left: 1px solid #000000; padding: 0 75px 0 45px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li + li { margin-top: 60px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head_title { position: relative; font-size: 20px; line-height: 1.5; font-weight: bold; color: #000000; text-align: left; padding-left: 1em; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head_title::before { position: absolute; content: ""; top: 0; left: 0; width: 0.8em; height: 0.8em; background-color: #5F5F5F; transform: translate(0, 7px); } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head { font-size: 14px; padding: 0; margin-top: 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box .product-know_sub { font-size: 16px; margin: 0 10px 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box .product-know_sub .product-know_att { margin-top: 10px; font-size: 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_btn { margin-top: 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li:nth-child(2n) .product-know_head_title::before { border: 2px solid #787878; background: #ffffff; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_bar { margin-top: 9.375%; margin-bottom: 40px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_osusume .product-lineup_item_title > span { font-size: 12px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_inner { padding: 0 20px; max-width: none; width: 100%; margin: 0 auto; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_title { margin-bottom: 9.375%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_title_txt { font-size: 16px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_list { gap: 20px 0; grid-template-columns: 1fr; width: 100%; max-width: none; margin: 40px auto 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model { padding: 10px 20px 5px; font-size: 20px; gap: 0 10px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model_txt .number { font-size: 0.75em; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model_img { width: 27%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl { margin: 25px 15px 0; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl_heading { font-size: 12px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl_arrow { width: 40px; margin: 15px auto 5px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select { grid-template-columns: 1fr; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select_box + .br-product_menu_select_box { margin-top: 15px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select .br-product_menu_select_ttl { margin-bottom: 10px; } } @media screen and (max-width: 900px) { .mod-freeHTML .br-product_menu_select_inner { gap: 10px; flex-direction: column; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select_inner { flex-direction: row; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select_btn a { font-size: 14px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select_btn a::after { width: 8px; height: 8px; border-width: 2px; right: 15px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_select_btn a .small { font-size: 0.85714em; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_anchor { margin: 0 auto 20px; width: 100%; max-width: none; flex-wrap: wrap; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_anchor_btn a { padding: 1.5em; font-size: 14px; font-feature-settings: "palt"; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu_anchor_btn a::after { width: 10px; height: 10px; transform: translate(0, calc(-50% - 2px)) rotate(45deg); right: 0.7em; } } /* 251114 追加 */ .mod-freeHTML .st-contents { max-width: 1052px; } .mod-freeHTML .br-product_menu_anchor:last-of-type { margin: 0; } .mod-freeHTML .br-product_menu_anchor[data-css="2column"] .br-product_menu_anchor_btn { width: calc((100% - 20px) / 2); } .mod-freeHTML .br-product_menu_anchor[data-css="3column"] .br-product_menu_anchor_btn { width: calc((100% - (20px * 2)) / 3); } .mod-freeHTML .br-product_menu_anchor_btn a { line-height: 1.2; } .mod-freeHTML .br-product_menu_page { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 90px; } .mod-freeHTML .br-product_menu_page_btn { width: calc((100% - (20px * 3)) / 4); } .mod-freeHTML .br-product_menu_page_btn .cmn-btn_lar { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-size: 16px; padding: 1em 2em; text-align: center; line-height: 1.3; } .mod-freeHTML .br-product_menu_page_btn .cmn-btn_lar::before { width: 12px; height: 12px; margin-right: 20px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; } .mod-freeHTML .cmn-nowrap { white-space: nowrap; } .mod-freeHTML .cmn-tit_lar { display: block; width: 100%; font-size: 38px; font-weight: bold; letter-spacing: 0.16em; line-height: 1.5; text-align: center; border-bottom: 2px solid #000000; margin: 0 auto; } .mod-freeHTML .cmn-tit_mid { display: block; width: 100%; font-size: 19px; font-weight: bold; letter-spacing: 0; line-height: 1.68; text-align: center; margin: 0 auto; } .mod-freeHTML .cmn-tit_mid[data-color="pink"] { border-bottom: 2px solid #F97E6F; color: #F97E6F; } .mod-freeHTML .cmn-tit_mid[data-color="lightblue"] { border-bottom: 2px solid #25A6C0; color: #25A6C0; } .mod-freeHTML .cmn-btn_lar, .mod-freeHTML .cmn-btn_center { display: block; width: 100%; font-weight: bold; color: #ffffff; position: relative; padding: 40px 70px; font-size: 26px; } .mod-freeHTML .cmn-btn_lar[data-color="pink"], .mod-freeHTML .cmn-btn_center[data-color="pink"] { background: #f97e6f; } .mod-freeHTML .cmn-btn_lar[data-color="lightblue"], .mod-freeHTML .cmn-btn_center[data-color="lightblue"] { background: #25A6C0; } .mod-freeHTML .cmn-btn_lar[data-color="brown"], .mod-freeHTML .cmn-btn_center[data-color="brown"] { background: #6F473C; } .mod-freeHTML .cmn-btn_lar[data-color="blue"], .mod-freeHTML .cmn-btn_center[data-color="blue"] { background: #375F96; } .mod-freeHTML .cmn-btn_lar[data-color="black"], .mod-freeHTML .cmn-btn_center[data-color="black"] { background: #000000; } .mod-freeHTML .cmn-btn_lar::before, .mod-freeHTML .cmn-btn_center::before { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 14px; height: 14px; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; transform: rotate(45deg) translateY(-50%); margin-top: -1px; margin-right: 35px; } .mod-freeHTML .cmn-btn_center { text-align: center; } .mod-freeHTML .cmn-btn_mid { display: block; width: calc(100% - 40px); font-weight: bold; color: #ffffff; position: relative; padding: 15px; font-size: 16px; letter-spacing: 0.13em; background: #000000; text-align: center; margin: 0 auto; } .mod-freeHTML .cmn-btn_mid_txt { position: relative; } .mod-freeHTML .cmn-btn_mid_txt::before { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 16px; height: 16px; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; transform: rotate(45deg) translateY(-50%); margin-top: -3px; margin-right: -10%; } .mod-freeHTML .product-know_btn .cmn-btn_lar { margin-top: 50px; line-height: 1.3; text-align: left; } .mod-freeHTML .product-know_btn_small { font-size: 18px; } .mod-freeHTML .product-know_txt { padding-top: 50px; text-align: left; } .mod-freeHTML .product-know_sup { display: block; font-size: 18px; font-weight: bold; border-bottom: 2px solid #4a4a4a; margin-bottom: 15px; position: relative; margin: 0 35px 10px; padding-bottom: 5px; line-height: 1; } .mod-freeHTML ul.product-know_list { margin-top: 60px; display: flex; flex-wrap: wrap; } .mod-freeHTML .product-feature_num { width: 180px; height: 180px; background-color: #848484; aspect-ratio: 1 / 1; } .mod-freeHTML .product-other_inner { padding: 0 70px; } .mod-freeHTML .mod-media_img + .mod-media_img { margin-top: 50px; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit { padding: 0 0 2% 0; } } @media screen and (max-width: 1000px) { .mod-freeHTML .cmn-btn_lar { padding: 40px 40px 40px 20px; } .mod-freeHTML .product-feature_num { width: 90px; height: 90px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { gap: 30px; } .mod-freeHTML .br-product_other .product-other_model_txt { font-size: 20px; } .mod-freeHTML .br-product_menu_page_btn { width: calc((100% - (20px * 1)) / 2); } } @media screen and (max-width: 800px) { .mod-freeHTML .cmn-btn_lar { padding: 20px; font-size: 16px; } .mod-freeHTML .product-know_btn_small { display: block; font-size: 14px; line-height: 1.3; margin-top: 0.3em; } .mod-freeHTML .br-product_other .product-other_list { gap: 0px 20px; } .mod-freeHTML .br-product_other .product-other_model { font-size: 18px; } .mod-freeHTML .cmn-btn_mid { letter-spacing: 0.05em; } .mod-freeHTML .cmn-btn_mid_txt::before { width: 12px; height: 12px; margin-top: -2px; margin-right: -8%; } .mod-freeHTML .cmn-btn_lar::before, .mod-freeHTML .mod-freeHTML .cmn-btn_center::before { margin-right: 20px; } .mod-freeHTML .br-product_other .product-other_model_txt { font-size: 15px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_menu { padding: 40px 0 90px; } .mod-freeHTML .br-product_menu_anchor[data-css="3column"] .br-product_menu_anchor_btn a { padding: 1em 0.5em 2em; } .mod-freeHTML .br-product_menu_anchor[data-css="3column"] .br-product_menu_anchor_btn a::after { bottom: 0; top: auto; right: 50%; transform: translate(50%, -10px) rotate(45deg); } .mod-freeHTML .br-product_menu_page_btn .cmn-btn_lar { font-size: 14px; font-feature-settings: "palt"; } .mod-freeHTML .br-product_menu_page_btn .cmn-btn_lar::before { width: 10px; height: 10px; margin-right: 13px; } .mod-freeHTML .br-product_menu_page_btn:nth-of-type(1) { order: 1; } .mod-freeHTML .br-product_menu_page_btn:nth-of-type(2) { order: 3; } .mod-freeHTML .br-product_menu_page_btn:nth-of-type(3) { order: 2; } .mod-freeHTML .br-product_menu_page_btn:nth-of-type(4) { order: 4; } .mod-freeHTML .cmn-tit_lar { font-size: 24px; letter-spacing: 0.1em; padding: 0 0 0.5em; } .mod-freeHTML .cmn-tit_mid { font-size: 16px; line-height: 1.3; padding: 0 0 5px; } .mod-freeHTML .cmn-btn_lar { font-size: 16px; padding: 30px; } .mod-freeHTML .cmn-btn_lar::before { width: 12px; height: 12px; margin-right: 20px; } .mod-freeHTML .cmn-btn_center { max-width: none; margin: 0 auto; font-size: 16px; padding: 30px; } .mod-freeHTML .cmn-btn_center::before { width: 12px; height: 12px; margin-right: 20px; } .mod-freeHTML .cmn-btn_mid { width: calc(100% - 30px); font-size: 14px; } .mod-freeHTML .cmn-btn_mid_txt::before { width: 14px; height: 14px; } .mod-freeHTML .br-product_lineup { max-width: none; margin: 0 auto; } .mod-freeHTML .br-product_lineup > ul { padding-top: 30px; max-width: none; gap: 30px; width: calc(503 / 550 * 100%); } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap { gap: 30px; margin: 30px 0 0; } .mod-freeHTML .br-product_know .product-know_inner { max-width: none; width: 100%; padding: 0 20px; } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box { margin-top: 30px; } .mod-freeHTML .br-product_know .product-know_btn .cmn-btn_lar { margin-top: 40px; } .mod-freeHTML .br-product_know .product-know_btn_small { font-size: 14px; } .mod-freeHTML .br-product_know .product-know_txt { max-width: 503px; margin: 0 auto; font-size: 10px; padding-top: 30px; } .mod-freeHTML .br-product_function { margin: 100px auto 80px; } .mod-freeHTML .br-product_function .product-function_inner { max-width: 550px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text { margin: 20px 0 0; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner { font-size: 14px; width: 100%; padding: 0 1em; margin-bottom: 0; } .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner .cmn-nowrap { white-space: wrap; } .mod-freeHTML .br-product_feature .product-feature_inner { max-width: 550px; width: calc(503 / 550 * 100%); } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_num { position: absolute; top: 0; left: 0; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { margin-top: 50px; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap { width: 100%; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit { padding: 0 0 0 110px; font-size: 20px; display: flex; align-items: center; min-height: 4.5em; } .mod-freeHTML .mod-media { width: 100%; max-width: 503px; margin: 80px auto 0; } .mod-freeHTML .br-product_other { margin-top: 70px; margin-bottom: 130px; } .mod-freeHTML .br-product_other .product-other_list { gap: 40px 0; } .mod-freeHTML .br-product_other .product-other_list + .product-other_list { margin: -20px auto 0; } .mod-freeHTML .br-product_lineup > ul > li { margin: 0; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business1 { margin-left: 0; } .mod-freeHTML .mod-media_img + .mod-media_img { margin-top: 20px; } .mod-freeHTML .br-product_other .product-other_model_txt { font-size: 20px; } } @media screen and (max-width: 540px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap { gap: 10px; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { width: 100%; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img { flex-shrink: 0; } .mod-freeHTML .br-product_other .product-other_model_img { width: 30%; } } @media screen and (max-width: 400px) { .mod-freeHTML .br-product_menu_anchor_btn:first-of-type span { padding: 0; } .mod-freeHTML .br-product_other .product-other_model_img { width: 40%; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_text .product-feature_head .product-feature_tit { font-size: 18px; min-height: 5em; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_copy { font-size: 16px; } } /* 251114 追加 END */