@charset "utf-8";

/*ポートフォリオ　original css
下層ページ用css
2023/10 vr3
===============================*/

/*全体の設定//////////*/

body {
    background-color: #B3AEAE;
    font-family: "Roboto Condensed","Zen Kaku Gothic Antique","游ゴシック";
    font-size: 17px;
}

main {
    background: url(../allimage/page2Haikei.jpg) fixed;
    background-size: contain;
    background-repeat: repeat;
}

h2 {
    text-align: center;
    padding: 30px 0;
    font-family: "Train One","Arial";
    font-size: 28px;
    text-transform: uppercase;
}

h3 {
    text-align: center;
    padding: 30px 0;
    font-family: "Arial";
    font-size: 28px;
}

/*jQeryフェードインの設定////////////////////////////////////////*/
/*headerのフェードイン設定/*/
.jsfadein {
    display: none;
}




/*各セクション共通の設定/////////////*/
section {
    width: 60%;
    margin: 50px auto;
    background-color: #E8E7E7;
    border-radius: 10px;
    padding: 40px;
}


/*headerの設定//////////*/

.topimage {
    text-align: center;
    margin-top: 100px;
}

.topimage img {
    max-width: 100%;
    height: auto;
}

.siteTitle img {
    max-width: 200px;
    height: auto;
}



