body {
    background-color: #fff;
    font-family: sans-serif;
    overflow-y: scroll;
}
/* トップに戻るボタン */
html {
    scroll-behavior: smooth;
}
.back_top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: inline-block;
    padding: 25px 15px;
    background-color: #ffff66;
    border-radius: 9999px;
    color: #000000;
    text-decoration: none;
    opacity: 0.9;
    font-size: 90%;
}
.back_top:hover {
    background-color: #ffcc33;
    opacity: 1;
}
/* トップに戻るボタン */
header {
    height: auto;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 0;
    text-align: center;
}
header h1 {
    margin: 0;
    padding-top: 15px;
}
.border1 {
    border: 1.5px solid #000;
}
header h1 img {
    width: 300px;
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
header a {
    text-decoration: none;
    color: black;
}
nav ul {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 400px;
    font-size: 160%;
    font-weight: bold;
    color: #333;
}
 nav li a:hover{
    color: rgb(115, 166, 173);
 }
 #grid {
    background-image: url(../images/koushi.png);
    background-size: cover;
}
#top_image {
    width: 1200px;
    margin:0 auto;
    gap: 8%;
    padding: 170px 25px;
    justify-content: center;
    display: flex;
    /* flex-direction:row-reverse; 文字とくま反転 */
}
#top_text {
    max-width: 350px;
    height: auto;
    padding-top: 80px;
}
#top_text img {
    max-width: 150%;
    height: auto;
}
.name {
    padding-bottom: 10px;
}
/* #top_text p {
    line-height: 2.2em;
    color: #525252;
    max-width: 100%;
    word-break:keep-all
} */

.nav_text{
    max-width: 350px;
    height: auto;
}
.detail {
    margin-top: 70px;
    font-size: 240%;
    color: #4a4a4a;
    line-height: 2em;
}
.buttn {
    max-width: 165px;
    height: auto;
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
}

#tamagokuma_illust {
    max-width: 350px;
    height: auto;
}
.face img {
    width: 280px;
    height: auto;
}
.shadow img{
    width: 230px;
    height: auto;
    padding-left: 38px;
    padding-top: 8px; 
}
.works_nav_contents {
    background-color: #d0e6fc;
    text-align: center; /* これ消すとworksが右による*/
    margin: 0 auto;
}
.top_back_line {
    background-image: url(../images/back_line.png);
    margin: 0 auto;
    max-width: 100%;
}
.works_top_in {
    max-width: 100%;
    display: flex;
    justify-content: center;
    gap: 8%;
    margin: 0 10px;
}
#top_art_works {
    border-top-left-radius: 300% 800px;
    border-top-right-radius: 300% 800px;
    background-color: #082054;
    padding-bottom: 20px;
    text-align: center;
    margin: 0 auto;
}
#top_back_line {
    margin: 0 auto;
    text-align: center;
}
.art_work_in {
    max-width: 1100px;
    color: #fff;
    margin: 0 auto;
    padding-bottom: 20px;
}
.top_works h1 {
    font-size: 300%;
    padding-top: 50px;
}
.art_work_in h1 {
    font-size: 300%;
    padding-top: 50px;
}
.top_bnr_link, .top_sito_link {
    max-width: 450px;
    height: 480px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 130%;
    margin: 0 10px;
}
.top_sito_link img {
    margin-top: 33px;
    width: 350px;
    height: auto;
}
.top_bnr_link img {
    width: 300px;
    height: auto;
    margin: 0 35px;
}
.top_sito_link p ,.top_bnr_link p  {
    padding-top: 20px;
}

