@charset "Shift_JIS";

/* **************************************************

Name: responsive.css

Description: Main CSS

Create: 2023.01.26
Update: 2023.01.26

***************************************************** */


/* common
=========================================================================================== */
@media screen and (max-width: 767px) {
    .pcOnly { display: none; }
    .spOnly { display: block; }
}


/* mainVisual
=========================================================================================== */
@media screen and (max-width: 767px) {
    .mainVisual {
        position: relative;
        height: auto;
        background: none;
    }
    .mainVisual::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 60%;
        height: 60%;
        filter: drop-shadow(0 0 10px black);
    }
    .mainVisual .mvText {
        display: block;
    }
    .mainVisual .mvText h1 {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 2;
        display: block;
        transform: translateY(-50%);
        -webkit- transform: translateY(-50%);
        padding:  0 15px;
    }
    .mvTitle01 {
        font-size: 4.8vw;
        line-height: 100%;
        /*text-shadow: 2px 2px 6px #000000, 0px -1px 6px #000000;*/
    }
    .mvTitle02 {
        margin-top: 10px;
        font-size: 3.2vw;
        line-height: 100%;
        /*text-shadow: 2px 2px 6px #000000, 0px -1px 6px #000000;*/
    }
    .mainSPBG {
        display: block;
    }
    .mainSPBG img {
        width: 100%;
        height: auto;
    }
}


/* block
=========================================================================================== */
@media screen and (max-width: 767px) {
    .contentsArea {
        padding: 40px 15px 0 15px;
    }
    .boxLeftKakko {
        margin: 0 auto 50px auto;
        padding: 15px 0 0 15px;
    }
    .boxLeftKakko::before {
        width: 100px;
        height: 100px;
        border-top: solid 7px #390701;
        border-left: solid 7px #390701;
    }
    .boxRightKakko {
        margin: 50px auto 0 auto;
        padding: 15px 15px 0 0;
    }
    .boxRightKakko::before {
        width: 100px;
        height: 100px;
        border-top: solid 7px #390701;
        border-right: solid 7px #390701;
    }
    .boxInner {
        padding: 15px 15px 20px 15px;
    }
    .boxInnerTitle {
        margin: 0 0 15px 0!important;
        font-size: 24px;
    }
    .boxInnerText {
        line-height: 170%;
    }
    .imgBoxStyle02 {
        margin: 0 auto;
    }
    .contentsArea img {
        max-width: 100%;
        height: auto;
    }
}


/* recommend
=========================================================================================== */
@media screen and (max-width: 767px) {
    .recommendArea {
        margin-top: 70px;
    }
    .recommendInner {
        padding: 30px 15px;
    }
    .recommendTitle {
        font-size: 24px;
    }
    .recommendList > li {
        position: relative;
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .recommendList > li:last-child {
        margin-bottom: 0;
    }
    .recommendList > li p {
        position: absolute;
        width: 100%;
        margin-top: 0;
    }
    .recommendList > li p img {
        width: 140px;
        height: 140px;
    }
    .recommendList > li > a > dl {
        padding: 0;
    }
    .recommendList > li > a > dl dt {
        display: table;
        min-height: 140px;
        margin-bottom: 0;
    }
    .recommendList > li > a > dl dt span {
        display: table-cell;
        vertical-align: middle;
        padding: 25px 15px 25px 160px;
        box-sizing: border-box;
    }
    .recommendList > li > a > dl dd {
        min-height: auto;
        padding: 20px;
    }
    .recommendList > li p span {
        bottom: auto;
        left: auto;
        top: 0;
        right: 0;
        padding: 5px 10px;
    }
    .recommendList > li > a:hover p img {
        transform: scale(1,1);
    }
    .recommendArea::before,.recommendArea::after {
        height: 30px;
    }
}
@media screen and (max-width: 399px) {
    .recommendList > li p img {
        width: 100px;
        height: 100px;
    }
    .recommendList > li > a > dl dt {
        min-height: 100px;
    }
    .recommendList > li > a > dl dt span {
        padding: 25px 15px 25px 115px;
        font-size: 14px;
        box-sizing: border-box;
    }
    .recommendList > li > a > dl dd {
        padding: 15px;
    }
}