@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Sawarabi_Mincho';
    src: url('../font/Sawarabi_Mincho/SawarabiMincho-Regular.ttf');
}

/*SCROLLイベント*/
.fadeIn {
    transform: translateY(50px);
	opacity: 0;
}

.fadeIn.animated {
	transform: translateY(0px);
	transition: 1s;
	opacity: 1;
}

/*スムーススクロール*/
#page-top {
    position: fixed;
    bottom: 3%;
    right: 2%;
    font-size: 77%;
}

#page-top a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 4;
    text-align: center;
    background: #666;
    text-decoration: none;
    color: #fff;
    border-radius: 50px;
}

#page-top a:hover {
    background-color: #f79428;
}

/*固定化ナビゲーションロゴ*/
#logo {
    position: fixed;
    top: 16%;
    right: 0%;
}

#logo a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #ED9820;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#logo a:hover {
    color: #ED9820;
    background-color: #606060;
}

/*固定化ナビゲーション名刺*/
#namecard {
    position: fixed;
    top: 26%;
    right: 0%;
    font-size: 77%;
}

#namecard a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #ED9820;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#namecard a:hover {
    color: #ED9820;
    background-color: #606060;
}

/*固定化ナビゲーションイラレバナー*/
#ai-banner {
    position: fixed;
    top: 36%;
    right: 0%;
    font-size: 77%;
}

#ai-banner a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #ED9820;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#ai-banner a:hover {
    color: #ED9820;
    background-color: #606060;
}

/*固定化ナビゲーションイラレポスター*/
#ai-poster {
    position: fixed;
    top: 46%;
    right: 0%;
    font-size: 77%;
}

#ai-poster a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #ED9820;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#ai-poster a:hover {
    color: #ED9820;
    background-color: #606060;
}

/*固定化ナビゲーションコラージュ*/
#collage {
    position: fixed;
    top: 56%;
    right: 0%;
    font-size: 77%;
}

#collage a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #56A9FF;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#collage a:hover {
    color: #56A9FF;
    background-color: #606060;
}

/*固定化フォトショバナー*/
#ps-banner {
    position: fixed;
    top: 66%;
    right: 0%;
    font-size: 77%;
}

#ps-banner a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #56A9FF;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#ps-banner a:hover {
    color: #56A9FF;
    background-color: #606060;
}

/*固定化フォトシポスター*/
#ps-poster {
    position: fixed;
    top: 76%;
    right: 0%;
    font-size: 77%;
}

#ps-poster a {
    display: block;
    width: 7vw;
    height: 4.4vw;
    line-height: 3.8;
    text-align: center;
    background: #56A9FF;
    text-decoration: none;
    color: #fff;
    font-size: 1vw;
    font-family: 'Sawarabi_Mincho';
}

#ps-poster a:hover {
    color: #56A9FF;
    background-color: #606060;
}


header {
    display: flex;
    padding: 3% 4% 3% 6%;
}

header h1 {
    width: 20%;
    line-height: 0;
}

header h1 img {
    width: 100%;
    height: fit-content;
    vertical-align: bottom;
}

header h1 p {
    margin-top: 10%;
    font-size: 1.36vw;
    font-family: 'Sawarabi_Mincho';
}

