@charset "UTF-8";





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

メインコンテント

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

/* カラーゾーン */
.pageMainColorZoneCommon{
    height: 560px;
    background-color: var(--PartTheme);
}
.pageMainColorZoneCommonAdd{
    height: 400px;
    background-color:var(--BaseBase) ;
}

/* 全体 */
.pageMainContentCommon{
    /* margin-top: -440px; */
    padding-top: 230px;
}
/* の反転用 */
.pageMainContentAdd{
    margin-top: -280px;
}
/* のカスタム投稿用 */
.pageMainContentAnother{
    padding-top: 120px;
}

/* タイトル部 */
.pageMainTitleCommon{
    background-color: var(--frogGreen);
    color: var(--TextRev);
    /* margin-bottom: 30px; */
    padding: 40px 10% 35px 7%;
    border-radius: 10% 10% 0 0;
}

/* メインタイトル */
/* 投稿用 */
.pageMainTitleInfoCommon{
    margin-bottom: 15px;
    line-height: 1.2;
    color: var(--TextRev);
    font-weight: normal;
}
.pageMainTitleInfoAnother3{
    font-size: 24px !important;
}
/* 投稿用をセンター寄せ */
.pageMainTitleInfoAdd{
    text-align: center;
}
/* その他ページ用 */
.pageMainTitleInfoAnother{
    margin-bottom: 15px;
    color: var(--TextTheme);
    padding: 0 5% 0 2%;
    font-weight: bold;
}
/* カスタム投稿用 */
.pageMainTitleInfoAnother2{
    margin-bottom: 15px;
    font-size: 40px !important;
    color: var(--TextTheme);
    font-family: sans-serif;
    font-weight: normal;
    line-height: 1.2;
}

/* サブタイトル */
/* 投稿用 */
.pageMainTitleInfoSubCommon{
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--TextRev);
}
.pageMainTitleInfoSubCommon a{
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--TextRev);
}
.pageMainTitleInfoSubCommonAreaAdd{
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
.pageMainTitleInfoSubCommonAreaAdd::before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: 0;

}



/* 不要？ */
.pageMainTitleInfoSubCommonAdd{
    /* color: var(--TextRev);
    margin-bottom: 30px;
    padding: 0 2% 0 2%;
    font-size: 16px !important; */
}


/* カスタム投稿用 */
.pageMainTitleInfoSubAnother a{
    font-size: 18px !important;
    color: var(--TextTheme) !important;
    padding-left: 24px;
    border-left: 30px solid var(--TextSubTheme1);
    font-family: sans-serif;
}
.pageMainTitleInfoSubAnother2{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px !important;
    padding: 0 4%;
    color: var(--TextTheme) !important;
    margin-bottom: 10px;
}

/* アイキャッチ画像 */
.pageMainImageCommon{
    width: 100%;
    margin-bottom: 30px;
}
.pageMainImageCommon img{
    width: 100%;
    border-radius: 2px;
}
@media(max-width:840px){
    .pageMainColorZoneCommon{
        height: 560px;
    }
    .pageMainColorZoneCommonAdd{
        height: 320px;
    }
    .pageMainContentCommon{
        /* margin-top: -440px; */
        padding-top: 190px;
    }
    .pageMainContentAdd{
        margin-top: -200px;
    }
    .pageMainTitleCommon{
        padding: 20px 7% 25px 5%;
        border-radius: 10% 10% 0 0;
    }
    .pageArticleTitleTaxo{
    padding: 0;
    text-align: center !important;
    }
}




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

Questionヘッダー

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

.quesHeaderFaceImageA,
.quesHeaderFaceImageB,
.quesHeaderFaceImageC,
.quesHeaderFaceImageD,
.quesHeaderFaceImageE{
    height: 600px;
    position: relative;
    clip-path: shape(from 0% 0%,
     curve to 100% 0% with 0% 0% / 0% 0%,
     vline to 80%,
     curve to 0% 75% with 55% 65% / 10% 100%,
     close
    );
}
.quesHeaderFaceImageA{
    background: url(../img/faceImage/faceImage_top.jpg) no-repeat top/cover;
}
.quesHeaderFaceImageB{
    background: url(../img/faceImage/faceImage_easy.jpg) no-repeat top/cover;
    margin-top: 160px;
}
.quesHeaderFaceImageC{
    background: url(../img/faceImage/faceImage_Authentic.jpg) no-repeat top/cover;
    margin-top: 160px;
}
.quesHeaderFaceImageD{
    background: url(../img/faceImage/faceImage_highPrice.jpg) no-repeat top/cover;
    margin-top: 160px;
}
.quesHeaderFaceImageE{
    background: url(../img/faceImage/faceImage_purchase.jpg) no-repeat bottom/cover;
}

