@charset "UTF-8";
/* CSS Document */
.main {
    background-color: #fbfbfb;
    font-size: 1.5rem;
}
.concept .h_third {
    text-align: center;
    padding-bottom: 43px;
    margin-top: 145px;
}
.business-introduction_wrapper p, .why_wrapper p, .new-varieties_wrapper p, .leader_wrapper p {
    text-align: left;
}
.concept {
    position: relative;
}
.concept h1 {
    position: absolute;
    width: 46%;
    z-index: -1;
    top: -40%;
    left: 12%;
}
.concept p {
    line-height: 2.0em;
    margin-bottom: 230px;
    padding: 0 20px;
}

/* 真輝園のお茶 */
.tea h2 {
    display: inline-block;
    text-align: center;
    border-bottom: solid 1px #231815;
    padding: 0 30px 15px;
    margin-bottom: 20px;
}
.tea .guidance {
    margin-bottom: 30px;
}
.tea_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    justify-content: center;
    margin: 0 auto 200px;
    gap: 60px;
}
.tea .inner {
    border-radius: 2px;
    background-color: #F7F4F4;
    box-shadow: 3px 2px 4px 0px rgba(0, 0, 0, 0.25);
    height: 100%;
}
.tea .visual {
    position: relative;
}
.tea .external-link {
    position: absolute;
    z-index: 10;
    bottom: 30px;
    right: 20px;
}
.description {
    padding: 24px 32px 32px;
}
.description h3 {
    font-size: 2.4rem;
    font-weight: 400;
    text-align: left;
}
.description .tax {
    text-align: right;
    padding: 0 0 10px;
}
.description p {
    text-align: left;
}
button {
    background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    padding: 0;
    height: 100%;
}
/* ホバーでカードを押し込むアニメーション */
.tea .inner:hover {
    transform: translate(3px, 3px);
    transition: 0.3s;
    /* 変化前のbox-shadow: 3px 2px 4px 0px rgba(0, 0, 0, 0.25); */
    box-shadow: 1.5px 1px 4px 0px rgba(0, 0, 0, 0.25);
}

@media(max-width: 500px) {
    .main {
        font-size: 1.5rem;
    }
    .concept .h_third {
        display: inline-block;
        font-size: 2.0rem;
        text-align: center;
        border-bottom: none;
        margin-top: 100px;
        padding: 0 0 20px;
    } 
    .concept p {
        margin-bottom: 145px;
    }
    .tea_container {
        gap: 40px;
    }
    .tea .h_third {
        font-size: 2.0rem;
        font-weight: 400;
    } 
    .description {
        padding: 18px 32px 25px;
    }
    .description .tax {
        text-align: right;
        padding: 0 0 3px;
    }
}