/*====================================================
------------------------------------------------------
    product.css
------------------------------------------------------
====================================================*/

/* --------------------------------------------------
    titleAre
-------------------------------------------------- */
.titleArea { background: var(--color_whitegray);}
//.titleArea > .inner { display: flex; align-items: center; padding: 80px 0 60px; margin: 0 auto;}
.titleArea > .inner { display: flex; align-items: center; padding: 50px 0 50px; margin: 0 auto;}
.titleArea h1 { font-size: 8rem; font-weight: 600; margin-right: 45px; font-family: "Inter", sans-serif;}
.titleArea span { font-size: 4rem; font-weight: 600; margin-bottom: -0.5em;}

@media screen and (max-width: 767px){
.titleArea > .inner { padding: 50px 15px 40px;}
.titleArea h1 { font-size: 4rem;}
.titleArea span { font-size: 2rem;}
}

/* --------------------------------------------------
    headLine
-------------------------------------------------- */
.headLine { background: var(--color_sub_red06);}
.headLine .inner { margin-bottom: 0;}
.headLine .btArea_col03 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.headLine .btArea_col03 a { width: 32%;}
.headLine .btArea_col03 a img { width: 100%;}
//.headLine .product_top { margin-bottom: 30px;}
.headLine .product_top { margin-bottom: 0px;}
ul.btArea_col02 { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap;}
//ul.btArea_col02 li { width: 48%; background: var(--color_whitegray); border-radius: 16px; margin-bottom: 30px;}
ul.btArea_col02 li { width: 48%; background: var(--color_whitegray); border-radius: 16px; margin-bottom: 0px;}
ul.btArea_col02 li:hover { background: var(--color_white);}
ul.btArea_col02 li a { display: block; width: 100%; height: 100%; font-size: 2.4rem; font-weight: 600; text-decoration: none; padding: 30px 0 30px 30px; position: relative;}
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 img { width: 46px; height: 46px; margin-right: 10px;}
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: 767px){
.headLine .btArea_col03 { flex-direction: column; margin-bottom: 0;}
.headLine .btArea_col03 a { width: 100%; margin-bottom: 30px;}
ul.btArea_col02 { flex-direction: column;}
ul.btArea_col02 li { width: 100%; margin-bottom: 20px;}
.headLine .inner { padding: var(--innerP);}
}

/* --------------------------------------------------
    ainCont
-------------------------------------------------- */
.mainCont { background: var(--color_whitegray);}
.mainCont .inner {display: flex; flex-wrap: wrap;}
.mainCont .btCard { display: flex; justify-content: space-between; width: 48%; height: 250px; background: var(--color_white); border-radius: 15px; padding: 20px; margin: 0 2% 2% 0; text-decoration: none; position: relative;}
.mainCont .btCard:after { content: ""; width: 35px; height: 35px; background: url(../images/share/icon_arrow_bgW_red.svg); position: absolute; bottom: 15px; right: 15px}
.mainCont .btCardbl:after { content: ""; width: 20px; height: 20px; background: url(../images/share/icon_blank_red.svg); position: absolute; bottom: 15px; right: 15px}
.mainCont .btCard figure { display: flex; align-items: center;}
.mainCont .btCard img { width: 125px; height: 125px;}
.mainCont .btCard dl { width: calc(100% - 150px);}
.mainCont .btCard dt { font-size: 2.2rem; font-weight: 600; color: var(--color_main_red); margin-bottom: 15px;}
.mainCont .btCard dd { font-size: 1.7rem;}

@media screen and (max-width: 767px){
.mainCont .inner { flex-direction: column; padding: var(--innerP);}
.mainCont .btCard { width: 100%; height: 150px; margin: 0 0 2% 0;}
.mainCont .btCard:last-child { margin: 0 0 0 0;}
.mainCont .btCard img { width: 80px; height: 80px;}
.mainCont .btCard dl { width: calc(100% - 100px);}
}

/*  */
.inner { padding: 30px 0;}