/*---------------- worksの中身 ----------------------*/
.works_top_contents {
    width: 1100px;
    padding-bottom: 50px;/*水色背景の延長*/
    margin: 0 auto;
}
.top_in_width {
    width: 1100px;
    margin: 0 auto;
}
.top_sito_link img{
    max-width: 400px;
    height: auto;
}
.top_bnr_link img{
    max-width: 400px;
    height: auto;
}
.works_top_in h2{
    font-size: 120%;
    font-weight: bold;
    color: #434343;
    padding-bottom: 15px;
}
/*-------------------　詳細ボタン　---------------------*/
.syousai {
    margin-bottom: 40px;
}
.syousai p {      
    margin-top: 60px;
    font-size: 120%;
}
.syousai a {
  display: inline-block;
  padding: 15px 50px;
  text-decoration: none;
  background: #b9caee; /*ボタン色*/
  color: #000000;
  border-bottom: solid 4px #5c6881;
  border-radius: 50px;
}
.syousai a:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.syousai p a:hover {
    color: #ffffff;
    background-color: #566991;
}
/* ------------------- Art Work ----------------------*/
.tenji_photo { 
    max-width: 400px;
}
.tenji_text {
    max-width: 600px;
    padding: 0 23px 0 0;
}
.tenji_photo img {
    width: 400px;
    height: 300px;
    padding-top: 10px;
    border-radius: 30px;
    padding: 23px;
}
.art_work_syoukai {
    margin-top: 50px;
    display: flex;
    gap: 5%;
    justify-content: center;
    background-color: #679cac;
    border-radius: 50px;
    padding: 30px 0;
    margin-bottom: 50px;
    margin: 20px;
}
.tenji_text {
    padding-left: 0%;
    padding-top: 40px;
}
.tenji_text p{
    font-size: 160%;
    line-height: 2em;
    text-align: left;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.top_about_nav {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
.top_about_nav h1 {
    font-size: 300%;
    padding-top: 50px;
    margin-bottom: 20px;
}
.about_in {
    display: flex;
    gap: 5%;
}
.about_photo img {
    width: 380px;
    height: auto;
    max-width: 100%;
    margin: 0 10px;
}
.about_text {
    max-width: 100%;
    margin-top: 40px;
    font-size: 150%;
    text-align: left;
    background-color: #e0e0e0;
    padding: 15px 40px; 
    border-radius: 50px;
}
.about_text p {
    line-height: 2em;
    text-indent: 1em;
}
.about_text h2 {
    font-size: 120%;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #5d5d5d;
}
.top_skill {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 5px;
}
.skill_icon0, .skill_icon1{
    display: block;
    width: 70px;
    height: 105px;
    max-width: 100%;
}
.skill_icon1 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    max-width: 110%;
}
/*-----------------------　フッター　--------------------------------------*/
footer {
    background-color: #152b5f;
    color: #fff;
    font-size: 150%;
    text-align: center;
    margin: 0 auto;
}
/* ----------------------プロフィール　CSS --------------------------------- */
#about_image {
    margin: 0 auto;
    text-align: center;
}
.name_about {
    width: 800px;
    max-width: 100%;
}
#tamagokuma_illust_about p {
    font-size: 130%;
    color: #333;
    padding-top: 5px;
}
#tamagokuma_illust_about p strong{
    font-size: 130%;
    color: #d4c92d;
}
#profile_box {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 80px;
    padding: 0 15px;
    /* word-break:keep-all; */
}
#profile_box h1{
    margin: 0;
    margin-top: 80px;
    font-size: 250%;
    color: #525252;
}
#profile_img {
    max-width: 1000px;
    padding-top: 50px;
    padding-bottom: 50px;
    height: auto;
    margin: 0 auto;
}
.profile-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 150%;
    text-align: left;
}
.skill-box, .skill-box2 {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    font-size: 150%;
    word-break:keep-all;
    width: 100%;
}
.skill-box {
    line-height: 1.8em;
}
.skill-box li {
    display: flex;
    font-size: 90%;
    padding: 8px 0 5px 0;
    border-bottom: 3px dotted #dbdbdb;
}
.skill-box2 li {
    display: flex;
    font-size: 90%;
    padding: 5px 0;
}
.skill_icon {
    margin: 0  7px;
    width: 100px;      /* PC時のアイコンサイズ */
    aspect-ratio: 1;  /* 正方形を維持 */
}
.skill_icon img {
    width: 100px;
    height: 100px;
}
.about-text {
    width: 800px;
    margin: 0 auto;
    margin-top: 40px;
    line-height: 3.5em;
}
.about-text h2 {
    font-size: 190%;
    color: #0b175e;
    background-color: #77a6d4;
    border-radius: 20px;
}
.skill {
    max-width: 800px;
    margin: 0 auto;
    line-height: 3.5em;
}
.skill-box ul,.skill-box2 ul {
    list-style-type: none;
    padding-left: 20px;
}
.skill h2 {
    text-align: center;
    font-size: 190%;
    color: #0b175e;
    background-color: #77a6d4;
    border-radius: 20px;
    margin-top: 40px;
}
.skill ul li {
    color: #2e2e2e;
}
/* ----------------------作品　CSS--------------------------------- */
#works_box1, 
#works_box2,
#works_box3 {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 0 15px;
}
.title_font {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
}
.title_font h1 {
    font-size: 250%;
    color: #525252;
}
#works_box1 p,
#works_box2 p,
#works_box3 p {
    font-size: 160%;
    color: #152b60;
    text-align: center;
}
.b-1, .b-2 ,.b-3, .b-4 {
    font-size: 120%;
    color: #333;
    text-align: left;
}
.web_sito  strong {
    padding-bottom: 20px;
    color: #152b60;
    text-align: center;
}
.web_sito {
    padding-top: 50px;
    margin-bottom: 150px;
}
.website_image img {
    max-width: 100%;
    height: auto;
    margin-top: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease-in-out;
}
.toresu p {
    margin-top: 60px;
}
.flyre_img {
    text-align: center;
}
.flyre_img img {
    max-width: 100%;
    height: auto;
    margin-top: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease-in-out;
}
/* ----------------------------バナー　作品--------------------------------- */
.bunr_img{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
    margin-top: 40px;
}
.bunr {
    margin-top: 60px;
    text-align: center;
    margin-bottom: 150px;
}
.bunr_img img {
    width: 400px;
    height: auto;
    padding-bottom: 0;
    margin-top: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
}
.bunr_img img:hover {
    transform: translate(0, 5px);
    box-shadow: none;
    opacity: 0.9;
}
.website_image img:hover {
    transform: translate(0, 5px);
    box-shadow: none;
    opacity: 0.8;
}
.flyre_img img:hover {
    transform: translate(0, 5px);
    box-shadow: none;
    opacity: 0.8;
}
/* -------------------------トレース作品------------------------------- */
.t-1 {
    display: flex;
    gap: 80px;
    margin: 30px 0;
    justify-content: center;
    font-size: 80%;
}
.t-1 h2 {
    text-align: center;
    font-size: 160%;
    color: #2b2b2b;
}
.t-1 img {
    width: 400px;
    max-width: 100%;
    height: auto;
}
/* ----------------------作品 詳細　CSS--------------------------------- */
#works_box_2 {

}
.web_sito_contents {
    padding-top: 20px;
}
#works_box_2 {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 0 15px;
    padding-bottom: 100px;
}
.title_font h1,#works_box_2 h1  {
    margin: 0 20px;
    margin-top: 80px;
    font-size: 250%;
    color: #525252;
}
.web_sito_2 p {
    font-size: 160%;
    color: #152b60;
    text-align: center;
    padding-top: 50px;
}
.web_sito_2 img {
    padding-left: 10px;
}
.site_introduction {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
.website_image img {
    padding-bottom: 0;
}
.website_image p {
    color: #2d2d2d !important;
    font-size: 120% !important;
    text-align: left !important;
}
.event img {
    width: 400px;
}
.event {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5%;
}
.buner_ichiran {
    background-color: #ffffff;
    padding: 0 30px;
    padding-top: 80px;
    border-radius: 10px;
    text-align: center;
}
.buner_ichiran img {
    max-width: 80%;
    height: auto;
}
.buner_ichiran p {
    padding-bottom: 100px;
}
.logo {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}
.buner_ichiran h2 {
    padding-bottom: 90px;
}
/* ---------------バナー　作品詳細ページ　------------------ */
.title strong{
    font-size: 200%;
    text-align: left;
    color: #333;
}
.title p{
    padding-bottom: 30px;
}
.contents h2 {
    padding-left: 20px;
    color: #2e2e2e;
}
.contents p {
    padding-left: 40px;
    font-size: 120%;
    padding-bottom: 50px;
}
#banner_box {
    width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
}
#banner_box h1 {
    margin: 0;
    margin-top: 80px;
    font-size: 250%;
    color: #525252;
}
.banner_box2 p {
    font-size: 160%;
    color: #152b60;
    text-align: center;
    padding-top: 50px;
}
.banner_contents {
    width: 600px;
    height: auto;
    margin: 0 auto;
    margin-top: 40px;
}
.banner_introduction {
    width: 1100px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ----------------------アート　CSS--------------------------------- */
#art_box {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;

}
#art_box h1 {
    margin: 0;
    margin-top: 80px;
    font-size: 250%;
    color: #525252;
}
.art_contents {
    margin-top: 40px;
}
.art_Career {
    max-width: 900px;
    margin: 0 auto;
    background-color: #dfe7fa;
    padding: 30px;
    border-radius: 50px;
}
.art_Career h2 {
    color: #2e2e2e;
    font-size: 180%;
}
.art_Career p {
    font-size: 140%;
}
.syoukai_text {
    width: 860px;
    margin: 0 auto;
}
.art_title h2{
    font-size: 250%;
    height: auto;
    padding-top: 50px;
    color: #152b60;
}
.art_photo_1 img{
    width: 100%;
    height: auto;
    padding-top: 30px;
}
.bond_layout {
    display: flex;
    gap: 10px;
    padding-top: 30px;
    padding-bottom: 60px;
    margin-bottom: 60px;
    justify-content: space-between;
    border-bottom: 3px dotted #979797;
}
.bond_career {
    padding-top: 70px;
    width: 480px;
    height: auto;
    font-size: 150%;
    margin: 0 20px;
}
.strlap {
    width: 500px;
    height: auto;
}
.art_title img{
    width: 550px;
    height: auto;
    padding-top: 50px;
}
.art_title2 {
    width: 210px;
    height: auto;
    padding-top: 100px;
}
.art_photo_2 {
    display: flex;
    justify-content: space-between;
}
.art_photo_2 .ap-1,.ap-2 {
    width: 430px;
    height: auto;
    padding-top: 20px;
}
.bond_layout_2 {
    width: 900px;
    height: auto;
    padding-top: 60px;
    margin: 0 auto;
    padding-bottom: 50px;
    text-align: left;
    font-size: 180%;
}
#art_works_2 {
    background-color: #d6d8ee;
    border-top-left-radius: 100% 300px;
    border-top-right-radius: 100% 300px;
    padding: 20px;
    padding-bottom: 100px;
}
.art_works_waku {
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}
.art_photo_3 {
    max-width: 100%;
    height: auto;
    text-align: center;
}
.art_photo_3 img {
    padding-bottom: 0px;
}
.a-1 {
    padding-top: 80px;
    width: 800px;
    height: auto;  
}
.a-2 {
    padding-top: 80px;
    width: 600px;
    height: auto;  
}.a-3 {
    padding-top: 80px;
    width: 600px;
    height: auto;  
}.a-4 {
    padding-top: 80px;
    width: 800px;
    height: auto;  
}.a-5 {
    padding-top: 80px;
    width: 600px;
    height: auto;  
}.a-6 {
    padding-top: 80px;
    width: 600px;
    height: auto;  
}
/* .art_flex {
    display: flex;
    justify-content: center;
    gap: 5px;
} */
.art_flex set {
    max-width: 40%;
    height: auto;
}
.art_photo_3 p{
    /* background-color: #fafafa; */
    color: #2d2d2d;
    font-size: 150%;
    padding: 5px 50px;
    border-radius: 80px;
    max-width: 60%;
    margin: 0 auto;
}
.art_photo_3 p strong {
    font-size: 120%;
}
/* .art_flex p {
    max-width: 100%;
    height: auto;
} */
/* PC（幅1000px以上）の場合：横幅50%、中央寄せ */
@media (min-width: 1000px) {
header{
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        /* 左右中央寄せ */
    }
}
/*------------レスポンシブCSS　999px以下 -------------------*/
@media (max-width:999px) {
 /* 基本のレスポンシブ */
header,
#top_image,
#profile_box,
.about-text,
#works_box1,
#works_box2,
#works_box3,
#art_box,
.art_Career,
#works_box_2,
#banner_box,
.site_introduction,
.banner_introduction,
.syoukai_text,
.top_in_width,
.works_top_contents
 {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
header {
    padding: 10px;
}
header img{
    max-width: 100%;
    height: auto;
    margin: 0;
}
nav ul li {
    font-size: 80%;
}
nav ul {
    gap: 300px;
}
#top_image {
    padding-top: 30px;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
    gap: 0%;
}
#top_text img {
    max-width: 90%;
    height: auto;
    padding-top: 50px;
}
#top_text p{
    max-width: 280px;
}
.face img {
    max-width: 80%;
    height: auto;
    padding-top: 60px;
}
.shadow img {
    max-width: 70%;
    height: auto;
    padding-top: 10px; 
}
.nav_text {
    padding-top: 50px;
    font-size: 70%;
}
/* トップへ戻るボタン */
.back_top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 20px 12px;
    font-size: 70%;
}
/* -----------　top works --------------- */
.top_bnr_link, .top_sito_link {
    max-width: 380px;
    height: 430x;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 120%;
}
.top_sito_link img{
    max-width: 280x;
    height: auto;
}
.top_bnr_link img{
    max-width: 280x;
    height: auto;
    margin: 0 10px;
}
/* -----------　top artworks --------------- */
.art_work_in {
    max-width: 100%;
    color: #fff;
    margin: 0 auto;
    padding-bottom: 20px;
}
.art_work_in h1 {
    font-size: 300%;
    padding-top: 50px;
}
.tenji_photo { 
    max-width: 400px;
}
.tenji_text {
    max-width: 500px;
    padding: 0 23px 0 0;
}
.art_work_syoukai {
    margin-top: 50px;
    gap: 3%;
    border-radius: 50px;
    padding: 30px 0;
    margin-bottom: 50px;
    margin: 20px;
}
.tenji_text {
    padding-left: 0%;
    padding-top: 20px;
}
.tenji_text p{
    font-size: 150%;
    line-height: 2em;
    text-align: left;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_in {
    display: flex;
    gap: 3%;
}
.about_photo img {
    width: 300px;
    height: auto;
    max-width: 100%;
    margin: 0 10px;
}
.about_text {
    max-width: 100%;
    margin-top: 0px;
    margin: 0 10px;
    font-size: 120%;
    text-align: left;
    background-color: #e0e0e0;
    padding: 15px 40px; 
    border-radius: 50px;
}
.about_text p {
    line-height: 2em;
    text-indent: 1em;
}
.about_text h2 {
    font-size: 110%;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #5d5d5d;
}
.top_skill {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.skill_icon0, .skill_icon1 {
    display: block;
    width: 60px;
    height: 95px;
    max-width: 100%;
}
.skill_icon0 img ,.skill_icon1 img{
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    max-width: 100%;
}
/* ----------プロフィール　レスポンシブ999px------------- */
#profile_box h1 {
    margin-top: 8px;
}
#profile_img {
    padding-top: 5px;
}
#profile_box {
    padding: 0 20px;
}
.about-text {
    margin-top: 70px;
}
.about-text h2, .skill h2{
    font-size: 150%;
}
.profile-box p{
    font-size: 85%;
}
.skill li {
    max-width: 100%;
}
.skill-box p{
   padding-top: 5px;
}

