@charset "utf-8";
/* CSS Document */

html{
font-size: 100%;
overflow-x: hidden;
scroll-behavior: smooth;/*スムーススクロール*/
}
body{
width: 100%;
margin: 0 auto;
overflow-x: hidden;
font-family: 'Noto Serif JP', serif;
}
img{
max-width: 100%;
max-height: 100%;
text-align: center;
}

/*header*/
.header{
width: 100%;
height: 600px;
background-image: url("../portfolio-assets/top.jpeg");
background-size: cover;
}
h1{
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
font-size: 36pt;
color: #830f91;
margin: 150px auto;
line-height: 80px;
}
.main-nav{
display: flex;
justify-content: flex-end;
text-decoration: none;
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30pt;
color: #d9127b;
text-align: right;
list-style: none;
padding: 10px 40px;
}
.main-nav a{
  color: #d9127b;
  text-decoration: none;
  margin: 20px 0 20px 50px;
}
/*profile
-----------------------------------------------*/
.profile-box{
margin: 100px;
text-align: center;
padding: 0 120px;
}
h2{
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 36pt;
text-align: center;
border-bottom: 3px solid #dc7daf;
}
.profile-box > img{
margin: 40px 0 0 0;
}
.profile-lead{
font-size: 11pt;
line-height: 28pt;
margin-top: 20px;
}
.profile-lead > span{
font-size: 18pt;
}
h3{
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24pt;
text-align: center;
margin-top: 60px;
}
/*skill
------------------------------------------*/
.skill-box{
margin: 200px 100px 100px 100px;
padding: 0 120px;
}
.skillttl{
font-size: 16pt;
font-weight: 500;
}
.skillttl > span{
font-size: 16pt;
color: #dbe056;
padding-left: 20px;
}
.skill-lead{
font-size: 11pt;
padding-top: 10px;
}
.skill-set{
display: flex;
margin: 50px 0 80px 0;
}
.skill-leadbox{
margin-left: 20px;
}
/*works
--------------------------------------------*/
.works-box{
margin: 100px;
padding: 0 120px;
text-align: center;
}
.webttl{
font-size: 20pt;
font-weight: 500;
text-align: center;
}
.webrink{
font-size: 16pt;
text-align: center;
}
.web-lead{
font-size: 11pt;
text-align: left;
line-height: 28pt;
margin-top: 50px;
margin-bottom: 100px;
}
.web-lead > span{
font-size: 13pt;
font-weight: 800;
}

/*tabの形状
---------------------------------------------------*/
.tab{
	display: flex;
    justify-content: center;
	flex-wrap: wrap;
    list-style: none;
}
.tab li a{
	display: block;
	background:#fff;
	margin:0 2px;
	padding:10px 20px;
    color: black;
    text-decoration: none;
    font-size: 16pt;
    border-radius: 10%;
}
.tab li a:hover{
color: #d9127b;
}
/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*logo・EC
-----------------------------------------------*/
.logo-box,.ec-box,.youtube-box{
text-align: center;
}
.logottl,.ecttl,.youtubettl{
font-size: 20pt;
font-weight: 500;
text-align: center;
}
.logo-lead,.ec-lead{
font-size: 11pt;
text-align: left;
line-height: 28pt;
margin-top: 50px;
margin-bottom: 100px;
}
.logo-lead > span,.ec-lead > span{
font-size: 13pt;
font-weight: 800;
}
.logo-imgbox{
margin-bottom: 200px;
}
.ec-imgbox,.youtube-imgbox{
margin-bottom: 70px;
}
.logo-imgbox > ul ,.banner-imgbox> ul ,.poster-imgbox > ul ,.ec-imgbox > ul,.youtube-imgbox > ul{
list-style: none;
display: flex;
justify-content: center;
}

/*画像ポップアップ*/

/**全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*banner・poster
-----------------------------------------------*/
.banner-box,.poster-box{
text-align: center;
}
.bannerttl,.posterttl{
font-size: 20pt;
font-weight: 500;
text-align: center;
}
.banner-lead,.poster-lead{
font-size: 11pt;
text-align: left;
line-height: 28pt;
margin-top: 50px;
margin-bottom: 100px;
}
.banner-lead > span,.poster-lead> span{
font-size: 13pt;
font-weight: 800;
}


/*footer*/
.footer{
width: 100%;
height: 347px;
text-align: center;
background-image: url("../portfolio-assets/footer.jpeg");
background-size: cover;
}
.copyright{
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10pt;
padding: 160px 0;
}

/*ページトップリンク
--------------------------------------*/
/**リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background: #d9127b;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #830f91;
}

@media screen and (max-width:768px) {
 #page-top a:hover{
	background:#942D2F;
}   
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}

/*検証のためのCSS*/
section{
padding: 500px 0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
.main-nav {
    justify-content: center;
    font-size: 20pt;
    padding: 10px 17px;
}
.main-nav a {
    color: #d9127b;
    text-decoration: none;
    margin: 0 30px;
}
h1 {
    margin: 150px auto;
    font-size: 30px;
}
h2{
font-size: 30px;
}
.header {
    background-position: center;
}
.profile-lead {
    font-size: 10pt;
}
.profile-box{
margin: 130px 0 0 0;
padding: 0 0 0 0;
}
.skill-set {
    display: block;
    margin: 50px 0 80px 12px;
    
}
.skill-box{
margin: 130px 0 0 0;
padding: 0 0 0 0;
}
.skill-lead {
    font-size: 10pt;
}
.works-box{
margin: 130px 0 0 0;
padding: 0 0 0 0;
}
.webttl {
    font-size: 16pt;
}
.wed-lead {
    font-size: 10pt;
}
.webrink {
    font-size: 10pt;
}
.logottl,.ecttl {
    font-size: 16pt;
}
.logo-imgbox > ul ,.ec-imgbox > ul{
    list-style: none;
    display: block;
}
.copyright {
    padding: 50px 0;
}
.footer {
    height: 130px;
}
.tab li a {
    font-size: 11pt;
}


}