/* @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-headingLv3{ margin-top: 0; } } .mod-freeHTML{ .mod2-freep0036{ margin-bottom: 80px; } } */ .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; } .mod-freeHTML .br-product_main *, .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; } @media (min-width: 641px) { .mod-freeHTML .br-product_main { height: 60vh; min-height: 400px; max-height: 600px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_main { height: auto; min-height: inherit; max-height: none; } } @media (min-width: 641px) { .mod-freeHTML .br-product_main .product-product_main_img { width: auto; height: 100%; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_main .product-product_main_img { width: 100%; height: auto; } } @media (min-width: 641px) { .mod-freeHTML .br-product_main .product-product_main_img img { max-width: none; width: auto; height: 100%; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_main .product-product_main_img img { max-width: 100%; width: 100%; height: auto; } } .mod-freeHTML .br-product_copy { /*============================== reset ==============================*/ text-align: center; margin: 45px auto 60px; } .mod-freeHTML .br-product_copy * { box-sizing: border-box; } .mod-freeHTML .br-product_copy *, .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_copy { margin: 4.6875% auto; } } .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%); } @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%); } } .mod-freeHTML .br-product_lineup { /*============================== reset ==============================*/ } .mod-freeHTML .br-product_lineup * { box-sizing: border-box; } .mod-freeHTML .br-product_lineup *, .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; display: inline; } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup { padding: 0 10px; } } .mod-freeHTML .br-product_lineup > ul { display: flex; justify-content: center; width: 100%; margin: 0 auto; flex-wrap: wrap; max-width: 1200px; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul { align-items: flex-start; } } .mod-freeHTML .br-product_lineup > ul > li { display: flex; flex-direction: column; width: calc((100% - 60px) / 2); margin: 0; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li { width: 100%; margin: 0 10px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li + li { margin-top: 30px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li + li { margin-top: 9.375%; } } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home1 { order: 1; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home1 { order: 1; } } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home2 { order: 3; margin-top: 30px; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_home2 { order: 2; } } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business1 { order: 2; } @media (min-width: 641px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business1 { margin-left: 30px; } } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business1 { margin-left: 10px; order: 3; } } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business2 { order: 4; margin-top: 30px; } @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; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn { width: 100%; margin-bottom: 30px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn { margin-bottom: 4.6875%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a { display: block; width: 100%; font-weight: bold; color: #FFFFFF; position: relative; background: #F97E6F; padding: 40px; font-size: 26px; /* &::after{ background: $white; transform: translateY(-50%); margin-right: 22px; width: 96px; height: 3px; @include media-sp { height: 2px; width: 40px; } }*/ } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a { padding: 40px; font-size: 20px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a { padding: 20px 15px; font-size: 16px; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a::before { content: ""; display: block; position: absolute; top: 50%; right: 0; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a::before { width: 12px; height: 12px; border-top: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF; transform: rotate(45deg) translateY(-50%); margin-top: -1px; margin-right: 25px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_btn > a::before { width: 8px; height: 8px; border-width: 2px; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap { display: flex; height: 100%; } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap + .product-lineup_wrap { margin-top: 30px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap + .product-lineup_wrap { margin-top: 4.6875%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img { width: 280px; display: flex; flex-direction: column; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img { width: 49%; } } .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; } @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; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_img > a::before { width: 20px; } } .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; } @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; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { width: calc(100% - 280px - 20px); } @media (min-width: 641px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { margin-left: 20px; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text { width: 61.71875%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_label { border-bottom: 1px solid #F97E6F; font-weight: bold; color: #F97E6F; padding: 15px 0; margin-bottom: 20px; font-size: 14px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_label { padding: 3.125% 0 1.5625% 5%; margin-bottom: 3.125%; font-size: 12px; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag { width: 100%; margin-left: auto; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag { width: 95%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li { font-weight: bold; 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: 12px; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li + li { margin-top: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li + li { margin-top: 2.34375%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li:not(:last-of-type) { display: block; background: #FDE7E4; padding: 10px 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li:not(:last-of-type) { padding: 2.34375%; } } .mod-freeHTML .br-product_lineup > ul > li .product-lineup_wrap .product-lineup_text .product-lineup_tag > li:last-of-type { text-align: right; color: #F97E6F; } .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_lineup > ul > li.br-product_lineup_business .product-lineup_text .product-lineup_label { color: #25A6C0; border-color: #25A6C0; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business .product-lineup_text .product-lineup_tag > li:not(:last-of-type) { background: #E3F4F4; } .mod-freeHTML .br-product_lineup > ul > li.br-product_lineup_business .product-lineup_text .product-lineup_tag > li:last-of-type { 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; } .mod-freeHTML .br-product_link *, .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_link { margin: 9.375% 0; padding: 0 30px; } } .mod-freeHTML .br-product_link .product-link_btn { width: 100%; } @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; } } .mod-freeHTML .br-product_link .product-link_btn > li { width: 100%; max-width: 424px; } @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%; } } .mod-freeHTML .br-product_feature { /*============================== reset ==============================*/ background: #E3F4F4; padding: 65px 10px; } .mod-freeHTML .br-product_feature * { box-sizing: border-box; } .mod-freeHTML .br-product_feature *, .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature { padding: 9.375% 10px; } } .mod-freeHTML .br-product_feature .product-feature_inner { max-width: 1052px; padding: 0 10px; width: 100%; margin: 0 auto; } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_title { text-align: center; margin-bottom: 55px; } @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%; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_copy { text-align: center; margin-bottom: 55px; font-size: 20px; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_copy { font-size: 16px; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list { max-width: 1130px; margin: 0 auto; padding-left: 200px; } @media screen and (max-width: 1200px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list { padding-left: 15.873015873%; padding-right: 5.5555555556%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list { margin: 0 auto; padding-left: 0; padding-right: 0; width: 87.5%; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li { position: relative; padding-bottom: 40px; border-bottom: 1px solid #000000; } @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; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li + li { margin-top: 70px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li + li { margin-top: 9.375%; } } .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; } @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; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_btn { width: 100%; margin-top: 20px; } @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: 94.3396226415%; margin: 3.90625% auto 0; } } .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; } @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: 12px; padding-left: auto; width: 100%; padding-left: 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 .product-feature_head { margin-bottom: 3.7735849057%; border-bottom: 1px solid #000000; position: relative; } } @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 { margin-bottom: 3.7735849057%; border-bottom: none; position: relative; } } .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: 147.619047619%; font-size: 26px; margin: 0; padding: 0 0 3.9682539683% 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 .product-feature_head .product-feature_tit { padding: 0 0 3.9682539683% 3.9682539683%; } .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 { padding: 0 0 3.7735849057% 16.9811320755%; font-size: 16px; } .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_num { position: absolute; bottom: 0; left: 0; width: 100%; margin-bottom: 0; } @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: 94.3396226415%; margin: 0 auto 3.7735849057%; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_list > li .product-feature_wrap .product-feature_img { width: 408px; } @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: 94.3396226415%; margin: 0 auto; } } .mod-freeHTML .br-product_feature .product-feature_inner .product-feature_att { text-align: right; margin: 25px 0 0; font-size: 10px; } @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: 79.6875%; margin: 7.5471698113% auto 0; } } .mod-freeHTML .br-product_feature .br-product_link { margin-bottom: 0; } .mod-freeHTML .br-product_function { /*============================== reset ==============================*/ background: #f2f2f2; padding: 65px 0; } .mod-freeHTML .br-product_function * { box-sizing: border-box; } .mod-freeHTML .br-product_function *, .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; display: inline; } .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 p { margin: 0; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function { padding: 9.375% 0; } } .mod-freeHTML .br-product_function .product-function_inner { max-width: 1052px; padding: 0 10px; 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%); } @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%); } } .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; } @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: 16px; line-height: 142.8571428571%; } } .mod-freeHTML .br-product_function .product-function_inner .product-function_title .product-function_icon { position: absolute; left: 0; margin-left: -25px; } @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: 0px; top: 50%; transform: translateX(-100%) translateY(-50%); } } .mod-freeHTML .br-product_function .product-function_inner .product-function_text { display: block; } .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; font-size: 14px; margin: 0 10px 40px; background: #FFFFFF; border-radius: 30px; padding: 20px 40px; } @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; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_text .product-function_text_inner br { display: none; } } .mod-freeHTML .br-product_function .product-function_inner .product-function_list { display: flex; justify-content: center; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list { margin: 0 auto; padding: 0 10px; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li + li { margin-left: 2%; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_list > li .product-function_sub { font-size: 12px; margin-bottom: 2.34375%; } } .mod-freeHTML .br-product_function .product-function_inner .product-function_btn { margin-top: 35px; display: block; width: 100%; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_btn { padding: 0 40px; margin: 7.8125% auto 0; } } .mod-freeHTML .br-product_function .product-function_inner .product-function_btn a { display: block; width: 100%; max-width: 667px; margin: 0 auto; background: #FFB884; padding: 0.5em 1em; text-align: center; font-size: 14px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_function .product-function_inner .product-function_btn a { font-size: 12px; } } .mod-freeHTML .br-product_function .product-function_inner .product-function_btn a span { position: relative; display: inline-block; padding: 0 35px; } .mod-freeHTML .br-product_function .product-function_inner .product-function_btn a span::after { /* content: ""; display: block; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; border-top: 2px solid $black; border-right: 2px solid $black; transform: rotate(45deg) translateY(-50%); margin-top: -3px; */ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg); margin-top: -0.25em; margin-left: 8px; } .mod-freeHTML .br-product_know { /*============================== reset ==============================*/ padding: 65px 0 0; } .mod-freeHTML .br-product_know * { box-sizing: border-box; } .mod-freeHTML .br-product_know *, .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; display: inline; } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know { padding: 9.375% 10px 0; } } .mod-freeHTML .br-product_know .product-know_inner { max-width: 1052px; padding: 0 10px; width: 100%; 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%); } @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%); } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_tit { font-size: 16px; line-height: 126.6666666667%; } } .mod-freeHTML .br-product_know .product-know_inner .product-know_title .product-know_icon { position: absolute; } @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%; } } .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; } @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; } } .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; } @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; } } .mod-freeHTML .br-product_know .product-know_inner .product-know_main { width: 93.023255814%; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_main { margin: 0 auto 4.6875%; } } .mod-freeHTML .br-product_know .product-know_inner .product-know_text { text-align: center; font-size: 14px; margin-bottom: 50px; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_text { text-align: left; font-size: 12px; margin: 0 auto 9.375%; width: 79.6875%; width: 100%; } } @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; } } .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: 0 45px 0 75px; } @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: 18.75%; } } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head_title { background: #787878; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 0.5em 1em; margin: 0 0 4.6875%; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_head { font-size: 12px; padding: 0; margin-bottom: 4.6875%; } } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_box { border: 2px solid #4A4A4A; padding: 15px 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; } @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; } } .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; } @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; } } .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_btn { margin-top: 35px; display: block; width: 100%; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_know .product-know_inner .product-know_list > li .product-know_btn { margin-top: 4.6875%; } } @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 { background: #FFFFFF; color: #787878; border: 2px solid #787878; } } .mod-freeHTML .br-product_bar { /*============================== reset ==============================*/ margin-top: 65px; margin-bottom: 150px; } .mod-freeHTML .br-product_bar * { box-sizing: border-box; } .mod-freeHTML .br-product_bar *, .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_bar { margin-top: 9.375%; margin-bottom: 40px; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_osusume .product-lineup_item_title > span { font-size: 12px; } } .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 ==============================*/ } .mod-freeHTML .br-product_other * { box-sizing: border-box; } .mod-freeHTML .br-product_other *, .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_inner { padding: 10px 70px 0; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_inner { padding: 12.5% 20px 0; } } .mod-freeHTML .br-product_other .product-other_title { margin-bottom: 60px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_title { margin-bottom: 9.375%; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_title_txt { font-size: 16px; } } .mod-freeHTML .br-product_other .product-other_list { display: grid; gap: 0 60px; grid-template-columns: repeat(2, 1fr); } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_list { gap: 20px 0; grid-template-columns: 1fr; } } .mod-freeHTML .br-product_other .product-other_list_item { border-radius: 5px; display: flex; flex-direction: column; } .mod-freeHTML .br-product_other .product-other_list_item--business { background: #E8F6FA; } .mod-freeHTML .br-product_other .product-other_list_item--foil { background: #F6F1EB; } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model { padding: 10px 10px 5px; font-size: 16px; justify-content: center; gap: 0 10px; } } .mod-freeHTML .br-product_other .product-other_model--business { background: #00A0C7; } .mod-freeHTML .br-product_other .product-other_model--foil { background: #A4866E; } .mod-freeHTML .br-product_other .product-other_model_txt { color: #FFFFFF; font-weight: bold; letter-spacing: 0.04em; line-height: 1.25em; flex-shrink: 0; } .mod-freeHTML .br-product_other .product-other_model_txt .number { font-size: 0.61538em; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model_txt .number { font-size: 0.75em; } } .mod-freeHTML .br-product_other .product-other_model_img { width: 46.6321243523%; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_model_img { width: 41.6666666667%; } } .mod-freeHTML .br-product_other .product-other_dtl { margin: 20px 20px 0; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl { margin: 15px 15px 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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl_txt--foil { margin-bottom: 0; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl_heading { font-size: 12px; } } .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; } @media screen and (max-width: 640px) { .mod-freeHTML .br-product_other .product-other_dtl_arrow { width: 40px; margin: 15px auto 5px; } } .mod-freeHTML .br-product_other .product-other_btn { padding: 30px 0 20px; } .mod-freeHTML .br-product_other .product-other_btn a { display: block; } .mod-freeHTML .br-product_other .product-other_btn--foil { margin-top: auto; }/*# sourceMappingURL=index.css.map */