/* -----------作品　レスポンシブ--------------- */
#works_box {
    padding: 0 10px;
}
.title_font h1 {
    margin-top: 8px;
    font-size: 210%;
} 
#works_box strong {
    font-size: 70%;
}
.bunr_img img{
    max-width: 100%;
    height: auto;
}
.web_sito,
.bunr,
.toresu {
    margin-bottom: 50px;
}
/* -----------作品詳細　レスポンシブ　WEB--------------- */
#works_box_2 {
    padding: 0 10px;
}
#works_box_2 h1 strong {
    font-size: 80%;
}
#works_box_2 h1 {
    margin-top: 8px;
}
.web_sito_contents img{
    max-width: 100%;
    height: auto;
}
.title strong {
    font-size: 150%;
}
/* -------------------------トレース作品------------------------------- */
.t-1 {
    gap: 10%;
}
/* ---------作品詳細　レスポンシブ　バナー-------- */
.banner_contents {
    max-width: 100%;
    height: auto;
}
/* -----------絵画　レスポンシブ--------------- */
#art_box {
    margin: 0 10px;
}
#art_box h1 {
    margin-top: 8px;
}
#art_box strong {
    font-size: 80%;
}
.syoukai_text h2 {
    font-size: 160%;
}
.art_title img,
.art_photo_1 img,
.bond_career img,
.strlap img,
.bond_layout_2
{
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.art_photo_2 img{
    height: auto;
    max-width: 60%;
}
.tao_layout {
    max-width: 100%;
    height: auto;
    margin:  auto;
}
.art_photo_2 {
    max-width: 100%;
    height: auto;
    max-width: 80%;
    gap: 2%;
    text-align: center;
}
.art_contents {
    max-width: 100%;
    height: auto;
}
.bond_career {
    width: 450px;
    padding-top: 60px;
    font-size: 130%;
    max-width: 100%;
    height: auto;
}
.strlap {
    max-width: 90%;
    height: auto;
}
.art_title h2{
    max-width: 100%;
    height: auto;
    font-size: 200%;
}
.art_works_waku {
    max-width: 100%;
    height: auto;
}
.a-1,
.a-4 {
    max-width: 100%;
    height: auto;
}
.art_photo_3 p{
    font-size: 120%;
    padding: 16px 80px;
    max-width: 80%;
    margin: 0 auto;
}
.art_flex img{
    max-width: 100%;
    height: auto;
}
.art_flex p {
    max-width: 80%;
    height: auto;
}
}
@media (max-width:855px) {
/* --------ボンドバ　キーホルダー　テキスト---------------- */
.bond_career {
    padding-top: 45px;
    font-size: 120%;
    max-width: 100%;
    height: auto;
}
/* ----------------- top top  ------------------ */
#top_image {
    padding-top: 30px;
    padding-bottom: 50px;
}
#top_text img {
    max-width: 85%;
    height: auto;
    padding-top: 48px;
}
#top_text p{
    max-width: 230px;
}
.face img {
    max-width: 75%;
    height: auto;
    padding-top: 60px;
}
.shadow img {
    max-width: 65%;
    height: auto;
    padding-top: 10px; 
}
.nav_text {
    padding-top: 48px;
    font-size: 65%;
}
/* top-works */
.works_top_in {
    gap: 5%;
}
.top_bnr_link, .top_sito_link {
    max-width: 370px;
    height: 410x;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 120%;
}
.top_sito_link img{
    max-width: 200x;
    height: auto;
}
.top_bnr_link img{
    max-width: 260x;
    height: auto;
    margin: 0 10px;
}
/* -----------　top artworks --------------- */
.tenji_text p{
    font-size: 140%;
    line-height: 2em;
    text-align: left;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/

.about_photo img {
    width: 340px;
    height: auto;
    max-width: 100%;
    margin: 0 10px;
}
.about_text {
    max-width: 100%;
    margin-top: 0px;
    font-size: 110%;
    text-align: left;
    background-color: #e0e0e0;
    padding: 15px 40px; 
    border-radius: 50px;
}
.about_text p {
    line-height: 2em;
    text-indent: 1em;
}
.about_text h2 {
    font-size: 120%;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #5d5d5d;
}
.top_skill {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
}
.skill_icon0 {
    display: block;
    width: 60px;
    height: 95px;
    max-width: 100%;
}
.skill_icon1 {
    display: block;
    width: 60px;
    height: 97px;
    max-width: 100%;
}
.skill_icon0 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    width: 100%;
}
.skill_icon1 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
}
}
/*------------レスポンシブCSS　768px -------------------*/
@media (max-width:768px) {
header,
#top_image,
#profile_box,
#profile_img,
.art_contents
 {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
header img{
    max-width: 100%;
    height: auto;
    margin: 0;
    padding-top: 0;
}
header h1 {
    padding-top: 0;
}
header {
    display: lock;
}
nav {
    border-radius: 30px;
    padding: 8px 10px 0 10px;
}
nav ul li {
    font-size: 90%;
}
nav ul{
    margin-top: 10px;
    padding-left: 0;
    margin: 0 auto;
    gap: 180px;
}
.detail {
    margin-top: 0;

} 
#top_image {
    padding-top: 30px;
    padding-bottom: 50px;
}
#top_text {
    max-width: 50%;
    height: 100%;
    font-size: 70%;
    padding-left: 20px;
    padding-top: 80px;
}
#top_text img {
    max-width: 85%;
    height: auto;
    padding-top: 0px;
}
#top_text p{
    max-width: 230px;
}
#tamagokuma_illust {
    max-width: 200px;
    height: auto;
}
.face img {
    max-width: 75%;
    height: auto;
    padding-top: 60px;
}
.shadow img {
    max-width: 65%;
    height: auto;
    padding-top: 10px; 
}
.nav_text {
    padding-top: 70px;
    font-size: 55%;
}
/* --------------------- top works -------------------------- */
.works_top_in {
    gap: 2%;
}
.top_bnr_link, .top_sito_link {
    max-width: 330px;
    height: 430px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 120%;
}
.top_sito_link img{
    width: 280px;
    max-width: 100%;
    height: auto;
}
.top_sito_link p {
    padding-top: 37px;
    font-size: 85%;
}
.top_bnr_link p {
    font-size: 85%;
}
.top_bnr_link img{
    width: 260px;
    max-width: 100%;
    height: auto;
}
/* -----------　top artworks --------------- */
.art_work_syoukai {
    display: block;
}
.tenji_photo {
    margin: 0 auto;
    width: 500px;
    max-width: 100%;
}
.tenji_photo img {
    width: 500px;
    height: 380px;
    max-width: 100%;
    height: auto;
}
.tenji_text {
    margin: 0 auto;
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0;
    text-align: center;
    padding: 0 10px;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_text {
    max-width: 100%;
    margin-top: 0px;
    font-size: 110%;
    text-align: left;
    background-color: #e0e0e0;
    padding: 15px 40px; 
    border-radius: 50px;
}
.about_photo img {
    margin-top: 0px;
}
.about_text h2 {
    font-size: 120%;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #5d5d5d;
}
.top_skill {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
}
.skill_icon0, .skill_icon1 {
    display: block;
    width: 60px;
    height: 95px;
    max-width: 100%;
}
.skill_icon0 img, .skill_icon1 img{
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    max-width: 100%;
}
/* -----------プロフィール　レスポンシブ--------------- */
#profile_box strong {
    font-size: 80%;
}
#profile_box img {
    max-width: 100%;
    height: auto;
}
.profile-box {
    line-height: 1.8em;
    font-size: 120%;
}
.skill li {
    margin: 0 auto;
    word-break: normal;
}
.skill {
    max-width: 100%;
}
.skill_icon {
    margin: 0  7px;
    width: 70px;      /* PC時のアイコンサイズ */
    aspect-ratio: 1;  /* 正方形を維持 */
}
.skill_icon img {
    width: 70px;
    height: 70px;
    padding-top: 10px;
}
/* -----------作品　レスポンシブ--------------- */
#works_box h1 {
    margin-top: 8px;
}
#works_box strong {
    font-size: 80%;
}
.web_sito {
    max-width: 100%;
    height: auto;
}
.web_sito,
.bunr,
.toresu {
    margin-bottom: 50px;
}
/* -----------作品　レスポンシブ web --------------- */
.web_sito_2 img {
    padding-left: 0px;
}
.contents p {
    padding-right: 40px;
}
.site_introduction p{
    font-size: 120%;
}
.site_introduction h2 {
    font-size: 140%;
}
.title strong {
    font-size: 140%;
}
/* -------------------------トレース作品------------------------------- */
.t-1 {
    gap: 7%;
    margin-top: 20px;
    margin-bottom: 50px;
}
/* -----------絵画　レスポンシブ--------------- */
.bond_layout {
    display: block;
}
.bond_layout_2 {
    max-width: 100%;
    font-size: 120%;
    height: auto;
}
.bond_layout,
.art_contents{
    text-align: center;
}
#art_works_2 {
    background-color: #d6d8ee;
    border-top-left-radius: 100% 300px;
    border-top-right-radius: 100% 300px;
    padding: 20px;
}
.art_title {
    margin: 8px;
}
.art_title h2{
    max-width: 100%;
    height: auto;
    font-size: 180%;
}
/* .art_flex {
    display: block;
} */
.art_photo_3 p{
    font-size: 100%;
}
.bond_career {
    width: 80%;
    height: auto;
    text-align: left;
    font-size: 100%;
    padding-top: 0px;
    margin: 0 auto;
}
.strlap {
    margin: 0 auto;
    margin-top: 40px;
    width: 80%;
}
/* .art_photo_2 {
    display: block;
} */
.art_flex p {
    max-width: 80%;
}
}
/* -----------レスポンシブcss　642px--------------- */
@media (max-width:642px){
#top_text {
    padding-top: 107px;
}
#top_image {
    display: block;
    margin: 0 auto;
}
#top_text {
    max-width: 95%;
    height: 100%;
    padding-left: 95px;
    padding-top: 20px;
}
#top_text img {
    max-width: 85%;
    height: auto;
    padding-top: 40px;
}
#top_text p{
    max-width: 80%;
    margin: 0 auto;
}
#tamagokuma_illust {
    margin: 0 auto;
}
.face img {
    max-width: 100%;
    height: auto;
    padding-top: 60px;
}
.shadow img {
    max-width: 60%;
    padding-left: 0;
    height: auto;
    padding-top: 13px; 
}
.nav_text {
    padding-top: 0px;
    font-size: 70%;
    margin: 0 auto;
    padding-left: 75px;
    text-align: center;
}
.nav_text p {
    text-align: left;
    margin: 0 auto;
}
.bond_layout {
    padding-top: 0;
    margin-bottom: 0;
}
/* ------------------top works --------------------*/
.works_top_in {
    display: block;
    margin: 0 10px;
}
.top_sito_link {
    margin: 0 auto;
    margin-top: 50px;
}
.top_bnr_link {
    margin: 0 auto;
    margin-top: 50px;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_photo img {
    margin-top: 10px;
    width: 280px;
}
.about_text h2 {
    font-size: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}
.about_text {
    font-size: 90%;
}
/* --------------プロフィールレスポンシブ-------------- */
.skill_icon, .skill_icon1{
    display: block;
    width: 50px;
    height: 85px;
    max-width: 100%;
}
.skill_icon img, .skill_icon1 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    max-width: 100%;
}
.skill-box {
    font-size: 110%;
}
.skill_icon {
    margin: 0  7px;
    width: 70px;      /* PC時のアイコンサイズ */
}
.skill_icon img {
    width: 70px;
    height: 70px;
    padding-top: 0px;
}
}
/*------------レスポンシブCSS　560px -------------------*/
@media (max-width:560px) {
header,
nav,
#top_image,
#profile_box
 {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
header img{
    max-width: 100%;
    height: auto;
    margin: 0;
    padding-top: 0;
}
header h1 {
    padding-top: 0;
    padding-bottom: 10px;
    text-align: center;
}
header h1 img {
    max-width: 100%;
}
header {
    display: block;
}
nav ul{
    font-size: 120%;
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0;
    display: flex;
    border-radius: 0;
    gap: 0;
}

nav ul{
    margin-top: 10px;
    padding-left: 0;
    width: 90%;
    margin: 0 auto;
}
nav ul li {
    width: calc(100% / 3);

}
nav ul li a{
    display: block;
    font-size: 120%;
    padding: 8px 15px;
    text-align: center;
    margin: 0 5px;
    color: #2d2d2d;
    /* background-color: lch(88.37% 11.42 107.36); */
    border-radius: 40px;
}
.nav_text {
    padding-top: 0px;
    font-size:80%;
    margin: 0 auto;
    margin-left: 55px;
    max-width: 100%;
}
.nav_text {
    margin-left: 70px;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_photo img {
    margin-top: 10px;
    width: 200px;
}
.about_text h2 {
    font-size: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}
.about_text {
    padding: 10px 25px;
}
.about_text {
    font-size: 90%;
}
.skill_icon0 {
    display: block;
    width: 45px;
    height: 80px;
    max-width: 100%;
}
.skill_icon1{
    display: block;
    width: 45px;
    height: 85px;
    max-width: 100%;
}
.skill_icon0 img, .skill_icon1 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    max-width: 100%;
}
/* -----------プロフィール　レスポンシブ--------------- */
.art_title2 {
    margin: 0 auto;
}
.skill-box {
    font-size: 150%;
    padding: 0;
}
.skill-box2 {
    line-height: 1.8em;
    font-size: 110%;
    padding: 0;
}
.skill-box {
    font-size: 110%;
}
.skill_icon {
    margin: 0  7px;
    width: 70px;      /* PC時のアイコンサイズ */
}
.skill_icon img {
    width: 70px;
    height: 70px;
    padding-top: 0px;
}
/* --------------------------------------- */
}
/* #top_text {
    padding-top: 30px;
} */
.face img{
    padding-top: 50px;
}
#tamagokuma_illust_about img{
    max-width: 50%;
    height: auto;
    margin: 0 auto;
    margin-top: 20px;
}

