/*
Theme Name: MYTREX Official Site
Author: Sotsu Medical
Author URI: https://www.mytrex.jp/hiho-fine/
Description:MYTREX HIHO FINE BUBBLE＋
Version: 1.0
*/

#video-hfb{
position: relative;
width: 100%;
height: auto;
}
#video-btn{
background-image: url("https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_play.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#video-hfb2{
position: relative;
width: 100%;
height: auto;
}
#video-btn2{
background-image: url("https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_play.png");
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#header{
/*はじめの高さを設定*/
height: 7vw;
width:100%;
/*以下はレイアウトのためのCSS*/
display: flex;
justify-content: space-between;
align-items: center;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
position: fixed;
z-index: 999;/*最前面へ*/
height: 0px;
animation: DownAnime 0.5s forwards;
margin-top: -7vw !important;
}

@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-14vw);
}
to {
opacity: 1;
transform: translateY(0);
}
}

main {
height: 100%;
/*min-height: 100vh;*/
padding: 0 0px;
background-color: #fff;
transition: all .5s;
display: flex;
flex-direction: column;
justify-content: center;
margin-top:8vw;
}
@media screen and (max-width: 767px) {
main {
/*margin-top:13.8vw;*/
margin-top:0vw;
}
.wrapper > main {
margin-top: 20vw;
}
.pd_b_mv{

}
}
@media screen and (min-width: 768px) {
main {
margin-top:3vw !important;
}
.pd_b_mv{

}
}

@media screen and (max-width: 767px) {
.pc{
display: none !important;
}
}
@media screen and (min-width: 768px) {
.sp{
display: none !important;
}
}

@media screen and (max-width: 767px) {
.container{
}
}
@media screen and (min-width: 768px) {
.container{
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
sup {
font-size: .7vw;
vertical-align: top;
}
}

.fs{
font-family: 'Times New Roman', 'YuMincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS PMincho', serif !important;
}
.fg{
font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif !important;
}

img{
max-width: 100%;
}
.fwb{
font-weight: bold;
}

/* pagetop -------------------------------------------------------------- */

@media screen and (max-width: 767px) {
#pageTop2 {
position: fixed;
bottom: 12vw;
left: 2vw;
z-index: 10000;
}
}
@media screen and (min-width: 768px) {
#pageTop2 {
position: fixed;
bottom: 2vw;
right: 2vw;
z-index: 10000;
}
}

#pageTop2 img{
width: 100%;
}

#pageTop2 a {
display: block;
z-index: 999;
padding: 8px 8px 8px 8px;
border-radius: 0px;
width: 35px;
height: 35px;
background-color: #231815;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#pageTop2 a:hover {
text-decoration: none;
background-color: #ffffff;
}
/* pagetop -------------------------------------------------------------- */

/***          menu sub          ***/
@media screen and (max-width: 767px) {
.menu_sp_list_logo {
padding: 18px 0vw 18px 0vw;
text-align: center;
width: 100%;
background: #ffffff;
z-index: 999;
position: fixed;
}
.menu_sub{
background:#d9e5da;
padding: 0.5vw 0.5vw;
width: 100%;
position: fixed;
top: 12vw;
z-index: 999;
}
.menu_sub_item_nm{
font-size: 1.2vw;
font-weight: 800;
letter-spacing: 0.1vw;
line-height: 1vw;
color: #231815;
padding: 0.5vw 0.5vw;
text-align: center;
}
.menu_sub_item_link{
font-size: 3vw;
font-weight: normal;
letter-spacing: 0.1vw;
line-height: 3vw;
color: #b5b5b6;
padding: 2.5vw 0.5vw;
width: 100%;
overflow-x: auto;
white-space: nowrap;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
.menu_sub_item_link a{
color: #231815;
display: inline-block;
list-style: none;
padding: 0vw 3vw;
}
.menu_sub_item_link a:hover{
color:#b5b5b6;
}
#mt_pc_top_buy_cartin {
position: fixed;
bottom: 0px;
right: 0px;
background: #0000004f;
padding: 4px 0px 0px;
}
.mt_pc_top_buy{
padding: 0 12vw;
}
/* state */
.menu_sub.is-fixed {
width: 86%;
position: absolute;
top: 0;
transition-duration: 0.2s;
}
.is-fixed .menu_sub_item_link {
padding: 4vw 0.5vw;
}
}
@media screen and (min-width: 768px) {
.menu_sub{
background:#d9e5da;
padding: 0vw;
position: fixed;
z-index: 999;
top: 7.02vw;
width: 100%;
height: 3vw;
}
.menu_sub_item_nm{
font-size: 1.2vw;
font-weight: 800;
letter-spacing: 0.1vw;
line-height: 1vw;
color: #231815;
padding: 1.0vw 0.5vw;
text-align: center;
}
.menu_sub_item_link{
font-size:0.8vw;
font-weight:normal;
letter-spacing:0.1vw;
line-height:1vw;
color:#b5b5b6;
padding: 1.0vw 0vw;
overflow-x: auto;
white-space: nowrap;
}
.menu_sub_item_link::-webkit-scrollbar {display: none;}
.menu_sub_item_link a{
color:#231815;
}
.menu_sub_item_link a:hover{
color:#b5b5b6;
}
#mt_pc_top_buy_cartin {
padding: 0;
}
.mt_pc_top_buy{
padding: 0vw 0vw !important;
}
}

/***          menu sub          ***/

/***          section          ***/
@media screen and (max-width: 767px) {
#pd_b{
margin-bottom: 5%;
}
#pd_c{
padding: 0% 0 10%;
}
#pd_f{
padding: 10% 0;
}
#pd_i{
padding: 0% 0 0%;
}
#pd_j{
padding: 0;
background: rgba(0, 0, 0, 0.02);
}
#pd_k{
padding: 0 0 5%;
}
#pd_k2{
padding: 0 0 0;
}
#pd_l{
padding: 10% 0;
}
#pd_n{
padding: 10% 0;
}
#pd_o{
padding: 15% 0;
}
#pd_r{
padding: 0 0 15% 0;
background: #F0F0F0;
}
#pd_s{
padding: 0 0 0 0;
}
#pd_mv{
background: #ffffff;
z-index: 1;
line-height: 0vw;
}
#pd_mv_rl{
background: #ffffff;
z-index: 1;
line-height: 0vw;
}
#pd_l2{
padding: 10% 0 10%;
}
}
@media screen and (min-width: 768px) {
#pd_b{
margin-bottom:3vw;
}
#pd_c{
padding: 5% 0 5%;
}
#pd_f{
padding: 12% 0;
}
#pd_i{
padding-bottom: 10vw;
}
#pd_j{
padding: 0 0 0%;
}
#pd_k{
padding: 0 0 10%;
}
#pd_k2{
padding: 10vw 0 10%;
}
#pd_l{
padding: 5% 0;
}
#pd_n{
padding: 5% 0 0;
}
#pd_o {
padding: 10% 0 10%;
}
#pd_r {
padding: 5% 0 5%;
background: #f1f5f7;
position: relative;
top: -4px;
}
#pd_s {
padding: 10% 0 0;
}
#pd_t {
padding-bottom: 5%;
}
#pd_u {
padding: 5% 0 5%;
background: #f1f5f7;
}
#pd_mv{
padding: 0;
background: #ffffff;
z-index: 1;
}
#pd_mv_rl{
padding: 0;
background: #ffffff;
z-index: 1;
}
#pd_l2 {
padding: 5% 0 5%;
}
}
/***          section          ***/

/***          a          ***/
@media screen and (max-width: 767px) {
.pd_30d {
padding: 8vw 4vw 2vw;
}
.pd_30d picture{
display: block;
min-height: auto !important;
}
.pd_30d img{
width: 100%;
}
.pd_30d_txt {
padding:0vw 4vw 4vw;
font-size: 2vw;
line-height: 1.8;
}
}
@media screen and (min-width: 768px) {
.pd_30d {
padding: 0vw 0vw 7vw;
}
.pd_30d img{
width: 100%;
}
}
/***          a          ***/


/***          b          ***/
@media screen and (max-width: 767px) {
.pd_b_sp{
padding:0vw;
}
.pd_b_pc{
display:none;
}
.pd_b{
width:100%;
}
.pd_b img{
width:100%;
}
.pd_b_sp_ttl{
padding: 6vw 1vw 3vw;
color: #3f3d3e;
font-size: 5.7vw;
font-weight: bold;
line-height: 6vw;
letter-spacing: 0.5vw;
text-align: center;
}
.pd_b_sp_ttl2{
padding: 0vw 1vw 3vw;
color: #3f3d3e;
font-size: 4vw;
font-weight: normal;
line-height: 4vw;
letter-spacing: 0.5vw;
text-align: center;
}
.pd_b_sp_sub{
padding: 5vw 1vw 0vw;
color: #3e3c3d;
font-size: 6vw;
font-weight: normal;
line-height: 10vw;
letter-spacing: 0.2vw;
text-align: center;
}
}
@media screen and (min-width: 768px) {
.pd_b_sp{
display:none;
}
.pd_b_pc{
padding:0vw;
}
.pd_b{
width:100%;
}
.pd_b img{
width:100%;
}
}
/***          b          ***/

/***          c          ***/

@media screen and (max-width: 767px) {
.pd_c_slider{
padding:0vw 4vw 4vw;
}
.pd_c_box{
padding:1vw 1vw;
}
.pd_c_ttl_sub{
padding: 2vw 4vw 2vw;
font-size: 3vw;
line-height: 4.5vw;
letter-spacing: 0.5vw;
}
.pd_c_ttl_sub_i{
font-size: 1.8vw;
vertical-align: top;
}
.pd_c_ttl_sub2{
padding: 0vw 4vw;
font-size: 7vw;
line-height: 7vw;
letter-spacing: 0.5vw;
}
.pd_c_nm3{
padding: 2vw 0 5vw;
font-size: 8vw;
font-weight: 800;
line-height: 11vw;
letter-spacing: .3vw;
border-bottom: 1px solid #000;
margin: 4vw;
}
.pd_c_text{
padding: 0vw 4vw 4vw;
font-size: 3vw;
line-height: 5.0vw;
letter-spacing: 0.2vw;
}
.pd_c_text_s{
padding: 2vw 0vw 1vw;
font-size: 2vw;
line-height: 4.0vw;
letter-spacing: 0.2vw;
}
.pd_c_price1{
padding: 0vw 4vw 1vw;
font-size: 2.5vw;
line-height: 2.5vw;
letter-spacing: 0.05vw;
}
.pd_c_price2{
padding: 0vw 4vw 4vw;
font-size: 8vw;
font-weight: 800;
line-height: 8vw;
letter-spacing: 0.7vw;
}
.pd_c_price2b{
font-size: 2.5vw;
line-height: 2.5vw;
padding-left: 2vw;
}
.pd_ccontainer {
}
}
@media screen and (min-width: 768px) {
.pd_c_slider{
padding:0vw 4vw 0vw 0vw;
}
.pd_c_box{
padding:1vw 1vw;
}
.pd_c_ttl_sub{
padding: 0vw 0vw 0vw;
font-size: 1.3vw;
line-height: 2vw;
letter-spacing: 0.05vw;
}
.pd_c_ttl_sub_i{
font-size: 0.7vw;
vertical-align: top;
}
.pd_c_ttl_sub2{
padding: 1vw 0vw 1vw;
font-size: 2.3vw;
line-height: 2.5vw;
letter-spacing: 0.15vw;
}
.pd_c_nm3{
padding: 0vw 0vw 2vw;
font-size: 3vw;
font-weight: 800;
line-height: 4vw;
letter-spacing: 0.1vw;
border-bottom: 1px solid #3c3c3c;
margin-bottom: 2vw;
}
.pd_c_text{
padding: 0vw 0vw 3vw;
font-size: 1.2vw;
line-height: 2.0vw;
letter-spacing: 0.05vw;
}
.pd_c_text_s{
padding: 1vw 0vw 0vw;
font-size: 0.9vw;
line-height: 1.5vw;
letter-spacing: 0.05vw;
}
.pd_c_price1{
padding: 0vw 0vw;
font-size: 1.3vw;
line-height: 2.0vw;
letter-spacing: 0.1vw;
}
.pd_c_price2{
padding:0vw 0vw 0vw;
font-size:3vw;
font-weight:800;
line-height:4vw;
letter-spacing:0.1vw;
}
.pd_c_price2b{
font-size:1.2vw;
line-height:4vw;
}
.pd_ccontainer {
}
}
/***          c          ***/

/***          d          ***/
/***          d          ***/

/***          e          ***/
/***          e          ***/