nav {
    background-color: #AFACBB;
    position: fixed;
    height: 80px;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

nav ul {
    display: flex;
    margin-right: 70px;
    text-align: center;
}

.navlist {
    text-transform: uppercase;
    align-self: center;
    font-size: 25px;
    color: #F3F3F1;
    border: 1px solid #DFD9D9;
    height: 100%;
    width: 150px;
    line-height: 80px;
}

.navlist a {
    display: block;
}

.navlist:hover {
    background-color: rgba(25, 123, 50, 0.3);
}

.gaiyou {
    width: 60%;
    margin: 50px auto;
    background-color: #E8E7E7;
    border-radius: 10px;
    padding: 40px;
}

h1 {
    text-align: center;
    font-size: 23px;
    font-family: "メイリオ";
    color: #AFACBB;
    margin: 20px 0;
}

.headerText1 {
    text-align: center;
    font-size: 17px;
    line-height: 1.7;
}

.headerText2 {
    text-align: center;
    font-size: 17px;
    margin-top: 20px;
}



/*各セクションの設定///////////////////////////////////////////////////////////////////////////////////////*/
/*emicafePAGEの設定（基本となる設定）/////////////////////////////////////////////////////////////////////////////////////*/

/*emicafe conseptSectionの設定/*/
.conseptText {
    text-align: center;
    margin-bottom: 30px;
    margin: 50px 70px;
}

.shopImage {
    margin: 0 70px 50px 70px;
}

.shopImage dt {
    margin-bottom: 6px;
}

.shopImage dd {
    margin-bottom: 10px;
}

/*emicafe ROGOSectionの設定/*/
.rogoPic {
    text-align: center;
}

.rogoPic img {
    max-width: 100%;
    height: auto;
}

.rogoText {
    margin: 0 70px 50px 70px;
    line-height: 1.7;
}

/*emicafe GOODsSectionの設定/*/
.goosItem {
    text-align: center;
    display: grid;
    grid-template-columns: 50% 50%;
    row-gap: 50px;
}

.goosItem li img {
    max-width: 100%;
    height: auto;
}

/*emicafe WEBSITESectionの設定/*/
.pageIcon {
    text-align: center;
    margin: 50px 70px;
}

.pageIcon img {
    max-width: 100%;
    height: auto;
}

.pageIcon img:hover {
transform: scale(1.1, 1.1);
}

.pagecomp img {
    max-height: 90vh;
}

.websiteFlex {
    display: flex;
    justify-content: space-around;
    gap: 25px;
    margin: 50px 70px;
}

.websiteInner {
    align-self: center;
    line-height: 1.8;
}

.websiteInner p {
    padding: 15px 0;
}

/*emicafe bannerSectionの設定/*/

.bannerSec p {
    line-height: 1.8;
    margin: 50px 70px;
}

.bannerSec dl {
    text-align: center;
    margin: 50px 70px;
}

.bannerSec dl dt {
    line-height: 1.8;
}

.bannerSec dl dt img {
    max-width: 100%;
    height: auto;
}

.bannerSec dl dd {
    margin-bottom: 50px;
}


/*emicafe footerの設定/*/
footer {
    background-color: #A717EC;
    text-align: center;
    padding: 15px 0;
}

footer p {
    color: #F3F3F1;
    font-size: 16px;
}



/*shoutPAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/

/*shout  RogoSectionの設定/*/
.shoutRogo {
    display: grid;
    grid-template-columns: 50% 50%;
    text-align: center;
}

.shoutRogo li img {
    max-width: 100%;
    height: auto;
}

/*shout  FlyerSectionの設定/*/
.flyerPic {
    text-align: center;
    margin: 50px 70px;
}

.flyerPic img {
    max-width: 100%;
    height: auto;
}

.flyerText {
    margin: 50px 70px;
}

.flyerText p {
    margin-bottom: 20px;
}


.ticketPic {
    text-align: center;
    margin: 50px 20px;
}

.ticketPic img {
    max-width: 100%;
    height: auto;
}

.tickeText {
    text-align: center;
    margin: 50px 70px;
}


/*graphicsPAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/

.graphicsSec {
    width: 80%;
}

.graphicsFlex {
    margin: 100px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.graphics {
    width: 30%;
    align-self: center;
}

.graphics img {
    max-width: 100%;
    height: auto;
}

/*jaketsPAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/
.jaketsConsept {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
.jaketItem {
    max-width: 40%;
}

.jaketsConsept dt {
    font-size: 20px;
    line-height: 3;
}

.jaketsConsept dt img {
    max-width: 100%;
    height: auto;
}

.jaketsConsept dd {
    margin-bottom: 100px;
}

/*bookcoverPAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/
.bookcovergaiyouPic {
    text-align: center;
    margin-bottom: 100px;
}

.bookcovergaiyouPic img {
    max-width: 100%;
    height: auto;
}

.bookcover1 dt img {
    max-width: 100%;
    height: auto;
}

.bookcover1 dd {
    margin: 50px 30px;
    line-height: 1.7;
}


/*groupworkPAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/
.grouph2 {
    font-family: "Zen Kaku Gothic Antique","游ゴシック";
}
.themeText {
    margin: 50px 70px;
}

.themeText p {
    line-height: 1.8;
}

.themePic {
    text-align: center;
    margin: 30px 0;
}

.themePic img {
    max-width: 100%;
    height: auto;
}

.themeText {
    margin: 50px 70px;
    line-height: 1.8;
}

.schedulePic {
    text-align: center;
}

.schedulePic img {
    max-width: 100%;
    height: auto;
}

.websitePageIcon {
    text-align: right;
    align-self: center;
    font-size: 20px;
    line-height: 1.7;
}

.websitePageIcon img {
    max-width: 100%;
    height: auto;
}
.websitePageIcon img:hover {
    transform: scale(1.1, 1.1);
}


/*profilePAGEの設定/////////////////////////////////////////////////////////////////////////////////////*/
.profileSec {
    width: auto;
    background-color: #B3AEAE;
}
.profileSecinnner {
    width: 80vw;
    margin: 20px auto;
}
.profileTitle {
    font-family: "Train One","Arial";
    color: #F3F3F1;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 0 30px;
    font-size: 30px;
}
.profileSubitle {
    color: #F3F3F1;
    padding: 0 0 0 50px;
    margin-bottom: 50px;
}
.nameandphoto {
    width: 50vw;
    text-align: center;
    display: grid;
    grid-template-columns: 50% 50%;
    align-self: center;
}
.nameandphoto p img {
    max-width: 100%;
    height: auto;
    box-shadow: 2px 2px 5px;
}
.nameandphotoText {
    align-self: center;
    font-size: 19px;
    color: #F3F3F1;
}
.profileFlex {
    display: flex;
    gap: 20px;
}
.profileText {
    width: 50vw;
    background-color: #E8E7E7;
    border-radius: 10px;
    padding: 20px;
    align-self: center;
}
.profileText p {
    line-height: 1.5;
    margin-bottom: 20px;
}


.profileh2 {
    font-family: "Zen Kaku Gothic Antique","游ゴシック";
}
.hobby {
    width: 520px;
    margin: 50px auto;
}
.hobby p {
    margin-bottom: 10px;
}
.hobby2 p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.beskill li {
    margin-bottom: 30px;
    line-height: 1.5;
}
.beskillItem {
    font-size: 18px;
    color: #9B5ABB;
    font-weight: bold;
    line-height: 1.7;
}

















/*レスポンシブウェブデザインの設定/////////////////////////////////////////////////////////////////////////////////////*/
/*「850px」以下に適用//////////////////////////////////////////////////////////*/
@media screen and (max-width: 850px) {

    /*goodsセクションのレスポンシブ設定(850)//////////*/
    .goosItem {
        display: block;
    }


    /*graphicsページのレスポンシブ設定（850）/////////////////////////////////////////////*/
    /*graphicsセクションのレスポンシブ設定(850)//////////*/
    .graphicsFlex {
        margin: 100px 0;
    }

    .graphics {
        width: 40%;
    }


    /*groupworkページのレスポンシブ設定（850）/////////////////////////////////////////////*/
    /*見どころセクションのレスポンシブ設定(850)//////////*/
    .websiteFlex {
        margin: 50px 20px;
    }


    /*profileページのレスポンシブ設定（850）/////////////////////////////////////////////*/
    /*profileセクションのレスポンシブ設定(850)//////////*/
    .profileFlex {
        display: block;
    }
    .nameandphoto {
        justify-content: center;
        width: auto;
        margin-bottom: 60px;
    }
    .nameandphotoText {
        font-size: 16px;
    }
    .profileText {
        width: auto;
    }

    /*わたしのことセクションのレスポンシブ設定(850)/////*/
    .hobby {
        width: auto;
    }





}

/*レスポンシブウェブデザインの設定/////////////////////////////////////////////////////////////////////////////////////*/
/*「550px」以下に適用//////////////////////////////////////////////////////////*/
@media screen and (max-width: 550px) {

    nav {
        margin-right: 0;
    }

    nav ul {
        margin-right: 0;
    }

    .navlist {
        width: 80px;
        font-size: 20px;
    }

    .siteTitle {
        line-height: 4;
    }

    .siteTitle img {
        max-width: 150px;
    }

    /*各セクション共通のレスポンシブ設定（550）/////////////*/
    .gaiyou {
        width: 80%;
        padding: 20px;
    }

    section {
        width: 80%;
        padding: 20px;
    }

    /*conseptセクションのレスポンシブ設定（550）/////////////*/
    .conseptText {
        margin: 50px 0;
    }

    .shopImage {
        margin: 0 0 50px 0;
    }

    /*rogoセクションのレスポンシブ設定（550）/////////////*/
    .rogoText {
        margin: 0 0 50px 0;
    }

    /*goodsセクションのレスポンシブ設定（550）/////////////*/
    .goosItem li {
        font-size: 15px;
    }

    /*webpageセクションのレスポンシブ設定（550）/////////////*/
    .pageIcon {
        margin: 50px 20px;
    }

    .websiteFlex {
        display: block;
        margin: 50px 10px;
    }

    .pagecomp {
        text-align: center;
    }

    /*bannerセクションのレスポンシブ設定（550）/////////////*/
    .bannerSec p {
        margin: 50px 0;
    }

    .bannerSec dl {
        margin: 50px 0;
    }





    /*shoutページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*flyerセクションのレスポンシブ設定（550）/////////////*/
    .flyerPic {
        margin: 50px 0;
    }

    .flyerText {
        margin: 50px 0;
    }

    /*advance ticketセクションのレスポンシブ設定（550）//////////*/
    .tickeText {
        margin: 50px 0;
    }


    /*graphicsページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*graphicsセクションのレスポンシブ設定(550)//////////*/
    .graphicsFlex {
        display: block;
        text-align: center;
    }
    .graphicsFlex P {
        text-align: center;
    }
    .graphics {
        width: auto;
        margin-bottom: 70px;
    }
    .graphics img {
        max-width: 100%;
        height: auto;
    }

    /*bookcoverページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*plan1,2セクションのレスポンシブ設定(550)//////////*/
    .bookcover1 dd {
        margin: 50px 0;
    }


    /*groupworkページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*テーマセクションのレスポンシブ設定(550)//////////*/
    .themeText {
        margin: 50px 0;
    }

    /*見どころセクションのレスポンシブ設定(550)//////*/
    .pagecomp {
        margin-bottom: 70px;
    }
    .websitePageIcon {
        text-align: center;
    }


    /*jaketページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*conseptセクションのレスポンシブ設定(550)//////////*/
    .jaketsConsept {
        display: block;
    }
    .jaketItem {
        max-width: 100%;
    }
    .jaketItem dt {
        text-align: center;
    }


    /*profileページのレスポンシブ設定（550）/////////////////////////////////////////////*/
    /*profileセクションのレスポンシブ設定(550)//////////*/
    .profileTitle {
        margin: auto;
    }
















}