@charset "UTF-8";

* {
    margin: 0;
    padding: 0;

    cursor: url(../images/cursor.png) auto;
}

@font-face {
    font-family: Lobster_Two;
    src: url(../font/Lobster_Two/LobsterTwo-Regular.ttf);
}

@font-face {
    font-family: Dela_Gothic_One;
    src: url(../font/Dela_Gothic_One/DelaGothicOne-Regular.ttf);
}

@font-face {
    font-family: Fjalla_One;
    src: url(../font/Fjalla_One/FjallaOne-Regular.ttf);
}

@font-face {
    font-family: Indie_Flower;
    src: url(../font/Indie_Flower/IndieFlower-Regular.ttf);
}

@font-face {
    font-family: Shadows_Into_Light;
    src: url(../font/Shadows_Into_Light/ShadowsIntoLight-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_New;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_New_Light;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Light.ttf);
}

@font-face {
    font-family: Zen_Maru_Gothic;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_Antique;
    src: url(../font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.ttf);
}

html {
    scroll-behavior: smooth;
}

body {
    background-image: url(../images/background5new2.png);
    background-size: cover;
    background-color: rgba(252, 252, 252, 0.679);
    background-blend-mode: lighten;
    /* background-color: #8FC0FF; */
}

body img {
    width: 100%;
}

/* 

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    background: url(../images/noise.png);
    pointer-events: none;
}

*/

/* 【 headerここから 】 */

header {
    padding-top: 2%;
    padding-bottom: 1%;
    background-color: #001838;
}




/* header内 */

/* h1 ↓ */

header h1 {
    margin-left: 4%;
    width: 10%;
}

header h1 img {
    width: 100%;
}


/* h1 ↑ */


/* ナビ↓ */

nav {
    margin-top: 1%;
    margin-left: 50%;
    margin-right: auto;
    padding-bottom: 1.5%;
    width: 40%;
    /* font-family: "wordy-diva", sans-serif; */
    font-family: Lobster_Two;
    font-weight: 500;
    font-style: normal;
}

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

nav ul li {
    margin-left: 13%;
    margin-right: auto;
    width: 15%;
}

nav ul li a {
    position: relative;
    font-size: 1.8vw;
    font-weight: 600;
    letter-spacing: 0em;
    color: #8FC0FF;
    text-decoration: none;
}

nav ul li a::before {
    width: 100%;
    transition: 0.5s;
}

nav ul li a:hover {
    display: block;
    position: absolute;
    transition: 0.8s;
    content: "";
}

.nav-img {
    margin-right: 5%;
}

/* ナビ↑ */

/* header内 */




/* 【 headerここまで 】 */

.husen {
    position: relative;
    position: fixed;
    margin-top: -1%;
    width: 23%;
    height: 23vw;
    background-image: url(../images/husen.png);
    background-size: cover;
}

.husen img {
    width: 100%;
}

.husen h3 {
    margin-top: 1%;
    margin-left: 10%;
    width: 20%;
    font-size: 2vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.husen-package {
    display: flex;
}

.husen-left {
    width: 40%;
    height: 17vw;
    margin-left: 9%;
    position: absolute;
}

.husen-left ul {
    margin-top: 5%;
    list-style-type: none;
    text-decoration: none;

}

.husen-left li {
    line-height: 2vw;
}

.husen-left li:before {
    margin-right: 2%;
  content: "★";
  color: #000365;
  font-size: 0.7vw;
  left: 0.5;

}

.husen-left ul li a {
    font-size: 1.3vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
    text-decoration: none;
    line-height: 2vw;
}

.husen-right 

.husen-home {
    margin-bottom: 35%;
    margin-left: 60%;
    width: 35%;
    height: 5vw;
    position: absolute;
}

.husen-home img {
    width: 100%;
}

.husen-modoru {
    margin-top: 65%;
    margin-left: 48%;
    width: 20%;
    height: 5vw;
    rotate: 8deg;
    position: absolute;
}

.husen-modoru img {
    width: 100%;
}




/* 【 mainここから 】 */

.main-title {
    width: 7%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 42%;
    margin-right: auto;
    font-size: 6vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}


/* Logo↓ */

.logo-pack {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
}

.logo-title {
    width: 50%;
    margin-top: 32%;
    margin-bottom: 5%;
    margin-left: 38%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.logo-section1 {
    margin-top: 18%;
}

.logo-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.logo-section1-img img {
    width: 100%;
}

.logo-section1 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 13%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.logo-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.logo-section1 ul li {
    white-space: pre-wrap;
}


.logo-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.logo-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.logo-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.logo-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.logo-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}




.logo-section2 {
    margin-top: 18%;
}

.logo-section2-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.logo-section2-img img {
    width: 100%;
}

.logo-section2 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 26%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.logo-section2 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.logo-section2 ul li {
    white-space: pre-wrap;
}


.logo-section2 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.logo-section2 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.logo-section2 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.logo-section2 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.logo-section2 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}




.logo-section3 {
    margin-top: 18%;
}

.logo-section3-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.logo-section3-img img {
    width: 100%;
}

.logo-section3 h3 {
    width: 90%;
    margin-top: 12%;
    margin-left: 28%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.logo-section3 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.logo-section3 ul li {
    white-space: pre-wrap;
}


.logo-section3 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.logo-section3 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.logo-section3 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.logo-section3 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.logo-section3 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}





/* Logo↑ */


/* Name card↓ */

.namecard-pack {
    width: 35%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}

.namecard-title {
    width: 53%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 25%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}


.namecard-section1 {
    margin-top: 18%;
}

.namecard-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.namecard-section1-img img {
    width: 100%;
}

.namecard-section1 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 45%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.namecard-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.namecard-section1 ul li {
    white-space: pre-wrap;
}