/***          f          ***/
@media screen and (max-width: 767px) {
.pd_f_ttl {
width: 100%;
font-size: 3.3vw;
text-align: center;
letter-spacing: .2vw;
padding-bottom: 4vw;
}
.pd_f_box{
width: 80vw;
margin: auto;
}
.pd_f_box_item {
width: 33%;
float: left;
padding: 1.5vw;
}
.f_box_item_img {
width: 100%;
}
.f_box_item_txt {
width: 100%;
text-align: center;
font-size: 0.8vw;
line-height: 1.4;
padding-top: 0.6vw;
}
}
@media screen and (min-width: 768px) {
.pd_f_ttl {
width: 100%;
font-size: 1.8vw;
text-align: center;
letter-spacing: 0.2vw;
padding-bottom: 3vw;
}
.pd_f_box{
width: 60vw;
display: flex;
justify-content: space-between;
margin: auto;
}
.pd_f_box_item {
width: 15%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.f_box_item_img {
width: 100%;
}
.f_box_item_txt {
width: 100%;
text-align: center;
font-size: 0.8vw;
line-height: 1.4;
padding-top: 0.6vw;
}
}
/***          f          ***/

/***          g          ***/
/***          g          ***/

/***          h          ***/
/***          h          ***/

/***          i          ***/
@media screen and (max-width: 767px) {
.pd_i_box{
width: 100%;
padding: 10vw 0 3vw;
}
.i_box_ttl {
width: 100%;
font-size: 3.8vw;
padding-bottom: 6vw;
text-align: center;
}
.i_box_imgWrap {
width: 100%;
padding: 8vw 0vw;
background: #F0F0F0;
}
.i_box_img {
width: 90%;
margin: auto;
}
.i_box_img_sp{
padding-bottom: 10vw;
}
.i_box_txtWrap {
width: 100%;
padding: 6vw 4vw;
}
.i_box_txt_notes {
font-size: 1.9vw;
line-height: 1.8;
}
}
@media screen and (min-width: 768px) {
.pd_i_box{
width: 100%;
padding: 10vw 0 3vw;
}
.i_box_ttl {
width: 100%;
font-size: 2.4vw;
padding-bottom: 5vw;
text-align: center;
}
.i_box_imgWrap {
width: 100%;
}
.i_box_img {
width: 90%;
margin: auto;
}
.i_box_txtWrap {
width: 90%;
margin: auto;
padding-top: 4vw;
}
.i_box_txtWrap {
width: 90%;
margin: auto;
padding-top: 6vw;
}
.i_box_txt_notes {
font-size: 0.7vw;
line-height: 1.5;
}
}
/***          i          ***/

/***          j          ***/
@media screen and (max-width: 767px) {
.pd_j_ttl {
font-size: 2.8vw;
font-weight: 700;
letter-spacing: .2vw;
padding-bottom: 1.8vw;
}
.pd_j_subTtl {
font-size: 5vw;
letter-spacing: 0.5vw;
padding-bottom: 2vw;
line-height: 1.6;
}
.j_point1_ttl {
font-size: 4.4vw;
line-height: 1.5;
letter-spacing: .3vw;
padding-bottom: 2vw;
}
.j_point1_txt {
font-size: 3vw;
line-height: 1.7;
letter-spacing: .15vw;
padding-bottom: 5vw;
}
.j_point1_img {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.pd_j_ttl {
font-size: 2.8vw;
font-weight: 700;
letter-spacing: .2vw;
padding-bottom: 1.8vw;
}
.pd_j_subTtl {
font-size: 2vw;
letter-spacing: 0.2vw;
padding-bottom: 2vw;
}
.j_point1_ttl {
font-size: 1.4vw;
line-height: 1.5;
letter-spacing: 0.2vw;
padding-bottom: 1vw;
}
.j_point1_txt {
font-size: 01vw;
line-height: 1.6;
letter-spacing: 0.04vw;
padding-bottom: 2vw;
}
.j_point1_img {
width: 100%;
}
}
/***          j          ***/

/***          k          ***/
@media screen and (max-width: 767px) {
.pd_k_bg {
width: 100vw;
position: relative;
padding-bottom: 4vw;
}
.pd_k_bg img {
width: 100%;
}
.k_first_box{
padding: 0vw 0vw 7vw;
}
.pd_k_first{
padding: 4vw 4vw;
}
.k_first_box_txt{
float: left;
width: 55%;
}
.k_first_box_img{
float: left;
width: 45%;
}
.k_first_box_txt_bottom{
font-size: 3.4vw;
letter-spacing: .4vw;
line-height: 1.6;
}
.k_first_insp_img img{
width:100%;
}
.pd_k_img {
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
padding-bottom: 4vw;
}
.k_img_item {
width: 45%;
}
.k_img_notes {
width: 90%;
margin: auto;
font-size: 0.8vw;
line-height: 1.6;
letter-spacing: .04vw;
}
.pd_k_second{
padding: 4vw;
}
.k_second_box{
padding: 0vw 0vw 10vw;
}
.k_second_box_img{
float: left;
width: 45%;
}
.k_second_box_txt{
float: left;
width: 55%;
padding-left: 4vw;
}
.k_second_box_txt_bottom{
font-size: 2.8vw;
letter-spacing: 0.3vw;
line-height: 1.4;
}
.pd_k_third{
margin: 0 5vw 0;
font-size: 1.9vw;
line-height: 1.7;
letter-spacing: .01vw;
border-top: 1px solid #ddd;
padding-top: 5vw;
}
}
@media screen and (min-width: 768px) {
.pd_k_bg {
width: 100vw;
position: relative;
padding-bottom: 10vw;
}
.pd_k_bg img {
width: 100%;
}
.pd_k_img {
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
padding-bottom: 4vw;
}
.k_img_item {
width: 45%;
}
.k_img_notes {
width: 90%;
margin: auto;
font-size: 0.8vw;
line-height: 1.6;
letter-spacing: .04vw;
}
.k_first_box,
.k_second_box{
position: relative;
min-height: 20vw;
}
.k_first_box_ttl,
.k_second_box_ttl {
font-size: 1.8vw;
font-weight: bold;
text-align: center;
margin-bottom: 3vw;
position: relative;
}
.k_first_box_ttl:before, .k_first_box_ttl:after, .k_second_box_ttl:before, .k_second_box_ttl:after {
content: '';
position: absolute;
top: 0.5vw;
display: inline-block;
width: 8vw;
height: 0.5vw;
background-color: #f0f0f0;
}
.k_first_box_ttl:before,
.k_second_box_ttl:before {
left: 0;
}
.k_first_box_ttl:after,
.k_second_box_ttl:after {
right: 0;
}
.k_first_box_txt_bottom,
.k_second_box_txt_bottom {
font-size: 1vw;
line-height: 1.7;
}
.k_first_box_img,
.k_second_box_img {
width: 15.5vw;
position: absolute;
right: 0;
bottom: 0;
}
.k_second_box_img {
bottom: 1.0vw;
right: 1.4vw;
}
}
/***          k          ***/

/***          l          ***/
/***          l          ***/

/***          m          ***/
@media screen and (max-width: 767px) {
.pd_m_boxWrap {
padding: 4vw;
}

.pd_m_box {
width: 100%;
padding: 0vw 0vw 8vw;
}
.m_box_ttl {
font-size: 2.9vw;
line-height: 1.5;
padding-bottom: 4vw;
text-align: left;
}
.m_box_ttl_deco {
font-size: 3vw;
color: #fff;
background: #3e3a39;
border-radius: 4px;
padding: .5vw 2vw;
text-align: center;
margin-right: 1.8vw;
letter-spacing: 0.4vw;
}
.m_box_img {
width: 100%;
text-align: center;
}
.m_box_notes {
font-size: 1.9vw;
line-height: 1.5;
letter-spacing: .2vw;
}
}
@media screen and (min-width: 768px) {
.pd_m_boxWrap {
width: 82%;
margin: auto;
display: flex;
justify-content: space-between;
}
.pd_m_box {
width: 44%;
}
.m_box_ttl {
font-size: 1.2vw;
line-height: 1.5;
padding-bottom: 1vw;
text-align: left;
}
.m_box_ttl_deco {
font-size: 1vw;
color: #fff;
background: #3e3a39;
border-radius: 7px;
padding: 0.5vw 1vw;
text-align: center;
margin-right: 0.8vw;
}
.m_box_img {
width: 100%;
text-align: center;
}
.m_box_notes {
font-size: 0.8vw;
line-height: 1.5;
letter-spacing: .04vw;
padding-top: 1vw;
}
}
/***          m          ***/

/***          n          ***/
@media screen and (max-width: 767px) {
.pd_n_hfb_img{
padding: 0vw 2vw 2vw 4vw;
}
.pd_n_hfb_img img{
width:100%;
}
.pd_n_hfb2{
padding:0vw 4vw 0vw 4vw ;
}
.pd_n_hfb2l{
padding-bottom: 3vw;
}
.pd_n_hfb2l img{
width:100%;
}
.pd_n_hfb2r{
padding-bottom: 5vw;
}
.pd_n_hfb2_ttl_sub{
padding: 1vw 0vw 2vw;
font-size: 3.5vw;
line-height: 1;
letter-spacing: .05vw;
text-align: center;
font-weight: normal;
border-bottom: 2px solid #21110D14;
}
.pd_n_hfb2_icon {
vertical-align: middle;
}
.pd_n_hfb2_icon img{
width: 14vw;
height: 100%;
margin-right: 1vw;
vertical-align: text-top;
}
.pd_n_hfb2_ttlc{
font-size: 1.8vw;
line-height: 1;
}
.pd_n_bg_top{
background: #f0f0f0;
}
/*
.pd_n_hfb2_ttl{
padding-bottom: 1vw;
font-size: 1.4vw;
line-height: 1.6vw;
letter-spacing: .05vw;
font-weight: 600;
}*/
.pd_n_hfb2_ttl{
background: #454547;
color: #fff;
font-size: 5.0vw;
line-height: 5.0vw;
letter-spacing: .05vw;
display: inline-block;
padding: 2vw 3vw 2vw 4vw;
position: relative;
}
.pd_n_hfb2_ttl::before {
border: 4.5vw solid transparent;
border-left-color: #454547;
border-right-width: 0;
content: '';
display: block;
height: 0;
position: absolute;
right: -4.45vw;
top: 0;
width: 0;
}
.pd_n_hfb2_ttl::after {
background: #454547;
border-radius: 8px 0 0 8px;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 1em;
}
.pd_n_hfb2_sub{
font-size: 2.8vw;
line-height: 1.6;
letter-spacing: .2vw;
padding: 3vw 0 4vw;
text-align: center;
}
.pd_n_hfb3{
padding: 0vw 0vw 0vw;
position: relative;
}
.pd_n_hfb3 img{
width:100%;
}
.pd_n_hfb3in{
position: absolute;
bottom: 4vw;
width: 100%;
text-align: left;
padding: 4vw 4vw;
}
.pd_n_hfb3_ttl2{
font-size: 4.7vw;
letter-spacing: 1.0vw;
color: #000;
padding-bottom: 1.5vw;
font-weight: 800;
}
.pd_n_ttlArea {
width: 100%;
padding: 0vw 4vw 4vw;
}
.pd_n_ttl {
font-size: 4.2vw;
letter-spacing: 0.4vw;
text-align: left;
padding-bottom: 4vw;
}
.pd_n_txt{
font-size: 4.5vw;
line-height: 1.5;
letter-spacing: 0.6vw;
}
.pd_n_hfb3_subTtl {
font-size: 3.3vw;
color: #000;
letter-spacing: 0.1vw;
}
.pd_n_bottom{
background: #fff;
}
}
@media screen and (min-width: 768px) {
.pd_n_bg_top {
width: 100vw;
position: relative;
}
.pd_n_bg_top img {
width: 100%;
}
.pd_n_ttlArea {
padding: 10vw 4vw 4vw;
position: absolute;
top: 0vw;
width: 100%;
}
.pd_n_ttl {
font-size: 2vw;
letter-spacing: 0.2vw;
text-align: center;
padding-bottom: 3vw;
}
.pd_n_txt {
font-size: 1.8vw;
letter-spacing: 0.2vw;
text-align: center;
}
.pd_n_hfb_img {
padding: 0 2vw 2vw 4vw;
position: absolute;
top: -22vw;
}
.pd_n_hfb_img img{
width:100%;
}
.pd_n_hfb2 {
padding: 0 4vw 0 0;
position: absolute;
top: -20vw;
}
.pd_n_hfb2l{
float:left;
width:60%;
padding-right:2vw;
padding-bottom: 2vw;
}
.pd_n_hfb2l img{
width:100%;
}
.pd_n_hfb2r{
float:left;
width:40%;
padding-bottom: 1vw;
}
.pd_n_hfb2_ttl_sub{
padding-bottom: 1vw;
font-size: 1.1vw;
line-height: 1.1vw;
letter-spacing: .05vw;
font-weight: 800;
}
.pd_n_hfb2_icon img{
width: 4.0vw;
height: auto;
margin-right: 0.4vw;
}
.pd_n_hfb2_ttl{
padding-bottom: 1vw;
font-size: 1.4vw;
line-height: 1.6vw;
letter-spacing: .05vw;
font-weight: 600;
}
.pd_n_hfb2_sub{
font-size: 1.1vw;
line-height: 1.6vw;
letter-spacing: .05vw;
}

.pd_n_bottom {
width: 100vw;
height: auto;
position: relative;
padding-top: 40vw;
}
.pd_n_bottom img {
width: 100%;
}

.pd_n_hfb3 {
width: 90%;
margin: auto;
position: absolute;
right: 0;
bottom: 20vw;
left: 0;
}
.pd_n_hfb3in{
position: absolute;
width: 33vw;
top: 7vw;
right: 0vw;
text-align: center;
}
.pd_n_hfb3_ttl2{
font-size: 2.3vw;
letter-spacing: .2vw;
color: #fff;
padding-bottom: 1.5vw;
font-weight: normal !important;
}
.pd_n_hfb3_ttl2_img{
padding: 1vw 0vw;
}
.pd_n_hfb3_ttl2_img img{
width: 42%;
}
.pd_n_hfb3_subTtl {
font-size: 1.3vw;
color: #fff;
padding-bottom: 1.4vw;
font-weight: normal;
letter-spacing: 0.1vw;
}
}
/***          n          ***/

/***          o          ***/
@media screen and (max-width: 767px) {
.pd_o_txtWrap {
width: 90%;
margin: auto;
}
.o_ttl {
font-size: 4vw;
letter-spacing: 1.1vw;
padding-bottom: 3vw;
}
.o_subTtl {
font-size: 4.4vw;
line-height: 1.7;
letter-spacing: .4vw;
padding-bottom: 4vw;
}
.o_txt {
width: 100%;
font-size: 3vw;
line-height: 1.7;
letter-spacing: .2vw;
padding-bottom: 4vw;
}
.pd_o_leftBox {
padding: 4vw 2vw 2vw 0;
}
.pd_o_rightBox {
padding-top: 10vw;
padding-bottom: 10vw;
}
.o_box_img_pc {
text-align: center;
line-height: 0;
}
.o_box_txt {
font-size: 2vw;
line-height: 1.7;
padding: 0vw 4vw 2vw;
}
.o_box_img_sp{
padding: 0vw 4vw 6vw;
}
.o_box_imgWrap_second{
padding: 0vw 0vw 4vw;
}
.o_box_photo_sp {
margin-bottom: 3vw;
}
}
@media screen and (min-width: 768px)  {
.pd_o_txtWrap {
width: 90%;
margin: auto;
}
.o_ttl {
font-size: 2vw;
letter-spacing: .2vw;
padding-bottom: 1vw;
}
.o_subTtl {
font-size: 1.4vw;
line-height: 1.5;
letter-spacing: .1vw;
padding-bottom: 1vw;
}
.o_txt {
width: 100%;
font-size: 0.8vw;
line-height: 1.8;
letter-spacing: 0.08vw;
}
.pd_o_leftBox {
padding: 4vw 2vw 2vw 0;
}
.pd_o_rightBox {
padding: 4vw 0 2vw 2vw;
}
.o_box_img_pc {
text-align: center;
line-height: 0;
}
.o_box_imgWrap_second {
padding-bottom: 3vw;
}
.o_box_txt {
font-size: 0.8vw;
line-height: 1.5;
padding-left: 4vw;
}

.o_box_photo_pc {
width: 24vw;
margin: 0 auto 2vw;
}

}
/***          o          ***/

/***          p          ***/
@media screen and (max-width: 767px) {
.pd_p_bg {
width: 100vw;
position: relative;
background: #fff;
}
.pd_p_bg img {
width: 100%;
}
.pd_p_bg_sp{
position: relative;
bottom: 24vw;
width: 100%;
margin: 0 auto;
}
.pd_p_bg_sp1{
color: #fff;
font-size: 5vw;
letter-spacing: .1vw;
text-align: center;
font-weight: 100;
padding-bottom: 4vw;
}
.pd_p_bg_sp2{
color: #fff;
font-size: 10vw;
letter-spacing: .5vw;
text-align: center;
font-weight: 100;
}
.pd_p_bg_sp3{
position: relative;
top: -26vw;
width: 85%;
margin: 0 auto;
}
.pd_p_bg_sp3 img{
width: 100%;
}
.pd_p_bg_sp_txt{
font-size: 2vw;
text-align: center;
padding: 0vw 0vw 5vw;
}
}
@media screen and (min-width: 768px)  {
.pd_p_bg {
width: 100vw;
position: relative;
}
.pd_p_bg img {
width: 100%;
}
}
/***          p          ***/

/***          q          ***/
/***          q          ***/

/***          r          ***/
@media screen and (max-width: 767px) {
.pd_r_hfb{
padding: 10vw 4vw 4vw;
text-align: center;
}
.pd_r_hfb2{
padding:5vw 0vw;
}
.pd_r_hfb_ttl {
font-size: 4.7vw;
line-height: 4.7vw;
letter-spacing: .5vw;
color: #231815;
position: relative;
display: inline-block;
padding: 0 7vw 2vw;
width: 100%;
}
.pd_r_hfb_ttl:before,
.pd_r_hfb_ttl:after {
content: '';
position: absolute;
top: 2.5vw;
display: inline-block;
width: 29vw;
height: 1px;
background-color: #9fa0a0;
}
.pd_r_hfb_ttl:before {
left: 0;
}
.pd_r_hfb_ttl:after {
right: 0;
}
.pd_r_hfb_img{
padding: 4vw 4vw 4vw;
}
.pd_r_hfb_img2{
padding: 1vw 4vw 4vw;
}
.pd_r_hfb_boxl{
padding:0vw 0vw 4vw;
}
.pd_r_hfb_boxl img{
width:100%;
}
.pd_r_hfb_boxr{
padding:0vw 0vw 4vw;
}
.pd_r_hfb_boxr_ttl{
font-size: 4.0vw;
line-height: 1.7;
padding-bottom: 3vw;
font-weight: 700;
}
.pd_r_hfb_boxr_txt{
font-size: 3.5vw;
line-height: 5.3vw;
}
.pd_r_hfb_boxr_txt2{
font-size: 2.2vw;
line-height: 3.5vw;
padding-top: 2vw;
}
.pd_r_hfb_ttl2 {
font-size: 4.8vw;
line-height: 7vw;
letter-spacing: .2vw;
color: #231815;
position: relative;
display: inline-block;
padding: 0 0 2vw;
font-weight: 800;
}
.pd_r_hfb_boxla{
padding: 4vw;
}
.pd_r_hfb_boxla img{
width:100%;
}
.pd_r_hfb_boxra1{
padding: 0 0 4vw;
}
.pd_r_hfb_boxra2{
padding: 0 0 4vw;
}
.pd_r_hfb_boxra3{
padding: 0 0 4vw;
}
.pd_r_hfb_boxra_img{
float: left;
width: 50%;
padding-right:4vw;
padding-bottom:1vw;
}
.pd_r_hfb_boxrb{
float: left;
width: 50%;
}
.pd_r_hfb_boxra_img img{
width:100%;
}
.pd_r_hfb_boxr_stp{
background: #3e3a39;
color: #fff;
font-size: 3.0vw;
text-align: center;
padding: 2.5vw 1vw;
line-height: 1.2vw;
letter-spacing: 1.5vw;
}
.pd_r_hfb_boxr_stpt{
padding: 2.6vw 0;
font-size: 3.5vw;
line-height: 5.4vw;
}
.pd_r_hfb_boxr_stpt2{
padding: 2.6vw 4vw;
font-size: 2.5vw;
line-height: 4.2vw;
}
}
@media screen and (min-width: 768px)  {
.pd_r_hfb{
text-align: center;
padding:4vw 4vw 2vw;
}
.pd_r_hfb2{
padding:4vw 4vw 2vw;
text-align: left;
}
.pd_r_hfb_ttl {
font-size: 1.7vw;
line-height: 1.7vw;
letter-spacing: .5vw;
color: #231815;
position: relative;
display: inline-block;
padding: 0px 7vw 2vw;
width: 100%;
}
.pd_r_hfb_ttl:before,
.pd_r_hfb_ttl:after {
content: '';
position: absolute;
top: 1vw;
display: inline-block;
width: 29vw;
height: 1px;
background-color: #9fa0a0;
}
.pd_r_hfb_ttl:before {
left: 0;
}
.pd_r_hfb_ttl:after {
right: 0;
}
.pd_r_hfb_img{
padding: 1vw 0vw 4vw;
}
.pd_r_hfb_img2{
padding: 1vw 4vw 4vw;
}
.pd_r_hfb_boxl{
float:left;
width:43%;
padding-right:2vw;
}
.pd_r_hfb_boxl img{
width:100%;
}
.pd_r_hfb_boxr{
float:left;
width:57%;
}
.pd_r_hfb_boxr_ttl{
font-size: 1.2vw;
line-height: 1.7vw;
padding-bottom: 1vw;
font-weight: 800;
}
.pd_r_hfb_boxr_txt{
font-size: 1.0vw;
line-height: 1.3vw;
}

.pd_r_hfb_ttl2 {
font-size: 1.3vw;
line-height: 2.3vw;
letter-spacing: .2vw;
color: #231815;
position: relative;
display: inline-block;
padding: 0 0vw 2vw;
width: 100%;
font-weight: 800;
}
.pd_r_hfb_ttl2:after {
content: '';
position: absolute;
top: 1vw;
display: inline-block;
width: 35vw;
height: 1px;
background-color: #9fa0a0;
}
.pd_r_hfb_ttl2:after {
right: 0;
}
.pd_r_hfb_boxla{
float:left;
width:40%;
padding-right: 2vw;
padding-top: 3vw;
}
.pd_r_hfb_boxla img{
width:100%;
}
.pd_r_hfb_boxra1{
float:left;
width:20%;
padding:0vw 0.6vw 0vw 0vw;
}
.pd_r_hfb_boxra2{
float:left;
width:20%;
padding:0vw 0.3vw 0vw 0.3vw;
}
.pd_r_hfb_boxra3{
float:left;
width:20%;
padding:0vw 0vw 0vw 0.6vw;
}
.pd_r_hfb_boxra_img{
padding-bottom:0.6vw;
}
.pd_r_hfb_boxra_img img{
width:100%;
}
.pd_r_hfb_boxr_stp{
background: #3e3a39;
color: #fff;
font-size: 1.2vw;
text-align: center;
padding: .5vw 1vw;
line-height: 1.2vw;
letter-spacing: 0.2vw;
}
.pd_r_hfb_boxr_stpt{
padding: 0.6vw 0;
font-size: 1.1vw;
line-height: 1.4vw;
}
.pd_r_hfb_boxr_stpt2{
padding: .6vw 4vw;
font-size: 0.9vw;
line-height: 1.4vw;
}
}
/***          r          ***/

/***          s          ***/
@media screen and (max-width: 767px) {
.pd_s_box {
width: 100%;
margin: auto;
padding: 10vw 4vw;
}
.s_box_ttl{
text-align: center;
font-size: 5vw;
letter-spacing: 0.4vw;
font-weight: 700;
padding: 5vw;
}
.s_box_img {
width: 100%;
padding-bottom: 3vw;
}
.s_box_img img {
width: 100%;
}
.s_box_col2 {
width: 82%;
margin: auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 4vw;
}
.s_box_col2_first {
width: 30%;
font-size: 1.2vw;
letter-spacing: 0.2vw;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 1.2vw 0;
text-align: center;
margin-right: 6%;
}
.s_box_col2_second {
width: 64%;
}
.s_box_col2_second_top {
width: 100%;
padding-bottom: 1vw;
}
.s_box_col2_second_top img {
width: 100%;
}
.s_box_col2_second_bottom {
font-size: 0.8vw;
line-height: 1.5;
}
.s_box_notes {
font-size: 1.8vw;
line-height: 1.8;
padding: 3vw 0vw 0vw;
}
}
@media screen and (min-width: 768px)  {
.pd_s_box {
width: 70%;
margin: auto;
}
.s_box_img {
width: 100%;
padding-bottom: 3vw;
}
.s_box_img img {
width: 100%;
}
.s_box_col2 {
width: 82%;
margin: auto;
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 4vw;
}
.s_box_col2_first {
width: 30%;
font-size: 1.2vw;
letter-spacing: 0.2vw;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
padding: 1.2vw 0;
text-align: center;
margin-right: 6%;
}
.s_box_col2_second {
width: 64%;
}
.s_box_col2_second_top {
width: 100%;
padding-bottom: 1vw;
}
.s_box_col2_second_top img {
width: 100%;
}
.s_box_col2_second_bottom {
font-size: 0.8vw;
line-height: 1.5;
}
.s_box_notes {
font-size: 0.8vw;
line-height: 1.8;
position: relative;
padding-left: 1em;
}
.s_box_notes::before {
content: '※';
position: absolute;
left: 0;
}
}
/***          s          ***/

/***          t          ***/
@media screen and (max-width: 767px) {
.pd_t_area{
padding:5vw 0vw 1vw;
}

.pd_t_sup_ttl {
font-size: 4.5vw;
line-height: 1;
letter-spacing: 1vw;
color: #231815;
padding: 4vw 4vw 4vw;
width: 100%;
text-align: center;
font-weight: 600;
background: #f5f5f5;
}
.pd_t_sup_ttl_sub{
font-size: 4.3vw;
line-height: 1.5;
text-align: center;
padding: 10vw 0vw 2vw;
letter-spacing: 0.2vw;
}
.pd_t_sup_box1{
padding:0vw 0vw 4vw;
}
.pd_t_sup_box1_ttl1{
text-align: center;
font-size: 3.5vw;
line-height: 1;
letter-spacing: .2vw;
padding: 4vw 4vw;
color: #000;
background: #F0F0F0;
}
.pd_t_sup_box1_ttl1a{
padding-right:1vw;
font-size:1.2vw;
line-height:1.2vw;
}
.pd_t_sup_box1_ttl1b{
padding-left:1vw;
font-size:1.3vw;
line-height:1.3vw;
}
.pd_t_sup_box1_ttl2{
padding: 8vw 0 7vw;
text-align: center;
font-size: 10vw;
line-height: 1.4;
letter-spacing: 1.0vw;
}
.pd_t_sup_box1_ttl2a{
color: #356db2;
font-size: 22vw;
line-height: 1;
letter-spacing: .05vw;
font-weight: normal;
}
.pd_t_sup_box1_ttl2b{
color: #356DB2;
font-size: 15vw;
line-height: 1.3;
letter-spacing: .05vw;
padding-right: 2vw;
}
.pd_t_sup_box1_text{
padding: 0 4vw 1vw;
text-align: left;
font-size: 3.5vw;
line-height: 1.7;
letter-spacing: 0.1vw;
}
.pd_t_sup_box1_texta{
color: #356db2;
font-weight: 800;
}
.pd_t_sup_box1_textb{
padding-top: 1.5vw;
text-align: left;
font-size: 2.5vw;
line-height: 1;
letter-spacing: .1vw;
}
.pd_t_sup_box2{
padding: 2vw 4vw 2vw;
}
.pd_t_sup_box2l{
font-size: 3.4vw;
line-height: 1.6;
text-align: left;
padding-bottom: 5vw;
letter-spacing: 0.2vw;
}
.pd_t_sup_box2r{
font-size: 3.6vw;
line-height: 6.2vw;
text-align: left;
padding-bottom: 2vw;
}
.pd_t_sup_box2_ttl{
color:#356db2;
font-size: 2vw;
line-height: 5vw;
vertical-align: super;
}
.pd_t_sup_box2_ttl2{
font-weight: 700;
padding: 0 2vw;
font-size: 5vw;
letter-spacing: 0.3vw;
}
.pd_t_sup_box3{
padding:2vw 4vw 4vw;
}
.pd_t_sup_box3_txt{
font-size: 2vw;
line-height: 1.5;
text-align: left;
}
}
@media screen and (min-width: 768px)  {
.pd_t_area{
padding:5vw 0vw 1vw;
}
.pd_t_sup_ttl {
font-size: 2.2vw;
line-height: 2.2vw;
letter-spacing: .5vw;
color: #231815;
position: relative;
display: inline-block;
padding: 0 7vw 2vw;
width: 100%;
text-align: center;
}
.pd_t_sup_ttl:before,
.pd_t_sup_ttl:after {
content: '';
position: absolute;
top: 0.5vw;
display: inline-block;
width: 29vw;
height: 18px;
background-color: #f1f5f7;
}
.pd_t_sup_ttl:before {
left: 0;
}
.pd_t_sup_ttl:after {
right: 0;
}
.pd_t_sup_box1{
padding:0vw 0vw 4vw;
}
.pd_t_sup_box1_ttl1{
text-align: center;
font-size: 1.3vw;
line-height: 1.3vw;
letter-spacing: .05vw;
padding: 0 0 1vw;
}
.pd_t_sup_box1_ttl1a{
padding-right:1vw;
font-size:1.2vw;
line-height:1.2vw;
}
.pd_t_sup_box1_ttl1b{
padding-left:1vw;
font-size:1.3vw;
line-height:1.3vw;
}
.pd_t_sup_box1_ttl2{
padding:1vw 0vw 3vw;
text-align:center;
font-size:2.7vw;
line-height:2.7vw;
}
.pd_t_sup_box1_ttl2a{
color:#004984;
font-size:6vw;
letter-spacing:0.05vw;
}
.pd_t_sup_box1_ttl2b{
color:#004984;
font-size:3.8vw;
line-height:3.8vw;
letter-spacing:0.05vw;
padding-right: 1vw;
}
.pd_t_sup_box1_text{
padding: 0vw 0 1vw;
text-align: center;
font-size: 1.2vw;
line-height: 2.1vw;
}
.pd_t_sup_box1_texta{
border-bottom:solid 1px #251e1c;
}
.pd_t_sup_box1_textb{
padding-top: 1vw;
text-align: center;
font-size: 1.0vw;
line-height: 1;
}
.pd_t_sup_box2{
padding:2vw 0vw 2vw;
border-bottom:solid 1px #251e1c;
}
.pd_t_sup_box2l{
float: left;
width: 50%;
font-size: 1.0vw;
line-height: 1.5vw;
text-align: left;
padding-right: 2vw;
border-right: solid 1px #251e1c;
}
.pd_t_sup_box2r{
float: left;
width: 50%;
font-size: 1.0vw;
line-height: 1.5vw;
text-align: left;
padding-left: 2vw;
}
.pd_t_sup_box2_ttl{
color:#004984;
}
.pd_t_sup_box3{
padding:2vw 0vw;
}
.pd_t_sup_box3_txt{
font-size:0.9vw;
line-height:1.4vw;
text-align:left;
}
}
/***          t          ***/

/***          u          ***/
@media screen and (max-width: 767px) {
.pd_u_area{
padding:5vw 0vw 1vw;
}
.pd_u_area_ttl{
font-size: 5vw;
line-height: 5vw;
letter-spacing: 1.0vw;
color: #231815;
padding-bottom: 6vw;
text-align: center;
}
.pd_u_box_are2{
padding:0vw 4vw;
}
.pd_u_box1{
padding: 4vw 23vw;
text-align: center;
}
.pd_u_box2{
padding: 0vw 0vw 5vw;
}
.pd_u_box3{
float: left;
width: 33%;
padding: 0.5vw;
}
.pd_u_icon{
padding: 0vw;
width:100%;
line-height: 0;
}
.pd_u_icon img{
width:100%;
}
.pd_u_text{
font-size: 3vw;
line-height: 5.0vw;
letter-spacing: 0.2vw;
color: #231815;
padding: 1.0vw 0.0vw;
text-align: left;
}
.pd_u_ttl{
font-size: 3vw;
line-height: 3vw;
letter-spacing: 0.2vw;
color: #231815;
padding: 2vw 1.0vw;
text-align: center;
}
}
@media screen and (min-width: 768px)  {
.pd_u_area{
padding:5vw 5vw 1vw;
}
.pd_u_area_ttl{
font-size: 1.8vw;
line-height: 2vw;
letter-spacing: 0.1vw;
color: #231815;
padding-bottom: 1.5vw;
text-align: center;
}
.pd_u_box_are2{
padding:0vw 0vw;
}
.pd_u_box1{
float: left;
width: 33%;
padding: 0.5vw 0vw 1.0vw;
}
.pd_u_box2{
float: left;
width: 66%;
padding: 0.5vw;
}
.pd_u_box3{
float: left;
width: 33%;
padding: 0.5vw 0vw 1.0vw;
}
.pd_u_icon{
padding: 1vw 1vw 1vw 0vw;
width:100%;
line-height: 0;
}
.pd_u_icon img{
width:100%;
}
.pd_u_text{
font-size: 0.7vw;
line-height: 1.7;
letter-spacing: 0vw;
color: #231815;
padding: 3vw 0vw 1.0vw 0vw;
text-align: left;
}
.pd_u_ttl{
font-size: 1.0vw;
line-height: 2vw;
letter-spacing: 0.1vw;
color: #231815;
padding: 0.5vw 1.0vw 0vw;
text-align: center;
}
}
/***          u          ***/

/***  btm  ***/

#cartin_sp {
position: fixed;
bottom: 0px;
right: 0px;
background: #d9e5dade;;
padding: 0px 0px 0px;
height:10vw;
}

.mytrex_buy{
width: 100%;
}

@media screen and (max-width: 767px) {
.mytrex_buy_item{
float: left;
font-size: 3vw;
font-weight: 800;
line-height: 4vw;
color: #231815;
padding: 1vw 3vw 1vw 3vw;
letter-spacing: 0.1vw;
min-width: 35vw;
}
.mytrex_buy{
padding: 0 12vw;
}
}
@media screen and (min-width: 768px) {
.mytrex_buy{
padding: 0 1vw;
}
}
/***  btm  ***/

/***          modal          ***/
@media screen and (max-width: 767px) {
#btn-close-modal {
width: 23vw;
text-align: center;
cursor: pointer;
color: #3e3c3d;
font-size: 3.5vw;
font-weight: normal;
border: 1px solid #3e3c3d;
padding: 1.5vw 0.2vw;
border-radius: 10vw;
line-height: 3.5vw;
margin: 0 auto 10vw;
}
.modal-content {
width: 94%;
}
}
@media screen and (min-width: 768px) {
#btn-close-modal {
width: 7vw;
text-align: center;
cursor: pointer;
color: #3e3c3d;
font-size: 1vw;
font-weight: normal;
border: 1px solid #3e3c3d;
padding: 0.5vw 0.2vw;
border-radius: 10vw;
line-height: 1vw;
margin: 0 auto 5vw;
}
.modal-content {
width: 80%;
}
}
.modal-content {
margin: 60px auto 80px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
box-shadow: 0 0px 0px rgba(0,0,0,0);
background: rgba(255,255,255,1);
border: 0px solid rgba(0,0,0,0);
border-radius: 0px;
}
/***          modal          ***/

