@charset "UTF-8";
/* ==========================
home
========================== */
.home__title{
    margin-bottom: 28px;
}

.home__contents{
    margin: 24px 11%;
}

/* home sp */
@media screen and (max-width:769px) {
.home__title{
    margin-bottom: 24px;
}

.home__contents{
    margin: 12px 4.2%;
}
}

/* ==========================
firstView
========================== */
.section__firstView{
    position: relative;
}

.firstView__tb, .firstView__sp{
    display: none;
}

.firstView__items{
    color: var(--white);
    position: absolute;
    bottom: 47px;
    left: 12.5%;
    font-weight: 500;
    text-align: left;
}

.firstView__explanation{
    font-size: 3rem;
    letter-spacing: 0.1em;
    text-shadow: var(--deepgreen) 2px 2px 2px;
    position: relative;
}

.firstView__explanation--small{
    font-size: 2.6rem;
}

.firstView__explanation::after{
    display: block;
    content: '';
    background-image: url(../images/firstview-bodderPc.png);
    width: 353px;
    height: 45px;
    position: absolute;
    bottom: -23px;
    left: -29px;
}

.firstView__txt{
    font-size: 4.6rem;
    letter-spacing: 0.2em;
    text-shadow: var(--deepgreen) 5px 5px 4px;
    margin-top: 24px;
}

@media screen and (max-width:1150px) {
.firstView__explanation{
    font-size: 2.4rem;
}

.firstView__explanation--small{
    font-size: 2rem;
}

.firstView__explanation::after{
    background-image: url(../images/firstview-bodderTb.png);
    width: 290px;
    height: 37px;
    bottom: -19px;
    left: -36px;
}

.firstView__txt{
    font-size: 3.5rem;
    letter-spacing: 0.12em;
    text-shadow: var(--deepgreen) 4px 4px 3px;
    margin-top: 34px;
}
}

/* firstView tb */
@media screen and (max-width:900px) {
.firstView__pc{
    display: none;
}

.firstView__tb{
    display: block;
}

.firstView__items{
    top: 54px;
}
}

/* firstView sp */
@media screen and (max-width:700px) {
.firstView__tb{
    display: none;
}

.firstView__sp{
    display: block;
}
}

@media screen and (max-width:500px) {
.firstView__explanation{
    font-size: 1.6rem;
}

.firstView__explanation--small{
    font-size: 1.4rem;
}

.firstView__explanation::after{
    background-image: url(../images/firstview-bodderSp.png);
    width: 193px;
    height: 27px;
    bottom: -17px;
    left: -23px;
}

.firstView__txt{
    font-size: 2.4rem;
    letter-spacing: 0.12em;
    text-shadow: var(--deepgreen) 2px 2px 2px;
    margin-top: 30px;
}
}

@media screen and (max-width:400px) {
.firstView__items{
    top: 30px;
}
}

/* ==========================
concept
========================== */
.section__concept{
    position: relative;
}

.concept__contents{
    z-index: 10;
}

.concept__contents::after{
    display: block;
    content: '';
    background-image: url(../images/concept-imgPc.png);
    width: 140px;
    height: 98px;
    position: absolute;
    bottom: 72px;
    right: 6.1%;
    z-index: -10;
}

.concept__txt{
    font-size: 1.8rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-top: 29px;
}

.concept__txt:first-of-type, .concept__txt:nth-of-type(3){
    margin-top: 0;
}

.concept__spBr{
    display: none;
}

/* concept sp */
@media screen and (max-width:769px) {
.concept__txt{
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    margin-top: 26px;
}
}

@media screen and (max-width:500px) {
.concept__contents::after{
    background-image: url(../images/concept-imgSp.png);
    width: 138px;
    height: 96px;
    bottom: 83px;
    right: 2.6%;
    z-index: -10;
}

.concept__txt{
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    text-align: left;
    margin-top: 26px;
}

.concept__txt:nth-of-type(3){
    margin-top: 26px;
}

.concept__spBr{
    display: block;
}
}

/* ==========================
hours
========================== */
.section__hours{
    margin: 0 2.7%;
    background-color: var(--lightgreen);
}

.hours__contents, .hours__items{
    display: flex;
    justify-content: center;
    gap: 34px;
}

.hours__items{
    font-size: 1.8rem;
    width: 212px;
    gap: 16px;
}

.hours__txt{
    font-weight: 500;
}

/* hours sp */
@media screen and (max-width:769px) {
.section__hours{
    margin: 0;
}

.hours__contents{
    display: block;
}

.hours__items{
    font-size: 1.6rem;
    width: auto;
}

.hours__explanation{
    font-size: 1.4rem;
}
}