/*====================================================
------------------------------------------------------
    top.css
------------------------------------------------------
====================================================*/

.top { position: relative;}

/* --------------------------------------------------
    mv
-------------------------------------------------- */
.mv { max-width: 1920px; max-height: 640px; height: calc(100vw * .333); background: url(../images/top/bg_top_mv.jpg) 50% 50% no-repeat; position: relative; z-index: 0;} 
.mv img { width: calc(100vw * .4); height: calc(100vw * .17963); position: absolute; top: 50%; bottom: 50%; left: 10%; margin: auto; z-index: 1;}

.floating_fiveminutes { position: fixed; top: 570px; right: 20px; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3); z-index: 100; background:#ffff; border-radius: 10px;}
.floating_fiveminutes a { display: block;}
.floating_fiveminutes_close { font-size: 5rem; color: var(--color_main_red); font-weight: 200; line-height: 1em; background: var(--color_white); border-radius: 50px; border: 1px solid var(--color_main_red); padding: 0 10px; position: absolute; top: -15px; right: -15px;z-index: 99999; cursor: pointer;}

@media screen and (max-width: 1000px){
.floating_fiveminutes a { width: 250px; height: 118px;}
.floating_fiveminutes a img { width: 100%;}
.floating_fiveminutes_close { font-size: 4rem;}
.specialInfo  {text-align: center;}

}

@media screen and (max-width: 767px){
.mv { max-width: 100vw; height: calc(100vw * 1.013); background: url(../images/top/top_mv_sp.jpg) center center no-repeat; background-size: cover;} 
.mv img { display: none;}

.floating_fiveminutes { position: fixed; top: auto; bottom: 80px; right: 20px;}
.floating_fiveminutes a { width: 181px; height: 111px;}
.floating_fiveminutes a img { width: 100%;}
.floating_fiveminutes_close { font-size: 3rem; color: var(--color_main_red); padding: 0 7px;}
}

/* --------------------------------------------------
    common
-------------------------------------------------- */
.titleArea { display: flex; justify-content: space-between; margin-bottom: 50px;}
.titleArea h1 { height: 8rem; font-size: 8rem; font-weight: 600; color: var(--color_white); line-height: 1em; padding: 0; margin: 0;}
.titleArea a { display: flex; align-items: center; color: var(--color_white); font-size: 2.2rem; font-weight: 600;}
.titleArea a:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_arrow_bgink_white.svg); margin-left: 10px;}

ul.btArea_col02 { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap;}
ul.btArea_col02 li { width: 48%; background: var(--color_lghtbluegray); border-radius: 16px; margin-bottom: 30px;}
ul.btArea_col02 li:hover { background: var(--color_white);}
ul.btArea_col02 li a { display: block; width: 100%; height: 100%; font-size: 2.4rem; text-decoration: none; padding: 30px 0 30px 30px; position: relative; font-weight: 600;}
ul.btArea_col02 li a:hover { color: var(--color_main_red); text-decoration: none;}
ul.btArea_col02 li a:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_arrow_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 30px; margin: auto;}
ul.btArea_col02 li a[target="_blank"]:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_blank_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 30px; margin: auto;}
ul.btArea_col02 li a:hover:after { background: url(../images/share/icon_arrow_bgW_red.svg) 0 0;}
ul.btArea_col02 li a[target="_blank"]:hover:after { background: url(../images/share/icon_blank_bgW_red.svg) 0 0;}

@media screen and (max-width: 1100px){
ul.btArea_col02 li a {font-size: 1.7rem;}
}


@media screen and (max-width: 890px){
ul.btArea_col02 { flex-direction: column;}
ul.btArea_col02 li { width: 100%;}
//ul.btArea_col02 li a {font-size: 2.4rem; padding: 30px 50px 30px 20px; overflow-wrap: anywhere;}
ul.btArea_col02 li a {font-size: 2rem; line-height: 1.4;}
.titleArea h1 { font-size: 3.5rem; height: 3.5rem;}
.titleArea a { font-size: 1.3rem;}
.titleArea a:after { content: ""; width: 15px; height: 15px; background: url(../images/share/icon_arrow_r_white.svg); margin-left: 10px;}
}


