/*
Theme Name: MaSaCreate ポートフォリオサイト
*/
/*この下からCSSを書いてください*/

/* フォントスタイル */
body { 
    font-size: 32px;
    /* font-family: "M PLUS 1p";  */
}


/******************************/
/*********** メイン  ***********/
/******************************/
.main {
    width: 100%;
}

/* メイン横並び */
.site {
    display: flex;
}

/* 左側 画像固定 */
.wrapper-left {
    width: 55%;
    position: relative;
}
.wrapper-left img {
    width: 55vw;
    height: 100vh;
    position: fixed;
    opacity: 0;
	animation: change-img-anim 21s infinite;
}
.wrapper-left img:nth-of-type(1) {
    /* animation: change-img-anim-first 20s infinite; */
	animation-delay: 0s;
}
.wrapper-left img:nth-of-type(2) {
	animation-delay: 7s;
}
.wrapper-left img:nth-of-type(3) {
	animation-delay: 14s;
}
@keyframes change-img-anim {
	0%{ opacity: 0;}
	20%{ opacity: 1;}
	30%{ opacity: 1;}
    50%{ opacity: 0;}
	100%{ opacity: 0;}
}
.wrapper-left span {
    font-size: 3.5rem;
    color: #ffff;
    font-weight: bolder;
    margin: 230px 200px;
    position: fixed;
}
.wrapper-left p {
    font-size: 1rem;
    color: #ffff;
    position: fixed;
    margin-top: 600px;
    margin-left: 350px;
}

/* 右側 モバイルファースト */
.container {
    width: 45%;
    height: 100%;
    margin-right: 0;
}


/* ファーストビュー */
.wrapper-fv {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
}
.wrapper-fv img {
    object-position: 0 0;
}


/* プロフィール紹介① */
.wrapper-right-main {
    width: 45vw;
    height: 90vh;
    margin: 40px auto;
    padding: 100px 70px 0px 70px;

}
.wrapper-right-main h2 {
    text-align: center;
    margin-bottom: 80px;
    font-weight: bold;
    text-shadow:
    0 2px 0 #888,
    0 3px 0 #888,
    0 4px 5px #333;
}
.letter {
    text-align: center;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.3em;
}
.wrapper-right-main p {
    font-size: 1.3rem;
    line-height: 2;
    padding: 20px;
}

/* プロフィール紹介② */
.wrapper-right-detail {
    width: 40vw;
    margin: 0 auto;
}
.wrapper-second  {
    width: 40vw;
}
.title {
    margin: 0 auto;
    padding: 30px 50px 100px 50px;
}
.title h3 {
    text-align: center;
    font-weight: bold;
    padding-bottom: 30px;
    text-shadow:
    0 2px 0 #888,
    0 3px 0 #888,
    0 4px 5px #333;
}
.list {
    font-size: 1.2rem;
    margin-top: 50px;
}
.item {
    display: flex;
    padding-bottom: 30px;
}
.item-l {
    width: 40%;
    margin-right: 30px;
    border-bottom: solid 2px black;
}
.item-r {
    width: 50%;
    left: 300px;
    border-bottom: solid 2px black;
}

/* 実績紹介 */
.wrapper-right-work {
    width: 45vw;
}
.wrapper-right-work h2 {
    font-weight: bold;
    text-shadow:
    0 2px 0 #888,
    0 3px 0 #888,
    0 4px 5px #333;
}
.work-text {
    text-align: center;
    padding: 100px 0 100px 0;
}
.work-item {
    padding: 0px 100px 60px 100px;
}
.work-img {
    padding-bottom: 80px;
}
.work-item p {
    font-size: 1rem;
    text-align: center;
}

/* フッター */
.footer {
    text-align: end;
    padding: 30px;
}
.footer-main {
    font-size: 1.5rem;
    margin-right: 200px;
    padding-bottom: 20px;
    font-weight: bold;
}
.footer-sub {
    font-size: 0.7rem;
    margin-right: 180px;
}