/***          modal e1         ***/
@media screen and (max-width: 767px) {
#pd_md_1{
padding:15% 0% 0%;
}
}
@media screen and (min-width: 768px) {
#pd_md_1{
padding:8% 0%;
}
}
/***          modal e1         ***/

/***          recommend         ***/
@media screen and (max-width: 767px) {
.pd_l_area{
padding:4vw 0vw;
}
.pd_l_area_ttl{
font-size: 5vw;
line-height: 5vw;
letter-spacing: 1.0vw;
color: #231815;
padding-bottom: 6vw;
text-align: center;
}
.pd_l_box_are{
padding:0vw 0vw;
}
.pd_l_item{
padding:0.1vw;
text-align:center;
}
.pd_l_item_img{
}
.pd_l_item_img img{
width:100%;
}
.pd_l_item_ttl{
font-size: 1.1vw;
line-height: 1.6vw;
letter-spacing: 0.1vw;
color: #231815;
text-align: left;
display:none;
}
}
@media screen and (min-width: 768px) {
.pd_l_area{
padding:4vw 0vw;
}
.pd_l_area_ttl{
font-size: 1.8vw;
line-height: 2vw;
letter-spacing: 0.1vw;
color: #231815;
padding-bottom: 1.5vw;
text-align: center;
}
.pd_l_box_are{
padding:0vw 0vw;
}
.pd_l_item{
padding:0.1vw;
text-align:center;
}
.pd_l_item_img{
}
.pd_l_item_img img{
width:100%;
}
.pd_l_item_ttl{
font-size: 1.1vw;
line-height: 1.6vw;
letter-spacing: 0.1vw;
color: #231815;
text-align: left;
}
}
/***          recommend         ***/

