@charset "UTF-8";


/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 62.5%;
}



body {
    color: #000;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
    background: url(../img/grass-3089790_1920_2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    
}





/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 0.0rem;
    position: relative;

}
/* ブロックを縦に表示 */
.row {
    display: flex;
    flex-direction: column;
/* margin-bottom: 30px; */
/* margin-left: 30px; */
    width: 100%;
}
.col {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}



/* 768px以上の表示 */
@media ( min-width : 768px ) {
.row {
    display: flex;
    flex-direction: row;
    padding: 0;
}

.col {
    margin-left: 1%;
}
	
.col:first-child { 
    margin-left: 0; 
}

.col.span-4 {
    flex: 0 0 30.6666666667%;
    max-width: 28%;
    width: 350px;
}

.col.span-4 > div {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.col.span-4 > div::after {
    content: attr(data-title);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    /* font-weight: bold; */
    position: absolute;
    font-size: 2rem;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    transition: .3s;
}

.col.span-4:hover > div:after {
    opacity: 1;
}

.row .col.span-9 {
    flex: 0 0 74.0%;
    max-width: 74.0%;
    height: 200px;
    /* padding: 2% 2% 2% 2%; */
}

.row .col.span-12 {
    flex: 0 0 100%;
    max-width: 100%;

}

.pdfbox {
    justify-content: center;
	text-align: center;
    margin: 0 auto;
    width: 45%;
    height: auto;
    background-color: #000000;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
}

.pdfbutton {
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);
}

.pdfbox:hover{
    justify-content: center;
	text-align: center;
    margin: 0 auto;
    width: 45%;
    height: auto;
    background-color: #ff0000;
    /* bottom: 3%;
    transform: translate(3%,3%); */
}

.motto {
    display: flex;
    justify-content: center;
	text-align: center;
    margin: 0 auto 2%;
    width: 20%;
    height: auto;
    background-color: #000000;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);
}


.motto:hover{
    justify-content: center;
	text-align: center;
    margin: 0 auto 2%;
    width: 20%;
    height: auto;
    background-color: #ff0000;
    /* bottom: 3%;
    transform: translate(3%,3%); */
}





.mainkame {
display: flex;
width: 100%;


}


.mainimg {
    display: flex;
}




.maincopy-pc {
    /* display: flex; */
    
    /* width: 700px; */
    line-height: 180%;
    font-size: 5rem;
    margin-top: 100px;
   margin: 100px 30px 30px 0;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: bold;
   letter-spacing: -3px;
    
}

.maincopy-pc >.tanoshi {
    font-size: 7rem;  
    
}


.maincopy-mob {
display: none;
    
}




.maintextbox .maintext{
    font-size: 2rem;
    margin-left: 30px;
}


.mainimg img {
    display: flex;
	width: 600px;
    height: auto;
    margin: auto;
    
}





figcaption{
    display: none;
    }
    
h3 {
        font-size: 1.2em;
        font-weight: bold;
      font-family: 'Noto Sans JP', sans-serif;

    
    }

main {
        margin: 5rem 0 5rem 0;
    }


h2.catch {
        /* text-align: center; */
    color: #000000;
        font-size: 4rem;
        padding: 0;
        text-align: center;
        /* font-family: 'Bebas Neue', sans-serif; */
        /* font-family: 'Bebas Neue', sans-serif;
        font-family: 'Calistoga', cursive; */
        /* font-family: 'Lobster', cursive; */
        font-family: 'Noto Sans JP', sans-serif;
        /* font-family: 'Staatliches', cursive; */
        /* font-family: 'Staatliches', cursive; */
        border-bottom: 3px solid ;
        margin-top: 8%;
        margin-bottom: 4rem;
    }
figure {
        font-size: 1.5rem;
        margin-bottom: 30px;
        } 

.container{
display: block;
flex-direction:row;
}





h4 {
    border-bottom: 2px dotted ;
    margin-bottom: 3rem;
    color: rgb(255, 255, 255);
}

.flow.row {
justify-content: center;
	/* margin-bottom: 3rem; */
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
    /* padding-left: 30px; */
    margin-bottom: 1rem;
    /* font-family: 'Bebas Neue', sans-serif;
    font-family: 'Calistoga', cursive; */
    font-family: 'Noto Sans JP', sans-serif;
    /* font-family: 'Staatliches', cursive; */

}

figcaption{
    display: none;
    font-size: 0.8em;
    margin-left: 10px;
}

small{
    padding: 5px;
}



/* .col.span-4 a img:hover {
    display: flex;
    width: 300px;
gap: 15px;
margin-bottom: 30px;
    height: auto;
    border-radius:5%;
    color: #000000;
} */


/* .col.span-2{
    display: block;
    padding: 0 3%;
} */

.col.span-3{
    display: block;
    padding: 0 15%;
text-align: center;

}

.col.span-3 img{
display: flex;
}





.col.span-1 img{
    display: flex;
    width: 250px;
    height: auto;
    border-radius:10px;
}

.col.span-2 h3{
    display: flex;
    font-size: 2em;

    }

.col.span-3 h3{
    display: flex;
    font-size: 1.2em;
    /* background: linear-gradient(transparent 0, #006c28 0); */
    /* border-bottom: 2px dotted ; */
    margin-bottom: 1.5rem;
    color: rgb(0, 0, 0);
    justify-content: center;
    }


.create-text-title{
    display: flex;
    font-size: 1em;
    letter-spacing: 0px;
    border-bottom: 2px dotted ;
    /* background: linear-gradient(transparent 60%, yellow 30%);
            width: 25%; */
    /* border-bottom: 2px dotted ; */
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    color: #000000;
    justify-content: center;
    
}
.create-text{
    display: flex;
    font-size: 0.8em;
    /* font-family: 'Noto Sans JP', sans-serif; */
    color: #ffffff;
    justify-content: center;
}

.col.span-2{
    display: block;
    padding: 0 20% 0 0;
}

.col.span-9{
    display: block;
    width: 100%;
    padding: 0 3%;
}

.center {

    justify-content: center;
	text-align: center;
    margin: 0 auto;
    width: 15%;
    height: auto;
    background-color: #000000;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
    margin-bottom: 30px;

}

/* button.motto {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    color: rgb(255, 255, 255);

}

button.motto {
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);

} */


.center:hover{
    justify-content: center;
	text-align: center;
    margin: 0 auto;
    width: 15%;
    height: auto;
    background-color: #ff0000;
    margin-bottom: 30px;
    /* bottom: 3%;
    transform: translate(3%,3%); */
}

.aboutme-text {
    /* justify-content: start; */
    font-size: 1.5rem;
width: 500px;
    /* padding: 3% 7%; */
    /* width: 80%; */
    /* padding-left: 30px; */
}




.container{
    display: block;
    flex-direction:row;
    }
    
    
    
    
    
    h4 {
        border-bottom: 2px dotted ;
        margin-bottom: 3rem;
        color: rgb(255, 255, 255);
    }
    
    .flow.row {
    justify-content: center;
    margin-bottom: 20px;
    }
    
    h3 {
        font-size: 1.2em;
        font-weight: bold;
        /* padding-left: 30px; */
        margin-bottom: 1rem;
        /* font-family: 'Bebas Neue', sans-serif;
        font-family: 'Calistoga', cursive; */
        font-family: 'Noto Sans JP', sans-serif;
        /* font-family: 'Staatliches', cursive; */
    
    }
    
    figcaption{
        display: none;
        font-size: 0.8em;
        margin-left: 10px;
    }
    
    small{
        padding: 5px;
    }
    
    /* .col.span-2{
        display: block;
        padding: 0 3%;
    } */
    
    .col.span-3{
        display: block;
        padding: 0 15%;
    text-align: center;
    
    }
    
    .col.span-3 img{
    display: flex;
    }
    
    .col.span-4 img{
        display: flex;
        width: 100%;
        height: auto;
        /* max-width: 60%; */
    
    
        /* width: 100px; */
    }
    
    
    
    
    .col.span-1 img{
        display: flex;
        width: 250px;
        height: auto;
        border-radius:10%;
        /* max-width: 60%; */
        top: 50%;
    left: 50%;
    transform: translate(60%,-0.3%);
    
        /* width: 100px; */
    }
    
    .col.span-2 h3{
        display: flex;
        font-size: 2em;
    
        }
    
    .col.span-3 h3{
        display: flex;
        font-size: 1.2em;
        /* background: linear-gradient(transparent 0, #006c28 0); */
        /* border-bottom: 2px dotted ; */
        margin-bottom: 1.5rem;
        color: rgb(0, 0, 0);
        justify-content: center;
        }
    
    
    .create-text-title{
        display: flex;
        font-size: 1em;
        letter-spacing: 0px;
        border-bottom: 2px dotted ;
        /* background: linear-gradient(transparent 60%, yellow 30%);
                width: 25%; */
        /* border-bottom: 2px dotted ; */
        margin-bottom: 1rem;
        margin-top: 1.5rem;
        font-weight: bold;
        font-family: 'Noto Sans JP', sans-serif;
        color: #000000;
        justify-content: center;
        
    }
    .create-text{
        display: flex;
        font-size: 0.8em;
        /* font-family: 'Noto Sans JP', sans-serif; */
        color: #000000;
        justify-content: center;
    }
    
    .col.span-2{
        display: block;
        padding: 0 20% 0 0;
    }
    
    .col.span-9{
        display: block;
        width: 100%;
        padding: 0 3%;
    }
    
    
    
    button.more{
        display: flex;
        font-size: 1.5rem;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: bold;
    }
    
    .aboutme-text {
        font-size: 1.5rem;
    width: 500px;
    }
    
    
    .contents-text {
        /* justify-content: start; */
        font-size: 1.5rem;
        letter-spacing: 1px;
        line-height: 22px;
        color: #000000;
        justify-content: center;
        /* width: 400px; */
        /* padding-left: 30px; */
    }

    .contents-text-last {
        font-size: 1.5rem;
        letter-spacing: 1px;
        line-height: 22px;
        color: #000000;
        justify-content: center;
        margin-bottom: 8%;
    }




    .aboutmorebox {
        justify-content: center;
        text-align: center;
        margin: 4% 0 0 0;
        width: 30%;
        height: auto;
        background-color: #000000;
        border-radius:5px;
        transition: 0.2s;
        padding: 5px;
    }
    
    .aboutmorebutton {
        font-family: 'Noto Sans JP', sans-serif;
        color: rgb(255, 255, 255);
    }
    
    .aboutmorebox:hover{
        justify-content: center;
        text-align: center;
        margin: 4% 0 0 0;
        width: 30%;
        height: auto;
        background-color: #ff0000;
        /* bottom: 3%;
        transform: translate(3%,3%); */
    }


    

 

/* ---------------ABOUT-PC版！！------------------------------------------------- */




.about-box {
    display: flex;
    margin: 5% 5% 0 15%;

    }


.aboutme-myphoto img {
    display: flex;
    justify-content: center;
    width: 250px;
    height: auto;
    border-radius:10px;

}

.aboutme-myname h3{
    display: flex;
    font-size: 2em;
    margin: 0 0 3% 15%;

    }

.aboutme-text-aboutpage {
    width: 530px;
    font-size: 1.8rem;
    margin: 0 0 0 15%;
}


.aboutme-img {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0 5% 0 5%;
}


.aboutme-img-last {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0 5% 4% 5%;

}

.aboutmek01 img{
    width: 100%;
    border-radius: 10px;
}

.aboutstory-text {
width: 50%;
    margin: 0 10% 0 10%;
}



.aboutmestory-text {
    width: 600px;
    margin: 0 auto 0;
    padding: 5% 10% 0 0;
}


.aboutmestory-text p {
    font-size: 1.7rem;  
    
}

.border {
color: #000000;
border-bottom: 3px dotted ;
    margin-top: 50px;
    margin-bottom: 4rem;
}

h2.catch-berief {
    /* text-align: center; */
color: #000000;
    font-size: 4rem;
    padding: 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    border-bottom: 3px solid ;
    margin-top: 8%;
    margin-bottom: 4%;
}

.history-box-pc {
    display: flex;


}

.history-text-pc {
    padding: 0 10%;
    margin: 0 auto 0%;
    font-size: 1.8rem;
    text-align: center;
}

.history-box-mob {
    display: none;

}


.skill-box-mob {
    display: none;
}
  
.skill-box-pc {
    display: flex;

}

.skill-text-pc {
    padding: 0 10%;
    margin: 0 auto 10%;
    font-size: 1.8rem;
    text-align: center;
}







/* ---------------WORKS-PC版！！------------------------------------------------- */

.work-box {
    display: flex;
    width: 100%;
    height: auto;
margin: 0 2%;
    gap: 2%;

}

.work-img {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.work-title {
align-items: center;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1% -4% 1%;
text-align: center;
}


.work-text {
width: 400px;
font-size: 1.5rem;
margin: 1% 8% 2%  ;

}


.work-img img{

width: 90%;
border-radius: 10px;

}



.work-img > div {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.work-img > div::after {
    content: attr(data-title);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    position: absolute;
    font-size: 2rem;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    transition: .3s;
}


.demopage {
    display: flex;
    justify-content: center;
	text-align: center;
    margin: 2% 28% 4%;
    width: 40%;
    height: auto;
    background-color: #7a7a7a;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);
}






.demopage:hover{
    justify-content: center;
	text-align: center;
    margin: 2% 28% 4%;
    width: 40%;
    height: auto;
    background-color: #ff0000;
    /* bottom: 3%;
    transform: translate(3%,3%); */
}














    }
    
    




























/* ----------------------ここまでPC設定！！！------------------------------------ */



/* ------------------------------------モバイル表示 --------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 550px) {
  h1 { font-size: 4.0rem; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 3.2rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}





p {
  margin-top: 0; }

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #c1c0c0;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #ffffff;
    text-decoration-line: none;
}
/* a:hover { 
    color: var(--linkhover-color);
}
a img:hover {
	opacity: 0.8;
} */

.underline {
	border-bottom: 3px solid var(--base-color);
	padding-bottom: 0.5rem;
}






/*ヘッダー
-------------------------------------*/
.head {
	display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;

}

.head h1 { 
    padding: 1rem 0;
	font-weight: 700;
	letter-spacing: 3px;
}
.snsbox {
	margin-left: auto;
	font-size: 3.0rem;
	padding: 1rem 0 0 0;
}


nav ul {
	display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
	margin-bottom: 0.5rem;
    background-color: #000000;

}
nav li {
    display: block;
    flex: 0 0 15%;
}
nav li a {
    text-decoration: none;
    text-align: center;
}
nav a:hover {
    text-decoration: none;
    color: #d9ff03ca;
    transition: 0.3s;
}
nav a {
    padding: 1rem;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
    background: #000000;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 99999;
}
}

@media screen and (max-width: 768px){

nav ul {
	flex-direction: column;

}


/*　ハンバーガーボタン　----------------------------------------------------------*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 12px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #555;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 10px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  
  nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #fff;
    background: rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
  }
  
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
    background :#ddd;
  }
  
  nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 1em 0;
    text-decoration :none;
  }
  
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
    opacity: 100;
  
  }





/* モバイル TOPページ-------------------------------------------------------------------------------- */

body {
    color: #000;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
    background: url(../img/grass-3089790_1920-3.jpg);
    background-repeat: no-repeat;
    background-size: 100vh;
    background-attachment: fixed;
    background-position: center;
    
}

body::before {
    background: url(../img/grass-3089790_1920-3.jpg) no-repeat center;/* 画像（ここにfixedは入れない） */
    background-size: cover;/* cover指定できる */
    content: "";
    display: block;
    position: fixed;/* 擬似要素ごと固定 */
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;/* 横幅いっぱい */
    height: 100vh;/* 縦幅いっぱい */
  }



.mainkame{
    display: flex;
    flex-direction: column;
}

.maincopy-mob {
    line-height: 190%;
    font-size: 3rem;

   margin: 0 auto 6%;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: bold;
   letter-spacing: -2.5px;
   text-align: center;
    
}

.maincopy-mob >.tanoshi {
    margin-top: 100px;
    font-size: 5rem; 
    text-align: center;
    
}


.maincopy-pc {
display: none;
    
}



.maintextbox .maintext{
    display: flex;
    text-align: center;
    margin: 0 auto 3% ;
    width: 300px;
    font-size: 1.3rem;

}

.mainimg img {
    display: flex;
	width: 300px;
    height: auto;
    margin: auto;
    
}

.pdfbox {
    justify-content: center;
	text-align: center;
    margin: 10% auto 0;
    width: 30%;
    height: auto;
    background-color: #000000;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
}

.pdfbutton {
    font-size: 1.3rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);
}


h2.catch {
    /* text-align: center; */
color: #000000;
    font-size: 4rem;
    padding: 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    border-bottom: 3px solid ;
    margin-top: 15%;
    margin-bottom: 5%;
}

.col.span-1 img{
    display: flex;
    width: 250px;
    height: auto;
    border-radius:10px;
    margin: 0 auto 2%;

}

.col.span-2 h3{
    display: flex;
    justify-content: center;
    font-size: 1.5em;

    }

small{
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    text-align: center;
}


.aboutme-text {
font-size: 1.5rem;
width: 300px;
margin: 2% auto;
}

.container > col.span-4 {
    display: flex;
    width: 350px;
}


col.span-4 {
    flex: 0 0 30.6666666667%;
    max-width: 28%;
    width: 350px;
    

}

.col.span-4 > div {
    overflow: hidden;
    
 
}
.col.span-4 img{
    display: flex;
    width: 80%;
    height: auto;
    margin: 0 auto 5%;
    border-radius: 10px;

}

figcaption{
    display: none;
    }



    .aboutmorebox {
        justify-content: center;
        text-align: center;
        margin: 4% auto 0;
        width: 30%;
        height: auto;
        background-color: #000000;
        border-radius:5px;
        transition: 0.2s;
        padding: 5px;
    }
    
    .aboutmorebutton {
        font-family: 'Noto Sans JP', sans-serif;
        color: rgb(255, 255, 255);
    }
    





    .motto {
        display: flex;
        justify-content: center;
        text-align: center;
        margin: 0 auto 2%;
        width: 60%;
        height: auto;
        background-color: #000000;
        border-radius:5px;
        transition: 0.2s;
        padding: 5px;
        font-family: 'Noto Sans JP', sans-serif;
        color: rgb(255, 255, 255);
    }
    
    


    .col.span-3 h3{
        display: flex;
        width: 80%;
        font-size: 1em;
        margin: 0 auto 1%;
        color: rgb(0, 0, 0);
        justify-content: center;
        }

 .contents-text {
            /* justify-content: start; */
            font-size: 1.5rem;
            letter-spacing: 1px;
            line-height: 22px;
            color: #000000;
            justify-content: center;
            width: 80%;
            margin: 0 auto 2%;

        }

 .contents-text-last {
            font-size: 1.5rem;
            letter-spacing: 1px;
            line-height: 22px;
            color: #000000;
            justify-content: center;
            width: 80%;
            margin: 0 auto 20%;
        }







/* モバイル ABOUTページ-------------------------------------------------------------------------------- */



.aboutme-myphoto img {
    display: flex;
    margin: 10% auto 10%;
    width: 200px;
    height: auto;
    border-radius:10px;

}

.aboutme-myname small{
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
    
}


.aboutme-myname h3{
font-size: 1.5em;
text-align: center;
margin: 0 auto;

}

.aboutme-text-aboutpage {
    width: 350px;
    font-size: 1.8rem;
    margin: 3% auto;
}


.aboutme-img {
    display: flex;
    width: 80%;
    height: auto;
    margin: 0 auto;
}


.aboutme-img-last {
    display: flex;
    width: 80%;
    height: auto;
    margin: 0 auto;

}

.aboutmek01 img{
    width: 100%;
    border-radius: 10px;
}




.aboutmestory-text {
    width: 80%;
    margin: 2% auto 0;

}


.aboutmestory-text p {
    font-size: 1.7rem;  
    
}

.border {
color: #000000;
border-bottom: 3px dotted ;
    margin-top: 50px;
    margin-bottom: 4rem;
}

h2.catch-berief {
    /* text-align: center; */
color: #000000;
    font-size: 4rem;
    padding: 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    border-bottom: 3px solid ;
    margin-top: 8%;
    margin-bottom: 4%;
}

/* .history-box {
    display: flex;

    width: 80%;
    margin: 10% 15% 30%;
}

.history-text {
    font-size: 1.5rem;
    text-align: center;
}

.history{
    display: block; 
    justify-content: center;
    line-height: 30px;
transform: translate(10%,-50%);

  } */




.history-box-pc {
    display: none;
}
  
.history-box-mob {
    display: flex;

}

.history-text-mob {
    padding: 0 10%;
    margin: 0 auto 0;
    font-size: 1.5rem;
    text-align: center;
}









.skill-box-pc {
    display: none;
}
  
.skill-box-mob {
    display: flex;

}

.skill-text-mob {
    padding: 0 10%;
    margin: 0 auto 30%;
    font-size: 1.5rem;
    text-align: center;
}






/* モバイル ABOUTページ-------------------------------------------------------------------------------- */



.work-box {
    display: flex;
    width: 80%;
    height: auto;
    margin: 0 10% 0 15%;

}

.work-img {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.work-title {
align-items: center;
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
margin: 1% 0% 0 -5%;
text-align: center;
}




.work-text {
width: 280px;
font-size: 1.5rem;
margin: 0 12% 0 4% ;

}

.work-img img{
width: 90%;
border-radius: 10px;
margin: 10% auto 0  ;

}


.work-img > div {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.work-img > div::after {
    content: attr(data-title);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    position: absolute;
    font-size: 2rem;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    transition: .3s;
}


.demopage {
    display: flex;
    justify-content: center;
	text-align: center;
    margin: 4% 28% 4%;
    width: 40%;
    height: auto;
    background-color: #7a7a7a;
    border-radius:5px;
    transition: 0.2s;
    padding: 5px;
    font-size: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: rgb(255, 255, 255);
}


























}






/*フッター
-------------------------------------*/
footer {
    background-color: var(--white-color);
    padding: 3rem 0;
}
footer h5 {
    border-bottom: 1px solid var(--border-color);
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--white-color);
}
.copyright a {
    color: var(--base-color);
    text-decoration: none;
	display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background: var(--link-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: var(--linkhover-color);
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}