@charset "UTF-8";

/* 共通設定 */
body{
    margin-top: 0;
    background-color: #e0b5d3; 
    background-image: url(../image/background5.png);
    font-family: 'DotGothic16', sans-serif;
}

h1,h2,h3,h4,p,ul,dl{
    margin-top: 0;
}

p,dt,dd,li{
    line-height: 1.8;
}

img{
    max-width: 100%;
    vertical-align: bottom;
}

.wrapper{
    max-width: 1200px;
    margin: 0 auto;
}

/* header */
header{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 6em;
    background-image: url(../image/top-nav.png);

    /* headerが上になるように固定する */
    position: sticky;
    top: 0;

    justify-content: space-between;
    /* 垂直位置の指定 */
    align-items: center;

}

h1 img{
    margin-bottom: 0;
    margin-left: 115px;
    margin-top: 15px;
}
/* navの指定 */
.gnav__item{
    margin-right: 1em;
    list-style-type: none;
    display: flex;

    font-weight: bold;
}

.gnav__item a{
    color: #ffed60;
    margin-left: 3em;
    text-decoration: none;
}

/* プロフィールのドロップダウンリスト */
.dropdown__lists{
    display: none;
    width: 180px;
    background-color: #ffed60;
    position: absolute;
    list-style-type: none;
    padding-left: 0;
}

.dropdown__lists a{
    color: black;
}

.gnav__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}

/* main */
.wrapper{
    background-image: url(../image/backimg.png);
}

.main-h1{
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
    height: 600px;
    background-image: url(../image/top.png);
}

.main-h1__div{
    padding-top: 8.5em;
}

#introduction{
    text-align: center;
    background-color: #ffed60;
    display: table;
    height: 600px;
    width: 1200px;
}

.introduction__inner{
    background-image: url(../image/candy-background.png);
    display: table-cell;
    vertical-align: middle;

    font-family: 'DotGothic16', sans-serif;
}

  /* 仕事への想い */
#work{
    display: flex;
    justify-content: space-evenly;
    height: 500px;
    padding-top: 6em;
    background-color: rgb(255, 255, 255,90%);
    margin: 0 auto 5em auto;
    background-image: url(../image/enjoy-background.png);
}

#work h2{
    text-align: center;
    padding: 5em 0 0 3em;
}

.work__item{
    max-width: 490px;
}

  /* プロフィール */
.profile__overview{
    display: grid;
    justify-content: space-around;
    gap: 90px;
    grid-template-columns: 450px 450px;
    height: 520px;
    margin-bottom: 5em;
    align-items: center;

    font-family: 'DotGothic16', sans-serif;
    /* 背景 */
    width: 980px;
    margin: 0 auto 5em auto;
    background-image: url(../image/profile-background.png);
}

.profile__overview h2{
    padding: 0 0 0 8em;
}

#plofile__career{
    display: grid;
    justify-content: space-around;
    grid-template-columns: 450px 450px;
    gap: 40px;
    width: 980px;
    background-color: rgb(255, 255, 255,90%);
    margin: 0 auto 5em auto;
}

.profile__school-img{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 2em;
}

.profile__society-img{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 4.5em;
}

#profile__like{
    width: 980px;
    background-color: rgb(255, 255, 255,90%);
    margin: 0 auto 5em auto;
}

#profile__like h3{
    margin-left: 0.5em;
}

.profile__likeinner{
    display: grid;
    justify-content: space-around;
    gap: 40px;
    grid-template-columns: 450px 450px;
    margin-bottom: 5em;
}

.like__music img{
    margin: 4em;
}



/* 企業へのメッセージ */
#message{
    text-align: center;
    width: 1200px;
    height: 400px;
    display: table-cell;
    vertical-align: middle;
    background-image: url(../image/masseage-background.png);
    background-repeat: no-repeat;
}

footer{
    max-width: 1200px;
    height: 6em;
    margin: 0 auto;
    background-color: #0000ff;
    color: #ffed60;
}

footer p{
    line-height: 6em;
    text-align: center;
}