/***          swiper         ***/
/***          swiper         ***/

img {
/* width: 100%; */
}

@media screen and (max-width: 767px) {
  .pd_bnr_authority2 {
    padding: 10vw 0 0vw;
  }
}

@media screen and (max-width: 767px) {
.col-sm-1,.col-sm-12 {
min-height: 0;
}
.container img {
vertical-align: top;
}

#video-btn {
width: 100%;
height: 100%;
background-image: none;
position: absolute;
left: 0;
top: 0;
}
#video-btn::after {
content: "";
display: block;
position: absolute;
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_play.png);
background-repeat: no-repeat;
background-size: cover;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#video-btn.current::after {
content: "";
display: block;
position: absolute;
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_stop.png);
background-repeat: no-repeat;
background-size: cover;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#video-btn2 {
width: 100%;
height: 100%;
background-image: none;
left: 0;
top: 0;
}
#video-btn2::after {
content: "";
display: block;
position: absolute;
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_play.png);
background-repeat: no-repeat;
background-size: cover;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#video-btn2.current::after {
content: "";
display: block;
position: absolute;
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_stop.png);
background-repeat: no-repeat;
background-size: cover;
bottom: 2vw;
width: 10vw;
right: 2vw;
height: 10vw;
}
#pd_b_plus {
padding: 10vw 0;
}
.pd_b_plus_box {
text-align: center;
}
.pd_b_plus_ttl {
font-size: 5.8vw;
font-weight: bold;
margin-bottom: 6.5vw;
}
.pd_b_plus_txt {
font-size: 3.2vw;
}
.pd_b_plus_txt_en {
letter-spacing: 0.6vw;
}
.pd_b_plus_txt_en sup {
font-weight: normal;
font-size: 2vw;
}
.pd_b_plus_txt > span {
line-height: 5vw;
display: block;
margin-bottom: 4vw;
}
.pd_b_plus_txt2 {
font-size: 5vw;
line-height: 1.5 !important;
letter-spacing: 0.2vw;
}
.pd_b_plus_txt strong {
font-size: 10vw;
font-weight: normal;
}
.pd_b_sp_ttl sup {
font-weight: normal;
font-size: 4vw;
}

#pd_c_plus {
padding-bottom: 0vw;
}
.pd_c_plus_ttl {
min-height: 13.7vw;
/*background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(239,243,247,1) 50%, rgba(224,231,239,1) 100%); */
display: flex;
align-items: center;
justify-content: center;

font-size: 3.8vw;
letter-spacing: 0.11em;
}
.pd_c_plus_box1 {
position: relative;
}
.pd_c_plus_box1_txt3 {
position: absolute;
left: 42vw;
top: 42vw;
color: #fff;
font-size: 3.5vw;
line-height: 5vw
}
.pd_c_plus_box2 {
position: relative;
}
.pd_c_plus_box2_in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.pd_c_plus_box2_txts {
background-color: #ffffff;
width: 83vw;
height: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pd_c_plus_box2_icon {
width: 9.5vw;
margin-bottom: 5vw;
}
.pd_c_plus_box2_ttl1 {
font-size: 3.8vw;
font-weight: bold;
letter-spacing: 0.5vw;
margin-bottom: 6vw;
}
.pd_c_plus_box2_ttl1 > span {
color: #ff9000;
}
.pd_c_plus_box2_txt1 {
font-size: 5vw;
letter-spacing: 0.06em;
line-height: 1.5;
margin-bottom: 4vw;
}
.pd_c_plus_box2_txt1 sup {
font-size: 2vw;
position: relative;
top: -2vw;
}
.pd_c_plus_box2_txt2 {
padding: 0 6vw;
font-size: 3.3vw;
letter-spacing: 0.07em;
line-height: 1.96;
}
.pd_c_plus_box2_txt2 sup {
font-size: 2vw;
position: relative;
top: -1vw;
}
.pd_c_plus_box2_txt3 {
font-size: 2vw;
text-align: right;
padding-top: 1vw;
}
.pd_c_plus_box3 {
position: relative;
}
.pd_c_plus_box3_ttl1 {
padding: 15vw 0 3.5vw;
text-align: center;
font-size: 3.8vw;
letter-spacing: 0.11em;
}
.pd_c_plus_box3_in {
position: absolute;
left: 9vw;
top: 58vw;
}
.pd_c_plus_box3_txt1 {
font-size: 3.8vw;
letter-spacing: 0.11em;
display: inline-block;
padding-bottom: 2.5vw;
border-bottom: 1px solid #231815;
margin-bottom: 8vw;
}
.pd_c_plus_box3_txt2 {
font-size: 6vw;
letter-spacing: 0.01vw;
line-height: 1.5;
padding-bottom: 3vw;
}
.pd_c_plus_box3_txt3 {
font-size: 12.4vw;
margin-bottom: 4vw;
}
.pd_c_plus_box3_txt3 strong {
font-size: 16vw;
font-weight: normal;
}
.pd_c_plus_box3_txt3 sup {
font-size: 2vw;
position: relative;
top: -8vw;
}
.pd_c_plus_box3_txt4 {
font-size: 2.9vw;
letter-spacing: 0.09em;
}
.pd_c_plus_box3_txt5 {
font-size: 2vw;
line-height: 1.26;
padding: 17vw 9vw 0;
}
.pd_c_nm3 sup {
font-weight: normal;
font-size: 5vw;
}

.pd_d_plus_box {
position: relative;
}
.pd_d_plus_box1_in {
position: absolute;
right: 0;
left: 0;
top: 10vw;
margin: auto;
text-align: center;
}
.pd_d_plus_box1_txt1 {
font-size: 3.8vw;
letter-spacing: 0.2vw;
margin-bottom: 6.6vw;
}
.pd_d_plus_box1_txt2 {
font-size: 5.6vw;
letter-spacing: 0.4vw;
line-height: 8vw;
}
.pd_d_plus_box1_txt2 sup {
font-size: 3vw;
position: relative;
top: -2vw;
left: -4vw;
}
.pd_d_plus_box3_in {
width: 89vw;
margin-left: auto;
margin-right: auto;
margin-top: -8vw !important;
background-color: #ffffff;
padding-bottom: 20vw;
}

#pd_j {

}
.pd_j_bg_plus {
background: rgba(0,0,0,.02);
text-align: center;
line-height: 0;
padding: 70vw 0 12vw;
}
.pd_j_txtWrap_plus {
padding: 17vw 0 0vw;
text-align: center;
position: relative;
}
.pd_j_txtWrap_plus::after {
content: "";
display: block;
width: .8vw;
height: 9.6vw;
margin: auto;
background: #ffffff;
}
.pd_j_ttl {
font-size: 5.8vw;
letter-spacing: 0.07em;
line-height: 1.36;
margin-bottom: 5vw;
}
.pd_j_ttl > span {
transform: scaleY(0.9);
display: inline-block;
}
.pd_j_subTtl {
font-size: 6.0vw;
letter-spacing: 0.8vw;
font-feature-settings: "palt";
padding-bottom: 4vw;
}
.j_point1_ttl {
position: absolute;
left: 7vw;
top: -118vw;
color: #406ab4;
font-size: 6vw;
letter-spacing: 0.1vw;
padding-bottom: 7vw;
line-height: 1.7;
text-align: left;
}
.j_point1_txt {
font-size: 3.2vw;
width: 84vw;
position: absolute;
left: 7vw;
top: -92vw;
letter-spacing: .1vw;
text-align: left;
}
.j_point1_dt {
padding-left: 8.5vw;
padding-right: 8.5vw;
padding-top: 8.5vw;
padding-bottom: 4vw;
font-size: 3.6vw;
font-weight: bold;
}
.j_point1_dd {
padding-left: 8.5vw;
padding-right: 8.5vw;
display: flex;
justify-content: space-between;
}
.j_point1_dd > div {
width: 40vw;
}
.j_point1_dd_img {
margin-bottom: 5vw;
}
.j_point1_dd_txt1 {
display: inline-block;
font-size: 2.5vw;
letter-spacing: 0.2vw;
font-weight: bold;
margin-bottom: 4vw;
border: 1px solid #231815;
padding: 1.7vw 2vw 1.6vw;
}
.j_point1_dd_txt2 {
display: block;
font-size: 3.7vw;
letter-spacing: 0.2vw;
font-weight: bold;
margin-bottom: 4vw;
}
.j_point1_dd_txt3 {
display: block;
font-size: 2.5vw;
line-height: 4vw;
}
.j_point1_dd > div:last-child .j_point1_dd_txt2 {
color: #1581d9;
}
.j_bbl_sp_plus {
padding-left: 7vw;
}

.pd_i_box {
padding-top: 21vw;
padding-bottom: 21vw;
}
.i_box_ttl {
font-size: 5.0vw;
line-height: 1.7;
letter-spacing: .3vw;
font-feature-settings: "palt";
}
.i_box_imgWrap {
background-color: #ffffff;
padding-bottom: 0;
}
.i_box_txt_notes {
font-size: 2vw;
}