.art_title h2 {
    font-size: 150%;
}
/*-------------------- 542px------------------ */
@media (max-width:545px) {
#top_image {
    max-width: 100%;
    height: auto;
    display: block;
    text-align: center;
    padding-top: 0;
    }
#top_text{
    max-width: 80%;
    font-size: 100%;
    padding-left: 0;
    margin: 0 auto;
    padding-top: 20px;
}
.buttn {
    max-width: 70%;
    height: auto;
    margin-top: 20px;
}
#tamagokuma_illust {
    max-width: 50%;
    height: auto;
    margin: 0 auto;
    padding-top: 10px;
}
/* -------------- top artworks------------------------ */
.tenji_text {
    width: 380px;
    max-width: 100%;
    font-size: 90%;
}
}

/*------------レスポンシブCSS　480px -------------------*/
@media (max-width:480px) {
nav {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
#top_image {
    max-width: 100%;
    height: auto;
    display: block;
    text-align: center;
    padding-top: 0;
}
.face img{
    padding-top: 10px;
}
#top_text {
    margin: 0 auto;
    padding-top: 0;
    font-size: 80%;
}
.buttn {
    width: 60%;
}
nav {
    padding:5px 5px;
}
nav ul {
    padding-left: 0;
}
/* nav ul li {
    padding: 0px 5px;
} */
nav ul li a {
    font-size: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    gap: 25%;
    text-align: center;
    /* background-color: rgb(238, 206, 163); */
    border-radius: 30px;
}
#tamagokuma_illust {
    max-width: 40%;
    height: auto;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 20px;
}
.detail {
    font-size: 160%;
}
.nav_text {
    padding-left: 48px;
}
/* トップへ戻るボタン */
.back_top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 20px 12px;
    font-size: 70%;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_in {
    gap: 2%;
}
.about_photo img {
    margin-top: 20px;
    width: 150px;
}
.about_text h2 {
    font-size: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}