/*************************************/
/*********** ここからモバイル ***********/
/*************************************/
@media screen and (max-width:480px) {
    
/* 左側 */
.wrapper-left {
    display:none !important
}

/* 右側 モバイルファースト */
.container {
    width: 100%;
}

/* ファーストビュー */
.wrapper-fv img {
    width: 100%;
    height: 100%;
}


/* プロフィール紹介① */
.wrapper-right-main {
    width: 100%;
    height: 100%;
    padding: 85px 40px 0px 40px;
}
.wrapper-right-main h2 {
    margin-bottom: 50px;
}
.wrapper-right-main p {
    font-size: 0.8rem;
    line-height: 2.5;
    padding: 20px 10px 0 7px;

}

/* プロフィール紹介② */
.wrapper-right-detail {
    width: 100%;
    padding: 50px 0 0 0;
}
.wrapper-second {
    width: 100%;
}
.wrapper-second img {
    height: 90vh;
}
.title {
    margin: 0 auto;
    padding: 30px 40px 50px 40px;
}
.list {
    font-size: 0.8rem;
    margin-top: 50px;
    padding: 0;
}
.item-l {
    width: 40%;
    margin-right: 20px;
    border-bottom: solid 2px black;
}
.item-r {
    width: 40%;
    position: absolute;
    left: 200px;
    border-bottom: solid 2px black;
}

/* 実績紹介 */
.wrapper-right-work {
    width: 100%;
    height: 100%;
    padding: 55px 40px 0px 40px;
}
.work-text {
    font-size: 1.8rem;
    padding: 0;
    margin-bottom: 90px;
}
.work-item {
    padding: 0px;
}
.work-img {
    padding-bottom: 80px;
}

/* フッター */
.footer {
    margin: 0 auto;
    padding: 30px;
}
.footer-main {
    font-size: 1.5rem;
    margin-right: 88px;
}
.footer-sub {
    margin-right: 75px;
}
}

/*************************************/
/*********** ここからipad ***********/
/*************************************/
@media screen and (min-width:481px) and ( max-width:1023px) {

/* 左側 */
.wrapper-left {
    display:none !important
}

/* 右側 モバイルファースト */
.container {
    width: 100%;
}

/* ファーストビュー */
.wrapper-fv img {
    height: 100vh;
}

/* プロフィール紹介① */
.wrapper-right-main {
    width: 100%;
    height: 100%;
    padding: 150px 80px 30px 80px;
    margin: 0;
}
.wrapper-right-main h1 {
    margin-bottom: 50px;
}
.wrapper-right-main p {
    font-size: 1.8rem;
    line-height: 2.3;
}
.wrapper-right-main h2 {
    margin: 0;
}
.letter {
    font-size: 2.5rem;
    letter-spacing: 0.3em;
    padding: 40px 0 100px 0;
}

/* プロフィール紹介② */
.wrapper-right-detail {
    width: 100%;
    padding: 0;
}
.wrapper-second {
    width: 100%;
}
.wrapper-second img {
    padding: 40px;
}
.title {
    margin: 0 auto;
    padding: 150px 100px 60px 100px;
}
.title h3 {
    font-size: 2.5rem;
    letter-spacing: 0.3em;
    padding-bottom: 60px;
}
.list {
    font-size: 1.5rem;
    margin-top: 50px;
    padding: 0;
}
.item-l {
    width: 35%;
    margin-right: 20px;
    border-bottom: solid 2px black;
}
.item-r {
    width: 40%;
    position: absolute;
    left: 400px;
    border-bottom: solid 2px black;
}

/* 実績紹介 */
.wrapper-right-work {
    width: 100%;
    height: 100%;
    padding: 0px 100px 50px 100px;
    margin: 0;
}
.work-text {
    font-size: 2.5rem;
    letter-spacing: 0.3em;
    padding: 40px 0 140px 0;
}
.work-item {
    padding: 0;
}
.work-img {
    padding-bottom: 100px;
}

/* フッター */
.footer {
    text-align: end;
    padding: 30px;
}
.footer-main {
    font-size: 1.8rem;
    margin-right: 0px;
    text-align: center;
}
.footer-sub {
    margin-right: 0px;
    text-align: center;
}
}