@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* *****************************************************************************
	Global
***************************************************************************** */
html {
	font-size: 16px;
}
:root{
    --color01: #E45282;
    --color02: #54cfca;
    --color03: #e8e87c;
    --color04: #fce9d6;
    --color05: #FBAEA0;
    --color06: #333333;
    --color07: #F7F5F0;
    --color08: #fff;
}
body {
    font-family: 'Noto Sans JP','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN',sans-serif;
    line-height: 1.7;
    letter-spacing: .05em;
    color: var(--color06);
}
img {
    max-width: 100%;
    height:auto;
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
a {
    color: var(--color06);
    text-decoration: none;
}
/* ===================================================================
    Header
=================================================================== */
#header {
    width: 100vw;
    height: 120px;
    position: fixed;
    left: 0;
    top: 0;
    transition: 0.5s;
    z-index: 10;
}
#header.hide {
    transform:translateY(-80px);
  }
#header .inner {
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30px;
    margin-top: 20px;
    background-color: rgb(255, 255, 255, 0.8);
}
.gnav ul {
    width: 100px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 500px;
    font-family: "Amatic SC", sans-serif;
    font-size: 30px;
}
.gnav ul li {
    margin-left: 30px;
}
/* ハンバーガーメニュー関係 */

/* =======ハンバーガーを押して出てくるメニュー画面の設定======= */
header .sp-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background: rgb(251, 174, 160);
    transition: .4s;
    /* ↓ここで通常時は非表示 */
    opacity: 0;
    visibility: hidden;
  }
  header .sp-menu ul {
    width: fit-content;
    margin: 100px auto;
  }
  header .sp-menu ul li a {
    margin-bottom: 24px;
    font-family: "Amatic SC", sans-serif;
    font-size: 30px;
    text-align: center;
    color: #fff;
  }
  /* =======jQueryで付与されるis-activeによって表示====== */
  header .sp-menu.is-active {
    opacity: 1;
    visibility: visible;
  }
  
  /* =======ここからメディアクエリ======= */
  @media screen and (max-width: 834px) {
    /* ↓PCメニューを非表示 */
    header .pc-menu {
      display: none;
    }
    /* ↓ハンバーガーボタンを表示かつ位置などの設定 */
    .ham-btn {
      display: block;
      position: fixed;
      right: 78px;
      top: 19px;
      z-index: 100;
      width: 40px;
      height: 40px;
    }
    /* ham-lineの中身は触らない */
    .ham-line {
      display: block;
      width: 100%;
      height: 2px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #626262;
      transition: 0.4s;
    }
    .ham-line::before,
    .ham-line::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #626262;
      transition: inherit;
    }
    .ham-line:before {
      top: -9px;
    }
    .ham-line:after {
      top: 9px;
    }
    /* ↓jQueryで付与されるis-activeによってボタンが変形する */
    .ham-btn.is-active .ham-line {
      background-color: transparent;
    }
    .ham-btn.is-active .ham-line::before {
      top: 0;
      transform: rotate(45deg);
    }
    .ham-btn.is-active .ham-line::after {
      top: 0;
      transform: rotate(-45deg);
    }
    .header_tel {
        width: 35%;
    }
    .icon02 {
        padding-top: 5%;
    }
}
@media screen and (max-width: 550px) {
    .ham-btn {
        right: 7px;
    }
    .icon02 p {
        display: none;
    }
    .header_tel a {
        justify-content: center;
    }
    .icon02 {
        padding-top: 14%;
    }
    .icon03 {
        padding-right: 31%;
    }
}
/* ハンバーガーメニュー終わり*/

