@charset "utf-8";
#main-visual-mine.main-visual {
    background: url(../img/mine/img_header.png) center center no-repeat !important;
    background-size: cover !important;
    height: 62vh;
    padding: 0 !important;
}
.mine{
    margin-top:70px;
}
.mine h4 {
    color: #142D89;
    line-height: 1.6;
    text-align: center;
    font-size: larger;
    margin-bottom: 35px;
}
.content01,
.content02,
.content03,
.content07 .contentInn {
    width: 80%;
    font-size: 1rem;
    line-height: 1.7;
}
.content01,
.content02,
.content03,
.content04,
.content06 {
    margin: 50px auto 100px;
}
.content04 ul,
.content06 ul,
.content08 ul {
    margin: 25px auto 100px;
}
.content04 ul,
.content08 ul {
    font-size: 0.8rem;
    line-height: 1.7;
}
.content01 .pointThree {
    gap: 10px;
    width: 100%;
    text-align: center;
}
.content01 .pointThree li {
    color: #fff;
    font-weight: 800;
    text-align: center;
    margin: 25px auto;
    padding: 15px;
    border-radius: 10px;
    width: calc(100% / 3)
}
.content01 .pointThree li:first-child {
    background: #036EB8;
}
.content01 .pointThree li:nth-child(2) {
    background: #C30D23;
}
.content01 .pointThree li:nth-child(3) {
    background: #00913A;
}
.content01 .text {
    gap: 10px;
}
.content01 .secA {}
.content01 figure {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.content01 figure img {
    width: 80%;
}
.content02 {
    background: #F7F7F7;
    padding-top: 3%;
    padding-bottom: 3%;
}
.content02 .contentInn {
    width: 90%;
    margin: 0 auto 2%;
}
.content02 .contentInn:last-of-type {
    margin: 50px auto 0;
}
.content02 figure {
    width: 28%;
    margin: 0 auto;
    text-align: center;
}
.content02 figure img {
    width: 100%;
}
.content02 .contentInn.part01>div {
    width: 71%;
}
.content02 .contentInn.part02>div {
    width: 70%;
    margin-right: 10px;
}
.mine .content02 h4 {
    text-align: left;
    display: inline-block;
}
.content02 .contentInn.part02>div {
    margin-left: 4%;
}
.mine .content02 h4:after {
    content: '';
    border-bottom: 3px #036EB8 solid;
    display: block;
}
.content03 h5 {
    color: #fff;
    font-weight: 800;
    background: #122B88;
    font-size: x-large;
    text-align: center;
    padding: 15px;
    margin-bottom: 25px;
}
.content03 .contentInn {
    background: #CEE6F7;
    padding-top: 3%;
    padding-bottom: 3%;
}
.content03 .contentInn .part01,
.content03 .contentInn .part02 {
    justify-content: center;
    gap: 25px;
}
.content03 .contentInn .part01 .text {
    text-align: center;
}
.content03 .contentInn .part01 .text p {
    background: #C30D23;
    color: #fff;
    font-weight: 800;
    font-size: x-large;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
}
.content03 .contentInn .part01 .text p:after {
    display: block;
    content: '';
    position: absolute;
    background: url(../img/mine/urasoegasu_mine-fukidashi.png) no-repeat !important;
    background-size: contain !important;
    width: 100%;
    height: 69px;
    bottom: -60px;
    left: 25%;
}
.content03 .contentInn .part01 .img {
    text-align: center;
}
.mine .content03 h4 {
    display: inline-block;
}
.content04 ul {
    gap: 25px;
}
.content04 li:first-of-type {}
.content04 li:first-of-type p {
    color: #00AFEC;
    text-align: center;
    font-size: x-large;
}
.mine .content03 h4:after {
    content: '';
    border-bottom: 3px #036EB8 solid;
    display: block;
}
.content03 .contentInn .part02 {
    text-align: center;
}
.content03 .contentInn .part01 .img img {
    width: 300px;
}
.content03 .contentInn .part02 {
    margin-top: 7%;
}
.content04 li h4,
.content06 li h4 {
    color: #00AFEC;
    font-weight: 800;
    font-size: xxx-large;
    margin: 0 auto;
    letter-spacing: 0.1em;
}
.content04 .youtube {
    margin: 0 auto;
    text-align: center;
}
.content05 {
    background: url(../img/mine/mine-bg.png) no-repeat center center;
    background-size: 100% auto;
    height: 100%;
    overflow: visible;
    padding: 3% 0;
}
.content05 .boxCenter div:first-of-type {
    margin-bottom: 10px;
}
.content05 .boxCenter div:nth-of-type(2) {
    gap: 10px;
}
.content05 .boxCenter div:first-of-type img {
    height: 300px;
}
.content05 .boxCenter div:nth-of-type(2) img {
    height: 280px;
}
.content06 ul {
    width: 90%;
    gap: 15px;
}
.content06 li:first-of-type p {
    color: #00AFEC;
    font-size: x-large;
    text-align: center;
}
.content06 li:nth-of-type(2) {
    background: #00AFEC;
    border-radius: 15px;
    padding: 3%;
    color: #fff;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5em;
}
.content06 .accentB {
    color: #FFF100;
    font-size: x-large;
    font-weight: 800;
    letter-spacing: 0.3em;
    line-height: 2em;
}
.content07 {
    background: #F7F7F7;
}
.content07 .contentInn {
    margin: 0 auto;
    gap: 15px;
}
.content07 .contentInn .textA img.pcBox {
    margin: 0 auto;
    width: 80%;
}
.content07 .contentInn {
    padding: 3% 0;
}
.content07 .textB ul li:first-of-type {
    font-size: large;
    font-weight: 800;
}
.content07 .textB ul li span {
    color: #00A0E9;
}
.content08 ul {
    width: 80%;
}
.content08 p {
    background: #898989;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: large;
    padding: 10px 0;
}
.content08 li {
    list-style-type: disc;
}
@media print, screen (max-width:1024px) {
    iframe[src*="youtube.com"],
    iframe[src*="youtube-nocookie.com"] {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }
}
@media print, screen and (min-width:813px) and (max-width:1024px) {
    .mine {
        margin-top: 0;
    }
    #main-visual-mine.main-visual {
        background: url(../img/mine/img_header.png) 60% 40px no-repeat !important;
        background-size: cover !impotant;
        height: 56vh;
    }
    .mine .pcBox {
        display: none;
    }
    .mine .spBox {
        display: block;
    }
    .content01, .content02, .content03, .content07 .contentInn {
        width: 95%;
    }
    .content01 figure {
        width: 90%;
    }
    .content02 .contentInn {
        align-items: center;
    }
    .content02 .contentInn.part01>div {
        width: 60%;
    }
    .content02 figure {
        width: 37%;
    }
    .content03 .part01 {
        gap: 10px;
    }
    .content03 .contentInn .part01 .img {
        width: unset;
    }
    .content03 .contentInn .part01 .text {
        width: unset;
    }
    .content03 .contentInn .part01 .text p {
        width: 90%;
        font-size: large;
    }
    .content03 .contentInn .part01 .text p span {
        font-size: medium;
    }
    .content03 .contentInn .part01 .text p:after {
        height: 45px;
        bottom: -40px;
        width: 80%;
    }
    .content04 li h4, .content06 li h4 {
        font-size: x-large;
        letter-spacing: 0.3em;
    }
    .content05 .boxCenter div:first-of-type img {
        height: 230px;
    }
    .content05 .boxCenter div:nth-of-type(2) img {
        height: 200px;
    }
    .content04 li:first-of-type p {
        font-size: large;
    }
    .content06 li:first-of-type p {
        font-size: large;
    }
    .content07 .contentInn {
        flex-wrap: wrap;
    }
    .content07 .textA img.spBox {
        width: 60%;
        margin: 0 auto;
    }
    .content07 .textB {
        margin: 0 auto;
    }
}
@media print, screen and (min-width:668px) and (max-width:812px) {
    .mine .pcBox {
        display: none;
    }
    .mine .spBox {
        display: block;
    }
    .content01, .content02, .content03, .content07 .contentInn {
        width: 90%;
        margin: 50px auto;
    }
    .content01 .text {
        display: block;
    }
    .content01 figure {
        width: 80%;
        margin: 10px auto 0;
    }
    .content01 figure img {
        width: 60%;
    }
    .content02 .contentInn {
        align-items: center;
    }
    .content02 .contentInn.part01>div {
        width: 61%;
    }
    .content03 h5 {
        font-size: large;
    }
    .content03 .contentInn .part01 {
        display: block;
    }
    .content03 .contentInn .part01 .text p {
        width: 90%;
    }
    .content03 .contentInn .part02 {
        margin-top: 11%;
    }
    .content04 ul {
        display: block;
    }
    .content04 ul li:nth-of-type(2) {
        margin-top: 15px;
    }
    .content05 .boxCenter div:first-of-type img {
        height: 150px;
    }
    .content05 .boxCenter div:nth-of-type(2) img {
        height: 120px;
    }
    .content06 ul {
        display: block;
    }
    .content06 li:nth-of-type(2) {
        margin-top: 15px;
    }
    .content07 .contentInn {
        flex-wrap: wrap;
    }
    .content07 .textA img.spBox {
        width: 60%;
        margin: 0 auto;
    }
    .content07 .textB {
        margin: 0 auto;
    }
}
@media print, screen and (max-width: 667px){
    .mine {
        margin-top: 15px;
    }
    .mine .pcBox {
        display: none;
    }
    .mine .spBox {
        display: block;
    }
    #business-banner .banner_navi .banner_01 a,
    #business-banner .banner_navi .banner_02,
    #business-banner .banner_navi .banner_03 {
        background-size: cover !important
    }
    .content01, .content02, .content03, .content07 .contentInn {
        margin: 0 auto;
        width: 91%;
    }
    #main-visual-mine.main-visual {
        background: url(../img/mine/img_header.png) 40% 0 no-repeat !important;
        background-size: cover !important;
        height:unset;
        padding:25% 0 0 !important;
    }
    .mine h4 {
        margin-top: 20px;
}
    .content01 .secA {
        width: 100%;
        margin: 0 auto;
    }
    .content01 .text {
        gap: 10px;
        flex-wrap: wrap;
    }
    .content01 figure {
        width: 100%;
    }
    .content01 .pointThree {
        display: unset;
    }
    .content01 .pointThree li {
        width: 90%;
        font-size: x-large;
        letter-spacing: 0.2em;
        margin: 13px auto;
    }
    .content02 .contentInn {
        flex-wrap: wrap;
    }
    .content02 .contentInn.part01>div {
        width: 100%;
    }
    .content02 figure {
        margin-top: 15px;
        width: 100%;
    }
    .content02 .contentInn:last-of-type {
        flex-wrap: wrap;
    }
    .content02 .contentInn.part02 figure {
        order: 2;
    }
    .content02 .contentInn.part02>div {
        width: 100%;
        margin-right: 0;
        order: 1;
    }
    .content03 h5 {
        line-height: 1.3;
    }
    .content03 {
        margin-top: 20px;
    }
    .content03 .contentInn .part01 {
        flex-wrap: wrap;
    }
    .content03 .contentInn {
        padding-top: 10%;
        padding-bottom: 10%;
    }
    .content03 .contentInn .part01 .img,
    .content03 .contentInn .part01 .text {
        width: 100%;
    }
    .content03 .contentInn .part01 .text p {
        width: 90%;
        font-size: medium;
    }
    .content03 .contentInn .part01 .text p span {
        font-size: small;
    }
    .content03 .contentInn .part02 {
        margin-top: 50px;
    }
    .content03 .contentInn .part01 .text p:after {
        left: 30%;
        bottom: -47px;
        width: 50%;
        height: 50px;
    }
    .content03 .contentInn .part02 {
        font-size: small;
    }
    .content04 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .content04 ul {
        width: 100%;
        flex-wrap: wrap;
    }
    .content04 li h4 {
        font-size: xx-large;
    }
    .content04 li:first-of-type p {
        font-size: large;
    }
    .content04 ul, .content06 ul, .content08 ul {
        width: 90%;
        margin: 0 auto;
        flex-wrap: wrap;
    }
    .content05 {
        background-size: cover;
    }
    .content05 .boxCenter div:first-of-type img,
    .content05 .boxCenter div:nth-of-type(2) img {
        width: 83%;
        height: unset;
        display: block;
        margin: 0 auto;
    }
    .content06 {
        margin: 50px auto 50px;
    }
    .content06 li h4 {
        line-height: 1;
        font-size: xx-large;
    }
    .content06 li.textA p {
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: large;
    }
    .content06 li:nth-of-type(2) {
        font-size: small;
        width: 100%;
    }
    .content06 .accentB {
        font-size: large;
        letter-spacing:unset;;
    }
    .content07 {
        margin-bottom: 50px;
        padding-top: 25px;
    }
    .content07 .contentInn {
        display: block;
    }
    .content07 .textB ul li:first-of-type {
        font-size: small;
    }
    .content07 .textB ul li:nth-of-type(2),
    .content07 .textB ul li:nth-of-type(3) {
        width: 20%;
    }
    .content07 .contentInn .textA {
        margin: 0 auto 10px;
        text-align: center;
    }
    .content07 .contentInn .textA img.spBox {
        margin: 0 auto;
        width: 80%;
    }
    .content08 {
        margin-bottom: 25px;
    }
    .content08 p {
        margin-bottom: 20px;
    }
    .content08 ul {
        width: 85%;
    }
}