#pd_f {
background-color: #f6f7fb;
}
.pd_f_box {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pd_f_ttl {
font-size: 3.6vw;
padding-bottom: 8vw;
}
.pd_f_box_item {
padding: 1.1vw 2.1vw;
}
.f_box_item_txt {
font-size: 2.4vw;
letter-spacing: 0.06em;
line-height: 1.6;
padding-top: 2.6vw;
}
.pd_k_bg {
padding-bottom: 0;
}

.pd_head_plus {
padding: 18vw 9vw 0;
}
.pd_head_plus_img {
text-align: center;
width: 100%;
padding: 10vw 8vw 0vw;
}
.pd_head_plus_img img{
width:100%;
height: auto;
}
.pd_head_plus2 {
padding: 15vw 9vw 5vw;
text-align: center;
background-color: #f6f7fb;
}
.pd_head-p_plus {
font-size: 3.2vw;
letter-spacing: 0.13em;
display: inline-block;
border-bottom: 1px solid #231815;
padding-bottom: 2vw;
margin-bottom: 5vw;
}
.pd_head-en_plus {
font-size: 4.4vw;
letter-spacing: 0.05em;
font-weight: bold;
margin-bottom: 5vw;
}
.pd_head-lead_plus {
font-size: 4.5vw;
line-height: 1.5;
letter-spacing: 0.124em;
margin-bottom: 5vw;
}
.pd_head-txt_plus {
font-size: 3.5vw;
letter-spacing: 0.04em;
line-height: 1.5;
margin-bottom: 5vw;
}
.pd_head-txt_plus sup {
font-size: 2vw;
}
.pd_head-attention_plus {
font-size: 1.8vw;
}
.pd_m_boxWrap {
padding: 13vw 8vw 0;
}
.m_box_notes {
padding-top: 6.5vw;
}

.pd_head2_plus {
background-color: #ffffff;
text-align: center;
padding-bottom: 10vw;
}
.pd_head2_plus .pd_head-txt_plus {
margin-bottom: 0;
}
.k_first_box {
position: relative;
padding-bottom: 3vw;
}
.pd_k_first {
background-color: #f6f7fb;
padding: 0 0 8vw;
/* padding-top: 15vw; */
}
.pd_k_second {
background-color: #f6f7fb;
padding: 0 0 8vw;
}
.k_second_box_ttl {
display: inline-block;
background-color: #d9e5da;
font-size: 4vw;
letter-spacing: 1.5vw;
padding: 2vw 6.5vw 2vw 11vw;
margin-bottom: 8vw;
}
.k_first_box_txt {
float: left;
width: 100%;
}
.k_second_box_txt {
float: left;
}
.k_first_box_txt_bottom {
font-size: 3.8vw;
padding-left: 10vw;
letter-spacing: 0.1vw;
}
.k_first_box_img {
width: 40%;
position: absolute;
right: 4vw;
top: 0;
}
.k_first_insp_img {
background-color: #fff;
padding: 6vw;
margin-left: 7vw;
margin-right: 7vw;
}
.k_second_box {
position: relative;
}
.k_second_box_img {
width: 40%;
position: absolute;
right: 6vw;
top: 0;
}
.k_second_box_txt {
padding-left: 0;
}
.k_second_box_txt_bottom {
font-size: 3.8vw;
padding-left: 10vw;
letter-spacing: 0.1vw;
}
.k_second_insp_img {
background: #fff;
padding: 6vw;
margin-left: 7vw;
margin-right: 7vw;
}
.pd_k_third {
background-color: #f6f7fb;
margin-left: 0;
margin-right: 0;
border-top: none;
padding-top: 0;
padding-left: 5vw;
padding-right: 5vw;
padding-bottom: 19vw;
}

#pd_l {
padding-top: 0;
padding-bottom: 0;
position: relative;
}
.l_first_ttl_plus {
font-size: 7vw;
color: #7ac0cb;
position: absolute;
left: 12vw;
top: -100vw;
}
.l_first_ttl_plus > span {
opacity: 0.68;
}
.l_first_subTtl_plus {
font-size: 4.8vw;
letter-spacing: 0.1;
line-height: 1.6;
color: #ffffff;
position: absolute;
top: -23vw;
right: 6vw;
text-align: right;
}
.l_first_txt_plus {
padding-top: 8.5vw;
padding-left: 9vw;
padding-right: 9vw;
padding-bottom: 6vw;
font-size: 3.2vw;
letter-spacing: 0.07em;
line-height: 1.4;
}
.l_first_icon_plus {
width: 18.5vw;
position: absolute;
top: -112vw;
right: 6vw;
}
.l_third_sp_plus {
font-size: 2vw;
letter-spacing: 0.04em;
line-height: 1.5;
padding-left: 9vw;
padding-right: 9vw;
}

#pd_o {
padding: 25vw 0 0;
}
.pd_o_txtWrap {
width: 100%;
}
.o_ttl {
font-size: 5.8vw;
letter-spacing: 0.07em;
padding-bottom: 4.5vw;
text-align: center;
}
.o_lead {
position: relative;
}
.o_subTtl {
font-size: 4.8vw;
letter-spacing: 0.08em;
line-height: 1.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-bottom: 0;
}
.o_subTtl strong {
font-size: 8.6vw;
line-height: 10vw;
font-weight: normal;
}
.o_subTtl sup {
font-size: 2vw;
position: relative;
top: -4vw;
}
.o_subTtl span:nth-child(1) {
position: absolute;
top: 33vw;
left: 4.5vw;
}
.o_subTtl span.notes {
font-size: 2vw !important;
letter-spacing: 0.04em;
position: absolute;
right: 1vw;
bottom: 1vw;
color: #ffffff;
}
.o_img {
width: 74vw;
margin: auto;
padding: 10vw 0 16vw;
}
.o_bg {
background-color: #f6f7fb;
padding-top: 12vw;
padding-bottom: 21vw;
margin-bottom: 23vw;
}
.o_txt {
text-align: center;
font-size: 4.2vw;
padding-bottom: 10vw;
}
.o_box_img_sp {
padding: 0vw 10vw 0vw;
}
.o_box_photo_sp {
margin-bottom: 0;
}
.pd_o_leftBox {
padding: 0;
padding-top: 13vw;
}
.o_box_imgWrap_second {
padding: 0vw 0vw 0vw;
}
.pd_o_rightBox {
padding-top: 17vw;
padding-bottom: 11vw;
}
.o_box_txt {
padding-left: 10vw;
padding-right: 10vw;
}

.m_box_ttl sup {
font-size: 2vw;
}

#pd_n {
padding-top: 0;
padding-bottom: 23vw;
}
.pd_n_ttlArea {
padding-bottom: 12vw;
}
.pd_n_bg_top {
background: #ffffff;
padding: 21vw 0 15vw;
}
.pd_n_ttl {
text-align: center;
font-size: 6vw;
letter-spacing: 0.07em;
font-weight: bold;
padding-bottom: 7vw;
}
.pd_n_txt {
font-size: 4.2vw;
letter-spacing: 0.11em;
line-height: 1.8;
text-align: center;
}
.pd_n_txt > span {
font-size: 3.2vw;
letter-spacing: 0.2vw;
}
.pd_n_hfb2 {
padding-left: 10vw;
padding-right: 10vw;
}
.pd_n_hfb2l {
padding-bottom: 6.5vw;
}
.pd_n_hfb2r {
padding-bottom: 13vw;
}
.pd_n_hfb2_sub {
font-size: 3.4vw;
letter-spacing: 0.1em;
line-height: 1.65;
padding-top: 0;
padding-bottom: 0;
}
.pd_n_hfb2_txt_plus {
font-size: 2vw;
line-height: 4vw;
padding-left: 10vw;
padding-right: 10vw;
}
.pd_n_subTtlEn {
font-size: 4.4vw;
letter-spacing: 0.05em;
font-weight: bold;
text-align: center;
margin-bottom: 4.5vw;
}
.pd_n_subTtl {
font-size: 4.4vw;
letter-spacing: 0.124em;
text-align: center;
margin-bottom: 8vw;
}
.pd_n_hfb4 {
padding-left: 10vw;
padding-right: 10vw;
margin-bottom: 22.5vw;
}
.pd_n_hfb3 {
padding-left: 10vw;
padding-right: 10vw;
position: relative;
}
.pd_n_hfb3_ttl2_img {
width: 21vw;
position: absolute;
right: 5vw;
top: -3vw;
}
.pd_n_hfb3in {
position: initial;
padding: 0;
}
.pd_n_hfb3_ttl2 {
text-align: center;
font-size: 4.4vw;
letter-spacing: 0.05em;
position: absolute;
top: -10vw;
left: 0;
right: 0;
}
.pd_n_hfb3_subTtl {
font-size: 4.4vw;
letter-spacing: 0.124em;
line-height: 1.6;
padding-top: 6vw;
}
.pd_n_hfb3_subTtl sup {
font-size: 2vw;
}
.pd_n_hfb3_notes {
font-size: 2vw;
padding-top: 2vw;
}

#pd_p .container {
background-color: #eaeaeb;
}
#pd_p .col-sm-10 {
padding: 13vw 10vw !important;
}
.p_col2Box_item_ttl_plus,
.p_col2Box_item_subTtl_plus {
font-size: 4.5vw;
letter-spacing: 0.1em;
line-height: 1.4;
margin-bottom: 5vw;
}
.p_col2Box_item_txt_plus {
font-size: 3.5vw;
letter-spacing: 0.1em;
line-height: 1.6;
margin-bottom: 5vw;
}
.p_col2Box_item_img_plus {
margin-bottom: 10vw;
}

#pd_r {
background-color: #ffffff;
padding-bottom: 25vw;
}
.pd_r_hfb_ttl {
font-size: 4vw;
}
.pd_r_hfb {
padding-top: 23vw;
padding-left: 10vw;
padding-right: 10vw;
}
.pd_r_hfb_img {
padding: 0vw 10vw 0vw;
}
.pd_r_hfb_ttl:before, .pd_r_hfb_ttl:after {
width: 26vw;
}
.pd_r_hfb_img2 {
padding: 0vw 10vw 0vw;
}
.pd_r_hfb_boxr_stpt2 {
padding: 0vw 10vw;
font-size: 2vw;
letter-spacing: 0.05em;
}
.pd_r_hfb_boxr_txt {
font-size: 3.0vw;
}
.pd_r_hfb_boxr_stpt {
font-size: 3.3vw;
}

.pd_s_box {
background-color: #f6f7fb;
padding-bottom: 22vw;
}
.s_box_notes {
padding-top: 0;
}

.pd_t_sup_box1_ttl2a,
.pd_t_sup_box1_ttl2b {
color: #333;
}

.dli-plus {
display: inline-block;
vertical-align: middle;
color: #323232;
line-height: 1;
width: 4.5vw;
height: 0.5vw;
background: currentColor;

position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -7vw;

}

.dli-plus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
}


@media screen and (min-width: 768px) {
.container img {
vertical-align: bottom;
}

.pd_c_ttl_sub {
font-size: 1vw;
}
.pd_c_ttl_sub2 {
font-size: 1.5vw;
}
.pd_c_nm3 {
font-size: 2vw;
}
.pd_c_nm3 sup {
font-size: 1.5vw;
position: relative;
top: -0.5vw;
}

#pd_b_plus {
padding-top: 0;
padding-bottom: 10%;
}
.pd_b_plus_box {
text-align: center;
}
.pd_b_plus_ttl {
font-size: 2.3vw;
font-weight: bold;
margin-bottom: 2.6vw;
}
.pd_b_plus_txt {
font-size: 1.35vw;
line-height: 2.4vw;
letter-spacing: 0.2vw;
}
.pd_b_plus_txt > div {
display: inline-block;
}
.pd_b_plus_txt > div span:nth-child(2) {
display: block;
font-size: 0.5vw;
}

#pd_c_plus {
padding-top: 5%;
padding-bottom: 7%;
background-color: #f7f8fa;
}
.pd_c_plus_ttl {
text-align: center;
font-size: 1.5vw;
font-weight: bold;
margin-bottom: 4.6vw;
}
.pd_c_plus_box1 {
position: relative;
}
.pd_c_plus_box1 img {
  width: 100%;
}
.pd_c_plus_box1_in {
width: 17vw;
position: absolute;
left: 6vw;
top: 13vw;
}
.pd_c_plus_box1_txt1 {
font-size: 1.4vw;
letter-spacing: 0.05em;
font-weight: bold;
border-bottom: 1px solid #231815;
display: inline-block;
padding-bottom: 1vw;
margin-bottom: 1.5vw;
}
.pd_c_plus_box1_txt2 {
font-size: 2.8vw;
letter-spacing: 0.03em;
margin-bottom: 2vw;
}
.pd_c_plus_box1_txt3 {
font-size: 1.5vw;
letter-spacing: 0.046em;
line-height: 2vw;
}
.pd_c_plus_box2 {
position: relative;
}
.pd_c_plus_box2 img {
width: 100%;
}
.pd_c_plus_box2_in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.pd_c_plus_box2_txts {
background-color: #ffffff;
width: 72vw;
height: 19vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pd_c_plus_box2_icon {
width: 3.7vw;
margin-bottom: 1.5vw;
}
.pd_c_plus_box2_txt1 {
font-size: 1.5vw;
letter-spacing: 0.15em;
margin-bottom: 1.5vw;
}
.pd_c_plus_box2_txt1 .txt_orange {
color: #ff9000;
}
.pd_c_plus_box2_txt2 {
font-size: 1vw;
line-height: 1.9vw;
text-align: center;
}
.pd_c_plus_box2_txt3 {
font-size: 0.6vw;
line-height: 1.5;
text-align: right;
padding-top: 0.2vw;
}
.pd_c_plus_box3{
/* padding-bottom: 6vw; */
}
.pd_c_plus_box3 img {
  width: 100%;
}
.pd_c_plus_box3 > div:first-child {
display: flex;
}
.pd_c_plus_box3 > div:first-child > picture {
width: 44vw;
}
.pd_c_plus_box3_in {
width: calc(100% - 44vw);
display: flex;
align-items: center;
background: #fff;
}
.pd_c_plus_box3_in > div {
display: flex;
flex-direction: column;
padding-left: 4vw;
}
.pd_c_plus_box3_ina {
position: absolute;
width: 20vw;
bottom: 0;
left: 38vw;
}
.pd_c_plus_box3_ina img{
width:100%;
height: auto
}
.pd_c_plus_box3_txt1 {
font-size: 1.4vw;
letter-spacing: 0.05em;
font-weight: bold;
border-bottom: 1px solid #231815;
display: inline-block;
padding-bottom: 1vw;
margin-bottom: 1.5vw;
}
.pd_c_plus_box3_txt2 {
font-size: 2.4vw;
margin-bottom: 1.5vw;
line-height: 1.7;
padding-left: 2vw;
}
.pd_c_plus_box3_txt3 {
font-size: 5vw;
margin-bottom: 1.5vw;
position: relative;
font-weight: normal;
left: 2vw;
}
.pd_c_plus_box3_txt3 > strong {
font-weight: normal;
font-size: 5.7vw;
}
.pd_c_plus_box3_txt3 sup {
position: absolute;
top: 91%;
right: 2%;
}
.pd_c_plus_box3_txt4 {
font-size: 1vw;
letter-spacing: 0.09em;
}
.pd_c_plus_box3_txt5 {
font-size: 0.7vw;
letter-spacing: 0.05em;
line-height: 1.3vw;
padding-top: 0.8vw;
}

#pd_d_plus {
padding: 10% 0 0%;
}
.pd_d_plus_box {
position: relative;
padding: 0 0 10%;
margin-left: 2vw;
margin-right: 2vw;
}
.pd_d_plus_box1_in {
position: absolute;
left: -5.4vw;
top: 8vw;
}
.pd_d_plus_box1_txt1 {
font-size: 1.7vw;
letter-spacing: 0.05em;
margin-bottom: 2.6vw;
}
.pd_d_plus_box1_txt1 strong {
font-weight: bold;
}
.pd_d_plus_box1_txt2 {
font-size: 2vw;
letter-spacing: 0.16em;
line-height: 1.6;
margin-bottom: 1vw;
}
.pd_d_plus_box1_txt3 {
font-size: 0.5vw;
letter-spacing: 0.05em;
}
.pd_d_plus_box2_in {
position: absolute;
right: -9vw;
top: 9vw;
}
.pd_d_plus_box2_img1 {
width: 30vw;
height: 27.5vw;
}
.pd_d_plus_box3_in {
position: absolute;
top: 24vw;
left: -6.4vw;
}
.pd_d_plus_box3_img1 {
width: 29vw;
}