/* ===================================================================
    Main
=================================================================== */
main {
    background-color: var(--color07);
    border: 1px solid var(--color07);
}
.main_visual {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-image: url(../img/bean05.png),
                      url(../img/bean02.png);
    background-position: left 28% top -70%,
                         right -10% top 10%;
}
.top01, .top02 {
    font-family: "Amatic SC";
}
.top01 {
    font-size: 36px;
    margin-top: -15%;
    margin-bottom: -3%;
}
.top02 {
    font-size: 96px;
    letter-spacing: .08em;
    font-weight: lighter;
    white-space: nowrap;
}
.top03 {
    font-size: 26px;
}
.top05 {
    position: absolute;
    z-index: 40;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.self01 {
    position: absolute;
    left: 7%;
    top: 43%;
    z-index: 50;
}
.logomark {
    position: absolute;
    right: 9%;
    top: 49%;
    z-index: 50;
}
.img02 {
    position: absolute;
    left: 25%;
    bottom: -40%;
}
.img03 {
    position: absolute;
    right: 20%;
    bottom: -35%;
}
.top04 {
    display: none;
}
/* ===================================================================
    ANIMATION
=================================================================== */
/* MAINのアニメーション */
.fluid01 {
    width:60vh;/*横幅*/
    height: 45vh;/*縦幅*/
    background:rgb(232, 232, 124, 0.7);/*背景色*/
    animation: fluidrotate2 25s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left: -4%;
    top: -18%;
    transform: rotate(130deg);
}
.fluid02 {
    width:60vh;
    height: 40vh;
    background:rgb(251, 174, 160, 0.7);
    animation: fluid-anim 25s ease 0s infinite;
    position:absolute;
    left: 28%;
    bottom: 1%;
}
.fluid03 {
    width:90vh;/*横幅*/
    height: 70vh;/*縦幅*/
    background:rgb(228, 82, 130, 0.7);/*背景色*/
    animation: fluidrotate2 25s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    right: 8%;
    top: -50%;
    transform: rotate(-0.01turn);
}
.fluid04 {
    width:60vh;
    height: 50vh;
    background:rgb(232, 232, 124, 0.7);
    animation: fluid-anim 25s ease 0s infinite;
    position:absolute;
    left: -2%;
    top: 65%;
    transform:  rotate(50deg);
}
.fluid05 {
    width:70vh;/*横幅*/
    height: 55vh;/*縦幅*/
    background:rgb(252, 233, 214, 0.8);/*背景色*/
    animation: fluidrotate2 25s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    left: -23%;
    top: 35%;
    transform: rotate(100deg);
}
.fluid06 {
    width:45vh;/*横幅*/
    height:45vh;/*縦幅*/
    background:rgb(251, 174, 160, 0.7);/*背景色*/
    animation: fluidrotate2 25s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    right: 1%;
    bottom: -20%;
    transform: rotate(95deg);
}
.fluid07 {
    width:60vh;
    height: 50vh;
    background:rgb(232, 232, 124, 0.7);
    animation: fluid-anim 25s ease 0s infinite;
    position:absolute;
    right: -5%;
    top: 5%;
    transform: rotate(95deg);
}
.fluid08 {
    width:60vh;
    height: 50vh;
    background:rgb(232, 232, 124, 0.7);
    animation: fluid-anim 25s ease 0s infinite;
    position:absolute;
    left: -16%;
    top: 35%;
    transform: rotate(95deg);
}
.fluid09 {
    width:50vh;/*横幅*/
    height: 40vh;/*縦幅*/
    background:rgb(228, 82, 130, 0.7);/*背景色*/
    animation: fluidrotate2 25s ease 0s infinite;/*アニメーションの設定*/
    position:absolute;
    right: 5%;
    transform: rotate(-0.04turn);
}
.fluid10 {
    width:60vh;
    height: 40vh;
    background:rgb(83, 207, 203, 0.7);
    animation: fluidrotate 25s ease 0s infinite;
    position:absolute;
    bottom: 2px;
    left: -5%;
    transform: rotate(100deg);
}
@keyframes fluidrotate { 
    0%, 100% {border-radius: 70% 37% 63% 25%/55% 48% 52% 45%;}
    14% {border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluidrotate2 { 
    0%, 100% {border-radius: 80% 37% 54% 60%/55% 48% 52% 45%;}
    14% {border-radius: 50% 8cm 54% 26%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluid-anim {
    0%    { border-radius: 75% 35% 55% 45% / 65% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}
/* MAINのアニメーション終わり*/

/* ===================================================================
    HOVER
=================================================================== */
.zoom-box a {
    display: inline-block;
    overflow: hidden;
    transition-duration: .5s;
}
  .c-bnr.zoom {
    display: block;
    transition-duration: .5s;
    overflow: hidden;
}
  .c-bnr.zoom:hover {
    transform: scale(1.05);
}
img.webimg01.c-bnr.zoom.aos-init.aos-animate:hover {
    transition: 0.5s;
}
.hover_blue:hover {
    color:var(--color02);
}
/* ===================================================================
    TEXT
=================================================================== */
.text {
    height: 1370px;
    text-align: center;
    background-image: url(../img/bean01.png),
                      url(../img/bean07.png),
                      url(../img/bean09.png),
                      url(../img/bean08.png),
                      url(../img/bean03.png);
    background-position: left 50px,
                         left center,
                         left bottom,
                         right bottom,
                         right center;
}
.text02 {
    font-size: 28px;
    letter-spacing: .08em;
    line-height: 50px;
    padding-top: 500px;
    padding-bottom: 80px;
}
.text03 {
    font-size: 18px;
    letter-spacing: .08em;
    width: 70%;
    line-height: 40px;
    padding-left: 30%;
}
.text04 {
    position: relative;
    overflow: hidden;
    height: 1370px;
}
/* ===================================================================
    WEB
=================================================================== */
.web {
    background-color: var(--color04);
    text-align: center;
}
#web:after {
    content: url(../img/head01.svg);
    position: absolute;
    width: 10%;
    top: 47%;
    right: 45%;
    z-index: -1;
}
#web {
    padding: 120px 0;
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
}
.webimg01 {
    padding-bottom: 80px;
}
.web_block01 {
    display: flex;
    flex-direction: row;
    padding-bottom: 80px;
}
.banner {
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
    padding-bottom: 100px;
}
.banner:after {
    content:url(../img/head07.svg) ;
    position: absolute;
    width: 10%;
    top: 20%;
    right: 50%;
    z-index: -1;
}
.banner_block01 {
    display: flex;
    justify-content: space-around;
    padding: 0 90px 80px 90px;
    z-index: 1;
}
.banner_block02 {
    padding-bottom: 120px;
    display: flex;
    justify-content: space-evenly;
}
.banner_w {
    background-image: url(../img/bean03.png);
    background-position: right -50px top 10px;
    overflow: hidden;
    position: relative;
}
.luminous {
    z-index: 6;
}
/* ===================================================================
    GRAPHICS
=================================================================== */
.graphic {
    text-align: center;
    padding-bottom: 120px;
    position: relative;
    background-image: url(../img/bean07.png);
    background-position: left -10px bottom;
}
#graphic {
    padding: 120px 0;
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
}
#graphic:after {
    content: url(../img/head02.svg);
    position: absolute;
    width: 10%;
    top: 47%;
    right: 42%;
    z-index: -1;
}
.gra_block01 {
    display: flex;
    justify-content: space-around;
    padding-bottom: 80px;
}
.lum-lightbox-inner img {
    max-width: 100%;
    max-height:100%
}
.lum-lightbox-inner {
    overflow-y:scroll;
    z-index:10000;
}

/* ===================================================================
    MOVIE
=================================================================== */
.movie {
    text-align: center;
    padding-bottom: 120px;
    background-image: url(../img/bean02.png);
    background-position: right top;
    position: relative;
}
#movie {
    padding: 120px 0;
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
}
#movie:after {
    content: url(../img/head04.svg);
    position: absolute;
    width: 10%;
    top: 47%;
    right: 42%;
    z-index: -1;
}