.quesHeaderFaceImageText{
    color: var(--TextRev);
    font-size: 60px;
    line-height: 1.1;
    padding: 0 8%;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 10%;
}
.quesHeaderImageCommon{
    position: relative;
}
.headerQueationApoRevImage{
    width: 110px;
    position: absolute;
    left: 20px;
    top: 10px;
}
.headerQueationApoRevImage img{
    width: 100%;
    opacity: 0.6;
}
@media(max-width:840px){
    .quesHeaderFaceImageText{
        font-size: 40px;
        line-height: 1.3;
        top: 15%;
    }
}




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

プライス

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

.pageArticleProdsSpec{
    padding: 0 4%;
}
.pageArticleProdsSpecPrice{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.pageArticleProdsSpecText{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}




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

楽ちんECサイトサンプル

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

.siteSampleScrollContainerPare{
        background-color: var(--PartTheme);
        margin-top: 5px;
        margin-bottom: 40px;
        padding-top: 15px;
        padding-bottom: 40px;
        position: relative;
    }
    .siteSampleSubTitleCommon{
        line-height: 1.2;
        color: var(--TextSubTheme2);
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 10px;
        text-align: center;
    }
    .siteSampleScrollContainer{
        display: flex;
        position: relative;
    }
    .siteSampleScrollContent {
        /* 水平スクロールバーを出す  */
        overflow-x: auto; 
        /* コンテンツを横並びにする  */
        /* white-space: nowrap;  */
        display: flex;
        /* スクロールバー非表示 (Firefox) */
        scrollbar-width: none;
        /* Internet Explorer 10+ */
        -ms-overflow-style: none;  
    }
    .siteSampleScrollContent::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }
    .siteSampleScrollItem {
        /* コンテンツが伸び縮みしないようにする */
        flex: 0 0 auto; 
        width: 300px; /* アイテムの幅 */
        margin: 10px;
    }
    .siteSampleScrollItemImage{
        height: 195px;
    }
    .siteSampleScrollItem img{
        border-radius:5px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
    }
    .siteSampleScrollButton {
        background: none;
        border: none;
        font-size: 32px;
        color:var(--TextSubTheme2);
        cursor: pointer;
        padding: 10px;
    }
    .siteSampleScrollItemTextContent{
        font-family: sans-serif;
        margin-top: 15px;
    }
    .siteSampleScrollItemINfo{
        color: var(--TextRev);
        font-size: 18px;
        line-height: 0.8;
    }
    

    /* メディアクエリ */
    @media(max-width:800px){
        .siteSampleScrollButton{
            display: none;
        }
        .siteSampleScrollContent{
            width: 95%;
            margin: 0 auto;
        }
    }


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

詳細目次

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


.IndexImageCommon{
    width: 80%;
    margin: 0 auto 10px;
}
.IndexFaceImageA,
.IndexFaceImageB,
.IndexFaceImageC,
.IndexFaceImageD{
    height: 500px;
    position: relative;
    border-radius: 10px;
}
.IndexFaceImageA{
    background: url(../img/faceImage/faceImage_easy.jpg) no-repeat top/cover;
}
.IndexFaceImageB{
    background: url(../img/faceImage/faceImage_Authentic.jpg) no-repeat top/cover;
}
.IndexFaceImageC{
    background: url(../img/faceImage/faceImage_highPrice.jpg) no-repeat top/cover;
}
.IndexFaceImageD{
    background: url(../img/faceImage/faceImage_purchase.jpg) no-repeat top/cover;
}
.btnRotate img{
    transform: rotate(-90deg);
}
.IndexFaceImageText{
    color: var(--TextRev);
    font-size: 44px;
    line-height: 1.1;
    padding: 0 8%;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 10%;
}
.IndexImageCommon{
    position: relative;
}
.IndexqueationApoRevImage{
    width: 110px;
    position: absolute;
    left: 20px;
    top: 10px;
}
.IndexqueationApoRevImage img{
    width: 100%;
    opacity: 0.6;
    
}
.IndexqueationMoreViewBtn{
    width: 70px;
    position: absolute;
    right: 5%;
    bottom: 5%;
}
.IndexqueationMoreViewBtn img{
    width: 100%;
}
@media(max-width:840px){
    .IndexFaceImageA{
        height: 400px;
    }
    .IndexFaceImageText{
        font-size: 32px;
        line-height: 1.3;
        top: 5%;
    }
}



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