#pd_mv {
line-height: 0vw;
}
#video-btn {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: none;
}
#video-btn::after {
position: absolute;
content: '';
display: block;
width: 6vw;
height: 6vw;
background-image: url(/wp-content/themes/mytrex/img/product/hfb-plus/icon_mv_play.png);
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#video-btn.current::after {
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_stop.png);
/* opacity: 0.1; */
transform: inherit;
-webkit-transform: inherit;
-ms-transform: inherit;
top: auto;
left: auto;
right: 2vw;
bottom: 2vw;
}
#pd_mv_rl {
line-height: 0vw;
}
#video-btn2 {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: none;
}
#video-btn2::after {
position: absolute;
content: '';
display: block;
width: 6vw;
height: 6vw;
background-image: url(/wp-content/themes/mytrex/img/product/hfb-plus/icon_mv_play.png);
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#video-btn2.current::after {
background-image: url(https://mytrex.jp/wp-content/themes/mytrex/img/product/hfb/icon_mv_stop.png);
/* opacity: 0.1; */
transform: inherit;
-webkit-transform: inherit;
-ms-transform: inherit;
top: auto;
left: auto;
right: 2vw;
bottom: 2vw;
}
.pd_b_plus_ttl {}

#pd_j {
padding: 5.5vw 0 11vw;
}
.pd_j_txtWrap_plus {
margin-bottom: 4.25vw;
}
.pd_j_ttl {
text-align: center;
font-size: 2.3vw;
}
.pd_j_subTtl {
text-align: center;
font-size: 1.6vw;
}
.pd_j_bg_plus {
background-color: #f4f5f9;
padding: 6vw !important;
min-height: 50vw;
width: 77%;
margin-left: 3%;
margin-right: 3%;
}
.j_bbl_first_plus {
position: absolute;
left: -6vw;
top: -10vw;
}
.j_bbl_first_plus_txt{
position: absolute;
left: 4vw;
bottom: -10.5vw;
font-size: 0.6vw;
}

.pd_j_bg_plus > div:last-child {
float: right;
}
.j_bbl_second_plus {
width: 8vw;
position: absolute;
top: 27vw;
right: 6vw;
}
.j_bbl_third_plus {
width: 9vw;
position: absolute;
top: 33vw;
right: 16vw;
}
.j_point1_ttl {
font-size: 1.6vw;
color:#406ab4;
}
.j_point1_txt {
font-size: 1vw;
}
.j_point1_dt {
font-size: 1vw;
font-weight: bold;
margin-bottom: 1vw;
}
.j_point1_dd {
display: flex;
justify-content: space-between;
}
.j_point1_dd > div {
width: 47.5%;
}
.j_point1_dd_img {
margin-bottom: 1.5vw;
}
.j_point1_dd_txt > span {
font-size: 0.8vw;
letter-spacing: 0.04em;
}
.j_point1_dd_txt1 {
font-weight: bold;
display: inline-block;
border: 1px solid #231815;
padding: 0.2vw 0.8vw;
margin-bottom: 0.8vw;
}
.j_point1_dd_txt2 {
display: block;
font-weight: bold;
margin-bottom: 0.8vw;
}
.j_point1_dd > div:last-child .j_point1_dd_txt2 {
color: #1581d9;
}
.j_point1_dd_txt3 {
display: block;
letter-spacing: 0.1em !important;
line-height: 1.2vw;
}

.pd_i_box {
padding-top: 0;
padding-bottom: 0;
}
.i_box_ttl {
font-size: 1.56vw;
letter-spacing: 0.09em;
padding-bottom: 6vw;
}
.i_box_ttl > span {
border-bottom: 1px solid #000000;
}
.i_box_txtWrap {
width: 84%;
padding-top: 2.5vw;
margin-left: 12%;
}

.pd_f_ttl {
font-size: 1.5vw;
letter-spacing: 0.044em;
}
#pd_f .row {
background-color: #f4f5f9;
}
#pd_f .row .col-sm-8 {
background-color: #ffffff;
}
.pd_f_box {
width: auto;
margin-left: 5vw;
margin-right: 5vw;
}
.pd_f_box_item {
width: 10vw;
}
.f_box_item_txt {
font-size: 1.0vw;
letter-spacing: 0.06em;
line-height: 1.4;
}

.pd_head_plus {
text-align: center;
margin: 5vw 0vw;
}
.pd_head_plus_img img{
width:100%;
height: auto;
}
.pd_head_plus_img {
text-align: center;
margin: 0 auto;
width: 45vw;
padding-bottom: 5vw;
}
.pd_head_plus2 {
text-align: center;
margin: 5vw 0vw;
}
.pd_head-p_plus {
font-size: 1.4vw;
letter-spacing: 0.05em;
font-weight: bold;
border-bottom: 1px solid #000000;
display: inline-block;
padding-bottom: 0.5vw;
margin-bottom: 2vw;
}
.pd_head-en_plus {
font-size: 1.7vw;
letter-spacing: 0.05em;
font-weight: bold;
margin-bottom: 2.5vw;
}
.pd_head-lead_plus {
font-size: 2vw;
letter-spacing: 0.08em;
margin-bottom: 2.5vw;
}
.pd_head-txt_plus {
font-size: 1vw;
letter-spacing: 0.05em;
line-height: 1.6vw;
margin-bottom: 1vw;
}
.pd_head-attention_plus {
font-size: 0.6vw;
letter-spacing: 0.02em;
}

.pd_m_boxWrap {
margin-bottom: 7vw;
width: 78%;
}
.pd_m_box {
width: 48%;
}

.k_img_item {
width: 47%;
}
.k_first_box, .k_second_box {
min-height: 17vw;
}
.k_first_box_ttl, .k_second_box_ttl {
font-size: 1.4vw;
letter-spacing: 0.2em;
}
.k_first_box_img, .k_second_box_img {
width: 15vw;
}
.k_first_insp_img {
margin-top: -3vw !important;
}
.k_second_box_img {
right: 0;
}
.k_second_insp_img {
padding-top: 2vw;
}
.pd_k_img {
width: 70%;
}
.k_first_box_ttl:before, .k_first_box_ttl:after, .k_second_box_ttl:before, .k_second_box_ttl:after {
background-color: #d9e5da;
}
.k_first_box_txt_bottom, .k_second_box_txt_bottom {
font-weight: bold;
}
.k_img_notes {
width: 70%;
}

#pd_l {
padding: 0 0;
}
.pd_l_bg {
width: 66.66666667%;
margin-left: auto;
margin-right: auto;
}
.l_first_ttl_plus {
color: #7abfca;
font-size: 1.8vw;
letter-spacing: 0.05em;
position: absolute;
top: -41vw;
left: -5vw;
}
.l_first_subTtl_plus {
font-size: 1.7vw;
letter-spacing: 0.08em;
line-height: 1.7;
position: absolute;
left: -5vw;
top: -36.5vw;
}
.l_first_txt_plus {
font-size: 0.97vw;
letter-spacing: 0.03em;
line-height: 1.8vw;
width: 16vw;
position: absolute;
right: 5vw;
top: -11vw;
}
.l_second_pc_plus {
font-size: 0.6vw;
padding-top: 1vw;
line-height: 1.4vw;
}
.l_first_icon_plus {
position: absolute;
width: 6.6vw;
left: -5vw;
top: -28vw;
}

.pd_o_txtWrap {
text-align: center;
}
.o_ttl {
font-size: 1.7vw;
margin-bottom: 2.5vw;
}
.o_subTtl {
font-size: 1.8vw;
padding-bottom: 6vw;
}
.o_subTtl > div {
display: inline-block;
text-align: right;
}
.o_subTtl span:nth-child(2) {
display: block;
font-size: 0.4vw !important;
letter-spacing: 0.04em;
}
.o_img_bg {
background-color: #f4f5f9;
margin-bottom: 8vw;
}
.o_img_bg .pd_o_txtWrap {
width: 44vw;
padding-left: 5vw;
padding-right: 5vw;
background-color: #ffffff;
}
.o_txt {
font-size: 1.2vw;
letter-spacing: 0.07em;
margin-bottom: 6vw;
}
.o_box_photo_pc {
width: 100%;
margin-bottom: 0;
}
.pd_o_leftBox {
padding-bottom: 0;
}
.pd_o_rightBox {
padding-bottom: 0;
}
.o_box_txt {
line-height: 1.9;
padding-left: 0;
margin-left: 6vw;
margin-right: 6vw;
}

.m_box_ttl {
font-size: 1vw;
letter-spacing: 0.05em;
}
.m_box_ttl_deco {
font-weight: normal;
}
.m_box_notes {
font-size: 0.7vw;
line-height: 1.2;;
}

#pd_n {
padding: 0 0 0;
}
.pd_n_ttl {
letter-spacing: 0.05em;
font-weight: bold;
}
.pd_n_txt {
font-size: 1.25vw;
letter-spacing: 0.27em;
}
.pd_n_hfb2 {
padding-right: 0;
}
.pd_n_hfb_img {
padding-left: 2vw;
}
.pd_n_hfb2_ttl {
font-size: 1.1vw;
padding-bottom: 1.5vw;
}
.pd_n_hfb2_ttl_plus {
font-size: 0.6vw;
padding-bottom: 1vw;
}
.pd_n_hfb2_sub {
line-height: 2.0vw;
}
.pd_n_hfb3 {
position: relative;
bottom: initial;
}
.pd_n_ttlArea {
position: initial;
padding-bottom: 7vw;
}
.pd_n_hfb2 {
position: initial;
}
.pd_n_bg_top {
background: rgb(241,244,246);
background: linear-gradient(0deg, rgba(241,244,246,1) 0%, rgba(243,245,247,1) 50%, rgba(245,246,248,1) 100%);
padding-bottom: 10vw;
}
.pd_n_bottom {
position: initial;
padding-top: 10%;
padding-bottom: 10%;
}
.pd_n_hfb_img {
position: initial;
}
.pd_n_hfb2_txt_plus {
font-size: 0.6vw;
line-height: 1.6vw;
}

.pd_n_subTtl {
text-align: center;
font-size: 1.6vw;
margin-bottom: 2.6vw;
}
.pd_n_hfb4 {
width: 90%;
margin: 0 auto 1.5vw;
position: relative;
}
.pd_n_hfb3in {
width: auto;
text-align: left;
top: 6vw;
right: 4vw;
}
.pd_n_hfb3_ttl2 {
font-size: 1.8vw;
letter-spacing: 0.09em;
}
.pd_n_hfb3_subTtl {
font-size: 1.4vw;
letter-spacing: 0.124em;
line-height: 1.6;
}
.pd_n_hfb3_notes {
text-align: right;
font-size: 0.8vw;
padding-top: 0.5vw;
}
.pd_n_hfb3_ttl2_img {
padding: 0;
}
.pd_n_hfb3_ttl2_img img {
width: 13.69vw;
}
.pd_n_hfb2l  {
width: 64%;
}
.pd_n_hfb2r {
width: 36%;
}
.pd_n_hfb2_ttl_sub {
padding-bottom: 2.0vw;
}

#pd_p {
padding-bottom: 0%;
}
#pd_p2 {
padding-bottom: 10%;
}
.pd_p_bg {
padding-bottom: 10%;
}
.p_col2Box_item_ttl_plus {
text-align: center;
font-size: 1.7vw;
letter-spacing: 0.09em;
line-height: 2;
margin-bottom: 4.5vw;
}
.pd_p_col2Box_item_plus {
display: flex;
justify-content: center;
}
.pd_p_col2Box_item_plus:nth-child(2) {
flex-direction: row-reverse;
}
.pd_p_col2Box_item_plus:nth-child(1) > div:first-child {
margin-right: 2vw;
}
.pd_p_col2Box_item_plus:nth-child(2) > div:first-child {
margin-left: 2vw;
}
.p_col2Box_item_txt_plus {
font-size: 1vw;
letter-spacing: 0.09em;
line-height: 1.9;
width: 31vw;
}
.p_col2Box_item_img_plus {
width: 31vw;
}
.p_col2Box_item_subTtl_plus {
font-size: 1.4vw;
letter-spacing: 0.13em;
line-height: 1.6;
padding-top: 2.5vw;
margin-bottom: 1vw;
}

.pd_r_hfb_boxr_ttl {
padding-top: 1.5vw;
line-height: 2.2vw;
}
.pd_r_hfb_boxr_txt {
font-size: 0.9vw;
line-height: 1.5vw;
width: 18vw;
}
.pd_r_hfb_boxr_txt2 {
font-size: 0.7vw;
line-height: 1.6;
}
.pd_r_hfb_boxr_stpt {
font-size: 1vw;
}

.s_box_col2_indent {
margin-left: 1em;
text-indent: -1em;
}

#pd_t {
padding: 3% 0 0;
background: #f1f5f7;
}
.pd_t_area {
background-color: #ffffff;
padding: 5.5vw 12vw 6.5vw;
}
.pd_t_sup_box1_ttl2a,
.pd_t_sup_box1_ttl2b {
color: #333;
}

.dli-plus {
display: inline-block;
vertical-align: middle;
color: #323232;
line-height: 1;
width: 1.5vw;
height: 0.2vw;
background: currentColor;

position: absolute;
right: -1%;
top: 51%;
}

.dli-plus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
}