/* ===================================================================
    PROFILE
=================================================================== */
.profile {
    padding-bottom: 120px;
    text-align: center;
}
.profil02 {
    background-image: url(../img/bgimg01.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 120px;
    height: 800px;
    color: #fff;
    padding-top: 140px;
}
#profile {
    padding: 120px 0;
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
}
#profile:after {
    content: url(../img/head05.svg);
    position: absolute;
    width: 10%;
    top: 47%;
    right: 42%;
    z-index: -1;
}
h4 {
    font-family: "Amatic SC", sans-serif;
    font-size: 60px;
    font-weight: lighter;
}
h3 {
    padding-top: 40px;
}
h3, .pro_text01{
    font-size: 18px;
    font-weight: lighter;
    padding-bottom: 5px;
}
.pro_text03 {
    text-align: center;
    width: 60%;
    height: 550px;
    padding: 0 180px;
    position: relative;
    z-index: 2;
    background-image: url(../img/prof01.svg);
    background-position: center;
}
.pro_text02 {
    font-size: 24px;
    font-weight: lighter;
    padding-bottom: 30px;
}
.name01 {
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
}
.skill {
    padding-top: 120px;
    font-family: "Amatic SC";
    font-size: 48px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
}
.skill:after {
    content: url(../img/head06.svg);
    position: absolute;
    width: 10%;
    top: 76%;
    right: 42%;
    z-index: -1;
}
.skill_list01 {
    display: flex;
    justify-content: space-around;
    height: 300px;
    width: 70%;
    align-items: center;
    font-size: 30px;
    font-weight: lighter;
    margin: 0 200px;
}
.list01 {
    display: flex;
}
.list01 p {
    width: 50%;
}
/* ===================================================================
    CONTACT
=================================================================== */
.contact {
    height: 450px;
    background-color: var(--color01);
    color: #fff;
    text-align: center;
}
#contact {
    padding-top: 110px;
    padding-bottom: 20px;
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
}
.con_text01 {
    font-size: 32px;
    font-weight: lighter;
    padding-bottom: 110px;
}
/* ===================================================================
    FOOTER
=================================================================== */
footer small{
    display: block;
    text-align: center;
    padding: 16px;
  }