:root {
  --header-height: 80px; /* style.css の #header に合わせる */
}

/* ===== PC (1025px以上) ===== */
@media screen and (min-width:1025px) {
  #main-visual-mine.main-visual {
    background: url("../img/mine/img_header.png") center center no-repeat;
    background-size: cover;
    height: calc(63dvh - var(--header-height));
    margin-top: var(--header-height);
    display: block;
  }
}

/* ===== タブレット (641px〜1024px) ===== */
@media screen and (min-width:641px) and (max-width:1024px) {
  #main-visual-mine.main-visual {
    background: url("../img/mine/img_header.png") center top no-repeat !important;
    background-size: contain !important;
    background-color: #fff !important;
    height: auto !important;
    padding-top: 25.25% !important; /* 16:9比率ベース */
    margin-top: var(--header-height) !important;
    display: block !important;
  }
  .main-visual #catch-box {
    top: 44% !important;
  }
  .mine {
    margin-top: 0px !important;
  }
}

/* ===== スマホ (640px以下) ===== */
@media screen and (max-width:640px) {
  #main-visual-mine.main-visual {
    background: url("../img/mine/img_header.png") center top no-repeat !important;
    background-size: cover !important;
    background-color: #fff !important;
    height: calc(25dvh - var(--header-height)) !important;
    padding-top: 25.25% !important; /* スマホ用に浅め */
    margin-top: var(--header-height) !important;
    display: block !important;
  }
  .main-visual #catch-box {
    top:49% !important;
  }
  .main-visual #catch-box #catch-text-en {
    font-size: 12pt !important;
  }
}

/* ===== iPad mini (768px 前後) ===== */
@media screen and (min-width:768px) and (max-width:820px) {
  #main-visual-mine.main-visual {
    height: calc(23dvh - var(--header-height)) !important;
  }
}
/* ===== iPad mini 専用（縦768px / 横1024px） ===== */
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:2) {
  #main-visual-mine.main-visual {
    height: calc(27dvh - var(--header-height)) !important;
  }
}