/* --------------------------------------------------
    productInfo
-------------------------------------------------- */
.productInfo { background: var(--color_main_red); padding-bottom: 0;}
.productInfo .inner { margin-bottom: 0;}
.productInfo .btArea_col03 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.productInfo .btArea_col03 a { width: 32%;}
.productInfo .btArea_col03 a img { width: 100%;}
.product_top { border-bottom: 1px solid var(--color_white); margin-bottom: 30px;}
ul.btArea_col02 li a img { width: 46px; height: 46px; margin-right: 10px;}

@media screen and (max-width: 767px){
.productInfo .btArea_col03 { flex-direction: column; margin-bottom: 20px;}
.productInfo .btArea_col03 a { width: 100%; margin-bottom: 30px;}
.productInfo .btArea_col03 a img { width: 100%; border-radius: 15px;} 
}
/*
.productInfo { background: var(--color_main_red); padding-bottom: 0; margin-bottom: 0px;}
.productInfo .inner { margin-bottom: 0;}
.productInfo .btArea_col03 { display: flex; align-items: center; justify-content: space-between;  border-bottom: 1px solid var(--color_white); padding-bottom: 30px; margin-bottom: 30px;}
.productInfo .btArea_col03 a { width: 32%;}
//.productInfo .btArea_col03 a img { width: 100%;}
.productInfo .btArea_col03 a img { width: 377px;}
.product_top { margin-bottom: 30px;}
ul.btArea_col02 li a img { width: 46px; height: 46px; margin-right: 10px;}

@media screen and (max-width: 767px){
.productInfo .btArea_col03 { flex-direction: column;  margin-bottom: 20px;}
.productInfo .btArea_col03 a { width: 100%; margin-bottom: 30px;}
.productInfo .btArea_col03 a img { width: 100%; border-radius: 15px;} 

ul.btArea_col02 li a img {float: left;}
ul.btArea_col02 li:first-child img { margin-top: -10px; }
.productInfo .btArea_col03 a:last-child {margin-bottom: 0px; }

}
*/

 
/* --------------------------------------------------
    companyInfo
-------------------------------------------------- */
.bgImg_clip, 
.bgImg_fixed { display: none;}

.companyInfo  { max-width: 1920px; background: url(../images/top/bg_top_company.png) center 0 no-repeat; background-size: cover; padding-bottom: 60px; position: relative; border-radius: 60px;}
.companyInfo .inner { margin-top: 0;}
.companyInfo a img { width: 100%;}
.companyInfo .bt_aboutus { display: block; text-decoration: none; font-size: 3rem; color: var(--color_black); background: var(--color_whitegray); border-radius: 15px; padding: 40px; margin-bottom: 50px; position: relative; font-weight: 600;}
.companyInfo .bt_aboutus:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_arrow_bgW_red.svg); position: absolute; top: calc(50% - 18px); right: 30px}
.companyInfo .bt_aboutus:hover { background: var(--color_white); color: var(--color_main_red);}

.bgImg_clip { display: block; width: 100%; height: 100%; min-height: 600px;
clip-path: inset(0); /* 切り抜き */
 z-index:-999;}
.bgImg_fixed { display: block; width: 100%; height: 100%; background-image: url(../images/top/pc_bg_companyInfo.jpg); background-size: cover; /*background-position: center;*/ position: fixed; top: 0; left: 0; }

@media screen and (max-width: 767px){
.companyBg { position: relative;}
.bgImg_clip { display: block; width: 100%; height: 100%; min-height: 340px;
clip-path: inset(0); /* 切り抜き */
position: absolute; top: -340px; left: 0; z-index: -1;}
.bgImg_fixed { display: block; width: 100%; height: 100%; background-image: url(../images/top/sp_bg_companyInfo.jpg); background-size: cover; background-position: center; position: fixed; top: 0; left: 0;}

.companyInfo { background-size: cover; padding-bottom: 40px; margin-top: 340px; position: relative; ; border-radius: 0px;}
footer .copyright { font-size: 1.3rem; padding: 15px 15px 85px;}
}