/* ==================================================================
    ハンバーガーボタン
=================================================================== */
/* =======ハンバーガーを押して出てくるメニュー画面の設定======= */
 header .sp-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background: rgb(214, 110, 111);;
    transition: .4s;
    /* ↓ここで通常時は非表示 */
    opacity: 0;
    visibility: hidden;
}
header .sp-menu ul {
width: fit-content;
margin: 100px auto;
}
header .sp-menu ul li {
    margin-bottom: 24px;
    font-family: "游ゴシック","Yu Gothic" ,Yugothic sans-serif;
    font-size: 18px;
    text-align: center;
    color: #fff;
}
/* =======jQueryで付与されるis-activeによって表示====== */
header .sp-menu.is-active {
    opacity: 1;
    visibility: visible;
}
/* =======ここからメディアクエリ======= */
@media screen and (max-width: 834px) {
    /* ↓PCメニューを非表示 */
    header .pc-menu {
      display: none;
}
/* ↓ハンバーガーボタンを表示かつ位置などの設定 */
.ham-btn {
    display: block;
    position: fixed;
    right: 56px;
    top: 19px;
    z-index: 100;
    width: 40px;
    height: 40px;
}
/* ham-lineの中身は触らない */
.ham-line {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color03);
    transition: 0.4s;
}
.ham-line::before,
.ham-line::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color03);
    transition: inherit;
}
.ham-line:before {
    top: -9px;
}
.ham-line:after {
    top: 9px;
}
/* ↓jQueryで付与されるis-activeによってボタンが変形する */
.ham-btn.is-active .ham-line {
    background-color: transparent;
}
.ham-btn.is-active .ham-line::before {
    top: 0;
    transform: rotate(45deg);
}
.ham-btn.is-active .ham-line::after {
    top: 0;
    transform: rotate(-45deg);
}
.header_tel {
    width: 35%;
}
.icon02 {
    padding-top: 5%;
}
}
@media screen and (max-width: 480px) {
    .ham-btn {
        right: 7px;
    }
    .icon02 p {
        display: none;
    }
    .header_tel a {
        justify-content: center;
    }
    .icon02 {
        padding-top: 14%;
    }
    .icon03 {
        padding-right: 31%;
    }
}
.banner_w {
    background-position: right -140px top 3px;
}
/* ===================================================================
    レスポンシブ
=================================================================== */
@media screen and (min-width: 835px) {
.movie02, .movie03 {
        display: none;
    }
}
@media screen and (max-width: 834px) {
/*ここに幅が 834px 以下で適用される CSS を入力*/
.logo02 {
    width: 30%;
}
.movie01, .movie02 {
    display: none;
}
.inner {
    width: calc((100% - 40px)/2);
}
#header .inner {
    border-radius: 32px;
    margin-top: 20px;
    height: 35%;
}
.top01 {
    font-size: 30px;
    margin-top: 1%;
}
.top02 {
    font-size: 92px;
    line-height: 1.25em;
}
.main_visual {
    background-position: left 37% top -85%,
                         right -48% top 58%;
}
.self01 {
    left: -4%;
    top: 51%;
}
.logomark {
    right: 7%;
    top: 56%;
    width: 18%;
}
.top04 {
    display: block;
}
.top03 {
    font-size: 22px;
    padding-top: 18px;
}
.img03 {
    right: 2%;
    bottom: -34%;
}
.img02 {
    left: -9%;
    bottom: -35%;
}
.text02 {
    letter-spacing: 0.12em;
    line-height: 55px;
    padding-top: 452px;
    padding-bottom: 92px;
}
.text03 {
    letter-spacing: .12em;
    line-height: 46px;
}
.text {
    background-position: left -152px top 63px,
                         left -229px center,
                         left -63px bottom,
                         right -236px bottom 36px,
                         right -120px center;
}
#web:after {
    width: 15%;
    top: 42%;
    right: 41%;
}
.banner:after {
    width: 15%;
    top: 11%;
    right: 48%;
}
#graphic:after {
    width: 15%;
    top: 41%;
    right: 36%;
}
#movie:after {
    width: 15%;
    top: 42%;
    right: 40%;
}
#profile:after {
    width: 15%;
    top: 43%;
    right: 38%;
}
.skill:after {
    width: 15%;
    top: 55%;
    right: 44%;
}
.movie {
    background-position: right -146px top 41px;
}
.profil02 {
    background-position-x: 62%;
}
.pro_text03 {
    padding: 76px 30px;
}
h4 {
    line-height: 1.2em;
}
.pro_text01 {
    font-size: 16px;
    padding-bottom: 0px;
}
h3 {
    display: none;
}
.pro_text02 {
    font-size: 20px;
    padding-bottom: 16px;
}
.skill_list01 {
    height: 200px;
    width: 100%;
    font-size: 26px;
    margin: 0px -6px;
}
/* MAINのアニメーション */
.fluid01 {
    left: -25%;
    top: -7%;
}
.fluid02 {
    left: 33%;
    bottom: 2%;
    transform: rotate(165deg);
}
.fluid03 {
    right: -47%;
    top: -33%;
}
.fluid04 {
    display: none;
}
.fluid05 {
    left: -47%;
    top: 33%;
    transform: rotate(118deg);
}
.fluid06 {
    display: none;
}
.fluid07 {
    right: -10%;
    top: 7%;
}
.fluid08 {
    left: -22%;
    top: 57%;
}
.fluid09 {
    right: 2%;
    top: -92px; 
    width: 35%;
}
.fluid10 {
    bottom: -64px;
    left: -26%;
}
@keyframes fluidrotate { 
    0%, 100% {border-radius: 70% 37% 63% 25%/55% 48% 52% 45%;}
    14% {border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluidrotate2 { 
    0%, 100% {border-radius: 80% 37% 54% 60%/55% 48% 52% 45%;}
    14% {border-radius: 50% 8cm 54% 26%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluid-anim {
    0%    { border-radius: 75% 35% 55% 45% / 65% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}
/* MAINのアニメーション終わり*/

@media screen and (max-width: 550px) {
/*ここに幅が 550px 以下で適用される CSS を入力*/
.logo02 {
    max-width: 100px;
}
.movie03 {
    display: none;
}
.movie02 {
    display: block;
}
.inner {
    padding: 0 10px;
}
.ham-btn {
    right: 47px;
}
.top01 {
    display: none;
}
.top02 {
    font-size: 50px;
    line-height: 1.2em;
    letter-spacing: revert;
}
.top03 {
    font-size: 16px;
    padding-top: 10px;
}
.self01 {
    left: 24%;
    top: 62%;
    width: 46%;
}
.logomark {
    right: 33%;
    top: 15%;
    width: 33%;
}
.main_visual {
    background-image: none;
}
.img02 {
    left: -23%;
    bottom: -55%;
}
.img03 {
    display: none;
}
.text {
    height: 1370px;
    text-align: center;
    background-image:  url(../img/bean07.png), url(../img/bean09.png), url(../img/bean03.png);
    background-position: right 200px top 250px, left -177px bottom, right -201px bottom 361px;
}
.text03 {
    font-size: 16px;
    width: 90%;
    line-height: 40px;
    padding-left: 12%;
}
#web {
    font-size: 50px;
}
#web:after {
    width: 27%;
    top: 48%;
    right: 36%;
}
.banner {
    font-family: "Amatic SC", sans-serif;
    font-size: 72px;
    font-weight: lighter;
    z-index: 1;
    position: relative;
    padding-bottom: 100px;
}
.webimg01 {
    padding-bottom: 20px;
}
.web_block01 {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}
.webimg02 {
    padding-bottom: 20px;
}
.webimg03 {
    padding-bottom: 20px;
}
.webimg04 {
    padding-bottom: 60px;
}
.banner {
    font-size: 50px;
}
.banner:after {
    width: 27%;
    top: 17%;
    right: 43%;
}
#graphic {
    font-size: 50px;
}
#graphic:after {
    width: 27%;
    top: 47%;
    right: 30%;
}
#movie {
    font-size: 50px;
}
#movie:after {
    width: 27%;
    top: 48%;
    right: 35%;
}
#profile {
    font-size: 50px;
}
#profile:after {
    width: 27%;
    top: 48%;
    right: 34%;
}
.name01 {
    font-size: 50px;
}
.skill {
    font-size: 40px;
    padding-bottom: 60px;
}
.skill:after {
    width: 27%;
    top: 58%;
    right: 42%;
}
.banner_block01 {
    display: block;
    padding: 0 10px 0 10px;
}
.profil02 {
    background-position-x: 67%;
}
.skill_list01 {
    width: 95%;
    font-size: 23px;
    margin: 0px -3px;
}
.skill_list01 {
    flex-direction: column;
}
h4 {
    line-height: 1.1em;
    font-size: 44px;
}
.pro_text01 {
    font-size: 14px;
    padding-top: 20px;
}
.pro_text03 {
    padding: 9px 3px;
}
.profil02 {
    height: 600px;
    padding-top: 80px;
    background-size: 276%;
}
.pro_text03 {
    width: 62%;
    height: 668px;
}
.pro_text02 {
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: normal;
}
h4 {
    padding-bottom: 10px;
    font-size: 48px;
    font-weight: normal;
}
.list01 p {
    line-height: 45px;
}
#contact {
    font-size: 50px;
}
.con_text01 {
    font-size: 24px;
}
.graphic {
    background-position: left -221px bottom;
}
.banner_block02 {
    display: block;
}
.gra_block01 {
    display: block;
    padding-bottom: 0;
}