アーティクルタイトル

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

.pageArticleTitleCommon{
    color: var(--TextSubTheme1);
    margin-bottom: 15px;
    padding: 0 5% 0px 4%;
    line-height: 1.2;
    font-weight: normal;
    /* margin-top: 30px; */
}
/* ギャラリー用 */
.pageArticleTitleAnother{
    color: var(--TextTheme);
    margin-bottom: 15px;
    padding: 0 5% 0 4%;
    border-left: 30px solid var(--TextSubTheme1);
    margin-left: 4%;
    line-height: 1.2;
    font-family: sans-serif;
    font-weight: normal;
}
/* カスタム投稿用 */
.pageArticleTitleTaxo{
    color: var(--TextRev);
    margin-bottom: 30px;
    padding: 0 15% 0 1%;
    line-height: 1.2;
    font-weight: normal;
}

@media(max-width:840px){
    .pageArticleTitleTaxo{
        padding: 0;
    }
} 



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

アーティクルテキスト

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

.pageArticleTextCommon p{
    margin-bottom: 30px;
    padding: 0 4%;
}
.pageArticleTextTitleCommon p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 0 4%;
}

/* ギャラリー用 */
.pageArticleTextAnother{
    padding: 0 4%;
    font-size: 14px;
}
.pageArticleTextAnother:not(:last-of-type){
    margin-bottom: 60px;
}
/* 商品マスター本文用 */
.pageArticleTextAnother2 p{
    padding-top: 10px;
    margin-bottom: 30px;

}

/* カスタム投稿用 */
.pageArticleTextTaxo p{
    margin-bottom: 30px;
    color: var(--TextRev);
    padding: 0 1%;
}




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

アーティクル画像

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

.pageArticleImageCommon{
    margin-bottom: 15px;
    width: 100%;
}
.pageArticleImageCommon img{
    width: 100%;
}
.pageArticleImageCommonCap p{
    font-size: 11px;
    margin-bottom: 20px;
    padding: 0 10% 0 6%;
}

/* 画像ギャラリー用 */
.pageArticleImageAnother{
    margin-bottom: 15px;
    width: 100%;
    padding: 0 1%;
}
.pageArticleImageAnother img{
    width: 100%;
}
/* マップ埋め込み */
.mapContent{
    padding: 0 1%;
    margin-bottom: 30px;
}
.mapContent iframe{
    width: 100%;
    object-fit: cover;
}




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

文末　リンク文章

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

/* About Us用 */
.pageArticleEndLinkAbout{
    padding: 0 8% 0 5%;
    margin-top: 30px;
}
.pageArticleEndLinkAbout,
.pageArticleEndLinkAbout a{
    color: var(--LincColor);
}

/* Access用 */
.pageArticleEndLinkAccess{
    margin-top: 30px;
    padding: 0 4%;
}
.pageArticleEndLinkAccess,
.pageArticleEndLinkAccess a{
    color: var(--LincColor);
}

/* Crew用 */
.pageArticleEndLinkCrew{
    margin-top: 30px;
    padding: 0 1%;
}
.pageArticleEndLinkCrew,
.pageArticleEndLinkCrew a{
    color: var(--TextRev);
}

/* Space用 */
.pageArticleEndLinkSpace{
    padding: 0 4%;
}
.pageArticleEndLinkSpace,
.pageArticleEndLinkSpace a{
    color: var(--LincColor);
}