@media screen and (max-width: 767px) {
#pd_rlcm{
background: #edf0f3a3;
padding: 15vw 0vw;
}
.pd_rlcm_ttl_sub{
font-size: 5.5vw;
letter-spacing: 0.5vw;
padding-bottom: 4vw;
text-align: center;
font-weight: normal;
}
.pd_rlcm_ttl{
width: 70vw;
margin: 0 auto;
padding-bottom: 7vw;
}
.pd_rlcm_ttl2{
font-size: 3.2vw;
line-height: 1.7;
letter-spacing: .4vw;
padding-bottom: 5vw;
text-align: center;
}
.pd_rlcm_txt{
font-size: 3.3vw;
line-height: 1.8;
letter-spacing: .1vw;
padding: 0 8vw 2vw;
font-weight: 700;
}
.pd_rlcm_txt2{
font-size: 3.3vw;
line-height: 1.8;
letter-spacing: .2vw;
padding: 0vw 8vw 4vw;
}
.pd_rlcm_img{
padding: 0vw 8vw 4vw;
}
.pd_rlcm_img img{
width: 100%;
}
.pd_rlcm_img2{
padding: 0vw 8vw 4vw;
}
.pd_rlcm_img2 img{
width: 100%;
}
}
@media screen and (min-width: 768px) {
.pdct_st_item_info2 + .pdct_st_item_info3{
margin: 2vw 8vw 0vw !important;
padding: 0 !important;
}
#pd_rlcm{
background: #edf0f3a3;
padding: 5vw 10vw 8vw;
}
.pd_rlcm_ttl_sub{
font-size: 1.4vw;
letter-spacing: .2vw;
padding-bottom: 1vw;
font-weight: normal;
text-align: center;
}
.pd_rlcm_ttl{
width: 23vw;
margin: 0 auto;
padding-bottom: 5vw;
}
.pd_rlcm_ttl2{
font-size: 1.7vw;
line-height: 1.6;
letter-spacing: 0.2vw;
padding-bottom: 2vw;
}
.pd_rlcm_txt{
font-size: 1.0vw;
line-height: 1.8;
letter-spacing: .01vw;
padding-right: 2.2vw;
font-weight: 700;
padding-bottom: 1vw;
}
.pd_rlcm_txt2{
font-size: 1.0vw;
line-height: 1.9;
letter-spacing: .03vw;
padding-right: 2.2vw;
}
.pd_rlcm_img{
padding-left: 0vw;
padding-bottom: 0.2vw;
}
.pd_rlcm_img img{
width: 100%;
}
.pd_rlcm_img2{
padding-left: 0vw;
}
.pd_rlcm_img2 img{
width: 100%;
}
}

@media screen and (min-width: 768px) {
.add_hfbp_a{
padding:10vw 5vw 0 5vw;
}
.add_hfbp_a_ttl_box{
margin:0 auto;
}
.add_hfbp_a_ttl_box1{
float:left;
width:37%;
text-align: right;
}
.add_hfbp_a_ttl_box1 img{
width: 25vw;
height: auto;
padding: 1vw 4vw 1vw 0vw;
}
.add_hfbp_a_ttl_box2{
float: left;
width: 63%;
padding: 0vw 1vw;
font-size: 1.3vw;
line-height: 2;
letter-spacing: .0vw;
}
.add_hfbp_a_ttl_box3{
padding: 4vw 2vw 0vw;
width: 39vw;
margin: 0 auto;
}
.add_hfbp_a_ttl_box3 img{
width:100%;
height:auto;
}
.add_hfbp_a_line{
border-right: solid #0000004a 1px;
height: 3vw;
width: 1vw;
margin: 0vw auto 2vw;
margin-top: 3vw !important;
}
.add_hfbp_a_box0{
padding: 0 10vw;
}
.add_hfbp_a_box1{
padding: 3vw 2vw;
background: linear-gradient(360deg,#fff,#eaeff5 50%);
}
.add_hfbp_a_box1a{
float: left;
width: 49%;
background: #ffff;
padding: 1.3vw 1.5vw;
margin-right: 1%;
margin-bottom: 0.3vw;
font-size: 1.2vw;
letter-spacing: 0vw;
}
.add_hfbp_a_box1b{
float: left;
width: 49%;
background: #ffff;
padding: 1.3vw 1.5vw;
margin-left: 1%;
margin-bottom: 1.1vw;
font-size: 1.2vw;
letter-spacing: 0vw;
}
.add_hfbp_a_box2{
position:relative;
}
.add_hfbp_a_box2 img {
width:100%;
height:auto;
}
.add_hfbp_a_box2a{
position:absolute;
top:10vw;
left:30vw;
padding:1vw;
}
.add_hfbp_a_box2a_ttl{
font-size: 2.0vw;
letter-spacing: 0.5vw;
padding-bottom: 2.2vw;
}
.add_hfbp_a_box2a_txt{
font-size: 1.5vw;
line-height: 1.8;
letter-spacing: 0.08vw;
}
.add_hfbp_a_box3{
position: relative;
padding: 2vw 4vw 0vw;
}
.add_hfbp_a_box3 img {
width:100%;
height:auto;
}
.add_hfbp_a_box3a{
position: absolute;
top: 14vw;
left: 7vw;
padding: 1vw;
}
.add_hfbp_a_box3a_ttl{
font-size: 2.3vw;
color: #5995cf;
letter-spacing: 0.3vw;
text-indent: -1.2vw;
}
.add_hfbp_a_box3a_txt{
font-size: 1.8vw;
line-height: 1.8;
letter-spacing: 0.2vw;
padding-bottom: 1vw;
}
.add_hfbp_d_box{
background:#edf0f3a3;
padding:5vw 5vw;
text-align:center;
}
.add_hfbp_d_box_ttl1{
font-size: 1.4vw;
letter-spacing: .1vw;
padding-bottom: 1vw;
}
.add_hfbp_d_box_ttl2{
font-size: 1.65vw;
letter-spacing: .2vw;
padding-bottom: 3vw;
}
.add_hfbp_d_box_img{

}
.add_hfbp_d_box_img img{
width:100%;
height:auto;
}
#pd_add_b{
padding:5% 0vw;
}
.pd_add_b{
}
.pd_add_b_ttl{
font-size: 1.85vw;
letter-spacing: .05vw;
text-align: center;
padding-bottom: 2.3vw;
}
.pd_add_b_box{

}
.pd_add_b_box_img{
float: left;
width: 44%;
}
.pd_add_b_box_img img{
width:100%;
height:100%;
}
.pd_add_b_box_txt{
float: left;
width: 56%;
padding: 3.2vw 3vw;
position: relative;
background: #edf0f3a3;
}
.pd_add_b_box_txt1{
font-size: 1vw;
line-height: 1.9;
width: 25vw;
}
.pd_add_b_box_txt2{
position: absolute;
bottom: 0;
right: 1vw;
width: 9vw;
}
.pd_add_b_box_txt2 img{
width:100%;
height:auto;
}
.pd_add_b_box2{
width: 2.5vw;
margin: 0 auto;
padding-top: 5vw;
}
.pd_add_b_box2 img{
width:100%;
height:auto;
}
.pd_add_b_box3{
padding:5vw 0vw;
text-align: center;
}
.pd_add_b_box3_sub{
font-size: 1.8vw;
letter-spacing: .25vw;
padding-bottom: 3vw;
}
.pd_add_b_box3_ttl1{
color: #366fbc;
font-size: 2.8vw;
letter-spacing: .05vw;
padding-bottom: 2.5vw;
}
.pd_add_b_box3_ttl2{
color: #366fbc;
font-size: 1.2vw;
letter-spacing: .3vw;
padding-bottom: 1vw;
}
.add_hfbp_f{
padding:10% 8vw;
}
.add_hfbp_f_ttl {
position: relative;
display: inline-block;
text-align: center;
max-width: 100%;
color: #000;
background: #edf0f3a3;
border-radius: 0;
width: 100%;
padding: 1.5vw;
font-size: 2.0vw;
letter-spacing: 0.3vw;
}
.add_hfbp_f_ttl:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #edf0f3a3;
}
.add_hfbp_f_ttl2{
padding: 4vw 0 4vw;
text-align: center;
font-size: 1.4vw;
color: #2f2c2c;
}
.add_hfbp_f_ttl2_img img{
width: 16vw;
padding-right:1vw;
}
.add_hfbp_f_box{
padding:0vw;
}
.add_hfbp_f_box_img{
float: left;
width: 44%;
padding-right: 4vw;
}
.add_hfbp_f_box_txt{
float:left;
width:56%;
position:relative;
background: #edf0f3a3 !important;
}
.add_hfbp_f_box_txt1{
padding: 2vw 2vw;
font-size: 1.05vw;
line-height: 1.6;
width: 22.5vw;
letter-spacing: 0.05vw;
}
.add_hfbp_f_box_txt2{
padding: 0.75vw;
background: #fff;
font-size: 0.74vw;
line-height: 1.6;
letter-spacing: 0;
}
.add_hfbp_f_box_txt_img{
position: absolute;
width: 16vw;
top: -2vw;
right: -2vw;
}
.add_hfbp_f_box_txt_img img{
width:100%;
height:auto;
}
.add_hfbp_f_box_img_txt{
color: #e2a754;
font-size: 1.3vw;
line-height: 1.8;
text-align: center;
letter-spacing: -.04vw;
padding-top: 2.5vw;
}
.pd_t_sup_box1_img{
padding: 5vw 4vw 0vw;
background: #fff;
line-height: 0;
}
.pd_t_sup_box1_img img{
width:100%;
height:auto;
}
}
/* sp */
@media screen and (max-width: 767px) {
.add_hfbp_a{
padding:5vw 5vw;
}
.add_hfbp_a_ttl_box{
margin:0 auto;
}
.add_hfbp_a_ttl_box1{
width: 32vw;
margin: 0 auto;
padding-top: 2vw;
margin-bottom: 6vw;
}
.add_hfbp_a_ttl_box1 img{
width: 100%;
height: auto;
}
.add_hfbp_a_ttl_box2{
text-align: center;
padding: 0 1vw 5vw;
font-size: 3.3vw;
line-height: 2;
letter-spacing: 0vw;
}
.add_hfbp_a_ttl_box3{
padding: 4vw 2vw 0vw;
width: 75vw;
margin: 0 auto;
}
.add_hfbp_a_ttl_box3 img{
width:100%;
height:auto;
}
.add_hfbp_a_line{
border-right: solid #0000004a 1px;
height: 9vw;
width: 1vw;
margin: 0 auto 7vw;
margin-top: 7vw !important;
}
.add_hfbp_a_box0{
margin-left: 12vw;
background: #eeeff0;
padding-top: 8vw;
}
.add_hfbp_a_box1{
padding: 0vw 7vw 6vw 5vw;
}
.add_hfbp_a_box1a{
width: 100%;
background: #ffff;
padding: 2.5vw 3.5vw;
margin-bottom: 3.2vw;
font-size: 3.0vw;
letter-spacing: 0.4vw;
}
.add_hfbp_a_box1b{
width: 100%;
background: #ffff;
padding: 2.5vw 3.5vw;
margin-bottom: 3.2vw;
font-size: 3.0vw;
letter-spacing: 0.4vw;
}
.add_hfbp_a_box2{
position: relative;
left: -12vw;
}
.add_hfbp_a_box2 img {
width:100%;
height:auto;
}
.add_hfbp_a_box2a{
position: absolute;
top: 6vw;
left: 44vw;
padding: 5vw 4vw 5vw 5vw;
}
.add_hfbp_a_box2a_ttl{
font-size: 5.5vw;
letter-spacing: .01vw;
padding-bottom: 4.0vw;
line-height: 1.5;
}
.add_hfbp_a_box2a_txt{
font-size: 3.2vw;
line-height: 1.6;
letter-spacing: 0.2vw;
}
.add_hfbp_a_box3{
margin-left: 12vw;
background: #eeeff0;
padding-top: 17vw;
padding-bottom: 18vw;
}
.add_hfbp_a_box3 img {
width: 100%;
height: auto;
padding-left: 9vw;
}
.add_hfbp_a_box3a{
padding: 6vw 6vw 0vw 9vw;
}
.add_hfbp_a_box3a_ttl{
font-size: 5.8vw;
color: #5995cf;
letter-spacing: .3vw;
}
.add_hfbp_a_box3a_txt{
font-size: 3.8vw;
line-height: 1.8;
letter-spacing: .2vw;
padding-bottom: 3vw;
}
.add_hfbp_d_box{
padding:10vw 5vw;
text-align:center;
}
.add_hfbp_d_box_ttl1{
font-size: 4vw;
letter-spacing: .1vw;
padding-bottom: 10vw;
}
.add_hfbp_d_box_ttl2{
font-size: 5.5vw;
letter-spacing: .2vw;
padding: 8vw 0vw 0vw;
line-height: 1.8;
}
.add_hfbp_d_box_img{

}
.add_hfbp_d_box_img img{
width:100%;
height:auto;
}
#pd_add_b{
padding:0 0vw 15vw;
}
.pd_add_b{
background: #f1f1f2b3;
padding: 14vw 0vw 0vw;
}
.pd_add_b_icon{
position: relative;
top: 7vw;
width: 10vw;
margin: 0 auto;
}
.pd_add_b_ttl{
font-size: 4.8vw;
letter-spacing: .2vw;
text-align: center;
padding-bottom: 5.0vw;
line-height: 1.7;
}
.pd_add_b_box{

}
.pd_add_b_box_img{
width: 60%;
margin: 0 auto;
}
.pd_add_b_box_img img{
width:100%;
height:100%;
}
.pd_add_b_box_txt{
padding: 6vw 10vw;
}
.pd_add_b_box_txt1{
font-size: 3.2vw;
line-height: 1.9;
text-align: center;
}
.pd_add_b_box_txt2{
width: 100%;
}
.pd_add_b_box_txt2 img{
width:100%;
height:auto;
}
.pd_add_b_box2{
width: 2.5vw;
margin: 0 auto;
padding-top: 5vw;
}
.pd_add_b_box2 img{
width:100%;
height:auto;
}
.pd_add_b_box3{
padding:0vw 0vw;
text-align: center;
}
.pd_add_b_box3_sub{
font-size: 5.5vw;
letter-spacing: .25vw;
padding-bottom: 8vw;
}
.pd_add_b_box3_ttl1{
color: #366fbc;
font-size: 2.8vw;
letter-spacing: .05vw;
padding-bottom: 2.5vw;
}
.pd_add_b_box3_ttl2{
color: #366fbc;
font-size: 1.2vw;
letter-spacing: .3vw;
padding-bottom: 1vw;
}
.add_hfbp_f{
padding: 15vw 8vw 0vw;
}
.add_hfbp_f_ttl {
position: relative;
display: inline-block;
text-align: center;
max-width: 100%;
color: #000;
background: #edf0f3a3;
border-radius: 0;
width: 100%;
padding: 3.0vw;
font-size: 4.5vw;
letter-spacing: 1.3vw;
}
.add_hfbp_f_ttl:before {
content: "";
position: absolute;
top: 90%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #edf0f3a3;
}
.add_hfbp_f_ttl2{
padding: 4vw 0 2vw;
text-align: center;
font-size: 3.2vw;
color: #2f2c2c;
}
.add_hfbp_f_ttl2_img img{
width: 38vw;
padding-top: 4vw;
display: block;
margin: 0 auto 4vw;
}
.add_hfbp_f_box{
padding:0vw;
}
.add_hfbp_f_box_img{
padding: 0vw 6vw 9vw;
}
.add_hfbp_f_box_txt{
position:relative;
background: #edf0f3a3 !important;
}
.add_hfbp_f_box_txt1{
padding: 5vw;
font-size: 2.5vw;
line-height: 1.7;
width: 62%;
letter-spacing: .2vw;
}
.add_hfbp_f_box_txt2{
padding: 2.5vw 0vw;
background: #fff;
font-size: 1.8vw;
line-height: 1.6;
letter-spacing: 0;
}
.add_hfbp_f_box_txt_img{
position: absolute;
width: 43%;
top: -2vw;
right: -2vw;
}
.add_hfbp_f_box_txt_img img{
width:100%;
height:auto;
}
.add_hfbp_f_box_img_txt{
color: #e2a754;
font-size: 3.5vw;
line-height: 1.8;
text-align: center;
letter-spacing: 0.02vw;
padding-top: 3.5vw;
}
.pd_t_sup_box1_img{
padding: 5vw 4vw 0vw;
background: #fff;
line-height: 0;
}
.pd_t_sup_box1_img img{
width:100%;
height:auto;
}
}