/* MAINのアニメーション */
.fluid01 {
    left: -44%;
    top: -22%;
}
.fluid11 {
    width: 60vh;
    height: 39vh;
    background: rgb(83, 207, 203, 0.7);
    animation: fluidrotate2 25s ease 0s infinite;
    position: absolute;
    left: 67%;
    top: 64%;
    transform: rotate(192deg);
}
.fluid02 {
    left: 33%;
    bottom: 2%;
    transform: rotate(165deg);
}
.fluid03 {
    right: -101%;
    top: -42%;
}
.fluid04 {
    display: none;
}
.fluid05 {
    left: -88%;
    top: 36%;
}
.fluid06 {
    display: none;
}
.fluid07 {
    right: -42%;
    top: 7%;
}
.fluid08 {
    display: none;
}
.fluid09 {
    right: 65%;
    top: -138px;
    transform: rotate(-.7turn);
}
.fluid10 {
    bottom: -114px;
    left: -65%;
    transform: rotate(195deg);
}
@keyframes fluidrotate { 
    0%, 100% {border-radius: 70% 37% 63% 25%/55% 48% 52% 45%;}
    14% {border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluidrotate2 { 
    0%, 100% {border-radius: 80% 37% 54% 60%/55% 48% 52% 45%;}
    14% {border-radius: 50% 8cm 54% 26%/49% 60% 40% 51%;}
    28% {border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;}
    42% {border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;}
    56% {border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;}
    70% {border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;}
    84% {border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;}
}
@keyframes fluid-anim {
    0%    { border-radius: 75% 35% 55% 45% / 65% 50% 55% 45%; }
    12.5% { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    25%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    37.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    50%   { border-radius: 55% 95% 65% 90% / 75% 65% 85% 70%; }
    62.5% { border-radius: 60% 40% 50% 45% / 60% 40% 60% 40%; }
    75%   { border-radius: 60% 75% 40% 80% / 70% 70% 60% 65%; }
    87.5% { border-radius: 40% 60% 55% 45% / 50% 60% 40% 50%; }
    100%  { border-radius: 65% 35% 55% 45% / 55% 50% 55% 45%; }
}
/* MAINのアニメーション終わり*/
}
}