.about_text {
    padding: 10px 15px;
    border-radius: 30px;
}
.about_text {
    font-size: 90%;
}
.skill_icon0, .skill_icon1 {
    display: block;
    width: 45px;
    height: 80px;
    max-width: 100%;
    text-indent: 0.5em;
}
.skill_icon0 img, .skill_icon1 img {
    object-fit: contain;  /*アイコンの縦横比固定して枠の中に収める */
    padding-bottom: 10px;
    max-width: 100%;
}
/*-----------------------Top ABOUT　のなか-----------------------------------*/
.about_in {
    gap: 2%;
}
.about_photo img {
    margin-top: 20px;
    width: 120px;
}
.about_text h2 {
    font-size: 100%;
    padding-bottom: 0px;
    padding-top: 10px;
}
.about_text {
    padding: 5px 15px;
    border-radius: 20px;
}
.about_text {
    font-size: 88%;
}
.about_text p {
    line-height: 1.5em;
    text-indent: 0.5em;
}
.skill_icon0, .skill_icon1 {
    display: block;
    width: 45px;
    height: 80px;
    max-width: 100%;
    text-indent: 0.5em;
}
/* -----------WEB作品　レスポンシブ 468px--------------- */
.web_sito p strong,
.bunr p strong,
.toresu p strong {
    font-size: 80%;
}
.web_sito,
.bunr,
.toresu {
    margin-bottom: 60px;
}
.sito_url {
    height: auto;
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: break-word;
}
.title {
    padding-left: 15px;
}
#tamagokuma_illust_about img{
    max-width: 50%;
    height: auto;
    margin: 0 auto;
    margin-top: 20px;
}
.buner_ichiran h2 {
    word-break: keep-all;
    font-size: 120%;
}
/* -----------絵画　レスポンシブ 468px--------------- */
.syoukai_text {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 70%;
}
.art_title {
    padding-top: 50px;
}
.bond_layout {
    padding-top: 0;
    margin-bottom: 0;
}
.bond_career {
    max-width: 100%;
    height: auto;
    font-size: 70%;
}
.bond_layout_2 {
    padding-top: 0;
    padding-bottom: 50px;
    font-size: 100%;
}
.art_photo_3 p{
    font-size: 100%;
    padding: 15px 0px;
}
.art_flex {
    display: block;
}
.art_contents img {
    padding-top: 20px;
}
.art_photo_2 {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
.art_photo_2 img {
    max-width: 100%;
}
.art_title h2 {
    font-size: 120%;
    padding-top: 0px;
}
.art_title {
    margin-top: 0;
}
.strlap {
    margin-top: 0;
}
/* -----------------プロフィール　レスポンシブ-------------------- */
.skill-box {
    font-size: 110%;
}
.skill_icon {
    width: 60px;      /* PC時のアイコンサイズ */
    height: 60px;
}
.skill-box p {
    margin-left: 10px;
}
.skill_icon img {
    width: 60px;
    height: 60px;
    padding-top: 0px;
}
}
/* -----------レスポンシブcss 380px--------------- */
@media (max-width:380px) {
nav ul li {
    padding: 0 5px;
}
nav ul li a {
    font-size: 90%;
    margin: 0 auto;
    padding: 8px 10px;
    text-align: center;
    /* background-color: rgb(238, 206, 163); */
    border-radius: 30px;
}
nav ul a:hover {
    color: aliceblue;
    /* background-color: rgb(234, 166, 98); */
    padding: 8px 10px;
    border-radius: 30px;
}
#top_text {
    max-width: 100%;
}
.nav_text {
    padding-left: 30px;
}
/* -----------------プロフィール　レスポンシブ-------------------- */
.skill-box {
    line-height: 1em;
}
.skill_icon {
    width: 50px;      /* PC時のアイコンサイズ */
    height: 50px;
}
.skill-box p {
    padding-top: 2px;
    font-size: 70%;
    margin-left: 10px;
}
.skill_icon img {
    width: 60px;
    height: 60px;
    padding-top: 0px;
}
/* ------------------ about ------------------------ */
.skill-box, .skill-box2 {
    font-size: 130%;
}
}
/*------------ たまごくま　動かすCSS -------------------*/
@keyframes fluffy {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); } /* 上に15px移動 */
  100% { transform: translateY(0px); }
}

/* 画像への適用 */
.face img {
  animation: fluffy 2s ease-in-out infinite; /* 2秒で無限ループ */
}


/* 拡大・縮小 */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(0.9);
  }
}