@media screen and (max-width: 767px) {
.pd_mv_ttl{
text-align: center;
padding: 14vw 0 6vw;
}
.pd_mv_ttl img{
width: 60vw;
height: auto;
}
.pd_mv_sub{
font-size: 3.2vw;
letter-spacing: .1vw;
padding: 3.5vw 0 0;
line-height: 1;
}
.btn-hfbp-share{
padding: 3vw 0vw 0vw;
/*position: absolute;
right: 17vw;*/
}
.btn-hfbp-twitter {
width: 4.5vw !important;
display: inline-block;
margin-right: 1vw;
}
.btn-hfbp-twitter img {
width:100%;
height: auto;
}
.btn-hfbp-facebook {
width: 4.5vw !important;
display: inline-block;
margin-right: 1vw;
}
.btn-hfbp-facebook img {
width:100%;
height: auto;
}
.btn-hfbp-line {
width: 4.5vw !important;
display: inline-block;
}
.btn-hfbp-line img {
width:100%;
height: auto;
}
}
@media screen and (min-width: 768px) {
.pd_mv_ttl{
text-align: center;
padding: 8vw 0vw 3vw;
}
.pd_mv_ttl img{
width: 25vw;
height: auto;
}
.pd_mv_sub{
font-size: 1.2vw;
letter-spacing: 0.05vw;
padding: 1.5vw 0vw 0vw;
line-height: 1;
}
.pd_mv_vd_bd{
background: #edf0f3a3;
}
.pd_mv_vd{
width:70vw;
margin:0 auto;
}
.btn-hfbp-share{
position: absolute;
right: 17vw;
top: 8.5vw;
}
.btn-hfbp-twitter {
width: 1.5vw !important;
display: inline-block;
margin-right: 0.5vw;
}
.btn-hfbp-twitter img {
width:100%;
height: auto;
}
.btn-hfbp-facebook {
width: 1.5vw !important;
display: inline-block;
margin-right: 0.5vw;
}
.btn-hfbp-facebook img {
width:100%;
height: auto;
}
.btn-hfbp-line {
display: none;
}
}


@media screen and (max-width: 767px) {
.multipletab{
  width:100%;
  margin:0 auto;
  background: unset;
  overflow:hidden;
  position:relative;
}
.tab-buttons{
  display:inline-block;
  width:100%;
	padding-top: 5vw;
}
.tab-buttons>span{
  display:block;
  float:left;
  cursor:pointer;
  color:#666;
  background:#ddd;
font-size: 2.2vw;
letter-spacing: .1vw;
padding: 0 2vw;
border-radius: .5vw .5vw 0 0;
line-height: 3 !important;
margin-right: 0.2vw;
}
.tab-buttons>span.active{
background: #ffffff61;
color: #0000007d;
position: relative;
font-size: 2.5vw;
letter-spacing: .1vw;
padding: 0 2vw;
border-radius: .5vw .5vw 0 0;
line-height: 3 !important;
margin-right: 0.2vw;
}
.tab-content{
position:relative;
top: -1vw;
}
.tab-content>div{
  position:absolute;
  color:#666;
  font-family:'pt sans',sans-serif;
	width: 100%
}
.tab-nav{
  opacity:0;
  transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
}
.multipletab:hover .tab-nav{
  opacity:1;
}
.tab-nav>span{
  position:absolute;
  top:50%;
  cursor:pointer;
  display:block;
  height:35px;
  width:35px;
}
.tab-nav>span.next{
  right:10px;
  background-position:5px;
 background: #222222;
}
.tab-nav>span.prev{
  left:10px;
  background-position:5px;
 background: #222222;
}
.nav_icon{
font-size: 3vw;
color: #fff;
padding: 2.5vw 2vw 2.5vw 2vw;
line-height: 1;
}
}
@media screen and (min-width: 768px) {
.multipletab{
  width:70%;
  margin:0 auto;
  background: unset;
  overflow:hidden;
  position:relative;
}
.tab-buttons{
  display:inline-block;
  width:100%;
	padding-top: 5vw;
}
.tab-buttons>span{
display:block;
float:left;
cursor:pointer;
color:#666;
background:#ddd;
font-size: 0.8vw;
letter-spacing: .1vw;
padding: 0vw 1vw;
border-radius: 0.5vw 0.5vw 0 0;
line-height: 3 !important;
margin-right: 0.2vw;
}
.tab-buttons>span.active{
background: #ffffff61;
color: #0000007d;
position: relative;
font-size: 0.8vw;
letter-spacing: .1vw;
padding: 0vw 1vw;
border-radius: 0.5vw 0.5vw 0 0;
margin-right: 0.2vw;
}
.tab-content{
position:relative;
}
.tab-content>div{
  position:absolute;
  color:#666;
  font-family:'pt sans',sans-serif;
}
.tab-nav{
  opacity:0;
  transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
}
.multipletab:hover .tab-nav{
  opacity:1;
}
.tab-nav>span{
  position:absolute;
  top:50%;
  cursor:pointer;
  display:block;
  height:35px;
  width:35px;
}
.tab-nav>span.next{
  right:10px;
  background-position:5px;
 background: #222222;
}
.tab-nav>span.prev{
  left:10px;
  background-position:5px;
 background: #222222;
}
.nav_icon{
font-size: 1vw;
color: #fff;
padding: 1.2vw 1vw 1.2vw 0.8vw;
}
}

/* 多言語対応(フランス語,英語) */
font + br {
	display: none;
}
@media screen and (min-width: 768px) {
  html:lang(en) .k_first_box_txt_bottom,
  html:lang(en) .k_second_box_txt_bottom {
    width: 11vw;
  }
}
@media screen and (max-width: 767px) {
  html:lang(en) .j_point1_ttl {
    font-size: 5.5vw;
  }
  html:lang(en) .j_point1_dd_txt2 {
    line-height: 1;
  }
  html:lang(en) .k_first_box_txt_bottom {
    width: 70vw;
  }
  html:lang(en) .k_second_box_txt_bottom {
    width: 50vw;
  }
}

/* 改修 */
@media screen and (max-width: 767px) {
  #pd_rlcm {
    padding: 10vw 0;
  }
  .pd_b_plus_box01 {
    display: flex;
    justify-content: center;
    font-size: 3.2vw;
    line-height: 1.79;
  }
  .pd_b_plus_img img {
    height: 30vw;
  }
  .pd_b_plus_img + div {
    padding-top: 4vw;
    margin-left: 3vw;
  }
  .add_hfbp_a_box2a {
    top: 0;
  }
  .add_hfbp_a_box2a_ttl {
    font-size: 5.0vw;
    line-height: 1.75;
    letter-spacing: inherit;
  }
  .pd_i_box {
    padding-bottom: 0;
  }
  .i_box_ttl {
    padding-bottom: 0;
  }
  .pd_j_txtWrap_plus {
    background-color: #fff;
  }
  .pd_j_txtWrap_plus:after {
    background: #f1f1f2;
  }
  .pd_j_ttl {
    font-weight: normal;
  }
  .pd_j_ttl>span {
    font-weight: bold;
  }
  .pd_c_plus_box2_txts {
    position: relative;
  }
  .pd_c_plus_box2_ttl1 {
    margin-bottom: 0;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    position: absolute;
    left: 9vw;
    top: 10vw;
    font-size: 7.7vw;
    font-weight: normal;
    /* letter-spacing: .20em; */
  }
  .pd_c_plus_box2_txts {
    width: 85vw;
    height: 143vw;
    padding: 10vw 8vw 10vw 26vw;
    align-items: inherit;
    justify-content: inherit;
  }
  .pd_c_plus_box2_txt2 {
    padding: 0;
    letter-spacing: inherit;
    line-height: 1.7;
  }
  .pd_c_plus_box2_txt1 {
    font-size: 4vw;
    padding-bottom: 4vw;
    border-bottom: 1px solid #000;
  }
  .pd_c_plus_box3 {
    margin-top: -21vw !important;
  }
  .pd_c_plus_box3 picture img {
    width: 74.6vw;
  }
  .pd_c_plus_box3_in {
    left: 25vw;
    top: inherit;
    bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  #pd_rlcm {
    padding: 5vw 10vw 5vw;
    margin-bottom: 4.5vw;
  }
  .add_hfbp_a {
    padding: 0 5vw 0;
  }
  .add_hfbp_a_ttl_box1 {
    width: 13vw;
    text-align: left;
    padding-top: 0.5vw;
  }
  .add_hfbp_a_ttl_box2 {
    padding-top: 0.5vw;
  }
  .add_hfbp_a_ttl_box1 > div {
    font-size: 1.25vw;
    line-height: 2;
  }
  .add_hfbp_a_ttl_box2 {
    width: auto;
    font-size: 0.9vw;
  }
  .add_hfbp_a_ttl_box {
    display: flex;
    justify-content: center;
  }
  .add_hfbp_a_ttl_box2 {
    border-left: 1px solid #000000;
    padding-left: 2.5vw;
  }
  .add_hfbp_a_ttl_box3 {
    padding: 4vw 0 0;
    width: 34vw;
  }
  .add_hfbp_a_ttl_box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .add_hfbp_a_ttl_box1 img {
    padding-right: 2.5vw;
  }
  .pd_b_plus_txt > div {
    display: block;
  }
  .pd_b_plus_box01 {
    display: flex;
    justify-content: center;
    text-align: left;
  }
  .pd_b_plus_txt {
    margin-left: 2vw;
  }
  .add_hfbp_a_box2a_ttl {
    line-height: 1.6;
    padding-bottom: 2vw;
  }
  .add_hfbp_a_box2a {
    top: 4vw;
    text-align: center;
  }
  .add_hfbp_a_box2a {
    left: 25vw;
  }
  .add_hfbp_a_box2a_txt {
    font-size: 0.8vw;
  }
  .add_hfbp_a_box3 {
    margin-bottom: 12.5vw;
  }
  .i_box_ttl {
    font-size: 1.9vw;
  }
  .pd_head_plus {
    margin-bottom: 6.5vw;
  }
  #pd_mv_rl {
    margin-bottom: 9vw;
  }
  .pd_b_plus_txt {
    font-size: 1.25vw;
    line-height: 1.7;
    letter-spacing: .3vw;
  }
  .pd_b_plus_img img {
    height: 14vw;
  }
}

/* 追加1 */
@media screen and (min-width: 768px) {
  .pd_j_bg_plus {
    margin-bottom: 9vw;
  }
	.hfbe_h_box2e {
		position: relative;
    margin-left: 3.5%;
    margin-right: 3.5%;
	}
	.hfbe_h_box2e_1 {
    width: 35vw;
    position: absolute;
    left: 2.9vw;
    top: 9.5vw;
	}
	.hfbe_h_box2e_2 {
		width: 35vw;
    position: absolute;
    left: 39.7vw;
    top: 9.5vw;
	}
}

@media screen and (max-width: 767px) {
	.hfbe_h_box2e {
		position: relative;
	}
	.hfbe_h_box2e_1 {
		width: 78vw;
    position: absolute;
    left: 9.6vw;
    top: 62vw;
	}
	.hfbe_h_box2e_2 {
    width: 78vw;
    position: absolute;
    left: 9.6vw;
    top: 112.5vw;
	}
}

/* 追加２ */
@media screen and (min-width: 768px) {
	.pd_c_price_ev {
		padding-top: 3vw;
		/* width: 23vw; */
		width: 90%;
	}
}

@media screen and (max-width: 767px) {
	.pd_c_price_ev {
		padding-left: 4%;
		padding-right: 4%;
	}
	.cart_ev {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 3;
	}
	.cart_ev img {
		display: block;
		width: 100%;
		vertical-align: bottom;
	}
	#pageTop2 {
		bottom: 20vw;
	}
}


/* 25/3/13 修正
===================================================*/
.hfbp_amb_box {
    background: #e9e9e9;
    padding: 8vw 20vw;
}
.hfbp_amb_box1 {
    font-size: 1.5vw;
    letter-spacing: .2vw;
    text-align: center;
    padding-bottom: 1.75vw;
    position: relative;
    margin-bottom: 1.5vw;
}
.hfbp_amb_box1::after {
    display: block;
    content: '';
    width: 4.5vw;
    border-top: .1vw solid;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.hfbp_amb_box2 {
    font-size: 2vw;
    font-feature-settings: 'palt';
    letter-spacing: .2vw;
    text-align: center;
    margin-bottom: 2.25vw;
}
.hfbp_amb_box3 {
    padding-top: 5vw;
    font-size: 2.4vw;
    letter-spacing: .2vw;
    text-align: center;
    padding-bottom: 1.5vw;
    border-bottom: .15vw solid;
    margin-bottom: 2.25vw;
}
.hfbp_amb_box4 {
    font-size: 1.25vw;
    line-height: 1.75;
    margin-bottom: 2vw;
}
.hfbp_amb_box4 span {
    font-weight: bold;
}
.hfbp_amb_box5 {
    font-size: .8vw;
    text-align: right;
}

@media screen and (max-width: 767px){
    .hfbp_amb_box {
        padding: 12vw 0 15vw;
    }
    .hfbp_amb_box1 {
        font-size: 3.5vw;
        letter-spacing: .4vw;
        padding-bottom: 3vw;
        margin-bottom: 4vw;
    }
    .hfbp_amb_box1::after {
        width: 11vw;
    }
    .hfbp_amb_box2 {
        font-size: 4.75vw;
        letter-spacing: .5vw;
        margin-bottom: 7vw;
    }
    .hfbp_amb_box3a {
        padding: 0 8vw;
    }
    .hfbp_amb_box3 {
        padding-top: 8vw;
        font-size: 5vw;
        letter-spacing: .4vw;
        line-height: 1.75;
        padding-bottom: 5vw;
        margin-bottom: 5vw;
    }
    .hfbp_amb_box4 {
        font-size: 3vw;
        line-height: 2;
    }
    .hfbp_amb_box5{
        font-size: 1.75vw;
    }
}