/*nav*/
nav {
    width: 70%;
    height: fit-content;
    margin-left: 10%;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav ul li {
    flex: 1 auto;
}

nav ul li a {
    display: block;
    line-height: 2.4;
    text-align: center;
    text-decoration: none;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.5vw;
    font-family: 'Sawarabi_Mincho';
}

nav ul li:nth-of-type(1) span,nav ul li:nth-of-type(2) span {
    color: #ED9820;
}

nav ul li:nth-of-type(3) span,nav ul li:nth-of-type(4) span {
    color: #56A9FF;
}

/*section*/
main section {
    padding: 8% 8% 0% 8%;
}

/*illustrator*/
.illustrator-explanation {
    display: flex;
}

.illustrator-textbox {
    width: 30%;
    margin-right: 5%;
    padding-top: 3%;
}

.illustrator-textbox h2 div {
    margin-top: 5%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2vw;
    font-family: 'Sawarabi_Mincho';
}

.illustrator-textbox img {
    width: 30%;
    height: fit-content;
    vertical-align: bottom;
}

.illustrator-textbox p {
    margin-top: 5%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

.illustrator-imagebox {
    width: 65%;
}

.illustrator-imagebox video {
    width: 100%;
    height: 24vw;
}


/*illustrator-example*/
.illustrator-example h2 {
    text-align: center;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2.4vw;
    font-family: 'Sawarabi_Mincho';
}

.illustrator-example .example-item {
    padding: 0;
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}

.illustrator-example .example-item h3 {
    margin-bottom: 5%;
    padding-top: 5%;
    border-bottom: 1px solid #202020;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2.2vw;
    font-family: 'Sawarabi_Mincho';
}

.illustrator-example .example-item div:nth-of-type(2) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(3) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(5) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(6) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(7) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(8) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(9) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(10) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(11) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(12) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(13) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(14) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(15) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(16) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(17) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(18) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(19) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(20) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(21) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(22) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(23) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(24) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(25) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(26) {
    margin-top: 5%;
}

.illustrator-example .example-item div:nth-of-type(27) {
    margin-top: 5%;
}




/*logo*/
.logo {
    display: flex;
}

.logo a {
    display: block;
    width: 45%;
    margin-bottom: 2%;
    text-decoration: none;
    overflow: hidden;
}

.logo a:nth-of-type(1) {
    margin-right: 10%;
}

.logo a img {
    width: 100%;
    height: 30vw;
    vertical-align: bottom;
    transform: scale(1,1);
    transition: 1s;
}

.logo a:hover img {
    transform: scale(1.05,1.05);
    transition: 1s;
}

.logo a p {
    margin-top: 6%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

/*namecard*/
.namecard {
    display: flex;
}

.namecard a {
    display: block;
    width: 45%;
    margin-bottom: 2%;
    text-decoration: none;
    overflow: hidden;
}

.namecard a:nth-of-type(1) {
    margin-right: 10%;
}

.namecard a img {
    width: 100%;
    vertical-align: bottom;
    transform: scale(1,1);
    transition: 1s;
}

.namecard a:hover img {
    transform: scale(1.05,1.05);
    transition: 1s;
}

.namecard a p {
    margin-top: 6%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

/*banner*/
.banner {
    display: flex;
}

.banner a {
    display: block;
    width: 45%;
    margin-bottom: 2%;
    text-decoration: none;
    overflow: hidden;
}

.banner a:nth-of-type(1) {
    margin-right: 10%;
}


.banner a img {
    width: 100%;
    vertical-align: bottom;
    transform: scale(1,1);
    transition: 1s;
}

.banner a:hover img {
    transform: scale(1.05,1.05);
    transition: 1s;
}

.banner a p {
    margin-top: 6%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}


/*poster*/
.poster {
    display: flex;
}

.poster a {
    display: block;
    width: 45%;
    margin-bottom: 2%;
    text-decoration: none;
    overflow: hidden;
}

.poster a:nth-of-type(1) {
    margin-right: 10%;
}

.poster a img {
    width: 100%;
    vertical-align: bottom;
    transform: scale(1,1);
    transition: 1s;
}

.poster a:hover img {
    transform: scale(1.05,1.05);
    transition: 1s;
}

.poster a p {
    margin-top: 6%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

/*Photoshop*/
.photoshop-explanation {
    display: flex;
}

.photoshop-textbox {
    width: 30%;
    margin-right: 5%;
    padding-top: 3%;
}

.photoshop-textbox h2 div {
    margin-top: 5%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2vw;
    font-family: 'Sawarabi_Mincho';
}

.photoshop-textbox img {
    width: 30%;
    height: fit-content;
    vertical-align: bottom;
}

.photoshop-textbox p {
    margin-top: 5%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

.photoshop-imagebox {
    width: 65%;
}

.photoshop-imagebox video {
    width: 100%;
    height: 24vw;
}

/*photoshop-example*/
.photoshop-example h2 {
    text-align: center;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2.4vw;
    font-family: 'Sawarabi_Mincho';
}

.photoshop-example .example-item {
    padding: 0;
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}

.photoshop-example .example-item h3 {
    margin-bottom: 5%;
    padding-top: 5%;
    border-bottom: 1px solid #202020;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 2.2vw;
    font-family: 'Sawarabi_Mincho';
}

.photoshop-example .example-item div:nth-of-type(2) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(3) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(4) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(5) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(6) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(7) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(8) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(9) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(10) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(11) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(12) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(13) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(14) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(15) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(16) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(17) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(18) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(19) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(20) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(21) {
    margin-top: 5%;
}


.photoshop-example .example-item div:nth-of-type(22) {
    margin-top: 5%;
}

.photoshop-example .example-item div:nth-of-type(23) {
    margin-top: 5%;
}








/*collage*/
.collage {
    display: flex;
}

.collage a {
    display: block;
    width: 45%;
    margin-bottom: 2%;
    text-decoration: none;
    overflow: hidden;
}

.collage a:nth-of-type(1) {
    margin-right: 10%;
}

.collage a img {
    width: 100%;
    height: 30vw;
    vertical-align: bottom;
    transform: scale(1,1);
    transition: 1s;
}

.collage a:hover img {
    transform: scale(1.05,1.05);
    transition: 1s;
}

.collage a p {
    margin-top: 6%;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}

/*footer*/
footer {
    margin-top: 5%;
    margin-bottom: 3%;
}

footer p {
    text-align: center;
    color: #202020;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 1.4vw;
    font-family: 'Sawarabi_Mincho';
}