.namecard-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.namecard-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.namecard-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.namecard-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.namecard-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}



/* Name card↑ */


/* Banner↓ */

.banner-pack {
    width: 35%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}

.banner-title {
    width: 50%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 30%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.banner-section1 {
    margin-top: 18%;
}

.banner-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.banner-section1-img img {
    width: 100%;
}

.banner-section1 h3 {
    width: 95%;
    margin-top: 12%;
    margin-left: 18%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.banner-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.banner-section1 ul li {
    white-space: pre-wrap;
}


.banner-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.banner-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.banner-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.banner-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.banner-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}




.banner-section2 {
    margin-top: 18%;
}

.banner-section2-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.banner-section2-img img {
    width: 100%;
}

.banner-section2 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 18%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.banner-section2 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.banner-section2 ul li {
    white-space: pre-wrap;
}


.banner-section2 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.banner-section2 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.banner-section2 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.banner-section2 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.banner-section2 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}






/* Banner↑ */


/* poster↓ */

.poster-pack {
    width: 35%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}

.poster-title {
    width: 50%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 34%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.poster-section1 {
    margin-top: 18%;
}

.poster-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.poster-section1-img img {
    width: 100%;
}

.poster-section1 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 6%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.poster-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.poster-section1 ul li {
    white-space: pre-wrap;
}


.poster-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.poster-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.poster-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.poster-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.poster-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}


/* poster↑ */


/* collage↓ */

.collage-pack {
    width: 35%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}

.collage-title {
    width: 50%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 34%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.collage-section1 {
    margin-top: 18%;
}

.collage-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.collage-section1-img img {
    width: 100%;
}

.collage-section1 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 31%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.collage-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.collage-section1 ul li {
    white-space: pre-wrap;
}


.collage-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.collage-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.collage-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.collage-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.collage-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}


.collage-section2 {
    margin-top: 18%;
}

.collage-section2-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.collage-section2-img img {
    width: 100%;
}

.collage-section2 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 31%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.collage-section2 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.collage-section2 ul li {
    white-space: pre-wrap;
}


.collage-section2 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.collage-section2 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.collage-section2 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.collage-section2 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.collage-section2 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}



/* collage↑ */


/* web↓ */

.Web-pack {
    width: 35%;
    margin-top: 23%;
    margin-left: auto;
    margin-right: auto;
}

.web-title {
    width: 50%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 28%;
    font-size: 4vw;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-style: oblique;
    letter-spacing: 0.05em;
}

.web-section1 {
    margin-top: 18%;
}

.web-section1-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.web-section1-img img {
    width: 100%;
}

.web-section1 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 19%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.web-section1 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.web-section1 ul li {
    white-space: pre-wrap;
}


.web-section1 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.web-section1 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.web-section1 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.web-section1 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.web-section1 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}



.web-section2 {
    margin-top: 18%;
}

.web-section2-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.web-section2-img img {
    width: 100%;
}

.web-section2 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 6%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.web-section2 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.web-section2 ul li {
    white-space: pre-wrap;
}


.web-section2 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.web-section2 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.web-section2 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.web-section2 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.web-section2 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}





.web-section3 {
    margin-top: 18%;
}

.web-section3-img {
    box-shadow: 6px 6px 6px -6px rgb(70, 70, 70);
    width: 100%;
}

.web-section3-img img {
    width: 100%;
}

.web-section3 h3 {
    width: 88%;
    margin-top: 12%;
    margin-left: 7%;
    font-size: 2vw;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #0a0a0a;
    font-family: Zen_Maru_Gothic;
}

.web-section3 ul {
    margin-top: 21%;
    margin-bottom: 8%;
    padding-bottom: 8%;
    font-size: 1vw;
    font-family: Zen_Maru_Gothic;
    color: #282828;
    list-style-type: none;
    line-height: 2;
    letter-spacing: 0.01em;
    border-bottom: 0.5px dashed black;
}

.web-section3 ul li {
    white-space: pre-wrap;
}


.web-section3 ul li span {
    margin-left: 5%;
}

.span-color {
    color: #9b9eff;
}

.web-section3 ul li:nth-of-type(1) span {
    margin-left: 8%;
}

.web-section3 ul li:nth-of-type(4) span {
    margin-left: 5%;
}

.web-section3 ul li:nth-of-type(5) span {
    margin-left: 8%;
}

.web-section3 p {
    font-size: 1.1vw;
    white-space: pre-wrap;
    color: #282828;
    font-family: Zen_Maru_Gothic;
    line-height: 2;
    letter-spacing: 0.3em;
}




/* web↑ */


/* .graphic-section1 {
    margin-top: 25%;
    background-color: aqua;
}

.graphic-section1-img {
    width: 100%;
}

.graphic-section1-img img {
    width: 100%;
}

.graphic-section1 h3 {
    font-size: 2vw;
}






.graphic-section2 {
    margin-top: 5%;
    background-color: aqua;
}

.Web-pack {
    width: 35%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    background-color: antiquewhite;
}

.Web-title {
    width: 7%;
    margin-top: 20%;
    margin-bottom: 7%;
    margin-left: 35%;
    font-size: 4vw;
    font-family: Lobster_Two;
    font-style: oblique;
    color: rgb(247, 251, 255);
} */

/* 【 mainここまで 】 */

/* 【 footerここから 】 */

footer {
    margin-top: 150vw;
    height: 15vw;
    background-image: url(../images/background5subbbbb.png);
}

footer p {
    width: 20%;
    margin-left: 47%;
    margin-right: auto;
    padding-top: 1%;
    letter-spacing: 0.2em;
    font-size: 1vw;
    font-family: Dela_Gothic_One;
    color: #8FC0FF;
}

/* 【 footerここまで 】 */